@explorer-1/vue 0.0.0

package/src/components/FormNewsletterSignup/FormNewsletterSignup.vue

@@ -0,0 +1,355 @@
+<template>
+  <div>
+    <img
+      :src="iContactTrackingGif"
+      alt=""
+    />
+    <LayoutHelper indent="col-3">
+      <hr
+        ref="FormNewsletterSignup"
+        class="text-gray-light-mid mb-10"
+      />
+      <!-- iContact form -->
+      <div
+        v-show="!submitted"
+        class="mb-10"
+      >
+        <form
+          id="ic_signupform"
+          :captcha-key="captchaKey"
+          captcha-theme="light"
+          new-captcha="true"
+          method="POST"
+          :action="iContactForm"
+        >
+          <BaseHeading
+            level="h2"
+            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>
+          <BaseHeading
+            level="h2"
+            size="h6"
+            class="mt-12"
+          >
+            Subscribe to Email Groups
+          </BaseHeading>
+          <div
+            dataname="listGroups"
+            data-label="Which email groups would you like to join?"
+          >
+            <div class="mt-8">
+              <BaseRadioGroup
+                heading="JPL News"
+                sub-heading="Choose how frequently you want to receive updates (opt out anytime):"
+                group="email"
+                title="Email Groups"
+                preselected="breaking"
+                :options="emailGroups"
+              />
+            </div>
+            <div class="mt-8">
+              <BaseCheckboxGroup
+                heading="JPL Education Updates"
+                sub-heading="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."
+                group="education"
+                title="Education Email Groups"
+                :options="eduEmailGroups"
+              />
+            </div>
+          </div>
+          <div class="mt-4 lg:mt-8 submit-container">
+            <BaseButton
+              type="submit"
+              variant="primary"
+              >Submit</BaseButton
+            >
+          </div>
+        </form>
+      </div>
+
+      <!-- success -->
+      <div
+        v-show="submitted"
+        class="pt-10 text-center"
+      >
+        <BaseHeading level="h2">Thank you!</BaseHeading>
+        <div
+          class="text-jpl-aqua h-22 w-22 p-5 mx-auto my-8 text-6xl font-bold border-4 rounded-full"
+        >
+          &#10003;
+        </div>
+        <p class="text-h6">Check your inbox to verify your email.</p>
+      </div>
+    </LayoutHelper>
+    <div class="hidden-container"></div>
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import qs from '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'
+
+const iContactForm =
+  'https://app.icontact.com/icp/core/mycontacts/signup/designer/form/?id=5&cid=1389932&lid=11365'
+
+const captchaKey = '6LeCZCcUAAAAALhxcQ5fN80W6Wa2K3GqRQK6WRjA'
+
+const iContactTrackingGif =
+  'https://app.icontact.com/icp/core/signup/tracking.gif?id=5&cid=1389932&lid=11365'
+
+const emailGroups = [
+  {
+    id: 'breaking',
+    title: 'Latest News',
+    text: 'All JPL News delivered immediately',
+    value: '41031',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'daily',
+    title: 'Day in Review',
+    text: 'Daily JPL news summary',
+    value: '41032',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'weekly',
+    title: 'Week in Review',
+    text: 'Weekly JPL news summary',
+    value: '41033',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'monthly',
+    title: 'Month in Review',
+    text: 'Monthly JPL news summary',
+    value: '41034',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  }
+]
+
+const eduEmailGroups = [
+  {
+    id: 'educators',
+    title: 'Educators',
+    text: null,
+    value: '21583',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'educator-workshop',
+    title: 'Educators Workshops',
+    text: 'Southern California',
+    value: '51343',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'students',
+    title: 'Students K-12',
+    text: null,
+    value: '29483',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  },
+  {
+    id: 'internships',
+    title: 'Internships',
+    text: null,
+    value: '29484',
+    alt: 'Lists',
+    name: 'data[listGroups][]'
+  }
+]
+
+export default defineComponent({
+  name: 'FormNewsletterSignup',
+  components: {
+    LayoutHelper,
+    BaseHeading,
+    BaseButton,
+    BaseCheckboxGroup,
+    BaseRadioGroup
+  },
+  data() {
+    return {
+      prefilledEmail: null,
+      submitted: false,
+      iContactForm,
+      iContactTrackingGif,
+      captchaKey,
+      emailGroups,
+      eduEmailGroups
+    }
+  },
+  mounted() {
+    if (this.$route && this.$route.query.email != null) {
+      this.prefilledEmail = this.$route.query.email
+    }
+    const validationScript = document.createElement('script')
+    validationScript.setAttribute(
+      'src',
+      'https://app.icontact.com/icp/static/form/javascripts/validation-captcha.js'
+    )
+    const trackingScript = document.createElement('script')
+    trackingScript.setAttribute(
+      'src',
+      'https://app.icontact.com/icp/static/form/javascripts/tracking.js'
+    )
+    document.head.appendChild(validationScript, trackingScript)
+  },
+  methods: {
+    focus(elem) {
+      window.scrollTo(0, elem.offsetTop + 100)
+      elem.focus()
+    },
+    validate(e) {
+      const fields = ['email']
+      const data = {}
+      for (const index in fields) {
+        const key = fields[index]
+        const elem = e.target.elements[key]
+        if (elem.value === '') {
+          this.focus(elem)
+          const name = key.replace('_', ' ')
+          alert('Please fill out the ' + name + ' field.')
+          return false
+        } else {
+          data[key] = elem.value
+        }
+      }
+      return data
+    },
+    submit(e) {
+      const data = this.validate(e)
+      if (data !== false) {
+        this.reveal()
+        const request = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+          },
+          body: qs.stringify({
+            'data[email]': data.email,
+            'data[fname]': data.first_name,
+            'data[lname]': data.last_name,
+            'data[zip]': data.zip_code,
+            'data[listGroups][]': data.listGroups
+          })
+        }
+        fetch(iContactForm, request)
+      }
+    },
+    reveal() {
+      this.submitted = true
+      if (this.$refs && this.$refs.FormNewsletterSignup) {
+        this.$scrollTo(this.$refs.FormNewsletterSignup, 0, { offset: 100 })
+      }
+    }
+  }
+})
+</script>
+
+<style lang="css">
+html {
+  scroll-padding-top: 150px;
+}
+</style>

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

