merging in latest main

.gitignore

@@ -62,6 +62,9 @@ storybook_compiled
 .build-*
 .netlify
 
+# Typescript
+*.d.ts
+
 # Tailwind
 .www-frontend_temp/
 

apps/html-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/html-storybook",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,8 @@
     "lint:fix": "eslint .storybook --fix",
     "build": "pnpm run prepare && storybook build -c .storybook -o storybook_compiled",
     "percy": "percy storybook http://localhost:7007",
-    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run"
+    "percy:dry-run": "percy storybook http://localhost:7007 --dry-run",
+    "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
     "@fancyapps/ui": "^4.0.26",
@@ -41,24 +42,24 @@
     "@percy/cli": "^1.28.6",
     "@percy/storybook": "^6.0.0",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@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",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-docs": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/addon-links": "^8.2.4",
+    "@storybook/addon-viewport": "^8.2.4",
+    "@storybook/html": "^8.2.4",
+    "@storybook/html-vite": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
+    "@storybook/theming": "^8.2.4",
     "@whitespace/storybook-addon-html": "^6.1.1",
     "autoprefixer": "^10.4.19",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",

apps/vue-storybook/.storybook/manager-head.html

@@ -12,13 +12,7 @@
     color: inherit !important;
   }
 
-  /* www should be in uppercase */
-  .sidebar-item#www {
-    text-transform: uppercase;
-  }
-
   /* create illusion of hrs between sidebar sections */
-  .sidebar-item#www,
   .sidebar-item#appendix {
     border-radius: 0;
     border-top: 2px solid rgba(0, 0, 0, 0.1);

apps/vue-storybook/.storybook/preview.ts

@@ -104,16 +104,26 @@ const preview: Preview = {
           'Getting Started',
           ['Developer'],
           'Guides',
-          'Foundation',
+          'Foundations',
           [
             'Colors',
             'Typography',
             'Icons',
             'Logos',
             'Themes',
             'Grid and Layout',
+            ['Docs'],
             'Responsive Design'
           ],
+          'Navigation',
+          [
+            'Overview',
+            'Headers',
+            ['Overview', 'WWW'],
+            'Footers',
+            ['Overview', 'WWW'],
+            'Secondary Navigation'
+          ],
           'Global Layout',
           [
             'Overview',
@@ -139,7 +149,7 @@ const preview: Preview = {
             'Blocks',
             ['Overview', 'Heroes', ['Overview', 'Small', 'Medium', 'Large']],
             'Heroes',
-            ['*', 'HeroMedia', 'HeroListingIndex'],
+            ['Overview', 'Small', 'Medium', 'Large', 'Media Only', 'HeroListingIndex'],
             'Forms',
             ['Overview', 'TextInput', 'TextArea'],
             'Search',
@@ -148,8 +158,12 @@ const preview: Preview = {
             ['Overview', 'MixinAnimationCaret', 'MixinVideoBg', 'MixinCarousel'],
             'Utilities',
             ['Overview', '*'],
-            'EDU'
-          ]
+            'WWW'
+          ],
+          'Mixins',
+          ['Overview'],
+          'Templates',
+          ['WWW', 'EDU', 'PageContent']
         ]
       }
     }

apps/vue-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue-storybook",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -17,7 +17,7 @@
     "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 --force-build-preview",
+    "storybook": "storybook dev -c .storybook -p 6006 --ci",
     "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",
@@ -29,7 +29,8 @@
     "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"
