@explorer-1/vue 0.0.0

package/src/components/MissionDetailStats/MissionDetailStats.vue

@@ -0,0 +1,187 @@
+<template>
+  <div
+    class="MissionDetailStats MixedBleedGrid lg:relative lg:z-20 lg:-mt-20 lg:pl-0 lg:mb-20 pl-4 mb-12"
+  >
+    <h2 class="sr-only">Mission Statistics</h2>
+    <div
+      class="theme col-start-indent-col-2 col-end-container lg:py-12 lg:px-0 text-body-lg px-8 py-10 pr-0"
+    >
+      <div
+        class="gap-y-10 grid grid-cols-10"
+        :class="{ 'adaptive-stats-grid 2xl:grid-cols-11': showClock }"
+      >
+        <div class="lg:block hidden col-span-1 row-span-2"></div>
+        <div
+          v-if="showClock && startDateTime"
+          class="lg:col-span-6 col-span-10"
+        >
+          <p class="label text-subtitle">{{ clockTypeLabel }}</p>
+          <BaseTimer
+            :target-date-time="startDateTime"
+            :selected-units="['years', 'months', 'days', 'hours', 'minutes', 'seconds']"
+            :countdown="clockType === 'countdown'"
+          />
+        </div>
+
+        <DistanceStats
+          v-if="showDistance"
+          class="lg:col-span-3 col-span-10"
+          :distance-type="distanceType"
+          :value="distanceValue"
+          value-system="imperial"
+          :distance-api-urls="distanceApiUrls"
+        >
+          <template #label="slotProps">
+            <p class="label text-subtitle">{{ slotProps.label }}</p>
+          </template>
+          <template #value="slotProps">
+            <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+          </template>
+        </DistanceStats>
+        <div
+          v-if="displayDate"
+          class="lg:col-span-2 col-span-5"
+        >
+          <p class="label text-subtitle">Launch Date</p>
+          <p>{{ displayDate }}</p>
+        </div>
+        <div
+          v-if="missionTypes.length > 0"
+          class="lg:col-span-2 col-span-5"
+        >
+          <p class="label text-subtitle">Type</p>
+          {{ missionTypes.map((t) => t.missionType).join(', ') }}
+        </div>
+        <div
+          v-if="missionTargets.length > 0"
+          class="lg:col-span-2 col-span-5"
+        >
+          <p class="label text-subtitle">Target</p>
+          {{ missionTargets.map((t) => t.target).join(', ') }}
+        </div>
+        <div
+          v-if="status !== 'draft'"
+          class="lg:col-span-2 col-span-5"
+        >
+          <p class="label text-subtitle">Status</p>
+          {{ statusLabel }}
+        </div>
+      </div>
+    </div>
+    <div class="theme col-start-container-end col-end-bleed"></div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import DistanceStats from './DistanceStats.vue'
+import type { DistanceType } from './DistanceStats.vue'
+import BaseTimer from './../BaseTimer/BaseTimer.vue'
+
+// https://github.com/nasa-jpl/www-backend/blame/develop/cms/missions/choices.py
+export const statuses = {
+  draft: 'Select status',
+  current: 'Current',
+  future: 'Future',
+  proposed: 'Proposed',
+  past: 'Past'
+} as const
+type Status = keyof typeof statuses
+type StatusLabel = (typeof statuses)[Status]
+
+export const clockTypes = {
+  countdown: 'Countdown',
+  time_in_orbit: 'Time in Orbit',
+  time_on_mars: 'Time on Mars',
+  time_to_mars: 'Time to Mars',
+  time_to_dest: 'Time to Destination'
+} as const
+export type ClockType = keyof typeof clockTypes
+
+/**
+ * Displays mission-related metrics or metadata. All fields optional.
+ */
+export default defineComponent({
+  name: 'MissionDetailStats',
+  components: {
+    BaseTimer,
+    DistanceStats
+  },
+  props: {
+    showClock: Boolean,
+    clockType: {
+      type: String as PropType<ClockType>,
+      required: true,
+      validator: (val: ClockType): boolean => Boolean(clockTypes[val])
+    },
+    startDateTime: String,
+    displayDate: {
+      type: String || null,
+      required: false
+    },
+    missionTypes: {
+      type: Array as PropType<{ missionType: string }[]>,
+      required: true,
+      default: () => []
+    },
+    missionTargets: {
+      type: Array as PropType<{ target: string }[]>,
+      required: true,
+      default: () => []
+    },
+    status: {
+      type: String as PropType<Status>,
+      required: true,
+      validator: (val: Status): boolean => Boolean(statuses[val])
+    },
+    showDistance: Boolean,
+    distanceType: {
+      type: String as PropType<DistanceType | ''>,
+      required: false,
+      default: ''
+    },
+    distanceValue: Number,
+    distanceApiUrls: String
+  },
+  computed: {
+    clockTypeLabel(): string {
+      return clockTypes[this.clockType as ClockType] || this.clockType
+    },
+    statusLabel(): StatusLabel | Status {
+      return statuses[this.status as Status] || this.status
+    }
+  }
+})
+</script>
+<style lang="scss">
+.MissionDetailStats {
+  .adaptive-stats-grid div:nth-child(3) {
+    @apply col-span-3;
+  }
+
+  .theme {
+    @apply bg-gray-light text-gray-dark;
+  }
+
+  .ThemeVariantDark & .theme {
+    @apply bg-dark-blue bg-opacity-75 text-white;
+  }
+
+  .label {
+    @apply font-semibold mb-3 text-jpl-red-dark;
+  }
+
+  .ThemeVariantDark & .label {
+    @apply text-jpl-aqua;
+  }
+
+  .legend {
+    @apply text-gray-mid-dark;
+  }
+
+  .ThemeVariantDark & .legend {
+    @apply text-white;
+  }
+}
+</style>

