From 6fe49b915e94fa6de5ac1f965efad95580952e2b Mon Sep 17 00:00:00 2001 From: Stephanie Smith Date: Thu, 27 Jun 2024 20:33:07 -0700 Subject: [PATCH] fixing some storybook warnings --- .../BaseImagePlaceholder.stories.js | 6 +- .../ShareButtonsEdu.stories.js | 4 +- .../vue/src/docs/foundation/color.docs.mdx | 104 +++++++++--------- 3 files changed, 56 insertions(+), 58 deletions(-) diff --git a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js index 894c38c4..393e5212 100644 --- a/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js +++ b/packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.stories.js @@ -1,7 +1,5 @@ -import BaseImage from './BaseImage.vue' -import BaseImagePlaceholder, { - aspectRatios -} from './../BaseImagePlaceholder/BaseImagePlaceholder.vue' +import BaseImage from './../BaseImage/BaseImage.vue' +import BaseImagePlaceholder, { aspectRatios } from './BaseImagePlaceholder.vue' export default { title: 'Components/Base/BaseImagePlaceholder', component: BaseImagePlaceholder, diff --git a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js index 50b9237d..22cbffca 100644 --- a/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js +++ b/packages/vue/src/components/ShareButtonsEdu/ShareButtonsEdu.stories.js @@ -5,8 +5,8 @@ export default { component: ShareButtonsEdu } -export const Default = { - name: 'Share Buttons', +export const ShareButtons = { + name: 'Share Buttons EDU', args: { url: 'https://jpl.nasa.gov/edu/news/nasas-ingenuity-mars-helicopter-recharges-its-batteries-in-flight', title: "NASA's Ingenuity Mars Helicopter Recharges Its Batteries in Flight" diff --git a/packages/vue/src/docs/foundation/color.docs.mdx b/packages/vue/src/docs/foundation/color.docs.mdx index 7ca15c11..eb827423 100644 --- a/packages/vue/src/docs/foundation/color.docs.mdx +++ b/packages/vue/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 | -| :---------------------------------------- | :------------- | :--------------- | -|
| JPL Red Light | `jpl-red-light` | -|
| JPL Red | `jpl-red` | -|
| JPL Red Dark | `jpl-red-dark` | -|
| JPL Red Darker | `jpl-red-darker` | -|
| JPL Aqua | `aqua` | -|
| Blue | `blue` | -|
| Dark Blue | `dark-blue` | -|
| Green | `green` | +| Color | Name | Token | +| :-------------------------------------------- | :------------- | :--------------- | +|
| JPL Red Light | `jpl-red-light` | +|
| JPL Red | `jpl-red` | +|
| JPL Red Dark | `jpl-red-dark` | +|
| JPL Red Darker | `jpl-red-darker` | +|
| JPL Aqua | `aqua` | +|
| Blue | `blue` | +|
| Dark Blue | `dark-blue` | +|
| Green | `green` | ### Reserved for Internal Use These colors should not be used on public-facing JPL websites. -| Color | Name | Token | -| :--------------------------------------------- | :------------------ | :-------------------- | -|
| JPL Sky Blue Light | `jpl-sky-blue-light` | -|
| JPL Sky Blue | `jpl-sky-blue` | -|
| JPL Sky Blue Dark | `jpl-sky-blue-dark` | -|
| JPL Sky Blue Darker | `jpl-sky-blue-darker` | +| Color | Name | Token | +| :------------------------------------------------- | :------------------ | :-------------------- | +|
| JPL Sky Blue Light | `jpl-sky-blue-light` | +|
| JPL Sky Blue | `jpl-sky-blue` | +|
| JPL Sky Blue Dark | `jpl-sky-blue-dark` | +|
| 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 | -| :------------------------------------------- | :---------------- | :------------------ | -|
| JPL Purple Light | `jpl-purple-light` | -|
| JPL Purple | `jpl-purple` | -|
| JPL Purple Dark | `jpl-purple-dark` | -|
| JPL Purple Darker | `jpl-purple-darker` | -|
| JPL Teal Light | `jpl-teal-light` | -|
| JPL Teal | `jpl-teal` | -|
| JPL Teal Dark | `jpl-teal-dark` | -|
| JPL Teal Darker | `jpl-teal-darker` | +| Color | Name | Token | +| :----------------------------------------------- | :---------------- | :------------------ | +|
| JPL Purple Light | `jpl-purple-light` | +|
| JPL Purple | `jpl-purple` | +|
| JPL Purple Dark | `jpl-purple-dark` | +|
| JPL Purple Darker | `jpl-purple-darker` | +|
| JPL Teal Light | `jpl-teal-light` | +|
| JPL Teal | `jpl-teal` | +|
| JPL Teal Dark | `jpl-teal-dark` | +|
| JPL Teal Darker | `jpl-teal-darker` | @@ -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 | -| :---------------------------------------- | :------------- | :--------------- | :-------- | -|
| White | `white` | `#FFFFFF` | -|
| Off White | `off-white` | `#FAFAFA` | -|
| Gray Light | `gray-light` | `#F5F5F5` | -|
| Gray Light Mid | `gray-light-mid` | `#D8D8D8` | -|
| Gray Mid | `gray-mid` | `#949494` | -|
| Gray Mid Dark | `gray-mid-dark` | `#6F6F6F` | -|
| Gray Dark | `gray-dark` | `#222222` | -|
| Black | `black` | `#000000` | +| Color | Name | Token | Value | +| :-------------------------------------------- | :------------- | :--------------- | :-------- | +|
| White | `white` | `#FFFFFF` | +|
| Off White | `off-white` | `#FAFAFA` | +|
| Gray Light | `gray-light` | `#F5F5F5` | +|
| Gray Light Mid | `gray-light-mid` | `#D8D8D8` | +|
| Gray Mid | `gray-mid` | `#949494` | +|
| Gray Mid Dark | `gray-mid-dark` | `#6F6F6F` | +|
| Gray Dark | `gray-dark` | `#222222` | +|
| 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: --
+-
.text-gray-dark --
+-
.text-gray-mid-dark --
+-
.text-gray-mid @@ -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 | -| :--------------------------------------------- | :------------------ | :-------------------- | :-------- | -|
| Alert Gold | `alert-gold` | `#FFBA32` | -|
| Alert Gold Light | `alert-gold-light` | `#FFF9EB` | -|
| Disabled Gray | `disabled-gray` | `#D8D8D8` | -|
| Error Red | `error-red` | `#C1152E` | -|
| Error Red Light | `error-red-light` | `#FFE8EB` | -|
| Focus Blue | `focus-blue` | `#1871C9` | -|
| Focus Blue Light | `focus-blue-light` | `#E8F1FA` | -|
| Success Green | `success-green` | `#33A17B` | -|
| Success Green Light | `success-green-light` | `#E1F5EE` | +| Color | Name | Token | Value | +| :------------------------------------------------- | :------------------ | :-------------------- | :-------- | +|
| Alert Gold | `alert-gold` | `#FFBA32` | +|
| Alert Gold Light | `alert-gold-light` | `#FFF9EB` | +|
| Disabled Gray | `disabled-gray` | `#D8D8D8` | +|
| Error Red | `error-red` | `#C1152E` | +|
| Error Red Light | `error-red-light` | `#FFE8EB` | +|
| Focus Blue | `focus-blue` | `#1871C9` | +|
| Focus Blue Light | `focus-blue-light` | `#E8F1FA` | +|
| Success Green | `success-green` | `#33A17B` | +|
| Success Green Light | `success-green-light` | `#E1F5EE` | ## Tokens -All colors are available via Tailwind CSS classes using tokens: +All colors are available via Tailwind CSS classNamees using tokens: ``` .bg-{token}