@explorer-1/vue 0.0.0

package/src/components/BaseAudio/BaseAudio.vue

@@ -0,0 +1,359 @@
+<template>
+  <div class="BaseAudio">
+    <div class="BaseAudio__stage sm:pr-5">
+      <div class="BaseAudio__player w-full select-none">
+        <div class="flex flex-row w-full">
+          <div class="z-30 text-sm md:text-base">
+            <template v-if="paused">
+              <button
+                class="cursor-pointer"
+                title="Play"
+                aria-label="Play"
+                @click="play()"
+              >
+                <IconPlay class="bg-jpl-red text-white" />
+              </button>
+            </template>
+            <template v-else>
+              <button
+                class="cursor-pointer"
+                title="Pause"
+                aria-label="Pause"
+                @click="pause()"
+              >
+                <IconPause class="bg-jpl-red text-white" />
+              </button>
+            </template>
+          </div>
+          <div class="flex flex-col w-full z-20">
+            <div
+              class="BaseAudio__playback-time-wrapper cursor-pointer relative inline-block w-full border-t border-jpl-red bg-gray-mid-dark bg-opacity-25 h-2"
+              title="Playback Position"
+              @click="setPosition"
+            >
+              <div
+                v-if="playing"
+                :style="progressStyle"
+                class="BaseAudio__playback-time-indicator bg-jpl-red transition-all transform-gpu duration-50 absolute top-0 left-0 bottom-0 h-2"
+              ></div>
+            </div>
+            <div class="flex flex-row text-white">
+              <div class="flex flex-row justify-between w-full py-1.5 px-3">
+                <span
+                  class="BaseAudio__playback-time-current text-sm md:text-base pr-1 md:pr-3 text-left"
+                >
+                  {{ currentTime }}
+                </span>
+                <div
+                  v-if="playing"
+                  class="BaseAudio__rewind-forward animate-fadeIn"
+                >
+                  <button
+                    class="cursor-pointer"
+                    title="Rewind"
+                    aria-label="Rewind 10 seconds"
+                    @click="rewind(10)"
+                  >
+                    <IconRewindTen />
+                  </button>
+                  <button
+                    class="cursor-pointer"
+                    title="Fast Forward"
+                    aria-label="Fast-forward 10 seconds"
+                    @click="forward(10)"
+                  >
+                    <IconForwardTen />
+                  </button>
+                </div>
+                <span class="BaseAudio__playback-time-total">
+                  {{ duration }}
+                </span>
+              </div>
+              <div
+                class="BaseAudio__extern-wrapper flex flex-row"
+                :class="
+                  !playing
+                    ? '-mt-1.5 sm:mt-0.5 md:mt-1 lg:mt-1.5'
+                    : '-mt-1.5 sm:-mt-0.5 md:mt-0 lg:-mt-0.5'
+                "
+              >
+                <template v-if="isMuted">
+                  <button
+                    class="cursor-pointer"
+                    title="Unmute"
+                    aria-label="Unmute"
+                    @click="toggleMute()"
+                  >
+                    <IconMute />
+                  </button>
+                </template>
+                <template v-else>
+                  <button
+                    class="cursor-pointer"
+                    title="Mute"
+                    aria-label="Mute"
+                    @click="toggleMute()"
+                  >
+                    <IconVolume />
+                  </button>
+                </template>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <audio
+        :id="playerId"
+        ref="player"
+        :src="file"
+        preload="auto"
+        class="hidden min-w-full left-0 right-0"
+      ></audio>
+    </div>
+    <a
+      class="volume-toggle absolute right-5 -bottom-4"
+      title="Volume"
+      @mouseover="toggleVolume()"
+    />
+  </div>
+</template>
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import IconPlay from './../Icons/IconPlay.vue'
+import IconPause from './../Icons/IconPause.vue'
+import IconVolume from './../Icons/IconVolume.vue'
+import IconMute from './../Icons/IconMute.vue'
+import IconRewindTen from './../Icons/IconRewindTen.vue'
+import IconForwardTen from './../Icons/IconForwardTen.vue'
+export const baseVolumeValue = 10
+
+export const generateUUID = () => {
+  return 'xxxxxxxx-xxxx-4xxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
+export const convertTimeHHMMSS = (val) => {
+  const hhmmss = new Date(val * 1000).toISOString().substr(11, 8)
+  return hhmmss.indexOf('00:') === 0 ? hhmmss.substr(3) : hhmmss
+}
+
+export default defineComponent({
+  name: 'BaseAudio',
+  components: {
+    IconPlay,
+    IconPause,
+    IconVolume,
+    IconMute,
+    IconRewindTen,
+    IconForwardTen
+  },
+  props: {
+    file: {
+      type: String,
+      default: null
+    },
+    autoPlay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      firstPlay: true,
+      isMuted: false,
+      loaded: false,
+      playing: false,
+      paused: true,
+      progressStyle: '',
+      currentTime: '00:00',
+      uuid: '0',
+      audio: undefined,
+      totalDuration: 0,
+      hideVolumeSlider: false,
+      volumeValue: baseVolumeValue
+    }
+  },
+  computed: {
+    duration() {
+      return this.audio ? convertTimeHHMMSS(this.totalDuration) : ''
+    },
+    playerId() {
+      return 'player-' + this.uuid
+    }
+  },
+  mounted() {
+    this.uuid = generateUUID()
+    this.audio = this.getAudio()
+    this.init()
+  },
+  beforeUnmount() {
+    this.audio.removeEventListener('timeupdate', this._handlePlayingUI)
+    this.audio.removeEventListener('loadeddata', this._handleLoaded)
+    this.audio.removeEventListener('pause', this._handlePlayPause)
+    this.audio.removeEventListener('play', this._handlePlayPause)
+  },
+  methods: {
+    setPosition: function name(e) {
+      const tag = e.target
+      if (this.paused) return
+
+      if (e.target.tagName === 'SPAN') {
+        return
+      }
+      const pos = tag.getBoundingClientRect()
+      const seekPos = (e.clientX - pos.left) / pos.width
+      this.audio.currentTime = parseInt(this.audio.duration * seekPos)
+    },
+    updateVolume() {
+      this.hideVolumeSlider = false
+      this.audio.volume = this.volumeValue / 100
+      if (this.volumeValue / 100 > 0) {
+        this.isMuted = this.audio.muted = false
+      }
+
+      if (this.volumeValue / 100 === 0) {
+        this.isMuted = this.audio.muted = true
+      }
+    },
+    toggleVolume() {
+      this.hideVolumeSlider = true
+    },
+    stop() {
+      this.playing = false
+      this.paused = true
+      this.audio.pause()
+      this.audio.currentTime = 0
+    },
+    play() {
+      if (this.playing && !this.paused) return
+      this.paused = false
+      this.audio.play()
+      this.playing = true
+      this.$root.$emit('play', this.uuid)
+    },
+    forward(duration) {
+      return (this.audio.currentTime += duration)
+    },
+    rewind(duration) {
+      return (this.audio.currentTime -= duration)
+    },
+    pause() {
+      this.paused = !this.paused
+      this.paused ? this.audio.pause() : this.audio.play()
+    },
+    pauseOthers(activeUuid) {
+      if (this.uuid !== activeUuid) {
+        this.paused = true
+        this.audio.pause()
+      }
+    },
+    toggleMute() {
+      this.isMuted = !this.isMuted
+      this.audio.muted = this.isMuted
+      this.volumeValue = this.isMuted ? 0 : 100
+    },
+    _handleLoaded() {
+      if (this.audio.readyState >= 2) {
+        if (this.autoPlay) this.play()
+
+        this.loaded = true
+        this.totalDuration = parseInt(this.audio.duration)
+      } else {
+        throw new Error('Failed to load audio file')
+      }
+    },
+    _handlePlayingUI(_e) {
+      const currTime = this.audio.currentTime
+      const percentage = (currTime / this.totalDuration) * 100
+      this.progressStyle = `width: ${percentage}%;`
+      this.currentTime = convertTimeHHMMSS(currTime)
+    },
+    _handlePlayPause(e) {
+      if (e.type === 'play' && this.firstPlay) {
+        // in some situations, audio.currentTime is the end one on chrome
+        this.audio.currentTime = 0
+        if (this.firstPlay) {
+          this.firstPlay = false
+        }
+      }
+      if (e.type === 'pause' && this.playing === false) {
+        this.progressStyle = 'width:0%'
+        this.currentTime = '00:00'
+        this.paused = true
+      }
+    },
+    _handleEnded() {
+      this.paused = this.playing = false
+    },
+    init() {
+      this.audio.addEventListener('timeupdate', this._handlePlayingUI)
+      this.audio.addEventListener('loadeddata', this._handleLoaded)
+      this.audio.addEventListener('pause', this._handlePlayPause)
+      this.audio.addEventListener('play', this._handlePlayPause)
+      this.audio.addEventListener('ended', this._handleEnded)
+      // TODO: VUE3: find solution for emitting event from slot
+      // TODO: find a cleaner way to do this w/o using mounted or root level events
+      // scoped slots? https://github.com/vuejs/vue/issues/4332
+      this.$root?.$on('play', this.pauseOthers)
+    },
+    getAudio() {
+      return this.$el.querySelectorAll('audio')[0]
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.BaseAudio {
+  @apply relative w-full;
+
+  .BaseAudio__stage {
+    @apply flex flex-row w-full;
+  }
+
+  .BaseAudio__playback-time-total {
+    @apply text-sm md:text-base pl-1 md:pl-3 text-right;
+  }
+
+  .BaseAudio__playback-time-current,
+  .BaseAudio__playback-time-total {
+    @screen sm {
+      min-width: 7ch;
+    }
+  }
+
+  .BaseAudio__rewind-forward {
+    @apply hidden sm:flex flex-row w-25 lg:w-35 mx-auto justify-between;
+
+    > button {
+      @apply opacity-100 hover:opacity-80;
+
+      svg {
+        @apply w-6 text-white;
+      }
+    }
+  }
+
+  .BaseAudio__playback-time-indicator {
+    &::after {
+      @apply h-4 bg-white block absolute w-1 -top-1 -right-1;
+
+      content: '';
+    }
+  }
+
+  .BaseAudio__extern-wrapper {
+    > button {
+      @apply mr-1 sm:-mt-2 lg:-mt-2.5 ml-2.5 opacity-100 hover:opacity-80;
+
+      svg {
+        @apply w-6;
+      }
+    }
+  }
+}
+</style>

package/src/components/BaseButton/BaseButton.stories.ts

@@ -0,0 +1,65 @@
+import BaseButton, { variants } from './BaseButton.vue'
+
+// TODO: add the rest of the button stories (icons, disabled, etc.)
+export default {
+  title: 'Components/Base/BaseButton',
+  component: BaseButton,
+  excludeStories: /.*(Data)$/,
+  tags: ['autodocs'],
+  parameters: {
+    slots: {
+      default: 'Default slot content'
+    },
+    docs: {
+      description: {
+        component: 'Simple button with several style variations.'
+      }
+    }
+  },
+  argTypes: {
+    ariaLabel: {
+      type: 'string',
+      description:
+        "ARIA label. Recommended if your button label isn't descriptive, or if it only contains an icon."
+    },
+    variant: {
+      type: 'string',
+      description: 'Button variant type',
+      control: {
+        type: 'select'
+      },
+      options: Object.keys(variants),
+      table: {
+        defaultValue: { summary: 'default' }
+      }
+    }
+  }
+}
+
+export const BaseButtonData = {
+  label: 'Explore',
+  ariaLabel: 'Explore',
+  compact: false,
+  disabled: false,
+  to: '/',
+  default: 'Button'
+}
+
+export const PrimaryButton = {
+  args: {
+    ...BaseButtonData,
+    variant: 'primary'
+  }
+}
+export const SecondaryButton = {
+  args: {
+    ...BaseButtonData,
+    variant: 'secondary'
+  }
+}
+export const DarkButton = {
+  args: {
+    ...BaseButtonData,
+    variant: 'dark'
+  }
+}

package/src/components/BaseButton/BaseButton.vue

@@ -0,0 +1,114 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+interface Variants {
+  [name: string]: string
+}
+
+export const variants: Variants = {
+  primary: '-primary',
+  secondary: '-secondary',
+  dark: '-dark',
+  social: '-social'
+}
+
+export default defineComponent({
+  name: 'BaseButton',
+  props: {
+    variant: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: (prop: string): boolean => Object.keys(variants).includes(prop)
+    },
+    compact: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    blockClasses: {
+      type: String,
+      required: false,
+      default: 'inline-block'
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    ariaLabel: {
+      type: String,
+      default: '',
+      required: false
+    },
+    to: {
+      type: [String, Object],
+      required: false,
+      default: undefined
+    },
+    href: {
+      type: String,
+      required: false,
+      default: undefined
+    }
+  },
+  emits: ['click'],
+  computed: {
+    tag(): string {
+      if (this.disabled) {
+        return 'button'
+      } else if (this.to) {
+        return 'nuxt-link'
+      } else if (this.href) {
+        return 'a'
+      } else {
+        return 'button'
+      }
+    },
+    // necessary for valid html
+    // must account for <a>, <nuxt-link>, and <button> use-cases
+    theHref(): string | undefined {
+      if (this.tag === 'nuxt-link') {
+        return this.to as string
+      } else if (this.tag === 'a') {
+        return this.href
+      }
+      return undefined
+    },
+    variantClass(): string {
+      let classes = variants[this.variant]
+      if (!this.$slots.default && this.$slots.icon) {
+        classes = classes + ' -icon-only'
+      } else if (this.compact) {
+        classes = classes + ' -compact'
+      }
+      if (this.blockClasses) {
+        classes = classes + ' ' + this.blockClasses
+      }
+      return classes
+    }
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="BaseButton text-contrast-none"
+    :class="variantClass"
+    :aria-label="ariaLabel"
+    :disabled="disabled"
+    :href="theHref"
+    :to="to ? to : undefined"
+    @click="$emit('click')"
+  >
+    <span class="label block">
+      <slot name="default"></slot>
+      <slot name="icon"></slot>
+      <slot name="afterIcon"></slot>
+    </span>
+  </component>
+</template>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BaseButton';
+</style>

package/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx

@@ -0,0 +1,68 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
+
+<Meta
+  title="Components/Base/BaseCheckboxGroup"
+  component={BaseCheckboxGroup}
+  parameters={{ viewMode: 'docs' }}
+/>
+
+export const BaseCheckboxGroupData = {
+  options: [
+    {
+      id: 'educators',
+      title: 'Educators',
+      text: null
+    },
+    {
+      id: 'educator-workshop',
+      title: 'Educators Workshops',
+      text: 'Southern California'
+    },
+    {
+      id: 'students',
+      title: 'Students K-12',
+      text: null
+    },
+    {
+      id: 'internships',
+      title: 'Internships',
+      text: null
+    }
+  ],
+  group: 'edumail',
+  heading: 'JPL Education Groups',
+  subHeading:
+    '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.',
+  title: 'Education Email Groups'
+}
+
+export const BaseCheckboxGroupTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseCheckboxGroup },
+  template: `<BaseCheckboxGroup :options="options" :group="group" :heading="heading" :sub-heading="subHeading" :title="title"
+></BaseCheckboxGroup>`
+})
+
+# Base Checkbox Group
+
+## Usage
+
+The BaseCheckboxGroup component is expected to contain an array of options and a grouping name with the goal of selecting multiple options.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={BaseCheckboxGroupData}
+  >
+    {BaseCheckboxGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable for={BaseCheckboxGroup} />
+
+## Example data
+
+<code language="json">{JSON.stringify(BaseCheckboxGroupData, null, 2)}</code>

package/src/components/BaseCheckboxGroup/BaseCheckboxGroup.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="BaseCheckboxGroup">
+    <label
+      v-if="heading"
+      class="text-lg font-semibold text-gray-900"
+      >{{ heading }}</label
+    >
+    <p
+      v-if="subHeading"
+      class="text-lg pt-4 pb-2 pr-4"
+    >
+      {{ subHeading }}
+    </p>
+    <fieldset class="mt-4">
+      <legend
+        v-if="title"
+        class="sr-only"
+      >
+        {{ title }}
+      </legend>
+      <div
+        v-if="options"
+        class="space-y-4 mb-2 pb-5"
+      >
+        <div
+          v-for="option in options"
+          :key="option.id"
+          class="relative flex items-start"
+        >
+          <div class="flex items-center h-5">
+            <input
+              :id="`${group}_${option.id}`"
+              :aria-describedby="option.text ? `${group}_${option.id}_description` : undefined"
+              :name="option.name"
+              :alt="option.alt"
+              :value="option.value"
+              type="checkbox"
+              class="h-5 w-5 mt-0.5"
+            />
+          </div>
+          <div class="mb-1">
+            <label
+              :for="`${group}_${option.id}`"
+              class="ml-3 block text-md text-gray-700"
+            >
+              <span
+                v-if="option.title"
+                class="font-semibold"
+                >{{ option.title }}</span
+              >
+              <span v-if="option.text"> - </span>
+              <span
+                v-if="option.text"
+                :id="`${group}_${option.id}_description`"
+                class="font-light"
+                >{{ option.text }}</span
+              >
+            </label>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { FormOption } from '../../interfaces'
+
+export default defineComponent({
+  name: 'BaseCheckboxGroup',
+  props: {
+    group: {
+      type: String,
+      default: null,
+      required: false
+    },
+    heading: {
+      type: String,
+      default: null,
+      required: false
+    },
+    subHeading: {
+      type: String,
+      default: null,
+      required: false
+    },
+    title: {
+      type: String,
+      default: null,
+      required: false
+    },
+    options: {
+      type: Array as PropType<FormOption[]>,
+      default: null,
+      required: false
+    }
+  }
+})
+</script>