@explorer-1/vue 0.2.104 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @explorer-1/vue
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [230858f]
+  - @explorer-1/common@1.2.1
+
+## 0.3.0
+
+### Minor Changes
+
+- fb2e39d: Moving SCSS to dedicated files in packages/common
+
+### Patch Changes
+
+- Updated dependencies [fb2e39d]
+  - @explorer-1/common@1.2.0
+
 ## 0.2.104
 
 ### Patch Changes

package/README.md

@@ -1,9 +1,57 @@
-# Vue 3 + TypeScript + Vite
+# @explorer-1/vue
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+- [Prerequisites](#prerequisites)
+- [Getting Started](#getting-started)
+  - [Configuration (Vite)](#configuration-vite)
+  - [Preloading Fonts](#preloading-fonts)
+- [Using Components](#using-components)
 
-## Recommended Setup
+## Prerequisites
 
-- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
+- Recommended build tool: [Vite](https://vite.dev/)
 
-- Use [vue-tsc](https://github.com/vuejs/language-tools/tree/master/packages/tsc) for performing the same type checking from the command line, or for generating d.ts files for SFCs.
+## Getting Started
+
+Install `@explorer-1/vue` and `@explorer-1/common` with [npm](https://www.npmjs.com/) or similar:
+
+```bash
+npm install --save @explorer-1/vue @explorer-1/common
+```
+
+Install secondary dependencies:
+
+- @tailwindcss/forms
+- click-outside-vue3
+- dayjs
+- mitt
+- swiper
+- vue
+- vue-bind-once
+- vue3-compare-image
+- vue3-observe-visibility
+
+```bash
+npm install --save @tailwindcss/forms click-outside-vue3 dayjs mitt swiper vue vue-bind-once vue3-compare-image vue3-observe-visibility
+```
+
+### Configuration (Vite)
+
+View files in the `@explorer-1/vue` package for examples on how to configure your Vue app with Vite.
+
+- [vite.config.ts](./vite.config.ts)
+- [postcss.config.js](./postcss.config.js)
+- [tailwind.config.js](./tailwind.config.js)
+- [index.html](./index.html) -- Vite entrypoint
+- [main.ts](./src/main.ts) -- Vue app entrypoint
+- [App.vue](./src/App.vue)
+
+### Preloading Fonts
+
+In the example `App.vue`, `@explorer-1/vue/src/assets/scss/styles-with-fonts.scss` is the main SCSS include. However, if you need to preload your fonts separately, you can do so by including `./assets/scss/styles.scss` instead (excludes font declarations). You can then preload fonts using a dedicated stylesheet:
+
+1. Replace `@explorer-1/vue/src/assets/scss/styles-with-fonts.scss` with `@explorer-1/vue/src/assets/scss/styles.scss`
+2. Preload fonts with this dedicated stylesheet:`@explorer-1/common/dist/assets/css/font-face.css`
+
+## Using Components
+
+Available components and usage guidance is documented in our [Storybook](https://nasa-jpl.github.io/explorer-1/).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@explorer-1/vue",
-  "version": "0.2.104",
+  "version": "0.3.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "author": "DesignLab",
   "repository": {
     "type": "git",
-    "url": "https://github.com/nasa-jpl/explorer-1"
+    "url": "https://github.com/nasa-jpl/explorer-1/tree/main/packages/vue"
   },
   "type": "module",
   "prettier": "@explorer-1/prettier-config",
@@ -31,7 +31,7 @@
     "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5",
     "vue3-observe-visibility": "^1.0.1",
-    "@explorer-1/common": "1.1.24"
+    "@explorer-1/common": "1.2.1"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
@@ -46,6 +46,9 @@
     "vue-tsc": "^2.0.6",
     "@explorer-1/prettier-config": "1.0.0"
   },
+  "storybook": {
+    "url": "https://main--668c47cbeb95392cd79c3c0d.chromatic.com"
+  },
   "scripts": {
     "dev": "pnpm prepare && vite",
     "build": "pnpm prepare && vue-tsc && vite build",

package/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue

@@ -148,9 +148,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.AsteroidWatchWidget {
-  .label {
-    @apply font-semibold mb-4 text-jpl-red-dark;
-  }
-}
+@import '@explorer-1/common/src/scss/components/AsteroidWatchWidget';
 </style>

package/src/components/BaseAudio/BaseAudio.vue

@@ -338,52 +338,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseAudio {
-  @apply relative w-full;
-
-  .BaseAudio__stage {
-    @apply flex flex-row w-full;
-  }
-
-  .BaseAudio__playback-time-total {
-    @apply text-sm md:text-base pl-1 md:pl-3 text-right;
-  }
-
-  .BaseAudio__playback-time-current,
-  .BaseAudio__playback-time-total {
-    @screen sm {
-      min-width: 7ch;
-    }
-  }
-
-  .BaseAudio__rewind-forward {
-    @apply hidden sm:flex flex-row w-25 lg:w-35 mx-auto justify-between;
-
-    > button {
-      @apply opacity-100 hover:opacity-80;
-
-      svg {
-        @apply w-6 text-white;
-      }
-    }
-  }
-
-  .BaseAudio__playback-time-indicator {
-    &::after {
-      @apply h-4 bg-white block absolute w-1 -top-1 -right-1;
-
-      content: '';
-    }
-  }
-
-  .BaseAudio__extern-wrapper {
-    > button {
-      @apply mr-1 sm:-mt-2 lg:-mt-2.5 ml-2.5 opacity-100 hover:opacity-80;
-
-      svg {
-        @apply w-6;
-      }
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseAudio';
 </style>

package/src/components/BaseCarousel/BaseCarousel.vue

@@ -107,46 +107,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-@import 'swiper/swiper-bundle.css';
-.BaseCarousel {
-  .swiper {
-    .swiper-prev {
-      @apply mr-px;
-    }
-
-    .swiper-prev,
-    .swiper-next {
-      &.swiper-button-disabled {
-        @apply opacity-75 cursor-default bg-none;
-      }
-    }
-  }
-
-  .swiper-nav {
-    padding-top: 56.25%;
-  }
-
-  // .swiper-dots {
-  //   padding-top: 56.25%;
-  //   @apply pointer-events-none;
-
-  //   .swiper-dot {
-  //     @apply inline-block px-1 py-3 cursor-pointer pointer-events-auto;
-
-  //     &:focus {
-  //       @apply outline-none ring-1;
-  //     }
-
-  //     > span {
-  //       @apply inline-block w-3 h-3 rounded-full bg-gray-light-mid;
-  //     }
-
-  //     &.swiper-dot-active {
-  //       > span {
-  //         @apply bg-primary;
-  //       }
-  //     }
-  //   }
-  // }
-}
+@import '@explorer-1/common/src/scss/components/BaseCarousel';
 </style>

package/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue

@@ -85,6 +85,6 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import '@explorer-1/common/src/scss/components/BaseImagePlaceholder';
 </style>

package/src/components/BaseLightboxCloseButton/BaseLightboxCloseButton.vue

@@ -36,10 +36,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseLightboxCloseButton {
-  @apply bg-black z-50 px-px text-right w-full mb-auto;
-  @screen 2xl {
-    @apply w-auto -mr-20 -mt-5;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseLightboxCloseButton';
 </style>

package/src/components/BaseLightboxOpenButton/BaseLightboxOpenButton.vue

@@ -35,12 +35,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseLightboxOpenButton {
-  // scoped styles for Lightbox Opener button
-  @apply relative lg:absolute lg:inset-0 cursor-pointer z-10;
-
-  .BaseButton {
-    @apply -top-px -right-px absolute focus:outline-none  xl:text-xl inline-block;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseLightboxOpenButton';
 </style>

package/src/components/BaseModal/BaseModal.vue

@@ -49,6 +49,6 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 // styles go here
 </style>

package/src/components/BasePill/BasePill.stories.js

@@ -1,4 +1,5 @@
 import BasePill from './BasePill.vue'
+import { eduMetadataDictionary } from './../../constants'
 
 export default {
   title: 'Components/Base/BasePill',
@@ -15,20 +16,28 @@ export default {
       description: 'The size of the tag',
       control: { type: 'select' },
       options: ['sm', 'md', 'lg']
-    }
-  },
-  parameters: {
-    slots: {
-      default: 'BaseStory slot'
+    },
+    contentType: {
+      control: { type: 'select' },
+      options: Object.keys(eduMetadataDictionary)
     }
   }
 }
 
 // stories
 export const PrimaryMedium = {
-  args: { size: 'md', variant: 'primary', default: 'Psyche Asteroid' }
+  args: {
+    size: 'md',
+    variant: 'primary',
+    text: 'Psyche Asteroid',
+    contentType: 'EDULessonPage'
+  }
 }
 
 export const SecondarySmall = {
-  args: { size: 'sm', variant: 'secondary', default: 'Do it yourself' }
+  args: { size: 'sm', variant: 'secondary', text: 'Do it yourself' }
+}
+
+export const WithType = {
+  args: { size: 'sm', variant: 'secondary', text: 'Do it yourself' }
 }

package/src/components/BaseSwimlane/BaseSwimlane.vue

@@ -161,44 +161,6 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss" scoped>
-.BaseSwimlane {
-  @apply overflow-hidden;
-
-  -webkit-mask-image: -webkit-gradient(
-    linear,
-    left top,
-    left bottom,
-    color-stop(0, transparent),
-    color-stop(0.05, rgba(0, 0, 0, 0.35)),
-    color-stop(0.1, black),
-    color-stop(0.5, black),
-    color-stop(0.9, rgba(0, 0, 0, 0.15)),
-    color-stop(1, transparent)
-  );
-  @screen lg {
-    -webkit-mask-image: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      color-stop(0, transparent),
-      color-stop(0.1, rgba(0, 0, 0, 0.15)),
-      color-stop(0.35, black),
-      color-stop(0.65, black),
-      color-stop(0.9, rgba(0, 0, 0, 0.15)),
-      color-stop(1, transparent)
-    );
-  }
-
-  ul {
-    @apply list-none overflow-hidden transition-transform;
-
-    li {
-      @apply text-center p-0 m-0;
-      @screen lg {
-        @apply text-left font-medium;
-      }
-    }
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BaseSwimlane';
 </style>

package/src/components/BaseTimer/BaseTimer.stories.js

@@ -2,7 +2,12 @@ import BaseTimer from './BaseTimer.vue'
 
 export default {
   title: 'Components/Base/BaseTimer',
-  component: BaseTimer
+  component: BaseTimer,
+  decorators: [
+    () => ({
+      template: `<div id="storyDecorator" class="w-full"><story/></div>`
+    })
+  ]
 }
 
 export const BaseStory = {

package/src/components/BaseTimer/BaseTimer.vue

@@ -1,9 +1,10 @@
 <template>
   <component
     :is="diff ? 'time' : 'div'"
-    class="BaseTimer whitespace-nowrap"
+    class="BaseTimer whitespace-nowrap block"
     :datetime="diff ? diff.toISOString() : null"
     :class="{ '-inline': inline }"
+    data-chromatic="ignore"
   >
     <span :hidden="!!diff">Loading…</span>
     <span
@@ -40,7 +41,10 @@
             <template v-else>{{ unitValue(unit) }}</template>
           </span>
           <br v-if="!inline" />
-          <span class="unit text-body-xs uppercase">
+          <span
+            class="unit text-body-xs uppercase"
+            data-chromatic="ignore"
+          >
             {{ shortLabel(unit) }}
           </span>
         </span>
@@ -244,24 +248,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BaseTimer {
-  .unit {
-    // Make the units dimmer than the numbers, regardless of which color it’s displayed with.
-    --text-opacity: 0.84;
-  }
-
-  &.-inline {
-    .text-stats-separator {
-      @apply hidden;
-    }
-
-    .text-seconds {
-      width: 2ch;
-    }
-
-    > span span {
-      @apply inline-block;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseTimer';
 </style>

package/src/components/BaseUnitToggle/BaseUnitToggle.vue

@@ -224,32 +224,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BaseUnitToggle {
-  .unit {
-    // - Make the clickable areas much bigger than they appear for ease of interaction.
-    // - Hide the un-selected units from text selection, so copy-pasted text shows the correct unit.
-    @apply inline-block pt-3 pb-2 px-1 -my-2 -mx-1 leading-relaxed select-none;
-
-    // Make the units dimmer than the numbers, regardless of which color it’s displayed with.
-    --text-opacity: 0.84;
-  }
-
-  label:first-of-type .unit {
-    @apply pl-3 -ml-3;
-  }
-
-  label:last-of-type .unit {
-    @apply pr-3 -mr-3;
-  }
-
-  [type='radio']:focus + .unit {
-    @apply underline;
-  }
-
-  [type='radio']:checked + .unit {
-    @apply font-bold select-text;
-
-    --text-opacity: 1;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseUnitToggle';
 </style>

package/src/components/BaseVideo/BaseVideo.vue

@@ -14,6 +14,7 @@
         :muted="autoplay"
         :playsinline="autoplay"
         :autoplay="autoplay"
+        data-chromatic="ignore"
         controls
       >
         <template v-if="data.fileWebm">
@@ -62,12 +63,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BaseVideo {
-  video {
-    min-width: 100%;
-    left: 0;
-    right: 0;
-    max-height: 901px;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BaseVideo';
 </style>

package/src/components/BlockAccordion/BlockAccordion.vue

@@ -103,11 +103,5 @@ const remappedAccordionItems = computed((): AccordionItemObject[] | undefined =>
   </div>
 </template>
 <style lang="scss">
-.BlockAccordion {
-  .AccordionItemImage {
-    div.p-4 {
-      @apply px-0 #{!important};
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockAccordion';
 </style>

package/src/components/BlockAnchor/BlockAnchor.vue

@@ -21,18 +21,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-// makes sure anchor links align with navigation's fixed overlay
-.BlockAnchor {
-  &::before {
-    @apply block invisible pointer-events-none;
-
-    content: ' ';
-    margin-top: -83px;
-    height: 83px;
-    @screen lg {
-      margin-top: -182px;
-      height: 182px;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockAnchor';
 </style>

package/src/components/BlockAudio/BlockAudio.vue

@@ -65,14 +65,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.BlockAudio {
-  max-height: 480px;
-
-  .BlockAudio-thumbnail {
-    @apply hidden;
-    @media only screen and (min-width: 345px) {
-      @apply block;
-    }
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockAudio';
 </style>

package/src/components/BlockCircleImageCard/BlockCircleImageCard.vue

@@ -99,22 +99,4 @@ export default defineComponent({
 </script>
 <style lang="scss">
 @import '@explorer-1/common/src/scss/components/BlockCircleImageCard';
-
-@media (forced-colors: active) {
-  .BlockCircleImageCard {
-    border: 1px solid;
-  }
-}
-
-.BlockCircleImageCard {
-  @apply md:z-40;
-}
-
-.BlockCircleImageCard .IconExternal {
-  @apply w-6 h-6 text-gray-mid-dark;
-}
-
-.BlockCircleImageCard .IconPlay {
-  @apply w-7 h-7 bg-jpl-red text-white;
-}
 </style>

package/src/components/BlockCsrTable/BlockCsrTable.vue

@@ -252,47 +252,6 @@ const onFilterTextBoxChanged = () => {
     </div>
   </client-only>
 </template>
-<style type="scss">
-.BlockCsrTable {
-  .MainCsrTable .ag-root {
-    @apply overflow-x-auto;
-    min-height: 75rem;
-    .ag-body {
-      min-width: 40rem;
-    }
-    .ag-header,
-    .ag-header-viewport {
-      @apply overflow-visible;
-    }
-  }
-  .ag-cell {
-    padding-left: 0.6rem;
-    padding-right: 0.6rem;
-    @screen lg {
-      padding-left: 1.2rem;
-      padding-right: 1.2rem;
-    }
-  }
-  .ag-root-wrapper,
-  .ag-cell,
-  .ag-theme-params-1 {
-    @apply font-primary;
-  }
-  .ag-cell-wrap-text {
-    line-height: 1.25rem;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-  }
-  .ag-filter-filter {
-    .ag-wrapper::before {
-      @apply hidden;
-    }
-    .ag-input-field-input {
-      @apply text-xs;
-    }
-  }
-  .ag-paging-row-summary-panel {
-    @apply whitespace-nowrap;
-  }
-}
+<style lang="scss">
+@import '@explorer-1/common/src/scss/components/BlockCsrTable';
 </style>

package/src/components/BlockCsrTable/CsrTestLimitsTable.vue

@@ -72,19 +72,5 @@ const defaultcolDef = {
   </ag-grid-vue>
 </template>
 <style lang="scss">
-.CsrTestLimitsTable {
-  .ag-root {
-    @apply min-h-12 overflow-x-auto;
-    .ag-body {
-      min-width: 40rem;
-    }
-    .ag-header,
-    .ag-header-viewport {
-      @apply overflow-visible;
-    }
-  }
-  .ag-root-wrapper {
-    @apply overflow-visible;
-  }
-}
+@import '@explorer-1/common/src/scss/components/CsrTestLimitsTable';
 </style>

package/src/components/BlockDialog/BlockDialog.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'
 import * as Stories from './BlockDialog.stories'
 
 <Meta of={Stories} />

package/src/components/BlockDialog/BlockDialog.vue

@@ -102,30 +102,5 @@ export default defineComponent({
 })
 </script>
 <style lang="scss">
-.BlockDialog {
-  // Make sure the dialog container and all its descendants are not visible and not focusable when it is hidden.
-  &[aria-hidden='true'] {
-    display: none;
-  }
-
-  @media (forced-colors: active) {
-    .dialog-box {
-      border: 1px solid;
-    }
-  }
-
-  .dialog-overlay,
-  .dialog-box {
-    @apply animate-fadeIn;
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-    }
-  }
-
-  // Offset by the size of the icon.
-  .button-close {
-    top: -2rem;
-  }
-}
+@import '@explorer-1/common/src/scss/components/BlockDialog';
 </style>