@@ -0,0 +1,46 @@
+import HeroLarge from './HeroLarge.vue'
+
+export default {
+  title: 'Components/Heroes/HeroLarge',
+  component: HeroLarge,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'canvas'
+  }
+}
+
+export const HeroLargeData = {
+  title: 'FreeClimber: LEMUR 3',
+  description:
+    'Crawl, walk and even climb rock walls, this robot was designed to operate in extreme terrains.',
+  heroImage: {
+    // beach
+    src: {
+      url: 'https://picsum.photos/id/973/1800/1200',
+      width: 1800,
+      height: 1200
+    },
+    // lake
+    srcSet:
+      'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+    // jungle
+    screenMd: {
+      url: 'https://picsum.photos/id/921/800/640'
+    },
+    // desert
+    screenSm: {
+      url: 'https://picsum.photos/id/247/640/900'
+    },
+    alt: 'Robotics detail page hero image'
+  }
+}
+
+// stories
+export const Hero = {
+  name: 'HeroLarge',
+  args: {
+    eyebrow: 'Robotics at JPL',
+    ...HeroLargeData,
+    image: HeroLargeData.heroImage
+  }
+}

package/src/components/HeroLarge/HeroLarge.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="HeroLarge max-w-screen-3xl relative mx-auto">
+    <div class="absolute inset-0 z-10 bg-black">
+      <picture v-if="image && image.src">
+        <source
+          media="(min-width: 768px)"
+          :srcset="image.srcSet"
+        />
+        <source
+          media="(min-width: 420px)"
+          :srcset="image.screenMd.url"
+        />
+        <source :srcset="image.screenSm.url" />
+        <img
+          class="md:object-right object-cover object-bottom w-full h-full"
+          :src="image.src.url"
+          :width="image.src.width"
+          :height="image.src.height"
+          :alt="image.alt"
+        />
+      </picture>
+    </div>
+    <div class="content-wrapper lg:flex lg:items-center relative z-20 w-full h-full">
+      <div
+        class="bg-gradient-to-t lg:bg-gradient-to-l from-transparent-w25 lg:from-transparent-w50 to-transparent-black-50 lg:to-transparent-black-50 absolute inset-0"
+      ></div>
+      <div class="text-contrast relative w-full text-white">
+        <div class="lg:py-0 pb-80 container pt-8 mx-auto">
+          <div
+            class="lg:px-10 2xl:px-0 lg:pt-6 lg:pb-18 px-4"
+            :class="{ 'pt-10': hasOverlay }"
+          >
+            <div
+              v-if="eyebrow"
+              class="lg:mb-6 font-secondary mb-4 text-base font-semibold tracking-wider no-underline uppercase"
+            >
+              {{ eyebrow }}
+              <span class="sr-only">.</span>
+            </div>
+            <h1
+              v-if="title"
+              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight uppercase"
+            >
+              {{ title }}
+            </h1>
+            <p
+              v-if="summary"
+              class="lg:w-1/2 2xl:w-2/5 xl:text-6xl lg:text-4xl md:text-2xl lg:leading-tight text-lg font-medium"
+            >
+              {{ summary }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinTransparentHeader } from './../../utils/mixins'
+export default defineComponent({
+  name: 'HeroLarge',
+  props: {
+    eyebrow: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    summary: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    // If secondary nav is also on this page, will add more space above hero text
+    hasOverlay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  mounted() {
+    mixinTransparentHeader()
+  }
+})
+</script>
+<style lang="scss" scoped>
+@import '@explorer-1/common/src/scss/components/HeroLarge';
+</style>

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

@@ -0,0 +1,156 @@
+import videoMp4 from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4'
+import videoWebm from '@explorer-1/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm'
+import HeroListingIndex from './HeroListingIndex.vue'
+
+export default {
+  title: 'Components/Heroes/HeroListingIndex',
+  component: HeroListingIndex,
+  parameters: {
+    viewMode: 'canvas'
+  },
+  excludeStories: /.*Data$/
+}
+
+// data
+export const HeroListingIndexData = {
+  listingPage: {
+    featured: {
+      topicLabel: 'Mars',
+      url: '/news/new-maps-open-roads-to-research/',
+      title: 'Creating Robots to go Where Humans Can’t',
+      image: {
+        src: {
+          url: 'https://picsum.photos/id/973/1800/1200',
+          width: 1800,
+          height: 1200
+        },
+        srcSet:
+          'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+        screenMd: {
+          url: 'https://picsum.photos/id/921/800/640'
+        },
+        screenSm: {
+          url: 'https://picsum.photos/id/247/640/900'
+        }
+      }
+    }
+  }
+}
+
+// templates
+
+export const Default = {
+  args: {
+    customLabel: 'Featured',
+    pageData: HeroListingIndexData.listingPage
+  }
+}
+
+export const NewsImageHero = {
+  args: {
+    customLabel: 'Featured',
+    pageData: {
+      featured: {
+        topicLabel: 'Mars',
+        url: '/news/new-maps-open-roads-to-research/',
+        title: 'Creating Robots to go Where Humans Can’t',
+        heroBlocks: [
+          {
+            blockType: 'ImageChooserBlock',
+            listingPageHeroImage: {
+              src: {
+                url: 'https://picsum.photos/id/973/1800/1200',
+                width: 1800,
+                height: 1200
+              },
+              srcSet:
+                'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+              screenMd: {
+                url: 'https://picsum.photos/id/921/800/640'
+              },
+              screenSm: {
+                url: 'https://picsum.photos/id/247/640/900'
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+
+export const NewsVideoHero = {
+  args: {
+    customLabel: 'Featured',
+    pageData: {
+      featured: {
+        topicLabel: 'Mars',
+        url: '/news/new-maps-open-roads-to-research/',
+        title: 'Creating Robots to go Where Humans Can’t',
+        heroBlocks: [
+          {
+            blockType: 'VideoBlock',
+            video: {
+              file: videoMp4,
+              fileWebm: videoWebm
+            }
+          }
+        ]
+      }
+    }
+  }
+}
+
+export const NewsCarouselHero = {
+  args: {
+    customLabel: 'Featured',
+    pageData: {
+      featured: {
+        topicLabel: 'Mars',
+        url: '/news/new-maps-open-roads-to-research/',
+        title: 'Creating Robots to go Where Humans Can’t',
+        heroBlocks: [
+          {
+            blockType: 'CarouselBlock',
+            blocks: [
+              {
+                listingPageHeroImage: {
+                  src: {
+                    url: 'https://picsum.photos/id/973/1800/1200',
+                    width: 1800,
+                    height: 1200
+                  },
+                  srcSet:
+                    'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+                  screenMd: {
+                    url: 'https://picsum.photos/id/921/800/640'
+                  },
+                  screenSm: {
+                    url: 'https://picsum.photos/id/247/640/900'
+                  }
+                }
+              },
+              {
+                listingPageHeroImage: {
+                  src: {
+                    url: 'https://picsum.photos/id/973/1800/1200',
+                    width: 1800,
+                    height: 1200
+                  },
+                  srcSet:
+                    'https://picsum.photos/id/865/768/548 768w, https://picsum.photos/id/865/1024/684 1024w, https://picsum.photos/id/865/1440/770 1440w,  https://picsum.photos/id/865/1800/963 1800w',
+                  screenMd: {
+                    url: 'https://picsum.photos/id/921/800/640'
+                  },
+                  screenSm: {
+                    url: 'https://picsum.photos/id/247/640/900'
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+}