package/src/components/MissionDetailStats/MissionDetailStatsMicro.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="MissionDetailStatsMicro bg-dark-blue sm:py-0 p-3 py-1 text-white">
+    <div v-if="showClock && startDateTime">
+      <BaseTimer
+        :target-date-time="startDateTime"
+        inline
+        :countdown="clockType === 'countdown'"
+      />
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import { clockTypes } from './MissionDetailStats.vue'
+import type { ClockType } from './MissionDetailStats.vue'
+import BaseTimer from './../BaseTimer/BaseTimer.vue'
+
+export default defineComponent({
+  name: 'MissionDetailStatsMicro',
+  components: {
+    BaseTimer
+  },
+  props: {
+    showClock: Boolean,
+    startDateTime: String,
+    clockType: {
+      type: String as PropType<ClockType>,
+      required: true,
+      validator: (val: ClockType): boolean => Boolean(clockTypes[val])
+    }
+  }
+})
+</script>
+<style lang="scss">
+.MissionDetailStatsMicro {
+  .text-stats-xl {
+    @apply text-base leading-none;
+
+    @screen sm {
+      @apply text-4xl;
+    }
+  }
+
+  .legend {
+    @apply text-sm;
+    @screen sm {
+      @apply text-base;
+    }
+  }
+}
+</style>

