@explorer-1/vue 0.2.66 → 0.2.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.66",
+  "version": "0.2.69",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.17"
+    "@explorer-1/common": "1.1.18"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

package/src/components/BlockLinkCard/BlockLinkCard.stories.js

@@ -258,3 +258,118 @@ 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'
+        }
+      }
+    }
+  }
+}
+
+export const EduNewsItem = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    ...BlockLinkCardData,
+    data: {
+      page: {
+        ...BlockLinkCardData.data,
+        __typename: 'EDUNewsPage'
+      }
+    },
+    headingLevel: 'h2',
+    size: 'sm'
+  }
+}
+
+export const ExternalLink = {
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="relative grid grid-cols-2 gap-3"><story/></div>`
+    })
+  ],
+  args: {
+    data: {
+      __typename: 'ExternalLinkCardWithDescription',
+      externalLink: 'https://nasa.gov',
+      title: 'External Link',
+      label: 'Dolor Sit',
+      summary:
+        'Cras rhoncus lorem condimentum tellus rhoncus dictum. Maecenas finibus nibh lorem, quis ornare est vulputate et. Nulla imperdiet ultrices est, ac mattis justo consequat sit amet.',
+      thumbnailImage: {
+        __typename: 'CustomImage',
+        src: {
+          __typename: 'CustomRendition',
+          url: 'https://picsum.photos/512/288',
+          width: '512',
+          height: '288'
+        }
+      }
+    },
+    headingLevel: 'h2'
+  }
+}

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -1,157 +1,184 @@
 <template>
-  <BaseLink
-    v-if="theItem"
-    variant="none"
-    :to="theItem.url ? theItem.url : undefined"
-    :href="theItem.externalLink ? theItem.externalLink : undefined"
-    class="BlockLinkCard group"
-    :link-class="`block ${small ? 'pb-3' : 'pb-5'} ${large ? 'sm:flex flex-row border-b border-gray-light-mid pb-5 mb-5' : ''}`"
-    external-target-blank
-  >
-    <BaseImagePlaceholder
-      :aspect-ratio="large ? '3:2' : '16:9'"
-      class="bg-gray-dark h-full relative overflow-hidden mb-6"
-      :class="{ 'lg:mb-10': medium, 'sm:w-1/3 lg:mb-0': large }"
-      dark-mode
-      no-logo
-    >
-      <BaseImage
-        v-if="theItem.thumbnailImage && theItem.thumbnailImage.src"
-        :src="theItem.thumbnailImage.src.url"
-        :width="theItem.thumbnailImage.src.width"
-        :height="theItem.thumbnailImage.src.height"
-        alt=""
-        object-fit-class="cover"
-        image-class="can-hover:group-hover:delay-200 can-hover:group-hover:scale-100 absolute top-0 left-0 w-full transition-all duration-200 ease-in transform scale-105"
-        loading="lazy"
+  <div v-if="theItem">
+    <template v-if="metadataType === 'EDUCollectionsDetailPage' && useFeaturedStyles">
+      <BlockLinkCardCollectionLg
+        :the-item="theItem as EduResourceCardObject"
+        :metadata-type="metadataType"
+        :metadata-attrs="metadataAttrs"
+        :size="size"
       />
-      <div v-else></div>
-      <CalendarChip
-        v-if="
-          showCalendarChip &&
-          themeStore.isEdu &&
-          ((theItem as EventCardObject).startDate || (theItem as EventCardObject).ongoing)
-        "
-        :start-date="(theItem as EventCardObject).startDate"
-        :end-date="(theItem as EventCardObject).endDate"
-        :ongoing="(theItem as EventCardObject).ongoing"
-      />
-    </BaseImagePlaceholder>
-
-    <div
-      class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform ThemeVariantLight"
-      :class="contentClasses"
-    >
-      <template v-if="metadataAttrs">
-        <BasePill
-          :class="{ 'mb-2': !large, 'mb-4': large }"
-          size="sm"
-          :content-type="metadataType"
-          :text="(theItem as EventCardObject).eventType"
-        />
-      </template>
-      <template
-        v-else-if="themeStore.isEdu && theItem.parent?.title && theItem.parent?.title !== 'EDU'"
+    </template>
+    <template v-else>
+      <BaseLink
+        v-if="theItem"
+        variant="none"
+        :to="theItem.url ? theItem.url : undefined"
+        :href="theItem.externalLink ? theItem.externalLink : undefined"
+        class="BlockLinkCard group"
+        :link-class="`block ${small ? 'pb-3' : 'pb-5'} ${large ? 'sm:flex flex-row border-b border-gray-light-mid pb-5 mb-5' : ''}`"
+        external-target-blank
       >
-        <div class="flex flex-wrap">
+        <BaseImagePlaceholder
+          :aspect-ratio="large ? '3:2' : '16:9'"
+          class="bg-gray-dark h-full relative overflow-hidden mb-6"
+          :class="{ 'lg:mb-10': medium, 'sm:w-1/3 lg:mb-0': large }"
+          dark-mode
+          no-logo
+        >
+          <BaseImage
+            v-if="theItem.thumbnailImage && theItem.thumbnailImage.src"
+            :src="theItem.thumbnailImage.src.url"
+            :width="theItem.thumbnailImage.src.width"
+            :height="theItem.thumbnailImage.src.height"
+            alt=""
+            object-fit-class="cover"
+            image-class="can-hover:group-hover:delay-200 can-hover:group-hover:scale-100 absolute top-0 left-0 w-full transition-all duration-200 ease-in transform scale-105"
+            loading="lazy"
+          />
+          <div v-else></div>
+          <CalendarChip
+            v-if="
+              showCalendarChip &&
+              themeStore.isEdu &&
+              ((theItem as EventCardObject).startDate || (theItem as EventCardObject).ongoing)
+            "
+            :start-date="(theItem as EventCardObject).startDate"
+            :end-date="(theItem as EventCardObject).endDate"
+            :ongoing="(theItem as EventCardObject).ongoing"
+          />
+        </BaseImagePlaceholder>
+
+        <div
+          class="BlockLinkCard__CardContent transition-translate can-hover:group-hover:delay-200 duration-200 ease-in transform ThemeVariantLight"
+          :class="contentClasses"
+        >
+          <template v-if="metadataAttrs">
+            <BasePill
+              :class="{ 'mb-2': !large, 'mb-4': large }"
+              size="sm"
+              :content-type="metadataType"
+              :text="(theItem as EventCardObject).eventType"
+            />
+            <template v-if="metadataType === 'EDUNewsPage' && theItem.label">
+              <!-- include the topic label for EDU News -->
+              <span class="text-subtitle text-gray-mid-dark uppercase ThemeVariantLight pl-3">
+                {{ theItem.label }}
+              </span>
+            </template>
+          </template>
+          <template
+            v-else-if="themeStore.isEdu && theItem.parent?.title && theItem.parent?.title !== 'EDU'"
+          >
+            <!-- use parent page's title as the label for EDU Content cards, unless the EDU homepage is the parent -->
+            <div class="flex flex-wrap">
+              <p
+                class="text-subtitle"
+                :class="small ? 'mb-2' : 'mb-4'"
+              >
+                <span class="edu:text-primary ThemeVariantLight">
+                  {{ (theItem as Card).parent?.title }}
+                </span>
+              </p>
+            </div>
+          </template>
+          <template v-else>
+            <div class="flex flex-wrap">
+              <p
+                v-if="
+                  theItem.label || ((theItem as EventCardObject).startDate && !themeStore.isEdu)
+                "
+                class="text-subtitle divide-gray-mid flex divide-x"
+                :class="small ? 'mb-2' : 'mb-4'"
+              >
+                <span
+                  v-if="theItem.label"
+                  class="edu:text-primary ThemeVariantLight"
+                  :class="{ 'pr-2': (theItem as EventCardObject).startDate && !themeStore.isEdu }"
+                >
+                  {{ theItem.label }}
+                </span>
+                <span
+                  v-if="(theItem as EventCardObject).startDate && !themeStore.isEdu"
+                  :class="{ 'text-gray-mid-dark pl-2': theItem.label }"
+                >
+                  {{ formattedEventDates }}
+                </span>
+                <span class="sr-only">.</span>
+              </p>
+              <template v-if="theItem.externalLink">
+                <IconExternal
+                  class="text-primary ml-2"
+                  :class="{ 'text-sm mt-1px': small, '-mt-1px': medium, '-mt-.5': large }"
+                />
+              </template>
+            </div>
+          </template>
+
+          <component
+            :is="headingLevel || 'p'"
+            class="text-gray-dark text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+            :class="{ 'lg:text-3xl': !small }"
+          >
+            {{ theItem.title }}
+          </component>
           <p
-            class="text-subtitle"
-            :class="small ? 'mb-2' : 'mb-4'"
+            v-if="(theItem as EventCardObject).targetAudience"
+            :class="{ 'mt-1': !large, 'mt-4': large }"
           >
-            <span class="edu:text-primary ThemeVariantLight">
-              {{ (theItem as Card).parent?.title }}
-            </span>
+            <strong>Target Audience:</strong> {{ (theItem as EventCardObject).targetAudience }}
+          </p>
+          <p
+            v-if="theItem.date && !themeStore.isEdu"
+            class="text-gray-mid-dark"
+            :class="{ 'mt-2': !large, 'mt-4': large }"
+          >
+            {{ theItem.date }}
+          </p>
+          <p
+            v-if="large && theItem.summary"
+            class="mt-4 text-gray-mid-dark"
+            :class="{
+              'line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3': themeStore.isEdu
+            }"
+          >
+            {{ theItem.summary }}
           </p>
-        </div>
-      </template>
-      <template v-else>
-        <div class="flex flex-wrap">
           <p
-            v-if="theItem.label || ((theItem as EventCardObject).startDate && !themeStore.isEdu)"
-            class="text-subtitle divide-gray-mid flex divide-x"
-            :class="small ? 'mb-2' : 'mb-4'"
+            v-if="theItem.date && themeStore.isEdu"
+            class="text-gray-mid-dark"
+            :class="{ 'mt-2': !large, 'mt-4': large }"
           >
-            <span
-              v-if="theItem.label"
-              class="edu:text-primary ThemeVariantLight"
-              :class="{ 'pr-2': (theItem as EventCardObject).startDate && !themeStore.isEdu }"
-            >
-              {{ theItem.label }}
-            </span>
-            <span
-              v-if="(theItem as EventCardObject).startDate && !themeStore.isEdu"
-              :class="{ 'text-gray-mid-dark pl-2': theItem.label }"
-            >
-              {{ formattedEventDates }}
-            </span>
-            <span class="sr-only">.</span>
+            {{ theItem.date }}
           </p>
+          <div
+            v-if="metadataAttrs"
+            :class="{ 'mt-4': large, 'mt-2 mb-1': medium, 'mt-1 mb-0': small }"
+          >
+            <MetadataEvent
+              v-if="metadataType === 'EDUEventPage'"
+              :event="theItem"
+              :show-time="large"
+              compact
+            />
+            <MetadataEduResource
+              v-else-if="metadataAttrs.type === 'resource'"
+              :resource="theItem as EduResourceCardObject"
+              :variant="metadataAttrs.icons"
+              :show-time="true"
+              compact
+            />
+          </div>
         </div>
-      </template>
-
-      <component
-        :is="headingLevel || 'p'"
-        class="text-gray-dark text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
-        :class="{ 'lg:text-3xl': !small }"
-      >
-        {{ theItem.title }}
-      </component>
-      <p
-        v-if="(theItem as EventCardObject).targetAudience"
-        :class="{ 'mt-1': !large, 'mt-4': large }"
-      >
-        <strong>Target Audience:</strong> {{ (theItem as EventCardObject).targetAudience }}
-      </p>
-      <p
-        v-if="theItem.date && !themeStore.isEdu"
-        class="text-gray-mid-dark"
-        :class="{ 'mt-2': !large, 'mt-4': large }"
-      >
-        {{ theItem.date }}
-      </p>
-      <p
-        v-if="large && theItem.summary"
-        class="mt-4 text-gray-mid-dark"
-        :class="{
-          'line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3': themeStore.isEdu
-        }"
-      >
-        {{ theItem.summary }}
-      </p>
-      <p
-        v-if="theItem.date && themeStore.isEdu"
-        class="text-gray-mid-dark mt-2"
-        :class="{ 'mt-2': !large, 'mt-4': large }"
-      >
-        {{ theItem.date }}
-      </p>
-      <div
-        v-if="metadataAttrs"
-        :class="{ 'mt-4': large, 'mt-2 mb-1': medium, 'mt-1 mb-0': small }"
-      >
-        <MetadataEvent
-          v-if="metadataType === 'EDUEventPage'"
-          :event="theItem"
-          :show-time="large"
-          compact
-        />
-        <MetadataEduResource
-          v-else-if="metadataAttrs.type === 'resource'"
-          :resource="theItem as EduResourceCardObject"
-          :variant="metadataAttrs.icons"
-          :show-time="true"
-          compact
-        />
-      </div>
-    </div>
-    <div
-      v-if="!large"
-      class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
-      :class="metadataAttrs ? `text-${metadataAttrs.icons}` : 'text-primary'"
-    >
-      <IconArrow />
-    </div>
-  </BaseLink>
+        <div
+          v-if="!large"
+          class="BlockLinkCard__CardArrow ThemeVariantLight can-hover:block can-hover:-ml-3 can-hover:group-hover:delay-200 can-hover:opacity-0 can-hover:group-hover:ml-0 can-hover:group-hover:opacity-100 hidden -mt-1 text-2xl leading-normal transition-all duration-200 ease-in"
+          :class="metadataAttrs ? `text-${metadataAttrs.icons}` : 'text-primary'"
+        >
+          <IconArrow />
+        </div>
+      </BaseLink>
+    </template>
+  </div>
 </template>
 
 <script lang="ts">
@@ -163,10 +190,12 @@ import { useThemeStore } from '../../store/theme'
 import { mixinFormatEventDates } from './../../utils/mixins'
 import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import IconArrow from './../Icons/IconArrow.vue'
+import IconExternal from './../Icons/IconExternal.vue'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseImage from './../BaseImage/BaseImage.vue'
 import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
 import BasePill from './../BasePill/BasePill.vue'
+import BlockLinkCardCollectionLg from './../BlockLinkCard/BlockLinkCardCollectionLg.vue'
 import CalendarChip from './../CalendarChip/CalendarChip.vue'
 import MetadataEvent from './../MetadataEvent/MetadataEvent.vue'
 import MetadataEduResource from './../MetadataEduResource/MetadataEduResource.vue'
@@ -176,13 +205,15 @@ export default defineComponent({
   name: 'BlockLinkCard',
   components: {
     IconArrow,
+    IconExternal,
     BaseLink,
     BaseImage,
     BaseImagePlaceholder,
     BasePill,
     CalendarChip,
     MetadataEvent,
-    MetadataEduResource
+    MetadataEduResource,
+    BlockLinkCardCollectionLg
   },
   props: {
     data: {
@@ -266,6 +297,10 @@ export default defineComponent({
     showCalendarChip: {
       type: Boolean,
       default: false
+    },
+    useFeaturedStyles: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue'
+import type { EduResourceCardObject } from '../../interfaces'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BasePill from './../BasePill/BasePill.vue'
+import MetadataEduResource from './../MetadataEduResource/MetadataEduResource.vue'
+
+interface BlockLinkCardCollectionLgProps {
+  theItem?: EduResourceCardObject
+  metadataType?: string
+  metadataAttrs?: any
+  headingLevel?: HeadingLevel
+  size?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BlockLinkCardCollectionLgProps>(), {
+  theItem: undefined,
+  metadataType: undefined,
+  metadataAttrs: undefined,
+  headingLevel: undefined,
+  size: undefined
+})
+
+const { theItem, metadataType, metadataAttrs, headingLevel, size } = reactive(props)
+
+const isSmall = computed(() => {
+  return size === 'sm'
+})
+</script>
+
+<template>
+  <BaseLink
+    v-if="theItem"
+    variant="none"
+    :to="theItem.url ? theItem.url : undefined"
+    :href="theItem.externalLink ? theItem.externalLink : undefined"
+    class="BlockLinkCardCollectionLg group bg-stars bg-primary-dark"
+    :link-class="`block mb-8 relative ${isSmall ? 'flex flex-col' : 'sm:flex flex-row'}`"
+    external-target-blank
+  >
+    <BaseImagePlaceholder
+      class="bg-gray-dark h-full relative overflow-hidden mb-6 z-20"
+      :class="{
+        'aspect-ratio-sixteen-nine': isSmall,
+        'sm:absolute sm:top-0 sm:right-0 sm:bottom:0 sm:w-1/3 lg:mb-0 order-1 sm:order-2 aspect-ratio-three-two sm:aspect-ratio-one-one':
+          !isSmall
+      }"
+      dark-mode
+      no-logo
+    >
+      <BaseImage
+        v-if="theItem.thumbnailImage && theItem.thumbnailImage.src"
+        :src="theItem.thumbnailImage.src.url"
+        :width="theItem.thumbnailImage.src.width"
+        :height="theItem.thumbnailImage.src.height"
+        alt=""
+        object-fit-class="cover"
+        image-class="can-hover:group-hover:delay-200 can-hover:group-hover:scale-[101%] absolute top-0 right-0 w-full transition-all duration-200 ease-in transform scale-105"
+        loading="lazy"
+      />
+      <div v-else></div>
+    </BaseImagePlaceholder>
+    <div
+      class="BlockLinkCard__CardContent can-hover:group-hover:delay-200 ThemeVariantLight"
+      :class="{
+        'px-4 pb-4': isSmall,
+        'px-6 pb-6 sm:pt-6 lg:px-12 lg:py-10 sm:w-2/3 order-2 sm:order-1': !isSmall
+      }"
+    >
+      <div
+        class="absolute z-0 inset-0 bg-gradient-to-r from-transparent-black-75 to-transparent"
+      ></div>
+      <div class="relative z-10">
+        <template v-if="metadataAttrs">
+          <BasePill
+            :class="{
+              'mb-2': isSmall,
+              'mb-4': !isSmall
+            }"
+            size="sm"
+            :content-type="metadataType"
+          />
+        </template>
+
+        <component
+          :is="headingLevel || 'p'"
+          class="text-white text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+          :class="{
+            'lg:text-3xl': !isSmall
+          }"
+        >
+          {{ theItem.title }}
+        </component>
+        <p
+          v-if="theItem.summary && !isSmall"
+          class="mt-4 text-white line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3"
+        >
+          {{ theItem.summary }}
+        </p>
+        <div
+          v-if="metadataAttrs"
+          :class="{
+            'mt-1': isSmall,
+            'mt-4': !isSmall
+          }"
+        >
+          <MetadataEduResource
+            :resource="theItem"
+            :variant="metadataAttrs.icons"
+            compact
+          />
+        </div>
+      </div>
+    </div>
+  </BaseLink>
+</template>
+<style lang="scss">
+.BlockLinkCardCollectionLg {
+  .MetadataEduResource .MetadataEduResourceItem {
+    .MetadataEduResourceIcon {
+      @apply text-white;
+    }
+    span {
+      @apply text-white;
+    }
+  }
+}
+</style>