@explorer-1/vue 0.1.1 → 0.1.3

package/src/components/NavMobile/NavMobile.vue

@@ -2,22 +2,39 @@
   <transition name="headerMobileReveal">
     <div
       v-show="headerVisible"
-      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b"
+      class="NavMobile border-gray-light-mid z-50 w-full transition-all duration-150 ease-in bg-white border-b edu:bg-gray-light edu:border-none"
       :class="headerClasses"
     >
       <!-- navbar -->
       <div class="relative w-full">
-        <div class="h-18 flex items-center justify-between px-5">
+        <div
+          class="h-18 flex w-full justify-between items-center px-5 edu:bg-gradient-to-r edu:from-black edu:to-primary edu:to-90% edu:bg-black"
+        >
           <!-- branding -->
-          <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3">
-            <img
-              :src="LogoColor"
-              alt="JPL Logo"
-              width="324"
-              height="72"
-            />
-          </NavLogoLinks>
-
+          <div class="flex items-center">
+            <NavLogoLinks class="lg:p-0 w-72 z-20 p-2 pl-0 -ml-3 edu:w-[12rem]">
+              <img
+                v-if="themeStore.theme === 'ThemeEdu'"
+                :src="LogoWhite"
+                alt="JPL Logo"
+                width="324"
+                height="72"
+              />
+              <img
+                v-else
+                :src="LogoColor"
+                alt="JPL Logo"
+                width="324"
+                height="72"
+              />
+            </NavLogoLinks>
+            <div
+              v-if="themeStore.theme === 'ThemeEdu'"
+              class="-ml-1 pl-2 border-l border-white border-opacity-30 z-20"
+            >
+              <span class="text-white font-bold text-xl pl-px">Education</span>
+            </div>
+          </div>
           <button
             v-if="data"
             class="text-gray-dark p-4 -mr-4 cursor-pointer"
@@ -26,11 +43,11 @@
           >
             <IconMenu
               v-if="!menuVisible"
-              class="text-6xl"
+              class="text-6xl edu:text-white"
             />
             <IconClose
               v-else
-              class="text-3xl"
+              class="text-3xl edu:text-white"
             />
           </button>
         </div>
@@ -84,7 +101,10 @@
                 :data="item"
               />
             </nav>
-            <NavSocial class="mt-8" />
+            <NavSocial
+              v-if="themeStore.theme === 'defaultTheme'"
+              class="mt-8"
+            />
           </div>
         </div>
       </div>
@@ -96,7 +116,9 @@
 import { defineComponent } from 'vue'
 import { mapStores } from 'pinia'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
+import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
 import { useHeaderStore } from './../../store/header'
+import { useThemeStore } from './../../store/theme'
 import IconMenu from './../Icons/IconMenu.vue'
 import IconClose from './../Icons/IconClose.vue'
 import NavLogoLinks from './../NavLogoLinks/NavLogoLinks.vue'
@@ -146,15 +168,18 @@ export default defineComponent({
       default: null
     }
   },
