@explorer-1/vue 0.0.0

package/src/components/ImageDetailContextImage/ImageDetailContextImage.vue

@@ -0,0 +1,125 @@
+<template>
+  <a
+    ref="ContextImageButton"
+    class="ContextImageButton bg-gray-dark sm:absolute bottom-0 right-0 left-auto z-40 block px-5"
+    @click="toggleContextImagePreview()"
+  >
+    <div class="flex flex-row items-center justify-between py-3 text-white uppercase">
+      <span class="font-secondary pr-3 tracking-wider">Context Image</span>
+      <span
+        :class="{
+          hidden: contextImagePreviewShow,
+          block: !contextImagePreviewShow
+        }"
+        ><IconDropdown
+      /></span>
+      <span
+        :class="{
+          hidden: !contextImagePreviewShow,
+          block: contextImagePreviewShow
+        }"
+        ><IconClose
+      /></span>
+    </div>
+    <div
+      class="ContextImage pb-5"
+      :class="{
+        hidden: !contextImagePreviewShow,
+        block: contextImagePreviewShow
+      }"
+    >
+      <BaseImagePlaceholder aspect-ratio="square">
+        <BaseImage
+          v-if="data?.contextImage?.src"
+          :src="data.contextImage.src.url"
+          :srcset="data.contextImage.srcSet"
+          :alt="data.contextImage.alt || ''"
+          :width="data.contextImage.src.width"
+          :height="data.contextImage.src.height"
+          loading="eager"
+          object-fit-class="cover"
+        />
+      </BaseImagePlaceholder>
+    </div>
+  </a>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import BaseImagePlaceholder from './../BaseImagePlaceholder/BaseImagePlaceholder.vue'
+import BaseImage from './../BaseImage/BaseImage.vue'
+import IconDropdown from './../Icons/IconDropdown.vue'
+import IconClose from './../Icons/IconClose.vue'
+
+export default defineComponent({
+  name: 'ImageDetailContextImage',
+  components: {
+    BaseImagePlaceholder,
+    BaseImage,
+    IconDropdown,
+    IconClose
+  },
+  inheritAttrs: true,
+  props: {
+    data: {
+      type: Object,
+      required: false
+    }
+  },
+  data() {
+    return {
+      contextImagePreviewShow: false
+    }
+  },
+  methods: {
+    toggleContextImagePreview() {
+      if (this.contextImagePreviewShow) {
+        this.contextImagePreviewShow = false
+      } else {
+        this.contextImagePreviewShow = true
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.ContextImageButton {
+  @apply select-none;
+
+  cursor: pointer;
+
+  .ContextImage {
+    @apply mx-auto w-full;
+
+    max-width: 640px;
+  }
+
+  @screen sm {
+    svg.IconDropdown {
+      @apply transform rotate-180;
+    }
+
+    min-width: 100px;
+
+    .ContextImage {
+      min-width: 150px;
+    }
+  }
+  @screen md {
+    .ContextImage {
+      min-width: 200px;
+    }
+  }
+  @screen lg {
+    .ContextImage {
+      min-width: 250px;
+    }
+  }
+  @screen xl {
+    .ContextImage {
+      min-width: 300px;
+    }
+  }
+}
+</style>

package/src/components/LayoutHelper/LayoutHelper.vue

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+interface Indents {
+  [name: string]: string
+}
+
+export const indents: Indents = {
+  'col-1': 'lg:col-start-1 lg:col-end-13',
+  'col-2': 'lg:col-start-2 lg:col-end-12',
+  'col-3': 'lg:col-start-3 lg:col-end-11',
+  'col-4': 'md:col-start-3 md:col-end-11 lg:col-start-4 lg:col-end-10'
+}
+
+export default defineComponent({
+  name: 'LayoutHelper',
+  props: {
+    indent: {
+      type: String,
+      required: false,
+      default: 'col-1',
+      validator: (prop: string): boolean => Object.keys(indents).includes(prop)
+    }
+  },
+  computed: {
+    theWidth(): string {
+      return indents[this.indent]
+    }
+  }
+})
+</script>
+<template>
+  <div class="LayoutHelper BaseGrid container mx-auto">
+    <div :class="theWidth + ' col-start-1 col-end-13 lg:px-0 px-4 relative'">
+      <slot></slot>
+    </div>
+  </div>
+</template>

package/src/components/LoadingTransition/LoadingTransition.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+    v-if="loading"
+    class="loading-page animate-fadeIn"
+  >
+    <div class="loading-wrapper">
+      <slot name="loading">
+        <div class="loading"></div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LoadingTransition',
+  data: () => ({
+    loading: false
+  }),
+  methods: {
+    start() {
+      this.loading = true
+    },
+    finish() {
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.loading-page {
+  @apply fixed top-0 left-0 block w-full h-full bg-white opacity-75;
+
+  z-index: 99999;
+
+  .loading-wrapper {
+    @apply w-full h-full min-h-full min-w-full flex flex-col justify-center items-center;
+
+    .loading {
+      @apply animate-rotate bg-transparent p-0 z-50 rounded-full h-14 w-14 opacity-75;
+
+      border: 4px solid #888888;
+      border-bottom-color: #ffffff;
+    }
+  }
+}
+</style>

package/src/components/LogoCaltech/LogoCaltech.stories.js

@@ -0,0 +1,39 @@
+import LogoCaltech from './LogoCaltech.vue'
+
+export default {
+  title: 'Foundation/Logos/LogoCaltech',
+  component: LogoCaltech,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
+      }
+    }
+  },
+  decorators: [
+    () => ({
+      template: `<div class="inline-block" :class="'bg-white '"><story/></div>`,
+      props: ['size', 'invert']
+    })
+  ],
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'The Caltech logo as an SVG. Size and color can be specified via tailwind text classes. This will only work with inlined SVG. This will not work when rendering the svg file via an `<img />` element.'
+      }
+    }
+  }
+}
+const LogoCaltechComponentTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { LogoCaltech },
+  template: `<LogoCaltech :class="size" />`
+})
+
+export const Caltech = LogoCaltechComponentTemplate.bind({})
+Caltech.storyName = 'LogoCaltech' // single story hoisting
+Caltech.args = { size: 'text-base' }

