Add storybook embeds to React component pages (#400)

* Source primer react data * Automatically create react component pages * Polish * Polish react layout * Create component page layout * Use component page layout on all component pages * Use component page layout on all component pages * Fix build error * Fix toc position * Generate pages based on reactId * Add warning banner * Create figma pages * Add reactId to some pages * Update figma banner * Generate rails pages * Add reactId to pages * Remove trailing slash * Update current logic in ComponentPageNav * Update external links * Add work in progress title to banner * Add storybook embed to react docs page * Verify story ids * Update storybookembed component * Update src/components/storybook-embed.tsx * Prevent iframe from affecting browser history
primer · Feb 23, 2023 · a56d97c · a56d97c
1 parent e50ff78
commit a56d97c
Show file tree

Hide file tree

Showing 16 changed files with 603 additions and 1,123 deletions.
diff --git a/content/foundations/css-utilities/animations.mdx b/content/foundations/css-utilities/animations.mdx
@@ -5,46 +5,27 @@ description: Animations are reusable animation classes that you can use to empha
 
 <StorybookEmbed
   framework="css"
-  componentId="utilities-animation"
-  stories={{
-    'fade-in': {
-      name: 'Fade in'
-    },
-    'fade-out': {
-      name: 'Fade out'
-    },
-    'fade-up': {
-      name: 'Fade up'
-    },
-    'fade-down': {
-      name: 'Fade down'
-    },
-    'scale-in': {
-      name: 'Scale in'
-    },
-    'grow-x': {
-      name: 'Grow x'
-    },
-    pulse: {
-      name: 'Pulse'
-    },
-    hover: {
-      name: 'Hover animation'
-    },
-    rotate: {
-      name: 'Rotation'
-    }
-  }}
+  stories={[
+    {id: 'utilities-animation--fade-in'},
+    {id: 'utilities-animation--fade-out'},
+    {id: 'utilities-animation--fade-up'},
+    {id: 'utilities-animation--fade-down'},
+    {id: 'utilities-animation--scale-in'},
+    {id: 'utilities-animation--grow-x'},
+    {id: 'utilities-animation--pulse'},
+    {id: 'utilities-animation--hover'},
+    {id: 'utilities-animation--rotate'},
+  ]}
 />
 
-Animation | Description
---- | ---
-Fade in | The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.
-Fade out | The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.
-Fade up | The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
-Fade down | The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.
-Scale in | The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.
-Grow x | The `.anim-grow-x` class will grow an element width from 0-:100: real quick.
-Pulse | The `.anim-pulse` class will pulse an element infinitely.
-Hover animation | The `.anim-hover-grow` class will increase the scale of the element upon hover.
-Rotation | The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center.
+| Animation | Description                                                                                                                                                                                                         |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Fade in   | The `.anim-fade-in` class is used to fade in an element on the page. This will run once when the element is revealed.                                                                                               |
+| Fade out  | The `.anim-fade-out` class is used to fade out an element on the page. This will run once when the element is revealed.                                                                                             |
+| Fade up   | The `.anim-fade-up` class is used to reveal an element on the page by sliding it up from below the fold. You should use this in a container with `overflow: hidden;` or on the bottom of the page.                  |
+| Fade down | The `.anim-fade-down` class is used to slide an element down hiding it. You should use this in a container with `overflow: hidden;` or on the bottom of the page.                                                   |
+| Scale in  | The `.anim-scale-in` class will scale the element in. This is useful on menus when you want them to appear more friendly.                                                                                           |
+| Grow x    | The `.anim-grow-x` class will grow an element width from 0-:100: real quick.                                                                                                                                        |
+| Pulse     | The `.anim-pulse` class will pulse an element infinitely.                                                                                                                                                           |
+| Hover     | The `.anim-hover-grow` class will increase the scale of the element upon hover.                                                                                                                                     |
+| Rotate    | The `.anim-rotate` class will rotate the element indefinitely around the coordinate specified by `transform-origin`. Most elements have a default of `transform-origin: 50% 50%` and will rotate around the center. |
diff --git a/content/foundations/css-utilities/borders.mdx b/content/foundations/css-utilities/borders.mdx
@@ -7,26 +7,21 @@ description: Utilities for borders, and border radius.
 
 The default border utility applies a solid, 1px border, with a default gray color.
 
-<StorybookEmbed framework="css" componentId="utilities-border" stories={{default: {name: 'Default'}}} height="80" />
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--default'}]} height="80" />
 
 Borders can be applied to a specific edge or to the X and Y axes individually:
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-border"
-  stories={{direction: {name: 'Direction'}}}
-  height="340"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--direction'}]} height="340" />
 
 Remove borders from all sides or a single side with `.border-0`, `.border-top-0`, `.border-right-0`, `.border-bottom-0`, `.border-left-0`.
 
-<StorybookEmbed framework="css" componentId="utilities-border" stories={{hide: {name: 'Hide'}}} height="80" />
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--hide'}]} height="80" />
 
 ## Border style
 
 Use `border-dashed` to give an element a dashed border.
 
-<StorybookEmbed framework="css" componentId="utilities-border" stories={{style: {name: 'Style'}}} height="80" />
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--style'}]} height="80" />
 
 ## Responsive borders
 
@@ -37,12 +32,7 @@ You can adjust border widths on all sides or each side individually with respons
 - `border-(sm|md|lg|xl)-(top|right|bottom|left)` adds a border on the given side at and above the breakpoint.
 - `border-(sm|md|lg|xl)-(top|right|bottom|left)-0` the border from the given side at and above the breakpoint.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-border"
-  stories={{responsive: {name: 'Responsive'}}}
-  height="150"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--responsive'}]} height="150" />
 
 ## Border colors
 
@@ -52,16 +42,11 @@ Border colors are documented on the [colors utilities page](/foundations/css-uti
 
 Use the following utilities to add or remove rounded corners: `rounded-0` removes rounded corners, `rounded-1` applies a border radius of 4px, `rounded-2` applies a border radius of 6px, and `rounded-3` applies a border radius of 8px. `.circle` applies a border radius of 50%, which turns square elements into perfect circles.
 
-<StorybookEmbed framework="css" componentId="utilities-border" stories={{rounded: {name: 'Rounded'}}} height="360" />
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--rounded'}]} height="360" />
 
 You can also add rounded corners to each edge (top, right, bottom, left) with the following utilities:
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-border"
-  stories={{'rounded-direction': {name: 'Rounded Direction'}}}
-  height="240"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--rounded-direction'}]} height="240" />
 
 ## Responsive rounded corners
 
@@ -71,9 +56,4 @@ You can adjust border radius on all sides or each side individually with respons
 - `rounded-(sm|md|lg|xl)-(0|1|2|3|4)` adds a rounded corner on all sides at and above the breakpoint.
 - `rounded-(sm|md|lg|xl)-(top|right|bottom|left)-(0|1|2|3|4)` adds a rounded corner on the given side at and above the breakpoint.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-border"
-  stories={{'rounded-responsive': {name: 'Rounded Responsive'}}}
-  height="200"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-border--rounded-responsive'}]} height="200" />
diff --git a/content/foundations/css-utilities/box-shadow.mdx b/content/foundations/css-utilities/box-shadow.mdx
@@ -7,82 +7,42 @@ description: Box shadows are used to make content appear elevated. They are typi
 
 Small shadows are mainly used on things that need to appear slightly elevated, like pricing cards or UI elements containing important information.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'small': {name: 'small'}}}
