@explorer-1/vue 0.0.0

package/src/components/BaseHeading/BaseHeading.stories.js

@@ -0,0 +1,75 @@
+import BaseHeading from './BaseHeading.vue'
+import IconArrows from '@explorer-1/vue/src/components/Icons/IconArrows.vue'
+import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue'
+import IconUser from '@explorer-1/vue/src/components/Icons/IconUser.vue'
+
+export default {
+  title: 'Components/Base/BaseHeading',
+  component: BaseHeading,
+  argTypes: {
+    size: {
+      type: { name: 'string', required: true },
+      description: 'The display size of the heading.',
+      control: { type: 'select' },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    },
+    level: {
+      type: { name: 'string', required: false },
+      description:
+        'The semantic heading tag if different from the display size (ex: a heading looks like an `h4`, but semantically, it is an `h1`.',
+      control: { type: 'select' },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    }
+  },
+  parameters: {
+    slots: {
+      default: 'Default slot content'
+    },
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'Base component for headings. Allows for retaining semantic markup while varying the text size.'
+      }
+    }
+  }
+}
+
+// stories
+export const H1 = {
+  name: 'H1',
+  args: { size: 'h1', level: 'h1', default: 'Heading 1' }
+}
+
+export const H2 = {
+  name: 'H2',
+  args: { size: 'h2', level: 'h2', default: 'Heading 2' }
+}
+export const H3 = {
+  name: 'H3',
+  args: { size: 'h3', level: 'h3', default: 'Heading 3' }
+}
+export const H4 = {
+  name: 'H4',
+  args: { size: 'h4', level: 'h4', default: 'Heading 4' }
+}
+export const H5 = {
+  name: 'H5',
+  args: { size: 'h5', level: 'h5', default: 'Heading 5' }
+}
+export const H6 = {
+  name: 'H6',
+  args: { size: 'h6', level: 'h6', default: 'Heading 6' }
+}
+
+const TemplateHeadingsWithIcons = (args) => ({
+  components: { BaseHeading, IconArrows, IconLocation, IconUser },
+  setup() {
+    return { args }
+  },
+  template:
+    '<div><BaseHeading v-bind="args"><IconArrows class="inline" /> {{ args.default }}</BaseHeading><BaseHeading class="mt-8" v-bind="args"><IconLocation class="inline" /> {{ args.default }}</BaseHeading></div><BaseHeading class="mt-8" v-bind="args"><IconUser class="inline" /> {{ args.default }}</BaseHeading>'
+})
+
+export const HeadingsWithIcons = TemplateHeadingsWithIcons.bind({})
+HeadingsWithIcons.args = { size: 'h1', level: 'h1', default: 'Heading 1' }

package/src/components/BaseHeading/BaseHeading.vue

@@ -0,0 +1,58 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { Attributes } from './../../interfaces'
+import type { PropType } from 'vue'
+
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+const headings: Attributes = {
+  h1: 'text-h1',
+  h2: 'text-h2',
+  h3: 'text-h3',
+  h4: 'text-h4',
+  h5: 'text-h5',
+  h6: 'text-h6'
+}
+
+export default defineComponent({
+  name: 'BaseHeading',
+  props: {
+    level: {
+      type: (String as PropType<HeadingLevel>) || null,
+      required: false,
+      default: 'h2',
+      validator: (prop: string): boolean => Object.keys(headings).includes(prop)
+    },
+    size: {
+      type: String as PropType<HeadingLevel>,
+      required: false,
+      default: 'h2',
+      validator: (prop: string): boolean => Object.keys(headings).includes(prop)
+    }
+  },
+  computed: {
+    computedTag(): string {
+      if (this.level) {
+        return this.level
+      } else {
+        return this.size
+      }
+    },
+    computedClass(): string {
+      if (this.size) {
+        return headings[this.size]
+      } else {
+        return ''
+      }
+    }
+  }
+})
+</script>
+<template>
+  <component
+    :is="computedTag"
+    :class="computedClass"
+  >
+    <slot />
+  </component>
+</template>

package/src/components/BaseImage/BaseImage.stories.ts