package/src/components/LogoCaltech/LogoCaltech.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg
+    class="LogoCaltech"
+    width="313"
+    height="76"
+    viewBox="0 0 313 76"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <path
+      d="M62.88 23.95C59.503 9.15 48.675 1.7 34.471 1.7 13.313 1.7.941 18.884.941 38.85.94 58.815 11.822 76 34.47 76c14.105 0 23.541-6.853 29.203-21.058l-12.118-5.564c-2.583 8.245-7.847 14.305-17.085 14.305-14.106 0-19.966-12.516-19.966-24.833 0-12.317 5.86-24.833 19.966-24.833 8.046 0 14.502 5.364 15.595 13.21L62.88 23.95zm47.421 15.298c0-14.304-10.828-16.49-21.654-16.49-11.026 0-21.457 4.57-21.457 16.39l12.12.497c0-5.464 2.283-7.55 9.337-7.55 5.264 0 9.536 1.391 9.536 6.357v1.491c-3.079 1.092-8.742 2.085-13.113 2.98l-5.066.993c-7.45 1.49-15.296 5.861-15.296 15.695 0 9.734 7.548 15.793 17.085 15.793 6.257 0 11.72-1.986 16.39-5.76 0 1.29.397 3.376 1.192 4.568h12.813c-.695-1.092-1.887-3.278-1.887-8.444v-26.52zM98.183 56.233c0 6.457-7.252 9.238-12.913 9.238-4.37 0-7.848-2.484-7.848-6.258 0-4.767 3.775-6.059 8.344-6.953l6.655-1.39c2.186-.399 4.173-.994 5.762-1.79v7.153zm20.792 17.98h12.118V1.502h-12.118v72.71zm20.306-61.209V62.69c0 7.65 3.377 12.118 13.31 12.118 3.775 0 6.754-.596 9.636-1.192v-9.933c-1.788.2-3.676.596-5.365.596-4.668 0-5.462-2.186-5.462-6.158v-25.43h10.827v-8.74H151.4V.871l-12.119 12.132zm73.44 38.957c0-17.979-7.353-29.203-24.139-29.203-16.29 0-25.727 11.324-25.727 26.322 0 15.001 9.436 26.324 25.727 26.324 13.707 0 20.96-6.555 24.734-12.317l-10.232-5.96c-1.192 1.688-4.967 7.152-14.502 7.152-6.556 0-12.814-4.867-13.013-12.318h37.151zm-37.152-9.337c1.292-5.364 5.961-9.933 13.013-9.933 8.145 0 11.422 7.252 11.422 9.933H175.57zm88.175-5.562c-3.08-7.55-9.04-14.304-21.259-14.304-16.289 0-25.726 11.324-25.726 26.322 0 15.001 9.437 26.324 24.832 26.324 13.61 0 19.371-8.045 22.748-15.397l-10.33-5.463c-1.887 4.57-4.966 9.735-12.218 9.735-8.443 0-12.318-7.35-12.318-15.199 0-7.846 4.371-15.196 13.012-15.196 4.77 0 9.041 3.078 10.63 8.045l10.63-4.867zm3.774 37.15h12.118V48.385c0-6.158 2.782-13.906 11.92-13.906 6.16 0 8.941 2.981 8.941 9.933v29.8h12.117V40.936c0-14.603-9.833-18.178-18.376-18.178-6.854 0-11.722 2.682-14.403 6.16h-.199V1.501h-12.118v72.711z"
+      fill="currentColor"
+      fill-rule="evenodd"
+    />
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'LogoCaltech'
+})
+</script>
+<style lang="scss">
+.LogoCaltech {
+  width: 8.375em; // 134px wide at .text-base
+  height: auto;
+}
+</style>

package/src/components/LogoTribrand/LogoTribrand.stories.js

@@ -0,0 +1,76 @@
+import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
+import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
+import LogoTribrand from './LogoTribrand.vue'
+
+export default {
+  title: 'Foundation/Logos/LogoTribrand',
+  component: LogoTribrand,
+  excludeStories: /.*Data$/,
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component:
+          'Combines JPL, NASA and Caltech in a single logo as an SVG. Tailwind text size classes can be used with inlined SVG (first example), but not when loading the svg file via an `<img />` element'
+      }
+    }
+  }
+}
+const LogoTribrandComponentTemplate = (args) => ({
+  props: Object.keys(args),
+  components: { LogoTribrand },
+  template: `<LogoTribrand :class="size" :invert="invert" />`
+})
+
+const LogoTribrandImageTemplate = (args) => ({
+  props: Object.keys(args),
+  components: {},
+  template: `<img :src="src" alt="Logo Image" />`
+})
+
+export const LogoInlineSvg = LogoTribrandComponentTemplate.bind({})
+LogoInlineSvg.args = { invert: false, size: 'text-base' }
+LogoInlineSvg.argTypes = {
+  size: {
+    control: {
+      type: 'select',
+      options: ['text-xs', 'text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl']
+    }
+  },
+  invert: {
+    control: {
+      type: 'boolean'
+    }
+  }
+}
+LogoInlineSvg.decorators = [
+  () => ({
+    template: `<div class="inline-block" :class="invert ? 'bg-black ' : 'bg-white '"><story/></div>`,
+    props: ['size', 'invert']
+  })
+]
+
+export const LogoImageColor = LogoTribrandImageTemplate.bind({})
+LogoImageColor.args = { src: LogoColor }
+LogoImageColor.parameters = {
+  docs: {
+    description: {
+      story: 'Demo of using an `<img />` element to render the .svg file'
+    }
+  }
+}
+
+export const LogoImageWhite = LogoTribrandImageTemplate.bind({})
+LogoImageWhite.args = { src: LogoWhite }
+LogoImageWhite.parameters = {
+  docs: {
+    description: {
+      story: 'Demo of using an `<img />` element to render the .svg file'
+    }
+  }
+}
+LogoImageWhite.decorators = [
+  () => ({
+    template: `<div class="inline-block bg-black"><story/></div>`
+  })
+]

