@explorer-1/vue 0.0.0

package/src/components/BaseLink/BaseLink.vue

@@ -0,0 +1,227 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
+
+interface Variants {
+  [name: string]: string
+}
+
+export const variants: Variants = {
+  primary: 'text-subtitle text-action can-hover:hover:text-action-dark',
+  secondary: 'text-subtitle text-action can-hover:hover:text-action-dark',
+  default: '-default underline text-action can-hover:hover:text-action-dark',
+  none: ''
+}
+export const primaryColorVariants: Variants = {
+  primary: 'text-subtitle text-primary can-hover:hover:text-primary-dark',
+  secondary: 'text-subtitle text-primary can-hover:hover:text-primary-dark',
+  default: '-default underline text-primary can-hover:hover:text-primary-dark',
+  none: ''
+}
+
+export default defineComponent({
+  // this component is useful when you need a link that can either be an 'a' or router link
+  // falls back to a <div> if no url is provided
+  name: 'BaseLink',
+  components: {
+    MixinAnimationCaret
+  },
+  props: {
+    variant: {
+      type: String,
+      required: false,
+      default: 'default',
+      validator: (prop: string): boolean => Object.keys(variants).includes(prop)
+    },
+    to: {
+      type: [String, Object],
+      default: undefined
+    },
+    exact: {
+      type: Boolean,
+      default: false
+    },
+    href: {
+      type: String,
+      default: undefined
+    },
+    title: {
+      type: String,
+      default: undefined
+    },
+    ariaLabel: {
+      type: String,
+      default: ''
+    },
+    linkClass: {
+      type: String,
+      default: ''
+    },
+    // this will always override the target
+    target: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    // if external links should open in a new window
+    externalTargetBlank: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // the 'primary' variant will always have the caret
+    caret: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // Class applied to the overall MixinAnimationCaret component
+    caretWrapperClass: {
+      type: String,
+      default: ''
+    },
+    // Class applied to the caret itself
+    caretClass: {
+      type: String,
+      default: ''
+    },
+    // if caret should be displayed inline with text
+    caretInline: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // to customize the caret color. also works with group-hover
+    caretColor: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    caretMarginLeft: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    usePrimaryColor: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['linkClicked', 'specificLinkClicked'],
+  computed: {
+    computedVariants(): Variants {
+      if (this.usePrimaryColor) {
+        return primaryColorVariants
+      }
+      return variants
+    },
+    computedClass(): string {
+      let classes = this.computedVariants[this.variant]
+      if (this.to || this.href) {
+        classes = classes + ' cursor-pointer'
+      }
+      if (this.linkClass) {
+        classes = classes + ' ' + this.linkClass
+      }
+      return classes
+    },
+    theTarget(): string | undefined {
+      if (this.target) {
+        return this.target
+      } else if (this.href && this.externalTargetBlank) {
+        return '_blank'
+      }
+      return undefined
+    },
+    theRel(): string | undefined {
+      if (this.theTarget === '_blank') {
+        return 'noopener'
+      }
+      return undefined
+    }
+  },
+  methods: {
+    clickEvent() {
+      this.$root?.$emit('linkClicked')
+      this.$emit('specificLinkClicked')
+    }
+  }
+})
+</script>
+<template>
+  <div>
+    <!-- annoyingly repetive due to complexities around `to` and @click.native -->
+    <nuxt-link
+      v-if="to"
+      class="group"
+      :class="computedClass"
+      :to="to"
+      :target="theTarget"
+      :rel="theRel"
+      :aria-label="ariaLabel"
+      :title="title"
+      :exact="exact"
+      @click="clickEvent()"
+    >
+      <template v-if="caretInline && caret">
+        <MixinAnimationCaret
+          inline
+          :class="caretWrapperClass"
+          :arrow-class="caretClass"
+          :color="caretColor"
+          :margin-left="caretMarginLeft"
+        >
+          <slot></slot>
+        </MixinAnimationCaret>
+      </template>
+      <MixinAnimationCaret
+        v-else-if="variant === 'primary' || caret"
+        :class="caretWrapperClass"
+        :arrow-class="caretClass"
+        :color="caretColor"
+        :margin-left="caretMarginLeft"
+      >
+        <slot></slot>
+      </MixinAnimationCaret>
+      <template v-else>
+        <slot></slot>
+      </template>
+    </nuxt-link>
+    <a
+      v-else-if="href"
+      :href="href"
+      class="group"
+      :class="computedClass"
+      :target="theTarget"
+      :rel="theRel"
+      :aria-label="ariaLabel"
+      :title="title"
+      @click="clickEvent()"
+    >
+      <template v-if="caretInline && caret">
+        <MixinAnimationCaret
+          inline
+          :class="caretWrapperClass"
+          :arrow-class="caretClass"
+          :color="caretColor"
+          :margin-left="caretMarginLeft"
+        >
+          <slot></slot>
+        </MixinAnimationCaret>
+      </template>
+      <MixinAnimationCaret
+        v-else-if="variant === 'primary' || caret"
+        :class="caretWrapperClass"
+        :arrow-class="caretClass"
+        :color="caretColor"
+        :margin-left="caretMarginLeft"
+      >
+        <slot></slot>
+      </MixinAnimationCaret>
+      <template v-else>
+        <slot></slot>
+      </template>
+    </a>
+  </div>
+</template>

package/src/components/BaseModal/BaseModal.stories.js

@@ -0,0 +1,90 @@
+import BaseButton from './../BaseButton/BaseButton.vue'
+import BaseModal from './BaseModal.vue'
+import BaseModalDialog from './BaseModalDialog.vue'
+
+export default {
+  title: 'Components/Base/BaseModal',
+  component: BaseModal,
+  argTypes: {
+    bgClose: { control: { type: 'boolean' } }
+  },
+  excludeStories: /.*Data$/
+}
+
+// templates
+const BaseModalTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseModal },
+  template: `<BaseModal :bg-close="bgClose"><div>Modal content. Lorem ipsum dolor sit amet.</div></BaseModal>`
+})
+const BaseModalWithTriggerTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseModal, BaseButton },
+  template: `<BaseModal :bg-close="bgClose">
+    <template #modalTrigger>
+      <BaseButton variant="secondary">
+        Custom Trigger
+      </BaseButton>
+    </template>
+    <div>Modal content. Lorem ipsum dolor sit amet.</div>
+  </BaseModal>`
+})
+const BaseModalNested = (args) => ({
+  props: Object.keys(args),
+  components: { BaseModal, BaseButton },
+  template: `
+  <BaseModal :bg-close="bgClose">
+    <div>First Modal</div>
+    <BaseModal :bg-close="bgClose">
+      <template #modalTrigger>
+        <BaseButton variant="secondary" :compact="true">
+          Open Another
+        </BaseButton>
+      </template>
+      <div>Second Modal</div>
+      <BaseModal :bg-close="bgClose">
+      <template #modalTrigger>
+        <BaseButton variant="secondary" :compact="true">
+          Open Another
+        </BaseButton>
+      </template>
+      <div>Third Modal</div>
+      </BaseModal>
+    </BaseModal>
+  </BaseModal>`
+})
+
+const BaseModalDialogTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseModalDialog },
+  template: `<BaseModalDialog><template v-if="modalHeaderSlot" #modalHeader>{{ modalHeaderSlot }}</template><div>{{ modalContentSlot }}</div></BaseModalDialog>`
+})
+
+// data
+export const BaseModalData = {
+  bgClose: true
+}
+export const BaseModalDialogData = {
+  modalHeaderSlot: 'Modal Header',
+  modalContentSlot:
+    'Modal content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu arcu lacinia, fringilla dui sed, vestibulum augue. Nunc quis leo neque. Pellentesque tempor magna risus, vitae volutpat lorem mattis nec. '
+}
+
+// stories
+export const Default = BaseModalTemplate.bind({})
+Default.args = { ...BaseModalData }
+
+export const CustomTrigger = BaseModalWithTriggerTemplate.bind({})
+CustomTrigger.args = { ...BaseModalData }
+
+export const Nested = BaseModalNested.bind({})
+Nested.args = { ...BaseModalData }
+
+export const Dialog = BaseModalDialogTemplate.bind({})
+Dialog.args = { ...BaseModalDialogData, modalHeaderSlot: '' }
+
+export const DialogWithHeader = BaseModalDialogTemplate.bind({})
+DialogWithHeader.args = {
+  ...BaseModalDialogData,
+  modalHeaderSlot: 'Modal Header'
+}

