@explorer-1/vue 0.0.0

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js

@@ -0,0 +1,116 @@
+import TopicDetailMoreItem from './TopicDetailMoreItem.vue'
+export default {
+  title: 'WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
+  component: TopicDetailMoreItem,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="lg:w-1/3"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+const TopicDetailMoreItemData = {
+  default: {
+    __typename: 'ImageDetailPage',
+    type: 'ImageDetailPage',
+    url: '/images/placeholder/',
+    title: 'An Image Detail Page',
+    date: '2020-11-12T23:56:46.346940+00:00',
+    label: 'Image',
+    thumbnailImage: {
+      src: {
+        width: '600',
+        height: '400',
+        url: 'https://picsum.photos/600/400'
+      },
+      srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+    }
+  },
+  pageChooser: {
+    __typename: 'PageChooserBlock',
+    type: 'PageChooserBlock',
+    page: {
+      label: 'Mission',
+      thumbnailImage: {
+        src: {
+          width: '600',
+          height: '400',
+          url: 'https://picsum.photos/600/400'
+        },
+        srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+      },
+      title: 'Autonomous Sciencecraft Experiment',
+      url: '/missions/autonomous-sciencecraft-experiment-ase/'
+    }
+  },
+  externalLink: {
+    __typename: 'ExternalLinkCard',
+    type: 'ExternalLinkCard',
+    date: '2020-11-03',
+    title: 'Title for Link Card',
+    url: 'https://nasa.gov',
+    label: 'Link Label',
+    thumbnailImage: {
+      src: {
+        width: '600',
+        height: '400',
+        url: 'https://picsum.photos/600/400'
+      },
+      srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+    }
+  },
+  video: {
+    __typename: 'VideoDetailPage',
+    type: 'VideoDetailPage',
+    url: '/video/placeholder/',
+    title: 'A Video Detail Page',
+    date: '2020-11-12T23:56:46.346940+00:00',
+    label: 'Video',
+    thumbnailImage: {
+      src: {
+        width: '600',
+        height: '400',
+        url: 'https://picsum.photos/600/400'
+      },
+      srcSet: 'https://picsum.photos/600/400 320w, https://picsum.photos/600/400 600w,'
+    }
+  }
+}
+
+// stories
+export const Default = {
+  args: {
+    data: TopicDetailMoreItemData.default
+  }
+}
+export const PageChooser = {
+  args: {
+    data: TopicDetailMoreItemData.pageChooser
+  }
+}
+export const ExternalLink = {
+  args: {
+    data: TopicDetailMoreItemData.externalLink
+  }
+}
+
+export const Video = {
+  args: {
+    data: TopicDetailMoreItemData.video
+  }
+}
+
+export const NoImage = {
+  args: {
+    data: {
+      ...TopicDetailMoreItemData.externalLink,
+      thumbnailImage: null
+    }
+  }
+}

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.vue

@@ -0,0 +1,130 @@
+<template>
+  <BaseLink
+    v-if="theData"
+    class="TopicDetailMoreItem group can-hover:hover:shadow-lg shadow-jpl transition-all duration-200 ease-in"
+    variant="none"
+    :link-class="theData.thumbnailImage ? 'block' : 'flex items-center block lg:min-h-100'"
+    :to="theData.__typename !== 'ExternalLinkCard' ? theData.url : undefined"
+    :href="theData.__typename === 'ExternalLinkCard' ? theData.url : undefined"
+    external-target-blank
+  >
+    <div
+      v-if="theData.thumbnailImage"
+      class="relative"
+    >
+      <!-- icon for media -->
+      <div
+        v-if="theData.__typename === 'VideoDetailPage'"
+        class="bg-jpl-red lg:text-2xl absolute bottom-0 left-0 z-10 text-lg text-white"
+      >
+        <IconPlay />
+      </div>
+      <!-- image -->
+      <BaseImagePlaceholder
+        aspect-ratio="3:2"
+        dark-mode
+      >
+        <BaseImage
+          v-if="theData.thumbnailImage.src"
+          :src="theData.thumbnailImage.src.url"
+          :srcset="theData.thumbnailImage.srcSet"
+          :width="theData.thumbnailImage.src.width"
+          :height="theData.thumbnailImage.src.height"
+          alt=""
+          object-fit-class="cover"
+          loading="lazy"
+          image-class="can-hover:group-hover:scale-100 scale-103 transition-all duration-200 ease-in transform"
+        />
+      </BaseImagePlaceholder>
+    </div>
+    <div class="text-gray-dark md:px-5 md:py-5 lg:px-10 lg:py-8 w-full px-10 py-8">
+      <!-- label area -->
+      <div
+        v-if="theData.label || theData.date || theData.startDate"
+        class="flex flex-wrap items-center justify-between mb-5"
+      >
+        <p class="divide-gray-mid text-subtitle flex divide-x">
+          <span
+            v-if="theData.label"
+            class="pr-2"
+            >{{ theData.label }}</span
+          >
+          <span
+            v-if="theData.date || theData.startDate"
+            class="text-gray-mid-dark"
+            :class="{ 'pl-2': theData.label }"
+          >
+            <template v-if="theData.date">
+              {{
+                // @ts-ignore
+                $filters.displayDate(theData.date)
+              }}
+            </template>
+            <template v-else-if="theData.startDate">
+              {{ formattedEventDates }}
+            </template>
+          </span>
+          <span class="sr-only">.</span>
+        </p>
+        <IconExternal
+          v-if="theData.__typename === 'ExternalLinkCard'"
+          class="text-gray-mid-dark text-lg"
+        />
+      </div>
+
+      <!-- title -->
+      <h3 class="text-h5">{{ theData.title }}</h3>
+    </div>
+  </BaseLink>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { Card } from '../../interfaces'
+import { mixinFormatEventDates } from '../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import IconPlay from './../Icons/IconPlay.vue'
+import IconExternal from './../Icons/IconExternal.vue'
+
+export default defineComponent({
+  name: 'TopicDetailMoreItem',
+  components: {
+    BaseLink,
+    BaseImage,
+    BaseImagePlaceholder,
+    IconPlay,
+    IconExternal
+  },
+  props: {
+    data: {
+      type: Object as PropType<Card>,
+      required: false
+    }
+  },
+  computed: {
+    theData(): Card | undefined {
+      if ((this.data as Card)?.page) {
+        return (this.data as Card).page
+      } else if (this.data) {
+        return this.data
+      }
+      return undefined
+    },
+    formattedEventDates() {
+      if (this.theData?.startDate) {
+        return mixinFormatEventDates(this.theData.startDate, this.theData.endDate)
+      }
+      return undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+.TopicDetailMoreItem {
+  .text-subtitle.divide-x {
+    @apply leading-none #{!important};
+  }
+}
+</style>

package/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js

@@ -0,0 +1,34 @@
+import { BlockImageGalleryData } from './../BlockImageGallery/BlockImageGallery.stories'
+import { BlockQuoteData } from './../BlockQuote/BlockQuote.stories'
+import { BlockRelatedLinksData } from './../BlockRelatedLinks/BlockRelatedLinks.stories'
+import TopicDetailStreamfield from './TopicDetailStreamfield.vue'
+
+export default {
+  title: 'WWW/TopicDetail/TopicDetailStreamfield',
+  component: TopicDetailStreamfield,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+export const TopicDetailStreamfieldData = {
+  body: [
+    {
+      blockType: 'HeadingBlock',
+      heading: 'Heading Text'
+    },
+    BlockImageGalleryData.block,
+    BlockQuoteData,
+    BlockRelatedLinksData.data
+  ]
+}
+
+export const Default = { args: { data: TopicDetailStreamfieldData.body, topic: 'Topic Name' } }

package/src/components/TopicDetailStreamfield/TopicDetailStreamfield.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="data">
+    <template v-for="(block, index) in data">
+      <LayoutHelper
+        v-if="block.blockType == 'HeadingBlock'"
+        :key="`HeadingBlock${index}`"
+        indent="col-2"
+      >
+        <BaseHeading
+          level="h2"
+          class="lg:mt-18 mt-10 mb-5"
+        >
+          {{ block.heading }}
+        </BaseHeading>
+      </LayoutHelper>
+      <div
+        v-else-if="block.blockType == 'ImageGalleryBlock'"
+        :key="`ImageGalleryBlock${index}`"
+        class="max-w-screen-3xl lg:mb-18 mx-auto mb-10"
+      >
+        <BlockImageGallery
+          :label="topic"
+          :title="block.galleryTitle"
+          :description="block.galleryDescription"
+          :cover="block.coverImage"
+          :items="block.gallerySlides"
+        />
+      </div>
+
+      <LayoutHelper
+        v-else-if="block.blockType == 'QuoteBlock'"
+        :key="`QuoteBlock${index}`"
+        indent="col-2"
+        class="lg:my-18 my-10"
+      >
+        <BlockQuote :data="block as unknown as BlockQuoteAttributes" />
+      </LayoutHelper>
+      <LayoutHelper
+        v-else-if="block.blockType == 'RelatedLinksBlock'"
+        :key="`RelatedLinksBlock${index}`"
+        indent="col-2"
+        class="lg:my-18 my-10"
+      >
+        <BlockRelatedLinks :data="block as any as BlockRelatedLinksObject" />
+      </LayoutHelper>
+
+      <div
+        v-else
+        :key="index"
+        class="p-3 overflow-hidden border"
+      >
+        <pre>{{ block }}</pre>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import type { BlockQuoteAttributes } from './../BlockQuote/BlockQuote.vue'
+import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BlockQuote from './../BlockQuote/BlockQuote.vue'
+import BlockRelatedLinks, {
+  type BlockRelatedLinksObject
+} from './../BlockRelatedLinks/BlockRelatedLinks.vue'
+import BlockImageGallery from './../BlockImageGallery/BlockImageGallery.vue'
+
+interface BlockData {
+  blockType: string
+  heading: string
+  galleryTitle: string
+  galleryDescription: string
+  coverImage: ImageObject
+  gallerySlides: ImageObject[]
+}
+export default defineComponent({
+  name: 'TopicDetailStreamfield',
+  components: {
+    LayoutHelper,
+    BaseHeading,
+    BlockQuote,
+    BlockRelatedLinks,
+    BlockImageGallery
+  },
+  props: {
+    data: {
+      type: Array as PropType<BlockData[]>,
+      required: false
+    },
+    topic: {
+      type: String,
+      required: false
+    }
+  }
+})
+</script>

package/src/components/YearTicker/YearTicker.stories.js

@@ -0,0 +1,37 @@
+import YearTicker from './YearTicker.vue'
+
+export default {
+  title: 'Components/YearTicker',
+  component: YearTicker,
+  excludeStories: /.*Data$/
+}
+
+// prettier-ignore
+const demoYears = ['2019', '2018', '2017', '2016', '2015', '2014', '2013', '2012', '2011', '2006', '2005', '2004', '2002', '2000', '1998', '1997', '1995', '1993', '1991', '1990', '1989', '1986', '1983', '1979', '1978', '1975', '1974', '1971', '1966', '1965', '1964', '1963', '1962', '1959', '1958', '1956', '1947', '1944', '1943', '1939', '1936']
+
+// templates
+const YearTickerTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { YearTicker },
+  data() {
+    return {
+      demoYear: demoYears[0]
+    }
+  },
+  mounted() {
+    window.addEventListener('mousemove', this.updateYear, { passive: true })
+  },
+  beforeDestroy() {
+    window.removeEventListener('mousemove', this.updateYear)
+  },
+  methods: {
+    updateYear(e) {
+      const index = Math.floor(e.clientY / demoYears.length)
+      this.demoYear = String(demoYears[index])
+    }
+  },
+  template: `<YearTicker :targetYear="demoYear"/>`
+})
+
+export const Default = YearTickerTemplate.bind({})
+Default.storyName = 'YearTicker'

package/src/components/YearTicker/YearTicker.vue

@@ -0,0 +1,132 @@
+<template>
+  <div
+    class="YearTicker"
+    :style="`--duration:${duration}ms`"
+  >
+    <!-- One transition group per digit. -->
+    <transition-group
+      v-for="(digit, index) in Array.from(targetYear)"
+      :key="index"
+      :name="animation"
+      :duration="duration"
+    >
+      <!-- Key by digit so there can be two digits rendered at the same time. -->
+      <span
+        :key="digit"
+        class="Digit"
+        >{{ digit }}</span
+      >
+    </transition-group>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'YearTicker',
+  props: {
+    targetYear: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      year: this.targetYear,
+      animation: 'digits-increment',
+      duration: 100
+    }
+  },
+  watch: {
+    targetYear(newYear) {
+      this.animation = this.year > newYear ? 'digits-increment' : 'digits-decrement'
+      this.year = newYear
+    }
+  }
+})
+</script>
+<style lang="scss">
+.YearTicker {
+  @apply sticky transform text-gray-light-mid translate-x-0.5 md:translate-x-0 ml-7 md:ml-8 lg:ml-30 pt-10 md:pt-5;
+
+  // Unitless 0 isn’t supported in a `calc` operation.
+  // stylelint-disable-next-line length-zero-no-unit
+  --top-offset: 0px;
+
+  font-variant-numeric: tabular-nums;
+  font-weight: 900;
+  line-height: 1;
+  font-size: min(5rem, 25vw);
+  // Secondary nav minus gap.
+  top: calc(theme('spacing.16') - 1px + var(--top-offset));
+  z-index: 50;
+
+  @screen md {
+    --top-offset: theme('spacing.20');
+
+    z-index: -20;
+    font-size: min(8rem, 20vw);
+  }
+
+  @screen lg {
+    font-size: min(11.25rem, 10vw);
+  }
+
+  @screen xl {
+    font-size: min(11.25rem, 25vw);
+  }
+
+  .header-sticky-showing & {
+    // For the mobile viewport, offset by the height of the top header and NavSecondary combined.
+    top: calc(theme('spacing.18') + theme('spacing.16') + var(--top-offset));
+  }
+
+  &::after {
+    @apply md:hidden;
+
+    content: '';
+    position: absolute;
+    z-index: -10;
+    top: 2px;
+    left: 0;
+    width: 100%;
+    height: 140px;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, white 90%, transparent);
+  }
+
+  > span {
+    display: inline-grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+  }
+
+  .Digit {
+    // Force all digits in the same cell so they superpose.
+    grid-area: 1 / 1 / 1 / 1;
+    transition: transform var(--duration);
+    transform: translateY(0);
+
+    @media (prefers-reduced-motion: reduce) {
+      transition-duration: 0.1ms;
+    }
+  }
+  // transitions
+  .digits-decrement-enter-active {
+    transform: translateY(100%);
+  }
+
+  .digits-decrement-leave-active {
+    transform: translateY(-100%);
+  }
+
+  .digits-increment-enter-active {
+    transform: translateY(-100%);
+  }
+
+  .digits-increment-leave-active {
+    transform: translateY(100%);
+  }
+}
+</style>