package/src/components/LogoTribrand/LogoTribrand.vue

@@ -0,0 +1,93 @@
+<template>
+  <svg
+    class="LogoTribrand"
+    :class="{ '-invert': invert }"
+    width="324"
+    height="72"
+    viewBox="0 0 324 72"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    focusable="false"
+  >
+    <g
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <path
+        d="M61.094 28.823c0 15.811-13.013 28.824-28.823 28.824-15.811 0-28.824-13.013-28.824-28.824C3.447 13.013 16.46 0 32.271 0c15.81 0 28.823 13.013 28.823 28.823"
+        fill="#263976"
+        transform="translate(8.042 6.948)"
+      />
+      <path
+        d="M32.668 2.618a.237.237 0 01-.234.236.235.235 0 010-.47c.128 0 .234.105.234.234M34.294 6.177a.291.291 0 01-.289.289.29.29 0 01-.289-.289.29.29 0 01.289-.289c.158 0 .289.131.289.289M38.519 11.991a.29.29 0 01-.289.289.29.29 0 010-.578.29.29 0 01.289.289M31.729 8.181a.236.236 0 01-.235.235.236.236 0 01-.234-.235c0-.129.106-.235.234-.235.129 0 .235.106.235.235M34.257 9.518a.237.237 0 01-.235.235.236.236 0 01-.234-.235c0-.129.106-.236.234-.236.129 0 .235.107.235.236M30.971 5.779c0 .159-.131.29-.289.29a.29.29 0 010-.579.29.29 0 01.289.289M27.142 8.109a.236.236 0 01-.235.235.236.236 0 01-.235-.235c0-.129.106-.235.235-.235s.235.106.235.235M27.828 8.579a.237.237 0 01-.235.235.237.237 0 01-.235-.235.235.235 0 01.47 0M28.515 9.048a.235.235 0 01-.47 0 .235.235 0 01.47 0M27.467 9.951a.238.238 0 01-.235.236.235.235 0 11.235-.236M22.013 13.78a.236.236 0 01-.235.235.236.236 0 01-.235-.235c0-.128.106-.235.235-.235s.235.107.235.235M23.024 15.008a.237.237 0 01-.235.235.237.237 0 01-.235-.235c0-.129.106-.235.235-.235s.235.106.235.235M22.229 34.837a.236.236 0 01-.234.235.236.236 0 01-.235-.235.235.235 0 01.469 0M22.374 40.31a.291.291 0 01-.289.289.29.29 0 01-.289-.289.29.29 0 01.289-.289.29.29 0 01.289.289M19.268 43.109a.237.237 0 01-.235.235.237.237 0 01-.235-.235c0-.129.106-.235.235-.235s.235.106.235.235M15.547 44.247a.29.29 0 01-.578 0c0-.16.131-.29.289-.29a.29.29 0 01.289.29M14.789 41.718a.291.291 0 01-.289.289.29.29 0 01-.289-.289.29.29 0 01.289-.289c.158 0 .289.131.289.289M14.355 43.325a.236.236 0 01-.234.235.236.236 0 01-.235-.235.235.235 0 01.469 0M11.574 41.989a.236.236 0 01-.235.235.236.236 0 01-.235-.235c0-.128.106-.235.235-.235s.235.107.235.235M21.29 46.503a.236.236 0 01-.234.235.236.236 0 01-.235-.235c0-.128.106-.234.235-.234.128 0 .234.106.234.234M24.216 44.355a.291.291 0 01-.289.289.291.291 0 01-.289-.289.29.29 0 01.289-.289.29.29 0 01.289.289M24.541 47.118a.237.237 0 01-.235.235.237.237 0 01-.235-.235.235.235 0 01.47 0M36.569 44.482a.235.235 0 11-.235-.235c.129 0 .235.106.235.235M30.971 46.468a.235.235 0 01-.47 0 .235.235 0 01.47 0M46.032 49.321a.236.236 0 01-.235.235.236.236 0 01-.234-.235c0-.128.106-.234.234-.234.129 0 .235.106.235.234M47.26 38.214a.29.29 0 01-.288.289.29.29 0 01-.289-.289.29.29 0 01.289-.289.29.29 0 01.288.289M44.949 39.785c0 .13-.106.236-.235.236a.236.236 0 01-.235-.236c0-.128.106-.234.235-.234s.235.106.235.234M47.225 40.237c0 .159-.131.29-.29.29a.291.291 0 01-.289-.29c0-.158.131-.289.289-.289.159 0 .29.131.29.289M44.949 43.036a.236.236 0 01-.235.235.236.236 0 01-.235-.235.235.235 0 01.47 0M50.836 36.644a.235.235 0 01-.469 0c0-.129.106-.236.235-.236.128 0 .234.107.234.236M51.414 38.07a.29.29 0 01-.289.289.29.29 0 01-.289-.289c0-.159.131-.29.289-.29a.29.29 0 01.289.29M55.459 39.768a.29.29 0 01-.578 0 .29.29 0 01.578 0M51.342 42.784a.237.237 0 01-.235.235.236.236 0 01-.234-.235c0-.129.106-.235.234-.235.129 0 .235.106.235.235M53.942 40.327a.236.236 0 01-.234.235.236.236 0 01-.235-.235.235.235 0 01.469 0M53.473 44.12a.236.236 0 01-.235.235.236.236 0 01-.235-.235c0-.129.106-.235.235-.235s.235.106.235.235M37.727 5.507a.414.414 0 01.309-.294l.082-.618.121.623c.145.042.257.16.29.309l.626.088-.632.111a.412.412 0 01-.299.29l-.106.636-.108-.641a.413.413 0 01-.285-.298l-.604-.098.606-.108M21.533 49.814a.411.411 0 01.308-.294l.082-.618.122.625a.41.41 0 01.289.306l.626.089-.631.111a.412.412 0 01-.3.289l-.106.637-.107-.64a.415.415 0 01-.285-.298l-.604-.099.606-.108M51.315 44.103a.41.41 0 01.308-.295l.082-.619.122.625a.413.413 0 01.289.307l.626.089-.632.111a.414.414 0 01-.299.29l-.106.636-.107-.641a.416.416 0 01-.286-.298l-.604-.098.607-.107M53.673 37.732a.411.411 0 01.307-.295l.082-.618.122.624c.145.042.257.16.29.308l.626.088-.632.111a.416.416 0 01-.299.29l-.107.636-.106-.64a.414.414 0 01-.286-.298l-.604-.099.607-.107M24.423 14.2a.413.413 0 01.307-.294l.083-.618.122.624c.144.041.256.16.289.308l.626.089-.632.11a.412.412 0 01-.299.29l-.106.636-.107-.641a.413.413 0 01-.286-.297l-.604-.098.607-.109M22.513 27.612c2.129 3.719 4.611 6.442 6.61 9.03 1.775 2.295 5.233 3.445 4.015 4.535-1.373 1.227-4.696-4.19-4.696-4.19-2.209-2.664-4.322-5.489-6.478-9.184l.549-.191"
+        fill="#FFFFFE"
+        transform="translate(8.042 6.948)"
+      />
+      <path
+        d="M0 37.374c10.289-6.758 28.245-11.119 43.034-16.991 11.236-4.46 21.227-10.061 26.598-17.77C56.021 30.338 18.114 27.056.741 37.632L0 37.374"
+        fill="#D8262C"
+        transform="translate(8.042 6.948)"
+      />
+      <path
+        d="M23.919 23.626h5.153l3.694 9.303 1.232 1.236H27.29l1.231-1.236-.437-1.135h-3.703L24 33.091l.883 1.074h-3.499l1.231-1.236 2.374-8.227-1.07-1.076zm3.509 6.539l-1.491-3.777-1.094 3.777h2.585zM47.857 23.626h5.348l3.694 9.303 1.232 1.236h-6.708l1.231-1.236-.437-1.135h-3.702l-.381 1.297.883 1.074h-3.5l1.231-1.236 2.374-8.227-1.265-1.076zm3.703 6.539l-1.49-3.777-1.094 3.777h2.584zM16.928 30.19L16.928 24.702 15.858 23.626 19.423 23.626 18.353 24.702 18.353 32.929 19.585 34.165 14.902 34.165 10.868 27.34 10.868 32.929 11.905 34.165 8.178 34.165 9.409 32.929 9.409 24.702 8.34 23.626 13.006 23.626 16.928 30.19M43.918 26.329l-.11-3.281-1.104.762c-1.556-.544-3.367-.524-4.638.078-1.183.559-2.459 1.742-2.303 3.42.156 1.679 1.457 2.33 2.63 2.861 1.51.685 3.152.916 3.128 1.82-.016.575-.97.987-1.711.963-.678-.021-2.88-.185-4.031-1.554l.218 3.452 1.229-.902c1.494.528 3.304.75 4.98.204 1.665-.543 3.415-1.936 2.443-4.372-.418-1.046-1.569-1.693-2.256-1.974-.628-.258-2.546-1.012-3.082-1.291-.626-.325-.556-1.36.95-1.57 1.363-.19 3.252.902 3.657 1.384"
+        fill="#FFFFFE"
+        transform="translate(8.042 6.948)"
+      />
+      <path
+        d="M7.968 53.553C28.63 32.465 59.428 22.722 69.632 2.612c-6.145 19.551-39.054 30.334-61.72 51.932l.056-.991"
+        fill="#D8262C"
+        transform="translate(8.042 6.948)"
+      />
+      <path
+        d="M21.964 27.803a71.957 71.957 0 01-.728-1.278c-5.509-9.91-4.714-20.024 5.255-15.617 8.462 3.74 16.544 14.232 19.794 21.682 1.506 3.452 5.544 17.001-7.459 11.511l-.026-.08c12.281 5.057 10.158-7.757 3.584-17.581-3.72-5.56-8.571-10.191-11.63-12.425-10.186-7.442-16.399-2.891-9.247 11.703.324.66.66 1.29 1.006 1.894l-.549.191"
+        fill="#FFFFFE"
+        transform="translate(8.042 6.948)"
+      />
+      <path
+        class="logo-path-jpl-caltech"
+        d="M82.104 22.133c0 1.775-.483 4.669-4.591 4.669-2.295 0-4.534-1.254-4.534-4.264v-1.195h2.739v.618c0 1.331.328 2.294 1.757 2.294 1.6 0 1.6-1.292 1.6-2.256v-9.298h3.029v9.432M91.012 20.417c-.25-1.388-.849-2.123-2.18-2.123-1.736 0-2.238 1.352-2.276 2.123h4.456zm-4.456 1.737c.077 1.736.926 2.527 2.449 2.527 1.1 0 1.988-.676 2.161-1.292h2.412c-.772 2.352-2.412 3.354-4.669 3.354-3.144 0-5.093-2.159-5.093-5.246 0-2.989 2.064-5.265 5.093-5.265 3.396 0 5.035 2.853 4.842 5.922h-7.195zM98.646 16.5h2.006v1.834h-2.006v4.939c0 .925.231 1.157 1.158 1.157.288 0 .559-.02.848-.077v2.14c-.463.077-1.06.096-1.601.096-1.678 0-3.144-.384-3.144-2.372v-5.883h-1.659V16.5h1.659v-2.988h2.739V16.5M110.294 19.182h2.353c1.407 0 2.662-.309 2.662-2.063 0-1.755-1.255-2.064-2.662-2.064h-2.353v4.127zm-3.029-6.481h6.21c3.435 0 4.765 2.179 4.765 4.418 0 2.238-1.33 4.416-4.765 4.416h-3.181v4.94h-3.029V12.701zM119.663 16.5h2.605v1.855h.038c.502-1.256 1.851-2.123 3.182-2.123.193 0 .425.037.598.096v2.545a5.058 5.058 0 00-.983-.095c-2.006 0-2.701 1.446-2.701 3.202v4.495h-2.739V16.5M131.464 24.681c1.872 0 2.432-1.603 2.432-3.184 0-1.599-.56-3.203-2.432-3.203-1.851 0-2.41 1.604-2.41 3.203 0 1.581.559 3.184 2.41 3.184zm0-8.449c3.145 0 5.172 2.084 5.172 5.265 0 3.163-2.027 5.246-5.172 5.246-3.124 0-5.149-2.083-5.149-5.246 0-3.181 2.025-5.265 5.149-5.265zM145.638 21.518c0-1.582-.636-3.224-2.392-3.224-1.793 0-2.371 1.604-2.371 3.224 0 1.618.616 3.163 2.391 3.163 1.794 0 2.372-1.545 2.372-3.163zm-7.407-5.018h2.605v1.274h.039c.656-1.062 1.737-1.542 2.97-1.542 3.124 0 4.533 2.527 4.533 5.361 0 2.662-1.465 5.15-4.378 5.15-1.198 0-2.335-.518-2.991-1.504h-.038v4.746h-2.74V16.5zM159.194 26.475h-2.604v-1.39h-.057c-.695 1.12-1.889 1.658-3.047 1.658-2.913 0-3.648-1.638-3.648-4.107V16.5h2.739v5.633c0 1.641.484 2.451 1.756 2.451 1.485 0 2.123-.829 2.123-2.855V16.5h2.738v9.975M161.178 26.474L163.917 26.474 163.917 12.701 161.178 12.701zM168.024 23.233c.019 1.197 1.024 1.678 2.103 1.678.792 0 1.793-.307 1.793-1.272 0-.829-1.137-1.119-3.105-1.544-1.582-.348-3.164-.905-3.164-2.663 0-2.545 2.199-3.2 4.34-3.2 2.18 0 4.188.731 4.399 3.181h-2.604c-.077-1.058-.887-1.349-1.871-1.349-.617 0-1.524.115-1.524.924 0 .985 1.543 1.121 3.106 1.488 1.6.366 3.164.944 3.164 2.797 0 2.623-2.277 3.47-4.553 3.47-2.316 0-4.574-.867-4.689-3.51h2.605M176.141 26.475h2.74V16.5h-2.74v9.975zm0-11.517h2.74v-2.257h-2.74v2.257zM185.707 24.681c1.871 0 2.43-1.603 2.43-3.184 0-1.599-.559-3.203-2.43-3.203-1.853 0-2.411 1.604-2.411 3.203 0 1.581.558 3.184 2.411 3.184zm0-8.449c3.144 0 5.169 2.084 5.169 5.265 0 3.163-2.025 5.246-5.169 5.246-3.126 0-5.15-2.083-5.15-5.246 0-3.181 2.024-5.265 5.15-5.265zM192.454 16.5h2.605v1.391h.056c.696-1.119 1.89-1.659 3.048-1.659 2.912 0 3.647 1.639 3.647 4.109v6.134h-2.741v-5.633c0-1.64-.482-2.45-1.755-2.45-1.485 0-2.122.829-2.122 2.855v5.228h-2.738V16.5M209.19 12.701L212.219 12.701 212.219 23.928 218.931 23.928 218.931 26.475 209.19 26.475 209.19 12.701M226.354 21.593c-.462.406-1.427.427-2.276.579-.849.174-1.621.464-1.621 1.467 0 1.021.793 1.272 1.678 1.272 2.142 0 2.219-1.697 2.219-2.295v-1.023zm-6.328-2.024c.156-2.567 2.451-3.337 4.688-3.337 1.987 0 4.38.443 4.38 2.835v5.188c0 .907.095 1.815.346 2.22h-2.777a4.05 4.05 0 01-.193-.965c-.869.907-2.142 1.233-3.357 1.233-1.89 0-3.395-.944-3.395-2.988 0-2.258 1.698-2.798 3.395-3.028 1.678-.251 3.241-.195 3.241-1.314 0-1.176-.811-1.349-1.775-1.349-1.041 0-1.717.423-1.813 1.505h-2.74zM236.014 18.294c-1.62 0-2.333 1.525-2.333 3.203 0 1.659.713 3.184 2.333 3.184s2.334-1.525 2.334-3.184c0-1.678-.714-3.203-2.334-3.203zm-4.978-5.593h2.741v5.016h.036c.677-1.023 1.912-1.485 3.146-1.485 1.987 0 4.13 1.6 4.13 5.247 0 3.665-2.143 5.264-4.13 5.264-1.466 0-2.682-.443-3.278-1.542h-.04v1.274h-2.605V12.701zM247.487 24.681c1.871 0 2.431-1.603 2.431-3.184 0-1.599-.56-3.203-2.431-3.203-1.852 0-2.412 1.604-2.412 3.203 0 1.581.56 3.184 2.412 3.184zm0-8.449c3.144 0 5.17 2.084 5.17 5.265 0 3.163-2.026 5.246-5.17 5.246-3.125 0-5.15-2.083-5.15-5.246 0-3.181 2.025-5.265 5.15-5.265zM254.233 16.5h2.604v1.855h.039c.504-1.256 1.852-2.123 3.185-2.123.192 0 .422.037.596.096v2.545a5.074 5.074 0 00-.983-.095c-2.007 0-2.701 1.446-2.701 3.202v4.495h-2.74V16.5M267.755 21.593c-.465.406-1.43.427-2.277.579-.849.174-1.622.464-1.622 1.467 0 1.021.79 1.272 1.679 1.272 2.142 0 2.22-1.697 2.22-2.295v-1.023zm-6.33-2.024c.154-2.567 2.45-3.337 4.688-3.337 1.99 0 4.381.443 4.381 2.835v5.188c0 .907.096 1.815.347 2.22h-2.779a4.149 4.149 0 01-.192-.965c-.869.907-2.142 1.233-3.357 1.233-1.892 0-3.396-.944-3.396-2.988 0-2.258 1.697-2.798 3.396-3.028 1.677-.251 3.242-.195 3.242-1.314 0-1.176-.813-1.349-1.776-1.349-1.042 0-1.718.423-1.814 1.505h-2.74zM275.91 16.5h2.005v1.834h-2.005v4.939c0 .925.23 1.157 1.157 1.157.287 0 .558-.02.848-.077v2.14c-.463.077-1.061.096-1.603.096-1.676 0-3.144-.384-3.144-2.372v-5.883h-1.657V16.5h1.657v-2.988h2.742V16.5M283.892 24.681c1.871 0 2.43-1.603 2.43-3.184 0-1.599-.559-3.203-2.43-3.203-1.851 0-2.413 1.604-2.413 3.203 0 1.581.562 3.184 2.413 3.184zm0-8.449c3.144 0 5.17 2.084 5.17 5.265 0 3.163-2.026 5.246-5.17 5.246-3.124 0-5.15-2.083-5.15-5.246 0-3.181 2.026-5.265 5.15-5.265zM290.64 16.5h2.601v1.855h.041c.502-1.256 1.851-2.123 3.185-2.123.191 0 .423.037.595.096v2.545a5.093 5.093 0 00-.984-.095c-2.007 0-2.7 1.446-2.7 3.202v4.495h-2.738V16.5M304.021 27.727c-.595 1.604-1.542 2.258-3.432 2.258-.56 0-1.117-.039-1.679-.096v-2.257c.521.038 1.063.116 1.602.095.945-.095 1.253-1.078.945-1.869l-3.512-9.358h2.933l2.258 6.829h.037l2.18-6.829h2.836l-4.168 11.227M82.32 38.092c-.332-1.674-1.674-2.519-3.315-2.519-2.817 0-4.009 2.32-4.009 4.789 0 2.699 1.192 4.953 4.026 4.953 2.072 0 3.264-1.458 3.413-3.413h1.575c-.299 2.949-2.138 4.739-5.121 4.739-3.678 0-5.468-2.717-5.468-6.164 0-3.429 1.956-6.23 5.601-6.23 2.469 0 4.507 1.326 4.871 3.845H82.32M90.771 41.935c-.547.398-1.607.414-2.552.581-.928.166-1.723.497-1.723 1.54 0 .929.795 1.259 1.656 1.259 1.856 0 2.619-1.159 2.619-1.939v-1.441zm2.286 4.39c-.248.151-.563.233-1.01.233-.73 0-1.193-.397-1.193-1.325-.779.911-1.823 1.325-3.016 1.325-1.558 0-2.833-.696-2.833-2.402 0-1.939 1.441-2.352 2.899-2.634 1.558-.298 2.884-.2 2.884-1.26 0-1.227-1.011-1.424-1.907-1.424-1.192 0-2.07.363-2.136 1.623h-1.409c.083-2.121 1.723-2.865 3.629-2.865 1.54 0 3.214.345 3.214 2.351v4.408c0 .664 0 .96.447.96.117 0 .249-.017.431-.082v1.092zM94.186 46.358L95.594 46.358 95.594 34.529 94.186 34.529zM97.599 46.358h1.407v-8.564h-1.407v8.564zm0-10.106h1.407v-1.723h-1.407v1.723zM101.509 39.035h-1.441v-1.241h1.441v-1.276c0-1.392.828-2.12 2.37-2.12.264 0 .645.048.911.131v1.226a2.671 2.671 0 00-.795-.116c-.68 0-1.078.216-1.078.962v1.193h1.657v1.241h-1.657v7.324h-1.408v-7.324M109.264 45.315c1.474 0 2.667-1.159 2.667-3.23 0-2.088-1.193-3.247-2.667-3.247-1.475 0-2.668 1.159-2.668 3.247 0 2.071 1.193 3.23 2.668 3.23zm0-7.719c2.716 0 4.158 1.971 4.158 4.489 0 2.501-1.442 4.473-4.158 4.473-2.718 0-4.159-1.972-4.159-4.473 0-2.518 1.441-4.489 4.159-4.489zM114.766 37.794h1.325V39.6h.033c.68-1.376 1.625-2.056 3.149-2.004v1.491c-2.27 0-3.098 1.292-3.098 3.462v3.81h-1.409v-8.565M120.068 37.794h1.325v1.358h.034c.596-1.06 1.557-1.556 2.783-1.556 2.253 0 2.95 1.292 2.95 3.13v5.633h-1.409v-5.797c0-1.045-.663-1.724-1.74-1.724-1.706 0-2.534 1.143-2.534 2.684v4.837h-1.409v-8.565M129.1 46.358h1.408v-8.564H129.1v8.564zm0-10.106h1.408v-1.723H129.1v1.723zM137.732 41.935c-.547.398-1.607.414-2.552.581-.928.166-1.723.497-1.723 1.54 0 .929.795 1.259 1.657 1.259 1.856 0 2.618-1.159 2.618-1.939v-1.441zm2.287 4.39c-.249.151-.563.233-1.011.233-.729 0-1.193-.397-1.193-1.325-.779.911-1.823 1.325-3.016 1.325-1.557 0-2.833-.696-2.833-2.402 0-1.939 1.441-2.352 2.899-2.634 1.558-.298 2.884-.2 2.884-1.26 0-1.227-1.01-1.424-1.906-1.424-1.193 0-2.071.363-2.137 1.623h-1.408c.082-2.121 1.723-2.865 3.628-2.865 1.54 0 3.215.345 3.215 2.351v4.408c0 .664 0 .96.446.96.117 0 .249-.017.432-.082v1.092zM145.704 46.358L147.277 46.358 147.277 34.529 145.704 34.529zM149.43 37.794h1.326v1.358h.035c.593-1.06 1.556-1.556 2.783-1.556 2.253 0 2.949 1.292 2.949 3.13v5.633h-1.41v-5.797c0-1.045-.661-1.724-1.739-1.724-1.707 0-2.534 1.143-2.534 2.684v4.837h-1.41v-8.565M159.242 43.658c.049 1.259 1.142 1.657 2.302 1.657.879 0 2.073-.199 2.073-1.275 0-1.094-1.393-1.275-2.804-1.59-1.389-.317-2.796-.78-2.796-2.42 0-1.722 1.706-2.434 3.196-2.434 1.89 0 3.397.594 3.514 2.683h-1.408c-.101-1.094-1.062-1.441-1.99-1.441-.846 0-1.822.233-1.822 1.093 0 1.011 1.491 1.175 2.801 1.49 1.406.316 2.798.778 2.798 2.436 0 2.039-1.905 2.701-3.644 2.701-1.924 0-3.546-.779-3.63-2.9h1.41M168.356 37.794h1.706v1.241h-1.706v5.32c0 .647.182.761 1.06.761h.646v1.243h-1.076c-1.459 0-2.04-.297-2.04-1.872v-5.452h-1.457v-1.241h1.457v-2.569h1.41v2.569M171.438 46.358h1.407v-8.564h-1.407v8.564zm0-10.106h1.407v-1.723h-1.407v1.723zM176.724 37.794h1.708v1.241h-1.708v5.32c0 .647.182.761 1.06.761h.648v1.243h-1.079c-1.457 0-2.038-.297-2.038-1.872v-5.452h-1.459v-1.241h1.459v-2.569h1.409v2.569M186.813 46.359h-1.325v-1.357h-.033c-.596 1.06-1.558 1.556-2.783 1.556-2.253 0-2.949-1.291-2.949-3.132v-5.632h1.409v5.798c0 1.044.663 1.723 1.739 1.723 1.706 0 2.534-1.142 2.534-2.685v-4.836h1.408v8.565M190.627 37.794h1.705v1.241h-1.705v5.32c0 .647.181.761 1.059.761h.646v1.243h-1.076c-1.457 0-2.037-.297-2.037-1.872v-5.452h-1.459v-1.241h1.459v-2.569h1.408v2.569M199.573 41.257c-.066-1.343-1.077-2.419-2.468-2.419-1.474 0-2.353 1.109-2.452 2.419h4.92zm1.359 2.385c-.381 1.889-1.74 2.916-3.661 2.916-2.736 0-4.027-1.889-4.109-4.505 0-2.57 1.69-4.457 4.026-4.457 3.031 0 3.961 2.832 3.876 4.904h-6.411c-.05 1.491.794 2.815 2.667 2.815 1.159 0 1.972-.563 2.221-1.673h1.391zM210.295 45.315c1.476 0 2.668-1.159 2.668-3.23 0-2.088-1.192-3.247-2.668-3.247-1.475 0-2.667 1.159-2.667 3.247 0 2.071 1.192 3.23 2.667 3.23zm0-7.719c2.716 0 4.158 1.971 4.158 4.489 0 2.501-1.442 4.473-4.158 4.473-2.718 0-4.159-1.972-4.159-4.473 0-2.518 1.441-4.489 4.159-4.489zM216.427 39.035h-1.441v-1.241h1.441v-1.276c0-1.392.828-2.12 2.371-2.12.264 0 .644.048.911.131v1.226a2.684 2.684 0 00-.797-.116c-.681 0-1.076.216-1.076.962v1.193h1.655v1.241h-1.655v7.324h-1.409v-7.324M227.744 35.855L223.801 35.855 223.801 34.529 233.262 34.529 233.262 35.855 229.319 35.855 229.319 46.359 227.744 46.359 227.744 35.855M240.023 41.257c-.068-1.343-1.077-2.419-2.468-2.419-1.476 0-2.354 1.109-2.452 2.419h4.92zm1.359 2.385c-.381 1.889-1.739 2.916-3.661 2.916-2.735 0-4.029-1.889-4.111-4.505 0-2.57 1.691-4.457 4.027-4.457 3.032 0 3.959 2.832 3.877 4.904h-6.411c-.05 1.491.793 2.815 2.667 2.815 1.159 0 1.972-.563 2.22-1.673h1.392zM248.524 40.545c-.215-1.078-.961-1.707-2.122-1.707-2.038 0-2.666 1.608-2.666 3.346 0 1.574.711 3.131 2.501 3.131 1.359 0 2.171-.795 2.353-2.087h1.441c-.314 2.087-1.623 3.33-3.778 3.33-2.617 0-4.009-1.822-4.009-4.374 0-2.57 1.324-4.588 4.043-4.588 1.937 0 3.495.91 3.694 2.949h-1.457M251.341 34.529h1.409v4.524h.035c.462-1.027 1.671-1.457 2.699-1.457 2.253 0 2.95 1.292 2.95 3.13v5.633h-1.409v-5.797c0-1.045-.665-1.724-1.74-1.724-1.707 0-2.535 1.143-2.535 2.684v4.837h-1.409v-11.83M260.29 37.794h1.325v1.358h.033c.597-1.06 1.558-1.556 2.784-1.556 2.255 0 2.95 1.292 2.95 3.13v5.633h-1.408v-5.797c0-1.045-.663-1.724-1.742-1.724-1.704 0-2.534 1.143-2.534 2.684v4.837h-1.408v-8.565M272.934 45.315c1.475 0 2.668-1.159 2.668-3.23 0-2.088-1.193-3.247-2.668-3.247-1.474 0-2.667 1.159-2.667 3.247 0 2.071 1.193 3.23 2.667 3.23zm0-7.719c2.717 0 4.158 1.971 4.158 4.489 0 2.501-1.441 4.473-4.158 4.473-2.716 0-4.16-1.972-4.16-4.473 0-2.518 1.444-4.489 4.16-4.489zM278.568 46.358L279.977 46.358 279.977 34.529 278.568 34.529zM285.596 45.315c1.473 0 2.666-1.159 2.666-3.23 0-2.088-1.193-3.247-2.666-3.247-1.477 0-2.669 1.159-2.669 3.247 0 2.071 1.192 3.23 2.669 3.23zm0-7.719c2.716 0 4.157 1.971 4.157 4.489 0 2.501-1.441 4.473-4.157 4.473-2.719 0-4.16-1.972-4.16-4.473 0-2.518 1.441-4.489 4.16-4.489zM297.144 41.902c0-1.508-.663-3.064-2.434-3.064-1.808 0-2.536 1.474-2.536 3.113 0 1.541.563 3.266 2.418 3.266 1.857 0 2.552-1.707 2.552-3.315zm1.391 3.728c0 2.785-1.274 4.208-3.977 4.208-1.606 0-3.463-.645-3.544-2.517h1.407c.067 1.026 1.292 1.392 2.221 1.392 1.839 0 2.568-1.327 2.568-3.248v-.563h-.032c-.466 1.044-1.591 1.556-2.668 1.556-2.553 0-3.829-2.004-3.829-4.341 0-2.021.995-4.521 3.961-4.521 1.077 0 2.038.479 2.551 1.424h.017v-1.226h1.325v7.836zM303.757 47.501c-.647 1.675-1.227 2.287-2.486 2.287-.332 0-.664-.033-.978-.148v-1.293c.265.085.548.198.828.198.581 0 .896-.28 1.16-.776l.58-1.459-3.396-8.516h1.59l2.503 7.008h.033l2.401-7.008h1.492l-3.727 9.707"
+        fill="currentColor"
+        transform="translate(8.042 6.948)"
+      />
+    </g>
+  </svg>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'LogoTribrand',
+  props: {
+    // The -transparent class on NavDesktop takes care of this -- don't use the prop in this case
+    // Prop should be used when the logo needs to be manually inverted for use somewhere else
+    invert: {
+      type: Boolean,
+      default: false
+    }
+  }
+})
+</script>
+<style lang="scss">
+$logo-text-dark: #1b1a19;
+
+.LogoTribrand {
+  width: 20.25em; // 324x72 px at .text-base
+  height: auto;
+
+  .logo-path-jpl-caltech {
+    color: $logo-text-dark;
+  }
+
+  .-transparent.-scrolled & {
+    .logo-path-jpl-caltech {
+      color: $logo-text-dark;
+    }
+  }
+
+  .-transparent &,
+  &.-invert {
+    .logo-path-jpl-caltech {
+      color: #ffffff;
+    }
+  }
+}
+</style>

