Feature/edu collections block link card (#634)

* adding styles for Collection cards in search results * adding search grid results styles for collection link card * fixing vue build error * changing specialStyles to useFeaturedStyles, and updating with latest main
nasa-jpl · Sep 24, 2024 · 2e59d34 · 2e59d34
1 parent 59a8292
commit 2e59d34
Show file tree

Hide file tree

Showing 6 changed files with 367 additions and 146 deletions.
diff --git a/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js b/packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js
@@ -258,3 +258,70 @@ export const LargeEduExplainerArticle = {
     }
   }
 }
+export const EduCollection = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    size: 'sm',
+    useFeaturedStyles: true,
+    data: {
+      page: {
+        __typename: 'EDUCollectionsDetailPage',
+        ...BlockLinkCardData.data,
+        summary:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis auctor magna. Quisque molestie ex metus, et aliquet nunc porttitor nec. Donec imperdiet quam dolor, ut iaculis justo ornare non. Proin finibus nulla ut lorem molestie sagittis quis ut nulla. Sed sit amet dui consectetur, aliquam tortor nec, pulvinar libero.',
+        primarySubject: {
+          subject: 'Engineering'
+        },
+        gradeLevels: [
+          { gradeLevel: 'All Ages' },
+          { gradeLevel: 'K' },
+          { gradeLevel: '1' },
+          { gradeLevel: '2' },
+          { gradeLevel: '5' },
+          { gradeLevel: '6' },
+          { gradeLevel: '7' },
+          { gradeLevel: '8' }
+        ],
+        time: {
+          time: '1-2 hrs'
+        }
+      }
+    }
+  }
+}
+export const EduCollectionLarge = {
+  args: {
+    ...BlockLinkCardData,
+    size: 'lg',
+    useFeaturedStyles: true,
+    data: {
+      page: {
+        __typename: 'EDUCollectionsDetailPage',
+        ...BlockLinkCardData.data,
+        summary:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mattis auctor magna. Quisque molestie ex metus, et aliquet nunc porttitor nec. Donec imperdiet quam dolor, ut iaculis justo ornare non. Proin finibus nulla ut lorem molestie sagittis quis ut nulla. Sed sit amet dui consectetur, aliquam tortor nec, pulvinar libero.',
+        primarySubject: {
+          subject: 'Engineering'
+        },
+        gradeLevels: [
+          { gradeLevel: 'All Ages' },
+          { gradeLevel: 'K' },
+          { gradeLevel: '1' },
+          { gradeLevel: '2' },
+          { gradeLevel: '5' },
+          { gradeLevel: '6' },
+          { gradeLevel: '7' },
+          { gradeLevel: '8' }
+        ],
+        time: {
+          time: '1-2 hrs'
+        }
+      }
+    }
+  }
+}