@explorer-1/vue 0.1.0 → 0.1.2

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -16,7 +16,7 @@ export default {
 }
 
 // stories
-export const EventDetail = {
+export const BaseStory = {
   args: {
     data: {
       id: '285',

package/src/templates/PageNewsDetail/PageNewsDetail.stories.js

@@ -28,7 +28,7 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const NewsDetail = {
+export const BaseStory = {
   args: {
     data: {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
@@ -75,7 +75,7 @@ export const NewsDetail = {
 export const InlineHero = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline'
     }
   }
@@ -84,7 +84,7 @@ export const InlineHero = {
 export const HeroCarousel = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
     }
   }
@@ -93,7 +93,7 @@ export const HeroCarousel = {
 export const HeroImageComparison = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline',
       hero: [
         {
@@ -107,7 +107,7 @@ export const HeroImageComparison = {
 export const HeroVideo = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: [
         {
           blockType: 'VideoBlock',
@@ -123,7 +123,7 @@ export const HeroVideo = {
 export const HeroVideoEmbed = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline',
       hero: [
         {
@@ -141,7 +141,7 @@ export const HeroVideoEmbed = {
 export const NoHero = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: []
     }
   }
@@ -150,7 +150,7 @@ export const NoHero = {
 export const WithTopper = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       topper:
         '<p>Editor’s Note: Mars Helicopter flight delayed to no earlier than April 14.</p><p><a href="https://mars.nasa.gov/technology/helicopter/status/291/mars-helicopter-flight-delayed-to-no-earlier-than-april-14/"><i>Read here for more information</i></a><i>.</i></p><p></p><hr/><p></p>'
     }

package/src/templates/edu/PageEduNewsDetail.stories.js

@@ -13,12 +13,17 @@ export default {
   parameters: {
     html: {
       root: '#storyDecorator'
+    },
+    docs: {
+      description: {
+        component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
+      }
     }
   },
   excludeStories: /.*Data$/
 }
 
-export const EduNewsDetail = {
+export const BaseStory = {
   args: {
     data: {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
@@ -48,7 +53,7 @@ export const EduNewsDetail = {
 export const InlineHero = {
   args: {
     data: {
-      ...EduNewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline'
     }
   }
@@ -57,7 +62,7 @@ export const InlineHero = {
 export const NoHero = {
   args: {
     data: {
-      ...EduNewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: []
     }
   }

package/src/templates/edu/PageEduNewsDetail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import isEmpty from 'lodash/isEmpty'
+import isEmpty from 'lodash/isEmpty.js'
 import type { StreamfieldBlockData } from '../../components/BlockStreamfield/BlockStreamfield.vue'
 import type {
   ImageObject,
@@ -67,7 +67,7 @@ const dateTimeArray = computed(() => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeEdu ThemeVariantLight"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"

package/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx

@@ -1,68 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
-
-<Meta
-  title="Components/Base/BaseCheckboxGroup"
-  component={BaseCheckboxGroup}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseCheckboxGroupData = {
-  options: [
-    {
-      id: 'educators',
-      title: 'Educators',
-      text: null
-    },
-    {
-      id: 'educator-workshop',
-      title: 'Educators Workshops',
-      text: 'Southern California'
-    },
-    {
-      id: 'students',
-      title: 'Students K-12',
-      text: null
-    },
-    {
-      id: 'internships',
-      title: 'Internships',
-      text: null
-    }
-  ],
-  group: 'edumail',
-  heading: 'JPL Education Groups',
-  subHeading:
-    'The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA.',
-  title: 'Education Email Groups'
-}
-
-export const BaseCheckboxGroupTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseCheckboxGroup },
-  template: `<BaseCheckboxGroup :options="options" :group="group" :heading="heading" :sub-heading="subHeading" :title="title"
-></BaseCheckboxGroup>`
-})
-
-# Base Checkbox Group
-
-## Usage
-
-The BaseCheckboxGroup component is expected to contain an array of options and a grouping name with the goal of selecting multiple options.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseCheckboxGroupData}
-  >
-    {BaseCheckboxGroupTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseCheckboxGroup} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseCheckboxGroupData, null, 2)}</code>

package/src/components/BaseRadioGroup/BaseRadioGroup.stories.mdx

@@ -1,68 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseRadioGroup from './BaseRadioGroup.vue'
-
-<Meta
-  title="Components/Base/BaseRadioGroup"
-  component={BaseRadioGroup}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseRadioGroupData = {
-  options: [
-    {
-      id: 'breaking',
-      title: 'Breaking News',
-      text: 'All JPL News delivered immediately'
-    },
-    {
-      id: 'daily',
-      title: 'Daily News',
-      text: 'Single Daily JPL News summary'
-    },
-    {
-      id: 'weekly',
-      title: 'Weekly News',
-      text: 'Single Weekly JPL News summary'
-    },
-    {
-      id: 'monthly',
-      title: 'Monthly News',
-      text: 'Monthly Digest for JPL News'
-    }
-  ],
-  group: 'email',
-  preselected: 'breaking',
-  heading: 'JPL Forms',
-  subHeading: 'Choose how frequently you want to receive updates (opt out anytime):',
-  title: 'Email Groups'
-}
-
-export const BaseRadioGroupTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseRadioGroup },
-  template: `<BaseRadioGroup :options="options" :group="group" :preselected="preselected" :heading="heading" :sub-heading="subHeading" :title="title"
-></BaseRadioGroup>`
-})
-
-# Base Radio Group
-
-## Usage
-
-The BaseRadioGroup component is expected to contain an array of options and a grouping name with the goal of selecting a single option.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseRadioGroupData}
-  >
-    {BaseRadioGroupTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseRadioGroup} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseRadioGroupData, null, 2)}</code>

package/src/components/BaseSwimlane/BaseSwimlane.stories.mdx

@@ -1,64 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseSwimlane from './BaseSwimlane.vue'
-
-<Meta
-  title="Components/Base/BaseSwimlane"
-  component={BaseSwimlane}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseSwimlaneData = {
-  words: [
-    'Artists',
-    'Communicators',
-    'Designers',
-    'Disruptors',
-    'Dreamers',
-    'Educators',
-    'Engineers',
-    'Innovators',
-    'Inventors',
-    'Makers',
-    'Problem Solvers',
-    'Roboticists',
-    'Scientists',
-    'Software Engineers',
-    'Thinkers',
-    'Visualizers'
-  ],
-  rows: 9,
-  scale: 2,
-  transition: 'ease-out',
-  transitionDuration: 1800,
-  transitionDelay: 800
-}
-
-export const BaseSwimlaneTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseSwimlane },
-  template: `<BaseSwimlane :words="words" :rows="rows" :scale="scale" :transition="transition" :transition-duration="transitionDuration" :transition-delay="transitionDelay"
-></BaseSwimlane>`
-})
-
-# Base Swimlane
-
-## Usage
-
-The BaseSwimlane component is expected to contain an array of words to create a 'swimlane' effect as the text swims through.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseSwimlaneData}
-  >
-    {BaseSwimlaneTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseSwimlane} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseSwimlaneData, null, 2)}</code>

package/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx

@@ -1,77 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import SwimlaneCTA from './SwimlaneCTA.vue'
-
-<Meta
-  title="Components/SwimlaneCTA"
-  component={SwimlaneCTA}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const SwimlaneCTAData = {
-  darkMode: true,
-  targetLink: 'https://jpl.nasa.gov/about',
-  backgroundImages: [
-    'https://picsum.photos/1380/540?random=1',
-    'https://picsum.photos/1380/540?random=2',
-    'https://picsum.photos/1380/540?random=3',
-    'https://picsum.photos/1380/540?random=4',
-    'https://picsum.photos/1380/540?random=5'
-  ],
-  backgroundImagesSmall: [
-    'https://picsum.photos/1380/540?random=1',
-    'https://picsum.photos/1380/540?random=2',
-    'https://picsum.photos/1380/540?random=3',
-    'https://picsum.photos/1380/540?random=4',
-    'https://picsum.photos/1380/540?random=5'
-  ],
-  words: [
-    'Artists',
-    'Communicators',
-    'Designers',
-    'Disruptors',
-    'Dreamers',
-    'Developers',
-    'Educators',
-    'Engineers',
-    'Innovators',
-    'Inventors',
-    'Makers',
-    'Problem Solvers',
-    'Roboticists',
-    'Scientists',
-    'Software Engineers',
-    'Thinkers',
-    'Visualizers'
-  ],
-  rows: 9,
-  transitionDuration: 1800,
-  transitionDelay: 800
-}
-export const SwimlaneCTATemplate = (args) => ({
-  props: Object.keys(args),
-  components: { SwimlaneCTA },
-  template: `<SwimlaneCTA :dark-mode="darkMode" :background-images="backgroundImages" :background-images-small="backgroundImagesSmall" :target-link="targetLink"/>`
-})
-
-# SwimlaneCTA
-
-## Usage
-
-The SwimlaneCTA component combines [BaseSwimlane](?path=/story/www-components-base-baseswimlane--default) with other elements (JPL logo, links, etc.) to create the component that is used on the WWW homepage.
-
-<Canvas className="sbdocs-preview-full-width">
-  <Story
-    name="SwimlaneCTA"
-    args={SwimlaneCTAData}
-  >
-    {SwimlaneCTATemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={SwimlaneCTA} />
-
-## Example data
-
-<code language="json">{JSON.stringify(SwimlaneCTAData, null, 2)}</code>