package/src/components/MissionDetailStats/MissionDetailStatsMini.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="MissionDetailStatsMini MixedBleedGrid">
+    <div class="theme col-start-bleed col-end-container-start"></div>
+    <div class="col-start-container col-end-container text-body-lg">
+      <div class="grid grid-cols-12">
+        <div
+          v-if="showClock && startDateTime"
+          class="theme-inner lg:col-span-4 xl:col-span-4 2xl:col-span-3 sm:col-span-7 col-span-11"
+        >
+          <p class="text-jpl-aqua text-subtitle mb-3">
+            {{ clockTypeLabel }}
+          </p>
+          <BaseTimer
+            :target-date-time="startDateTime"
+            :countdown="clockType === 'countdown'"
+          />
+        </div>
+
+        <DistanceStats
+          v-if="showDistance"
+          class="theme-inner lg:col-span-4 xl:col-span-4 2xl:col-span-3 sm:col-span-7 col-span-11"
+          :distance-type="distanceType as DistanceType"
+          :value="distanceValue"
+          value-system="imperial"
+          :distance-api-urls="distanceApiUrls"
+        >
+          <template #label="slotProps">
+            <p class="text-jpl-aqua text-subtitle mb-3">
+              {{ slotProps.label }}
+            </p>
+          </template>
+          <template #value="slotProps">
+            <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+          </template>
+        </DistanceStats>
+        <div class="lg:block hidden col-span-1"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import DistanceStats from './DistanceStats.vue'
+import { clockTypes } from './MissionDetailStats.vue'
+import type { DistanceType } from './DistanceStats.vue'
+import type { ClockType } from './MissionDetailStats.vue'
+import BaseTimer from './../BaseTimer/BaseTimer.vue'
+
+/**
+ * Displays mission-related metrics or metadata. All fields optional.
+ */
+export default defineComponent({
+  name: 'MissionDetailStatsMini',
+  components: {
+    BaseTimer,
+    DistanceStats
+  },
+  props: {
+    showClock: Boolean,
+    clockType: {
+      type: String as PropType<ClockType>,
+      required: true,
+      validator: (val: ClockType): boolean => Boolean(clockTypes[val])
+    },
+    startDateTime: String,
+    showDistance: Boolean,
+    distanceType: {
+      type: String as PropType<DistanceType | ''>
+    },
+    distanceValue: Number,
+    distanceApiUrls: String
+  },
+  computed: {
+    clockTypeLabel(): string {
+      return clockTypes[this.clockType as ClockType] || this.clockType
+    }
+  }
+})
+</script>
+<style lang="scss">
+.MissionDetailStatsMini {
+  .theme,
+  .theme-inner {
+    @apply bg-dark-blue bg-opacity-75 text-white;
+  }
+  // different padding left for first child, which is dynamic
+  .theme-inner {
+    @apply pl-10 pb-10;
+    @screen lg {
+      @apply py-10 pl-0;
+    }
+
+    &:first-child {
+      @apply pt-10;
+      @screen lg {
+        @apply pl-10;
+      }
+      @screen 2xl {
+        @apply pl-0;
+      }
+    }
+  }
+
+  .legend {
+    @apply text-white;
+  }
+}
+</style>

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.stories.js

@@ -0,0 +1,55 @@
+import { BaseImageCaptionData } from './../BaseImageCaption/BaseImageCaption.stories.js'
+import { BlockIframeEmbedData } from './../BlockIframeEmbed/BlockIframeEmbed.stories.js'
+import MissionDetailStreamfield from './MissionDetailStreamfield.vue'
+
+export default {
+  title: 'WWW/MissionDetail/MissionDetailStreamfield',
+  component: MissionDetailStreamfield,
+  excludeStories: /.*Data$/
+}
+
+export const MissionDetailStreamfieldData = {
+  feature: [
+    {
+      blockType: 'HeadingBlock',
+      heading: 'GRACE-FO Data'
+    },
+    {
+      alignTo: 'right',
+      blockType: 'InlineImageBlock',
+      image: {
+        ...BaseImageCaptionData,
+        src: {
+          height: 700,
+          url: 'https://picsum.photos/700/700',
+          width: 700
+        },
+        screenXs: {
+          url: 'https://picsum.photos/320/320',
+          width: 320
+        },
+        screenLg: {
+          url: 'https://picsum.photos/1024/1024',
+          width: 1024
+        },
+        alt: ''
+      },
+      text: '<p>Global surface mass anomalies observed by the GRACE-FO satellites. GRACE-FO provides regular (at least monthly) updates of surface mass anomalies.<br/></p><p>For more information and data access, please visit <a href="https://grace.jpl.nasa.gov">grace.jpl.nasa.gov</a>.</p>'
+    },
+    {
+      blockType: 'QuoteBlock',
+      attribution: 'Felix Landerer, Project Scientist',
+      quote:
+        'As an oceanographer myself, it never ceases to amaze me that we can map month-to-month pressure differences as small as 10 mm at the bottom of the oceans from space.”',
+      quoteLink: [
+        {
+          externalLink: 'http://google.com',
+          page: null
+        }
+      ]
+    },
+    { ...BlockIframeEmbedData }
+  ]
+}
+
+export const Streamfield = { args: { data: MissionDetailStreamfieldData.feature } }

