@explorer-1/vue 0.0.0 → 0.0.2

package/src/docs/foundation/color.docs.mdx

@@ -15,42 +15,42 @@ import { Meta, Story, Canvas } from '@storybook/blocks'
 
 Each of these foundation colors has specific usage scenarios.
 
-| Color                                     | Name           | Token            |
-| :---------------------------------------- | :------------- | :--------------- |
-| <div class="bg-jpl-red-light p-4"></div>  | JPL Red Light  | `jpl-red-light`  |
-| <div class="bg-jpl-red p-4"></div>        | JPL Red        | `jpl-red`        |
-| <div class="bg-jpl-red-dark p-4"></div>   | JPL Red Dark   | `jpl-red-dark`   |
-| <div class="bg-jpl-red-darker p-4"></div> | JPL Red Darker | `jpl-red-darker` |
-| <div class="bg-jpl-aqua p-4"></div>       | JPL Aqua       | `aqua`           |
-| <div class="bg-blue p-4"></div>           | Blue           | `blue`           |
-| <div class="bg-dark-blue p-4"></div>      | Dark Blue      | `dark-blue`      |
-| <div class="bg-green p-4"></div>          | Green          | `green`          |
+| Color                                         | Name           | Token            |
+| :-------------------------------------------- | :------------- | :--------------- |
+| <div className="bg-jpl-red-light p-4"></div>  | JPL Red Light  | `jpl-red-light`  |
+| <div className="bg-jpl-red p-4"></div>        | JPL Red        | `jpl-red`        |
+| <div className="bg-jpl-red-dark p-4"></div>   | JPL Red Dark   | `jpl-red-dark`   |
+| <div className="bg-jpl-red-darker p-4"></div> | JPL Red Darker | `jpl-red-darker` |
+| <div className="bg-jpl-aqua p-4"></div>       | JPL Aqua       | `aqua`           |
+| <div className="bg-blue p-4"></div>           | Blue           | `blue`           |
+| <div className="bg-dark-blue p-4"></div>      | Dark Blue      | `dark-blue`      |
+| <div className="bg-green p-4"></div>          | Green          | `green`          |
 
 ### Reserved for Internal Use
 
 These colors should not be used on public-facing JPL websites.
 
-| Color                                          | Name                | Token                 |
-| :--------------------------------------------- | :------------------ | :-------------------- |
-| <div class="bg-jpl-sky-blue-light p-4"></div>  | JPL Sky Blue Light  | `jpl-sky-blue-light`  |
-| <div class="bg-jpl-sky-blue p-4"></div>        | JPL Sky Blue        | `jpl-sky-blue`        |
-| <div class="bg-jpl-sky-blue-dark p-4"></div>   | JPL Sky Blue Dark   | `jpl-sky-blue-dark`   |
-| <div class="bg-jpl-sky-blue-darker p-4"></div> | JPL Sky Blue Darker | `jpl-sky-blue-darker` |
+| Color                                              | Name                | Token                 |
+| :------------------------------------------------- | :------------------ | :-------------------- |
+| <div className="bg-jpl-sky-blue-light p-4"></div>  | JPL Sky Blue Light  | `jpl-sky-blue-light`  |
+| <div className="bg-jpl-sky-blue p-4"></div>        | JPL Sky Blue        | `jpl-sky-blue`        |
+| <div className="bg-jpl-sky-blue-dark p-4"></div>   | JPL Sky Blue Dark   | `jpl-sky-blue-dark`   |
+| <div className="bg-jpl-sky-blue-darker p-4"></div> | JPL Sky Blue Darker | `jpl-sky-blue-darker` |
 
 ### Reserved for EDU Use
 
 These colors should not be used on public-facing JPL websites.
 
-| Color                                        | Name              | Token               |
-| :------------------------------------------- | :---------------- | :------------------ |
-| <div class="bg-jpl-purple-light p-4"></div>  | JPL Purple Light  | `jpl-purple-light`  |
-| <div class="bg-jpl-purple p-4"></div>        | JPL Purple        | `jpl-purple`        |
-| <div class="bg-jpl-purple-dark p-4"></div>   | JPL Purple Dark   | `jpl-purple-dark`   |
-| <div class="bg-jpl-purple-darker p-4"></div> | JPL Purple Darker | `jpl-purple-darker` |
-| <div class="bg-jpl-teal-light p-4"></div>    | JPL Teal Light    | `jpl-teal-light`    |
-| <div class="bg-jpl-teal p-4"></div>          | JPL Teal          | `jpl-teal`          |
-| <div class="bg-jpl-teal-dark p-4"></div>     | JPL Teal Dark     | `jpl-teal-dark`     |
-| <div class="bg-jpl-teal-darker p-4"></div>   | JPL Teal Darker   | `jpl-teal-darker`   |
+| Color                                            | Name              | Token               |
+| :----------------------------------------------- | :---------------- | :------------------ |
+| <div className="bg-jpl-purple-light p-4"></div>  | JPL Purple Light  | `jpl-purple-light`  |
+| <div className="bg-jpl-purple p-4"></div>        | JPL Purple        | `jpl-purple`        |
+| <div className="bg-jpl-purple-dark p-4"></div>   | JPL Purple Dark   | `jpl-purple-dark`   |
+| <div className="bg-jpl-purple-darker p-4"></div> | JPL Purple Darker | `jpl-purple-darker` |
+| <div className="bg-jpl-teal-light p-4"></div>    | JPL Teal Light    | `jpl-teal-light`    |
+| <div className="bg-jpl-teal p-4"></div>          | JPL Teal          | `jpl-teal`          |
+| <div className="bg-jpl-teal-dark p-4"></div>     | JPL Teal Dark     | `jpl-teal-dark`     |
+| <div className="bg-jpl-teal-darker p-4"></div>   | JPL Teal Darker   | `jpl-teal-darker`   |
 
 <span id="functional-gray-tones"></span>
 
