@explorer-1/vue 0.0.0

package/src/docs/foundation/grid_layouthelpers.docs.mdx

@@ -0,0 +1,78 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import * as Stories from './grid_layouthelpers.stories'
+
+<Meta of={Stories} />
+
+# Column Layout helpers
+
+Sometimes you may want to use a few common column indentations in your layouts for blocks on your page. Explorer 1 provides a few helper classes to aid in quickly creating these indented blocks. These helper classes also include responsive fallbacks.
+
+## .indent-col-base
+
+`.indent-col-base` is the **base class that you must add to any element that will use additional helper classes covered in this documentation**. Its immediate parent must be `.BaseGrid` (or any 12-column grid). It sets the width to start at the first column and end after the last column, i.e. full width.
+
+```css
+.indent-col-base {
+  @apply col-start-1 col-end-13; // full width of 12 grid container
+}
+```
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.BaseWidth}
+/>
+
+## .indent-col-2
+
+`.indent-col-2` adds to `.indent-col-base` by overriding the `col-start` and `col-end` for `lg` screens to indent content to the **second** column.
+
+```css
+.indent-col-2 {
+  @screen lg {
+    @apply col-start-2 col-end-12;
+  }
+}
+```
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.ColTwoStart}
+/>
+
+## .indent-col-3
+
+`.indent-col-3` adds to `.indent-col-base` by overriding the `col-start` and `col-end` for `lg` screens to indent content to the **third** column.
+
+```css
+.indent-col-3 {
+  @screen lg {
+    @apply col-start-3 col-end-11;
+  }
+}
+```
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.ColThreeStart}
+/>
+
+## .indent-col-4
+
+`.indent-col-4` adds to `.indent-col-base` by overriding the `col-start` and `col-end` for `lg` screens to indent content to the **fourth** column, and at `md` screens to the **third** column.
+
+```css
+.indent-col-4 {
+  @screen md {
+    @apply col-start-3 col-end-11;
+  }
+
+  @screen lg {
+    @apply col-start-4 col-end-10;
+  }
+}
+```
+
+<Canvas
+  className="sbdocs-preview-full-width"
+  of={Stories.ColFourStart}
+/>

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

