diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 8208471f..278c0097 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -1,4 +1,4 @@ -name: Linting/Formatting +name: Linting # Run on the opening of a pull request and subsequent commits to it. on: pull_request diff --git a/.github/workflows/nuxt.yml.disabled b/.github/workflows/nuxt.yml.disabled new file mode 100644 index 00000000..2e12e5f5 --- /dev/null +++ b/.github/workflows/nuxt.yml.disabled @@ -0,0 +1,40 @@ +# checks if nuxt module builds successfully + +name: Build Nuxt Module + +on: + push: + branches: + - main + paths: + - 'packages/common/**' + - 'packages/nuxt/**' + - 'packages/vue/**' + pull_request: + paths: + - 'packages/common/**' + - 'packages/nuxt/**' + - 'packages/vue/**' + +jobs: + build-and-deploy: + runs-on: ubuntu-latest + + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node ⬢ + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'pnpm' + + - name: Install dependencies 🧱 + run: pnpm i + + - name: Build static Storybook 🛠 + run: make nuxt-build diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml new file mode 100644 index 00000000..22ab63cb --- /dev/null +++ b/.github/workflows/storybook.yml @@ -0,0 +1,120 @@ +# https://storybook.js.org/docs/vue/writing-tests/test-runner#run-against-non-deployed-storybooks + +name: 'Storybook' + +on: + push: + branches: + - main + paths: + - 'apps/vue-storybook/**' + - 'packages/common/**' + - 'packages/vue/**' + pull_request: + paths: + - 'apps/vue-storybook/**' + - 'packages/common/**' + - 'packages/vue/**' + +jobs: + build: + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node ⬢ + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'pnpm' + + - name: Install dependencies 🧱 + run: pnpm i + + - name: Build Storybook + run: make vue-storybook-build + + - name: Upload build to artifacts + uses: actions/upload-artifact@v3 + with: + name: storybook + path: apps/vue-storybook/storybook_compiled + + a11y-tests: + needs: build + timeout-minutes: 60 + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node ⬢ + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'pnpm' + + - name: Install dependencies 🧱 + run: pnpm i + + - name: Install Playwright + run: pnpm --filter @explorer-1/vue-storybook exec playwright install + + - name: Download storybook build + uses: actions/download-artifact@v3 + with: + name: storybook + path: apps/vue-storybook/storybook_compiled + + - name: Serve Storybook & Run tests + run: | + npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \ + "pnpm --filter @explorer-1/vue-storybook start" \ + "pnpm --filter @explorer-1/vue-storybook test:ci" + + publish: + needs: [build, a11y-tests] + timeout-minutes: 30 + runs-on: ubuntu-latest + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + with: + fetch-depth: 0 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node ⬢ + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'pnpm' + + - name: Install dependencies 🧱 + run: pnpm i + + - name: Download storybook build + uses: actions/download-artifact@v3 + with: + name: storybook + path: apps/vue-storybook/storybook_compiled + + - uses: chromaui/action@latest + # Options required for Chromatic's GitHub Action + with: + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + token: ${{ secrets.GITHUB_TOKEN }} + storybookBaseDir: 'apps/vue-storybook' + storybookBuildDir: 'apps/vue-storybook/storybook_compiled' + autoAcceptChanges: 'main' + exitZeroOnChanges: true + exitOnceUploaded: true diff --git a/.github/workflows/vue.yml b/.github/workflows/vue.yml new file mode 100644 index 00000000..6eb26bc7 --- /dev/null +++ b/.github/workflows/vue.yml @@ -0,0 +1,38 @@ +# checks if vue package builds successfully + +name: Vue + +on: + push: + branches: + - main + paths: + - 'packages/common/**' + - 'packages/vue/**' + pull_request: + paths: + - 'packages/common/**' + - 'packages/vue/**' + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - name: Checkout 🛎️ + uses: actions/checkout@v4 + + - name: Setup pnpm + uses: pnpm/action-setup@v4 + + - name: Set up Node ⬢ + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'pnpm' + + - name: Install dependencies 🧱 + run: pnpm i + + - name: Build Vue package 🛠 + run: make vue-build diff --git a/.nvmrc b/.nvmrc index 67d2ffed..78a94959 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v20.13.1 \ No newline at end of file +v20.15.1 \ No newline at end of file diff --git a/apps/html-storybook/.storybook/preview.ts b/apps/html-storybook/.storybook/preview.ts index ffba48ac..9b0aef3b 100644 --- a/apps/html-storybook/.storybook/preview.ts +++ b/apps/html-storybook/.storybook/preview.ts @@ -62,7 +62,7 @@ const preview = { }, variantsConfig: { defaultValue: { - variants: ['ThemeVariantLight', 'ThemeVariantDark'], + variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'], method: 'css' } }, @@ -98,7 +98,8 @@ const preview = { icon: 'circlehollow', title: 'Light Variant' }, - { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' } + { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }, + { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' } ], dynamicTitle: true } diff --git a/apps/html-storybook/.storybook/withGlobals.ts b/apps/html-storybook/.storybook/withGlobals.ts index 7b1cdeee..0eaece69 100644 --- a/apps/html-storybook/.storybook/withGlobals.ts +++ b/apps/html-storybook/.storybook/withGlobals.ts @@ -124,7 +124,7 @@ export const globalTypes = { }, variantsConfig: { defaultValue: { - variants: ['ThemeVariantLight', 'ThemeVariantDark'], + variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'], method: 'css' } }, @@ -160,7 +160,8 @@ export const globalTypes = { icon: 'circlehollow', title: 'Light Variant' }, - { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' } + { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }, + { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' } ], dynamicTitle: true } diff --git a/apps/html-storybook/package.json b/apps/html-storybook/package.json index f7c0ca0e..9233e398 100644 --- a/apps/html-storybook/package.json +++ b/apps/html-storybook/package.json @@ -41,16 +41,16 @@ "@percy/cli": "^1.28.6", "@percy/storybook": "^6.0.0", "@rushstack/eslint-patch": "^1.2.0", - "@storybook/addon-a11y": "^8.1.6", - "@storybook/addon-docs": "^8.1.6", - "@storybook/addon-essentials": "^8.1.6", - "@storybook/addon-links": "^8.1.6", - "@storybook/addon-viewport": "^8.1.6", - "@storybook/html": "^8.1.6", - "@storybook/html-vite": "^8.1.6", - "@storybook/manager-api": "^8.1.6", - "@storybook/preview-api": "^8.1.6", - "@storybook/theming": "^8.1.6", + "@storybook/addon-a11y": "^8.2.1", + "@storybook/addon-docs": "^8.2.1", + "@storybook/addon-essentials": "^8.2.1", + "@storybook/addon-links": "^8.2.1", + "@storybook/addon-viewport": "^8.2.1", + "@storybook/html": "^8.2.1", + "@storybook/html-vite": "^8.2.1", + "@storybook/manager-api": "^8.2.1", + "@storybook/preview-api": "^8.2.1", + "@storybook/theming": "^8.2.1", "@whitespace/storybook-addon-html": "^6.1.1", "autoprefixer": "^10.4.19", "npm-run-all": "^4.1.5", @@ -58,7 +58,7 @@ "postcss-import": "^16.1.0", "remark-gfm": "^4.0.0", "rimraf": "^5.0.5", - "storybook": "^8.1.6", + "storybook": "^8.2.1", "tailwindcss": "^3.4.3", "ts-node": "^10.9.2", "tslib": "^2.6.2", diff --git a/apps/vue-storybook/.storybook/main.ts b/apps/vue-storybook/.storybook/main.ts index a3352184..851f6c2f 100644 --- a/apps/vue-storybook/.storybook/main.ts +++ b/apps/vue-storybook/.storybook/main.ts @@ -1,10 +1,16 @@ /** @type { import('@storybook/vue3-vite').StorybookConfig } */ import remarkGfm from 'remark-gfm' const config = { - stories: [ - './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)', - './../node_modules/@explorer-1/vue/src/**/*.docs.mdx' - ], + stories: + process.env.NODE_ENV === 'production' + ? [ + './../node_modules/@explorer-1/vue/src/**/*.stories.@(js|jsx|ts|tsx)', + './../node_modules/@explorer-1/vue/src/**/*.docs.mdx' + ] + : [ + './../../../packages/vue/src/**/*.stories.@(js|jsx|ts|tsx)', + './../../../packages/vue/src/**/*.docs.mdx' + ], addons: [ { name: '@storybook/addon-essentials', @@ -26,7 +32,8 @@ const config = { }, '@storybook/addon-a11y', '@whitespace/storybook-addon-html', - 'storybook-addon-vue-slots' + 'storybook-addon-vue-slots', + '@chromatic-com/storybook' ], staticDirs: [ './../public', diff --git a/apps/vue-storybook/.storybook/preview.ts b/apps/vue-storybook/.storybook/preview.ts index 6b94aaca..d94d85c6 100644 --- a/apps/vue-storybook/.storybook/preview.ts +++ b/apps/vue-storybook/.storybook/preview.ts @@ -1,15 +1,12 @@ /** @type { import('@storybook/vue3').Preview } */ -import type { App } from 'vue' import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport' import useMockComponents from './_mock-components.js' -import { StoryContext } from '@storybook/types' -import { VueRenderer, setup, type Preview } from '@storybook/vue3' +import { setup, type Preview } from '@storybook/vue3' import { Swiper, SwiperSlide } from 'swiper/vue' import vClickOutside from 'click-outside-vue3' import VueCompareImage from 'vue3-compare-image' import { createPinia } from 'pinia' import filters from '@explorer-1/vue/src/utils/filters' -import '@explorer-1/common-storybook/src/config/canvas.css' import '@explorer-1/common/src/scss/styles.scss' import { withGlobals, globalTypes } from './withGlobals' import customTheme from '@explorer-1/common-storybook/src/config/customTheme' @@ -17,7 +14,7 @@ import '@explorer-1/common-storybook/src/config/canvas.css' const pinia = createPinia() -setup((app: App, context?: StoryContext) => { +setup((app, _context) => { app.use(pinia) app.use(vClickOutside) app.use(VueCompareImage) diff --git a/apps/vue-storybook/.storybook/test-runner.ts b/apps/vue-storybook/.storybook/test-runner.ts new file mode 100644 index 00000000..546d037e --- /dev/null +++ b/apps/vue-storybook/.storybook/test-runner.ts @@ -0,0 +1,22 @@ +import type { TestRunnerConfig } from '@storybook/test-runner' +import { injectAxe, checkA11y } from 'axe-playwright' + +/* + * See https://storybook.js.org/docs/writing-tests/test-runner#test-hook-api + * to learn more about the test-runner hooks API. + */ +const config: TestRunnerConfig = { + async preVisit(page) { + await injectAxe(page) + }, + async postVisit(page) { + await checkA11y(page, '#storybook-root', { + detailedReport: true, + detailedReportOptions: { + html: true + } + }) + } +} + +export default config diff --git a/apps/vue-storybook/.storybook/withGlobals.ts b/apps/vue-storybook/.storybook/withGlobals.ts index ca0e9f2e..4c79ab49 100644 --- a/apps/vue-storybook/.storybook/withGlobals.ts +++ b/apps/vue-storybook/.storybook/withGlobals.ts @@ -1,5 +1,6 @@ import { useEffect, useGlobals } from '@storybook/preview-api' -import { useThemeStore } from '@explorer-1/vue/src/store/theme' +// intentionally importing from node_modules path to avoid pinia initialization errors +import { useThemeStore } from './../node_modules/@explorer-1/vue/src/store/theme' import { type Explorer1Theme } from '@explorer-1/vue/src/interfaces' export const getConfig = (config) => { @@ -146,7 +147,7 @@ export const globalTypes = { }, variantsConfig: { defaultValue: { - variants: ['ThemeVariantLight', 'ThemeVariantDark'], + variants: ['ThemeVariantLight', 'ThemeVariantDark', 'ThemeVariantGray'], method: 'css' } }, @@ -182,7 +183,8 @@ export const globalTypes = { icon: 'circlehollow', title: 'Light Variant' }, - { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' } + { value: 'ThemeVariantDark', icon: 'circle', title: 'Dark Variant' }, + { value: 'ThemeVariantGray', icon: 'contrast', title: 'Gray Variant' } ], dynamicTitle: true } diff --git a/apps/vue-storybook/chromatic.config.json b/apps/vue-storybook/chromatic.config.json new file mode 100644 index 00000000..1894c367 --- /dev/null +++ b/apps/vue-storybook/chromatic.config.json @@ -0,0 +1,10 @@ +{ + "buildScriptName": "build", + "projectId": "Project:668c47cbeb95392cd79c3c0d", + "storybookBaseDir": "apps/vue-storybook", + "storybookBuildDir": "storybook_compiled", + "skip": "dependabot/**", + "autoAcceptChanges": "main", + "exitOnceUploaded": true, + "exitZeroOnChanges": true +} diff --git a/apps/vue-storybook/package.json b/apps/vue-storybook/package.json index c7780781..e7f098a8 100644 --- a/apps/vue-storybook/package.json +++ b/apps/vue-storybook/package.json @@ -17,15 +17,19 @@ "prepare": "pnpm prepare:public && pnpm prepare:fontcss", "prepare:public": "cp -R ./node_modules/@explorer-1/common/src/public/explorer-1/ ./public/explorer-1", "prepare:fontcss": "cp ./node_modules/@explorer-1/common/src/scss/_fonts.scss ./public/css/font-face.css", - "storybook": "storybook dev -c .storybook -p 6006 --ci", - "build": "storybook build -c .storybook -o storybook_compiled", + "storybook": "storybook dev -c .storybook -p 6006 --ci --force-build-preview", + "build": "storybook build -c .storybook -o storybook_compiled NODE_ENV='production'", "percy": "percy storybook http://localhost:6006", "percy:dry-run": "percy storybook http://localhost:6006 --dry-run", "lint:app": "eslint './.storybook/**/*.@(js|ts)'", "lint:app:fix": "eslint './.storybook/**/*.@(js|ts)' --fix", "lint": "eslint './../../packages/vue/src/**/*.stories.@(js|ts|mdx)' && pnpm lint:app", "lint:fix": "eslint './../../packages/vue/src/**/*.stories.@(js|ts|mdx)' --fix && pnpm lint:app:fix", - "init-msw": "msw init public/" + "init-msw": "msw init public/", + "start": "http-server storybook_compiled -p 6006 -c-1 -s", + "test": "test-storybook --stories-json --maxWorkers=4", + "test:cross-browser": "test-storybook --stories-json --verbose --maxWorkers=4 --browsers chromium webkit firefox", + "test:ci": "test-storybook --stories-json --maxWorkers=4" }, "dependencies": { "@explorer-1/common": "workspace:*", @@ -40,26 +44,32 @@ "vue3-compare-image": "^1.2.5" }, "devDependencies": { + "@chromatic-com/storybook": "^1", "@explorer-1/html": "workspace:*", "@explorer-1/prettier-config": "workspace:*", "@explorer-1/tsconfig": "workspace:*", "@rushstack/eslint-patch": "^1.2.0", - "@storybook/addon-a11y": "^8.1.6", - "@storybook/addon-essentials": "^8.1.6", - "@storybook/blocks": "^8.1.6", - "@storybook/vue3": "^8.1.6", - "@storybook/vue3-vite": "^8.1.6", + "@storybook/addon-a11y": "^8.2.1", + "@storybook/addon-essentials": "^8.2.1", + "@storybook/blocks": "^8.2.1", + "@storybook/test-runner": "^0.19.0", + "@storybook/theming": "^8.2.1", + "@storybook/vue3": "^8.2.1", + "@storybook/vue3-vite": "^8.2.1", "@vitejs/plugin-vue": "^5.0.4", "@vue/eslint-config-prettier": "^7.1.0", "@whitespace/storybook-addon-html": "^6.1.1", "autoprefixer": "^10.4.19", + "axe-playwright": "^2.0.1", + "chromatic": "^11.5.5", + "http-server": "^14.1.1", "msw": "^2.3.0", "msw-storybook-addon": "^2.0.2", "pinia": "^2.1.7", "postcss": "^8.4.38", "postcss-import": "^16.1.0", "rimraf": "^5.0.5", - "storybook": "^8.1.6", + "storybook": "^8.2.1", "storybook-addon-vue-slots": "^0.9.29", "tailwindcss": "^3.4.3", "ts-node": "^10.9.2", diff --git a/apps/vue-storybook/vite.config.ts b/apps/vue-storybook/vite.config.ts index 25f66130..d040132f 100644 --- a/apps/vue-storybook/vite.config.ts +++ b/apps/vue-storybook/vite.config.ts @@ -1,16 +1,17 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' -import Components from 'unplugin-vue-components/vite' -// TODO: import applicable config keys from '@explorer-1/vue/vite.config' +// import Components from 'unplugin-vue-components/vite' + export default defineConfig({ plugins: [ - vue(), - Components({ - dirs: [ - './node_modules/@explorer-1/vue/src/components', - './node_modules/@explorer-1/vue/src/templates' - ] - }) + vue() + // TODO: Doesn't work + // Components({ + // dirs: [ + // './../node_modules/@explorer-1/vue/src/components', + // './../node_modules/@explorer-1/vue/src/templates' + // ] + // }) ], publicDir: './../public/', // because pnpm and stories are in node_modules diff --git a/packages/common-storybook/package.json b/packages/common-storybook/package.json index 3f00a7c1..f16be7b2 100644 --- a/packages/common-storybook/package.json +++ b/packages/common-storybook/package.json @@ -15,9 +15,7 @@ "@explorer-1/common": "workspace:*", "@explorer-1/prettier-config": "workspace:*", "@explorer-1/tsconfig": "workspace:*", - "@storybook/blocks": "^8.1.2", "rimraf": "^5.0.5", - "storybook": "^8.1.2", "ts-node": "^10.9.2", "typescript": "^5.4.5" } diff --git a/packages/common-storybook/src/config/canvas.css b/packages/common-storybook/src/config/canvas.css index 85bf7cd7..b9559572 100644 --- a/packages/common-storybook/src/config/canvas.css +++ b/packages/common-storybook/src/config/canvas.css @@ -12,6 +12,12 @@ body.ThemeVariantDark, background: #000000; } +html.ThemeVariantGray, +body.ThemeVariantGray, +.ThemeVariantGray .sbdocs-preview { + background: rgb(245 245 245); +} + /* disabling these offsets as they only apply to fully assembled pages with a nav ** .disable-nav-offset is applied via story decorators */ diff --git a/packages/common-storybook/src/config/customTheme.ts b/packages/common-storybook/src/config/customTheme.ts index 6d1daf71..ee5617e5 100644 --- a/packages/common-storybook/src/config/customTheme.ts +++ b/packages/common-storybook/src/config/customTheme.ts @@ -1,11 +1,11 @@ // custom theme for storybook UI // see: https://storybook.js.org/docs/vue/configure/theming -import { create } from '@storybook/theming/create' +import { create } from '@storybook/theming' export default create({ base: 'light', colorPrimary: '#E31937', // jpl red - colorSecondary: '#489FDF', // jpl aqua + colorSecondary: '#05809E', // jpl teal // Typography // fontBase: 'Metropolis, sans-serif', diff --git a/packages/common-storybook/src/public/audio/file_example_MP3_700KB.mp3 b/packages/common-storybook/src/public/audio/file_example_MP3_700KB.mp3 new file mode 100644 index 00000000..ab940459 Binary files /dev/null and b/packages/common-storybook/src/public/audio/file_example_MP3_700KB.mp3 differ diff --git a/packages/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 b/packages/common-storybook/src/public/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 similarity index 100% rename from packages/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 rename to packages/common-storybook/src/public/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 diff --git a/packages/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm b/packages/common-storybook/src/public/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm similarity index 100% rename from packages/common-storybook/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm rename to packages/common-storybook/src/public/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm diff --git a/packages/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 b/packages/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 deleted file mode 100644 index 6398b5bf..00000000 Binary files a/packages/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4 and /dev/null differ diff --git a/packages/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm b/packages/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm deleted file mode 100644 index 100a1212..00000000 Binary files a/packages/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm and /dev/null differ diff --git a/packages/common/tailwind.colors.ts b/packages/common/tailwind.colors.ts index 662d3bf4..412a8df7 100644 --- a/packages/common/tailwind.colors.ts +++ b/packages/common/tailwind.colors.ts @@ -30,7 +30,7 @@ export const jplYellow = { export const jplTeal = { lighter: '#CFF3FC', light: '#4BA7BE', - base: '#10829E', + base: '#0F7E99', dark: '#006077', darker: '#004050', darkest: '#002129' @@ -185,6 +185,20 @@ export const ThemeWww = { '--color-action-light': 'var(--color-primary-light)', '--color-action-dark': 'var(--color-primary-dark)', '--color-action-darker': 'var(--color-primary-darker)' + }, + gray: { + '--color-primary': foundationColors['jpl-red-dark'], + '--color-primary-light': foundationColors['jpl-red'], + '--color-primary-dark': foundationColors['jpl-red-darker'], + '--color-primary-darker': foundationColors['jpl-red-darker'], + '--color-secondary': 'var(--color-primary)', + '--color-secondary-light': 'var(--color-primary-light)', + '--color-secondary-dark': 'var(--color-primary-dark)', + '--color-secondary-darker': 'var(--color-primary-darker)', + '--color-action': 'var(--color-primary)', + '--color-action-light': 'var(--color-primary-light)', + '--color-action-dark': 'var(--color-primary-dark)', + '--color-action-darker': 'var(--color-primary-darker)' } } @@ -216,6 +230,20 @@ export const ThemeEdu = { '--color-action-light': foundationColors['jpl-teal-light'], '--color-action-dark': foundationColors['jpl-teal'], '--color-action-darker': foundationColors['jpl-teal-dark'] + }, + gray: { + '--color-primary': foundationColors['jpl-violet-dark'], + '--color-primary-light': foundationColors['jpl-violet'], + '--color-primary-dark': foundationColors['jpl-violet-darker'], + '--color-primary-darker': foundationColors['jpl-violet-darker'], + '--color-secondary': foundationColors['jpl-red-dark'], + '--color-secondary-light': foundationColors['jpl-red'], + '--color-secondary-dark': foundationColors['jpl-red-darker'], + '--color-secondary-darker': foundationColors['jpl-red-darker'], + '--color-action': foundationColors['jpl-teal-dark'], + '--color-action-light': foundationColors['jpl-teal'], + '--color-action-dark': foundationColors['jpl-teal-darker'], + '--color-action-darker': foundationColors['jpl-teal-darker'] } } @@ -238,7 +266,29 @@ export const ThemeInternal = { '--color-primary': foundationColors['jpl-teal-light'], '--color-primary-light': foundationColors['jpl-teal-light'], '--color-primary-dark': foundationColors['jpl-teal'], - '--color-primary-darker': foundationColors['jpl-teal-dark'] + '--color-primary-darker': foundationColors['jpl-teal-dark'], + '--color-secondary': 'var(--color-primary)', + '--color-secondary-light': 'var(--color-primary-light)', + '--color-secondary-dark': 'var(--color-primary-dark)', + '--color-secondary-darker': 'var(--color-primary-darker)', + '--color-action': 'var(--color-primary)', + '--color-action-light': 'var(--color-primary-light)', + '--color-action-dark': 'var(--color-primary-dark)', + '--color-action-darker': 'var(--color-primary-darker)' + }, + gray: { + '--color-primary': foundationColors['jpl-teal-dark'], + '--color-primary-light': foundationColors['jpl-teal'], + '--color-primary-dark': foundationColors['jpl-teal-darker'], + '--color-primary-darker': foundationColors['jpl-teal-darker'], + '--color-secondary': 'var(--color-primary)', + '--color-secondary-light': 'var(--color-primary-light)', + '--color-secondary-dark': 'var(--color-primary-dark)', + '--color-secondary-darker': 'var(--color-primary-darker)', + '--color-action': 'var(--color-primary)', + '--color-action-light': 'var(--color-primary-light)', + '--color-action-dark': 'var(--color-primary-dark)', + '--color-action-darker': 'var(--color-primary-darker)' } } diff --git a/packages/common/tailwind.config.ts b/packages/common/tailwind.config.ts index fce0e2f2..81217979 100644 --- a/packages/common/tailwind.config.ts +++ b/packages/common/tailwind.config.ts @@ -286,13 +286,16 @@ export default { // www theme selectors ':root, .ThemeVariantLight': ThemeWww.default, '.ThemeVariantDark': ThemeWww.dark, + '.ThemeVariantGray': ThemeWww.gray, // edu theme selectors '.ThemeEdu, .ThemeEdu.ThemeVariantLight, .ThemeEdu .ThemeVariantLight': ThemeEdu.default, '.ThemeEdu .ThemeVariantDark, .ThemeEdu.ThemeVariantDark': ThemeEdu.dark, + '.ThemeEdu .ThemeVariantGray, .ThemeEdu.ThemeVariantGray': ThemeEdu.gray, // internal theme selectors '.ThemeInternal, .ThemeInternal.ThemeVariantLight, .ThemeInternal .ThemeVariantLight': ThemeInternal.default, - '.ThemeInternal .ThemeVariantDark, .ThemeInternal.ThemeVariantDark': ThemeInternal.dark + '.ThemeInternal .ThemeVariantDark, .ThemeInternal.ThemeVariantDark': ThemeInternal.dark, + '.ThemeInternal .ThemeVariantGray, .ThemeInternal.ThemeVariantGray': ThemeInternal.gray }) }), require('tailwindcss-themer')({ diff --git a/packages/html/src/components/MixinVideoBg/MixinVideoBg.stories.js b/packages/html/src/components/MixinVideoBg/MixinVideoBg.stories.js index f1904e06..1ec34784 100644 --- a/packages/html/src/components/MixinVideoBg/MixinVideoBg.stories.js +++ b/packages/html/src/components/MixinVideoBg/MixinVideoBg.stories.js @@ -1,11 +1,9 @@ import { MixinVideoBgTemplate } from './MixinVideoBg' -import videoMp4 from './../../../node_modules/@explorer-1/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4' -import videoWebm from './../../../node_modules/@explorer-1/common/src/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm' export const MixinVideoBgData = { - file: videoMp4, - webm: videoWebm, - ogg: 'static/media/storybook/static/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.ogv' // no webpack loader for ogg files + file: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.mp4', + webm: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.webm', + ogg: '/videos/NASA-Mars-Helicopter-IngenuityAnimations-7sec.ogv' // no webpack loader for ogg files } export default { diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.stories.js b/packages/vue/src/components/BaseAudio/BaseAudio.stories.js index 752cc60e..e0222265 100644 --- a/packages/vue/src/components/BaseAudio/BaseAudio.stories.js +++ b/packages/vue/src/components/BaseAudio/BaseAudio.stories.js @@ -18,7 +18,7 @@ export default { // shared data export const BaseAudioData = { - file: 'http://127.0.0.1:9000/media/media/05_Da_Funk_Call_Out_Research_Hook.mp3', + file: '/audio/file_example_MP3_700KB.mp3', autoPlay: false, loop: false } diff --git a/packages/vue/src/components/BaseAudio/BaseAudio.vue b/packages/vue/src/components/BaseAudio/BaseAudio.vue index 2d47210c..216b790e 100644 --- a/packages/vue/src/components/BaseAudio/BaseAudio.vue +++ b/packages/vue/src/components/BaseAudio/BaseAudio.vue @@ -118,7 +118,6 @@ - diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js index 9676ce02..822cae24 100644 --- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js +++ b/packages/vue/src/templates/PageEventDetail/PageEventDetail.stories.js @@ -6,11 +6,6 @@ import PageEventDetail from './PageEventDetail.vue' export default { title: 'Templates/PageEventDetail', component: PageEventDetail, - decorators: [ - () => ({ - template: `
` - }) - ], parameters: { html: { root: '#storyDecorator' diff --git a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue index 62e1a72b..4d5a796b 100755 --- a/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue +++ b/packages/vue/src/templates/PageEventDetail/PageEventDetail.vue @@ -287,11 +287,43 @@ import { mixinFormatEventTimeInHoursAndMinutes, mixinFormatSplitEventDates } from '../../utils/mixins' +import LayoutHelper from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue' +import BaseHeading from '@explorer-1/vue/src/components/BaseHeading/BaseHeading.vue' +import ShareButtons from '@explorer-1/vue/src/components/ShareButtons/ShareButtons.vue' +import EventDetailHero from '@explorer-1/vue/src/components/EventDetailHero/EventDetailHero.vue' +import IconCalendar from '@explorer-1/vue/src/components/Icons/IconCalendar.vue' +import IconLocation from '@explorer-1/vue/src/components/Icons/IconLocation.vue' +import IconTime from '@explorer-1/vue/src/components/Icons/IconTime.vue' +import BaseLink from '@explorer-1/vue/src/components/BaseLink/BaseLink.vue' +import BaseButton from '@explorer-1/vue/src/components/BaseButton/BaseButton.vue' +import CalendarButton from '@explorer-1/vue/src/components/CalendarButton/CalendarButton.vue' +import BlockStreamfield from '@explorer-1/vue/src/components/BlockStreamfield/BlockStreamfield.vue' +import BaseImagePlaceholder from '@explorer-1/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue' +import BaseImage from '@explorer-1/vue/src/components/BaseImage/BaseImage.vue' +import BlockRelatedLinks from '@explorer-1/vue/src/components/BlockRelatedLinks/BlockRelatedLinks.vue' +import BlockLinkCarousel from '@explorer-1/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue' // @ts-ignore import PlaceholderPortrait from '@explorer-1/common/src/images/svg/placeholder-portrait.svg' export default defineComponent({ name: 'PageEventDetail', + components: { + LayoutHelper, + BaseHeading, + ShareButtons, + EventDetailHero, + IconCalendar, + IconLocation, + IconTime, + BaseLink, + BaseButton, + CalendarButton, + BlockStreamfield, + BaseImagePlaceholder, + BaseImage, + BlockRelatedLinks, + BlockLinkCarousel + }, props: { data: { type: Object, diff --git a/packages/vue/src/templates/edu/PageEduNewsDetail.vue b/packages/vue/src/templates/edu/PageEduNewsDetail.vue index d5bc1c6d..91d30029 100644 --- a/packages/vue/src/templates/edu/PageEduNewsDetail.vue +++ b/packages/vue/src/templates/edu/PageEduNewsDetail.vue @@ -1,5 +1,6 @@