@@ -58,24 +58,24 @@ These colors should not be used on public-facing JPL websites.
 
 Grayscale colors are used throughout the site for text and layout.
 
-| Color                                     | Name           | Token            | Value     |
-| :---------------------------------------- | :------------- | :--------------- | :-------- |
-| <div class="bg-white p-4"></div>          | White          | `white`          | `#FFFFFF` |
-| <div class="bg-off-white p-4"></div>      | Off White      | `off-white`      | `#FAFAFA` |
-| <div class="bg-gray-light p-4"></div>     | Gray Light     | `gray-light`     | `#F5F5F5` |
-| <div class="bg-gray-light-mid p-4"></div> | Gray Light Mid | `gray-light-mid` | `#D8D8D8` |
-| <div class="bg-gray-mid p-4"></div>       | Gray Mid       | `gray-mid`       | `#949494` |
-| <div class="bg-gray-mid-dark p-4"></div>  | Gray Mid Dark  | `gray-mid-dark`  | `#6F6F6F` |
-| <div class="bg-gray-dark p-4"></div>      | Gray Dark      | `gray-dark`      | `#222222` |
-| <div class="bg-black p-4"></div>          | Black          | `black`          | `#000000` |
+| Color                                         | Name           | Token            | Value     |
+| :-------------------------------------------- | :------------- | :--------------- | :-------- |
+| <div className="bg-white p-4"></div>          | White          | `white`          | `#FFFFFF` |
+| <div className="bg-off-white p-4"></div>      | Off White      | `off-white`      | `#FAFAFA` |
+| <div className="bg-gray-light p-4"></div>     | Gray Light     | `gray-light`     | `#F5F5F5` |
+| <div className="bg-gray-light-mid p-4"></div> | Gray Light Mid | `gray-light-mid` | `#D8D8D8` |
+| <div className="bg-gray-mid p-4"></div>       | Gray Mid       | `gray-mid`       | `#949494` |
+| <div className="bg-gray-mid-dark p-4"></div>  | Gray Mid Dark  | `gray-mid-dark`  | `#6F6F6F` |
+| <div className="bg-gray-dark p-4"></div>      | Gray Dark      | `gray-dark`      | `#222222` |
+| <div className="bg-black p-4"></div>          | Black          | `black`          | `#000000` |
 
-Although several gradations are available via Tailwind CSS classes, make sure to only use the intended colors for text:
+Although several gradations are available via Tailwind CSS classNamees, make sure to only use the intended colors for text:
 
-- <div class="w-3 h-3 bg-gray-dark inline-block"></div>
+- <div className="w-3 h-3 bg-gray-dark inline-block"></div>
   <code>.text-gray-dark</code>
-- <div class="w-3 h-3 bg-gray-mid-dark inline-block"></div>
+- <div className="w-3 h-3 bg-gray-mid-dark inline-block"></div>
   <code>.text-gray-mid-dark</code>
-- <div class="w-3 h-3 bg-gray-mid inline-block"></div>
+- <div className="w-3 h-3 bg-gray-mid inline-block"></div>
   <code>.text-gray-mid</code>
 
 <span id="semantic-colors"></span>
@@ -87,23 +87,23 @@ Recommended for use in forms, alerts, or any element meant to communicate a stat
 **Note:** Color should never be the _only_ means used to convey state information;
 it must always be accompanied by text or iconography that makes it clear for colorblind users.
 