-  height="75"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--small'}]} height="75" />
 
 These types of shadows are typically applied to elements with borders, such as the [Box component](/components/box).
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'small-example': {name: 'small-example'}}}
-  height="300"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--small-example'}]} height="300" />
 
 ## Medium
 
 Medium box shadows are more diffused and slightly larger than small box shadows.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'medium': {name: 'medium'}}}
-  height="75"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--medium'}]} height="75" />
 
 Medium box shadows are typically used on editorialized content that needs to appear elevated. Most of the time, the elements using this level of shadow will be clickable.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'medium-example': {name: 'medium-example'}}}
-  height="220"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--medium-example'}]} height="220" />
 
 ## Large
 
 Large box shadows are very diffused and used sparingly in the product UI.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'large': {name: 'large'}}}
-  height="75"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--large'}]} height="75" />
 
 These shadows are used for marketing content, UI screenshots, and content that appears on top of other page elements.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'large-example': {name: 'large-example'}}}
-  height="375"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--large-example'}]} height="375" />
 
 ## Extra large
 
 Extra large box shadows are even more diffused.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'extra-large': {name: 'extra-large'}}}
-  height="75"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--extra-large'}]} height="75" />
 
 These shadows are used for marketing content and content that appears on top of other page elements.
 
 ## Remove a box shadow
 
 Additionally there is a `box-shadow-none` class that removes `box-shadow`:
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-shadow"
-  stories={{'none': {name: 'none'}}}
-  height="75"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-shadow--none'}]} height="75" />
diff --git a/content/foundations/css-utilities/colors.mdx b/content/foundations/css-utilities/colors.mdx
@@ -4,7 +4,8 @@ description: Use color utilities to apply color to the background of elements, t
 ---
 
 <Note>
