chore(tags): migrate tag examples to storybook (#987)

zendeskgarden · Jan 20, 2021 · 864f04e · 864f04e
1 parent e673738
commit 864f04e
Show file tree

Hide file tree

Showing 13 changed files with 406 additions and 333 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -144,7 +144,7 @@ <h1 class="c-main__title">React Components</h1>
               <a class="u-fg-inherit" href="storybook/?path=/story/components-tabs-readme--page">Tabs</a>
             </div>
             <div class="u-mb-sm">
-              <a class="u-fg-inherit" href="tags">Tags</a>
+              <a class="u-fg-inherit" href="storybook/?path=/docs/components-tags-readme--page">Tags</a>
             </div>
             <div class="u-mb-sm">
               <a class="u-fg-inherit" href="theming">Theming</a>

diff --git a/packages/avatars/stories/examples/ChromeUsage.tsx b/packages/avatars/stories/examples/ChromeUsage.tsx
@@ -11,7 +11,11 @@ import { Chrome, Body, Header, HeaderItem, HeaderItemIcon } from '@zendeskgarden
 import { Avatar } from '@zendeskgarden/react-avatars';
 import GridIcon from '@zendeskgarden/svg-icons/src/16/grid-2x2-stroke.svg';
 
-export const ChromeUsage: Story = () => {
+/**
+ * https://github.com/storybookjs/storybook/issues/13362
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const ChromeUsage: Story = ({ foo }) => {
   const CustomHeaderItem = HeaderItem as any;
 
   return (

diff --git a/packages/avatars/stories/examples/MenuUsage.tsx b/packages/avatars/stories/examples/MenuUsage.tsx
@@ -21,7 +21,11 @@ import { Avatar } from '@zendeskgarden/react-avatars';
 import { Button } from '@zendeskgarden/react-buttons';
 import { PALETTE } from '@zendeskgarden/react-theming';
 
-export const MenuUsage: Story = () => {
+/**
+ * https://github.com/storybookjs/storybook/issues/13362
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const MenuUsage: Story = ({ foo }) => {
   const [highlightedItem, setHighlightedItem] = useState<number | null>();
 
   return (

diff --git a/packages/tags/README.md b/packages/tags/README.md
@@ -14,7 +14,7 @@ npm install react react-dom prop-types styled-components @zendeskgarden/react-th
 
 ## Usage
 
-```jsx static
+```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Tag } from '@zendeskgarden/react-tags';
 

diff --git a/packages/tags/examples/advanced.md b/packages/tags/examples/advanced.md
diff --git a/packages/tags/examples/basic.md b/packages/tags/examples/basic.md
diff --git a/packages/tags/package.json b/packages/tags/package.json
@@ -16,7 +16,6 @@
   ],
   "scripts": {
     "build": "../../utils/scripts/build.sh",
-    "build:demo": "../../utils/scripts/build-demo.sh",
     "start": "../../utils/scripts/start.sh"
   },
   "sideEffects": false,

diff --git a/packages/tags/stories/1-Readme.stories.mdx b/packages/tags/stories/1-Readme.stories.mdx
@@ -0,0 +1,6 @@
+import { Meta, Description } from '@storybook/addon-docs/blocks';
+import README from '../README.md';
+
+<Meta title="Components/Tags/README" />
+
+<Description>{README}</Description>