@@ -0,0 +1,52 @@
+import BaseImage, { objectFitClasses } from './BaseImage.vue'
+export default {
+  title: 'Components/Base/BaseImage',
+  component: BaseImage,
+  excludeStories: /.*Data$/,
+  argTypes: {
+    objectFitClass: {
+      description:
+        'Use Tailwind CSS object fit classes to specify how the image will scale within `BaseImagePlaceholder`',
+      control: { type: 'select' },
+      options: Object.keys(objectFitClasses)
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The BaseImage component is a simple `<img />` tag wrapped in a `<div>` and is used to render an image with object-fit classes and lazy loading properties.'
+      }
+    }
+  }
+}
+
+export const BaseImageData = {
+  src: 'https://picsum.photos/800/400',
+  srcset: 'https://picsum.photos/800/400 800w, ',
+  alt: 'Alt text for image',
+  width: 800,
+  height: 400,
+  imageClass: '',
+  objectFitClass: 'contain'
+}
+// stories
+export const Default = {
+  args: BaseImageData,
+  decorators: [() => ({ template: '<div class="max-w-full"><story /></div>' })]
+}
+
+export const LazyLoading = {
+  args: BaseImageData,
+  decorators: [
+    () => ({
+      template:
+        '<div class="max-w-full"><div style="height:3500px">Scroll down and watch the network tab ⬇️</div><div id="storyRoot"><story /></div></div>'
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyRoot'
+    }
+  }
+}

package/src/components/BaseImage/BaseImage.vue

@@ -0,0 +1,120 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
+export type ImageLoader = 'lazy' | 'eager' | undefined
+
+interface ObjectFitClasses {
+  [name: string]: string
+}
+
+export const objectFitClasses: ObjectFitClasses = {
+  none: 'object-none',
+  contain: 'object-contain',
+  cover: 'object-cover',
+  fill: 'object-fill',
+  scaleDown: 'object-scale-down'
+}
+
+export default defineComponent({
+  name: 'BaseImage',
+  props: {
+    imageClass: {
+      type: String,
+      required: false
+    },
+    objectFitClass: {
+      type: String,
+      required: false,
+      default: 'contain',
+      validator: (prop: string): boolean => Object.keys(objectFitClasses).includes(prop)
+    },
+    src: {
+      type: String,
+      required: true
+    },
+    srcset: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    alt: {
+      type: String
+    },
+    width: {
+      type: [Number, String]
+    },
+    height: {
+      type: [Number, String]
+    },
+    loading: {
+      type: String as PropType<ImageLoader>,
+      required: false,
+      default: 'lazy'
+    }
+  },
+  data() {
+    return {
+      lazyNative: true
+    }
+  },
+  computed: {
+    computedClass(): string {
+      let classes = ''
+      if (this.imageClass) {
+        classes = classes + ' ' + this.imageClass
+      }
+      if (this.objectFitClass) {
+        classes = classes + ' ' + objectFitClasses[this.objectFitClass]
+      }
+      if (!this.lazyNative) {
+        classes = classes + ' lazyload'
+      }
+      return classes
+    }
+  },
+  mounted() {
+    this.featureDetectImageLazyLoad()
+  },
+  methods: {
+    featureDetectImageLazyLoad() {
+      if ('loading' in HTMLImageElement.prototype) {
+        const image = this.$refs.BaseImage ? (this.$refs.BaseImage as HTMLImageElement) : null
+        this.lazyNative = true
+        // reassign dataset attributes
+        if (image && image.dataset.src) {
+          image.src = image.dataset.src
+        }
+        if (image && image.dataset.srcset) {
+          image.srcset = image.dataset.srcset
+        }
+      } else {
+        this.lazyNative = false
+      }
+    },
+    imageFailed() {
+      console.log('Image failed to load.')
+    }
+  }
+})
+</script>
+<template>
+  <div>
+    <img
+      v-if="src"
+      ref="BaseImage"
+      class="BaseImage"
+      :class="computedClass"
+      :data-src="src"
+      :data-srcset="srcset"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      :loading="loading"
+      @error="imageFailed"
+    />
+  </div>
+</template>
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BaseImage';
+</style>

package/src/components/BaseImageCaption/BaseImageCaption.stories.js

@@ -0,0 +1,27 @@
+import BaseImageCaption from './BaseImageCaption.vue'
+export default {
+  title: 'Components/Base/BaseImageCaption',
+  component: BaseImageCaption,
+  excludeStories: /.*Data$/,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Caption text used with both images and videos.'
+      }
+    }
+  }
+}
+
+// data
+export const BaseImageCaptionData = {
+  caption:
+    '<p>Aliquam finibus accumsan dapibus. In <a href="#">sagittis et sapien</a> nec vehicula. Suspendisse euismod consequat risus, vel dignissim elit scelerisque sed. Nullam elit ipsum, suscipit ut quam et, molestie aliquam leo.</p>',
+  credit: 'NASA/JPL',
+  detailUrl: '/image-detail/slug/'
+}
+
+export const Default = {
+  args: {
+    data: BaseImageCaptionData
+  }
+}

