feat: APPS-3051 Update Event Index Styling (#87)

* wip

* wip: layout, responsiveness of dateFilter, filterDropdown comps

* Update base-calendar width and breakpoints

* Duplicate filters-wrapper for desktop, mobile view

* update lib-components to 3.43.3

* style: update filters after lib-components update

* remove ES data toggle code, styles

* add basic cypress test

* adjust tagFilters input height

* Add sample test for calendar toggle

* disable calendar toggle test

* update lib-components to 3.43.4

* remove unneeded css rule

* update test for calendar toggle

* test: fix typo, update syntax

---------

Co-authored-by: tinuola <[email protected]>

Author: tinuola

cypress/e2e/eventListPage.cy.js

@@ -0,0 +1,39 @@
+Cypress.on('uncaught:exception', () => { return false })
+
+describe('Events Listing page', () => {
+  it('Visits Events Listing page', () => {
+    cy.visit('/events')
+
+    cy.getByData('date-filter').should('be.visible')
+
+    cy.getByData('filters-dropdown').should('be.visible')
+
+    cy.getByData('tabbed-content').should('be.visible')
+
+    cy.percySnapshot('eventslistpage', { widths: [768, 992, 1200] })
+  })
+})
+
+describe('Events Listing page', () => {
+  it('Toggles tab to calendar view', () => {
+    // Calendar is visible at 1025px and above
+    cy.viewport(1280, 720)
+
+    cy.visit('/events')
+
+    cy.get('.tab-list-header').should('be.visible')
+
+    cy.get('[data-test="list-view"]').should('be.visible')
+
+    cy.get('[data-test="tabbed-content"]').should('be.visible')
+
+    cy.get('#tab-calendar-view').click()
+
+    cy.get('[data-test="calendar-view"]').should('be.visible')
+  })
+})
+
+// ToDo: Additional UI tests
+// DateFilter & FilterDropdown interactions:
+// Select date range
+// Select filters

package.json

@@ -20,11 +20,11 @@
     "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.5.5",
     "@vue-a11y/skip-to": "^3.0.3",
+    "@vueuse/core": "^11.1.0",
     "nuxt": "^3.13.2",
     "vue": "^3.5.12",
     "vue-router": "^4.4.3",
-    "vuetify": "^3.7.4",
-    "@vueuse/core": "^11.1.0"
+    "vuetify": "^3.7.4"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
@@ -42,7 +42,7 @@
     "nuxt-graphql-request": "^7.0.5",
     "sass": "^1.66.1",
     "ucla-library-design-tokens": "^5.28.0",
-    "ucla-library-website-components": "3.43.2"
+    "ucla-library-website-components": "3.43.4"
   },
   "engines": {
     "pnpm": "^9.12.1"