add focus style testing page

docs/src/stories/components/Marketing/MarketingButton.stories.jsx

@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['ButtonTemplate'],
+  excludeStories: ['MarketingButtonTemplate'],
   argTypes: {
     variant: {
       options: [0, 1, 2, 3], // iterator
@@ -77,7 +77,7 @@ const focusMethod = function getFocus() {
   button.focus()
 }
 
-export const ButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
+export const MarketingButtonTemplate = ({label, variant, disabled, size, animated, focusElement, focusAllElements}) => (
   <>
     <button
       disabled={disabled}
@@ -111,7 +111,7 @@ export const ButtonTemplate = ({label, variant, disabled, size, animated, focusE
   </>
 )
 
-export const Playground = ButtonTemplate.bind({})
+export const Playground = MarketingButtonTemplate.bind({})
 Playground.args = {
   animated: false,
   focusElement: false,

docs/src/stories/components/Marketing/MarketingLink.stories.jsx

@@ -7,7 +7,7 @@ export default {
     layout: 'padded'
   },
 
-  excludeStories: ['LinkTemplate'],
+  excludeStories: ['MarketingLinkTemplate'],
   argTypes: {
     size: {
       options: [0, 1], // iterator
@@ -67,7 +67,7 @@ const focusMethod = function getFocus() {
   link.focus()
 }
 
-export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
+export const MarketingLinkTemplate = ({label, emphasis, href, size, focusElement, focusAllElements}) => (
   <>
     <a
       href={href}
@@ -98,7 +98,7 @@ export const LinkTemplate = ({label, emphasis, href, size, focusElement, focusAl
   </>
 )
 
-export const Playground = LinkTemplate.bind({})
+export const Playground = MarketingLinkTemplate.bind({})
 Playground.args = {
   label: 'Link label',
   href: '/',

docs/src/stories/patterns/FocusStyles.stories.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from '../components/Button/Button.stories.jsx'
+import {CheckboxTemplate} from '../components/Forms/Checkbox.stories.jsx'
+import {InputTemplate} from '../components/Forms/Input.stories.jsx'
+import {SelectTemplate} from '../components/Forms/Select.stories.jsx'
+import {TextareaTemplate} from '../components/Forms/Textarea.stories.jsx'
+import {LinkTemplate} from '../components/Link/Link.stories.jsx'
+import {MarketingButtonTemplate} from '../components/Marketing/MarketingButton.stories.jsx'
+import {MarketingLinkTemplate} from '../components/Marketing/MarketingLink.stories.jsx'
+import {TabNavTemplate} from '../components/Navigation/TabNav.stories.jsx'
+import {TabNavItemTemplate} from '../components/Navigation/TabNavItem.stories.jsx'
+
+export default {
+  title: 'Patterns/FocusStyles',
+  layout: 'padded'
+}
+
+export const FocusStyles = ({}) => (
+  <div style={{display: 'flex', flexDirection: 'column', gap: '2rem'}}>
+    <div style={{display: 'flex', gap: '0.5rem'}}>
+      <ButtonTemplate variant="btn-primary" label="Primary" />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" />
+      <ButtonTemplate variant="btn-outline" label="Outline" />
+      <ButtonTemplate variant="btn-danger" label="Danger" />
+      <ButtonTemplate variant="btn-link" label="Link" />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" />
+      <ButtonTemplate variant="btn-primary" label="Primary" disabled />
+      <ButtonTemplate variant="btn-secondary" label="Secondary" disabled />
+      <ButtonTemplate variant="btn-outline" label="Outline" disabled />
+      <ButtonTemplate variant="btn-danger" label="Danger" disabled />
+      <ButtonTemplate variant="btn-link" label="Link" disabled />
+      <ButtonTemplate variant="btn-invisible" label="Invisible" disabled />
+    </div>
+    <div style={{display: 'flex', flexDirection: 'column', gap: '1rem'}}>
+      <CheckboxTemplate label="checkbox" type="checkbox" />
+      <CheckboxTemplate label="radio" type="radio" />
+      <InputTemplate label="input" type="text" />
+      <SelectTemplate label="select" />
+      <TextareaTemplate label="textarea" />
+      <LinkTemplate label="Link" />
+      <MarketingButtonTemplate label="Marketing Button" />
+      <MarketingLinkTemplate label="Marketing Link" />
+    </div>
+    <div>
+      <TabNavTemplate>
+        <TabNavItemTemplate text="First tab" ariaCurrent="location" href="#url" />
+        <TabNavItemTemplate text="Second tab" />
+      </TabNavTemplate>
+    </div>
+  </div>
+)