-  Please note Primer CSS v18 has changed the naming of these color classes. Check the <a href="/css/support/v18-migration">migration guide</a> to make sure your app is up to date.
+  Please note Primer CSS v18 has changed the naming of these color classes. Check the{' '}
+  <a href="/css/support/v18-migration">migration guide</a> to make sure your app is up to date.
 </Note>
 
 These utilities should only be used where color is not provided by a component. To learn more about how to apply color, read the [color documentation](/foundations/color).
@@ -13,40 +14,20 @@ These utilities should only be used where color is not provided by a component.
 
 Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](/guides/accessibility).
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-color"
-  stories={{'text': {name: 'text'}}}
-  height="410"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-color--text'}]} height="410" />
 
 You can set the color inheritance on an element by using the `color-fg-inherit` class.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-color"
-  stories={{'text-inherit': {name: 'text-inherit'}}}
-  height="60"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-color--text-inherit'}]} height="60" />
 
 ## Background
 
 Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](/guides/accessibility).
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-color"
-  stories={{'background': {name: 'background'}}}
-  height="1250"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-color--background'}]} height="1250" />
 
 ## Border
 
 Override default border colors with the following utilities.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-color"
-  stories={{'border': {name: 'border'}}}
-  height="1170"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-color--border'}]} height="1170" />
diff --git a/content/foundations/css-utilities/details.mdx b/content/foundations/css-utilities/details.mdx
@@ -7,34 +7,19 @@ description: Details classes are created to enhance the native behaviors of deta
 
 Use `.details-overlay` to expand the click area of `<summary>` to cover the full screen, so user can click anywhere on a page to close `<details>`.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-details"
-  stories={{'overlay': {name: 'overlay'}}}
-  height="130"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-details--overlay'}]} height="130" />
 
 ## Darkened fullscreen click area
 
 Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-details"
-  stories={{'overlay-dark': {name: 'overlay-dark'}}}
-  height="130"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-details--overlay-dark'}]} height="130" />
 
 ## Custom caret
 
 Use `.details-reset` to remove the default caret (that little triangle on the left). You then can add the `.dropdown-caret` on the right of the text.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-details"
-  stories={{'caret': {name: 'caret'}}}
-  height="130"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-details--caret'}]} height="130" />
 
 ## Using button styles with the details summary element
 
@@ -45,9 +30,4 @@ selected/active styles when the parent
 [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
 element is open.
 
-<StorybookEmbed
-  framework="css"
-  componentId="utilities-details"
-  stories={{'summary': {name: 'summary'}}}
-  height="170"
-/>
+<StorybookEmbed framework="css" stories={[{id: 'utilities-details--summary'}]} height="170" />