@explorer-1/vue 0.0.0

package/src/components/ShareButtonsEdu/ShareButtonsEdu.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+import IconDownload from './../Icons/IconDownload.vue'
+import IconLink from './../Icons/IconLink.vue'
+import IconShare from './../Icons/IconShare.vue'
+import IconSocialGoogleClassroom from './../Icons/IconSocialGoogleClassroom.vue'
+import IconSocialFacebook from './../Icons/IconSocialFacebook.vue'
+import IconSocialEmail from './../Icons/IconSocialEmail.vue'
+import IconSocialPinterest from './../Icons/IconSocialPinterest.vue'
+import IconSocialTwitter from './../Icons/IconSocialTwitter.vue'
+import { mixinCanonicalUrl } from '../../utils/mixins'
+
+interface ShareButtonsEduProps {
+  title: string
+  url: string
+  image?: string
+}
+
+// define props
+const props = defineProps<ShareButtonsEduProps>()
+
+// ref
+const isOpen = ref(false)
+const hasCopied = ref(false)
+
+// methods
+const copyUrl = async () => {
+  try {
+    await navigator.clipboard.writeText(props.url)
+    hasCopied.value = true
+  } catch (err) {
+    console.error('Failed to copy: ', err)
+  }
+}
+const toggle = () => {
+  isOpen.value = !isOpen.value
+  if (!isOpen.value) {
+    closeMenu()
+  }
+}
+const closeMenu = () => {
+  isOpen.value = false
+  hasCopied.value = false
+}
+
+const print = () => {
+  window.print()
+}
+
+// computed
+const encodedTitle = computed(() => {
+  return props.title ? encodeURIComponent(props.title) : undefined
+})
+
+const encodedURL = computed(() => {
+  return props.url ? encodeURIComponent(mixinCanonicalUrl(props.url)) : undefined
+})
+
+const facebookLink = computed(() => {
+  return `https://www.facebook.com/sharer.php?u=${encodedURL.value}`
+})
+const twitterLink = computed((): string => {
+  const handle = encodeURIComponent('NASAJPL_Edu')
+  return `https://twitter.com/share?url=${encodedURL.value}&text=${encodedTitle.value}&via=${handle}`
+})
+
+const pinterestLink = computed(() => {
+  return `http://pinterest.com/pin/create/button/?url=${encodedURL.value}&media=${props.image}&description=${encodedTitle.value}`
+})
+const mailLink = computed((): string => {
+  return `mailto:?body=${encodedTitle.value}:%20${encodedURL.value}&subject=${encodedTitle.value}`
+})
+
+const copyLinkText = computed(() => {
+  if (hasCopied.value) {
+    return 'Copied'
+  } else {
+    return 'Copy link'
+  }
+})
+const buttonClass = computed(() => {
+  return 'h-10 xl:h-11 !py-0 !px-3'
+})
+</script>
+<template>
+  <div class="ShareButtonsEdu relative flex flex-row items-start border-collapse">
+    <BaseButton
+      variant="social"
+      :class="buttonClass"
+      aria-label="Print"
+      compact
+      @click="print()"
+    >
+      <span class="flex flex-row flex-wrap-none items-center">
+        <IconDownload class="text-lg mr-2" />
+        <span class="text-sm">Print</span>
+      </span>
+    </BaseButton>
+    <div class="relative xl:flex">
+      <BaseButton
+        variant="social"
+        :class="`-ml-px ${buttonClass} ${isOpen ? '!bg-gray-light' : ''}`"
+        aria-label="Share"
+        compact
+        :aria-expanded="isOpen"
+        @click="toggle()"
+        @keydown.esc="toggle()"
+      >
+        <span class="flex flex-row flex-wrap-none items-start xl:items-center">
+          <IconShare class="text-lg mr-2" />
+          <span class="text-sm">Share…</span>
+        </span>
+      </BaseButton>
+      <Transition name="fade">
+        <div
+          v-if="isOpen"
+          v-click-outside="closeMenu"
+          class="share-buttons-list absolute left-0 xl:relative z-10 flex flex-col -ml-px -mt-px xl:m-0 border-action border xl:border-none xl:flex-row flex-wrap-none"
+        >
+          <BaseButton
+            variant="social"
+            aria-label="Copy"
+            @click="copyUrl()"
+            @keydown.esc="toggle()"
+          >
+            <IconLink class="text-lg mr-2" />
+            <span class="text-xs">{{ copyLinkText }}</span>
+          </BaseButton>
+
+          <BaseButton
+            variant="social"
+            :href="facebookLink"
+            aria-label="Share to Facebook"
+            target="_blank"
+            rel="noopener"
+            @keydown.esc="toggle()"
+          >
+            <IconSocialFacebook class="text-lg mr-2" />
+            <span class="text-xs">Facebook</span>
+          </BaseButton>
+
+          <BaseButton
+            variant="social"
+            :href="twitterLink"
+            aria-label="Share to X (Twitter)"
+            target="_blank"
+            rel="noopener"
+            @keydown.esc="toggle()"
+          >
+            <IconSocialTwitter class="text-lg mr-2" />
+            <span class="text-xs">X (Twitter)</span>
+          </BaseButton>
+
+          <BaseButton
+            variant="social"
+            :href="pinterestLink"
+            aria-label="Add to Pinterest"
+            target="_blank"
+            rel="noopener"
+            @keydown.esc="toggle()"
+          >
+            <IconSocialPinterest class="text-lg mr-2" />
+            <span class="text-xs">Pinterest</span>
+          </BaseButton>
+
+          <BaseButton
+            variant="social"
+            :href="mailLink"
+            aria-label="Share via Email"
+            target="_blank"
+            rel="noopener"
+            @keydown.esc="toggle()"
+          >
+            <IconSocialEmail class="text-lg mr-2" />
+            <span class="text-xs">Email</span>
+          </BaseButton>
+
+          <BaseButton
+            variant="social"
+            href="#"
+            aria-label="Google Classroom"
+            target="_blank"
+            rel="noopener"
+            @keydown.esc="toggle()"
+          >
+            <IconSocialGoogleClassroom class="text-lg mr-2" />
+            <span class="text-xs">Google Classroom</span>
+          </BaseButton>
+        </div>
+      </Transition>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+.ShareButtonsEdu {
+  .BaseButton {
+    @apply relative focus:z-20;
+    @include hover {
+      @apply z-20;
+    }
+  }
+  .share-buttons-list {
+    .BaseButton.-social {
+      @apply h-10 xl:h-11 py-0 px-2 lg:px-3 #{!important};
+      span.text-xs {
+        @apply whitespace-nowrap;
+      }
+      .label {
+        @apply justify-start xl:justify-center;
+      }
+    }
+  }
+}
+</style>