package/src/components/MissionDetailAbout/MissionDetailAbout.stories.js

@@ -0,0 +1,70 @@
+import MissionDetailAbout from './MissionDetailAbout.vue'
+
+export default {
+  title: 'WWW/MissionDetail/MissionDetailAbout',
+  component: MissionDetailAbout,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="absolute inset-0"><story/></div>`
+    })
+  ],
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  excludeStories: /.*(Data)$/
+}
+
+export const MissionDetailAboutData = {
+  descriptionHeading: 'About the Mission',
+  description: `<p>The Juno spacecraft, which successfully entered the orbit of Jupiter on July 4, 2016, will for the first time peer below the dense cover of clouds to answer questions about the gas giant and the origins of our solar system.</p><p>Juno's primary goal is to reveal the story of Jupiter's formation and evolution. Using long-proven technologies on a spinning spacecraft placed in an elliptical polar orbit, Juno will observe Jupiter's gravity and magnetic fields, atmospheric dynamics and composition, and evolution.</p><ul><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li></ul><p>Lorem ipsum dolor sit amet paragraph text</p><ol><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li><li>Lorem ipsum dolor sit amet consectatur adipscing</li></ol>`,
+  instruments: [
+    {
+      id: '144',
+      instrument: 'Gravity Science'
+    },
+    {
+      id: '145',
+      instrument: 'Magnetometer (MAG)'
+    },
+    {
+      id: '146',
+      instrument: 'Microwave Radiometer (MWR)'
+    },
+    {
+      id: '147',
+      instrument: 'Jupiter Energetic Particle Detector Instrument (JEDI)'
+    },
+    {
+      id: '148',
+      instrument: 'Jovian Auroral Distributions Experiment (JADE)'
+    },
+    {
+      id: '149',
+      instrument: 'Waves'
+    },
+    {
+      id: '150',
+      instrument: 'Ultraviolet Imaging Spectrograph (UVS)'
+    },
+    {
+      id: '151',
+      instrument: 'Jovian Infrared Auroral Mapper (JIRAM)'
+    },
+    {
+      id: '152',
+      instrument: 'JunoCam'
+    }
+  ]
+}
+
+// stories
+export const Default = { args: MissionDetailAboutData }
+
+export const NoInstruments = {
+  args: {
+    ...MissionDetailAboutData,
+    instruments: []
+  }
+}