Skip to content

Commit

Permalink
fixing some storybook warnings
Browse files Browse the repository at this point in the history
  • Loading branch information
stephiescastle committed Jun 28, 2024
1 parent 6ab46e9 commit 6fe49b9
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 58 deletions.
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
104 changes: 52 additions & 52 deletions packages/vue/src/docs/foundation/color.docs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,67 +15,67 @@ 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>

## Functional Gray Tones

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>
Expand All @@ -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}
Expand Down

0 comments on commit 6fe49b9

Please sign in to comment.