ActionList doc cleanup (#1879)

* refactor naming convention

* upgrade sb

* clarify stories for a11y testing

* fix divider bug

* Stylelint auto-fixes

* make a11y page render (in a less cool way)

* revert bug fix for new pr

* lint

Co-authored-by: Actions Auto Build <actions@github.com>

Author: langermank

docs/package.json

@@ -49,16 +49,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
+    "@storybook/addon-a11y": "6.4.12",
+    "@storybook/addon-actions": "^6.4.12",
+    "@storybook/addon-essentials": "^6.4.12",
+    "@storybook/addon-links": "^6.4.12",
     "@storybook/addon-postcss": "2.0.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.4.9",
+    "@storybook/react": "6.4.12",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-loader": "^8.2.3",
-    "storybook-addon-designs": "6.2.0",
-    "storybook-color-picker": "2.1.5"
+    "storybook-addon-designs": "6.2.1",
+    "storybook-color-picker": "2.3.0"
   }
 }

docs/src/stories/components/ActionList/Accessibility.stories.mdx

@@ -44,12 +44,6 @@ The `menu` role should be reserved for dropdown menu scenarios
 | `li`    | has child link `role="none"`    |
 | `a`     | `role="menuitem"`               |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--menu-with-section-divider" />
-</Canvas>
-
 ### Navigational list of links
 
 [Navigation spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html)
@@ -58,12 +52,6 @@ Wrap `ActionList` in a `nav` element for site or page navigation, like a sidebar
 
 No roles needed
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--nav-with-sub-items" />
-</Canvas>
-
 ### Multi select dropdown menu
 
 [Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
@@ -74,12 +62,6 @@ No roles needed
 | `li`    | `role="menuitemcheckbox"`   |
 | `li`    | `aria-checked="true/false"` |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--menu-multi-select" />
-</Canvas>
-
 ### Single select dropdown menu
 
 [Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
@@ -90,12 +72,6 @@ No roles needed
 | `li`    | `role="menuitemradio"`      |
 | `li`    | `aria-checked="true/false"` |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--menu-single-select" />
-</Canvas>
-
 ### Multi select listbox
 
 [Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
@@ -107,12 +83,6 @@ No roles needed
 | `li`    | `role="option"`               |
 | `li`    | `aria-selected="true/false"`  |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--list-multi-select" />
-</Canvas>
-
 ### Single select listbox
 
 [Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
@@ -125,42 +95,14 @@ Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wa
 | `li`    | `role="option"`              |
 | `li`    | `aria-selected="true/false"` |
 
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--list-single-select" />
-</Canvas>
-
-### List of links
-
-No roles needed
-
-#### Example
-
-<Canvas>
-  <Story id="components-actionlist-patterns--list" />
-</Canvas>
-
 ### Dividers
 
 | Element | Role               |
 | :------ | :----------------- |
 | `li`    | `role="separator"` |
 
-#### Empty example
-
-<Canvas>
-  <Story id="components-actionlist-actionlistitem-features--divider-empty" />
-</Canvas>
-
 | Element | Role                                        |
 | :------ | :------------------------------------------ |
 | `li`    | `role="presentation"`                       |
 | `li`    | id for nested group `id="group-id"`         |
 | `li`    | if it has id for group `aria-hidden="true"` |
-
-#### With title example
-
-<Canvas>
-  <Story id="components-actionlist-actionlistitem-features--divider-text" />
-</Canvas>

docs/src/stories/components/ActionList/ActionList.stories.jsx

@@ -3,7 +3,7 @@ import clsx from 'clsx'
 import {ListItemTemplate} from './ActionListItem.stories'
 
 export default {
-  title: 'Components/ActionList',
+  title: 'Components/ActionList/ActionList',
   excludeStories: ['ListTemplate'],
   parameters: {
     design: {

docs/src/stories/components/ActionList/ActionListDividerFeatures.stories.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ListTemplate} from './ActionList.stories'
+import {ListItemTemplate} from './ActionListItem.stories'
+import {DividerTemplate} from './ActionListDivider.stories'
+
+export default {
+  title: 'Components/ActionList/ActionListDivider/Features',
+  decorators: [
+    Story => (
+      <ul className="ActionList" role="menu">
+        <Story />
+      </ul>
+    )
+  ]
+}
+
+export const WithTitle = DividerTemplate.bind({})
+WithTitle.args = {
+  title: 'List group title'
+}
+
+export const Subtle = DividerTemplate.bind({})
+Subtle.args = {
+  variant: 'subtle',
+  title: 'List group title'
+}
+
+export const Filled = DividerTemplate.bind({})
+Filled.args = {
+  variant: 'ActionList-sectionDivider--filled',
+  title: 'List group title'
+}
+
+export const WithDescription = DividerTemplate.bind({})
+WithDescription.args = {
+  title: 'List group title',
+  description: 'Group description'
+}
+
+export const RolePresentation = DividerTemplate.bind({})
+RolePresentation.storyName = '[role="presentation"]'
+RolePresentation.args = {
+  title: 'List group title'
+}
+
+export const RoleSeparator = DividerTemplate.bind({})
+RoleSeparator.storyName = '[role="separator"]'
+RoleSeparator.args = {}
+
+export const Empty = DividerTemplate.bind({})