package/src/components/BaseModal/BaseModal.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <span @click="openModal()">
+      <slot name="modalTrigger"> Open Modal </slot>
+    </span>
+    <BaseModalDialog
+      v-show="showModal"
+      :bg-close="bgClose"
+      @close="closeModal()"
+    >
+      <template #modalHeader>
+        <slot name="modalHeader"></slot>
+      </template>
+      <slot></slot>
+    </BaseModalDialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseModalDialog from './../BaseModal/BaseModalDialog.vue'
+
+export default defineComponent({
+  name: 'BaseModal',
+  components: {
+    BaseModalDialog
+  },
+  props: {
+    bgClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      showModal: false
+    }
+  },
+  methods: {
+    openModal() {
+      this.showModal = true
+      // prevents background scroll
+      document.body.classList.add('overflow-hidden')
+    },
+    closeModal() {
+      this.showModal = false
+      document.body.classList.remove('overflow-hidden')
+    }
+  }
+})
+</script>
+<style lang="scss" scoped>
+// styles go here
+</style>

package/src/components/BaseModal/BaseModalDialog.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="bg-gray-dark fixed top-0 left-0 z-50 flex w-full h-full overflow-auto bg-opacity-75"
+    @click="bgCloseModal"
+  >
+    <div
+      class="relative w-full max-w-xl p-8 m-auto bg-white"
+      @click.stop
+    >
+      <BaseHeading
+        v-if="$slots.modalHeader"
+        level="h2"
+        size="h3"
+        class="border-gray-light-mid pb-4 mb-4 border-b"
+      >
+        <slot name="modalHeader"></slot>
+      </BaseHeading>
+      <slot><div>Default content</div></slot>
+      <div class="text-right">
+        <BaseButton
+          class="mt-4"
+          @click="closeModal"
+        >
+          close
+        </BaseButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import BaseHeading from './../BaseHeading/BaseHeading.vue'
+
+export default defineComponent({
+  name: 'BaseModalDialog',
+  components: {
+    BaseButton,
+    BaseHeading
+  },
+  props: {
+    bgClose: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close')
+    },
+    bgCloseModal() {
+      if (this.bgClose) {
+        this.closeModal()
+      }
+    }
+  }
+})
+</script>

