chore(focusvisible): refactor storybook (#426)

packages/buttongroup/demo/stories/ButtonGroupStory.tsx

@@ -25,12 +25,8 @@ const Component = ({ getGroupProps, getButtonProps, selectedItem, buttons }: ICo
     {Object.keys(buttons).map((key, index) => (
       <button
         key={key}
-        className={classNames({
-          'bg-blue-300': key === selectedItem,
-          border: true,
-          'px-2': true,
-          'py-1': true,
-          'rounded-none': true
+        className={classNames('border', 'px-2', 'py-1', 'rounded-none', {
+          'bg-blue-300': key === selectedItem
         })}
         type="button"
         {...getButtonProps({ item: key, focusRef: buttons[key] })}

packages/focusvisible/README.md

@@ -3,8 +3,9 @@
 [npm version badge]: https://flat.badgen.net/npm/v/@zendeskgarden/container-focusvisible
 [npm version link]: https://www.npmjs.com/package/@zendeskgarden/container-focusvisible
 
-This package includes containers relating to the `:focus-visible`
-polyfill in the [Garden Design System](https://zendeskgarden.github.io/).
+This package includes containers relating to [the `:focus-visible`
+polyfill](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) in
+the [Garden Design System](https://zendeskgarden.github.io/).
 
 ## Installation
 
@@ -14,11 +15,12 @@ npm install @zendeskgarden/container-focusvisible
 
 ## Usage
 
-For live examples check out our [storybook](https://zendeskgarden.github.io/react-containers).
+Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
+examples.
 
 ### useFocusVisible
 
-```jsx static
+```jsx
 import { useRef } from 'react';
 import styled from 'styled-components';
 import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
@@ -55,7 +57,7 @@ const Example = () => {
 
 ### FocusVisibleContainer
 
-```jsx static
+```jsx
 import { FocusVisibleContainer } from '@zendeskgarden/container-focusvisible';
 
 const Example = () => {

packages/focusvisible/demo/#readme.stories.mdx

@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs';
+import README from '../README.md';
+
+<Meta title="Packages/FocusVisible/README" />
+
+<Description>{README}</Description>

packages/focusvisible/demo/focusvisible.stories.mdx

@@ -0,0 +1,29 @@
+import { useRef } from 'react';
+import { Meta, ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+import { FocusVisibleContainer } from '@zendeskgarden/container-focusvisible';
+import { FocusVisibleStory } from './stories/FocusVisibleStory';
+
+<Meta title="Packages/FocusVisible" component={FocusVisibleContainer} />
+
+# API
+
+<ArgsTable />
+
+# Demo
+
+<Canvas>
+  <Story
+    name="FocusVisible"
+    args={{ as: 'hook' }}
+    argTypes={{
+      as: { options: ['container', 'hook'], control: 'radio', table: { category: 'Story' } },
+      className: { control: false },
+      dataAttribute: { control: false }
+    }}
+  >
+    {args => {
+      const scope = useRef();
+      return <FocusVisibleStory {...args} scope={scope} />;
+    }}
+  </Story>
+</Canvas>

packages/focusvisible/demo/stories/FocusVisibleStory.tsx

@@ -0,0 +1,100 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { forwardRef, RefObject } from 'react';
+import { Story } from '@storybook/react';
+import { createGlobalStyle } from 'styled-components';
+import { PALETTE } from '@zendeskgarden/react-theming';
+import {
+  FocusVisibleContainer,
+  IFocusVisibleContainerProps,
+  IUseFocusVisibleProps,
+  useFocusVisible
+} from '@zendeskgarden/container-focusvisible';
+
+const GlobalStyle = createGlobalStyle`
+  :focus {
+    outline: none;
+  }
+
+  .garden-focus-visible,
+  [data-garden-focus-visible='true'] {
+    box-shadow: 0 0 0 2px ${PALETTE.green[400]};
+  }
+
+  blockquote p::before {
+    content: '“';
+  }
+
+  blockquote p::after {
+    content: '”';
+  }
+`;
+
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+const Component = forwardRef<HTMLDivElement, any>((_, ref) => (
+  <>
+    <GlobalStyle />
+    <div ref={ref}>
+      <a href="#test">Anchor</a>
+      <br />
+      <button className="my-5 px-2 py-1" type="button">
+        Button
+      </button>
+      <br />
+      <label>
+        <span>Input</span>
+        <input className="ml-1" />
+      </label>
+      <div className="my-5" tabIndex={0}>
+        Custom [tabindex=&quot;0&quot;]
+      </div>
+      <label>
+        <span className="align-top">Textarea</span>
+        <textarea className="ml-1" />
+      </label>
+      <br />
+      <blockquote className="my-5" contentEditable suppressContentEditableWarning>
+        <p>Content editable block quote</p>
+      </blockquote>
+    </div>
+  </>
+));
+
+Component.displayName = 'Component';
+
+const Container = () => (
+  <FocusVisibleContainer>{({ ref }) => <Component ref={ref} />}</FocusVisibleContainer>
+);
+
+const Hook = ({ scope, ...props }: IUseFocusVisibleProps) => {
+  useFocusVisible({ scope, ...props });
+
+  const ref = scope as RefObject<HTMLDivElement>;
+
+  return <Component {...props} ref={ref} />;
+};
+
+interface IArgs extends IFocusVisibleContainerProps {
+  as: 'hook' | 'container';
+  scope: RefObject<HTMLElement>;
+}
+
+export const FocusVisibleStory: Story<IArgs> = ({ as, ...props }) => {
+  const FocusVisible = () => {
+    switch (as) {
+      case 'container':
+        return <Container />;
+
+      case 'hook':
+      default:
+        return <Hook {...props} />;
+    }
+  };
+
+  return <FocusVisible />;
+};

packages/focusvisible/demo/~patterns/patterns.stories.mdx

@@ -0,0 +1,14 @@
+import { Meta, Canvas, Story } from '@storybook/addon-docs';
+import { SelectionStory } from './stories/SelectionStory';
+
+<Meta title="Packages/FocusVisible/[patterns]" />
+
+# Patterns
+
+## Selection
+
+Demonstrate `useSelection` working along with `useFocusVisible`.
+
+<Canvas>
+  <Story name="Selection">{args => <SelectionStory {...args} />}</Story>
+</Canvas>

packages/focusvisible/demo/~patterns/stories/SelectionStory.tsx

@@ -0,0 +1,48 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import React, { createRef, useRef } from 'react';
+import { Story } from '@storybook/react';
+import classNames from 'classnames';
+import { useFocusVisible } from '@zendeskgarden/container-focusvisible';
+import { useSelection } from '@zendeskgarden/container-selection';
+
+export const SelectionStory: Story = () => {
+  const items = ['Item 1', 'Item 2', 'Item 3'];
+  const scope = useRef(null);
+  const { getContainerProps, getItemProps, selectedItem } = useSelection({
+    defaultSelectedIndex: 0
+  });
+
+  useFocusVisible({ scope });
+
+  return (
+    <ul className="flex" {...getContainerProps()} ref={scope}>
+      {items.map(item => {
+        const focusRef = createRef();
+
+        return (
+          <li
+            key={item}
+            className={classNames(
+              'border-0',
+              'border-blue-600',
+              'border-solid',
+              'mx-3',
+              'px-2',
+              'pt-1',
+              { 'border-b-3': item === selectedItem }
+            )}
+            {...getItemProps({ item, focusRef })}
+          >
+            {item}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};