feat: APPS-902 impact report (#485)

* feat: initial commit

* feat: add craft data  to title, letter, portrait and flexible page blocks

* fix: Add block fragment for gridgallerycards flexible blocks to impact report FBP query

* test: fix impact report test

* fix: package-lock.json merge conflict

* fix: update vue component library package version

* fix: remove icon from query

cypress/integration/impactreportpage.spec.js

@@ -0,0 +1,34 @@
+describe('Impact Report Page', () => {
+    it('Visit the Impact Report Page', () => {
+        cy.visit('/impact')
+
+        // UCLA Library brand
+        cy.get('.logo-ucla').should('be.visible')
+
+
+        // Ginny's Letter
+        cy.get('h1')
+            .should('have.class', 'intro')
+        // cy.get('.signature').should('contain','Virginia Steel')
+
+        // // Main story/ banner data
+        // cy.get('.banner').should('contain','Read full story')
+        // cy.get('.media-video').should('be.visible')
+
+        // // featurettes
+        // cy.get('.block-highlight').should('have.length','9')
+
+        // cy.get('.divider').should('have.length','2')
+
+        // cy.get('h2.title')
+        //     .should('contain', '2020-21: An Academic Year Like No Other')
+        // cy.get('.sub-section-grid')
+        //     .should('have.descendants','.grid-gallery-subtitle')
+        //     .and('have.descendants','.grid-gallery')
+        // cy.get('.grid-gallery').find('img').last().should('have.attr','src','https://static.library.ucla.edu/ucla-library_nakatani-bookplate-crop.jpg')
+        // cy.get('.credits').should('be.visible')
+
+        cy.percySnapshot({ widths: [768, 992, 1200] })
+
+    })
+})

gql/fragments/BlockGridGalleryCardsFragment.gql

@@ -0,0 +1,37 @@
+fragment BlockGridGalleryCardsFragment on ElementInterface {
+     ... on impactReportFpb_gridGalleryCards_BlockType {
+        id
+        typehandle
+        subtitle: titleGeneral
+        summary
+        gridGalleryCards {
+            ... on gridGalleryCards_internalContent_BlockType {
+                id
+                contentLink {
+                    contentType: sectionHandle
+                    headlineText: title
+                    snippet: summary
+                    to: uri
+                    heroImage {
+                        ... on heroImage_heroImage_BlockType {
+                            image {
+                                ...Image
+                            }
+                        }
+                    }
+                }
+                featured
+            }
+            ... on gridGalleryCards_externalContent_BlockType {
+                id
+                featured
+                headlineText: titleGeneral
+                snippet: summary
+                image {
+                    ...Image
+                }
+                to: externalLink
+            }
+        }
+    }
+}

gql/fragments/BlockImpactNumberCardsFragment.gql

@@ -0,0 +1,16 @@
+fragment BlockImpactNumberCardsFragment on ElementInterface {
+    ... on impactReportFpb_impactNumberCards_BlockType {
+        id
+        typehandle
+        sectionSummary: summary
+        sectionTitle: titleGeneral
+        impactNumberCards {
+            ... on impactNumberCards_impactNumberCard_BlockType {
+                id
+                title: titleGeneral
+                text: description
+                impactNumber
+            }
+        }
+    }
+}

gql/fragments/collections/ImpactReportFpb.gql

@@ -0,0 +1,52 @@
+#import "~/gql/fragments/BlockBannerFeaturedFragment"
+#import "~/gql/fragments/BlockCallToActionFragment"
+#import "~/gql/fragments/BlockSimpleCardsFragment"
+#import "~/gql/fragments/BlockPullQuoteFragment"
+#import "~/gql/fragments/BlockMediaGalleryFragment"
+#import "~/gql/fragments/BlockMediaWithTextFragment"
+#import "~/gql/fragments/BlockImpactNumbersCarouselFragment"
+#import "~/gql/fragments/BlockCardWithImageFragment"
+#import "~/gql/fragments/BlockHighlightFragment"
+#import "~/gql/fragments/BlockImpactNumberCardsFragment"
+#import "~/gql/fragments/BlockGridGalleryCardsFragment"
+
+fragment ImpactReportFpb on ElementInterface {
+    blocks: impactReportFpb {
+        id
+        typeHandle
+
+        ... on impactReportFpb_bannerFeatured_BlockType {
+          ...BlockBannerFeaturedFragment
+        }
+        ... on impactReportFpb_callToAction_BlockType {
+          ...BlockCallToActionFragment
+        }
+        ... on impactReportFpb_simpleCards_BlockType {
+          ...BlockSimpleCardsFragment
+        }
+        ... on impactReportFpb_pullQuote_BlockType {
+          ...BlockPullQuoteFragment
+        }
+        ... on impactReportFpb_mediaWithText_BlockType {
+          ...BlockMediaWithTextFragment
+        }
+        ... on impactReportFpb_mediaGallery_BlockType {
+          ...BlockMediaGalleryFragment
+        }
+        ... on impactReportFpb_impactNumbersCarousel_BlockType {
+          ...BlockImpactNumbersCarouselFragment
+        }
+        ... on impactReportFpb_impactNumberCards_BlockType {
+          ...BlockImpactNumberCardsFragment
+        }
+        ... on impactReportFpb_highlight_BlockType {
+          ...BlockHighlightFragment
+        }
+        ... on impactReportFpb_gridGalleryCards_BlockType {
+          ...BlockGridGalleryCardsFragment
+        }
+        ... on impactReportFpb_cardWithImage_BlockType {
+          ...BlockCardWithImageFragment
+        }
+    }
+}

gql/queries/ImpactReport.gql

@@ -1,9 +1,57 @@
+#import "~/gql/fragments/Image"
+#import "~/gql/fragments/collections/ImpactReportFpb"
+
 query ImpactReport($path: [String!]) {
-    entry(section: "impactReport", uri: $path, orderBy:"postDate desc") {
-        ... on impactReport_impactReport_Entry {
-        id
-        title
-        to: uri
+  entry(section: "impactReport", uri: $path, orderBy:"postDate desc") {
+    ... on impactReport_impactReport_Entry {
+      id
+      title
+      to: uri
+      portrait: image {
+        ...Image
+      }
+      text: richText
+
+      ...ImpactReportFpb
+
+      timelineTitle: titleGeneral
+      timelineGallery: impactReportTimeline {
+        ... on impactReportTimeline_gridGalleryCards_BlockType {
+          id
+          subtitle: titleGeneral
+          summary
+          gridGalleryCards {
+            ... on gridGalleryCards_internalContent_BlockType {
+              id
+              featured
+              contentLink {
+                contentType: sectionHandle
+                headlineText: title
+                snippet: summary
+                to: uri
+                heroImage {
+                  ... on heroImage_heroImage_BlockType {
+                    image {
+                      ...Image
+                    }
+                  }
+                }
+              }
+            }
+            ... on gridGalleryCards_externalContent_BlockType {
+              id
+              featured
+              to: externalLink
+              headlineText: titleGeneral
+              snippet: summary
+              image {
+                ...Image
+              }
+            }
+          }
         }
+      }
+      acknowledgements
+    }
   }
 }