package/src/components/BasePlaceholder/BasePlaceholder.stories.js

@@ -0,0 +1,29 @@
+import BasePlaceholder from './BasePlaceholder.vue'
+
+export default {
+  title: 'Components/Base/BasePlaceholder',
+  component: BasePlaceholder,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component: `An animated loading component frequently used as a placeholder for <a href="/story/components-search-searchresultcard--standard-result" target="_blank">SearchResultCard</a>`
+      }
+    }
+  }
+}
+
+// shared data
+const BasePlaceholderData = {}
+
+// templates
+const BasePlaceholderTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BasePlaceholder },
+  template: `<div><BasePlaceholder /></div>`
+})
+
+export const Base = BasePlaceholderTemplate.bind({})
+Base.storyName = 'BasePlaceholder' // single story hoisting
+Base.args = { ...BasePlaceholderData }

package/src/components/BasePlaceholder/BasePlaceholder.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="BasePlaceholder">
+    <div class="border-bottom grid w-full grid-cols-12 mb-10">
+      <div class="col-span-9 pr-5">
+        <div class="bg-gray-light-mid animate-loading w-64 h-4 rounded-lg"></div>
+        <div class="bg-gray-light-mid animate-loading w-56 h-4 mt-5 rounded-lg"></div>
+        <div class="bg-gray-light-mid animate-loading pr-14 w-full h-4 mt-6 rounded-lg"></div>
+        <div class="bg-gray-light-mid animate-loading pr-14 w-5/6 h-4 mt-3 rounded-lg"></div>
+        <div class="bg-gray-light-mid animate-loading pr-14 w-1/2 h-4 mt-3 rounded-lg"></div>
+        <div class="bg-gray-light-mid animate-loading pr-14 w-30 h-4 mt-4 rounded-lg"></div>
+      </div>
+      <div class="flex justify-end col-span-3">
+        <div class="animate-loading h-38 w-38 rounded-none"></div>
+      </div>
+    </div>
+    <hr class="text-gray-light-mid mb-10" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'BasePlaceholder'
+})
+</script>
+
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BasePlaceholder';
+</style>

