@explorer-1/vue 0.0.0

package/src/components/DsnWidget/DsnWidget.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    v-if="data"
+    class="lg:col-span-3 sm:col-span-5 col-span-full"
+  >
+    <template v-if="data.link">
+      <BaseLink
+        variant="none"
+        :target="data.linkTarget ? '_blank' : '_self'"
+        :href="data.link"
+        link-class="block"
+      >
+        <p
+          v-if="data.heading"
+          class="text-subtitle text-jpl-red mb-4"
+        >
+          {{ data.heading }}
+        </p>
+      </BaseLink>
+    </template>
+    <template v-else>
+      <p
+        v-if="data.heading"
+        class="text-subtitle text-jpl-red mb-4"
+      >
+        {{ data.heading }}
+      </p>
+    </template>
+    <!-- if no data, spacecraftName will be null -->
+    <template v-if="data.spacecraftName">
+      <p
+        v-if="data.transmitTitle"
+        class="text-body-sm mb-4"
+      >
+        {{ data.transmitTitle }}
+      </p>
+      <p
+        v-if="data.spacecraftName"
+        class="text-stats-lg"
+      >
+        {{ data.spacecraftName }}
+      </p>
+      <div class="text-gray-mid-dark flex flex-nowrap items-center justify-start mt-2 text-sm">
+        <span
+          v-if="data.transmitStatus === 'both' || data.transmitStatus === 'sending'"
+          class="animate-pulse mr-1"
+        >
+          <span class="sr-only">
+            {{ data.spacecraftName }} is sending to {{ data.location }}.
+          </span>
+          <IconArrows class="-ml-1" />
+        </span>
+        <span
+          v-if="data.location"
+          class="mr-1"
+          aria-hidden="true"
+        >
+          {{ data.location }}
+        </span>
+        <span
+          v-if="data.transmitStatus === 'both' || data.transmitStatus === 'receiving'"
+          class="animate-pulse"
+        >
+          <span class="sr-only">
+            {{ data.spacecraftName }} is receiving from {{ data.location }}.
+          </span>
+          <IconArrows />
+        </span>
+      </div>
+    </template>
+    <template v-else>
+      <p class="text-body-sm">Data currently unavailable</p>
+    </template>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import IconArrows from './../Icons/IconArrows.vue'
+/**
+ * Displays dsn widget data. API is parsed by the backend. Frontend retrieves via a graphQL query.
+ */
+export default defineComponent({
+  name: 'DsnWidget',
+  components: {
+    BaseLink,
+    IconArrows
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>

package/src/components/EventCard/EventCard.vue

@@ -0,0 +1,188 @@
+<template>
+  <BaseLink
+    variant="none"
+    :to="url"
+    class="SearchResultCard EventCard"
+    link-class="block"
+  >
+    <div
+      class="border-gray-light-mid lg:pb-10 lg:mb-10 relative grid grid-cols-9 gap-7 pb-6 mb-6 border-b"
+    >
+      <div class="col-span-6 md:order-last">
+        <BaseHeading
+          v-if="title"
+          :level="headingLevel"
+          size="h3"
+          class="mb-4"
+          >{{ title }}
+        </BaseHeading>
+        <p
+          v-if="summary"
+          class="text-gray-dark text-body-sm mb-3 hidden md:block"
+        >
+          {{ summary }}
+        </p>
+
+        <div class="md:mt-10 text-xl md:flex">
+          <div class="EventCard__Metadata flex text-primary text-body-sm">
+            <IconCalendar class="relative mr-3" />
+            <span> {{ formattedEventDates }}</span>
+          </div>
+          <div
+            v-show="displayTime"
+            class="EventCard__Metadata hidden md:flex text-primary text-body-sm"
+          >
+            <IconTime class="relative mr-3" />
+            <span>{{ displayTime }}</span>
+          </div>
+          <div
+            v-if="location"
+            class="EventCard__Metadata flex text-primary text-body-sm"
+          >
+            <IconLocation class="relative mr-3" />
+            <span>{{ location }}</span>
+          </div>
+        </div>
+      </div>
+      <div
+        v-if="image"
+        class="SearchResultCard-image col-span-3 md:order-first"
+      >
+        <BaseImagePlaceholder
+          aspect-ratio="square"
+          responsive-aspect-ratio="md:aspect-ratio-four-three"
+        >
+          <BaseImage
+            v-if="image.src"
+            :src="image.src.url"
+            :width="image.src.width"
+            :height="image.src.height"
+            alt=""
+            object-fit-class="cover"
+            loading="lazy"
+          />
+          <div
+            v-if="splitDate"
+            class="hidden md:block absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+          >
+            <div class="font-extrabold text-6xl leading-tight tracking-wider">
+              {{ splitDate.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ splitDate.monthAndYear }}
+            </div>
+          </div>
+        </BaseImagePlaceholder>
+      </div>
+    </div>
+  </BaseLink>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+import {
+  mixinFormatEventDates,
+  mixinFormatSplitEventDates,
+  mixinFormatEventTimeInHoursAndMinutes
+} from './../../utils/mixins'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import type { HeadingLevel } from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'EventCard',
+  components: {
+    BaseLink,
+    BaseHeading,
+    BaseImage,
+    BaseImagePlaceholder
+  },
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: '#'
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    summary: {
+      type: String,
+      required: false
+    },
+    startTime: {
+      type: String,
+      required: false
+    },
+    startDate: {
+      type: String,
+      required: false
+    },
+    endTime: {
+      type: String,
+      required: false
+    },
+    endDate: {
+      type: String,
+      required: false
+    },
+    location: {
+      type: String,
+      required: false
+    },
+    image: {
+      type: Object,
+      required: false
+    },
+    headingLevel: {
+      type: (String as PropType<HeadingLevel>) || null,
+      required: false,
+      default: 'h5'
+    }
+  },
+  computed: {
+    splitDate(): { day: string; monthAndYear: string } | null {
+      if (this.startDate) {
+        return mixinFormatSplitEventDates(this.startDate, this.endDate)
+      }
+      return null
+    },
+    displayTime(): string | undefined {
+      if (this.startDate) {
+        return mixinFormatEventTimeInHoursAndMinutes(this.startDate, this.endDate, this.endTime)
+      }
+      return undefined
+    },
+    formattedEventDates() {
+      return this.startDate ? mixinFormatEventDates(this.startDate, this.endDate) : undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+.EventCard {
+  .EventCard__Metadata {
+    @apply items-baseline;
+    @apply mr-0;
+    @apply mb-4;
+    @apply md:mb-0;
+    @apply md:mr-3;
+    @apply lg:mr-6;
+
+    span {
+      max-width: 230px;
+      min-width: 110px;
+      @apply text-gray-dark;
+    }
+
+    svg {
+      min-width: 1.25rem;
+      @apply top-0.5;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,53 @@
+import EventDetailHero from './EventDetailHero.vue'
+
+export default {
+  title: 'WWW/EventDetail/EventDetailHero',
+  component: EventDetailHero,
+  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
+        }
+      ]
+    },
+    viewMode: 'docs'
+  },
+  excludeStories: /.*Data$/
+}
+
+export const EventDetailHeroData = {
+  heroImage: {
+    srcSet: 'https://picsum.photos/320/200 320w, https://picsum.photos/1920/1200 1440w',
+    src: {
+      url: 'https://picsum.photos/1920/1200',
+      width: 1920,
+      height: 1200
+    },
+    alt: 'The hero image'
+  },
+  startDateSplit: {
+    day: '25',
+    monthAndYear: 'Jan. 2020'
+  }
+}
+
+// stories
+export const Default = {
+  args: {
+    image: EventDetailHeroData.heroImage,
+    startDateSplit: EventDetailHeroData.startDateSplit
+  }
+}

package/src/components/EventDetailHero/EventDetailHero.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    v-if="image"
+    class="HeroMedia mb-10 md:mb-10 lg:mb-14 -mx-4 lg:mx-0"
+  >
+    <div class="bg-gray-light">
+      <div class="relative flex items-center mx-auto overflow-hidden vh-crop max-w-screen-3xl">
+        <div class="hero">
+          <img
+            v-if="image.src"
+            class="object-cover object-center w-full h-full"
+            :srcset="getSrcSet"
+            :src="image.src.url"
+            :width="image.src.width"
+            :height="image.src.height"
+            :alt="image.alt"
+          />
+          <div
+            v-if="startDateSplit"
+            class="absolute top-0 left-0 z-10 px-4 py-4 text-center text-white bg-primary"
+          >
+            <div class="font-extrabold text-6xl leading-tight tracking-wider">
+              {{ startDateSplit.day }}
+            </div>
+            <div class="text-subtitle">
+              {{ startDateSplit.monthAndYear }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mixinGetSrcSet, type EventDateObject } from './../../utils/mixins'
+import type { PropType } from 'vue'
+
+export default defineComponent({
+  name: 'EventDetailHero',
+  props: {
+    data: {
+      type: Object,
+      required: false
+    },
+    startDateSplit: {
+      type: Object as PropType<EventDateObject>,
+      required: true
+    },
+    image: {
+      type: Object,
+      required: false
+    }
+  },
+  computed: {
+    getSrcSet() {
+      return this.image ? mixinGetSrcSet(this.image) : undefined
+    }
+  }
+})
+</script>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/HeroMedia';
+</style>

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

@@ -0,0 +1,16 @@
+import FormContact from './FormContact.vue'
+
+export default {
+  title: 'Components/FormContact',
+  component: FormContact
+}
+
+// template
+const FormContactTemplate = () => ({
+  components: { FormContact },
+  template: `<FormContact />`
+})
+
+// stories
+export const Contact = FormContactTemplate.bind({})
+Contact.storyName = 'FormContact'

package/src/components/FormContact/FormContact.vue

@@ -0,0 +1,202 @@
+<template>
+  <LayoutHelper indent="col-3">
+    <hr
+      ref="FormContact"
+      class="text-gray-light-mid mb-10"
+    />
+    <div
+      v-show="!submitted"
+      class="mb-10"
+    >
+      <form @submit.prevent="submit">
+        <BaseHeading
+          level="h2"
+          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>
+        <BaseHeading
+          level="h2"
+          size="h6"
+          class="mt-12"
+          >Write Us</BaseHeading
+        >
+        <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"
+            >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-h5">Your feedback has been sent.</p>
+    </div>
+  </LayoutHelper>
+</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'
+
+export default defineComponent({
+  name: 'FormContact',
+  components: {
+    LayoutHelper,
+    BaseHeading,
+    BaseButton
+  },
+  data() {
+    return {
+      submitted: false
+    }
+  },
+  methods: {
+    focus(elem) {
+      window.scrollTo(0, elem.offsetTop + 100)
+      elem.focus()
+    },
+    validate(e) {
+      const fields = ['full_name', 'email', 'subject', 'message']
+      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 url = 'https://formspree.io/f/xpzvnnzn'
+        const request = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+          },
+          body: qs.stringify({
+            full_name: data.full_name,
+            email: data.email,
+            subject: data.subject,
+            message: data.message
+          })
+        }
+        fetch(url, request)
+      }
+    },
+    reveal() {
+      this.submitted = true
+      if (this.$refs && this.$refs.FormContact) {
+        this.$scrollTo(this.$refs.FormContact, 0, { offset: -100 })
+      }
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,16 @@
+import FormNewsletterSignup from './FormNewsletterSignup.vue'
+
+export default {
+  title: 'Components/FormNewsletterSignup',
+  component: FormNewsletterSignup
+}
+
+// template
+const FormNewsletterSignupTemplate = () => ({
+  components: { FormNewsletterSignup },
+  template: `<FormNewsletterSignup />`
+})
+
+// stories
+export const NewsletterSignup = FormNewsletterSignupTemplate.bind({})
+NewsletterSignup.storyName = 'FormNewsletterSignup'