merge

.github/workflows/storybook.yml

@@ -40,7 +40,7 @@ jobs:
         run: make vue-storybook-build
 
       - name: Upload build to artifacts
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook
           path: apps/vue-storybook/storybook_compiled
@@ -69,7 +69,7 @@ jobs:
         run: pnpm --filter @explorer-1/vue-storybook exec playwright install
 
       - name: Download storybook build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4.1.7
         with:
           name: storybook
           path: apps/vue-storybook/storybook_compiled
@@ -101,7 +101,7 @@ jobs:
   #       run: pnpm i
 
   #     - name: Download storybook build
-  #       uses: actions/download-artifact@v3
+  #       uses: actions/download-artifact@v4.1.7
   #       with:
   #         name: storybook
   #         path: apps/vue-storybook/storybook_compiled
@@ -135,7 +135,7 @@ jobs:
         run: pnpm i
 
       - name: Download storybook build
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4.1.7
         with:
           name: storybook
           path: apps/vue-storybook/storybook_compiled

README.md

@@ -24,6 +24,26 @@ make nuxt
 make html-storybook
 ```
 
+### Publishing to npm
+
+1. Update the package version for any packages that have been changed since the last publish (usually @explorer-1/vue and sometimes @explorer-1/common)
+2. Also update the package version for the main workspace.
+
+3. Commit changes and also tag with the latest main workspace version
+
+   ```bash
+   git commit -m "bumping package version for publishing"
+   git tag 3.x.x
+   git push
+   git push --tags
+   ```
+
+4. Publish relevant packages to npm:
+
+   ```bash
+   pnpm publish --filter \@explorer-1/vue
+   ```
+
 ### Developing Vue components
 
 1. Create new component files in `packages/vue`
@@ -36,6 +56,7 @@ make html-storybook
 ## Table of contents
 
 - [Version 3.x.x docs (draft)](#version-3xx-docs-draft)
+  - [Publishing to npm](#publishing-to-npm)
   - [Developing Vue components](#developing-vue-components)
 - [What's included](#whats-included)
 - [Installation](#installation)

apps/vue-storybook/.storybook/_mock-components.js

@@ -20,6 +20,11 @@ export default (app) => {
       '<a href="#" @click.prevent="log()" :class="this.class" v-bind="$attrs"><slot></slot></a>'
   })
 
+  // Nuxt ClientOnly
+  app.component('ClientOnly', {
+    template: '<slot></slot>'
+  })
+
   // use static dsn widget instead of fetch
   app.component('FetchDsnWidget', DsnWidget)
 }

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

@@ -13,6 +13,7 @@ import '@explorer-1/common/src/scss/styles-with-fonts.scss'
 import { withGlobals, globalTypes } from './withGlobals'
 import customTheme from '@explorer-1/common-storybook/src/config/customTheme'
 import '@explorer-1/common-storybook/src/config/canvas.css'
+import VueObserveVisibility from 'vue3-observe-visibility'
 
 const pinia = createPinia()
 const router = createRouter({
@@ -40,6 +41,7 @@ setup((app, _context) => {
   app.use(vClickOutside)
   app.use(VueCompareImage)
   app.use(BindOncePlugin)
+  app.use(VueObserveVisibility)
   app.component('Swiper', Swiper)
   app.component('SwiperSlide', SwiperSlide)
   app.config.globalProperties.$filters = filters
@@ -188,7 +190,23 @@ const preview: Preview = {
           'Mixins',
           ['Overview'],
           'Templates',
-          ['WWW', 'EDU', 'PageContent']
+          [
+            'WWW',
+            'EDU',
+            [
+              'PageContent',
+              'PageEduNewsDetail',
+              'PageEduEventDetail',
+              'PageEduCollectionsDetail',
+              'PageEduExplainerArticle',
+              'PageEduLesson',
+              'PageEduStudentProject',
+              'PageEduTeachableMoment',
+              'PageEduMultimediaDetail',
+              '*'
+            ],
+            'PageContent'
+          ]
         ]
       }
     }

apps/vue-storybook/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue-storybook",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -43,9 +43,10 @@
     "dayjs": "^1.11.11",
     "mitt": "^3.0.1",
     "swiper": "^11.1.3",
-    "vue": "^3.2.47",
+    "vue": "^3.5.3",
     "vue-bind-once": "^0.2.1",
-    "vue3-compare-image": "^1.2.5"
+    "vue3-compare-image": "^1.2.5",
+    "vue3-observe-visibility": "^1.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1",
@@ -67,7 +68,7 @@
     "@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",
+    "a11y-dialog": "^8.1.0",
     "autoprefixer": "^10.4.19",
     "axe-playwright": "^2.0.1",
     "chromatic": "^11.5.5",

package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.2.24",
+  "version": "3.2.56",
   "type": "module",
   "description": "Monorepo for JPL's design system, Explorer 1",
   "keywords": [

packages/common/package.json

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

packages/common/src/scss/_grid.scss

@@ -82,4 +82,21 @@
       @apply -mt-29; // just a little more than -28 to get rid of the barely visible white line
     }
   }
+  .ThemeEdu {
+    // applied globally via /layouts/default.vue
+    .nav-offset {
+      @apply pt-18; // height of mobile header
+
+      @screen lg {
+        @apply pt-0;
+      }
+    }
+
+    // for use on pages with flush-top hero sections // doesn't apply to EDU
+    .-nav-offset {
+      @screen lg {
+        @apply mt-0; // get rid of the barely visible white line
+      }
+    }
+  }
 }

packages/common/src/scss/components/_BlockText.scss

@@ -76,6 +76,15 @@
 
   ol {
     @apply pl-12 list-decimal;
+    ol {
+      list-style-type: lower-alpha;
+      ol {
+        list-style-type: lower-roman;
+        ol {
+          list-style-type: decimal;
+        }
+      }
+    }
   }
 
   ul {
@@ -94,4 +103,145 @@
       }
     }
   }
+  // richtext media support
+  .richtext-image {
+    &.fullwidth {
+      @apply mb-10 lg:mb-14;
+      img {
+        @apply w-full h-auto;
+      }
+    }
+    &.left,
+    &.right {
+      @apply mb-5 lg:mb-5 mx-5 lg:mx-8;
+      @apply inline max-w-full sm:max-w-[50%];
+      img {
+        @apply max-w-full  h-auto;
+      }
+    }
+    &.left {
+      @apply sm:float-left ml-0;
+      // mimics offset in BlockInlineImage
+      @apply ml-0 lg:-ml-[5.3rem] xl:-ml-[6.8rem];
+      // uncomment if floating images become unwieldy
+      // + p,
+      // + div {
+      //   clear: right;
+      // }
+    }
+    &.right {
+      @apply sm:float-right mr-0;
+      // mimics offset in BlockInlineImage
+      @apply mr-0 lg:-mr-[5.3rem] xl:-mr-[6.8rem];
+      // uncomment if floating images become unwieldy
+      // + p,
+      // + div {
+      //   clear: left;
+      // }
+    }
+    &:last-child {
+      @apply mb-0;
+    }
+  }
+  .richtext-caption {
+    // mimic BaseImageCaption
+    @apply pt-3 text-gray-mid-dark text-sm lg:text-base;
+    div.caption {
+      @apply inline #{!important};
+    }
+
+    a {
+      @apply text-action underline cursor-pointer;
+
+      &:hover {
+        @apply text-action-hover;
+      }
+    }
+
+    .ThemeVariantLight & {
+      @apply text-gray-mid-dark;
+    }
+
+    .ThemeVariantDark & {
+      @apply text-gray-mid;
+    }
+  }
+  > div {
+    @apply mb-10 lg:mb-14;
+    iframe {
+      @apply w-full h-auto aspect-video;
+    }
+    &:last-child {
+      @apply mb-0;
+    }
+  }
+  // other sizes
+  &.-small {
+    p {
+      @apply mb-2;
+
+      @screen lg {
+        @apply mb-2;
+      }
+
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @apply mt-4 mb-2;
+
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+
+    hr {
+      @apply border-gray-light-mid border-t my-2;
+
+      @screen lg {
+        @apply my-4;
+      }
+
+      + h1,
+      + h2,
+      + h3,
+      + h4,
+      + h5,
+      + h6 {
+        @apply mt-2;
+      }
+
+      &:last-child {
+        @apply mb-0;
+      }
+    }
+
+    ol,
+    ul {
+      @apply mb-2;
+
+      @screen lg {
+        @apply mb-2;
+      }
+
+      &:last-child {
+        @apply mb-0;
+      }
+
+      li {
+        @apply my-1;
+
+        &:last-child {
+          @apply mb-0;
+        }
+      }
+    }
+  }
 }