@explorer-1/vue 0.1.1 → 0.1.2

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,

package/src/components/SearchFilterGroup/SearchFilterGroup.stories.js

@@ -19,7 +19,8 @@ const SearchFilterGroupTemplate = (args) => ({
 />`
 })
 
-export const TopicFilter = {
+export const BaseStory = {
+  name: 'Topic Filter',
   args: {
     filterBy: [],
     buckets: [

package/src/components/SearchInput/SearchInput.stories.js

@@ -6,7 +6,7 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const Default = {
+export const BaseStory = {
   args: {
     searchQuery: '',
     placeholder: '',

package/src/components/SearchInput/SearchInput.vue

@@ -1,6 +1,41 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import IconSearch from './../Icons/IconSearch.vue'
+
+interface SearchInputProps {
+  underlinedInput?: boolean
+  underlinedInputValue?: string
+  placeholder?: string
+  autoFocus?: boolean
+  defaultColors?: boolean
+}
+
+// define props
+const props = withDefaults(defineProps<SearchInputProps>(), {
+  underlinedInput: false,
+  underlinedInputValue: undefined,
+  placeholder: '',
+  autoFocus: false,
+  defaultColors: true
+})
+
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel()
+const isFocused = ref(false)
+const searchQueryRef = ref(undefined)
+
+onMounted(() => {
+  if (props.autoFocus && searchQueryRef.value) {
+    const inputField = searchQueryRef.value as HTMLElement
+    inputField.focus()
+    isFocused.value = true
+  }
+})
+</script>
 <template>
   <!--
-    A somewhat generic component that can be used for handiling search input
+    A somewhat generic component that can be used for handling search input
     We do this in at least two places:
       * on pages (such as the search page and listing pages)
       * for site-wide search -->
@@ -48,41 +83,6 @@
     />
   </div>
 </template>
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import IconSearch from './../Icons/IconSearch.vue'
-
-interface SearchInputProps {
-  underlinedInput?: boolean
-  underlinedInputValue?: string
-  placeholder?: string
-  autoFocus?: boolean
-  defaultColors?: boolean
-}
-
-// define props
-const props = withDefaults(defineProps<SearchInputProps>(), {
-  underlinedInput: false,
-  underlinedInputValue: undefined,
-  placeholder: '',
-  autoFocus: false,
-  defaultColors: true
-})
-
-const emit = defineEmits(['input', 'esc'])
-
-const model = defineModel()
-const isFocused = ref(false)
-const searchQueryRef = ref(undefined)
-
-onMounted(() => {
-  if (props.autoFocus && searchQueryRef.value) {
-    const inputField = searchQueryRef.value as HTMLElement
-    inputField.focus()
-    isFocused.value = true
-  }
-})
-</script>
 <style lang="scss" scoped>
 .custom-focus {
   input {

package/src/components/SearchPagination/SearchPagination.stories.js

@@ -6,7 +6,8 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const TwoPages = {
+export const BaseStory = {
+  name: 'Two Pages',
   args: {
     totalPages: 2,
     currentPage: 1

package/src/components/SearchResultCard/SearchResultCard.stories.js

@@ -36,7 +36,7 @@ export const SearchResultCardData = {
   featured: false
 }
 
-export const StandardResult = { args: SearchResultCardData }
+export const BaseStory = { name: 'Standard Result', args: SearchResultCardData }
 
 export const FeaturedResult = {
   args: { ...SearchResultCardData, featured: true }

package/src/components/SearchResultGridItem/SearchResultGridItem.stories.js

@@ -46,7 +46,8 @@ export const SearchResultGridCardData = {
   headingLevel: 'h2'
 }
 
-export const StandardResult = {
+export const BaseStory = {
+  name: 'Standard Result',
   args: {
     ...SearchResultGridCardData.page,
     pageContentType: SearchResultGridCardData.page.content_type