package/src/components/SkipLink/SkipLink.stories.js

@@ -0,0 +1,9 @@
+import SkipLink from './SkipLink.vue'
+
+export default {
+  title: 'WWW/Header & Footer/Elements/SkipLink',
+  component: SkipLink,
+  excludeStories: /.*Data$/
+}
+
+export const Default = {}

package/src/components/SkipLink/SkipLink.vue

@@ -0,0 +1,53 @@
+<template>
+  <!-- z-60 is to maintain visibility over NavDesktop -->
+  <div class="z-60 lg:left-auto lg:mr-20 absolute top-0 left-0 right-0 mt-4 text-center">
+    <BaseButton
+      variant="primary"
+      class="focus:not-sr-only sr-only"
+      compact
+      @click="handleClick()"
+    >
+      Skip to main content
+    </BaseButton>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseButton from './../BaseButton/BaseButton.vue'
+
+export default defineComponent({
+  name: 'SkipLink',
+  components: {
+    BaseButton
+  },
+  data(): {
+    main: HTMLElement | null
+  } {
+    return {
+      main: null
+    }
+  },
+  methods: {
+    // skip link inspired by https://github.com/wagtail/wagtail/blob/master/client/src/includes/initSkipLink.js
+    // gracefully handle focusing on the main element
+    handleBlur() {
+      // removes the tabindex after focus
+      if (this.main) {
+        this.main.removeAttribute('tabindex')
+        this.main.removeEventListener('blur', this.handleBlur)
+        this.main.removeEventListener('focusout', this.handleBlur)
+      }
+    },
+    handleClick() {
+      // update the main element each time
+      this.main = document.querySelector('main')
+      if (this.main) {
+        this.main.setAttribute('tabindex', '-1')
+        this.main.addEventListener('blur', this.handleBlur)
+        this.main.focus()
+        window.scrollTo(0, this.main.offsetTop)
+      }
+    }
+  }
+})
+</script>

package/src/components/SwimlaneCTA/SwimlaneCTA.stories.mdx

