feat: APPS 3110 Assemble Blog Listing page (#101)

* wip

* wip

* wip: update logic for data images; adjust page styling

* fix: parse article categories

* wip: fix infinite scrolling

* task: code cleanup

* update: add displaySummary field to article gql

* test: add basic cypress test

* wip: add pageSummary toggle logic

* task: update component library to 3.45.0

* add BlockCard ftva variant

* fix: linting, remove v-html directive

* update library package to 3.45.1

* update CSS after component pkg update

* Add more conditions to cypress test

* fix: remove custom rich-text padding-right

* remove console statements

* fix: ux/css  updates

* update query to incl. categories for featured artciles

* fix: display featured articles' categories

* fix: add page SectionHeaders with h3

* fix: remove unneeded css values

* update featured blogs section title on mobile

* update featuredArticles query with alternativeTitle field

* add logic to parse alternate richtext featuredArticle title

* update preview watcher to track pageTitle

---------

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

Author: tinuola

cypress/e2e/blogListPage.cy.js

@@ -0,0 +1,31 @@
+Cypress.on('uncaught:exception', () => { return false })
+
+describe('Blog Listing page', () => {
+  beforeEach(() => {
+    cy.visit('/blog')
+  })
+
+  it('Visits Blog Listing page', () => {
+    cy.getByData('blog-page-title').should('be.visible')
+
+    cy.getByData('featured-blog-0').should('be.visible')
+
+    cy.getByData('featured-blog-1').should('be.visible')
+
+    cy.getByData('featured-blog-2').should('be.visible')
+
+    cy.getByData('latest-blogs').should('be.visible')
+
+    cy.percySnapshot('eventslistpage', { widths: [768, 992, 1200] })
+  })
+
+  it('Shows only one featured blog in mobile view', () => {
+    cy.viewport(750, 720)
+
+    cy.getByData('featured-blog-0').should('be.visible')
+
+    cy.getByData('featured-blog-1').should('not.be.visible')
+
+    cy.getByData('featured-blog-2').should('not.be.visible')
+  })
+})

gql/queries/FTVAArticleList.gql

@@ -7,26 +7,20 @@ query FTVAArticleList($slug: [String!]) {
     sectionHandle
     title: titleGeneral
     summary
+    displaySummary
     ftvaFeaturedArticles {
       title
+      ftvaAlternativeTitle
       postDate
+      articleCategories {
+        title
+      }
       ftvaHomepageDescription
       uri
       ftvaImage {
         ...Image
       }
     }
   }
-  entries(section: ["ftvaArticle"], orderBy: "postDate DESC") {
-    typeHandle
-    id
-    title
-    postDate
-    ftvaHomepageDescription
-    uri
-    ftvaImage {
-      ...Image
-    }
-  }
 }
 

package.json

@@ -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.44.0"
+    "ucla-library-website-components": "3.45.1"
   },
   "engines": {
     "pnpm": "^9.12.1"