-| Color                                          | Name                | Token                 | Value     |
-| :--------------------------------------------- | :------------------ | :-------------------- | :-------- |
-| <div class="bg-alert-gold p-4"></div>          | Alert Gold          | `alert-gold`          | `#FFBA32` |
-| <div class="bg-alert-gold-light p-4"></div>    | Alert Gold Light    | `alert-gold-light`    | `#FFF9EB` |
-| <div class="bg-disabled-gray p-4"></div>       | Disabled Gray       | `disabled-gray`       | `#D8D8D8` |
-| <div class="bg-error-red p-4"></div>           | Error Red           | `error-red`           | `#C1152E` |
-| <div class="bg-error-red-light p-4"></div>     | Error Red Light     | `error-red-light`     | `#FFE8EB` |
-| <div class="bg-focus-blue p-4"></div>          | Focus Blue          | `focus-blue`          | `#1871C9` |
-| <div class="bg-focus-blue-light p-4"></div>    | Focus Blue Light    | `focus-blue-light`    | `#E8F1FA` |
-| <div class="bg-success-green p-4"></div>       | Success Green       | `success-green`       | `#33A17B` |
-| <div class="bg-success-green-light p-4"></div> | Success Green Light | `success-green-light` | `#E1F5EE` |
+| Color                                              | Name                | Token                 | Value     |
+| :------------------------------------------------- | :------------------ | :-------------------- | :-------- |
+| <div className="bg-alert-gold p-4"></div>          | Alert Gold          | `alert-gold`          | `#FFBA32` |
+| <div className="bg-alert-gold-light p-4"></div>    | Alert Gold Light    | `alert-gold-light`    | `#FFF9EB` |
+| <div className="bg-disabled-gray p-4"></div>       | Disabled Gray       | `disabled-gray`       | `#D8D8D8` |
+| <div className="bg-error-red p-4"></div>           | Error Red           | `error-red`           | `#C1152E` |
+| <div className="bg-error-red-light p-4"></div>     | Error Red Light     | `error-red-light`     | `#FFE8EB` |
+| <div className="bg-focus-blue p-4"></div>          | Focus Blue          | `focus-blue`          | `#1871C9` |
+| <div className="bg-focus-blue-light p-4"></div>    | Focus Blue Light    | `focus-blue-light`    | `#E8F1FA` |
+| <div className="bg-success-green p-4"></div>       | Success Green       | `success-green`       | `#33A17B` |
+| <div className="bg-success-green-light p-4"></div> | Success Green Light | `success-green-light` | `#E1F5EE` |
 
 <span id="tokens"></span>
 
 ## Tokens
 
-All colors are available via Tailwind CSS classes using tokens:
+All colors are available via Tailwind CSS classNamees using tokens:
 
 ```
 .bg-{token}

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

@@ -1,4 +1,4 @@
-import LayoutHelper, { indents } from '@explorer-1/vue/src/components/LayoutHelper/LayoutHelper.vue'
+import LayoutHelper, { indents } from './../../components/LayoutHelper/LayoutHelper.vue'
 
 // TODO: DOCS: update this to match the full grid/layout documentation
 

package/src/templates/PageNewsDetail/PageNewsDetail.stories.js

@@ -1,6 +1,6 @@
-import { HeroMediaData } from './../../components/HeroMedia/HeroMedia/HeroMedia.stories'
-import { DetailHeadlineData } from './../../components/DetailHeadline/DetailHeadline/DetailHeadline.stories'
-import { BlockStreamfieldData } from './../../components/BlockStreamfield/BlockStreamfield/BlockStreamfield.stories'
+import { HeroMediaData } from './../../components/HeroMedia/HeroMedia.stories'
+import { DetailHeadlineData } from './../../components/DetailHeadline/DetailHeadline.stories'
+import { BlockStreamfieldData } from './../../components/BlockStreamfield/BlockStreamfield.stories'
 import {
   BlockLinkCardCarouselData,
   BlockLinkTileCarouselData

package/src/utils/mixins.ts

@@ -1,14 +1,14 @@
 // import Vue from 'vue'
 // @ts-ignore
 import dayjs from './dayjs'
-import { useHeaderStore } from './../store/header'
+import { useHeaderStore } from '@explorer-1/vue/src/store/header'
 import { useRoute } from 'vue-router'
 import type {
   BreadcrumbPathObject,
   ImageObject,
   ImageSrcObject,
   RelatedLinkObject
-} from '../interfaces'
+} from '@explorer-1/vue/src/interfaces'
 // srcSet data structure
 export interface SrcSetDataValue {
   url: string

package/vite.config.ts

@@ -15,22 +15,6 @@ export default defineConfig({
       dirs: ['./src/components', './src/templates']
     })
   ],
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@import "@explorer-1/common/src/scss/_hover.scss";`
-      }
-    }
-  },
-  // build: {
-  //   rollupOptions: {
-  //     output: {
-  //       assetFileNames: 'assets/[name].[ext]',
-  //       entryFileNames: 'assets/[name].js',
-  //       chunkFileNames: 'assets/[name].js'
-  //     }
-  //   }
-  // }
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points
@@ -40,14 +24,14 @@ export default defineConfig({
       fileName: 'explorer-1-vue'
     },
     rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      external: ['vue', 'swiper', '@fancyapps/ui', 'dayjs', 'click-outside-vue3'],
+      // make sure to externalize deps that shouldn't be bundled into your library
+      external: ['vue', 'lodash'],
       output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
+        // Provide global variables to use in the UMD build for externalized deps
         globals: {
-          vue: 'Vue'
+          vue: 'Vue',
+          lodash: 'lodash',
+          'lodash/throttle': '_throttle'
         }
       }
     }