Add JSX docs view to all components

.storybook/config.js

@@ -2,7 +2,9 @@ import { configure, addDecorator, setAddon } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import HelixUI from 'helix-ui';
 import 'helix-ui/dist/css/helix-ui.min.css';
+import { jsxDecorator } from 'storybook-addon-jsx';
 
+addDecorator(jsxDecorator);
 addDecorator(withKnobs);
 
 // Requires require.context from Webpack

.storybook/manager.js

@@ -4,6 +4,7 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-options/register';
+import 'storybook-addon-jsx/register';
 
 addons.setConfig({
     theme: helixTheme,

README.md

@@ -10,8 +10,6 @@
   A React wrapper of the [Helix UI Webcomponents Library](https://github.com/HelixDesignSystem/helix-ui/)
 
   🚀 Alpha release is [here](https://helix-react.netlify.app)! Check out how to get started below! 🌻
-
-
 </div>
 
 <hr />
@@ -25,7 +23,6 @@
   - [Helix UI Webcomponent Snippet From Documentation](#helix-ui-webcomponent-snippet-from-documentation)
   - [Our Implementation](#our-implementation)
 - [Guiding Principles](#guiding-principles)
-- [Storybook](#-storybook)
 - [Issues](#issues)
   - [🐛 Bugs](#-bugs)
   - [💡 Feature Requests](#-feature-requests)
@@ -110,6 +107,7 @@ Follow the [Getting Started with HelixUI](https://helixdesignsystem.github.io/he
   </footer>
 </Modal>
 ```
+[See Helix-React Storybook docs for more examples](https://helix-react.netlify.app/)
 
 ## Guiding Principles
 
@@ -118,27 +116,6 @@ Each wrapper corresponds with a component listed on the [Helix UI documentation]
 
 ![helix-ui-documentation](https://user-images.githubusercontent.com/22566333/82083617-07f70700-96b8-11ea-9581-da1796737e52.png)
 
-## 📚 Storybook
-[Storybook](https://storybook.js.org/) is an open source tool for developing UI components
-in isolation for React, Vue, and Angular.
-You can use this as a playground for all our components.
-
-1. Install Dependencies
-
-```bash
-yarn install
-```
-
-2. Run Storybook
-
-```bash
-npm start
-```
-The script should automatically open Storybook in your browser, but you can always navigate to `http://localhost:6006/?path=/story`
-
-3. Play Around
-<img width="639" alt="Screen Shot 2020-05-15 at 2 32 35 PM" src="https://user-images.githubusercontent.com/22566333/82084224-f5c99880-96b8-11ea-92e2-403b3f4378db.png">
-
 ## Issues
 
 _Looking to contribute? Look for the [Good First Issue][good-first-issue]

package.json

@@ -58,13 +58,14 @@
     "husky": "^4.2.5",
     "microbundle": "^0.12.3",
     "prettier": "^2.0.4",
+    "prop-types": "^15.7.2",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "prop-types": "^15.7.2"
+    "storybook-addon-jsx": "^7.3.4"
   },
   "dependencies": {
-    "use-onclickoutside": "^0.3",
-    "classnames": "^2.x"
+    "classnames": "^2.x",
+    "use-onclickoutside": "^0.3"
   },
   "peerDependencies": {
     "helix-ui": "^0.24.0",

src/Alert/stories.js

@@ -1,8 +1,13 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import Alert from './index';
 import { action } from '@storybook/addon-actions';
+import { callback } from '../storyUtils';
+
+addParameters({
+  jsx: { skip: 0 },
+});
 
 const TYPES = {
   info: 'info',
@@ -24,8 +29,8 @@ storiesOf('Alert', module).add('All Knobs', () => {
       {...(status && { status })}
       {...(persist && { persist })}
       {...(type && { type })}
-      onDismiss={action('onDismiss')}
-      onSubmit={action('onSubmit')}
+      onDismiss={callback(action('onDismiss'))}
+      onSubmit={callback(action('onSubmit'))}
     >
       {content}
     </Alert>

src/Breadcrumb/stories.js

@@ -1,7 +1,11 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
 import Breadcrumb from './index';
 
+addParameters({
+  jsx: { skip: 0 },
+});
+
 storiesOf('Breadcrumb', module)
   .add('Multiple Breadcrumbs', () => {
     return (

src/Button/stories.js

@@ -2,9 +2,13 @@ import Button from './';
 import { Icons } from '../Icon';
 import React from 'react';
 import centered from '@storybook/addon-centered/react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 
+addParameters({
+  jsx: { skip: 2 },
+});
+
 const SIZES = {
   small: 'Small',
   '': 'Medium',

src/Checkbox/stories.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { boolean, text } from '@storybook/addon-knobs/react';
-import { storiesOf } from '@storybook/react';
-
+import { addParameters, storiesOf } from '@storybook/react';
 import Checkbox from './index';
+import { callback } from '../storyUtils';
 
+addParameters({
+  jsx: { skip: 0 },
+});
 storiesOf('Checkbox', module).add('All Knobs', () => {
   let label = text('label', 'check me out');
   let checked = boolean('checked', false);
@@ -19,7 +22,7 @@ storiesOf('Checkbox', module).add('All Knobs', () => {
       {...(indeterminate && { indeterminate })}
       {...(required && { required })}
       {...(label && { label })}
-      onChange={action('onChange')}
+      onChange={callback(action('onChange'))}
     />
   );
 });

src/ChoiceTile/stories.js

@@ -2,10 +2,13 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { optionsKnob as options } from '@storybook/addon-knobs';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
-import { storiesOf } from '@storybook/react';
-
+import { addParameters, storiesOf } from '@storybook/react';
 import ChoiceTile from './index';
-import { getShortText } from '../storyUtils';
+import { callback, getShortText } from '../storyUtils';
+
+addParameters({
+  jsx: { skip: 1 },
+});
 
 const SIZES = {
   small: 'small',
@@ -45,7 +48,7 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         {...(size && { size })}
         icon={icon}
         name="choiceTileDemo"
-        onChange={action('onChange')}
+        onChange={callback(action('onChange'))}
         style={{ width: 200, float: 'left' }}
         title={title || defaultTitle}
       >

src/Drawer/stories.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
-import { storiesOf } from '@storybook/react';
-
+import { addParameters, storiesOf } from '@storybook/react';
 import Drawer from './index';
 import Button from '../Button';
 import Div from '../Div';
-import { getLongText } from '../storyUtils';
+import { callback, getLongText } from '../storyUtils';
+
+addParameters({
+  jsx: { skip: 0 },
+});
 
 const SIZES = {
   small: 'small',
@@ -34,8 +37,8 @@ storiesOf('Drawer', module).add('All Knobs', () => {
     <Drawer
       {...(open && { open })}
       {...(size && { size })}
-      onOpen={action('onOpen')}
-      onClose={action('onClose')}
+      onOpen={callback(action('onOpen'))}
+      onClose={callback(action('onClose'))}
       id="drawer-id"
     >
       {<header>{header || defaultHeader}</header>}

src/Icon/stories.js

@@ -2,7 +2,11 @@ import React from 'react';
 import Icon, { Icons } from './';
 import centered from '@storybook/addon-centered/react';
 import { select } from '@storybook/addon-knobs/react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
+
+addParameters({
+  jsx: { skip: 2 },
+});
 
 storiesOf('Icon', module)
   .addDecorator(centered)

src/Modal/stories.js

@@ -1,11 +1,15 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import Modal from './index';
 import Div from '../Div';
 import Button from '../Button';
-import { getLongText } from '../storyUtils';
+import { callback, getLongText } from '../storyUtils';
+
+addParameters({
+  jsx: { skip: 0 },
+});
 
 const SIZES = {
   small: 'small',
@@ -23,20 +27,18 @@ storiesOf('Modal', module).add('All Knobs', () => {
   const smallText =
     'This is the body of a demo modal. Interaction with content behind this modal cannot take place until this modal is closed.\n';
   const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
-  const defaultFooter = (
-    <>
-      <Button variant="primary">Confirm</Button>
-      <Button variant="tertiary">Cancel</Button>
-    </>
-  );
+  const defaultFooter = [
+    <Button variant="primary">Confirm</Button>,
+    <Button variant="tertiary">Cancel</Button>,
+  ];
 
   return (
     <Modal
       {...(open && { open })}
       {...(size && { size })}
       open={open}
-      onOpen={action('onOpen')}
-      onClose={action('onClose')}
+      onOpen={callback(action('onOpen'))}
+      onClose={callback(action('onClose'))}
     >
       {header && (
         <header>

src/Pill/stories.js

@@ -1,16 +1,21 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { boolean, text, select } from '@storybook/addon-knobs/react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
 import Pill from './index';
 import Status from './Status';
+import { callback } from '../storyUtils';
+
+addParameters({
+  jsx: { skip: 0 },
+});
 
 storiesOf('Pill', module)
   .add('All Knobs', () => {
     let persist = boolean('persist', false);
     let pillText = text('pill text', 'status: unicorns!');
     return (
-      <Pill onDismiss={action('onDismiss')} {...(persist && { persist })}>
+      <Pill onDismiss={callback(action('onDismiss'))} {...(persist && { persist })}>
         {pillText}
       </Pill>
     );
@@ -20,7 +25,7 @@ storiesOf('Pill', module)
     let pillText = text('pill text', 'default');
     let variant = select('variant', ['default', 'grey', 'purple', 'subdued']);
     return (
-      <Status variant={variant} {...(filled && { filled })}>
+      <Status variant={variant || ''} {...(filled && { filled })}>
         {pillText}
       </Status>
     );

src/Popover/stories.js

@@ -1,15 +1,19 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { addParameters, storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import centered from '@storybook/addon-centered/react';
 import { boolean, select, text } from '@storybook/addon-knobs/react';
 import Popover from '.';
 import Div from '../Div';
 import Button from '../Button';
-import { getLongText } from '../storyUtils';
+import { callback, getLongText } from '../storyUtils';
 import { POSITIONS } from '../constants';
 import Disclosure from '../Disclosure';
 
+addParameters({
+  jsx: { skip: 3 },
+});
+
 storiesOf('Popover', module)
   .addDecorator(centered)
   .add('All Knobs', () => {
@@ -20,13 +24,10 @@ storiesOf('Popover', module)
 
     const smallText = 'This is the body of a demo popover\n';
     const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
-    const defaultFooter = (
-      <>
-        <Button variant="primary">Ok</Button>
-        <Button variant="tertiary">Cancel</Button>
-      </>
-    );
-
+    const defaultFooter = [
+      <Button variant="primary">Ok</Button>,
+      <Button variant="tertiary">Cancel</Button>,
+    ];
     return (
       <>
         <Disclosure ariaControls="demoPopover">
@@ -35,14 +36,14 @@ storiesOf('Popover', module)
         <Popover
           id="demoPopover"
           {...(position && { position })}
-          onOpen={action('onOpen')}
-          onClose={action('onClose')}
-          onPosition={action('onReposition')}
+          onOpen={callback(action('onOpen'))}
+          onClose={callback(action('onClose'))}
+          onPosition={callback(action('onReposition'))}
         >
           {header && <header>{header}</header>}
-          <Div scroll={scroll && 'vertical'}>
-            {smallText}
-            {scroll ? longText : null}
+          <Div {...(scroll && { scroll: 'vertical' })}>
+            {!scroll && smallText}
+            {scroll && longText}
           </Div>
           {<footer>{footer || defaultFooter}</footer>}
         </Popover>