@explorer-1/vue 0.3.9 → 1.0.0

package/src/docs/foundation/colorsemantic.docs.mdx

@@ -0,0 +1,395 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
+import { ColorRow } from './../utils/ColorRow'
+
+<Meta title="Foundations/Colors/Semantic Colors (web)" />
+
+# Semantic Colors
+
+- [Brand Colors](#brand-colors)
+- [Functional Gray Tones](#functional-gray-tones)
+- [Semantic Colors](#semantic-colors)
+- [Tokens](#tokens)
+
+Some colors have been given a semantic alias that aids in theme development. These aliases are only applicable to web development.
+
+Note that several of these aliases are using color names that are still supported but will be deprecated in future code releases.
+
+<span id="brand-colors"></span>
+
+## Brand Colors
+
+<table className="w-full">
+  <thead>
+    <tr>
+      <th style={{ width: '12rem' }}>Color</th>
+      <th>Name</th>
+      <th style={{ width: '12rem' }}>Token</th>
+      <th style={{ width: '6rem' }}>Hex</th>
+      <th style={{ width: '13rem' }}>RGB</th>
+    </tr>
+  </thead>
+  <tbody>
+    {/* --- JPL Red --- */}
+    <ColorRow
+      swatchClass="bg-jpl-red-lighter"
+      name="JPL Red Lighter"
+      token="jpl-red-lighter"
+    />
+    <ColorRow
+      swatchClass="bg-jpl-red-light"
+      name="JPL Red Light"
+      token="jpl-red-light"
+    />
+      <ColorRow
+      swatchClass="bg-jpl-red"
+      name="JPL Red"
+      token="jpl-red"
+      />
+      <ColorRow
+      swatchClass="bg-jpl-red-dark"
+      name="JPL Red Dark"
+      token="jpl-red-dark"
+      />
+      <ColorRow
+      swatchClass="bg-jpl-red-darker"
+      name="JPL Red Darker"
+      token="jpl-red-darker"
+      />
+
+      {/* --- JPL Orange --- */}
+
+      <ColorRow
+        swatchClass="bg-jpl-orange-lighter"
+        name="JPL Orange Lighter"
+        token="jpl-orange-lighter"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-orange-light"
+        name="JPL Orange Light"
+        token="jpl-orange-light"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-orange"
+        name="JPL Orange"
+        token="jpl-orange"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-orange-dark"
+        name="JPL Orange Dark"
+        token="jpl-orange-dark"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-orange-darker"
+        name="JPL Orange Darker"
+        token="jpl-orange-darker"
+      />
+
+      {/* --- JPL Yellow --- */}
+
+      <ColorRow
+        swatchClass="bg-jpl-yellow-lighter"
+        name="JPL Yellow Lighter"
+        token="jpl-yellow-lighter"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-yellow-light"
+        name="JPL Yellow Light"
+        token="jpl-yellow-light"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-yellow"
+        name="JPL Yellow"
+        token="jpl-yellow"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-yellow-dark"
+        name="JPL Yellow Dark"
+        token="jpl-yellow-dark"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-yellow-darker"
+        name="JPL Yellow Darker"
+        token="jpl-yellow-darker"
+      />
+
+      {/* --- JPL Teal --- */}
+
+      <ColorRow
+        swatchClass="bg-jpl-teal-lighter"
+        name="JPL Teal Lighter"
+        token="jpl-teal-lighter"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-teal-light"
+        name="JPL Teal Light"
+        token="jpl-teal-light"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-teal"
+        name="JPL Teal"
+        token="jpl-teal"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-teal-dark"
+        name="JPL Teal Dark"
+        token="jpl-teal-dark"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-teal-darker"
+        name="JPL Teal Darker"
+        token="jpl-teal-darker"
+      />
+
+      {/* --- JPL Blue --- */}
+
+      <ColorRow
+        swatchClass="bg-jpl-blue-lighter"
+        name="JPL Blue Lighter"
+        token="jpl-blue-lighter"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-blue-light"
+        name="JPL Blue Light"
+        token="jpl-blue-light"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-blue"
+        name="JPL Blue"
+        token="jpl-blue"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-blue-dark"
+        name="JPL Blue Dark"
+        token="jpl-blue-dark"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-blue-darker"
+        name="JPL Blue Darker"
+        token="jpl-blue-darker"
+      />
+
+      {/* --- JPL Violet --- */}
+
+      <ColorRow
+        swatchClass="bg-jpl-violet-lighter"
+        name="JPL Violet Lighter"
+        token="jpl-violet-lighter"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-violet-light"
+        name="JPL Violet Light"
+        token="jpl-violet-light"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-violet"
+        name="JPL Violet"
+        token="jpl-violet"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-violet-dark"
+        name="JPL Violet Dark"
+        token="jpl-violet-dark"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-violet-darker"
+        name="JPL Violet Darker"
+        token="jpl-violet-darker"
+      />
+      {/* --- JPL Magenta --- */}
+      <ColorRow
+        swatchClass="bg-jpl-magenta-lighter"
+        name="JPL Magenta Lighter"
+        token="jpl-magenta-lighter"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-magenta-light"
+        name="JPL Magenta Light"
+        token="jpl-magenta-light"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-magenta"
+        name="JPL Magenta"
+        token="jpl-magenta"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-magenta-dark"
+        name="JPL Magenta Dark"
+        token="jpl-magenta-dark"
+      />
+      <ColorRow
+        swatchClass="bg-jpl-magenta-darker"
+        name="JPL Magenta Darker"
+        token="jpl-magenta-darker"
+      />
+
+  </tbody>
+</table>
+
+<span id="functional-gray-tones"></span>
+
+## Functional Gray Tones
+
+Grayscale colors are used throughout the site for text and layout.
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: '12rem' }}>Color</th>
+      <th>Name</th>
+      <th style={{ width: '12rem' }}>Token</th>
+      <th style={{ width: '6rem' }}>Hex</th>
+      <th style={{ width: '13rem' }}>RGB</th>
+    </tr>
+  </thead>
+  <tbody>
+    <ColorRow
+      swatchClass="bg-white"
+      name="White"
+      token="white"
+    />
+    <ColorRow
+      swatchClass="bg-off-white"
+      name="Off White"
+      token="off-white"
+    />
+    <ColorRow
+      swatchClass="bg-gray-light"
+      name="Gray Light"
+      token="gray-light"
+    />
+    <ColorRow
+      swatchClass="bg-gray-light-mid"
+      name="Gray Light Mid"
+      token="gray-light-mid"
+    />
+    <ColorRow
+      swatchClass="bg-gray-mid"
+      name="Gray Mid"
+      token="gray-mid"
+    />
+    <ColorRow
+      swatchClass="bg-gray-mid-dark"
+      name="Gray Mid Dark"
+      token="gray-mid-dark"
+    />
+    <ColorRow
+      swatchClass="bg-gray-dark"
+      name="Gray Dark"
+      token="gray-dark"
+    />
+    <ColorRow
+      swatchClass="bg-black"
+      name="Black"
+      token="black"
+    />
+  </tbody>
+</table>
+
+Although several gradations are available via Tailwind CSS classNamees, make sure to only use the intended colors for text:
+
+- <div className="w-3 h-3 bg-gray-dark inline-block"></div>
+  <code>.text-gray-dark</code>
+- <div className="w-3 h-3 bg-gray-mid-dark inline-block"></div>
+  <code>.text-gray-mid-dark</code>
+- <div className="w-3 h-3 bg-gray-mid inline-block"></div>
+  <code>.text-gray-mid</code>
+
+<span id="semantic-colors"></span>
+
+## Semantic Colors
+
+Recommended for use in forms, alerts, or any element meant to communicate a state.
+
+**Note:** Color should never be the _only_ means used to convey state information;
+it must always be accompanied by text or iconography that makes it clear for colorblind users.
+
+<table>
+  <thead>
+    <tr>
+      <th style={{ width: '12rem' }}>Color</th>
+      <th>Name</th>
+      <th style={{ width: '12rem' }}>Token</th>
+      <th style={{ width: '6rem' }}>Hex</th>
+      <th style={{ width: '13rem' }}>RGB</th>
+    </tr>
+  </thead>
+  <tbody>
+    <ColorRow
+      swatchClass="bg-warning-light"
+      name="Alert Light"
+      token="warning-light"
+    />
+    <ColorRow
+      swatchClass="bg-warning"
+      name="Alert"
+      token="warning"
+    />
+    <ColorRow
+      swatchClass="bg-warning-dark"
+      name="Alert Dark"
+      token="warning-dark"
+    />
+    <ColorRow
+      swatchClass="bg-error-light"
+      name="Error Light"
+      token="error-light"
+    />
+    <ColorRow
+      swatchClass="bg-error"
+      name="Error"
+      token="error"
+    />
+    <ColorRow
+      swatchClass="bg-error-dark"
+      name="Error Dark"
+      token="error-dark"
+    />
+    <ColorRow
+      swatchClass="bg-success-light"
+      name="Success Light"
+      token="success-light"
+    />
+    <ColorRow
+      swatchClass="bg-success"
+      name="Success"
+      token="success"
+    />
+    <ColorRow
+      swatchClass="bg-success-dark"
+      name="Success Dark"
+      token="success-dark"
+    />
+    <ColorRow
+      swatchClass="bg-focus-light"
+      name="Focus Light"
+      token="focus-light"
+    />
+    <ColorRow
+      swatchClass="bg-focus"
+      name="Focus"
+      token="focus"
+    />
+    <ColorRow
+      swatchClass="bg-focus-dark"
+      name="Focus Dark"
+      token="focus-dark"
+    />
+    <ColorRow
+      swatchClass="bg-disabled"
+      name="Disabled"
+      token="disabled"
+    />
+  </tbody>
+</table>
+
+<span id="tokens"></span>
+
+## Tokens
+
+All colors are available via Tailwind CSS classNamees using tokens:
+
+```
+.bg-{token}
+.text-{token}
+.border-{token}
+```

package/src/docs/foundation/typography.docs.mdx

@@ -7,15 +7,20 @@ import * as Stories from './typography.stories'
 
 ## Fonts
 
-Below are all fonts used in the design system.
+Helvetica Now is the main typeface used in Explorer-1. Each family has a specific use-case:
 
-### Metropolis
+### Helvetica Now Display
 
-Metropolis is used for all heading levels and body copy.
+<em>Display</em> is used for headlines and other large text. It is also used in body text when the
+font size is large enough.
 
-### Archivo Narrow
+### Helvetica Now Text
 
-Archivo Narrow is used for subtitles and buttons and is always used in UPPERCASE.
+<em>Text</em> is used for regular-sized text.
+
+### Helvetica Now Micro
+
+Helvetica Now Micro is used for subtitles and buttons and in UPPERCASE. It also used for small text (captions) in normal-case.
 
 <Canvas of={Stories.Fonts} />
 

package/src/docs/utils/ColorRow.jsx

@@ -0,0 +1,138 @@
+// .storybook/components/ColorRow.jsx
+
+import React, { useState, useEffect, useRef } from 'react'
+
+// Helper function to convert "rgb(r, g, b)" to "#RRGGBB"
+const rgbToHex = (rgb) => {
+  // Match the numbers in 'rgb(r, g, b)'
+  const match = rgb.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+  if (!match) return rgb // Return original if not a standard rgb string
+
+  // Convert each number (0-255) to a 2-digit hex string
+  const toHex = (c) => ('0' + parseInt(c, 10).toString(16)).slice(-2)
+
+  return `#${toHex(match[1])}${toHex(match[2])}${toHex(match[3])}`
+}
+
+export const ColorRow = ({ swatchClass, name, token }) => {
+  const [copied, setCopied] = useState(false)
+  // This state will hold the color we read from the DOM
+  const [computedToken, setToken] = useState('')
+  const [computedHex, setComputedHex] = useState('')
+  const [computedRgb, setRgbColor] = useState('')
+  // This ref gives us access to the swatch <div> element
+  const swatchRef = useRef(null)
+
+  // This effect runs after the component renders
+  useEffect(() => {
+    // We only run this if the ref is attached to an element
+    if (swatchRef.current) {
+      // 1. Get the computed style from the DOM element
+      const style = window.getComputedStyle(swatchRef.current)
+      const rgbColor = style.backgroundColor
+      // 2. Convert the 'rgb(r, g, b)' string to a hex string
+      setComputedHex(rgbToHex(rgbColor))
+      // 3. Also save the rgb values
+      setRgbColor(rgbColor)
+      // 4. Also save the token
+      setToken(token)
+    }
+  }, [swatchClass]) // Re-run if the class name changes
+
+  const copyHexToClipboard = () => {
+    if (!computedHex) return // Don't copy if we haven't read the color yet
+    navigator.clipboard
+      .writeText(computedHex)
+      .then(() => {
+        setCopied(true)
+        // Reset the "Copied!" text after 2 seconds
+        setTimeout(() => setCopied(false), 2000)
+      })
+      .catch((err) => {
+        console.error('Failed to copy: ', err)
+      })
+  }
+
+  const copyRgbToClipboard = () => {
+    if (!computedRgb) return // Don't copy if we haven't read the color yet
+    navigator.clipboard
+      .writeText(computedRgb)
+      .then(() => {
+        setCopied(true)
+        // Reset the "Copied!" text after 2 seconds
+        setTimeout(() => setCopied(false), 2000)
+      })
+      .catch((err) => {
+        console.error('Failed to copy: ', err)
+      })
+  }
+
+  const copyTokenToClipboard = () => {
+    if (!computedToken) return // Don't copy if we haven't read the color yet
+    navigator.clipboard
+      .writeText(computedToken)
+      .then(() => {
+        setCopied(true)
+        // Reset the "Copied!" text after 2 seconds
+        setTimeout(() => setCopied(false), 2000)
+      })
+      .catch((err) => {
+        console.error('Failed to copy: ', err)
+      })
+  }
+
+  return (
+    <tr>
+      {/* Column 1: The Swatch */}
+      <td>
+        <div
+          ref={swatchRef}
+          className={swatchClass}
+          onClick={copyHexToClipboard}
+          title={computedHex ? `Click to copy ${computedHex}` : 'Copy color'}
+          style={{
+            width: '100%',
+            height: '30px',
+            cursor: 'pointer'
+          }}
+        />
+      </td>
+
+      {/* Column 2: The Name */}
+      <td>{name}</td>
+
+      {/* Column 3: The Token */}
+      <td>
+        <button
+          className="text-left w-full hover:text-blue-500"
+          title={computedToken ? `Click to copy ${computedToken}` : 'Copy color'}
+          onClick={copyTokenToClipboard}
+        >
+          <code>{token}</code>
+        </button>
+      </td>
+
+      {/* Column 4: Feedback Text */}
+      <td style={{ minWidth: '70px', textAlign: 'center' }}>
+        {/* {copied ? <strong>Copied!</strong> : ''} */}
+        <button
+          className="text-left w-full hover:text-blue-500"
+          title={computedHex ? `Click to copy ${computedHex}` : 'Copy color'}
+          onClick={copyHexToClipboard}
+        >
+          <code>{computedHex}</code>
+        </button>
+      </td>
+      {/* Column 5: Copy RGB*/}
+      <td style={{ minWidth: '70px', textAlign: 'left' }}>
+        <button
+          className="text-left w-full hover:text-blue-500"
+          title={computedRgb ? `Click to copy ${computedRgb}` : 'Copy color'}
+          onClick={copyRgbToClipboard}
+        >
+          <code>{computedRgb}</code>
+        </button>
+      </td>
+    </tr>
+  )
+}

package/src/templates/PageEventDetail/PageEventDetail.vue

@@ -220,7 +220,7 @@
       <BlockLinkCarousel
         item-type="cards"
         class="print:!px-4"
-        heading="MORE EVENTS"
+        heading="More Events"
         :items="moreEvents"
       />
     </div>

package/src/templates/PageImageDetail/PageImageDetail.vue

@@ -108,7 +108,7 @@
             v-if="data.relatedMission && data.relatedMission.length"
             class="lg:mb-16 mb-8"
           >
-            <span class="font-secondary w-full text-base tracking-wider uppercase"> Mission </span>
+            <span class="font-secondary w-full text-base uppercase"> Mission </span>
             <ul>
               <li
                 v-for="(block, index) in data.relatedMission"
@@ -150,7 +150,7 @@
             v-if="data.targets && data.targets.length"
             class="lg:mb-16 mb-8"
           >
-            <span class="font-secondary w-full text-base tracking-wider uppercase"> Target </span>
+            <span class="font-secondary w-full text-base uppercase"> Target </span>
             <ul>
               <li
                 v-for="(item, index) in data.targets"
@@ -170,9 +170,7 @@
             v-if="data.spacecraft && data.spacecraft.length"
             class="lg:mb-16 mb-8"
           >
-            <span class="font-secondary w-full text-base tracking-wider uppercase">
-              Spacecraft
-            </span>
+            <span class="font-secondary w-full text-base uppercase"> Spacecraft </span>
             <ul>
               <li
                 v-for="(item, index) in data.spacecraft"
@@ -188,9 +186,7 @@
             v-if="data.instruments && data.instruments.length"
             class="lg:mb-16 mb-8"
           >
-            <span class="font-secondary w-full text-base tracking-wider uppercase">
-              Instrument
-            </span>
+            <span class="font-secondary w-full text-base uppercase"> Instrument </span>
             <ul>
               <li
                 v-for="(item, index) in data.instruments"
@@ -207,7 +203,7 @@
             v-if="data.image.credit"
             class="lg:mb-16 mb-8"
           >
-            <span class="font-secondary w-full text-base tracking-wider uppercase"> Credit </span>
+            <span class="font-secondary w-full text-base uppercase"> Credit </span>
             <BlockText :text="data.image.credit" />
           </div>
         </aside>
@@ -222,7 +218,7 @@
       indent="col-2"
     >
       <h2
-        class="font-primary text-gray-dark lg:mb-5 lg:text-6xl mb-6 text-3xl font-semibold leading-normal tracking-normal uppercase"
+        class="font-primary text-gray-dark lg:mb-5 lg:text-6xl mb-6 text-3xl font-bold leading-normal tracking-normal uppercase"
       >
         Keep Exploring
       </h2>

package/src/templates/PageNewsDetail/PageNewsDetail.vue

@@ -81,7 +81,7 @@
         :text="data.topper"
       />
       <p
-        class="text-body-lg font-semibold"
+        class="text-body-lg font-bold"
         itemprop="abstract"
       >
         {{ data.summary }}

package/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue

@@ -35,7 +35,7 @@
       >
         <BasePill
           variant="primary"
-          size="lg"
+          size="md"
           :text="data.eventType"
         />
       </div>
@@ -125,7 +125,7 @@
 
             <p
               v-if="data.summary"
-              class="BlockText text-body-lg mb-8 px-4 lg:px-0 font-semibold"
+              class="BlockText text-body-lg mb-8 px-4 lg:px-0 font-bold"
             >
               {{ data.summary }}
             </p>

package/src/templates/edu/PageEduHome/PageEduHome.vue

@@ -89,7 +89,7 @@ const submitSearch = () => {
                 class="md:flex flex-row mt-10"
               >
                 <h2
-                  class="text-subtitle mt-1 text-white font-semibold whitespace-nowrap mr-5 mb-3 md:mb-0 lg:mr-8"
+                  class="text-subtitle mt-1 text-white font-bold whitespace-nowrap mr-5 mb-3 md:mb-0 lg:mr-8"
                 >
                   Hot Topics
                 </h2>

package/src/templates/edu/PageEduMultimediaDetail/PageEduMultimediaDetail.vue

@@ -364,7 +364,7 @@ const { data } = reactive(props)
             v-if="creditText"
             class="lg:mb-16 mb-8"
           >
-            <span class="font-secondary w-full text-base tracking-wider uppercase"> Credit </span>
+            <span class="font-secondary w-full text-base uppercase"> Credit </span>
             <BlockText :text="creditText" />
           </div>
         </aside>

package/src/templates/edu/PageEduNewsDetail/PageEduNewsDetail.vue

@@ -147,7 +147,7 @@ defineExpose({
         :text="data.topper"
       />
       <p
-        class="text-body-lg font-semibold"
+        class="text-body-lg font-bold"
         itemprop="abstract"
       >
         {{ data.summary }}

package/src/templates/www/PageCuratedGallery/PageCuratedGallery.vue

@@ -57,7 +57,7 @@
           <!-- toggle gallery view -->
           <div
             v-if="allowGridView"
-            class="align-end flex text-2xl font-secondary font-semibold tracking-wider"
+            class="align-end flex text-2xl font-secondary font-bold"
           >
             <button
               class="lg:ml-6"