@explorer-1/vue 0.1.1 → 0.1.2

package/src/components/CalendarButton/CalendarButton.stories.js

@@ -1,7 +1,7 @@
 import CalendarButton from './CalendarButton.vue'
 
 export default {
-  title: 'Components/CalendarButton',
+  title: 'Components/Utilities/CalendarButton',
   component: CalendarButton,
   excludeStories: /.*Data$/
 }
@@ -30,7 +30,7 @@ const CalendarButtonTemplate = (args) => ({
   `
 })
 
-export const Default = CalendarButtonTemplate.bind({})
-Default.args = {
+export const BaseStory = CalendarButtonTemplate.bind({})
+BaseStory.args = {
   ...CalendarButtonData
 }

package/src/components/DetailHeadline/DetailHeadline.stories.js

@@ -1,7 +1,7 @@
 import DetailHeadline from './DetailHeadline.vue'
 
 export default {
-  title: 'Components/DetailHeadline',
+  title: 'Components/Utilities/DetailHeadline',
   component: DetailHeadline,
   excludeStories: /.*Data$/
 }
@@ -26,7 +26,7 @@ export const DetailHeadlineData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: DetailHeadlineData
 }
 

package/src/components/DsnWidget/DsnWidget.stories.js

@@ -1,7 +1,7 @@
 import DsnWidget from './DsnWidget.vue'
 
 export default {
-  title: 'Components/DsnWidget',
+  title: 'Components/WWW/DsnWidget',
   component: DsnWidget,
   excludeStories: /.*Data$/,
   argTypes: {
@@ -22,7 +22,7 @@ export const DsnWidgetData = {
   __typename: 'DeepSpaceNetworkWidget'
 }
 
-export const Base = {
+export const BaseStory = {
   args: {
     data: DsnWidgetData
   }

package/src/components/EventDetailHero/EventDetailHero.stories.js

@@ -1,7 +1,7 @@
 import EventDetailHero from './EventDetailHero.vue'
 
 export default {
-  title: 'WWW/EventDetail/EventDetailHero',
+  title: 'Components/WWW/EventDetail/EventDetailHero',
   component: EventDetailHero,
   decorators: [
     () => ({
@@ -45,7 +45,7 @@ export const EventDetailHeroData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     image: EventDetailHeroData.heroImage,
     startDateSplit: EventDetailHeroData.startDateSplit

package/src/components/FormContact/FormContact.stories.js

@@ -1,7 +1,7 @@
 import FormContact from './FormContact.vue'
 
 export default {
-  title: 'Components/FormContact',
+  title: 'Components/Forms/FormContact',
   component: FormContact
 }
 
@@ -12,5 +12,5 @@ const FormContactTemplate = () => ({
 })
 
 // stories
-export const Contact = FormContactTemplate.bind({})
-Contact.storyName = 'FormContact'
+export const BaseStory = FormContactTemplate.bind({})
+BaseStory.storyName = 'FormContact'

package/src/components/FormContact/FormContact.vue

@@ -14,97 +14,46 @@
           size="h6"
           >Contact Information</BaseHeading
         >
-        <div class="mt-8">
-          <label
-            id="full_name_label"
-            for="full_name"
-            class="text-gray-dark text-subtitle"
-          >
-            Name <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <input
-              id="full_name"
-              type="text"
-              name="full_name"
-              required
-              aria-required="true"
-              aria-labelledby="full_name_label"
-              placeholder="enter your first and last name"
-              class="w-full px-4 py-3"
-            />
-          </div>
-        </div>
-        <div class="mt-8">
-          <label
-            id="email_label"
-            for="email"
-            class="text-gray-dark text-subtitle"
-          >
-            Email <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <input
-              id="email"
-              type="text"
-              name="email"
-              required
-              aria-required="true"
-              aria-labelledby="email_label"
-              placeholder="enter your email"
-              class="w-full px-4 py-3"
-            />
-          </div>
-        </div>
+        <TextInput
+          class="mt-8"
+          input-name="full_name"
+          label="Name"
+          type="text"
+          required
+          placeholder="enter your first and last name"
+        />
+        <TextInput
+          class="mt-8"
+          input-name="email"
+          label="Email"
+          type="email"
+          required
+          placeholder="enter your email"
+        />
         <BaseHeading
           level="h2"
           size="h6"
           class="mt-12"
           >Write Us</BaseHeading
         >
+        <TextInput
+          class="mt-8"
+          input-name="subject"
+          label="Subject"
+          type="text"
+          required
+          placeholder="write a subject"
+        />
+        <TextArea
+          class="mt-8"
+          input-name="message"
+          label="Message"
+          input-class="w-full px-4 py-3"
+          required
+          placeholder="write your message..."
+        />
+
         <div class="mt-8">
-          <label
-            id="subject_label"
-            for="subject"
-            class="text-gray-dark text-subtitle"
-          >
-            Subject <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <input
-              id="subject"
-              type="text"
-              name="subject"
-              required
-              aria-required="true"
-              aria-labelledby="subject_label"
-              placeholder="write a subject"
-              class="w-full px-4 py-3"
-            />
-          </div>
-        </div>
-        <div class="mt-8">
-          <label
-            id="message_label"
-            for="message"
-            class="text-subtitle text-gray-dark"
-          >
-            Message <span class="text-jpl-red">*</span>
-          </label>
-          <div class="mt-2">
-            <textarea
-              id="message"
-              name="message"
-              required
-              aria-required="true"
-              aria-labelledby="message_label"
-              placeholder="write your message..."
-              rows="4"
-              class="w-full px-4 py-3"
-            ></textarea>
-          </div>
-        </div>
-        <div class="mt-4">
           <BaseButton
             type="submit"
             variant="primary"
@@ -132,17 +81,21 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
-import qs from 'qs'
+import { stringify } from 'fast-qs'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
+import TextInput from './../TextInput/TextInput.vue'
+import TextArea from './../TextArea/TextArea.vue'
 
 export default defineComponent({
   name: 'FormContact',
   components: {
     LayoutHelper,
     BaseHeading,
-    BaseButton
+    BaseButton,
+    TextArea,
+    TextInput
   },
   data() {
     return {
@@ -181,7 +134,7 @@ export default defineComponent({
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
           },
-          body: qs.stringify({
+          body: stringify({
             full_name: data.full_name,
             email: data.email,
             subject: data.subject,

package/src/components/FormNewsletterSignup/FormNewsletterSignup.stories.js

@@ -1,7 +1,7 @@
 import FormNewsletterSignup from './FormNewsletterSignup.vue'
 
 export default {
-  title: 'Components/FormNewsletterSignup',
+  title: 'Components/Forms/FormNewsletterSignup',
   component: FormNewsletterSignup
 }
 
@@ -12,5 +12,5 @@ const FormNewsletterSignupTemplate = () => ({
 })
 
 // stories
-export const NewsletterSignup = FormNewsletterSignupTemplate.bind({})
-NewsletterSignup.storyName = 'FormNewsletterSignup'
+export const BaseStory = FormNewsletterSignupTemplate.bind({})
+BaseStory.storyName = 'FormNewsletterSignup'

package/src/components/FormNewsletterSignup/FormNewsletterSignup.vue

@@ -27,93 +27,44 @@
             size="h6"
             >Contact Information</BaseHeading
           >
-          <div class="mt-8">
-            <label
-              id="email_label"
-              for="email"
-              class="text-gray-dark text-subtitle"
-            >
-              Email <span class="text-jpl-red">*</span>
-            </label>
-            <div class="mt-2">
-              <input
-                id="email"
-                v-model="prefilledEmail"
-                type="email"
-                name="data[email]"
-                required
-                aria-required="true"
-                aria-labelledby="email_label"
-                placeholder="enter your email"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
-          <div class="mt-8">
-            <label
-              id="first_name_label"
-              for="first_name"
-              class="text-gray-dark text-subtitle"
-            >
-              First Name
-            </label>
-            <div class="mt-2">
-              <input
-                id="first_name"
-                type="text"
-                name="data[fname]"
-                maxlength="32"
-                aria-required="false"
-                aria-labelledby="first_name_label"
-                placeholder="enter your first name"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
-          <div class="mt-8">
-            <label
-              id="last_name_label"
-              for="last_name"
-              class="text-gray-dark text-subtitle"
-            >
-              Last Name
-            </label>
-            <div class="mt-2">
-              <input
-                id="last_name"
-                type="text"
-                name="data[lname]"
-                maxlength="64"
-                aria-required="false"
-                aria-labelledby="last_name_label"
-                placeholder="enter your last name"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
-          <div class="mt-8">
-            <label
-              id="zip_code_label"
-              for="zip_code"
-              class="text-gray-dark text-subtitle"
-            >
-              Zip
-            </label>
-            <div class="mt-2">
-              <input
-                id="zip_code"
-                type="text"
-                name="data[zip]"
-                pattern="[0-9]{5-10}"
-                maxlength="10"
-                title="Five digit zip code"
-                aria-required="false"
-                aria-labelledby="zip_code_label"
-                placeholder="enter your 5-digit zip code"
-                class="w-full px-4 py-3"
-              />
-            </div>
-          </div>
+          <TextInput
+            v-model="prefilledEmail"
+            class="mt-8"
+            input-name="data[email]"
+            label="Email"
+            type="email"
+            required
+            placeholder="enter your email"
+          />
+
+          <TextInput
+            class="mt-8"
+            input-name="data[fname]"
+            label="First Name"
+            type="text"
+            placeholder="enter your first name"
+          />
+
+          <TextInput
+            class="mt-8"
+            input-name="data[lname]"
+            label="Last Name"
+            type="text"
+            maxlength="64"
+            placeholder="enter your last name"
+          />
+
+          <TextInput
+            class="mt-8"
+            input-name="data[zip]"
+            label="Zip"
+            type="text"
+            maxlength="10"
+            pattern="[0-9]{5-10}"
+            title="Five digit zip code"
+            placeholder="enter your 5-digit zip code"
+          />
+
           <BaseHeading
             level="h2"
             size="h6"
@@ -175,12 +126,13 @@
 <script lang="ts">
 // @ts-nocheck
 import { defineComponent } from 'vue'
-import qs from 'qs'
+import { stringify } from 'fast-qs'
 import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 import BaseButton from './../BaseButton/BaseButton.vue'
 import BaseRadioGroup from './../BaseRadioGroup/BaseRadioGroup.vue'
 import BaseCheckboxGroup from './../BaseCheckboxGroup/BaseCheckboxGroup.vue'
+import TextInput from './../TextInput/TextInput.vue'
 
 const iContactForm =
   'https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=5&cid=1389932&lid=11365'
@@ -267,7 +219,8 @@ export default defineComponent({
     BaseHeading,
     BaseButton,
     BaseCheckboxGroup,
-    BaseRadioGroup
+    BaseRadioGroup,
+    TextInput
   },
   data() {
     return {
@@ -327,7 +280,7 @@ export default defineComponent({
           headers: {
             'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
           },
-          body: qs.stringify({
+          body: stringify({
             'data[email]': data.email,
             'data[fname]': data.first_name,
             'data[lname]': data.last_name,

package/src/components/HeroLarge/HeroLarge.stories.js

@@ -1,7 +1,7 @@
 import HeroLarge from './HeroLarge.vue'
 
 export default {
-  title: 'Components/Heroes/HeroLarge',
+  title: 'Components/Heroes/Large',
   component: HeroLarge,
   excludeStories: /.*Data$/,
   parameters: {
@@ -36,7 +36,7 @@ export const HeroLargeData = {
 }
 
 // stories
-export const Hero = {
+export const BaseStory = {
   name: 'HeroLarge',
   args: {
     eyebrow: 'Robotics at JPL',

package/src/components/HeroListingIndex/HeroListingIndex.stories.js

@@ -1,7 +1,7 @@
 import HeroListingIndex from './HeroListingIndex.vue'
 
 export default {
-  title: 'Components/Heroes/HeroListingIndex',
+  title: 'Components/Heroes/For Listing Pages',
   component: HeroListingIndex,
   parameters: {
     viewMode: 'canvas'
@@ -37,7 +37,8 @@ export const HeroListingIndexData = {
 
 // templates
 
-export const Default = {
+export const BaseStory = {
+  name: 'HeroListingIndex',
   args: {
     customLabel: 'Featured',
     pageData: HeroListingIndexData.listingPage

package/src/components/HeroMedia/HeroMedia.stories.js

@@ -2,13 +2,17 @@ import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import HeroMedia from './HeroMedia.vue'
 
 export default {
-  title: 'Components/Heroes/HeroMedia',
+  title: 'Components/Heroes/Media Only',
   component: HeroMedia,
   parameters: {
     html: {
       root: '#storyDecorator'
     },
-    viewMode: 'canvas'
+    docs: {
+      description: {
+        component: 'No text overlay, just an image or video with a caption below.'
+      }
+    }
   },
   excludeStories: /.*Data$/
 }
@@ -74,7 +78,8 @@ export const HeroMediaData = {
 }
 
 // stories
-export const Hero = {
+export const BaseStory = {
+  name: 'HeroMedia',
   args: HeroMediaData
 }
 export const CustomImageCaption = {

package/src/components/HeroMedium/HeroMedium.stories.js

@@ -2,7 +2,7 @@ import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
 import HeroMedium from './HeroMedium.vue'
 
 export default {
-  title: 'Components/Heroes/HeroMedium',
+  title: 'Components/Heroes/Medium',
   component: HeroMedium,
   decorators: [
     () => ({
@@ -54,7 +54,8 @@ export const HeroMediumData = {
   }
 }
 
-export const Default = {
+export const BaseStory = {
+  name: 'HeroMedium',
   args: {
     customTag: 'News',
     customLabel: HeroMediumData.label,
@@ -63,6 +64,16 @@ export const Default = {
     customVideo: undefined
   }
 }
+export const Compact = {
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: undefined,
+    compact: true
+  }
+}
 export const Video = {
   args: {
     customLabel: HeroMediumData.label,

package/src/components/HeroMedium/HeroMedium.vue

@@ -1,7 +1,8 @@
 <template>
   <section
     aria-label="Feature"
-    class="HeroMedium ThemeVariantDark relative flex items-center overflow-hidden"
+    class="ThemeVariantDark relative flex items-center overflow-hidden"
+    :class="compact ? 'HeroSmall' : 'HeroMedium'"
   >
     <div class="absolute inset-0 z-10 overflow-hidden bg-black">
       <!-- video always overrides the image -->
@@ -29,13 +30,22 @@
         />
       </picture>
     </div>
-    <div class="lg:flex lg:items-end lg:relative lg:h-full absolute bottom-0 z-20 w-full">
+    <div
+      class="lg:flex lg:items-end lg:relative lg:h-full z-20 w-full"
+      :class="{
+        'absolute  bottom-0': !compact
+      }"
+    >
       <div
         class="bg-gradient-to-b lg:bg-gradient-to-bl from-transparent lg:from-transparent-w50 to-black lg:to-transparent-black-75 absolute inset-0"
       ></div>
       <div
         v-if="feature"
-        class="lg:px-10 2xl:px-0 lg:pb-0 lg:py-0 text-contrast container relative px-4 pt-40 pb-2 mx-auto mb-10 text-white"
+        class="px-4 lg:px-10 2xl:px-0 lg:pb-0 lg:py-0 text-contrast container relative mx-auto text-white"
+        :class="{
+          'pt-40 pb-2 mb-10': !compact,
+          'my-6 lg:mt-0 lg:mb-10': compact
+        }"
       >
         <nuxt-link
           :to="feature.url"
@@ -100,7 +110,8 @@ export default defineComponent({
   components: {
     IconArrow,
     BaseLink,
-    MixinVideoBg
+    MixinVideoBg,
+    BaseTag
   },
   props: {
     feature: {
@@ -119,6 +130,11 @@ export default defineComponent({
       type: String,
       default: 'View'
     },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     // to override media
     // use-case: news detail pages use this b/c their feature hero is structured differently
     customVideo: {
@@ -162,5 +178,6 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
+@import '@explorer-1/common/src/scss/components/HeroSmall';
 @import '@explorer-1/common/src/scss/components/HeroMedium';
 </style>

package/src/components/HeroMedium/HeroSmall.stories.js

@@ -0,0 +1,58 @@
+import { BaseVideoData } from './../BaseVideo/BaseVideo.stories'
+import { HeroMediumData } from './HeroMedium.stories'
+import HeroMedium from './HeroMedium.vue'
+
+export default {
+  title: 'Components/Heroes/Small',
+  component: HeroMedium,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="max-w-screen-3xl mx-auto"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    },
+    themes: {
+      clearable: false,
+      list: [
+        {
+          name: 'FullWidthDocs',
+          class: 'sbdocs-preview-full-width',
+          default: true,
+          visible: false
+        }
+      ]
+    },
+    docs: {
+      description: {
+        component:
+          '`HeroSmall` is the same component as `HeroMedium, but with `compact` set to `true`.'
+      }
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+export const BaseStory = {
+  name: 'HeroMedium (compact)',
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: undefined,
+    compact: true
+  }
+}
+export const Video = {
+  args: {
+    customTag: 'News',
+    customLabel: HeroMediumData.label,
+    feature: HeroMediumData.feature,
+    cta: HeroMediumData.cta,
+    customVideo: BaseVideoData,
+    compact: true
+  }
+}