@@ -0,0 +1,77 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import SwimlaneCTA from '@explorer-1/vue/src/components/SwimlaneCTA/SwimlaneCTA.vue'
+
+<Meta
+  title="Components/SwimlaneCTA"
+  component={SwimlaneCTA}
+  parameters={{ viewMode: 'docs' }}
+/>
+
+export const SwimlaneCTAData = {
+  darkMode: true,
+  targetLink: 'https://jpl.nasa.gov/about',
+  backgroundImages: [
+    'https://picsum.photos/1380/540?random=1',
+    'https://picsum.photos/1380/540?random=2',
+    'https://picsum.photos/1380/540?random=3',
+    'https://picsum.photos/1380/540?random=4',
+    'https://picsum.photos/1380/540?random=5'
+  ],
+  backgroundImagesSmall: [
+    'https://picsum.photos/1380/540?random=1',
+    'https://picsum.photos/1380/540?random=2',
+    'https://picsum.photos/1380/540?random=3',
+    'https://picsum.photos/1380/540?random=4',
+    'https://picsum.photos/1380/540?random=5'
+  ],
+  words: [
+    'Artists',
+    'Communicators',
+    'Designers',
+    'Disruptors',
+    'Dreamers',
+    'Developers',
+    'Educators',
+    'Engineers',
+    'Innovators',
+    'Inventors',
+    'Makers',
+    'Problem Solvers',
+    'Roboticists',
+    'Scientists',
+    'Software Engineers',
+    'Thinkers',
+    'Visualizers'
+  ],
+  rows: 9,
+  transitionDuration: 1800,
+  transitionDelay: 800
+}
+export const SwimlaneCTATemplate = (args) => ({
+  props: Object.keys(args),
+  components: { SwimlaneCTA },
+  template: `<SwimlaneCTA :dark-mode="darkMode" :background-images="backgroundImages" :background-images-small="backgroundImagesSmall" :target-link="targetLink"/>`
+})
+
+# SwimlaneCTA
+
+## Usage
+
+The SwimlaneCTA component combines [BaseSwimlane](?path=/story/www-components-base-baseswimlane--default) with other elements (JPL logo, links, etc.) to create the component that is used on the WWW homepage.
+
+<Canvas className="sbdocs-preview-full-width">
+  <Story
+    name="SwimlaneCTA"
+    args={SwimlaneCTAData}
+  >
+    {SwimlaneCTATemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable for={SwimlaneCTA} />
+
+## Example data
+
+<code language="json">{JSON.stringify(SwimlaneCTAData, null, 2)}</code>

package/src/components/SwimlaneCTA/SwimlaneCTA.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="justify-items-center flex w-full">
+    <BaseLink
+      v-if="targetLink"
+      class="w-full"
+      variant="none"
+      :to="targetLink"
+      title="JPL Life"
+      aria-label="JPL Life"
+      link-class="max-w-screen-3xl block w-full mx-auto"
+    >
+      <div
+        role="presentation"
+        :class="'SwimlaneCTA lg:block hidden' + computedClass"
+        :style="'background-image: url(' + randomizeImage + ');'"
+      >
+        <div class="absolute inset-0 z-10 bg-black bg-opacity-25"></div>
+        <div
+          class="lg:pr-12 lg:py-5 lg:flex-row relative z-20 flex flex-col justify-center w-full px-5 py-6"
+        >
+          <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
+            <div class="text-contrast relative z-20 p-2 pl-0">
+              <template v-if="darkMode === true">
+                <img
+                  loading="lazy"
+                  class="lg:pr-1 h-8 w-auto"
+                  src="@/assets/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png"
+                  alt="JPL Logo"
+                  width="106"
+                  height="32"
+                />
+              </template>
+              <template v-else>
+                <img
+                  loading="lazy"
+                  class="lg:pr-1 h-8 w-auto"
+                  src="@/assets/images/png/brand-jpl-logo-222222-94h28w@2x.png"
+                  alt="JPL Logo"
+                  width="111"
+                  height="32"
+                />
+              </template>
+            </div>
+            <div class="lg:p-1 text-contrast relative z-20 pt-2 pl-0">
+              <p class="text-secondary lg:text-7xl mb-0 text-4xl font-medium">is a place for</p>
+            </div>
+          </div>
+
+          <div>
+            <div class="text-contrast relative z-20 pt-1 -mt-px">
+              <BaseSwimlane
+                :words="cloneWords"
+                :rows="desktopRows"
+                :scale="desktopScale"
+                :transition-duration="transitionDuration"
+                :transition-delay="transitionDelay"
+                class="lg:block hidden"
+              ></BaseSwimlane>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        role="presentation"
+        :class="'SwimlaneCTA lg:hidden block' + computedClass"
+        :style="'background-image: url(' + randomizeImageSmall + ');'"
+      >
+        <div
+          class="lg:flex-row lg:pr-12 lg:py-5 flex flex-col justify-center w-full px-5 py-6 bg-black bg-opacity-25"
+        >
+          <div class="lg:flex-row lg:pr-3 lg:pb-0 flex flex-col items-center justify-center pb-2">
+            <div class="relative z-20 p-2 pl-0">
+              <template v-if="darkMode === true">
+                <img
+                  loading="lazy"
+                  class="lg:pr-1 h-8 w-auto"
+                  src="@/assets/images/png/brand-jpl-logo-FFFFFF-S-94h28w@2x.png"
+                  alt="JPL Logo"
+                  width="106"
+                  height="32"
+                />
+              </template>
+              <template v-else>
+                <img
+                  loading="lazy"
+                  class="lg:pr-1 h-8 w-auto"
+                  src="@/assets/images/png/brand-jpl-logo-222222-94h28w@2x.png"
+                  alt="JPL Logo"
+                  width="111"
+                  height="32"
+                />
+              </template>
+            </div>
+            <div class="lg:p-1 relative z-20 pt-2 pl-0">
+              <p class="text-secondary text-contrast lg:text-7xl mb-0 text-4xl font-medium">
+                is a place for
+              </p>
+            </div>
+          </div>
+
+          <div>
+            <div class="text-contrast relative z-20 pt-1">
+              <BaseSwimlane
+                :words="cloneWords"
+                :rows="mobileRows"
+                :scale="mobileScale"
+                :transition-duration="transitionDuration"
+                :transition-delay="transitionDelay"
+                class="lg:hidden block"
+              ></BaseSwimlane>
+            </div>
+          </div>
+        </div>
+      </div>
+    </BaseLink>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseLink from './../BaseLink/BaseLink.vue'
+import BaseSwimlane from './../BaseSwimlane/BaseSwimlane.vue'
+
+export default defineComponent({
+  name: 'SwimlaneCTA',
+  components: {
+    BaseLink,
+    BaseSwimlane
+  },
+  props: {
+    backgroundImages: {
+      type: Array,
+      required: false,
+      default: () => [
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Dreamers.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Artists.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Communicators.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Designers.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Disruptors.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Educators.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Innovators.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Inventors.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Makers.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Problem_Solvers.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Robiticists.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Scientists.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Software_Engineers.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Thinkers.jpg',
+        '/img/SwimlaneCTA/backgroundImages/JPL_is__Visualizers.jpg'
+      ]
+    },
+    backgroundImagesSmall: {
+      type: Array,
+      required: false,
+      default: () => [
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Dreamers.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Artists.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Communicators.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Designers.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Disruptors.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Educators.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Innovators.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Inventors.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Makers.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Problem_Solvers.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Robiticists.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Scientists.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Software_Engineers.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Thinkers.jpg',
+        '/img/SwimlaneCTA/backgroundImagesSmall/JPL_is__Visualizers.jpg'
+      ]
+    },
+    darkMode: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    targetLink: {
+      type: String,
+      required: false,
+      default: '/topics/jpl-life'
+    }
+  },
+  data() {
+    return {
+      mobileRows: 2,
+      desktopRows: 9,
+      mobileScale: 1.9,
+      desktopScale: 2.5,
+      words: [
+        'Dreamers',
+        'Artists',
+        'Communicators',
+        'Designers',
+        'Educators',
+        'Innovators',
+        'Inventors',
+        'Makers',
+        'Problem Solvers',
+        'Roboticists',
+        'Scientists',
+        'Engineers',
+        'Thinkers',
+        'Visualizers',
+        'Oceanographers',
+        'Developers',
+        'Astrophysicists',
+        'Disruptors',
+        'Data Scientists',
+        'Storytellers'
+      ],
+      transitionDuration: 1800,
+      transitionDelay: 800
+    }
+  },
+  computed: {
+    computedClass(): string {
+      let classes = ''
+      if (!this.darkMode) {
+        classes = classes + ' light-theme'
+      } else {
+        classes = classes + ' dark-theme'
+      }
+      return classes
+    },
+    randomizeImage(): object {
+      const backgroundImage = this.backgroundImages[
+        Math.floor(Math.random() * this.backgroundImages.length)
+      ] as object
+      return backgroundImage
+    },
+    randomizeImageSmall(): object {
+      const backgroundImageSmall = this.backgroundImagesSmall[
+        Math.floor(Math.random() * this.backgroundImagesSmall.length)
+      ] as object
+      return backgroundImageSmall
+    },
+    cloneWords(): string[] {
+      const multiWordArray = Array.from({ length: 10 }, () => this.words).flat()
+      return multiWordArray
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+// SwimlaneCTA Scoped Styles
+.SwimlaneCTA {
+  @apply max-w-screen-3xl animate-fadeIn relative items-center justify-center object-cover w-full mx-auto bg-center bg-no-repeat bg-cover select-none;
+
+  min-height: 245px;
+
+  @screen lg {
+    min-height: 595px;
+  }
+
+  * {
+    @apply animate-fadeInSlow;
+  }
+
+  &.light-theme {
+    @apply bg-gray-light text-gray-dark;
+
+    ul {
+      li {
+        @apply text-gray-dark;
+      }
+    }
+  }
+
+  &.dark-theme {
+    @apply bg-black text-white;
+
+    ul {
+      li {
+        @apply text-white;
+      }
+    }
+  }
+}
+</style>