@@ -0,0 +1,53 @@
+import LayoutHelper, { indents } from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
+
+// TODO: DOCS: update this to match the full grid/layout documentation
+
+export default {
+  title: 'Foundation/Grid and Layout/Column Layout Helpers',
+  component: LayoutHelper,
+  tags: ['!autodocs'],
+  argTypes: {
+    indent: {
+      control: { type: 'select' },
+      options: Object.keys(indents)
+    }
+  },
+  parameters: {
+    html: {
+      root: '#storyDecorator'
+    }
+  },
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="container mx-auto border border-black"><story/></div>`
+    })
+  ]
+}
+
+const LayoutHelperTemplate = (args) => ({
+  components: { LayoutHelper },
+  setup() {
+    return { args }
+  },
+  template: `<LayoutHelper v-bind="args"><div class="w-full text-white bg-black py-10 px-2">Indent starts at <code>{{args}}</code></div></LayoutHelper>`
+})
+
+export const BaseWidth = LayoutHelperTemplate.bind({})
+BaseWidth.args = {
+  indent: 'col-1'
+}
+
+export const ColTwoStart = LayoutHelperTemplate.bind({})
+ColTwoStart.args = {
+  indent: 'col-2'
+}
+
+export const ColThreeStart = LayoutHelperTemplate.bind({})
+ColThreeStart.args = {
+  indent: 'col-3'
+}
+
+export const ColFourStart = LayoutHelperTemplate.bind({})
+ColFourStart.args = {
+  indent: 'col-4'
+}

package/src/docs/foundation/themes.docs.mdx

@@ -0,0 +1,71 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import * as Stories from './themes.stories'
+
+<Meta of={Stories} />
+
+# Themes
+
+Throughout this storybook, you can use the Theme and Variant selectors in the Storybook toolbar to preview components in different theme configurations.
+
+**Note:** some documentation pages use iframes to display components, which ignores the theme switcher. Thus, for the most accurate representation of the internal theme, we recommend viewing the story in isolation.
+
+## Dynamic color tokens
+
+There are dynamic color tokens in place that use a semantic name instead of a specific color name. These tokens are use strategically in components to support multiple themes.
+
+Changing the Theme and Variant to see how the dynamic tokens change.
+
+<Canvas of={Stories.DynamicTokenStory} />
+
+## Light & Dark Variants
+
+`.ThemeVariantLight` and `.ThemeVariantDark` in Explorer 1 are theme variants. Note that not all components support these variants.
+
+### Key Points
+
+- `defaultTheme` and `ThemeVariantLight` are the defaults
+- It is recommended that page templates always include the default variant.
+
+### Contributing developers: Writing light/dark theme styles for components
+
+For components that have light and dark themes, add theme rules to the end of your scss. The following is an example of a component whose background should be `bg-white` by default and in `ThemeVariantLight` but `bg-black` in `ThemeVariantDark`
+
+```scss
+.MyComponent {
+  // set the default background color
+  @apply bg-white;
+  // set the ThemeVariantDark background color
+  .ThemeVariantDark & {
+    @apply bg-black;
+  }
+}
+```
+
+## Adaptive Text Colors
+
+Usage of `.text-action` vs `.text-action` in the context of `.ThemeVariantLight` and `.ThemeVariantDark` ensures that the contrast of the text color is sufficient against the background color. These adaptive text colors are supported by all themes.
+
+### Definition (excerpt)
+
+```css
+.text-action {
+  @apply text-action;
+  .ThemeVariantDark & {
+    @apply text-action-light;
+  }
+}
+.text-action-hover {
+  @apply text-action-dark;
+  .ThemeVariantDark & {
+    @apply text-action;
+  }
+}
+```
+
+### Usage
+
+Try changing the Theme and Variant while viewing the examples below. Notice how there are slight changes in color between the Dark and Light variants.
+
+<Canvas of={Stories.AdaptiveText} />
+
+See [BaseLink](?path=/docs/components-base-baselink--docs) for a real usage example.

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

@@ -0,0 +1,63 @@
+import DynamicTokens from './DynamicTokens.vue'
+
+export default {
+  title: 'Foundation/Themes',
+  component: DynamicTokens,
+  tags: ['!autodocs']
+}
+
+export const DynamicTokenStory = {
+  name: 'Dynamic Tokens',
+  args: {}
+}
+
+const InternalTemplate = `<div>
+  <div class="ThemeInternal">
+    <!-- BaseLink -->
+    <div>
+      <a
+        class="group cursor-pointer -default underline text-action can-hover:hover:text-action-hover"
+      >
+        Internal Theme: BaseLink 
+      </a>
+    </div>
+    <!-- /BaseLink -->
+  </div>
+  <div>
+  <!-- BaseLink -->
+    <div>
+      <a
+        class="group cursor-pointer -default underline text-action can-hover:hover:text-action-hover"
+      >
+        Default Theme: BaseLink
+      </a>
+    </div>
+    <!-- /BaseLink -->
+  </div>
+</div>`
+
+export const Internal = {
+  args: {},
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    template: InternalTemplate
+  })
+}
+
+const AdaptiveTextTemplate = `<p class="p-4">
+  <a class="cursor-pointer font-bold text-action can-hover:hover:text-action-hover">
+    Lorem ipsum dolor sit amet
+  </a>
+  </p>`
+
+export const AdaptiveText = {
+  args: {},
+  render: (args) => ({
+    setup() {
+      return { args }
+    },
+    template: AdaptiveTextTemplate
+  })
+}

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

@@ -0,0 +1,50 @@
+import { Meta, Story, Canvas } from '@storybook/blocks'
+import * as Stories from './typography.stories'
+
+<Meta of={Stories} />
+
+# Typography
+
+## Fonts
+
+Below are all fonts used in the design system.
+
+### Metropolis
+
+Metropolis is used for all heading levels and body copy.
+
+### Archivo Narrow
+
+Archivo Narrow is used for subtitles and buttons and is always used in UPPERCASE.
+
+<Canvas of={Stories.Fonts} />
+
+## Text Colors
+
+Here are colors intended for text, depending on the background. **Note:** Some of these colors will not pass contrast requirements if used on a different background.
+
+<Canvas of={Stories.TextColors} />
+
+## Text Styles
+
+All of the text styles used across the project, each with its reusable component class.
+Prefer reusing those classes over individual utility classes, as each text style has different properties between desktop and mobile viewports.
+
+Note:
+
+- All heading levels also have the corresponding text styles directly applied for convenience.
+- This can still be overridden by adding another relevant class.
+
+<Canvas of={Stories.TextStyles} />
+
+### Heading Icons
+
+We can also add icons next to the headings.
+
+<Canvas of={Stories.HeadingIcons} />
+
+## Text Contrast
+
+In areas where text overlays an image, use this `.text-contrast` class in conjunction with a semi-transparent overlay (ex. `bg-black/*`) to improve readability. `.text-contrast` also works with tailwind breakpoints.
+
+<Canvas of={Stories.TextContrast} />

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

@@ -0,0 +1,119 @@
+import FontVariants from './FontVariants.vue'
+import IconLocation from './../../components/Icons/IconLocation.vue'
+import BaseHeading from './../../components/BaseHeading/BaseHeading.vue'
+
+export default {
+  title: 'Foundation/Typography',
+  component: FontVariants,
+  subcomponents: { BaseHeading, IconLocation },
+  tags: ['!autodocs']
+}
+
+export const Fonts = {
+  args: {}
+}
+
+export const TextColors = {
+  args: {},
+  render: () => ({
+    template: `<div>
+  <div class="md:grid-cols-3 inline-grid gap-4 p-8 mt-8 bg-white">
+    <div>
+      <div class="bg-gray-dark w-16 h-8"></div>
+      <code class="text-gray-dark">.text-gray-dark</code>
+    </div>
+    <div>
+      <div class="bg-gray-mid-dark w-16 h-8"></div>
+      <code class="text-gray-mid-dark">.text-gray-mid-dark</code>
+    </div>
+    <div>
+      <div class="bg-jpl-red w-16 h-8"></div>
+      <code class="text-jpl-red">.text-jpl-red</code>
+    </div>
+  </div>
+  <div class="inline-grid grid-cols-3 gap-4 p-8 bg-black">
+    <div>
+      <div class="w-16 h-8 bg-white"></div>
+      <code class="text-white">.text-white</code>
+    </div>
+    <div>
+      <div class="bg-gray-mid w-16 h-8"></div>
+      <code class="text-gray-mid">.text-gray-mid</code>
+    </div>
+    <div>
+      <div class="bg-jpl-red-light w-16 h-8"></div>
+      <code class="text-jpl-red-light">.text-jpl-red-light</code>
+    </div>
+  </div>
+</div>`
+  })
+}
+
+export const TextStyles = {
+  args: {},
+  render: () => ({
+    template: `<div>
+  <p class="text-h1-alt mt-8">Header H1 Alt</p>
+  <code>.text-h1-alt</code>
+  <p class="text-h1 mt-8">Header H1</p>
+  <code>h1, .text-h1</code>
+  <p class="text-h2 mt-8">Header H2</p>
+  <code>h2, .text-h2</code>
+  <p class="text-h3 mt-8">Header H3</p>
+  <code>h3, .text-h3</code>
+  <p class="text-h4 mt-8">Header H4</p>
+  <code>h4, .text-h4</code>
+  <p class="text-h5 mt-8">Header H5</p>
+  <code>h5, .text-h5</code>
+  <p class="text-h6 mt-8">Header H6</p>
+  <code>h6, .text-h6</code>
+  <p class="text-subtitle mt-8">Subtitle</p>
+  <code>.text-subtitle</code>
+  <p class="text-body-lg mt-8">Body large</p>
+  <code>.text-body-lg</code>
+  <p class="text-body-md mt-8">Body medium</p>
+  <code>.text-body-md</code>
+  <p class="text-body-sm mt-8">Body small</p>
+  <code>.text-body-sm</code>
+  <p class="text-body-xs mt-8">Body extra small</p>
+  <code>.text-body-xs</code>
+  <p class="mt-8"><mark>Highlighted text</mark></p>
+  <code>mark</code>
+</div>`
+  })
+}
+
+export const HeadingIcons = {
+  argTypes: {
+    size: {
+      type: { name: 'string', required: true },
+      control: { type: 'select' },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+    }
+  },
+  args: {
+    size: 'h1'
+  },
+  render: (args) => ({
+    components: { BaseHeading, IconLocation },
+    setup() {
+      return { args }
+    },
+    template: `<div>
+      <BaseHeading v-bind="args"><IconLocation class="inline" /> Heading H1</BaseHeading>
+    </div>`
+  })
+}
+
+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">
+  <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.
+    </span>
+  </div>
+</div>`
+  })
+}

package/src/interfaces.ts

@@ -0,0 +1,129 @@
+export interface BreadcrumbPathObject {
+  path: string
+  title: string
+  children: any[]
+}
+
+export interface BlockData {
+  blockType: string
+}
+export interface ImageSrcObject {
+  url: string
+  width: number
+  height: number
+}
+export interface ThumbnailObject {
+  original: string
+  width: number
+  height: number
+}
+export interface ImageObject {
+  title?: string
+  src: ImageSrcObject
+  srcCropped: ImageSrcObject
+  screenXs?: Partial<ImageSrcObject>
+  screenSm?: Partial<ImageSrcObject>
+  screenMd?: Partial<ImageSrcObject>
+  screenLg?: Partial<ImageSrcObject>
+  screenXL?: Partial<ImageSrcObject>
+  screenThreexl?: Partial<ImageSrcObject>
+  srcSet?: string
+  alt?: string
+  original?: string
+  caption?: string
+  credit?: string
+  detailUrl?: string
+  cover?: string
+  image?: ImageObject
+  displayCaption?: boolean
+}
+
+export interface ImageBlock extends BlockData, ImageObject {}
+
+export interface ElasticSearchPage {
+  id: string | number
+  content_type: string
+  url: string
+  type: string
+  topic: string
+  image: string | any
+  date: string
+  startDate: string
+  endDate: string
+  startTime: string
+  endTime: string
+  location: string
+  title: string
+  summary: string
+}
+
+export interface FormOption {
+  id: string
+  name: string
+  alt: string
+  value: string
+  text: string
+  title: string
+}
+
+export interface Card {
+  __typename?: string
+  type?: string
+  url?: string
+  externalLink?: string
+  page?: Card
+  title?: string
+  date?: string
+  startDate?: string
+  endDate?: string
+  label?: string
+  thumbnailImage?: Partial<ImageObject>
+}
+
+export interface RelatedLinkObject {
+  page: {
+    url: string
+  } | null
+  document: { url: string } | null
+  externalLink: string | null
+  text: string | null
+}
+
+export interface PageResponseObject {
+  __typename: string
+  contentType: string
+  breadcrumb?: string
+  url?: string
+}
+
+export interface PageResponse {
+  __typename: string
+  page: PageResponseObject
+}
+
+export interface HeaderResponse {
+  __typename: string
+  desktop: any
+  mobile: any
+}
+
+export interface FooterResponse {
+  __typename: string
+  footer: any
+}
+
+export type Explorer1Theme = 'defaultTheme' | 'ThemeInternal' | 'ThemeEdu'
+
+export interface Attributes {
+  [name: string]: string
+}
+
+export interface AuthorObject {
+  name: string
+  organization: string
+}
+
+export interface Topic {
+  title: string
+  url: string
+}

package/src/main.ts

@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { RouterLink } from 'vue-router'
+import filters from './utils/filters'
+// @ts-ignore
+import vClickOutside from 'click-outside-vue3'
+import VueCompareImage from 'vue3-compare-image'
+import './assets/scss/styles.scss'
+import App from './App.vue'
+
+const pinia = createPinia()
+const app = createApp(App)
+
+// vue router
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: []
+})
+
+// plugins
+app.use(pinia)
+app.use(router)
+app.use(vClickOutside)
+app.use(VueCompareImage)
+
+// filters
+app.config.globalProperties.$filters = filters
+app.config.globalProperties.$theme = 'EDU'
+
+// components
+app.component('NuxtLink', RouterLink)
+
+app.mount('#app')

package/src/store/header.ts

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+/** Controls various display states for the header and navigation
+ ** headerTransparent: whether the header is a transparent overlay
+ ** highlightPrimary: logic in various components will enable/disable this
+ ** globalChildren: the breadcrumb items derived from the active primary item in the global navigation
+ ** secondayNav: breadcrumb items that are overridden from content pages or similar
+ */
+
+export interface State {
+  headerTransparent: boolean
+  highlightPrimary: boolean
+  globalChildren?: any | null
+  secondaryNav?: any | null
+}
+
+export const useHeaderStore = defineStore('header', {
+  state: (): State => {
+    return {
+      headerTransparent: false,
+      highlightPrimary: true,
+      globalChildren: null,
+      secondaryNav: null
+    }
+  },
+  actions: {
+    makeTransparent(value: boolean) {
+      this.headerTransparent = value
+    },
+    updateHighlightPrimary(value: boolean) {
+      // @ts-ignore
+      this.highlightPrimary = value
+    },
+    updateGlobalChildren(value: any) {
+      this.globalChildren = value
+    },
+    updateSecondary(value: any) {
+      this.secondaryNav = value
+    }
+  }
+})

package/src/store/theme.ts

@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import { type Explorer1Theme } from './../interfaces'
+
+/** Sets the Explorer-1 theme
+ */
+
+export interface State {
+  theme: Explorer1Theme | null
+}
+
+export const useThemeStore = defineStore('theme', {
+  state: (): State => {
+    return {
+      theme: null
+    }
+  },
+  actions: {
+    setTheme(value: Explorer1Theme) {
+      this.theme = value
+    }
+  },
+  getters: {
+    isEdu(state) {
+      return state.theme === 'ThemeEdu'
+    }
+  }
+})