@explorer-1/vue 0.2.8 → 0.2.10

package/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.stories.js

@@ -25,7 +25,28 @@ export const BaseStory = {
   name: 'PageAsteroidWatchIndex',
   args: {
     data: {
-      ...HeroLargeData,
+      description:
+        'Crawl, walk and even climb rock walls, this robot was designed to operate in extreme terrains.',
+      listingPageHeroImage: {
+        // beach
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        // lake
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        // jungle
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        // desert
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        },
+        alt: 'Robotics detail page hero image'
+      },
       title: 'Asteroid Watch',
       body: BlockStreamfieldData.body,
       latestAsteroidNews: BlockLinkCardCarouselData

package/src/templates/www/PageAsteroidWatchIndex/PageAsteroidWatchIndex.vue

@@ -5,7 +5,7 @@
   >
     <HeroLarge
       :title="data.title"
-      :image="data.heroImage"
+      :image="data.listingPageHeroImage"
       has-overlay
     />
 

package/src/templates/www/PageInfographicDetail/PageInfographicDetail.stories.js

@@ -39,7 +39,7 @@ export const BaseStory = {
       publicationDate: '2012-07-05T20:04:21+00:00',
       title: 'Milky Way',
       topicLabel: 'Stars and Galaxies',
-      description:
+      descriptionString:
         '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lorem non purus consequat rutrum. Nulla vel convallis urna, eu porta purus. In hendrerit odio id diam volutpat auctor. Curabitur imperdiet dolor ipsum, quis luctus quam hendrerit eu. Quisque gravida lacus velit, a tempor dolor facilisis interdum. Sed pharetra mi eget feugiat bibendum. Donec vel nisi non nisi ultrices pellentesque eget non massa. Proin hendrerit sodales auctor. Phasellus egestas tortor eget ullamcorper tempor. Cras quis mauris erat. Curabitur tempor quam eget tellus aliquam semper. Morbi fringilla sodales dapibus. Proin pellentesque turpis eu neque pretium, in sodales sem auctor.</p>'
     }
   }

package/src/templates/www/PageInfographicDetail/PageInfographicDetail.vue

@@ -42,10 +42,10 @@
     >
       <div class="lg:grid grid-cols-10">
         <div
-          v-if="data.description"
+          v-if="data.descriptionString"
           class="col-span-7"
         >
-          <BlockText :text="data.description" />
+          <BlockText :text="data.descriptionString" />
         </div>
         <aside class="col-start-9 col-end-11">
           <div class="lg:pt-0 pt-8 mb-12">

package/src/templates/www/PagePodcastSeason/PagePodcastSeason.stories.js

@@ -29,7 +29,7 @@ export const PagePodcastSeasonData = {
   summary:
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas in nibh mauris. Praesent vel tempus enim, a ultricies justo. Cras nec lorem quis lorem ullamcorper accumsan. Aliquam lacus tortor, vulputate sit amet purus vitae, accumsan maximus diam. Vivamus ac dui non sapien hendrerit elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porttitor ac quam sed eleifend.',
   featuredEpisode: HeroMediumData.feature,
-  heroImage: {
+  listingPageHeroImage: {
     // same dimensions used for HeroMedium
     src: {
       url: 'https://picsum.photos/id/247/1800/1200',

package/src/templates/www/PagePodcastSeason/PagePodcastSeason.vue

@@ -10,7 +10,7 @@
         v-if="data.featuredEpisode"
         :custom-label="data.label"
         :feature="data.featuredEpisode"
-        :custom-image="data.heroImage"
+        :custom-image="data.listingPageHeroImage"
         cta="Listen Now"
       />
     </div>

package/src/templates/www/PageRoboticsDetail/PageRoboticsDetail.vue

@@ -7,7 +7,7 @@
       eyebrow="Robotics at JPL"
       :title="data.title"
       :summary="data.description"
-      :image="data.heroImage"
+      :image="data.listingPageHeroImage"
     />
     <RoboticsDetailStats
       :mass="data.mass"

package/src/templates/www/PageTopicDetail/PageTopicDetail.stories.js

@@ -32,7 +32,7 @@ export const TopicDetailData = {
   parentDisplayTitle: 'Solar System Exploration at JPL',
   strapline:
     'Robotic orbiters, landers and mobile laboratories explore Mars and communicate with Earth via the Deep Space Network.',
-  heroImage: {
+  listingPageHeroImage: {
     src: {
       url: 'https://picsum.photos/1800/1200',
       width: 1800,

package/src/templates/www/PageTopicDetail/PageTopicDetail.vue

@@ -9,7 +9,7 @@
         :eyebrow="data.parentDisplayTitle"
         :title="data.displayTitle"
         :summary="data.strapline"
-        :image="data.heroImage"
+        :image="data.listingPageHeroImage"
       />
       <TopicDetailMissionCarousel
         v-if="data.title || data.featuredMissions"

package/src/utils/mixins.ts

@@ -307,7 +307,7 @@ export const mixinFormatSplitEventDates = (
 }
 
 // return event dates formatted for listing cards
-export const mixinFormatEventDates = (startDatetime: string, endDatetime?: string): string => {
+export const mixinFormatEventDates = (startDatetime?: string, endDatetime?: string): string => {
   const startDateDayjs = dayjs(startDatetime)
 
   let eventDate = startDateDayjs.format('ll')

package/src/utils/rangeifyGrades.ts

@@ -0,0 +1,76 @@
+import type { GradeLevelsObject } from './../interfaces'
+import { computed, ref } from 'vue'
+
+const gradesAsNumbers = ref({
+  K: 0,
+  '1': 1,
+  '2': 2,
+  '3': 3,
+  '4': 4,
+  '5': 5,
+  '6': 6,
+  '7': 7,
+  '8': 8,
+  '9': 9,
+  '10': 10,
+  '11': 11,
+  '12': 12
+})
+
+const numbersAsGrades = computed(
+  (): {
+    [name: number]: string
+  } => {
+    return Object.keys(gradesAsNumbers.value).reduce((ret, key) => {
+      // @ts-expect-error need to correctly retype keys when swapping
+      ret[gradesAsNumbers.value[key]] = key
+      return ret
+    }, {})
+  }
+)
+
+const rangeify = (a: number[]): string[] => {
+  const res: string[] = []
+  let run = []
+  for (let i = 0; i < a.length; i++) {
+    run.push(a[i])
+    if (i + 1 >= a.length || a[i + 1] - a[i] > 1) {
+      res.push(
+        // @ts-expect-error
+        run.length > 1
+          ? `${numbersAsGrades.value[run[0]]}-${run.pop()}`
+          : run.map((item) => numbersAsGrades.value[item])
+      )
+      run = []
+    }
+  }
+  return res
+}
+
+export const rangeifyGrades = (gradeLevels: GradeLevelsObject[]) => {
+  if (gradeLevels) {
+    const allAgesArray = gradeLevels.map((item) => {
+      if (item.gradeLevel === 'All Ages') return item.gradeLevel
+    })
+    const allAges = allAgesArray.join('')
+
+    const gradesArray = gradeLevels.map((item) => {
+      // @ts-expect-error
+      const level: number = gradesAsNumbers.value[item.gradeLevel]
+      return level
+    })
+
+    const filteredGrades = rangeify(gradesArray.filter(Number.isFinite))
+    let preparedGrades: string = ''
+    if (filteredGrades?.length) {
+      const gradeString = filteredGrades.length > 1 ? 'Grades: ' : 'Grade: '
+      preparedGrades = filteredGrades
+        .map((grade, index) => (index === 0 ? gradeString + grade : grade))
+        .join(', ')
+    }
+
+    const audienceArray = [allAges, preparedGrades]
+    return audienceArray.filter(Boolean).join(', ')
+  }
+  return undefined
+}

package/src/components/BaseTag/BaseTag.vue

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import type { Attributes } from './../../interfaces'
-
-// 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 BaseTagProps {
-  variant?: string
-  size?: string
-}
-
-// define props
-const props = withDefaults(defineProps<BaseTagProps>(), {
-  variant: 'primary',
-  size: 'md'
-})
-</script>
-<template>
-  <p
-    :class="`${variantMap[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"
-  >
-    <slot />
-    <span class="sr-only">.</span>
-  </p>
-</template>