package/src/components/MissionDetailStreamfield/MissionDetailStreamfield.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    v-if="data"
+    class="MissionDetailStreamfield"
+  >
+    <template v-for="(block, index) in data">
+      <LayoutHelper
+        v-if="block.blockType == 'HeadingBlock'"
+        :key="index"
+        indent="col-2"
+      >
+        <BaseHeading
+          :level="block.level"
+          class="MissionDetailStreamfield-heading md:mb-8 mb-5"
+        >
+          {{ block.heading }}
+        </BaseHeading>
+      </LayoutHelper>
+      <MissionDetailInlineImage
+        v-else-if="block.blockType == 'InlineImageBlock'"
+        :key="`InlineImageBlock${index}`"
+        :alignment="block.alignTo"
+        :text="block.text"
+        :image="block.image"
+        class="lg:mb-18 mb-10"
+      />
+      <LayoutHelper
+        v-else-if="block.blockType == 'QuoteBlock'"
+        :key="`QuoteBlock${index}`"
+        indent="col-3"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockQuote :data="block" />
+      </LayoutHelper>
+      <LayoutHelper
+        v-else-if="block.blockType == 'IframeEmbedBlock'"
+        :key="`IframeEmbedBlock${index}`"
+        indent="col-2"
+        class="lg:mb-18 mb-10"
+      >
+        <BlockIframeEmbed :data="block" />
+      </LayoutHelper>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import MissionDetailInlineImage from './../MissionDetailInlineImage/MissionDetailInlineImage.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BlockQuote from './../BlockQuote/BlockQuote.vue'
+import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+import BlockIframeEmbed from './../BlockIframeEmbed/BlockIframeEmbed.vue'
+
+export default {
+  name: 'MissionDetailStreamfield',
+  components: {
+    MissionDetailInlineImage,
+    BaseHeading,
+    BlockQuote,
+    LayoutHelper,
+    BlockIframeEmbed
+  },
+  props: {
+    data: {
+      type: Array,
+      required: false
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.ThemeVariantDark {
+  .MissionDetailStreamfield-heading,
+  .BlockText {
+    @apply text-white;
+  }
+}
+
+.MissionDetailStreamfield {
+  .MissionDetailInlineImage {
+    .featured-image {
+      max-width: 700px;
+      width: auto;
+      position: relative;
+      display: block;
+    }
+    @media screen and (min-width: 1024px) {
+      .BlockText p {
+        max-width: 30ch;
+      }
+    }
+  }
+}
+</style>

package/src/components/MixinAnimationCaret/MixinAnimationCaret.stories.ts

@@ -0,0 +1,24 @@
+import MixinAnimationCaret from './MixinAnimationCaret.vue'
+
+export default {
+  title: 'Mixins/MixinAnimationCaret',
+  component: MixinAnimationCaret,
+  parameters: {
+    slots: {
+      default: 'Default slot content'
+    },
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'This mixin appends an animated caret to a line of text or to more complex HTML markup. When implemented, it must be wrapped by a link element with CSS class `group` to ensure that the animation is triggered by hovering over the link. See the `BaseLink` primary variant for an implementation example.'
+      }
+    }
+  }
+}
+
+export const Default = {
+  args: {
+    default: 'Text with caret'
+  }
+}

package/src/components/MixinAnimationCaret/MixinAnimationCaret.vue

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import IconCaret from './../Icons/IconCaret.vue'
+
+export default defineComponent({
+  name: 'MixinAnimationCaret',
+  components: {
+    IconCaret
+  },
+  props: {
+    // when wrapped in a parent component i.e. BaseLink and grandparent component needs to pass a class
+    // appended to classes applied to .MixinAnimationCaret
+    passedWrapperClass: {
+      type: String || null,
+      required: false,
+      default: ''
+    },
+    // to modify spacing around the caret itself
+    arrowClass: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // default color class
+    color: {
+      type: String,
+      required: false,
+      default: 'text-primary'
+    },
+    // default margin left class
+    marginLeft: {
+      type: String,
+      default: 'ml-1',
+      required: false
+    },
+    // appends .caret-inline .MixinAnimationCaret
+    inline: {
+      type: Boolean,
+      default: false,
+      required: false
+    }
+  },
+  computed: {
+    computedClass(): string {
+      let classes = ''
+      if (this.passedWrapperClass) {
+        classes = classes + ' ' + this.passedWrapperClass
+      }
+      if (this.inline) {
+        classes = classes + ' caret-inline'
+      }
+      return classes
+    }
+  }
+})
+</script>
+<template>
+  <span
+    class="MixinAnimationCaret"
+    :class="computedClass"
+  >
+    <span>
+      <slot></slot>
+    </span>
+    <span
+      class="arrow-wrapper"
+      :class="[arrowClass, color, marginLeft]"
+      aria-hidden="true"
+    >
+      <span class="arrow">
+        <IconCaret />
+      </span>
+      <span class="arrow-fixed">
+        <IconCaret />
+      </span>
+    </span>
+  </span>
+</template>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/MixinAnimationCaret';
+</style>

package/src/components/MixinCarousel/MixinCarousel.docs.mdx

@@ -0,0 +1,33 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import * as Stories from './MixinCarousel.stories'
+
+<Meta of={Stories} />
+
+# MixinCarousel
+
+This is a `swiper.js` wrapper for the carousels that consist of multiple cards in view that also bleed to full width.
+
+<Canvas of={Stories.Default} />
+
+### Variants
+
+There are currently two variants that can be applied via the `variant` prop. These are used to to apply a class to the main wrapper that dictates subtle changes to the layout. For the most part, these have to do with the vertical placement of the navigation arrows.
+
+| Variant | Description                                                                                                                                                                       |
+| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cards` | This is the default variant and accommodates cards that have text below the image. This places the navigation arrows in the vertical center of an image with a 16:9 aspect ratio. |
+| `tiles` | This places the navigation arrows in the vertical center of the entire slide                                                                                                      |
+
+## Basic Usage
+
+The default slot should be your slides, and each slide must have the `.swiper-slide` class.
+
+### Option with a link in the top right
+
+And with a link using the `link` and `linkTitle` props:
+
+<Canvas of={Stories.BaseCarouselWLink} />
+
+## Used in the following components
+
+See [all usage in the repository](https://github.com/nasa-jpl/www-frontend/search?q=MixinCarousel&type=code).

package/src/components/MixinCarousel/MixinCarousel.stories.js

@@ -0,0 +1,53 @@
+import MixinCarousel, { variants } from './MixinCarousel.vue'
+
+export default {
+  title: 'Mixins/MixinCarousel',
+  component: MixinCarousel,
+  tags: ['!autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: Object.keys(variants)
+    }
+  }
+}
+
+export const Default = {
+  name: 'BaseCarousel',
+  args: {
+    heading: 'Heading',
+    variant: 'tiles'
+  },
+  render: (args) => ({
+    components: { MixinCarousel },
+    setup() {
+      return { args }
+    },
+    template: `<MixinCarousel v-bind="args">
+    <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide">
+      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide">
+    </div>
+  </MixinCarousel>`
+  })
+}
+
+export const BaseCarouselWLink = {
+  name: 'BaseCarousel w/ Link',
+  args: {
+    heading: 'Heading',
+    variant: 'tiles',
+    link: '/placeholder',
+    linkTitle: 'See more'
+  },
+  render: (args) => ({
+    components: { MixinCarousel },
+    setup() {
+      return { args }
+    },
+    template: `<MixinCarousel v-bind="args">
+    <div v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7]" :key="index" class="swiper-slide">
+      <img src="https://picsum.photos/550/483" width="550" height="483" alt="test slide">
+    </div>
+  </MixinCarousel>`
+  })
+}