ni · msmithNI · Jul 27, 2023 · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023
@@ -23,21 +23,3 @@ export const template = html<CoolNewButton>`
 
 ## Setting ARIA attributes
 When setting [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) on nimble components, avoid using id-based attributes, such as `aria-labelledby`. The id-based attributes may not behave as expected when used with Shadow DOM components, such as `nimble`.
-
-# Component-specific accessiblity notes
-
-## Buttons
-`nimble-button`, `nimble-anchor-button`, `nimble-menu-button`, `nimble-toggle-button`
-
-When using the Nimble buttons with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally to ensure the button is adequately accessible with a screen reader.
-
-## nimble-banner
-When using `nimble-banner`, the title content should always be provided for accessibility. To hide the title visually, `titleHidden` can be set to `true`.
-
-## nimble-dialog
-When using `nimble-dialog`, the title content should always be provided for accessibility. To hide the title visually, `headerHidden` can be set to `true`.
-
-## Icons
-When using an icon standalone, the `title` attribute should usually be set, to provide accessible text (which will also show as a tooltip).
-
-When using an icon as the content of a Nimble button, place the icon in the `start` slot, and follow the button guidance above.
@@ -0,0 +1,26 @@
+import {
+    Controls,
+    DocsStory,
+    Meta,
+    Stories,
+    Title,
+    Description
+} from '@storybook/blocks';
+import * as anchorButtonStories from './anchor-button.stories';
+
+<Meta of={anchorButtonStories} />
+
+<Title of={anchorButtonStories} />
+<Description of={anchorButtonStories} />
+
+<DocsStory of={anchorButtonStories.outlineAnchorButton} />
+<Controls of={anchorButtonStories.outlineAnchorButton} />
+<Stories of={anchorButtonStories} />
+
+# Usage Docs
+
+## Accessibility
+
+When using the button with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button
+even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally
+to ensure the button is adequately accessible with a screen reader.
@@ -32,7 +32,6 @@ interface AnchorButtonArgs {
 
 const metadata: Meta<AnchorButtonArgs> = {
     title: 'Components/Anchor Button',
-    tags: ['autodocs'],
     parameters: {
         docs: {
             description: {

@@ -1,5 +1,5 @@
 import {
-    Canvas,
+    DocsStory,
     Meta,
     Controls,
     Stories,
@@ -13,7 +13,7 @@ import * as buttonStories from './button.stories';
 <Title of={buttonStories} />
 <Description of={buttonStories} />
 
-<Canvas of={buttonStories.outlineButton} />
+<DocsStory of={buttonStories.outlineButton} />
 <Controls of={buttonStories.outlineButton} />
 <Stories of={buttonStories} />
 
@@ -35,3 +35,7 @@ import * as buttonStories from './button.stories';
 
     Please work with your designer and ensure you have a 4.5:1
     contrast ratio text to background.
+
+    When using the button with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button
+    even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally
+    to ensure the button is adequately accessible with a screen reader.
@@ -0,0 +1,24 @@
+import {
+    Meta,
+    Controls,
+    DocsStory,
+    Title,
+    Description
+} from '@storybook/blocks';
+import * as iconsStories from './icons.stories';
+
+<Meta of={iconsStories} />
+
+<Title of={iconsStories} />
+<Description of={iconsStories} />
+
+<DocsStory of={iconsStories.icons} />
+<Controls of={iconsStories.icons} />
+
+# Usage Docs
+
+<br />
+
+## Accessibility
+
+When using an icon standalone, the `title` attribute should usually be set, to provide accessible text (which will also show as a tooltip).
@@ -20,8 +20,7 @@ interface IconArgs {
 }
 
 const metadata: Meta<IconArgs> = {
-    title: 'Components/Icons',
-    tags: ['autodocs']
+    title: 'Components/Icons'
 };
 
 export default metadata;

@@ -0,0 +1,25 @@
+import {
+    Controls,
+    DocsStory,
+    Meta,
+    Stories,
+    Title,
+    Description
+} from '@storybook/blocks';
+import * as menuButtonStories from './menu-button.stories';
+
+<Meta of={menuButtonStories} />
+<Title of={menuButtonStories} />
+<Description of={menuButtonStories} />
+
+<DocsStory of={menuButtonStories.outlineButton} />
+<Controls of={menuButtonStories.outlineButton} />
+<Stories of={menuButtonStories} />
+
+# Usage Docs
+
+## Accessibility
+
+When using the button with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button
+even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally
+to ensure the button is adequately accessible with a screen reader.
@@ -33,7 +33,6 @@ This icon will be hidden when \`contentHidden\` is set to \`true\`
 
 const metadata: Meta<MenuButtonArgs> = {
     title: 'Components/Menu Button',
-    tags: ['autodocs'],
     decorators: [withActions],
     parameters: {
         docs: {

@@ -2,7 +2,7 @@ export const appearanceDescription = `This attribute affects the appearance of t
 
 <details>
     <summary>Appearance Usage</summary>