package/src/components/BaseRadioGroup/BaseRadioGroup.stories.mdx

@@ -0,0 +1,68 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import BaseRadioGroup from './BaseRadioGroup.vue'
+
+<Meta
+  title="Components/Base/BaseRadioGroup"
+  component={BaseRadioGroup}
+  parameters={{ viewMode: 'docs' }}
+/>
+
+export const BaseRadioGroupData = {
+  options: [
+    {
+      id: 'breaking',
+      title: 'Breaking News',
+      text: 'All JPL News delivered immediately'
+    },
+    {
+      id: 'daily',
+      title: 'Daily News',
+      text: 'Single Daily JPL News summary'
+    },
+    {
+      id: 'weekly',
+      title: 'Weekly News',
+      text: 'Single Weekly JPL News summary'
+    },
+    {
+      id: 'monthly',
+      title: 'Monthly News',
+      text: 'Monthly Digest for JPL News'
+    }
+  ],
+  group: 'email',
+  preselected: 'breaking',
+  heading: 'JPL Forms',
+  subHeading: 'Choose how frequently you want to receive updates (opt out anytime):',
+  title: 'Email Groups'
+}
+
+export const BaseRadioGroupTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { BaseRadioGroup },
+  template: `<BaseRadioGroup :options="options" :group="group" :preselected="preselected" :heading="heading" :sub-heading="subHeading" :title="title"
+></BaseRadioGroup>`
+})
+
+# Base Radio Group
+
+## Usage
+
+The BaseRadioGroup component is expected to contain an array of options and a grouping name with the goal of selecting a single option.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={BaseRadioGroupData}
+  >
+    {BaseRadioGroupTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable for={BaseRadioGroup} />
+
+## Example data
+
+<code language="json">{JSON.stringify(BaseRadioGroupData, null, 2)}</code>

package/src/components/BaseRadioGroup/BaseRadioGroup.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="BaseRadioGroup">
+    <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="flex items-center"
+        >
+          <input
+            :id="`${group}_${option.id}`"
+            :aria-describedby="option.text ? `${group}_${option.id}_description` : undefined"
+            :name="option.name"
+            :alt="option.alt"
+            :value="option.value"
+            type="radio"
+            :checked="option.id === preselected"
+            class="h-5 w-5"
+          />
+          <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>
+    </fieldset>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+import type { FormOption } from '../../interfaces'
+export default defineComponent({
+  name: 'BaseRadioGroup',
+  props: {
+    group: {
+      type: String,
+      default: null,
+      required: false
+    },
+    preselected: {
+      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>