package/src/components/BaseImageCaption/BaseImageCaption.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { ImageObject } from '../../interfaces'
+import BaseLink from './../BaseLink/BaseLink.vue'
+
+export default defineComponent({
+  name: 'BaseImageCaption',
+  components: {
+    BaseLink
+  },
+  props: {
+    data: {
+      type: Object as PropType<Partial<ImageObject>>,
+      required: true,
+      default: undefined
+    }
+  }
+})
+</script>
+<template>
+  <div
+    v-if="data"
+    class="BaseImageCaption text-body-sm"
+  >
+    <div class="inline mr-2">
+      <div
+        class="the-caption-text inline"
+        v-html="data.caption"
+      ></div>
+      <span
+        v-if="data.credit"
+        class="inline"
+      >
+        Credit: {{ data.credit }}
+      </span>
+    </div>
+    <BaseLink
+      v-if="data.detailUrl"
+      class="inline-block"
+      variant="default"
+      :to="data.detailUrl"
+    >
+      Full Image Details
+    </BaseLink>
+  </div>
+</template>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BaseImageCaption';
+</style>

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js

@@ -0,0 +1,73 @@
+import BaseImage from './BaseImage.vue'
+import BaseImagePlaceholder, {
+  aspectRatios
+} from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+export default {
+  title: 'Components/Base/BaseImagePlaceholder',
+  component: BaseImagePlaceholder,
+  excludeStories: /.*Data$/,
+  decorators: () => ({
+    template: '<div class="w-2/3"><story /></div>'
+  }),
+  tags: ['autodocs'],
+  parameters: {
+    slots: {
+      default: {
+        description: 'Slot for BaseImage',
+        components: { BaseImage },
+        template: `<BaseImage :object-fit-class="args.BaseImageProps.objectFitClass" :loading="args.BaseImageProps.loading" :src="args.BaseImageProps.src" :srcset="args.BaseImageProps.srcset" :alt="args.BaseImageProps.alt" :width="args.BaseImageProps.width" :height="args.BaseImageProps.height" />`
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'Aspect ratio CSS class. View dropdown to see all options. More classes can be added in `/src/scss/_aspect-ratios.scss`'
+      }
+    }
+  },
+  argTypes: {
+    aspectRatio: {
+      control: { type: 'select' },
+      options: Object.keys(aspectRatios)
+    },
+    responsiveAspectRatio: {
+      control: { type: 'text' }
+    }
+  }
+}
+
+// data
+export const BaseImagePlaceholderData = {
+  aspectRatio: '12:9',
+  darkMode: true,
+  transparentMode: false
+}
+
+export const WithImage = {
+  args: {
+    ...BaseImagePlaceholderData,
+    BaseImageProps: {
+      src: 'https://picsum.photos/1200/900',
+      srcset: 'https://picsum.photos/1200/900 1200w,',
+      alt: 'alt text for image',
+      width: '1200',
+      height: '900',
+      objectFitClass: 'contain',
+      loading: 'lazy'
+    }
+  }
+}
+export const NoImage = {
+  args: {
+    ...BaseImagePlaceholderData,
+    BaseImageProps: {
+      src: '',
+      srcset: '',
+      alt: '',
+      width: '',
+      height: '',
+      objectFitClass: 'scaleDown',
+      loading: ''
+    }
+  }
+}

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue

