@explorer-1/vue 0.0.0

package/src/components/BaseUnitToggle/BaseUnitToggle.stories.js

@@ -0,0 +1,86 @@
+import BaseUnitToggle, { unitPairs } from './BaseUnitToggle.vue'
+
+export default {
+  title: 'Components/Base/BaseUnitToggle',
+  component: BaseUnitToggle,
+  argTypes: {
+    unitPair: {
+      control: { type: 'select', options: Object.keys(unitPairs) }
+    },
+    valueSystem: {
+      description: 'The system of measurement that corresponds with the provided `value`',
+      control: { type: 'select', options: ['imperial', 'metric'] }
+    },
+    value: {
+      description: 'The initial value to be converted'
+    },
+    secondValue: {
+      description: 'Manually override the converted value'
+    }
+  }
+}
+
+const BaseUnitToggleTemplate = (args) => ({
+  components: { BaseUnitToggle },
+  setup() {
+    return { args }
+  },
+  template: `
+  <BaseUnitToggle
+    v-slot="slotProps"
+    v-bind="args"
+  >
+    <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+  </BaseUnitToggle>`
+})
+
+export const Imperial = BaseUnitToggleTemplate.bind({})
+Imperial.args = {
+  unitPair: 'MI_KM',
+  value: 999999,
+  secondValue: undefined,
+  valueSystem: 'imperial'
+}
+
+export const Metric = {
+  args: {
+    unitPair: 'MI_KM',
+    value: 999999,
+    secondValue: undefined,
+    valueSystem: 'metric'
+  },
+  render: (args) => ({
+    components: { BaseUnitToggle },
+    setup() {
+      return { args }
+    },
+    template: `<BaseUnitToggle
+        v-slot="slotProps"
+        v-bind="args"
+      >
+        <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+      </BaseUnitToggle>`
+  })
+}
+
+export const KeepsPrecision = {
+  args: {
+    unitPair: 'MI_KM',
+    value: 14.33,
+    secondValue: undefined,
+    valueSystem: 'imperial',
+    formattedValue: 123
+  },
+  render: (args) => ({
+    components: { BaseUnitToggle },
+    setup() {
+      return { args }
+    },
+    template: `<BaseUnitToggle
+    v-slot="slotProps"
+    v-bind="args"
+  >
+    <span class="text-stats-xl">{{ slotProps.formattedValue }}</span>
+  </BaseUnitToggle>`
+  })
+}

package/src/components/BaseUnitToggle/BaseUnitToggle.test.js

@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+
+import BaseUnitToggle from './BaseUnitToggle.vue'
+
+describe('BaseUnitToggle', () => {
+  test.each`
+    output       | value       | valueSystem   | selectedSystem
+    ${'1,000'}   | ${1000}     | ${'imperial'} | ${'imperial'}
+    ${'1,000'}   | ${1000}     | ${'metric'}   | ${'metric'}
+    ${'1,609'}   | ${1000}     | ${'imperial'} | ${'metric'}
+    ${'621'}     | ${1000}     | ${'metric'}   | ${'imperial'}
+    ${'1,000.1'} | ${1000.1}   | ${'metric'}   | ${'metric'}
+    ${'621.4'}   | ${1000.1}   | ${'metric'}   | ${'imperial'}
+    ${'621.44'}  | ${1000.11}  | ${'metric'}   | ${'imperial'}
+    ${'621.440'} | ${1000.111} | ${'metric'}   | ${'imperial'}
+  `(
+    '$value $valueSystem, displays $output $selectedSystem',
+    ({ output, value, valueSystem, selectedSystem }) => {
+      const wrapper = mount(BaseUnitToggle, {
+        propsData: { unitPair: 'MI_KM', value, valueSystem }
+      })
+      wrapper.setData({ selectedSystem })
+      expect(wrapper.vm.formattedValue).toBe(output)
+    }
+  )
+})

