@explorer-1/vue 0.1.0 → 0.1.2

package/src/components/TopicDetailMissionCarouselItem/TopicDetailMissionCarouselItem.stories.js

@@ -3,7 +3,7 @@
 import TopicDetailMissionCarouselItem from './TopicDetailMissionCarouselItem.vue'
 
 export default {
-  title: 'WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarouselItem',
+  title: 'Components/WWW/TopicDetail/MissionCarousel/TopicDetailMissionCarouselItem',
   component: TopicDetailMissionCarouselItem,
   decorators: [
     () => ({
@@ -35,4 +35,4 @@ export const TopicDetailMissionCarouselItemData = {
   url: '/missions/gravity-recovery-and-climate-experiment-follow-on-grace-fo/'
 }
 
-export const SingleItem = { args: { data: TopicDetailMissionCarouselItemData } }
+export const BaseStory = { args: { data: TopicDetailMissionCarouselItemData } }

package/src/components/TopicDetailMissionSpotlight/TopicDetailMissionSpotlight.stories.js

@@ -1,6 +1,6 @@
 import TopicDetailMissionSpotlight from './TopicDetailMissionSpotlight.vue'
 export default {
-  title: 'WWW/TopicDetail/TopicDetailMissionSpotlight',
+  title: 'Components/WWW/TopicDetail/TopicDetailMissionSpotlight',
   component: TopicDetailMissionSpotlight,
   decorators: [
     () => ({
@@ -50,7 +50,7 @@ export const TopicDetailMissionSpotlightData = {
 }
 
 // stories
-export const MissionSpotlight = {
+export const BaseStory = {
   args: {
     data: TopicDetailMissionSpotlightData
   }

package/src/components/TopicDetailMore/TopicDetailMore.stories.js

@@ -1,6 +1,6 @@
 import TopicDetailMore from './TopicDetailMore.vue'
 export default {
-  title: 'WWW/TopicDetail/TopicDetailMore',
+  title: 'Components/WWW/TopicDetail/TopicDetailMore',
   component: TopicDetailMore,
   excludeStories: /.*Data$/
 }
@@ -181,7 +181,7 @@ export const TopicDetailMoreData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     topic: 'Mars',
     more: TopicDetailMoreData.moreAboutTopic,

package/src/components/TopicDetailMoreItem/TopicDetailMoreItem.stories.js

@@ -1,6 +1,6 @@
 import TopicDetailMoreItem from './TopicDetailMoreItem.vue'
 export default {
-  title: 'WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
+  title: 'Components/WWW/TopicDetail/TopicDetailMore/TopicDetailMoreItem',
   component: TopicDetailMoreItem,
   decorators: [
     () => ({
@@ -84,7 +84,7 @@ const TopicDetailMoreItemData = {
 }
 
 // stories
-export const Default = {
+export const BaseStory = {
   args: {
     data: TopicDetailMoreItemData.default
   }

package/src/components/TopicDetailStreamfield/TopicDetailStreamfield.stories.js

@@ -4,7 +4,7 @@ import { BlockRelatedLinksData } from './../BlockRelatedLinks/BlockRelatedLinks.
 import TopicDetailStreamfield from './TopicDetailStreamfield.vue'
 
 export default {
-  title: 'WWW/TopicDetail/TopicDetailStreamfield',
+  title: 'Components/WWW/TopicDetail/TopicDetailStreamfield',
   component: TopicDetailStreamfield,
   decorators: [
     () => ({
@@ -31,4 +31,4 @@ export const TopicDetailStreamfieldData = {
   ]
 }
 
-export const Default = { args: { data: TopicDetailStreamfieldData.body, topic: 'Topic Name' } }
+export const BaseStory = { args: { data: TopicDetailStreamfieldData.body, topic: 'Topic Name' } }

package/src/components/YearTicker/YearTicker.stories.js

@@ -1,7 +1,7 @@
 import YearTicker from './YearTicker.vue'
 
 export default {
-  title: 'Components/YearTicker',
+  title: 'Components/Utilities/YearTicker',
   component: YearTicker,
   excludeStories: /.*Data$/
 }
@@ -33,5 +33,5 @@ const YearTickerTemplate = (args) => ({
   template: `<YearTicker :targetYear="demoYear"/>`
 })
 
-export const Default = YearTickerTemplate.bind({})
-Default.storyName = 'YearTicker'
+export const BaseStory = YearTickerTemplate.bind({})
+BaseStory.storyName = 'YearTicker'

package/src/docs/foundation/color.docs.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Canvas } from '@storybook/blocks'
 
-<Meta title="Foundation/Colors" />
+<Meta title="Foundations/Colors" />
 
 # Colors
 

package/src/docs/foundation/grid.stories.js

@@ -1,6 +1,6 @@
 import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
 export default {
-  title: 'Foundation/Grid and Layout',
+  title: 'Foundations/Grid and Layout',
   component: LayoutHelper,
   tags: ['!autodocs']
 }

package/src/docs/foundation/grid_layouthelpers.stories.js

@@ -3,7 +3,7 @@ import LayoutHelper, { indents } from './../../components/LayoutHelper/LayoutHel
 // TODO: DOCS: update this to match the full grid/layout documentation
 
 export default {
-  title: 'Foundation/Grid and Layout/Column Layout Helpers',
+  title: 'Foundations/Grid and Layout/Column Layout Helpers',
   component: LayoutHelper,
   tags: ['!autodocs'],
   argTypes: {

package/src/docs/foundation/themes.stories.js

@@ -1,7 +1,7 @@
 import DynamicTokens from './DynamicTokens.vue'
 
 export default {
-  title: 'Foundation/Themes',
+  title: 'Foundations/Themes',
   component: DynamicTokens,
   tags: ['!autodocs']
 }

package/src/docs/foundation/typography.stories.js

@@ -3,9 +3,8 @@ import IconLocation from './../../components/Icons/IconLocation.vue'
 import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
 
 export default {
-  title: 'Foundation/Typography',
+  title: 'Foundations/Typography',
   component: FontVariants,
-  subcomponents: { BaseHeading, IconLocation },
   tags: ['!autodocs']
 }
 
@@ -108,7 +107,7 @@ export const HeadingIcons = {
 export const TextContrast = {
   args: {},
   render: () => ({
-    template: `<div style="background-image: url(/explorer-1/bg-stars.jpg); background-color: #000;" class="bg-cover bg-no-repeat bg-center">
+    template: `<div style="background-image: url('https://picsum.photos/1000/400');" class="bg-cover bg-no-repeat bg-center">
   <div class="p-10 bg-black/30">
     <span class="text-h3 text-white text-contrast">
       This text uses a text shadow that increases readability when used with a semi-transparent overlay.

package/src/docs/getting-started/designer.docs.mdx

@@ -0,0 +1,18 @@
+import { Meta, Description } from '@storybook/blocks'
+
+<Meta title="Getting Started/Designer" />
+
+# Getting Started Guide for Designers
+
+Designers are encouraged to browse through the Explorer 1 Storybook to become familiar with the design system and its offerings and limitations. Most of the documentation is developer-focused, but the following sections provide helpful overviews:
+
+## Design system foundations
+
+- [Colors](?path=/docs/foundation-colors--docs)
+- [Typography](?path=/docs/foundation-typography--docs)
+- [Icons](?path=/docs/foundation-icons--docs)
+- [Grid and Layout](?path=/docs/foundation-grid-and-layout--docs)
+
+## Components
+
+Explorer 1 comprises components that range from very simple, single-purpose elements to complex combinations of multiple other components. We've categorized these into a few broad buckets, but the lines between them are blurry. Learn more about the types of components offered by Explorer 1 and how to use them by starting on our [Components overview](?path=/docs/components-overview--docs) page.

package/src/docs/getting-started/developer.docs.mdx

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Getting Started/Developer" />
+
+# Getting Started Guide for Developers
+
+To use the Explorer 1 design system, there are three things you will need:
+
+1. [The @nasa-jpl/explorer-1 npm package](#using-the-npm-package)
+2. [Familiarity with the design system foundations](#design-system-foundations)
+3. [Components and HTML templates](#components-and-html-templates)
+
+<span id="using-the-npm-package"></span>
+
+## Using the npm package
+
+[![npm](https://img.shields.io/npm/v/@nasa-jpl/explorer-1)](https://npmjs.com/package/@nasa-jpl/explorer-1)
+
+This package includes all of the frontend assets (JS and SCSS) necessary to create components using the HTML markup examples in this Storybook. For information on how to install and use the npm package, please refer to the [@nasa-jpl/explorer-1 README](https://github.com/nasa-jpl/explorer-1).
+
+<span id="design-system-foundations"></span>
+
+## Design system foundations
+
+Usage of the Explorer 1 design system is based on utility CSS classes, specifically Tailwind CSS, a utility-first CSS framework. We recommended becoming familiar with [how to use Tailwind CSS](https://tailwindcss.com/docs).
+
+Browse the [Foundation section](?path=/docs/foundation-colors--docs) of this Storybook to become familiar with how to use utility classes for:
+
+- [Colors](?path=/docs/foundation-colors--docs)
+- [Typography](?path=/docs/foundation-typography--docs)
+- [Icons](?path=/docs/foundation-icons--docs)
+- [Grid and Layout](?path=/docs/foundation-grid-and-layout--docs)
+
+<span id="components-and-html-templates"></span>
+
+## Components and HTML templates
+
+Explorer 1 comprises components that range from very simple, single-purpose elements to complex combinations of multiple other components. We've categorized these into a few broad buckets, but the lines between them are blurry. Learn more about the types of components offered by Explorer 1 and how to use them by starting on our [Components overview](?path=/docs/components-overview--docs) page.
+
+### HTML templates
+
+HTML templates are provided by this Storybook in both Docs view and Canvas view. You can also modify the component "controls" to customize the component.
+
+#### How to copy HTML snippets from Docs view
+
+1. Find the story block you want to copy.
+2. In the bottom right corner of the block, click on "Show code".
+3. In the bottom right corner of the now-visible code block, click on "Copy".
+
+<details className="pl-4 -mt-3 text-sm">
+  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Docs view</span></summary>
+
+![how to copy snippets from Docs view](./gif/html-storybook-simple.gif)
+
+</details>
+
+4. You can customize the component by modifying the controls. The code will update to match.
+
+<details className="pl-4 -mt-3 text-sm">
+  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to customize a component</span></summary>
+
+![how to customize a component](./gif/html-storybook-customized.gif)
+
+</details>
+
+#### How to copy HTML snippets from Canvas view
+
+Canvas view is useful to isolate your view to a single rendition of the component. Some components are also only available in Canvas view.
+
+1. To switch to Canvas view, find the component you want and click on the "Canvas" tab in the upper left.
+2. Make sure addons (the tabbed pane under the rendered component) are enabled by clicking on the three dots to the right of the JPL logo and checking "Show addons", or by typing `A`. If you still don't see the addons pane, you may need to toggle "Change addons orientation" in the menu (or type `D`) a couple times.
+3. Click on the "HTML" tab within the addons pane.
+4. Click on "Copy" in the bottom right of the screen or manually copy and paste the code block.
+5. You can also customize the component by modifying the controls in the "Controls" tab within the Add-ons viewer. The code will update to match.
+
+<details className="pl-4 text-sm">
+  <summary> <span className="font-medium border-b border-blue hover:border-gray-dark">Watch how to copy snippets from Canvas view</span></summary>
+
+![how to copy snippets from Canvas view](./gif/storybook-canvas.gif)
+
+</details>

package/src/docs/guides/accessibility.docs.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta
+  title="Guides/Accessibility"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Accessibility
+
+Usage of Explorer 1 must be in compliance with [Section 508 of the Rehabilitation Act of 2001](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/final-rule/text-of-the-standards-and-guidelines) which states that:
+
+> Electronic content shall conform to Level A and Level AA Success Criteria and Conformance Requirements in [WCAG 2.0](https://www.w3.org/TR/WCAG20/)
+
+## Our QA Strategy
+
+To meet compliance requirements, we use the following strategy:
+
+1. When developing a component, employ best practices to make individual components accessible.
+2. Follow up with [manual testing](#manual-testing) of the component.
+3. Use automated accessibility tests as part of our CI/CD process for any final checks.
+4. Finally, run checks (manual and automated) on select full pages.
+
+### Automated testing options
+
+Automated tests are a good baseline, but note they can only find [30 to 40% of issues](https://alphagov.github.io/accessibility-tool-audit/).
+
+- For individual components, the Explorer 1 Storybook uses the [a11y addon](https://github.com/storybookjs/storybook/tree/master/addons/a11y), and in some cases [Axe](https://www.deque.com/axe/) in jsdom via Storyshots
+- For full pages, [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) checks are recommended.
+
+<span id="manual-testing"></span>
+
+### Manual testing
+
+When conducting manual accessibility testing, check for the following as a baseline:
+
+- Keyboard-only navigation is possible
+- Screen reader announces the UI as expected
+- Mobile touch interaction testing with iOS Safari or Android
+- Zoom the whole browser UI, or font size, or on-screen magnifier

package/src/docs/guides/responsive.docs.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import * as Stories from './responsive.stories'
+
+<Meta of={Stories} />
+
+# Responsive Design
+
+Responsive design adapts the flow and layout of information to respond to a user’s behavior and environment based on screen size, platform and orientation. Adapting the flow of information and visual elements may sometimes require an optimized user experience to help fit content within certain parameters of a particular display or device. It may also require limiting the layout of the design to only include necessary modules, depending on a device’s parameters and resolution.
+
+- [Breakpoints and Containers](#breakpoints-and-containers)
+- [Maximum Width](#maximum-width)
+- [Tokens](#tokens)
+
+<span id="breakpoints-and-containers"></span>
+
+## Breakpoints and Containers
+
+> The examples on this page illustrate breakpoints based on viewport size. Try changing your browser size to see how the examples adapt. You can also switch over to canvas view and toggle through different viewport sizes using the toolbar menu.
+
+Breakpoints are the values at which content included on a webpage is resized and reflowed to fit a screen size on a particular device. Designing for different breakpoints allows designers and developers to optimize the display of information for mobile, tablet and desktop users alike.
+
+We set our breakpoints and associated containers via the `screens` and `containers.screens` options in our [Tailwind CSS configuration](?path=/docs/appendix-tailwindcss--docs). These containers are used in conjunction with our [Grid](?path=/docs/foundation-grid-and-layout--docs) to create the site and page layouts, all the way down to the component level.
+
+| Screen Token | Viewport `min-width` | `.container` `max-width` |
+| :----------- | -------------------: | -----------------------: |
+| `sm`         |              `640px` |                  `640px` |
+| `md`         |              `768px` |                  `768px` |
+| `lg`         |             `1024px` |                 `1024px` |
+| `xl`         |             `1280px` |                 `1280px` |
+| `2xl`        |             `1440px` |                 `1320px` |
+| `3xl`        |             `1800px` |                 `1320px` |
+
+The below example uses [Tokens](#tokens) to set the maximum width based on the screens defined in our Tailwind config. It also illustrates the foundation of the design system's layout for desktop screens.
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.Demo}
+/>
+
+<span id="maximum-width"></span>
+
+## Maximum width
+
+Explorer 1 uses screen `3xl` as its maximum width. No content in a component, not even in those labeled as "full bleed," ever exceeds `3xl`, although visual layout elements may (i.e. background colors). You can find examples of this in our [Grid & Layout](?path=/docs/foundation-grid-and-layout--docs#page-layout-recommendations) documentation.
+
+```html
+<div class="max-w-screen-3xl mx-auto">Content</div>
+```
+
+<span id="tokens"></span>
+
+## Tokens
+
+Screen tokens are used with Tailwind CSS classes to control widths:
+
+`.max-w-screen-{token}`
+
+They can also be used as directives for writing media queries:
+
+```css
+@screen lg {
+  /* rules for large screens */
+}
+@screen xl {
+  /* rules for xl screens */
+}
+```

package/src/docs/guides/responsive.stories.js

@@ -0,0 +1,36 @@
+import LayoutHelper from './../../components/LayoutHelper/LayoutHelper.vue'
+
+export default {
+  title: 'Guides/Responsive Design',
+  component: LayoutHelper,
+  tags: ['!autodocs']
+}
+
+export const Demo = {
+  args: {},
+  render: () => ({
+    template: `<div class="bg-gray-light border">
+  <code>body</code>
+  <div class="max-w-screen-3xl mx-auto bg-black text-white">
+    <code>.max-w-screen-3xl</code>
+      <div class="sm:BaseGrid container mx-auto bg-gray-light text-black">
+        <div class="col-start-1 col-end-13">
+          <code class="text-black">.container with nested grid</code>
+        </div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">1</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">2</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">3</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">4</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">5</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">6</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">7</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">8</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">9</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">10</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">11</div>
+        <div class="text-center border border-dashed border-gray-mid-dark p-4">12</div>
+      </div>
+  </div>
+</div>`
+  })
+}

package/src/docs/introduction.docs.mdx

@@ -0,0 +1,42 @@
+import { Meta, Description } from '@storybook/blocks'
+
+<Meta title="Introduction" />
+
+# Explorer 1
+
+## JPL's Design System
+
+Consisting of working code, design components, guidelines, and resources, JPL's design system for digital experiences—called **Explorer 1**—helps JPL's product teams build more efficiently, at scale, and on brand. It is maintained by JPL's DesignLab team and regularly evolves to meet the changing needs of the Lab.
+
+##### GOALS:
+
+The design system aims to help UI consistency and quality, streamline the design and development process and provide guidance for design and development efforts.
+
+<br />
+
+## Design System Benefits
+
+##### EFFICIENCY
+
+Designers no longer need to repeatedly rebuild components from scratch. A shared library of components streamlines this process and leaves little room for error.
+
+##### CONSISTENCY
+
+Having a shared set of principles and rules to build components makes it easier to create consistent user experiences that accurately reflect JPL across a variety of platforms.
+
+##### SCALE
+
+Increased efficiency and consistency facilitate building products that scale
+
+<br />
+
+## How to use this website
+
+This website uses [Storybook](https://storybook.js.org/) to display our documentation and components. If you are new to the platform, we recommend reviewing Storybook's intro on how to [browse stories](https://storybook.js.org/docs/html/get-started/browse-stories). We also provide in-depth getting started guides for [developers](?path=/docs/getting-started-developer--docs) and [designers](?path=/docs/getting-started-designer--docs).
+
+<br />
+<br />
+
+---
+
+Maintained by [DesignLab](https://www.behance.net/JPL-DesignLab)

package/src/docs/overviews/base.docs.mdx

@@ -0,0 +1,88 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BaseButtonStories from './../../components/BaseButton/BaseButton.stories'
+import * as BaseHeadingStories from './../../components/BaseHeading/BaseHeading.stories'
+import * as BaseImageStories from './../../components/BaseImage/BaseImage.stories'
+import * as BaseImageCaptionStories from './../../components/BaseImageCaption/BaseImageCaption.stories'
+import * as BaseImagePlaceholderStories from './../../components/BaseImagePlaceholder/BaseImagePlaceholder.stories'
+import * as BaseLinkStories from './../../components/BaseLink/BaseLink.stories'
+import * as BasePlaceholderStories from './../../components/BasePlaceholder/BasePlaceholder.stories'
+
+<Meta title="Components/Base/Overview" />
+
+# Base Components
+
+Base components are the simplest elements that sometimes stand on their own, but more often are used in combination with others to assemble larger components.
+
+- [Basic elements](#basic-elements)
+- [Media](#media)
+- [Other](#other)
+
+<br />
+
+<span id="basic-elements"></span>
+
+## Basic elements
+
+<ComponentList
+  components={[
+    {
+      heading: 'BaseLink',
+      meta: BaseLinkStories,
+      path: '/docs/components-base-baselink--docs'
+    },
+    {
+      heading: 'BaseButton',
+      meta: BaseButtonStories,
+      path: '/docs/components-base-basebutton--docs'
+    },
+    {
+      heading: 'BaseHeading',
+      meta: BaseHeadingStories,
+      path: '/docs/components-base-baseheading--docs'
+    }
+  ]}
+/>
+
+<br />
+
+<span id="media"></span>
+
+## Media
+
+<ComponentList
+  components={[
+    {
+      heading: 'BaseImage',
+      meta: BaseImageStories,
+      path: '/docs/components-base-baseimage--docs'
+    },
+    {
+      heading: 'BaseImageCaption',
+      meta: BaseImageCaptionStories,
+      path: '/docs/components-base-baseimagecaption--docs'
+    },
+    {
+      heading: 'BaseImagePlaceholder',
+      customDescription: 'A backdrop for lazy-loaded images that can fill a set aspect ratio.',
+      meta: BaseImagePlaceholderStories,
+      path: '/docs/components-base-baseimageplaceholder--docs'
+    }
+  ]}
+/>
+
+<br />
+
+<span id="other"></span>
+
+## Other
+
+<ComponentList
+  components={[
+    {
+      heading: 'BasePlaceholder',
+      meta: BasePlaceholderStories,
+      path: '/docs/components-base-baseplaceholder--docs'
+    }
+  ]}
+/>