docs(button): custom mdx docs page

Create an MDX "Docs" page that works as a replacement for the YML docs
pages, and covers the important Button options from there and the
guidelines.

Adds the tag "is-hidden-story" for excluding Storybook sidebar items.

Author: jawinn

.storybook/main.js

@@ -10,6 +10,7 @@ const componentPkgs = readdirSync(componentsPath, {
 
 module.exports = {
 	stories: [
+		"../components/*/stories/*.mdx",
 		"../components/*/stories/*.stories.js",
 		"./guides/*.mdx",
 		"./foundations/*/*.mdx",

.storybook/manager.js

@@ -50,7 +50,7 @@ addons.setConfig({
 	sidebar: {
 		showRoots: false,
 		filters: {
-			patterns: (item) => !(item.id.includes('forced-colors') || item.tags.includes('foundation')),
+			patterns: (item) => !item.id.includes('forced-colors') && ['foundation','is-hidden-story'].every((tag) => !item.tags.includes(tag)),
 		}
 	},
 });

components/button/stories/button.mdx

@@ -0,0 +1,103 @@
+import { Canvas, Meta, Subtitle } from '@storybook/blocks';
+
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} title="Docs" />
+
+# Button
+
+<Subtitle>Buttons allow users to perform an action or to navigate to another page. They have
+multiple styles for various needs, and are ideal for calling attention to where a user needs to
+do something in order to move forward in a flow.</Subtitle>
+
+## Variants
+
+There are four available variants that are used for different levels of emphasis and different
+types of actions. By default, a button uses the fill style with a solid background. The primary
+and secondary variants also have an outline option.
+
+### Accent
+
+The call to action button communicates strong emphasis and is reserved for encouraging critical
+actions. In general, only use the emphasized option for the most important action on the page.
+
+<Canvas of={ButtonStories.Accent} />
+
+### Primary
+
+The primary button is for medium emphasis. Use it in place of a call to action button when the
+action requires less prominence, or if there are multiple primary actions of the same importance
+in the same view. Both the fill (default) and outline styles are demonstrated below:
+
+<Canvas of={ButtonStories.Primary} />
+
+### Secondary
+
+The secondary button is for low emphasis. It’s paired with other button types to surface less
+prominent actions, and should never be the only button in a group. Both the fill (default) and
+outline styles are demonstrated below:
+
+<Canvas of={ButtonStories.Secondary} />
+
+### Negative
+
+The negative button is for emphasizing actions that can be destructive or have negative
+consequences if taken. Use it sparingly.
+
+<Canvas of={ButtonStories.Negative} />
+
+## Static color
+
+When a button needs to be placed on top of a color background or a visual, use the static color
+option. Static color buttons do not change shades or values depending upon the color theme.
+
+### Static white - primary
+
+<Canvas of={ButtonStories.StaticWhitePrimary} />
+
+### Static white - secondary
+
+<Canvas of={ButtonStories.StaticWhiteSecondary} />
+
+### Static black - primary
+
+<Canvas of={ButtonStories.StaticBlackPrimary} />
+
+### Static black - secondary
+
+<Canvas of={ButtonStories.StaticBlackSecondary} />
+
+## Sizing
+
+Buttons come in four different sizes: small, medium, large, and extra large. The medium size is
+the default and most frequently used option. Use the other sizes sparingly; they should be used
+to create a hierarchy of importance within the page.
+
+<Canvas of={ButtonStories.Sizing} />
+
+## Pending state
+
+The pending button is for indicating that a quick progress action is taking place. In this case, the
+label and optional icon disappear and a progress circle appears. The progress circle always shows an
+indeterminate progress. We recommend the use of the `.is-pending` class on the component’s parent
+container, but there is also an option to use an attribute of `pending` instead. Buttons should have
+the disabled attribute when the pending state is applied.
+
+<Canvas of={ButtonStories.Pending} />
+
+## Disabled state
+
+A button in a disabled state shows that an action exists, but is not available in that circumstance. 
+This state can be used to maintain layout continuity and to communicate that an action may become
+available later.
+
+<Canvas of={ButtonStories.Disabled} />
+
+## Text overflow behavior
+
+When the button text is too long for the horizontal space available, it wraps to form another line. 
+When there is no icon present, the text is aligned center. When there is an icon present, the text is
+aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned
+at the top.
+
+<Canvas of={ButtonStories.WithWrapping} />