@explorer-1/vue 0.0.0

package/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.stories.js

@@ -0,0 +1,235 @@
+import PodcastSeriesCarousel from './PodcastSeriesCarousel.vue'
+
+export default {
+  title: 'WWW/PodcastDetail/PodcastSeriesCarousel',
+  component: PodcastSeriesCarousel,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A tabbed carousel of podcast seasons based on series. If a season `id` is provided, the carousel will default to showing that season. If the user is currently on an episode page within the displayed season, that episode will be the active slide in the carousel.'
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const PodcastSeriesCarouselData = {
+  parent: {
+    id: '302'
+  },
+  series: {
+    id: '300',
+    url: '/podcasts/on-a-mission',
+
+    seasons: [
+      {
+        id: '301',
+        url: '/podcasts/on-a-mission/season-1',
+        title: 'Season 1: The InSight Mission to Mars',
+        seasonNumber: 1,
+        episodes: [
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-1',
+            title: 'Season 1, Episode 1: Lorem ipsum dolor',
+            publicationDate: '2021-10-01',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-2',
+            title: 'Season 1, Episode 2: Lorem ipsum dolor',
+            publicationDate: '2021-10-02',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-3',
+            title: 'Season 1, Episode 3: Lorem ipsum dolor',
+            publicationDate: '2021-10-03',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-4',
+            title: 'Season 1, Episode 4: Lorem ipsum dolor',
+            publicationDate: '2021-10-04',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-5',
+            title: 'Season 1, Episode 5: Lorem ipsum dolor',
+            publicationDate: '2021-10-05',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-6',
+            title: 'Season 1, Episode 6: Lorem ipsum dolor',
+            publicationDate: '2021-10-06',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-1/episode-7',
+            title: 'Season 1, Episode 7: Lorem ipsum dolor',
+            publicationDate: '2021-10-07',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          }
+        ]
+      },
+      {
+        id: '302',
+        url: '/podcasts/on-a-mission/season-2',
+        title: 'Season 2: Asteroids!',
+        seasonNumber: 2,
+        episodes: [
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-1',
+            title: 'Season 2, Episode 1: Sit amet consectatur',
+            publicationDate: '2021-11-01',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-2',
+            title: 'Season 2, Episode 2: Sit amet consectatur',
+            publicationDate: '2021-11-02',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-3',
+            title: 'Season 2, Episode 3: Sit amet consectatur',
+            publicationDate: '2021-11-03',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-4',
+            title: 'Season 2, Episode 4: Sit amet consectatur',
+            publicationDate: '2021-11-04',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-5',
+            title: 'Season 2, Episode 5: Sit amet consectatur',
+            publicationDate: '2021-11-05',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-6',
+            title: 'Season 2, Episode 6: Sit amet consectatur',
+            publicationDate: '2021-11-06',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          },
+          {
+            url: '/podcasts/on-a-mission/season-2/episode-7',
+            title: 'Season 2, Episode 7: Sit amet consectatur',
+            publicationDate: '2021-11-07',
+            thumbnailImage: {
+              src: {
+                url: 'https://picsum.photos/430/430',
+                width: 430,
+                height: 430
+              },
+              alt: 'Alt text'
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+
+export const Default = {
+  args: {
+    series: PodcastSeriesCarouselData.series,
+    initialSeasonId: PodcastSeriesCarouselData.parent?.id
+      ? PodcastSeriesCarouselData.parent.id
+      : null
+  }
+}

package/src/components/PodcastSeriesCarousel/PodcastSeriesCarousel.vue

@@ -0,0 +1,171 @@
+<template>
+  <div
+    v-if="series && activeTabData"
+    class="PodcastSeriesCarousel"
+  >
+    <!-- tabs -->
+    <LayoutHelper indent="col-2">
+      <h2
+        class="text-gray-dark text-3xl lg:text-6xl font-semibold leading-normal tracking-normal uppercase mb-2 lg:mb-5"
+      >
+        More {{ series.title }} Episodes
+      </h2>
+
+      <ul class="flex flex-wrap mb-6 lg:mb-10">
+        <li
+          v-for="(season, index) in sortedSeasons"
+          :key="index"
+          class="last:mr-0 w-auto mr-10 lg:flex-shrink-0"
+        >
+          <button
+            class="text-subtitle block text-left lg:text-center lg:w-full py-2 border-b-2 text-gray-mid-dark can-hover:hover:text-gray-dark"
+            :class="activeSeasonId === season.id ? 'border-jpl-red text-gray-dark' : 'border-white'"
+            :aria-expanded="activeSeasonId === season.id ? 'true' : 'false'"
+            @click="updateActiveTab(season.id)"
+          >
+            Season {{ season.seasonNumber }}
+          </button>
+        </li>
+      </ul>
+    </LayoutHelper>
+    <!-- tab content -->
+    <LayoutHelper
+      indent="col-2"
+      class="mb-4"
+    >
+      <h3
+        v-if="activeTabData.title"
+        class="text-h6"
+      >
+        {{ activeTabData.title }}
+      </h3>
+    </LayoutHelper>
+    <keep-alive>
+      <ThumbnailCarousel
+        :key="activeSeasonId"
+        :initial-slide="
+          activeSeasonId === initialSeasonId && initialEpisodeIndex ? initialEpisodeIndex : 0
+        "
+        :slides="activeTabData.episodes"
+      />
+    </keep-alive>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRoute } from 'vue-router'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import ThumbnailCarousel from './../ThumbnailCarousel/ThumbnailCarousel.vue'
+
+const route = useRoute()
+
+interface ActiveTab {
+  title: string
+  episodes: Episode[]
+}
+
+interface Episode {
+  url: string
+  title: string
+  publicationDate: any
+  thumbnailImage: Partial<ImageObject>
+}
+interface Season {
+  id: string
+  url: string
+  title: string
+  seasonNumber: number
+  episodes: Episode[]
+}
+
+interface Series {
+  id: string
+  title: string
+  url: string
+  seasons: Season[]
+}
+export default defineComponent({
+  name: 'PodcastSeriesCarousel',
+  components: {
+    LayoutHelper,
+    ThumbnailCarousel
+  },
+  props: {
+    // the series data, including seasons and episode
+    // check audioDetailPageQuery.js for available data
+    series: {
+      type: Object as PropType<Series>,
+      required: false
+    },
+    // Pass the id of the season that should be active. This is the id of the parent of the current episode page
+    initialSeasonId: {
+      type: String,
+      required: false
+    }
+  },
+  data() {
+    return {
+      activeTabId: ''
+    }
+  },
+  computed: {
+    sortedSeasons(): Season[] | null {
+      let seasons = null
+      if (this.series && this.series.seasons) {
+        seasons = this.series.seasons
+        return seasons.sort((a: Season, b: Season) => a.seasonNumber - b.seasonNumber)
+      }
+      return seasons
+    },
+    activeSeasonId(): string | undefined {
+      if (this.activeTabId) {
+        return this.activeTabId
+      } else if (this.initialSeasonId) {
+        return this.initialSeasonId
+      } else if (this.series?.seasons?.length) {
+        // default to the first one
+        return this.series.seasons[0].id
+      }
+      return undefined
+    },
+    initialEpisodeIndex(): number | null {
+      let episodes: Episode[] | undefined = undefined
+      if (this.series?.seasons && this.activeSeasonId && route?.path) {
+        episodes = this.series.seasons.find((o: Season) => {
+          return o.id === this.activeSeasonId
+        })?.episodes
+        return episodes
+          ? episodes.findIndex((e: Episode) => (e.url as String) === route.path)
+          : null
+      }
+      return null
+    },
+    activeTabData(): ActiveTab | undefined {
+      let season: Season | undefined = undefined
+      if (this.series?.seasons) {
+        if (this.activeSeasonId) {
+          season = this.series.seasons.find((o: Season) => {
+            return o.id === this.activeSeasonId
+          })
+        } else {
+          season = this.series.seasons[0]
+        }
+        if (season?.episodes) {
+          season.episodes.sort(
+            (a: Episode, b: Episode) =>
+              new Date(a.publicationDate).getTime() - new Date(b.publicationDate).getTime()
+          )
+        }
+      }
+      return season ? season : undefined
+    }
+  },
+  methods: {
+    updateActiveTab(id: string) {
+      this.activeTabId = id
+    }
+  }
+})
+</script>

package/src/components/ProfileDetailSectionGroup/ProfileDetailSectionGroup.vue

@@ -0,0 +1,84 @@
+<template>
+  <section
+    v-if="!isEmpty"
+    class="border-gray-light-mid border-t mb-10 lg:mb-20 pt-10 lg:pt-20"
+    :aria-labelledby="`${section.id}-heading`"
+  >
+    <BaseHeading
+      :id="`${section.id}-heading`"
+      level="h2"
+      size="h3"
+      class="mb-5 lg:mb-10"
+      >{{ section.title }}</BaseHeading
+    >
+
+    <div
+      v-for="sub in section.subsections"
+      :key="sub.prop"
+    >
+      <template v-if="data[sub.prop]">
+        <BaseHeading
+          level="h3"
+          size="h4"
+          class="mb-2.5"
+        >
+          <component
+            :is="sub.icon"
+            class="inline relative -top-0.5"
+          />
+          {{ sub.title }}
+        </BaseHeading>
+        <div class="mb-5 lg:mb-10">
+          <BlockText
+            variant="large"
+            :text="data[sub.prop]"
+          />
+        </div>
+      </template>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BlockText from './../BlockText/BlockText.vue'
+import IconBookUser from './../Icons/IconBookUser.vue'
+import IconUniversity from './../Icons/IconUniversity.vue'
+import IconMagnifyingGlass from './../Icons/IconMagnifyingGlass.vue'
+import IconBriefcase from './../Icons/IconBriefcase.vue'
+import IconHand from './../Icons/IconHand.vue'
+import IconMedal from './../Icons/IconMedal.vue'
+import IconBook from './../Icons/IconBook.vue'
+
+export default defineComponent({
+  name: 'ProfileDetailSectionGroup',
+  components: {
+    BaseHeading,
+    BlockText,
+    IconBookUser,
+    IconUniversity,
+    IconMagnifyingGlass,
+    IconBriefcase,
+    IconHand,
+    IconMedal,
+    IconBook
+  },
+  props: {
+    section: {
+      type: Object,
+      required: false
+    },
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    isEmpty() {
+      return this.section.subsections.every((sub) => !this.data[sub.prop])
+    }
+  }
+})
+</script>

package/src/components/RoboticsDetailStats/RoboticsDetailStats.stories.js

@@ -0,0 +1,97 @@
+import RoboticsDetailStats from './RoboticsDetailStats.vue'
+import RoboticsDetailStatsMini from './RoboticsDetailStatsMini.vue'
+
+export default {
+  title: 'WWW/RoboticsDetail/RoboticsDetailStats',
+  component: RoboticsDetailStats,
+  subcomponents: { RoboticsDetailStatsMini },
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="mt-20"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/,
+  argTypes: {
+    status: {
+      control: { type: 'text' }
+    }
+  }
+}
+
+export const RoboticsDetailStatsData = {
+  mass: 123,
+  height: 0.24,
+  speed: 0.5,
+  status: 'In Development (since 2011)',
+  animalAnalogName: 'Lemur',
+  animalAnalogIcon: {
+    webp: {
+      url: 'https://images.unsplash.com/photo-1535468899888-92047ec84051?fm=webp&crop=entropy&w=320&h=320&fit=crop'
+    },
+    src: {
+      url: 'https://picsum.photos/320/320'
+    }
+  },
+  robotDestinations: [
+    {
+      destination: 'Mars'
+    },
+    {
+      destination: 'Moon'
+    },
+    {
+      destination: 'Europa'
+    }
+  ],
+  alternativeStats: [
+    {
+      metricLabel: 'Legs',
+      metricUnit: 'unitless',
+      metricValue: '6'
+    },
+    {
+      metricLabel: 'Ability',
+      metricUnit: 'unitless',
+      metricValue: 'Climbing'
+    },
+    {
+      metricLabel: 'Wingspan',
+      metricUnit: 'meters',
+      metricValue: '8'
+    }
+  ]
+}
+
+export const Base = {
+  args: {
+    mass: RoboticsDetailStatsData.mass,
+    height: RoboticsDetailStatsData.height,
+    speed: RoboticsDetailStatsData.speed,
+    status: RoboticsDetailStatsData.status,
+    animalAnalogName: RoboticsDetailStatsData.animalAnalogName,
+    animalAnalogIcon: RoboticsDetailStatsData.animalAnalogIcon,
+    robotDestinations: RoboticsDetailStatsData.robotDestinations,
+    alternativeStats: RoboticsDetailStatsData.alternativeStats
+  }
+}
+
+export const Mini = {
+  args: {
+    mass: RoboticsDetailStatsData.mass,
+    height: RoboticsDetailStatsData.height,
+    speed: RoboticsDetailStatsData.speed,
+    alternativeStats: RoboticsDetailStatsData.alternativeStats
+  },
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    components: { RoboticsDetailStatsMini },
+    template: '<RoboticsDetailStatsMini v-bind="args" />'
+  })
+}

package/src/components/RoboticsDetailStats/RoboticsDetailStats.test.js

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+
+import RoboticsDetailStats from './RoboticsDetailStats.vue'
+
+describe('RoboticsDetailStats', () => {
+  test('does not display anything without content', () => {
+    const wrapper = mount(RoboticsDetailStats, {
+      propsData: {
+        mass: null,
+        height: null,
+        speed: null,
+        status: '',
+        animalAnalogName: '',
+        animalAnalogIcon: null,
+        robotDestinations: [],
+        alternativeStats: []
+      }
+    })
+    expect(wrapper.find('*').exists()).toBe(false)
+  })
+})