@explorer-1/vue 0.1.1 → 0.1.2

package/src/docs/overviews/forms.docs.mdx

@@ -0,0 +1,59 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as FormContactStories from './../../components/FormContact/FormContact.stories'
+import * as TextInputStories from './../../components/TextInput/TextInput.stories'
+import * as TextAreaStories from './../../components/TextArea/TextArea.stories'
+import * as BaseButtonStories from './../../components/BaseButton/BaseButton.stories'
+
+<Meta title="Components/Forms/Overview" />
+
+# Form Components
+
+Form styles are currently limited to text inputs and text areas. Explorer 1 does not include any form functionality other than native HTML form controls. If you require more functionality in your forms,
+you will need to build that into your implementation of the design system.
+
+You can construct a form by combining the following components:
+
+<ComponentList
+  components={[
+    {
+      heading: 'TextInput',
+      meta: TextInputStories,
+      path: '/docs/components-forms-textinput--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-2xs'
+    },
+    {
+      heading: 'TextArea',
+      meta: TextAreaStories,
+      path: '/docs/components-forms-textarea--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-xs'
+    },
+    {
+      heading: 'BaseButton',
+      customDescription:
+        'Our usual base button component. This component is not limited to usage in forms.',
+      meta: BaseButtonStories,
+      path: '/docs/components-base-basebutton--docs'
+    }
+  ]}
+/>
+
+<br />
+
+## Contact Form
+
+Below is contact form that was created using the above components and a couple `div` wrappers to adjust spacing between fields.
+
+<Canvas
+  meta={FormContactStories}
+  of={FormContactStories.BaseStory}
+/>
+
+Depending on your framework, you will need to modify the `<form>` attributes and possibly convert the submit `<button>` to an input, such as:
+
+```html
+<input
+  type="submit"
+  class="BaseButton text-contrast-none inline-block -primary"
+/>
+```

package/src/docs/overviews/global.docs.mdx

@@ -0,0 +1,15 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+
+<Meta
+  title="Navigation/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Navigation
+
+Use these components as global layout elements in your website or application.
+
+- [Headers](?path=/docs/navigation-headers-overview--docs)
+- [Footers](?path=/docs/navigation-footers-overview--docs)
+- [Secondary Navigation](?path=/docs/navigation-footers-overview--docs)

package/src/docs/overviews/global_footers.docs.mdx

