feature: listing metadata (#541)

* reorganizing search result cards in stories, adding search result list to stories

* more organization of cards in stories

* moving calendar chip to a component and adapting other components to use it instead of duplicated code

* adding event metadata to BlockLinkCard

* adding MetadateEduResource component, renaming EventMetadata to MetadataEvent

* finished adding metadata to blocklinkcard for resources

* fixing minor type errors, adding word 'Grades' to rangeifyGrades method

* adding icons needed for resource metadata

* fixing build errors

* updating SearchResultCard

* finish search cards

* fixing tags in listing hero pages to match pill strategy

* fixing accessibility and smoke tests

* lint

* fixes from visual regression testing

packages/common/src/scss/components/_IconProfile.scss

@@ -0,0 +1,4 @@
+.IconProfile {
+  width: 1em;
+  height: 1em;
+}

packages/common/src/scss/components/_IconSubject.scss

@@ -0,0 +1,4 @@
+.IconSubject {
+  width: 1em;
+  height: 1em;
+}

packages/vue/lib/main.ts

@@ -44,7 +44,7 @@ import BaseModal from './../src/components/BaseModal/BaseModal.vue'
 import BasePlaceholder from './../src/components/BasePlaceholder/BasePlaceholder.vue'
 import BaseRadioGroup from './../src/components/BaseRadioGroup/BaseRadioGroup.vue'
 import BaseSwimlane from './../src/components/BaseSwimlane/BaseSwimlane.vue'
-import BaseTag from './../src/components/BaseTag/BaseTag.vue'
+import BasePill from './../src/components/BasePill/BasePill.vue'
 import BaseTimer from './../src/components/BaseTimer/BaseTimer.vue'
 import BaseUnitToggle from './../src/components/BaseUnitToggle/BaseUnitToggle.vue'
 import BaseVideo from './../src/components/BaseVideo/BaseVideo.vue'
@@ -248,7 +248,7 @@ export {
   BasePlaceholder,
   BaseRadioGroup,
   BaseSwimlane,
-  BaseTag,
+  BasePill,
   BaseTimer,
   BaseUnitToggle,
   BaseVideo,

packages/vue/src/components/BaseTag/BaseTag.stories.js → packages/vue/src/components/BasePill/BasePill.stories.js

@@ -1,8 +1,8 @@
-import BaseTag from './BaseTag.vue'
+import BasePill from './BasePill.vue'
 
 export default {
-  title: 'Components/Base/BaseTag',
-  component: BaseTag,
+  title: 'Components/Base/BasePill',
+  component: BasePill,
   argTypes: {
     variant: {
       type: { name: 'string', required: false },

packages/vue/src/components/BasePill/BasePill.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Attributes } from './../../interfaces'
+import { eduMetadataDictionary } from './../../constants'
+
+// using borders to vertically center wonky font face
+const variantMap: Attributes = {
+  primary: 'bg-primary border-primary',
+  secondary: 'bg-secondary border-secondary',
+  action: 'bg-action border-action'
+}
+
+const sizeMap: Attributes = {
+  sm: 'text-xs border-t-2 py-1 px-2.5',
+  md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
+  lg: 'text-base lg:text-lg border-t pt-1.5 pb-1 px-5'
+}
+
+interface BasePillProps {
+  variant?: string
+  size?: string
+  contentType?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BasePillProps>(), {
+  variant: 'primary',
+  size: 'md',
+  contentType: undefined
+})
+
+const metadataType = computed(() => {
+  const validContentTypes = Object.keys(eduMetadataDictionary)
+  return props.contentType && validContentTypes.includes(props.contentType)
+    ? props.contentType
+    : undefined
+})
+const metadataAttrs = computed(() => {
+  if (metadataType.value) {
+    return eduMetadataDictionary[metadataType.value]
+  }
+  return { variant: undefined, label: undefined }
+})
+</script>
+<template>
+  <p
+    :class="`${variantMap[metadataAttrs.variant || props.variant]} ${sizeMap[props.size]}`"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase print:border-none print:px-0"
+  >
+    <template v-if="metadataAttrs.label"> {{ metadataAttrs.label }} </template>
+    <template v-else> <slot /></template>
+    <span class="sr-only">.</span>
+  </p>
+</template>

packages/vue/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -7,12 +7,13 @@ export default {
   component: BlockLinkCard,
   tags: ['!autodocs'],
   excludeStories: /.*Data$/,
-  decorators: [
-    () => ({
-      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3 lg:grid-cols-3"><story/></div>`
-    })
-  ],
   argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['sm', 'md', 'lg']
+      }
+    },
     headingLevel: {
       description:
         'Change the heading level for semantic markup. This does not affect the style of the heading.',
@@ -47,25 +48,39 @@ export const BlockLinkCardData = {
   },
   headingLevel: 'h2',
   startDate: undefined,
-  endDate: undefined,
-  compact: false
+  endDate: undefined
 }
 
 export const BaseStory = {
   name: 'Single Item',
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   args: {
     ...BlockLinkCardData
   }
 }
 
 export const SingleItemCompactStyles = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   args: {
     ...BlockLinkCardData,
     headingLevel: 'h2',
-    compact: true
+    size: 'sm'
   }
 }
 export const Compact = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   name: 'Compact w/ Custom Props',
   parameters: {
     docs: {
@@ -89,16 +104,82 @@ export const Compact = {
       alt: 'Alt text'
     },
     headingLevel: 'h2',
-    compact: true
+    size: 'sm'
   }
 }
 export const EventItem = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
   args: {
     ...BlockLinkCardData,
     data: {
-      ...BlockLinkCardData.data,
-      startDate: '2021-11-11T00:00:00-08:00',
-      endDate: '2021-11-11T23:59:59.999999-08:00'
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUEventPage',
+        startDate: '2021-11-11',
+        startDatetime: '2021-11-11T00:00:00-08:00',
+        endDatetime: '2021-11-11T23:59:59.999999-08:00',
+        endDate: '2021-11-11',
+        ongoing: false,
+        eventType: 'Workshop'
+      }
+    }
+  }
+}
+export const EduExplainerArticle = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    data: {
+      page: {
+        __typename: 'EDUExplainerArticlePage',
+        ...BlockLinkCardData.data,
+        primarySubject: {
+          subject: 'Engineering'
+        },
+        gradeLevels: [
+          { gradeLevel: 'All Ages' },
+          { gradeLevel: 'K' },
+          { gradeLevel: '1' },
+          { gradeLevel: '2' },
+          { gradeLevel: '5' },
+          { gradeLevel: '6' },
+          { gradeLevel: '7' },
+          { gradeLevel: '8' }
+        ]
+      }
+    }
+  }
+}
+export const LargeEduExplainerArticle = {
+  args: {
+    ...BlockLinkCardData,
+    size: 'lg',
+    data: {
+      page: {
+        __typename: 'EDUExplainerArticlePage',
+        ...BlockLinkCardData.data,
+        primarySubject: {
+          subject: 'Engineering'
+        },
+        gradeLevels: [
+          { gradeLevel: 'All Ages' },
+          { gradeLevel: 'K' },
+          { gradeLevel: '1' },
+          { gradeLevel: '2' },
+          { gradeLevel: '5' },
+          { gradeLevel: '6' },
+          { gradeLevel: '7' },
+          { gradeLevel: '8' }
+        ]
+      }
     }
   }
 }