test canvas format

primer · Jul 12, 2023 · 4a05b37 · 4a05b37
1 parent 08fc670
commit 4a05b37
Show file tree

Hide file tree

Showing 20 changed files with 750 additions and 281 deletions.
diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js
@@ -1,6 +1,19 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+        controls: false,
+        docs: true,
+        viewport: true,
+      },
+    },
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/preset-scss',
+  ],
   framework: '@storybook/react',
   core: {
     builder: 'webpack5',

diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
@@ -10,7 +10,6 @@
   .theme-wrap {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    height: 100vh;
   }
 
   .theme-wrap .story-wrap {

diff --git a/docs/src/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.mdx b/docs/src/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as BoxOverlayStories from './BoxOverlay.stories'
 
@@ -12,4 +12,6 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
 
 See [aria attributes](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)
 
-<Story story={BoxOverlayStories.Default} />
+<Canvas>
+  <Story story={BoxOverlayStories.Default} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/BranchName/BranchName.stories.mdx b/docs/src/stories/deprecated-components/BranchName/BranchName.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as BranchNameStories from './BranchName.stories'
 
@@ -8,4 +8,6 @@ import * as BranchNameStories from './BranchName.stories'
 
 Branch names can be a link, span, and include an octicon before the branch name.
 
-<Story story={BranchNameStories.Default} />
+<Canvas>
+  <Story story={BranchNameStories.Default} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Button/Button.stories.mdx b/docs/src/stories/deprecated-components/Button/Button.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as ButtonStories from './Button.stories'
 
@@ -16,53 +16,69 @@ Note: When using a `<button>` element, **always specify a `type`**.
 
 Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.
 
-<Story story={ButtonStories.Default} />
+<Canvas>
+  <Story story={ButtonStories.Default} />
+</Canvas>
 
 ### Primary
 
 Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
 
-<Story story={ButtonStories.Primary} />
+<Canvas>
+  <Story story={ButtonStories.Primary} />
+</Canvas>
 
 ### Outline
 
 Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
 
-<Story story={ButtonStories.Outline} />
+<Canvas>
+  <Story story={ButtonStories.Outline} />
+</Canvas>
 
 ### Danger
 
 Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
 
-<Story story={ButtonStories.Danger} />
+<Canvas>
+  <Story story={ButtonStories.Danger} />
+</Canvas>
 
 ### Link
 
 Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.
 
 **The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**
 
-<Story story={ButtonStories.Link} />
+<Canvas>
+  <Story story={ButtonStories.Link} />
+</Canvas>
 
 ### Invisible
 
 When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.
 
-<Story story={ButtonStories.Invisible} />
+<Canvas>
+  <Story story={ButtonStories.Invisible} />
+</Canvas>
 
 ## Button states
 
 ### Selected
 
 Adding an `aria-selected="true"` attribute will keep the button in a selected state.
 
-<Story story={ButtonStories.Selected} />
+<Canvas>
+  <Story story={ButtonStories.Selected} />
+</Canvas>
 
 ### Disabled
 
 Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
 
-<Story story={ButtonStories.Disabled} />
+<Canvas>
+  <Story story={ButtonStories.Disabled} />
+</Canvas>
 
 ## Button variations
 
@@ -72,58 +88,78 @@ Next to the default size there is also a `.btn-sm` (small) and `.btn-large` opti
 
 Type scale utilities can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
 
-<Story story={ButtonStories.Sizes} />
+<Canvas>
+  <Story story={ButtonStories.Sizes} />
+</Canvas>
 
 ### Block button
 
 Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
 
-<Story story={ButtonStories.Block} />
+<Canvas>
+  <Story story={ButtonStories.Block} />
+</Canvas>
 
 ### Hidden text button
 
 Use `.hidden-text-expander` to indicate and toggle hidden text.
 
-<Story story={ButtonStories.HiddenText} />
+<Canvas>
+  <Story story={ButtonStories.HiddenText} />
+</Canvas>
 
 You can also make the expander appear inline by adding `.inline`.
 
 ## Button with icons
 
 Icons can be added to any button.
 
-<Story story={ButtonStories.WithIcons} />
+<Canvas>
+  <Story story={ButtonStories.WithIcons} />
+</Canvas>
 
 ### Icon-only button
 
 Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
 
-<Story story={ButtonStories.IconOnly} />
+<Canvas>
+  <Story story={ButtonStories.IconOnly} />
+</Canvas>
 
 ### Close button
 
 When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
 
-<Story story={ButtonStories.CloseButton} />
+<Canvas>
+  <Story story={ButtonStories.CloseButton} />
+</Canvas>
 
 ## Button with counts
 
 You can easily append a count to a **small button**. Add the `.btn-with-count` class to the `.btn-sm` and then add the `.social-count` after the button.
 
 **Be sure to clear the float added by the additional class.**
 
-<Story story={ButtonStories.ButtonWithCounts} />
+<Canvas>
+  <Story story={ButtonStories.ButtonWithCounts} />
+</Canvas>
 
 ## Button groups
 
 Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
 
-<Story story={ButtonStories.ButtonGroup} />
+<Canvas>
+  <Story story={ButtonStories.ButtonGroup} />
+</Canvas>
 
 Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
 
-<Story story={ButtonStories.ButtonGroupSmall} />
+<Canvas>
+  <Story story={ButtonStories.ButtonGroupSmall} />
+</Canvas>
 
 Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
 
-<Story story={ButtonStories.ButtonGroupParent} />
+<Canvas>
+  <Story story={ButtonStories.ButtonGroupParent} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Button/Button.stories.tsx b/docs/src/stories/deprecated-components/Button/Button.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 export default {
   title: 'Deprecated/Button',
+  // docs: {inlineStories: true},
 }
 
 export const Default = () => {

diff --git a/docs/src/stories/deprecated-components/FilterList/FilterList.stories.mdx b/docs/src/stories/deprecated-components/FilterList/FilterList.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as FilterListStories from './FilterList.stories'
 
@@ -8,4 +8,6 @@ import * as FilterListStories from './FilterList.stories'
 
 A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
 
-<Story story={FilterListStories.Default} />
+<Canvas>
+  <Story story={FilterListStories.Default} />
+</Canvas>