@@ -0,0 +1,21 @@
+import { Meta, Canvas, Story } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as TheFooterStories from './../../components/TheFooter/TheFooter.stories'
+
+<Meta title="Navigation/Footers/Overview" />
+
+# Footers
+
+Footers are to be placed at the very bottom of your website or application. Footer styles are specific to your site's visibility and theme (internal vs. external/public). If you are using the [Internal Theme](?path=/docs/foundation-themes--docs#internal-theme), be sure to use the [Internal Footer](?path=/docs/global-layout-footers-for-internal-sites--docs). If your website or application is public-facing, be sure to use the External footer (coming soon).
+
+<ComponentList
+  components={[
+    {
+      heading: 'External Footer',
+      meta: TheFooterStories,
+      path: '/story/navigation-footers-external-footer--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>

package/src/docs/overviews/global_headers.docs.mdx

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as NavDesktopStories from './../../components/NavDesktop/NavDesktop.stories'
+import * as NavDesktopEduStories from './../../components/NavDesktopEdu/NavDesktopEdu.stories'
+
+<Meta title="Navigation/Headers/Overview" />
+
+# Headers
+
+Headers are to be placed at the very top of your website or application. Header styles are specific to your site's visibility (internal vs. external/public) and theme.
+
+<ComponentList
+  components={[
+    {
+      heading: 'External Header (WWW)',
+      meta: NavDesktopStories,
+      path: '/story/navigation-headers-www-navdesktop--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'External Header (EDU)',
+      meta: NavDesktopEduStories,
+      path: '/story/navigation-headers-edu-navdesktopedu--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>

package/src/docs/overviews/heroes.docs.mdx

@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as HeroSmallStories from './../../components/HeroMedium/HeroSmall.stories'
+import * as HeroMediumStories from './../../components/HeroMedium/HeroMedium.stories'
+import * as HeroLargeStories from './../../components/HeroLarge/HeroLarge.stories'
+import * as HeroMediaStories from './../../components/HeroMedia/HeroMedia.stories'
+import * as HeroListingIndexStories from './../../components/HeroListingIndex/HeroListingIndex.stories'
+
+<Meta title="Components/Heroes/Overview" />
+
+# Hero Blocks
+
+Hero components are reserved for usage at the top of the page. There should only be one hero per page. All hero blocks include page layout assumptions and use a max width of `max-w-screen-3xl`.
+
+<ComponentList
+  components={[
+    {
+      heading: 'Small',
+      meta: HeroSmallStories,
+      path: '/story/components-heroes-small--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'Medium',
+      meta: HeroMediumStories,
+      path: '/story/components-heroes-medium--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'Large',
+      customDescription:
+        'Includes a large text overlay that works best with background images that have a focal point on the right side of the image.',
+      meta: HeroLargeStories,
+      path: '/story/components-heroes-large--base-story',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'Media Only',
+      meta: HeroMediaStories,
+      path: '/docs/components-heroes-media-only--docs',
+      fullWidth: true,
+      fullCanvas: true,
+      canvasClass: 'sbdocs-inline-height'
+    },
+    {
+      heading: 'For Listing Pages',
+      meta: HeroListingIndexStories,
+      path: '/docs/components-heroes-for-listing-pages--docs',
+      fullWidth: true,
+      fullCanvas: true,
+      canvasClass: 'sbdocs-inline-height'
+    }
+  ]}
+/>

package/src/docs/overviews/mixins.docs.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as MixinAnimationCaretStories from './../../components/MixinAnimationCaret/MixinAnimationCaret.stories'
+import * as MixinVideoBgStories from './../../components/MixinVideoBg/MixinVideoBg.stories'
+import * as MixinCarouselStories from './../../components/MixinCarousel/MixinCarousel.stories'
+
+<Meta title="Mixins/Overview" />
+
+# Mixins
+
+Mixins are intended for developer use when creating new components, but aren't meant to be used alone, as they usually require additional components to function properly, or additional markup for accessibility. General users of Explorer 1 should look at [Base](?path=/docs/base-overview--docs) and [Block](?path=/docs/blocks-overview--docs) components instead.
+
+<br />
+
+<ComponentList
+  components={[
+    {
+      heading: 'MixinAnimationCaret',
+      meta: MixinAnimationCaretStories,
+      path: '/docs/mixins-mixinanimationcaret--docs'
+    },
+    {
+      heading: 'MixinVideoBg',
+      customDescription:
+        "A video mixin that autoplays a muted video and retains the video's aspect ratio. Useful for creating background video layouts.",
+      meta: MixinVideoBgStories,
+      path: '/docs/mixins-mixinvideobg--docs',
+      fullWidth: true,
+      fullCanvas: true
+    },
+    {
+      heading: 'MixinCarousel',
+      meta: MixinCarouselStories,
+      path: '/docs/mixins-mixincarousel--docs',
+      fullWidth: true,
+      fullCanvas: true
+    }
+  ]}
+/>

package/src/docs/overviews/search.docs.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as SearchInputStories from './../../components/SearchInput/SearchInput.stories'
+import * as SearchResultCardStories from './../../components/SearchResultCard/SearchResultCard.stories'
+
+<Meta
+  title="Components/Search/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Search Components
+
+Styles for a basic search input field and result items are available for use. Explorer 1 only provides styles for search components, it does not provide any search functionality.
+
+<ComponentList
+  components={[
+    {
+      heading: 'SearchInput',
+      meta: SearchInputStories,
+      path: '/docs/components-search-searchinput--docs'
+    },
+    {
+      heading: 'SearchResultCard',
+      meta: SearchResultCardStories,
+      path: '/docs/components-search-searchresultcard--docs',
+      canvasClass: 'sbdocs-inline-height sbdocs-inline-height-xs',
+      fullWidth: true
+    }
+  ]}
+/>

package/src/docs/overviews/utilities.docs.mdx

@@ -0,0 +1,22 @@
+import { Meta } from '@storybook/blocks'
+import { ComponentList } from './../utils/ComponentList'
+import * as BackToTopStories from './../../components/BackToTop/BackToTop.stories'
+
+<Meta
+  title="Components/Utilities/Overview"
+  parameters={{ viewMode: 'docs' }}
+/>
+
+# Utilities
+
+Components that provide specialized functionalities for enhancing the user experience.
+
+<ComponentList
+  components={[
+    {
+      heading: 'BackToTop',
+      meta: BackToTopStories,
+      path: '/docs/components-utilities-backtotop--docs'
+    }
+  ]}
+/>

package/src/docs/roadmap.docs.mdx

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Roadmap" />
+
+# Roadmap
+
+## Now
+
+- Add `BlockAccordion`
+- Add internal header and footer components
+- Add overview page for /Components/Blocks
+
+## Next
+
+- Components to support the EDU theme and functionality
+- Improvements to the accessibility guide and getting started guide for designers
+- Add more overview pages
+
+## Later
+
+- Adding branding assets (logos) in a downloadable format
+- Guidance on website headers and footers
+- Dependency graphs for each component
+- Multiple `dist` targets: purged, not purged, modern browsers only, etc.
+- Tailwind 3

package/src/docs/utils/ComponentItem.jsx

@@ -0,0 +1,102 @@
+/* eslint-disable prettier/prettier */
+/* Custom react component for rendering TOC of components
+ * docs: https://storybook.js.org/docs/react/writing-docs/docs-page#custom-inline-rendering
+ */
+
+import React from 'react'
+import { Canvas, Description } from '@storybook/blocks'
+
+export function ComponentItem(props) {
+  /*
+    props: {
+      heading,      // required: heading for the card, usually component name
+      meta,         // required: CSF exports (import * as Stories). CSF must have a Story export named "Default"
+      customDescription, // optional: override the CSF component description
+      canvasClass,  // optional: use sbdocs classes to adjust the height of the canvas
+      fullWidth,    // optional: if the canvas should be full width as opposed to side-by-side
+      fullCanvas,   // optional: if the canvas should be full bleed
+      hideCanvas,   // optional: if the canvas should be hidden
+    }
+  */
+
+  const hrefTo = (path) => {
+    return new Promise((resolve) => {
+      const { location } = document
+
+      // Drop the `iframe.html` from the preview path
+      const sbPath = location.pathname.replace(/iframe\.html$/, '')
+      const url = `${location.origin + sbPath}?${Object.entries({ path })
+        .map((item) => `${item[0]}=${item[1]}`)
+        .join('&')}`
+
+      parent.window.location = url
+    })
+  }
+  const navigate = (path) => {
+    hrefTo(path)
+  }
+  if (props.meta) {
+    let wrapperClass = 'text-base'
+    if (props.fullWidth) {
+      if (props.fullCanvas) {
+        wrapperClass += ' sbdocs-preview-full-width'
+      }
+    } else {
+      wrapperClass += ' lg:flex items-start pt-3'
+    }
+
+    let canvasWrapperClass = ''
+    if (props.fullWidth) {
+      if (props.fullCanvas) {
+        canvasWrapperClass += ' sbdocs-preview-full-width'
+      }
+    } else {
+      canvasWrapperClass += ' lg:w-1/2'
+    }
+
+    return (
+      <div className={wrapperClass}>
+        <div className={'reactdocs-container pr-5' + (props.fullWidth ? '' : ' lg:w-1/2')}>
+          <h3 className="text-base tracking-tight font-medium mt-3 mb-3">
+            <button
+              className="sbdocs sbdocs-a font-medium"
+              onClick={() => {
+                navigate(props.path)
+              }}
+            >
+              {props.heading}
+            </button>
+          </h3>
+          <div>
+            {props.customDescription ? (
+              <p>{props.customDescription}</p>
+            ) : props.meta ? (
+              <Description of={props.meta} />
+            ) : (
+              ''
+            )}
+          </div>
+        </div>
+
+        <div className={canvasWrapperClass}>
+          {props.hideCanvas ? (
+            <button
+              className="mt-6 p-6 flex justify-center shadow-sm border border-gray-light-mid rounded-md items-center"
+              onClick={() => {
+                navigate(props.path)
+              }}
+            >
+              <div className="text-gray-mid">View component for details</div>
+            </button>
+          ) : (
+            <Canvas
+              className={props.canvasClass}
+              meta={props.meta}
+              of={props.meta.BaseStory}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+}

package/src/docs/utils/ComponentList.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable prettier/prettier */
+/* Custom react component for rendering TOC of components
+ * docs: https://storybook.js.org/docs/react/writing-docs/docs-page#custom-inline-rendering
+ */
+
+import React from 'react'
+import { ComponentItem } from './ComponentItem'
+
+export function ComponentList(props) {
+  return (
+    <div className="reactdocs-content">
+      {props.components.map((component, index) => {
+        return <ComponentItem key={index} {...component} />
+      })}
+    </div>
+  )
+}

package/src/templates/PageContent/PageContent.stories.js

@@ -79,7 +79,7 @@ export const ContentPageData = {
 }
 
 // stories
-export const Template = {
+export const BaseStory = {
   name: 'PageContent',
   args: {
     data: ContentPageData

package/src/templates/PageEventDetail/PageEventDetail.stories.js

@@ -16,7 +16,7 @@ export default {
 }
 
 // stories
-export const EventDetail = {
+export const BaseStory = {
   args: {
     data: {
       id: '285',

package/src/templates/PageNewsDetail/PageNewsDetail.stories.js

@@ -28,7 +28,7 @@ export default {
   excludeStories: /.*Data$/
 }
 
-export const NewsDetail = {
+export const BaseStory = {
   args: {
     data: {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
@@ -75,7 +75,7 @@ export const NewsDetail = {
 export const InlineHero = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline'
     }
   }
@@ -84,7 +84,7 @@ export const InlineHero = {
 export const HeroCarousel = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: [{ blockType: 'CarouselBlock', blocks: BlockImageCarouselData }]
     }
   }
@@ -93,7 +93,7 @@ export const HeroCarousel = {
 export const HeroImageComparison = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline',
       hero: [
         {
@@ -107,7 +107,7 @@ export const HeroImageComparison = {
 export const HeroVideo = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: [
         {
           blockType: 'VideoBlock',
@@ -123,7 +123,7 @@ export const HeroVideo = {
 export const HeroVideoEmbed = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline',
       hero: [
         {
@@ -141,7 +141,7 @@ export const HeroVideoEmbed = {
 export const NoHero = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: []
     }
   }
@@ -150,7 +150,7 @@ export const NoHero = {
 export const WithTopper = {
   args: {
     data: {
-      ...NewsDetail.args.data,
+      ...BaseStory.args.data,
       topper:
         '<p>Editor’s Note: Mars Helicopter flight delayed to no earlier than April 14.</p><p><a href="https://mars.nasa.gov/technology/helicopter/status/291/mars-helicopter-flight-delayed-to-no-earlier-than-april-14/"><i>Read here for more information</i></a><i>.</i></p><p></p><hr/><p></p>'
     }

package/src/templates/edu/PageEduNewsDetail.stories.js

@@ -13,12 +13,17 @@ export default {
   parameters: {
     html: {
       root: '#storyDecorator'
+    },
+    docs: {
+      description: {
+        component: 'Doesn\'t look like EDU? Be sure to select "EDU Theme" in the toolbar dropdown.'
+      }
     }
   },
   excludeStories: /.*Data$/
 }
 
-export const EduNewsDetail = {
+export const BaseStory = {
   args: {
     data: {
       slug: 'nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight',
@@ -48,7 +53,7 @@ export const EduNewsDetail = {
 export const InlineHero = {
   args: {
     data: {
-      ...EduNewsDetail.args.data,
+      ...BaseStory.args.data,
       heroPosition: 'inline'
     }
   }
@@ -57,7 +62,7 @@ export const InlineHero = {
 export const NoHero = {
   args: {
     data: {
-      ...EduNewsDetail.args.data,
+      ...BaseStory.args.data,
       hero: []
     }
   }

package/src/templates/edu/PageEduNewsDetail.vue

@@ -67,7 +67,7 @@ const dateTimeArray = computed(() => {
 <template>
   <div
     v-if="data"
-    class="ThemeVariantLight"
+    class="ThemeEdu ThemeVariantLight"
     :class="computedClass"
     itemscope
     itemtype="http://schema.org/Article"

package/src/components/BaseCheckboxGroup/BaseCheckboxGroup.stories.mdx

@@ -1,68 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import BaseCheckboxGroup from './BaseCheckboxGroup.vue'
-
-<Meta
-  title="Components/Base/BaseCheckboxGroup"
-  component={BaseCheckboxGroup}
-  parameters={{ viewMode: 'docs' }}
-/>
-
-export const BaseCheckboxGroupData = {
-  options: [
-    {
-      id: 'educators',
-      title: 'Educators',
-      text: null
-    },
-    {
-      id: 'educator-workshop',
-      title: 'Educators Workshops',
-      text: 'Southern California'
-    },
-    {
-      id: 'students',
-      title: 'Students K-12',
-      text: null
-    },
-    {
-      id: 'internships',
-      title: 'Internships',
-      text: null
-    }
-  ],
-  group: 'edumail',
-  heading: 'JPL Education Groups',
-  subHeading:
-    'The JPL Education Office also offers email updates about classroom activities and workshops for educators, projects and competitons for K-12 students and internship opportunities at JPL and NASA.',
-  title: 'Education Email Groups'
-}
-
-export const BaseCheckboxGroupTemplate = (args) => ({
-  props: Object.keys(args),
-  components: { BaseCheckboxGroup },
-  template: `<BaseCheckboxGroup :options="options" :group="group" :heading="heading" :sub-heading="subHeading" :title="title"
-></BaseCheckboxGroup>`
-})
-
-# Base Checkbox Group
-
-## Usage
-
-The BaseCheckboxGroup component is expected to contain an array of options and a grouping name with the goal of selecting multiple options.
-
-<Canvas>
-  <Story
-    name="Default"
-    args={BaseCheckboxGroupData}
-  >
-    {BaseCheckboxGroupTemplate.bind({})}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable for={BaseCheckboxGroup} />
-
-## Example data
-
-<code language="json">{JSON.stringify(BaseCheckboxGroupData, null, 2)}</code>