-    There is a hierarchy to which button appearance should be used.
+    <p>There is a hierarchy to which button appearance should be used.</p>
     <ul>
         <li>For appearance \`ghost\`:
             <br/>This is the default and standard option for buttons. They create an open / airy feel, and fit comfortably in tight spaces.
@@ -27,7 +27,7 @@ export const appearanceVariantDescription = `This attribute has no effect on but
 
 <details>
     <summary>Primary Button Usage</summary>
-    Make a button primary to distinguish it visibly for one of the following reasons:
+    <p>Make a button primary to distinguish it visibly for one of the following reasons:</p>
     <ul>
         <li>to indicate the action that allows the user to accomplish their most common or important goal</li>
         <li>to indicate the action that allows the user to complete their task</li>
@@ -41,7 +41,7 @@ export const iconDescription = `When including an icon, set \`slot="start"\` on
 
 <details>
     <summary>Icon Usage</summary>
-    Icons should be consistent and only used when necessary.
+    <p>Icons should be consistent and only used when necessary.</p>
     <ul>
         <li>Icon and text buttons: 
             <br/>Use a label plus icon to help reinforce a button's functionality, and increase the visual impact of the action.  

@@ -1,5 +1,5 @@
 import {
-    Canvas,
+    DocsStory,
     Meta,
     Controls,
     Stories,
@@ -13,7 +13,7 @@ import * as spinnerStories from './spinner.stories';
 <Title of={spinnerStories} />
 <Description of={spinnerStories} />
 
-<Canvas of={spinnerStories.spinner} />
+<DocsStory of={spinnerStories.spinner} />
 <Controls of={spinnerStories.spinner} />
 
 # Usage Docs

@@ -0,0 +1,25 @@
+import {
+    Controls,
+    DocsStory,
+    Meta,
+    Stories,
+    Title,
+    Description
+} from '@storybook/blocks';
+import * as toggleButtonStories from './toggle-button.stories';
+
+<Meta of={toggleButtonStories} />
+<Title of={toggleButtonStories} />
+<Description of={toggleButtonStories} />
+
+<DocsStory of={toggleButtonStories.outlineButton} />
+<Controls of={toggleButtonStories.outlineButton} />
+<Stories of={toggleButtonStories} />
+
+# Usage Docs
+
+## Accessibility
+
+When using the button with only an icon, `contentHidden` should be set to `true` and text content should be provided within the button
+even though it will not be visible on the screen. The button will use the text content to configure the appropriate ARIA attributes internally
+to ensure the button is adequately accessible with a screen reader.
@@ -30,7 +30,6 @@ screen reader would say something like "Mute toggle button pressed".`;
 
 const metadata: Meta<ToggleButtonArgs> = {
     title: 'Components/Toggle Button',
-    tags: ['autodocs'],
     decorators: [withActions],
     parameters: {
         docs: {