+  emits: ['closeMobileMenu', 'openMobileMenu'],
   data() {
     return {
       menuVisible: false,
       searchQuery: null,
-      LogoColor: LogoColor
+      LogoColor,
+      LogoWhite
     }
   },
   computed: {
     ...mapStores(useHeaderStore),
+    ...mapStores(useThemeStore),
     // get the breadcrumb JSON string and convert to object. used to determine active class.
     breadcrumb(): BreadcrumbObject | null {
       if (this.data) {

package/src/components/NavMobile/NavMobileDropdown.vue

@@ -3,7 +3,7 @@
     ref="NavDropdownMobile"
     class="NavDropdownMobile"
   >
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       class="group relative block w-full px-4 py-2 text-xl font-medium text-left"
       :class="{
@@ -18,7 +18,7 @@
       >
         {{ (data.length && data[0].title) || getLinkText(data.titleLink) }}
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
 
     <div v-if="dropdownVisible">
       <div class="mt-1 mb-3">
@@ -60,14 +60,14 @@
 // @ts-nocheck
 import { defineComponent } from 'vue'
 import type { LinkObject } from '../../utils/mixins'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavMobileLink from './../NavMobile/NavMobileLink.vue'
 import NavMobileSecondaryDropdown from './../NavMobile/NavMobileSecondaryDropdown.vue'
 import { mixinGetLinkText } from '../../utils/mixins'
 export default defineComponent({
   name: 'NavMobileDropdown',
   components: {
-    MixinDropdownToggle,
+    NavDropdownToggle,
     NavMobileLink,
     NavMobileSecondaryDropdown
   },

package/src/components/NavMobile/NavMobileEdu.stories.js

@@ -0,0 +1,174 @@
+import { TheFooterData } from './../TheFooter/TheFooter.stories'
+import NavMobile from './NavMobile.vue'
+
+export default {
+  title: 'Navigation/Headers/EDU/NavMobile',
+  component: NavMobile,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas',
+    viewport: {
+      defaultViewport: 'mobile2'
+    },
+    docs: {
+      description: {
+        component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
+      }
+    }
+  }
+}
+
+// data
+export const NavMobileData = {
+  mobileBreadcrumb:
+    '{"/": [{"path": "http://www.jpl.nasa.gov/", "title": "Asteroid watch"}, {"path": "http://www.jpl.nasa.gov/", "title": "Asteroid fast facts"}, {"path": "http://www.jpl.nasa.gov/", "title": "Meteor shower viewing guide"}, {"path": "http://www.jpl.nasa.gov/", "title": "Yeoman\'s top 10"}, {"path": "http://www.jpl.nasa.gov/", "title": "Glossary of space rocks"}, {"path": "/robotics-at-jpl/", "title": "Robotics"}, {"path": "http://www.jpl.nasa.gov/", "title": "Apps"}, {"path": "/jpl-life/", "title": "JPL Life"}, {"path": "/stars-and-galaxies/", "title": "Stars and Galaxies"}, {"path": "/exoplanets/", "title": "Exoplanets"}, {"path": "/solar-system/", "title": "Solar System"}, {"path": "/asteroids/", "title": "Asteroids"}, {"path": "/comets/", "title": "Comets"}, {"path": "/technology/", "title": "Technology"}, {"path": "/mars/", "title": "Mars"}, {"path": "/earth/", "title": "Earth"}, {"path": "/climate-change/", "title": "Climate Change"}, {"path": "/earthquakes/", "title": "Earthquakes"}, {"path": "/weather/", "title": "Weather"}, {"path": "/robotics/", "title": "Robotics"}], "/missions/": [{"path": "/missions/", "title": "Current"}, {"path": "/missions/", "title": "Past"}, {"path": "/missions/", "title": "Future"}, {"path": "/missions/", "title": "Proposed"}, {"path": "/missions/", "title": "All"}], "/news/": [{"path": "/news/", "title": "All news"}, {"path": "/news/", "title": "Press kits"}, {"path": "/news/", "title": "Fact sheets"}, {"path": "/news/", "title": "Media Information"}, {"path": "/news/", "title": "JPL newsletter"}]}',
+  footerNavigation: TheFooterData.footerNavigation,
+  footerMoreFromJpl: TheFooterData.footerMoreFromJpl
+}
+
+const NavMobileSecondaryNavData = [
+  { path: '/custom', title: 'Secondary Nav' },
+  {
+    path: '/custom/placeholder-1',
+    title: 'First subpage'
+  },
+  {
+    path: '/custom/placeholder-2',
+    title: 'Second subpage'
+  },
+  {
+    path: '/custom/placeholder-3',
+    title: 'Third subpage'
+  },
+  {
+    path: '/custom/placeholder-4',
+    title: 'Fourth subpage'
+  }
+]
+
+const NavMobileTertiaryNavData = [
+  { path: '/go/test-site', title: 'Test Go Site', children: [] },
+  {
+    path: '/go/test-site/has-children',
+    title: 'Has Children',
+    children: [
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      },
+      {
+        path: '/go/test-site/has-children/level-3-has-children',
+        title: 'Lvl 3 Has Children',
+        children: [
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-1',
+            title: 'Lvl 4 No Children 1',
+            children: []
+          },
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-2',
+            title: 'Lvl 4 No Children 2',
+            children: []
+          }
+        ]
+      },
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      }
+    ]
+  },
+  { path: '/go/test-site/no-children-1', title: 'No Children 1', children: [] },
+  { path: '/go/test-site/no-children-2', title: 'No Children 2', children: [] },
+  {
+    path: '/go/test-site/has-children',
+    title: 'Has Children',
+    children: [
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      },
+      {
+        path: '/go/test-site/has-children/level-3-has-children',
+        title: 'Lvl 3 Has Children',
+        children: [
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-1',
+            title: 'Lvl 4 No Children 1',
+            children: []
+          },
+          {
+            path: '/go/test-site/has-children/level-3-has-children/level-4-no-children-2',
+            title: 'Lvl 4 No Children 2',
+            children: []
+          }
+        ]
+      },
+      {
+        path: '/go/test-site/has-children/level-3-no-children',
+        title: 'Lvl 3 No Children',
+        children: []
+      }
+    ]
+  }
+]
+
+export const BaseStory = {
+  name: 'NavMobile',
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const WithSecondaryNav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    staticSecondaryData: NavMobileSecondaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}
+
+export const WithTertiaryNav = {
+  args: {
+    data: NavMobileData,
+    headerVisible: true,
+    scrolledUp: false,
+    scrollTop: 0,
+    staticSecondaryData: NavMobileTertiaryNavData
+  },
+  render: (args) => ({
+    components: { NavMobile },
+    setup() {
+      return { args }
+    },
+    template: `<NavMobile
+      v-bind="args"
+    />`
+  })
+}