@@ -0,0 +1,90 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+interface AspectRatios {
+  [name: string]: string
+}
+
+export const aspectRatios: AspectRatios = {
+  none: 'aspect-ratio-none',
+  portrait: 'aspect-ratio-four-five',
+  square: 'aspect-ratio-square',
+  '1:1': 'aspect-ratio-one-one',
+  '2:1': 'aspect-ratio-two-one',
+  '2:3': 'aspect-ratio-two-three',
+  '3:2': 'aspect-ratio-three-two',
+  '4:3': 'aspect-ratio-four-three',
+  '4:5': 'aspect-ratio-four-five',
+  '7:8': 'aspect-ratio-seven-eight',
+  '8:7': 'aspect-ratio-eight-seven',
+  '9:16': 'aspect-ratio-nine-sixteen',
+  '12:9': 'aspect-ratio-twelve-nine',
+  '16:7': 'aspect-ratio-sixteen-seven',
+  '16:9': 'aspect-ratio-sixteen-nine',
+  '21:9': 'aspect-ratio-twentyone-nine'
+}
+
+export default defineComponent({
+  name: 'BaseImagePlaceholder',
+  props: {
+    darkMode: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    transparentMode: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    noLogo: {
+      type: Boolean,
+      default: false
+    },
+    aspectRatio: {
+      type: String,
+      default: 'none',
+      validator: (prop: string): boolean => Object.keys(aspectRatios).includes(prop)
+    },
+    responsiveAspectRatio: {
+      type: String,
+      required: false
+    }
+  },
+  computed: {
+    computedClass(): string {
+      let classes = ''
+      if (this.aspectRatio) {
+        classes = classes + aspectRatios[this.aspectRatio]
+      }
+      if (this.responsiveAspectRatio) {
+        classes = `${classes} ${this.responsiveAspectRatio}`
+      }
+      if (this.transparentMode) {
+        classes = classes + ' transparent-theme'
+      } else if (this.darkMode) {
+        classes = classes + ' dark-theme'
+      } else {
+        classes = classes + ' light-theme'
+      }
+      if (this.noLogo) {
+        classes = classes + ' no-logo'
+      }
+
+      return classes
+    }
+  }
+})
+</script>
+<template>
+  <div>
+    <div :class="'BaseImagePlaceholder ' + computedClass">
+      <slot></slot>
+      <slot name="lightbox"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@explorer-1/common/src/scss/components/BaseImagePlaceholder';
+</style>

package/src/components/BaseLightboxCloseButton/BaseLightboxCloseButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <button
+    ref="lightboxCloseButton"
+    aria-label="Close Lightbox"
+    class="BaseLightboxCloseButton text-5xl"
+    @click.prevent="clickHandler()"
+  >
+    <span class="icon">
+      <IconCloseLightbox />
+    </span>
+  </button>
+</template>
+
+<script lang="ts">
+// @ts-nocheck
+import { defineComponent } from 'vue'
+import IconCloseLightbox from './../Icons/IconCloseLightbox.vue'
+
+export default defineComponent({
+  name: 'BaseLightboxCloseButton',
+  components: {
+    IconCloseLightbox
+  },
+  mounted() {
+    this.focusButton()
+  },
+  methods: {
+    clickHandler() {
+      this.$emit('click')
+    },
+    focusButton() {
+      this.$refs.lightboxCloseButton.focus()
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.BaseLightboxCloseButton {
+  @apply bg-black z-50 px-px text-right w-full mb-auto;
+  @screen 2xl {
+    @apply w-auto -mr-20 -mt-5;
+  }
+}
+</style>

package/src/components/BaseLightboxOpenButton/BaseLightboxOpenButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    ref="LightboxOpenButton"
+    class="BaseLightboxOpenButton"
+    aria-label="Open in Lightbox"
+    @click.prevent="clickHandler()"
+  >
+    <button
+      aria-label="Open in Lightbox"
+      class="BaseButton -primary -icon-only"
+      @click.prevent="clickHandler()"
+    >
+      <span class="icon">
+        <IconExpand />
+      </span>
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import IconExpand from './../Icons/IconExpand.vue'
+
+export default defineComponent({
+  name: 'BaseLightboxOpenButton',
+  components: {
+    IconExpand
+  },
+  methods: {
+    clickHandler() {
+      this.$emit('click')
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.BaseLightboxOpenButton {
+  // scoped styles for Lightbox Opener button
+  @apply relative lg:absolute lg:inset-0 cursor-pointer z-10;
+
+  .BaseButton {
+    @apply -top-px -right-px absolute focus:outline-none  xl:text-xl inline-block;
+  }
+}
+</style>

package/src/components/BaseLink/BaseLink.stories.js

@@ -0,0 +1,47 @@
+import BaseLink, { variants } from './BaseLink.vue'
+export default {
+  title: 'Components/Base/BaseLink',
+  component: BaseLink,
+  parameters: {
+    slots: {
+      default: 'Default slot content'
+    }
+  },
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: Object.keys(variants)
+    }
+  },
+  excludeStories: /.*Data$/
+}
+
+// data
+export const BaseLinkData = {
+  variant: 'primary',
+  to: '/',
+  href: '/',
+  caret: false,
+  caretColor: 'text-primary',
+  default: 'Link Text'
+}
+
+// stories
+export const Primary = {
+  args: { ...BaseLinkData }
+}
+
+export const Secondary = {
+  args: { ...BaseLinkData, variant: 'secondary' }
+}
+
+export const DefaultBody = {
+  args: { ...BaseLinkData, variant: 'default' }
+}
+
+export const Unstyled = {
+  args: {
+    ...BaseLinkData,
+    variant: 'none'
+  }
+}