package/src/docs/foundation/DynamicTokens.vue

@@ -0,0 +1,106 @@
+<template>
+  <table class="table-autotext-sm">
+    <thead>
+      <tr>
+        <th class="text-left w-1/2">Color</th>
+        <th class="text-left">Name</th>
+        <th class="text-left">Token</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <div class="bg-primary-light p-4"></div>
+        </td>
+        <td>Primary light</td>
+        <td><code class="text-sm">primary-light</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-primary p-4"></div>
+        </td>
+        <td>Primary</td>
+        <td><code class="text-sm">primary</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-primary-dark p-4"></div>
+        </td>
+        <td>Primary dark</td>
+        <td><code class="text-sm">primary-dark</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-primary-darker p-4"></div>
+        </td>
+        <td>Primary darker</td>
+        <td><code class="text-sm">primary-darker</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-secondary-light p-4"></div>
+        </td>
+        <td>Secondary light</td>
+        <td><code class="text-sm">primary-light</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-secondary p-4"></div>
+        </td>
+        <td>Secondary</td>
+        <td><code class="text-sm">primary</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-secondary-dark p-4"></div>
+        </td>
+        <td>Secondary dark</td>
+        <td><code class="text-sm">primary-dark</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-secondary-darker p-4"></div>
+        </td>
+        <td>Secondary darker</td>
+        <td><code class="text-sm">primary-darker</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-action-light p-4"></div>
+        </td>
+        <td>Action light</td>
+        <td><code class="text-sm">action-light</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-action p-4"></div>
+        </td>
+        <td>Action</td>
+        <td><code class="text-sm">action</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-action-dark p-4"></div>
+        </td>
+        <td>Action dark</td>
+        <td><code class="text-sm">action-dark</code></td>
+      </tr>
+      <tr>
+        <td>
+          <div class="bg-action-darker p-4"></div>
+        </td>
+        <td>Action darker</td>
+        <td><code class="text-sm">action-darker</code></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+<style scoped>
+.ThemeVariantDark table {
+  @apply text-white;
+}
+td,
+th {
+  @apply px-2;
+}
+</style>