package/src/components/NavMobile/NavMobileSecondaryDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="NavMobileSecondaryDropdown relative">
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="w-full group cursor-pointer pl-12 flex items-center py-2 text-lg leading-tight"
@@ -12,7 +12,7 @@
     >
       <span>{{ index === 0 ? 'Home' : item.title }}</span>
       <IconCaret class="transform rotate-90 text-sm ml-2" />
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
     <template v-if="dropdownVisible">
       <slot>
         <NavSecondaryDropdownContent
@@ -28,7 +28,7 @@
 import { defineComponent } from 'vue'
 import { mixinIsActivePath } from '../../utils/mixins'
 import IconCaret from './../Icons/IconCaret.vue'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
 
 export default defineComponent({
@@ -36,7 +36,7 @@ export default defineComponent({
 
   components: {
     IconCaret,
-    MixinDropdownToggle,
+    NavDropdownToggle,
     NavSecondaryDropdownContent
   },
   props: {
@@ -103,7 +103,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .NavMobileSecondaryDropdown {
-  .MixinDropdownToggle {
+  .NavDropdownToggle {
     span {
       @apply border-b border-transparent;
     }

package/src/components/NavSearchForm/NavSearchForm.stories.js

@@ -1,12 +1,12 @@
 import NavSearchForm from './NavSearchForm.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavSearchForm',
+  title: 'Navigation/Elements/NavSearchForm',
   component: NavSearchForm,
   excludeStories: /.*Data$/
 }
 
-export const Form = {
+export const BaseStory = {
   args: {
     mobile: false
   }

package/src/components/NavSecondary/NavSecondary.stories.js

@@ -1,7 +1,7 @@
 import NavSecondary from './NavSecondary.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavSecondary',
+  title: 'Navigation/Secondary Navigation/NavSecondary',
   component: NavSecondary,
   excludeStories: /.*Data$/,
   parameters: {
@@ -18,7 +18,7 @@ export const NavSecondaryData = {
     '[{"path": "/go/test-site", "title": "Test Go Site", "children": []}, {"path": "/go/test-site/has-children", "title": "Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children", "title": "Lvl 3 Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-1", "title": "Lvl 4 No Children 1"}, {"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-2", "title": "Lvl 4 No Children 2"}]}, {"path": "/go/test-site/has-children/level-3-no-children", "title": "Lvl 3 No Children", "children": []}]}, {"path": "/go/test-site/no-children-1", "title": "No Children 1", "children": []}, {"path": "/go/test-site/no-children-2", "title": "No Children 2", "children": []}, {"path": "/go/test-site/has-children", "title": "Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children", "title": "Lvl 3 Has Children", "children": [{"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-1", "title": "Lvl 4 No Children 1"}, {"path": "/go/test-site/has-children/level-3-has-children/level-4-no-children-2", "title": "Lvl 4 No Children 2"}]}, {"path": "/go/test-site/has-children/level-3-no-children", "title": "Lvl 3 No Children", "children": []}]}]'
 }
 
-export const SecondaryNav = {
+export const BaseStory = {
   name: 'NavSecondary',
   args: { breadcrumb: NavSecondaryData.breadcrumb }
 }

package/src/components/NavSecondary/NavSecondaryDropdown.vue

@@ -6,7 +6,7 @@
       'mr-auto': index === 0
     }"
   >
-    <MixinDropdownToggle
+    <NavDropdownToggle
       :aria-expanded="dropdownVisible ? true : false"
       :path="item.path"
       class="font-medium border-t-2 border-transparent block px-3 py-2"
@@ -29,7 +29,7 @@
         <span>{{ item.title }}</span>
         <IconCaret class="transform rotate-90 text-sm ml-2 pl-2 -mt-px" />
       </span>
-    </MixinDropdownToggle>
+    </NavDropdownToggle>
     <transition name="navfade">
       <div
         v-if="dropdownVisible"
@@ -48,14 +48,14 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import IconCaret from './../Icons/IconCaret.vue'
-import MixinDropdownToggle from './../MixinDropdownToggle/MixinDropdownToggle.vue'
+import NavDropdownToggle from './../NavDropdownToggle/NavDropdownToggle.vue'
 import NavSecondaryDropdownContent from './../NavSecondary/NavSecondaryDropdownContent.vue'
 
 export default defineComponent({
   name: 'NavSecondaryDropdown',
   components: {
     IconCaret,
-    MixinDropdownToggle,
+    NavDropdownToggle,
     NavSecondaryDropdownContent
   },
   props: {
@@ -126,7 +126,7 @@ export default defineComponent({
 </script>
 <style lang="scss">
 .NavSecondaryDropdown {
-  .MixinDropdownToggle {
+  .NavDropdownToggle {
     &.-open {
       > span {
         @apply border-black text-gray-dark #{!important};

package/src/components/NavSocial/NavSocial.stories.js

@@ -1,14 +1,14 @@
 import NavSocial from './NavSocial.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/NavSocial',
+  title: 'Navigation/Elements/NavSocial',
   component: NavSocial,
   excludeStories: /.*Data$/
 }
 
-export const Social = { args: { dark: false } }
+export const BaseStory = { args: { dark: false } }
 
-export const SocialDark = {
+export const Dark = {
   args: { dark: true },
   render: (args) => ({
     components: { NavSocial },

package/src/components/NavSocial/NavSocial.vue

@@ -1,54 +1,26 @@
 <template>
   <div class="NavSocial relative flex flex-row items-start border-collapse">
     <BaseButton
+      v-for="(item, index) in socialLinks"
+      :key="index"
       :variant="dark ? 'dark' : 'social'"
       class="-facebook w-12 h-12 text-2xl"
-      href="http://www.facebook.com/NASAJPL"
-      aria-label="Follow JPL on Facebook"
+      :class="{
+        '-facebook': item.facebook,
+        '-twitter': item.twitter,
+        '-instagram': item.instagram,
+        '-youtube': item.youtube
+      }"
+      :href="item.url"
+      :aria-label="item.label"
       target="_blank"
       rel="noopener"
     >
       <template #icon>
-        <IconSocialFacebook />
-      </template>
-    </BaseButton>
-    <BaseButton
-      :variant="dark ? 'dark' : 'social'"
-      class="-twitter w-12 h-12 text-2xl"
-      :class="{ '-ml-px': !dark }"
-      href="https://x.com/NASAJPL"
-      aria-label="Follow JPL on X"
-      target="_blank"
-      rel="noopener"
-    >
-      <template #icon>
-        <IconSocialTwitter />
-      </template>
-    </BaseButton>
-    <BaseButton
-      :variant="dark ? 'dark' : 'social'"
-      class="-instagram w-12 h-12 text-2xl"
-      :class="{ '-ml-px': !dark }"
-      href="http://instagram.com/nasajpl"
-      aria-label="Follow JPL on Instagram"
-      target="_blank"
-      rel="noopener"
-    >
-      <template #icon>
-        <IconSocialInstagram />
-      </template>
-    </BaseButton>
-    <BaseButton
-      :variant="dark ? 'dark' : 'social'"
-      class="-youtube w-12 h-12 text-3xl"
-      :class="{ '-ml-px': !dark }"
-      href="http://www.youtube.com/user/JPLnews?sub_confirmation=1"
-      aria-label="Follow JPL on YouTube"
-      target="_blank"
-      rel="noopener"
-    >
-      <template #icon>
-        <IconSocialYoutube />
+        <IconSocialFacebook v-if="item.facebook" />
+        <IconSocialTwitter v-else-if="item.twitter" />
+        <IconSocialInstagram v-else-if="item.instagram" />
+        <IconSocialYoutube v-else-if="item.youtube" />
       </template>
     </BaseButton>
   </div>
@@ -61,6 +33,52 @@ import IconSocialTwitter from './../Icons/IconSocialTwitter.vue'
 import IconSocialInstagram from './../Icons/IconSocialInstagram.vue'
 import IconSocialYoutube from './../Icons/IconSocialYoutube.vue'
 
+const wwwSocialLinks = [
+  {
+    facebook: true,
+    url: 'http://www.facebook.com/NASAJPL',
+    label: 'Follow JPL on Facebook'
+  },
+  {
+    twitter: true,
+    url: 'https://x.com/NASAJPL',
+    label: 'Follow JPL on X'
+  },
+  {
+    instagram: true,
+    url: 'http://instagram.com/nasajpl',
+    label: 'Follow JPL on Instagram'
+  },
+  {
+    youtube: true,
+    url: 'http://www.youtube.com/user/JPLnews?sub_confirmation=1',
+    label: 'Follow JPL on YouTube'
+  }
+]
+
+const eduSocialLinks = [
+  {
+    facebook: true,
+    url: 'http://facebook.com/nasajpledu',
+    label: 'Follow JPL Education on Facebook'
+  },
+  {
+    twitter: true,
+    url: 'http://x.com/nasajpl_edu',
+    label: 'Follow JPL Education on X'
+  },
+  {
+    instagram: true,
+    url: 'http://instagram.com/nasajpl_edu',
+    label: 'Follow JPL Education on Instagram'
+  },
+  {
+    youtube: true,
+    url: 'https://www.youtube.com/@nasajpledu3401',
+    label: 'Follow JPL Education on YouTube'
+  }
+]
+
 export default defineComponent({
   name: 'NavSocial',
   components: {
@@ -75,6 +93,16 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    edu: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    socialLinks() {
+      return this.edu ? eduSocialLinks : wwwSocialLinks
     }
   }
 })

package/src/components/NewsDetailMediaContact/NewsDetailMediaContact.stories.js

@@ -1,7 +1,7 @@
 import NewsDetailMediaContact from './NewsDetailMediaContact.vue'
 
 export default {
-  title: 'WWW/NewsDetail/NewsDetailMediaContact',
+  title: 'Components/WWW/NewsDetail/NewsDetailMediaContact',
   component: NewsDetailMediaContact
 }
 
@@ -16,7 +16,7 @@ const contacts = [
   }
 ]
 
-export const Single = { args: { contacts, releaseNumber: '2020-140' } }
+export const BaseStory = { args: { contacts, releaseNumber: '2020-140' } }
 
 export const Multiple = {
   args: {

package/src/components/ParallaxContainer/ParallaxContainer.stories.js

@@ -2,7 +2,7 @@ import ParallaxElement from './../ParallaxElement/ParallaxElement.vue'
 import ParallaxContainer from './ParallaxContainer.vue'
 
 export default {
-  title: 'Components/ParallaxContainer',
+  title: 'Components/Utilities/ParallaxContainer',
   component: ParallaxContainer,
   decorators: [
     () => ({
@@ -39,9 +39,9 @@ const ParallaxContainerTemplate = (args) => ({
   </ParallaxContainer>`
 })
 
-export const Default = ParallaxContainerTemplate.bind({})
-Default.storyName = 'ParallaxContainer'
-Default.args = {
+export const BaseStory = ParallaxContainerTemplate.bind({})
+BaseStory.storyName = 'ParallaxContainer'
+BaseStory.args = {
   invert: true,
   overflow: true
 }

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

@@ -1,7 +1,7 @@
 import PodcastSeriesCarousel from './PodcastSeriesCarousel.vue'
 
 export default {
-  title: 'WWW/PodcastDetail/PodcastSeriesCarousel',
+  title: 'Components/WWW/PodcastDetail/PodcastSeriesCarousel',
   component: PodcastSeriesCarousel,
   parameters: {
     docs: {
@@ -225,7 +225,7 @@ export const PodcastSeriesCarouselData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     series: PodcastSeriesCarouselData.series,
     initialSeasonId: PodcastSeriesCarouselData.parent?.id

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

@@ -2,7 +2,7 @@ import RoboticsDetailStats from './RoboticsDetailStats.vue'
 import RoboticsDetailStatsMini from './RoboticsDetailStatsMini.vue'
 
 export default {
-  title: 'WWW/RoboticsDetail/RoboticsDetailStats',
+  title: 'Components/WWW/RoboticsDetail/RoboticsDetailStats',
   component: RoboticsDetailStats,
   subcomponents: { RoboticsDetailStatsMini },
   decorators: [
@@ -67,7 +67,7 @@ export const RoboticsDetailStatsData = {
   ]
 }
 
-export const Base = {
+export const BaseStory = {
   args: {
     mass: RoboticsDetailStatsData.mass,
     height: RoboticsDetailStatsData.height,