+    "test:ci": "test-storybook --stories-json --maxWorkers=4",
+    "update:storybook": "npx storybook@latest upgrade --package-manager pnpm"
   },
   "dependencies": {
     "@explorer-1/common": "workspace:*",
@@ -49,16 +50,19 @@
     "@explorer-1/prettier-config": "workspace:*",
     "@explorer-1/tsconfig": "workspace:*",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@storybook/addon-a11y": "^8.2.1",
-    "@storybook/addon-essentials": "^8.2.1",
-    "@storybook/blocks": "^8.2.1",
+    "@storybook/addon-a11y": "^8.2.4",
+    "@storybook/addon-essentials": "^8.2.4",
+    "@storybook/blocks": "^8.2.4",
+    "@storybook/manager-api": "^8.2.4",
+    "@storybook/preview-api": "^8.2.4",
     "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.2.1",
-    "@storybook/vue3": "^8.2.1",
-    "@storybook/vue3-vite": "^8.2.1",
+    "@storybook/theming": "^8.2.4",
+    "@storybook/vue3": "^8.2.4",
+    "@storybook/vue3-vite": "^8.2.4",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@whitespace/storybook-addon-html": "^6.1.1",
+    "a11y-dialog": "^8.0.4",
     "autoprefixer": "^10.4.19",
     "axe-playwright": "^2.0.1",
     "chromatic": "^11.5.5",
@@ -69,7 +73,7 @@
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "rimraf": "^5.0.5",
-    "storybook": "^8.2.1",
+    "storybook": "^8.2.4",
     "storybook-addon-vue-slots": "^0.9.29",
     "tailwindcss": "^3.4.3",
     "ts-node": "^10.9.2",

package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.1.0",
+  "version": "3.1.3",
   "type": "module",
   "description": "Monorepo for JPL's design system, Explorer 1",
   "keywords": [
@@ -23,13 +23,13 @@
   },
   "scripts": {
     "clean": "pnpm clean:nodemodules && pnpm clean:dist && pnpm clean:nuxt",
-    "clean:rimraf": "rimraf \"**/node_modules\"",
-    "clean:cache": "find . -name '.cache' -type d -prune -exec rm -rf '{}' +",
-    "clean:dist": "find . -name 'dist' -type d -prune -exec rm -rf '{}' +",
-    "clean:nodemodules": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
-    "clean:nuxt": "find . -name '.nuxt' -type d -prune -exec rm -rf '{}' +",
+    "clean:nodemodules": "rimraf \"**/node_modules\"",
+    "clean:cache": "rimraf \"**/.cache\"",
+    "clean:dist": "rimraf \"**/dist\"",
+    "clean:nuxt": "rimraf \"**/.nuxt\"",
     "refresh": "pnpm clean && pnpm i",
-    "nuke": "rimraf pnpm-lock.yaml && pnpm refresh",
+    "nuke-frontend": "rimraf pnpm-lock.yaml && pnpm run refresh",
+    "nuke": "pnpm run clean:nodemodules && pnpm run nuke-frontend",
     "preinstall": "npx --yes only-allow pnpm",
     "preupdate": "npx --yes only-allow pnpm",
     "lint": "pnpm run -r --if-present lint",

packages/common-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/common-storybook",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "publishConfig": {
     "access": "public"

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/common",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "private": false,
   "publishConfig": {
     "access": "public"

packages/common/src/scss/_typography.scss

@@ -188,13 +188,15 @@
     }
   }
 
-  .text-subtitle {
-    @apply font-secondary uppercase text-base leading-tight tracking-wider;
-  }
-
-  .text-subtitle-sm {
-    @apply font-secondary uppercase text-sm leading-tight tracking-wider;
-  }
+  // moved to a tailwind plugin in tailwind.config.js which allows us to @apply text-subtitle
+  // .text-subtitle {
+  //   @apply font-secondary uppercase text-base leading-tight tracking-wider;
+  // }
+
+  // moved to a tailwind plugin in tailwind.config.js which allows us to @apply text-subtitle
+  // .text-subtitle-sm {
+  //   @apply font-secondary uppercase text-sm leading-tight tracking-wider;
+  // }
 
   .text-body-lg {
     font-size: pxToRem(18); // Based on Tailwind's text-lg

packages/common/src/scss/components/_BlockTable.scss

@@ -1,3 +1,6 @@
+// needed to @extend .BlockText
+@import '@explorer-1/common/src/scss/components/BlockText';
+
 .BlockTable {
   table {
     @apply border-gray-light-mid border-t border-b border-collapse w-full;
@@ -8,7 +11,7 @@
   }
 
   th {
-    @apply p-3 lg:p-5 border-gray-light-mid border-b text-subtitle text-white text-left font-normal;
+    @apply p-3 lg:p-5 border-gray-light-mid border-b font-secondary uppercase text-base leading-tight tracking-wider text-white text-left font-normal;
   }
 
   tbody {

packages/common/tailwind.colors.ts

@@ -140,16 +140,19 @@ export const socialColors = {
 // custom css vars
 export const themeVariantColors = {
   primary: 'var(--color-primary)',
+  'primary-lighter': 'var(--color-primary-lighter)',
   'primary-light': 'var(--color-primary-light)',
   'primary-dark': 'var(--color-primary-dark)',
   'primary-darker': 'var(--color-primary-darker)',
   'primary-hover': 'var(--color-primary-dark)',
   secondary: 'var(--color-secondary)',
+  'secondary-lighter': 'var(--color-secondary-lighter)',
   'secondary-light': 'var(--color-secondary-light)',
   'secondary-dark': 'var(--color-secondary-dark)',
   'secondary-darker': 'var(--color-secondary-darker)',
   'secondary-hover': 'var(--color-secondary-dark)',
   action: 'var(--color-action)',
+  'action-lighter': 'var(--color-action-lighter)',
   'action-light': 'var(--color-action-light)',
   'action-dark': 'var(--color-action-dark)',
   'action-darker': 'var(--color-action-darker)',
@@ -160,44 +163,53 @@ export const themeVariantColors = {
 export const ThemeWww = {
   default: {
     '--color-primary': foundationColors['jpl-red'],
+    '--color-primary-lighter': foundationColors['jpl-red-lighter'],
     '--color-primary-light': foundationColors['jpl-red-light'],
     '--color-primary-dark': foundationColors['jpl-red-dark'],
     '--color-primary-darker': foundationColors['jpl-red-darker'],
     '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-lighter': 'var(--color-primary-lighter)',
     '--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-lighter': 'var(--color-primary-lighter)',
     '--color-action-light': 'var(--color-primary-light)',
     '--color-action-dark': 'var(--color-primary-dark)',
     '--color-action-darker': 'var(--color-primary-darker)'
   },
   dark: {
     '--color-primary': foundationColors['jpl-red-light'],
+    '--color-primary-lighter': foundationColors['jpl-red-lighter'],
     '--color-primary-light': foundationColors['jpl-red-light'],
     '--color-primary-dark': foundationColors['jpl-red'],
     '--color-primary-darker': foundationColors['jpl-red-dark'],
     '--color-secondary': 'var(--color-primary)',
+    '--color-secondary-lighter': 'var(--color-primary-lighter)',
     '--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-lighter': 'var(--color-primary-lighter)',
     '--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-lighter': foundationColors['jpl-red-light'],
     '--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': 'var(--color-secondary-dark)',
+    '--color-secondary-lighter': 'var(--color-primary-light)',
+    '--color-secondary-light': 'var(--color-primary)',
+    '--color-secondary-dark': 'var(--color-primary-darker)',
     '--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': 'var(--color-action-dark)',
+    '--color-action-lighter': 'var(--color-action-light)',
+    '--color-action-light': 'var(--color-action)',
+    '--color-action-dark': 'var(--color-primary-darker)',
     '--color-action-darker': 'var(--color-primary-darker)'
   }
 }

packages/common/tailwind.config.ts

@@ -283,6 +283,13 @@ export default {
     require('@tailwindcss/forms'),
     plugin(({ addBase }) => {
       addBase({
+        // reusable typography classes TODO: write a more robust way to include most typography classes
+        '.text-subtitle': {
+          '@apply font-secondary uppercase text-base leading-tight tracking-wider': {}
+        },
+        '.text-subtitle-sm': {
+          '@apply font-secondary uppercase text-sm leading-tight tracking-wider': {}
+        },
         // www theme selectors
         ':root, .ThemeVariantLight': ThemeWww.default,
         '.ThemeVariantDark': ThemeWww.dark,

packages/configs/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/eslint-config",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared eslint config",
   "main": "index.js",
   "private": false,

packages/configs/prettier/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@explorer-1/prettier-config",
+  "version": "1.0.0",
   "private": false,
   "publishConfig": {
     "access": "public"

packages/configs/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/tsconfig",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "publishConfig": {
     "access": "public"