package/src/components/BaseUnitToggle/BaseUnitToggle.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="BaseUnitToggle">
+    <p class="sr-only">{{ formattedValue }} {{ unitConfig[selectedSystem].label }}</p>
+    <slot :formatted-value="formattedValue">
+      {{ formattedValue }}
+    </slot>
+    <fieldset
+      class="text-body-xs inline-block"
+      :class="{ 'lg:block': !inline }"
+      aria-label="Change Unit"
+    >
+      <label
+        class="cursor-pointer"
+        :aria-label="unitConfig.imperial.label"
+      >
+        <input
+          v-model="selectedSystem"
+          class="sr-only"
+          type="radio"
+          value="imperial"
+          @change="setSystem"
+        />
+        <span
+          class="unit"
+          aria-hidden="true"
+        >
+          {{ unitConfig.imperial.abbr }}
+        </span>
+      </label>
+      <span
+        class="select-none"
+        aria-hidden="true"
+        >|</span
+      >
+      <label
+        class="cursor-pointer"
+        :aria-label="unitConfig.metric.label"
+      >
+        <input
+          v-model="selectedSystem"
+          class="sr-only"
+          type="radio"
+          value="metric"
+          @change="setSystem"
+        />
+        <span
+          class="unit"
+          aria-hidden="true"
+        >
+          {{ unitConfig.metric.abbr }}
+        </span>
+      </label>
+    </fieldset>
+  </div>
+</template>
+<script lang="ts">
+import type { PropType } from 'vue'
+import { defineComponent } from 'vue'
+
+export type UnitSystemName = keyof UnitConfig
+export type UnitName = keyof UnitPairs
+
+/**
+ * Centrally defined configuration for unit pairs, to avoid inconsistencies.
+ */
+export interface UnitPairs {
+  MI_KM: UnitConfig
+  LB_KG: UnitConfig
+  G_OZ: UnitConfig
+  M_FT: UnitConfig
+  MS_FS: UnitConfig
+}
+
+interface UnitDetails {
+  label: string
+  abbr: string
+  toOther: number
+}
+
+export interface UnitConfig {
+  imperial: UnitDetails
+  metric: UnitDetails
+}
+
+export const unitPairs: UnitPairs = {
+  MI_KM: {
+    imperial: {
+      label: 'Miles',
+      abbr: 'MI',
+      toOther: 1 * 1.609344
+    },
+    metric: {
+      label: 'Kilometers',
+      abbr: 'KM',
+      toOther: 1 / 1.609344
+    }
+  },
+  LB_KG: {
+    imperial: {
+      label: 'Pounds',
+      abbr: 'LB',
+      toOther: 1 / 2.205
+    },
+    metric: {
+      label: 'Kilograms',
+      abbr: 'KG',
+      toOther: 1 * 2.205
+    }
+  },
+  G_OZ: {
+    imperial: {
+      label: 'Ounces',
+      abbr: 'OZ',
+      toOther: 1 / 0.0352739331766097
+    },
+    metric: {
+      label: 'Grams',
+      abbr: 'G',
+      toOther: 1 * 0.0352739331766097
+    }
+  },
+  M_FT: {
+    imperial: {
+      label: 'Feet',
+      abbr: 'FT',
+      toOther: 1 * 0.3048
+    },
+    metric: {
+      label: 'Meters',
+      abbr: 'M',
+      toOther: 1 / 0.3048
+    }
+  },
+  MS_FS: {
+    imperial: {
+      label: 'Feet per second',
+      abbr: 'FT/S',
+      toOther: 1 * 0.3048
+    },
+    metric: {
+      label: 'Meters per second',
+      abbr: 'M/S',
+      toOther: 1 / 0.3048
+    }
+  }
+} as const
+
+/**
+ * Toggle between equivalent units in imperial and SI systems.
+ * Supports providing the value in either format, and converts into the other.
+ */
+export default defineComponent({
+  name: 'BaseUnitToggle',
+  props: {
+    unitPair: {
+      type: String as PropType<UnitName>,
+      required: true,
+      validator: (val: UnitName): boolean => Boolean(unitPairs[val])
+    },
+    value: {
+      type: Number as PropType<number>,
+      required: true
+    },
+    secondValue: {
+      type: Number as PropType<number>,
+      required: false
+    },
+    valueSystem: {
+      type: String as PropType<UnitSystemName>,
+      required: true
+    },
+    inline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data(): { selectedSystem: UnitSystemName } {
+    return {
+      selectedSystem: 'imperial' as UnitSystemName
+    }
+  },
+  computed: {
+    unitConfig(): UnitConfig {
+      return unitPairs[this.unitPair]
+    },
+    formattedValue(): string {
+      // Display the value as-is if it is in the requested unit, otherwise convert it.
+      let selectedValue
+
+      if (this.secondValue) {
+        selectedValue = this.valueSystem === this.selectedSystem ? this.value : this.secondValue
+      } else {
+        selectedValue =
+          this.valueSystem === this.selectedSystem
+            ? this.value
+            : this.value * this.unitConfig[this.valueSystem].toOther
+      }
+
+      // By default, show values with the same precision as the format they are provided in.
+      const decimals = this.value.toString().split('.')[1]?.length || 0
+      return selectedValue.toLocaleString('en-US', {
+        minimumFractionDigits: decimals,
+        maximumFractionDigits: decimals
+      })
+    }
+  },
+  mounted(): void {
+    if (window.localStorage && window.localStorage.getItem('selectedSystem') === 'metric') {
+      this.selectedSystem = 'metric'
+    }
+  },
+  methods: {
+    setSystem(): void {
+      // Will throw an error in Safari private browsing.
+      try {
+        if (window.localStorage) {
+          window.localStorage.setItem('selectedSystem', this.selectedSystem)
+        }
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+})
+</script>
+<style lang="scss">
+.BaseUnitToggle {
+  .unit {
+    // - Make the clickable areas much bigger than they appear for ease of interaction.
+    // - Hide the un-selected units from text selection, so copy-pasted text shows the correct unit.
+    @apply inline-block pt-3 pb-2 px-1 -my-2 -mx-1 leading-relaxed select-none;
+
+    // Make the units dimmer than the numbers, regardless of which color it’s displayed with.
+    --text-opacity: 0.84;
+  }
+
+  label:first-of-type .unit {
+    @apply pl-3 -ml-3;
+  }
+
+  label:last-of-type .unit {
+    @apply pr-3 -mr-3;
+  }
+
+  [type='radio']:focus + .unit {
+    @apply underline;
+  }
+
+  [type='radio']:checked + .unit {
+    @apply font-bold select-text;
+
+    --text-opacity: 1;
+  }
+}
+</style>

package/src/components/BaseVideo/BaseVideo.stories.js

@@ -0,0 +1,31 @@
+import BaseVideo from './BaseVideo.vue'
+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'
+
+export default {
+  title: 'Components/Base/BaseVideo',
+  component: BaseVideo,
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BaseVideoData = {
+  duration: '8',
+  file: videoMp4,
+  fileExtension: 'mp4',
+  fileOgg: 'http://127.0.0.1:9000/media/media/NASA-Mars-Helicopter-IngenuityAnimations-7sec.ogv', // no webpack loader for ogg files
+  fileWebm: videoWebm,
+  height: null,
+  id: '1',
+  sources:
+    "[{'src': 'http://127.0.0.1:9000/media/media/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4', 'type': 'video/mp4', 'size': 2014406}, {'src': 'http://127.0.0.1:9000/media/media/NASA-Mars-Helicopter-IngenuityAnimations-7sec.ogv', 'type': 'video/ogg', 'size': 2625393}, {'src': 'http://127.0.0.1:9000/media/media/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm', 'type': 'video/webm', 'size': 1706500}]",
+  title: 'Seals, Sea Lions, and Satellites',
+  type: '',
+  width: null
+}
+
+export const Base = {
+  args: {
+    data: BaseVideoData
+  }
+}

package/src/components/BaseVideo/BaseVideo.vue

@@ -0,0 +1,73 @@
+<template>
+  <div
+    v-if="data"
+    class="BaseVideo"
+  >
+    <BaseImagePlaceholder
+      aspect-ratio="16:9"
+      dark-mode
+    >
+      <video
+        :width="data.width"
+        :height="data.height"
+        :loop="autoplay"
+        :muted="autoplay"
+        :playsinline="autoplay"
+        :autoplay="autoplay"
+        :controls="!autoplay"
+      >
+        <template v-if="data.fileWebm">
+          <source
+            :src="data.fileWebm"
+            type="video/webm"
+          />
+        </template>
+        <template v-if="data.file">
+          <source
+            :src="data.file"
+            type="video/mp4"
+          />
+        </template>
+        <template v-if="data.fileOgg">
+          <source
+            :src="data.fileOgg"
+            type="video/ogg"
+          />
+        </template>
+        <p>Your browser cannot play the provided video file(s).</p>
+      </video>
+    </BaseImagePlaceholder>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+
+export default defineComponent({
+  name: 'BaseVideo',
+  components: {
+    BaseImagePlaceholder
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    },
+    autoplay: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.BaseVideo {
+  video {
+    min-width: 100%;
+    left: 0;
+    right: 0;
+    max-height: 901px;
+  }
+}
+</style>

package/src/components/BlockAnchor/BlockAnchor.vue

@@ -0,0 +1,38 @@
+<template>
+  <span
+    v-if="data && data.anchorId"
+    :id="data.anchorId"
+    class="BlockAnchor"
+  ></span>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BlockAnchor',
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+// makes sure anchor links align with navigation's fixed overlay
+.BlockAnchor {
+  &::before {
+    @apply block invisible pointer-events-none;
+
+    content: ' ';
+    margin-top: -83px;
+    height: 83px;
+    @screen lg {
+      margin-top: -182px;
+      height: 182px;
+    }
+  }
+}
+</style>

package/src/components/BlockAudio/BlockAudio.stories.js

@@ -0,0 +1,29 @@
+import BlockAudio from './BlockAudio.vue'
+
+export default {
+  title: 'Components/Blocks/BlockAudio',
+  component: BlockAudio,
+  excludeStories: /.*Data$/
+}
+
+// shared data
+export const BlockAudioData = {
+  uploadedMedia: {
+    collection: {
+      id: '1',
+      name: 'Root',
+      path: '0001'
+    },
+    createdAt: '2020-12-10T07:38:30.951546+00:00',
+    file: 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3',
+    fileExtension: 'mp3',
+    fileOgg: '',
+    id: '1',
+    sources:
+      "[{'src': 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3', 'type': 'audio/mpeg'}]",
+    thumbnail: '',
+    title: 'audio file',
+    type: 'audio'
+  }
+}
+export const Base = { name: 'BlockAudio', args: { data: BlockAudioData } }

package/src/components/BlockAudio/BlockAudio.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="BlockAudio">
+    <LayoutHelper
+      v-if="data"
+      indent="col-2"
+    >
+      <div
+        class="bg-gray-dark flex flex-row justify-start w-full max-h-48 bg-gradient-to-b lg:bg-gradient-to-l from-transparent lg:from-transparent-w50 to-black lg:to-transparent-black-75"
+      >
+        <BaseImagePlaceholder
+          v-if="data.thumbnailImage && data.thumbnailImage.src"
+          class="w-16 sm:w-24 lg:w-48 flex-shrink-0 BlockAudio-thumbnail"
+          aspect-ratio="1:1"
+        >
+          <BaseImage
+            object-fit-class="cover"
+            :src="data.thumbnailImage.src.url"
+            :width="data.thumbnailImage.src.width"
+            :height="data.thumbnailImage.src.height"
+            :alt="data.thumbnailImage.alt"
+          />
+        </BaseImagePlaceholder>
+
+        <div
+          v-if="data.uploadedMedia"
+          class="mr-auto w-full flex flex-col pt-2.5 px-3.5 sm:px-5 justify-center"
+        >
+          <BaseAudio :file="data.uploadedMedia.file" />
+        </div>
+        <!-- <audio controls>
+          <template v-if="data.fileOgg">
+            <source :src="data.fileOgg" type="audio/ogg" />
+          </template>
+          <template v-if="data.file">
+            <source :src="data.file" type="audio/mpeg" />
+          </template>
+          <p>Your browser cannot play the provided audio file(s).</p>
+        </audio> -->
+      </div>
+    </LayoutHelper>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import BaseAudio from './../BaseAudio/BaseAudio.vue'
+import LayoutHelper from './../LayoutHelper/LayoutHelper.vue'
+
+export default defineComponent({
+  name: 'BlockAudio',
+  components: {
+    BaseAudio,
+    LayoutHelper,
+    BaseImage,
+    BaseImagePlaceholder
+  },
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.BlockAudio {
+  max-height: 480px;
+
+  .BlockAudio-thumbnail {
+    @apply hidden;
+    @media only screen and (min-width: 345px) {
+      @apply block;
+    }
+  }
+}
+</style>

package/src/components/BlockCard/BlockCard.stories.js

@@ -0,0 +1,24 @@
+import BlockCard from './BlockCard.vue'
+
+export default {
+  title: 'Components/Blocks/BlockCard',
+  component: BlockCard,
+  excludeStories: /.*Data$/
+}
+
+export const BlockCardData = {
+  type: 'Factoid',
+  title: 'Nimble Limbs',
+  text: 'The robot has four limbs, each with seven degrees of freedom.',
+  image: {
+    alt: 'Fourth image',
+    src: {
+      height: 400,
+      url: 'https://picsum.photos/800/400',
+      width: 800
+    },
+    srcSet: 'https://picsum.photos/400/200 320w, https://picsum.photos/800/400 1024w'
+  }
+}
+
+export const Item = { name: 'BlockCard', args: BlockCardData }