@explorer-1/vue 0.1.0 → 0.1.2

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/SearchFilterGroup/SearchFilterGroup.vue

@@ -62,7 +62,7 @@
 </template>
 <script lang="ts">
 // @ts-nocheck
-import isEqual from 'lodash/isEqual'
+import isEqual from 'lodash/isEqual.js'
 export default {
   name: 'SearchFilterGroup',
   props: {

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

package/src/components/SearchSelectMenu/SearchSelectMenu.stories.js

@@ -5,7 +5,7 @@ export default {
   component: SearchSelectMenu
 }
 
-export const SortBy = {
+export const BaseStory = {
   args: {
     title: 'Sort by',
     options: [

package/src/components/ShareButtons/ShareButtons.stories.js

@@ -1,7 +1,7 @@
 import ShareButtons from './ShareButtons.vue'
 
 export default {
-  title: 'Components/ShareButtons',
+  title: 'Components/Utilities/ShareButtons',
   component: ShareButtons,
   excludeStories: /.*Data$/
 }
@@ -13,4 +13,4 @@ export const BlockShareButtonsData = {
   inline: false
 }
 
-export const Default = { args: BlockShareButtonsData }
+export const BaseStory = { args: BlockShareButtonsData }

package/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js

@@ -5,8 +5,8 @@ export default {
   component: ShareButtonsEdu
 }
 
-export const ShareButtons = {
-  name: 'Share Buttons EDU',
+export const BaseStory = {
+  name: 'ShareButtonsEdu',
   args: {
     url: 'https://jpl.nasa.gov/edu/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
     title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight"

package/src/components/SkipLink/SkipLink.stories.js

@@ -1,9 +1,9 @@
 import SkipLink from './SkipLink.vue'
 
 export default {
-  title: 'WWW/Header & Footer/Elements/SkipLink',
+  title: 'Navigation/Elements/SkipLink',
   component: SkipLink,
   excludeStories: /.*Data$/
 }
 
-export const Default = {}
+export const BaseStory = {}

package/src/components/SwimlaneCTA/SwimlaneCTA.stories.js

@@ -0,0 +1,57 @@
+import SwimlaneCTA from './SwimlaneCTA.vue'
+
+export default {
+  title: 'Components/WWW/SwimlaneCTA',
+  component: SwimlaneCTA,
+  parameters: {
+    docs: {
+      description: {
+        component: `The SwimlaneCTA component combines BaseSwimlane with other elements (JPL logo, links, etc.) to create the component that is used on the WWW homepage.`
+      }
+    }
+  }
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    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
+  }
+}

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -16,7 +16,7 @@
       >
         <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
         <div
-          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6"
+          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6 font-primary"
         >
           <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
             <div class="text-contrast relative z-20 p-2 pl-0">
@@ -24,7 +24,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png"
+                  :src="jplLogoSFFF"
                   alt="JPL Logo"
                   width="106"
                   height="32"
@@ -34,7 +34,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-222222-94h28w@2x.png"
+                  :src="jplLogo222"
                   alt="JPL Logo"
                   width="111"
                   height="32"
@@ -74,7 +74,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png"
+                  :src="jplLogoFFF"
                   alt="JPL Logo"
                   width="106"
                   height="32"
@@ -84,7 +84,7 @@
                 <img
                   loading="lazy"
                   class="lg:pr-1 h-8 w-auto"
-                  src="@/assets/images/png/brand-jpl-logo-222222-94h28w@2x.png"
+                  :src="jplLogo222"
                   alt="JPL Logo"
                   width="111"
                   height="32"
@@ -118,6 +118,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue'
+import jplLogoSFFF from '@explorer-1/common/src/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png'
+import jplLogoFFF from '@explorer-1/common/src/images/png/brand-jpl-logo-FFFFFF-94h28w@2x.png'
+import jplLogo222 from '@explorer-1/common/src/images/png/brand-jpl-logo-222222-94h28w@2x.png'
+
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseSwimlane from './../BaseSwimlane/BaseSwimlane.vue'
 
@@ -183,6 +187,9 @@ export default defineComponent({
   },
   data() {
     return {
+      jplLogoFFF: jplLogoFFF,
+      jplLogo222: jplLogo222,
+      jplLogoSFFF: jplLogoSFFF,
       mobileRows: 2,
       desktopRows: 9,
       mobileScale: 1.9,

package/src/components/TextArea/TextArea.stories.js

@@ -0,0 +1,28 @@
+import TextArea from './TextArea.vue'
+
+export default {
+  title: 'Components/Forms/TextArea',
+  component: TextArea
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    inputName: 'message',
+    required: true,
+    label: 'Your Message',
+    placeholder: 'Enter your message here',
+    rows: 10
+  }
+}
+
+export const HiddenLabel = {
+  name: 'Hidden Label',
+  args: {
+    inputName: 'message',
+    label: 'Your Message',
+    showLabel: false,
+    required: false,
+    placeholder: 'Your message here'
+  }
+}

package/src/components/TextArea/TextArea.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+interface TextAreaProps {
+  inputName: string
+  label: string
+  cols?: number
+  rows?: number
+  required?: boolean
+  showLabel?: boolean
+  placeholder?: string
+  labelClass?: string
+  inputClass?: string
+}
+// define props
+const props = withDefaults(defineProps<TextAreaProps>(), {
+  cols: undefined,
+  rows: 4,
+  required: false,
+  label: undefined,
+  showLabel: true,
+  placeholder: undefined,
+  labelClass: undefined,
+  inputClass: undefined
+})
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel({ type: String })
+const TextAreaRef = ref(undefined)
+const isFocused = ref(false)
+
+const inputId = computed(() => {
+  return `${props.inputName}_input`
+})
+const labelId = computed(() => {
+  return `${inputId.value}_label`
+})
+</script>
+<template>
+  <div>
+    <label
+      v-if="props.showLabel"
+      :id="labelId"
+      :for="inputId"
+      :class="props.labelClass ? props.labelClass : 'block text-subtitle text-gray-dark mb-2'"
+    >
+      {{ props.label }}
+      <template v-if="props.required">
+        <span class="text-error">*</span>
+      </template>
+    </label>
+    <textarea
+      :id="inputId"
+      ref="TextAreaRef"
+      v-model="model"
+      :cols="props.cols"
+      :rows="props.rows"
+      :name="props.inputName"
+      :required="props.required"
+      :placeholder="props.placeholder"
+      :aria-required="props.required"
+      :aria-labelledby="props.showLabel ? labelId : undefined"
+      :aria-label="!props.showLabel ? props.label : undefined"
+      :class="
+        props.inputClass
+          ? props.inputClass
+          : 'border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl'
+      "
+      @keydown.esc="emit('esc')"
+      @input="emit('input', $event.target)"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    ></textarea>
+  </div>
+</template>

package/src/components/TextInput/TextInput.stories.js

@@ -0,0 +1,30 @@
+import TextInput from './TextInput.vue'
+
+export default {
+  title: 'Components/Forms/TextInput',
+  component: TextInput
+}
+
+// stories
+export const BaseStory = {
+  args: {
+    inputName: 'name',
+    type: 'text',
+    required: true,
+    label: 'Your Name',
+    ariaLabel: 'Your Name',
+    placeholder: 'Enter your name here',
+    autofocus: true
+  }
+}
+
+export const HiddenLabel = {
+  args: {
+    inputName: 'name',
+    type: 'text',
+    required: false,
+    placeholder: 'Your name here',
+    label: 'Name',
+    showLabel: false
+  }
+}

package/src/components/TextInput/TextInput.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+interface TextInputProps {
+  inputName: string
+  type?: string
+  required?: boolean
+  label: string
+  showLabel?: boolean
+  placeholder?: string
+  maxlength?: string
+  pattern?: string
+  title?: string
+  autofocus?: boolean
+  labelClass?: string
+  inputClass?: string
+}
+// define props
+const props = withDefaults(defineProps<TextInputProps>(), {
+  type: 'text',
+  showLabel: true,
+  required: false,
+  placeholder: undefined,
+  autoFocus: false,
+  maxlength: undefined,
+  pattern: undefined,
+  title: undefined,
+  labelClass: undefined,
+  inputClass: undefined
+})
+const emit = defineEmits(['input', 'esc'])
+
+const model = defineModel({ type: String })
+const TextInputRef = ref(undefined)
+const isFocused = ref(false)
+
+const inputId = computed(() => {
+  return `${props.inputName}_input`
+})
+const labelId = computed(() => {
+  return `${inputId.value}_label`
+})
+onMounted(() => {
+  if (props.autoFocus && TextInputRef.value) {
+    const inputField = TextInputRef.value as HTMLInputElement
+    inputField.focus()
+    isFocused.value = true
+  }
+})
+</script>
+<template>
+  <div>
+    <label
+      v-if="props.showLabel"
+      :id="labelId"
+      :for="inputId"
+      :class="props.labelClass ? props.labelClass : 'block text-subtitle text-gray-dark'"
+      >{{ props.label }}
+      <template v-if="props.required">
+        <span class="text-error">*</span>
+      </template></label
+    >
+    <input
+      :id="inputId"
+      ref="TextInputRef"
+      v-model="model"
+      :name="props.inputName"
+      :type="props.type"
+      :required="props.required"
+      :title="props.title"
+      :placeholder="props.placeholder"
+      :maxlength="props.maxlength"
+      :pattern="props.pattern"
+      :aria-required="props.required"
+      :aria-labelledby="props.showLabel ? labelId : undefined"
+      :aria-label="!props.showLabel ? props.label : undefined"
+      :class="
+        props.inputClass
+          ? props.inputClass
+          : 'border-gray-light-mid w-full px-4 py-3 border mt-2 focus:border-focus-blue focus:shadow-jpl'
+      "
+      @keydown.esc="emit('esc')"
+      @input="emit('input', $event.target)"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+  </div>
+</template>

package/src/components/TheFooter/TheFooter.stories.js

@@ -1,11 +1,16 @@
 import TheFooter from './TheFooter.vue'
 
 export default {
-  title: 'WWW/Header & Footer/TheFooter',
+  title: 'Navigation/Footers/External Footer',
   component: TheFooter,
   excludeStories: /.*Data$/,
   parameters: {
-    viewMode: 'canvas'
+    docs: {
+      description: {
+        component:
+          'This component can be used for any external footer. Its styles will change based on the theme being used.'
+      }
+    }
   }
 }
 
@@ -594,7 +599,7 @@ export const TheFooterData = {
   ]
 }
 
-export const Footer = {
+export const BaseStory = {
   args: {
     data: TheFooterData,
     commitSha: 'commit no.'

package/src/components/TheFooter/TheFooter.vue

@@ -36,24 +36,30 @@
         </div>
         <TheFooterSignUp class="lg:mb-10 mb-8" />
         <!-- social media -->
-        <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">Follow Us</div>
+        <div class="text-subtitle text-blue edu:text-white lg:mb-5 mb-3">
+          <template v-if="themeStore.theme === 'ThemeEdu'"> Follow JPL Education </template>
+          <template v-else> Follow Us </template>
+        </div>
         <NavSocial
           class="lg:mb-14 mb-12"
           dark
+          :edu="themeStore.theme === 'ThemeEdu'"
         />
-        <!-- caltech aside -->
-        <BaseLink
-          variant="none"
-          href="https://caltech.edu"
-          aria-label="Caltech"
-          class="lg:mb-8 mb-5"
-          link-class="inline-block"
-        >
-          <LogoCaltech class="lg:text-base text-sm text-white" />
-        </BaseLink>
-        <p class="mb-12">
-          JPL is a federally funded research and development center managed for NASA by Caltech.
-        </p>
+        <template v-if="themeStore.theme === 'defaultTheme'">
+          <!-- caltech aside -->
+          <BaseLink
+            variant="none"
+            href="https://caltech.edu"
+            aria-label="Caltech"
+            class="lg:mb-8 mb-5"
+            link-class="inline-block"
+          >
+            <LogoCaltech class="lg:text-base text-sm text-white" />
+          </BaseLink>
+          <p class="mb-12">
+            JPL is a federally funded research and development center managed for NASA by Caltech.
+          </p>
+        </template>
       </div>
     </div>
     <!-- more from JPL buttons / links -->
@@ -94,7 +100,12 @@
     <div class="bg-opacity-15 lg:py-16 lg:mt-10 pt-10 pb-3 mt-8 bg-black">
       <div class="3xl:px-0 container px-4 mx-auto">
         <div v-if="data && data.relatedNasaSites">
-          <div class="text-subtitle text-blue edu:text-white mb-5">Related NASA Sites</div>
+          <div class="text-subtitle text-blue edu:text-white mb-5">
+            <template v-if="themeStore.theme === 'ThemeEdu'">
+              Related NASA Education Sites
+            </template>
+            <template v-else> Related NASA Sites </template>
+          </div>
           <div class="auto-col-4">
             <BaseLink
               v-for="(item, index) in data.relatedNasaSites"
@@ -168,6 +179,8 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
+import { mapStores } from 'pinia'
+import { useThemeStore } from './../../store/theme'
 import { mixinGetRouterLink, mixinGetLinkText } from './../../utils/mixins'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
@@ -202,6 +215,9 @@ export default defineComponent({
     getRouterLink(link) {
       return mixinGetRouterLink(link)
     }
+  },
+  computed: {
+    ...mapStores(useThemeStore)
   }
 })
 </script>

package/src/components/ThumbnailCarousel/ThumbnailCarousel.stories.js

@@ -1,7 +1,7 @@
 import ThumbnailCarousel from './ThumbnailCarousel.vue'
 
 export default {
-  title: 'Components/ThumbnailCarousel',
+  title: 'Components/Utilities/ThumbnailCarousel',
   component: ThumbnailCarousel,
   parameters: {
     docs: {
@@ -103,4 +103,4 @@ export const ThumbnailCarouselData = {
   ]
 }
 
-export const Default = { args: ThumbnailCarouselData }
+export const BaseStory = { args: ThumbnailCarouselData }

package/src/components/TopicDetailMissionCarousel/TopicDetailMissionCarousel.stories.js

@@ -1,6 +1,6 @@
 import TopicDetailMissionCarousel from './TopicDetailMissionCarousel.vue'
 export default {
-  title: 'WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarousel',
+  title: 'Components/WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarousel',
   component: TopicDetailMissionCarousel,
   excludeStories: /.*Data$/
 }
@@ -83,7 +83,7 @@ export const TopicDetailMissionCarouselData = [
   }
 ]
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     title: 'Mars',
     relatedMissionsLinkUrl: 'http://localhost:3000/missions?mission_target=Mars',