[WNMGS-437] Move doc files to @cmsgov/design-system-docs

guides/WRITING-DOCUMENTATION.md

@@ -56,16 +56,16 @@ To extend the default functionality of KSS, we've implemented support for custom
 
 Supported flags:
 
-- **`@hide-example`** Hides the example and code snippet. Useful for rendering just the prop docs for React components.
 - **`@hide-markup`** Hides the code snippet.
-- **`@react-component [NAME]`** Displays the React `.jsx` component example, documentation and `Props`.
+- **`@react-props [NAME]`** Displays the React prop documentation for a component.
 
-  - **Example**: `@react-component Button` or `@react-component core/src/Components/Button/Button`.
-  - `[NAME]` is a component's name relative to the source documentation file, or a path (without a file extension) relative to `packages`. See [File naming](#file-naming) for more info.
+  - **Example**: `@react-props Button.jsx`
+  - `[NAME]` is the filename of the react component where the `Proptypes` are defined.
 
-- **`@react-example [NAME]`** Displays example.jsx file using this React component.
+- **`@react-example [NAME]`** Displays the example file using this React component.
 
-  - **Example**: `@react-component Mask` displays `Mask.example.jsx`
+  - **Example**: `@react-props Mask` displays `Mask.example.jsx`
+  - `[NAME]` is the filename of the react example to be displayed
 
 - **`@responsive`** Renders breakpoint toggles for the markup example.
 - **`@status [NAME]`** Displays a status badge. Supported values: `Draft`, `Work in progress`, `Ready`, `Deprecated`.
@@ -154,7 +154,9 @@ Buttons
 
 Use buttons to signal actions.
 
-@react-component Button
+@react-example Button.example.jsx
+
+@react-props Button.jsx
 
 Markup: button.example.html
 
@@ -211,7 +213,7 @@ Button.propTypes = {
   /**
    * Overwrite the button's `class` attribute by providing your own
    */
-  className: React.PropTypes.string
+  className: React.PropTypes.string,
 };
 ```
 

packages/design-system-docs/src/example.js

@@ -31,14 +31,14 @@ function setModalExamples() {
   const dialogHeading = document.getElementById('dialog-heading');
   const dialogWrap = document.getElementById('dialog-wrap');
 
-  document.querySelectorAll('.dialog-open-btn').forEach(btn => {
+  document.querySelectorAll('.dialog-open-btn').forEach((btn) => {
     btn.addEventListener('click', () => {
       dialog.classList.add(btn.dataset.type);
       dialogHeading.textContent = btn.dataset.heading;
       dialogWrap.classList.remove('ds-u-display--none');
     });
   });
-  document.querySelectorAll('.dialog-close-btn').forEach(btn => {
+  document.querySelectorAll('.dialog-close-btn').forEach((btn) => {
     btn.addEventListener('click', () => {
       dialog.className = 'ds-c-dialog';
       dialogWrap.classList.add('ds-u-display--none');

packages/design-system/src/components/Alert/Alert.example.jsx → packages/design-system-docs/src/pages/components/Alert/Alert.example.jsx

@@ -1,4 +1,4 @@
-import Alert from './Alert';
+import { Alert } from '@cmsgov/design-system';
 import React from 'react';
 import ReactDOM from 'react-dom';
 

packages/design-system/src/components/Alert/_Alert.docs.scss → packages/design-system-docs/src/pages/components/Alert/_Alert.docs.scss

@@ -23,7 +23,9 @@ Style guide: components.alert.variations
 /*
 `<Alert>`
 
-@react-component Alert
+@react-example Alert.example.jsx
+
+@react-props Alert.jsx
 
 Style guide: components.alert.react
 */

packages/design-system/src/components/Autocomplete/Autocomplete.example.jsx → packages/design-system-docs/src/pages/components/Autocomplete/Autocomplete.example.jsx

@@ -1,48 +1,47 @@
-import Autocomplete from './Autocomplete';
+import { Autocomplete, TextField } from '@cmsgov/design-system';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import TextField from '../TextField/TextField';
 
 ReactDOM.render(
   <div>
     <Autocomplete
       items={[
         {
           id: 'kRf6c2fY',
-          name: 'Cook County, IL'
+          name: 'Cook County, IL',
         },
         {
           id: 'lYf5cGfM',
-          name: 'Cook County, MD'
+          name: 'Cook County, MD',
         },
         {
           id: 'mZfKcGf9',
-          name: 'Cook County, TN'
+          name: 'Cook County, TN',
         },
         {
           id: 'xFz6dLba',
-          name: 'Cook County, AK'
+          name: 'Cook County, AK',
         },
         {
           id: 'vTr5c99',
-          name: 'Cook County, FL'
+          name: 'Cook County, FL',
         },
         {
           id: 'ntY8Lha',
-          name: 'Cook County, AL'
+          name: 'Cook County, AL',
         },
         {
           id: 'uRe0Wqo',
-          name: 'Cook County, WA'
+          name: 'Cook County, WA',
         },
         {
           id: 'yUR7MWl',
-          name: 'Cook County, OR'
-        }
+          name: 'Cook County, OR',
+        },
       ]}
       label="Select from the options below:"
-      onChange={selectedItem => console.log(selectedItem)}
-      onInputValueChange={inputVal => console.log('[Autocomplete]: ' + inputVal)}
+      onChange={(selectedItem) => console.log(selectedItem)}
+      onInputValueChange={(inputVal) => console.log('[Autocomplete]: ' + inputVal)}
     >
       <TextField
         hint="Type c then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss."
@@ -55,19 +54,19 @@ ReactDOM.render(
       items={[
         {
           id: 'kRf6c2fY',
-          name: 'Cook County, IL'
+          name: 'Cook County, IL',
         },
         {
           id: 'lYf5cGfM',
-          name: 'Cook County, MD'
+          name: 'Cook County, MD',
         },
         {
           id: 'mZfKcGf9',
-          name: 'Cook County, TN'
-        }
+          name: 'Cook County, TN',
+        },
       ]}
-      onChange={selectedItem => console.log(selectedItem)}
-      onInputValueChange={inputVal => console.log('[Autocomplete]: ' + inputVal)}
+      onChange={(selectedItem) => console.log(selectedItem)}
+      onInputValueChange={(inputVal) => console.log('[Autocomplete]: ' + inputVal)}
     >
       <TextField
         hint="Type c then use ARROW keys to change options, ENTER key to make a selection, ESC to dismiss."

packages/design-system/src/components/Autocomplete/_Autocomplete.docs.scss → packages/design-system-docs/src/pages/components/Autocomplete/_Autocomplete.docs.scss

@@ -9,7 +9,11 @@ Style guide: components.autocomplete
 /*
 `<Autocomplete>`
 
-@react-component Autocomplete
+The `Autocomplete` component is a parent component that adds autocomplete functionality to a `TextField` component.
+
+@react-example Autocomplete.example.jsx
+
+@react-props Autocomplete.jsx
 
 Style guide: components.autocomplete.react
 */

packages/design-system/src/components/Badge/Badge.example.jsx → packages/design-system-docs/src/pages/components/Badge/Badge.example.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import Badge from './Badge';
+import { Badge } from '@cmsgov/design-system';
 import ReactDOM from 'react-dom';
 
 ReactDOM.render(

packages/design-system/src/components/Badge/_Badge.docs.scss → packages/design-system-docs/src/pages/components/Badge/_Badge.docs.scss

@@ -13,7 +13,9 @@ Style guide: components.badge
 /*
 `<Badge>`
 
-@react-component Badge
+@react-example Badge.example.jsx
+
+@react-props Badge.jsx
 
 Style guide: components.badge.react
 */

packages/design-system/src/components/Button/Button.example.jsx → packages/design-system-docs/src/pages/components/Button/Button.example.jsx

@@ -1,6 +1,6 @@
 /* eslint no-alert: 0 */
 import React, { Fragment } from 'react';
-import Button from './Button';
+import { Button } from '@cmsgov/design-system';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';

packages/design-system/src/components/Button/_Button.docs.scss → packages/design-system-docs/src/pages/components/Button/_Button.docs.scss

@@ -34,7 +34,18 @@ Style guide: components.button.inline-field
 /*
 `<Button>`
 
-@react-component Button
+The `Button` component accepts its text as children (AKA inner HTML), which
+means you can also pass in HTML or custom components. This gives you a lot of
+flexibility and supports a variety of advanced use cases. The most common use
+case would be passing in an SVG icon along with the text.
+
+In addition to the supported props listed, you can also pass in additional
+props, which will be passed to the rendered root component. For example,
+you could pass in a `target` prop to pass to the rendered anchor element.
+
+@react-example Button.example.jsx
+
+@react-props Button.jsx
 
 Style guide: components.button.react
 */

packages/design-system/src/components/ChoiceList/Choice.example.jsx → packages/design-system-docs/src/pages/components/ChoiceList/Choice.example.jsx

@@ -1,5 +1,4 @@
-import Choice from './Choice';
-import Dropdown from '../Dropdown/Dropdown';
+import { Choice, Dropdown } from '@cmsgov/design-system';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -11,7 +10,7 @@ const dropdownOptions = [
   { label: 'E', value: 'E' },
   { label: 'F', value: 'F' },
   { label: 'G', value: 'G' },
-  { label: 'H', value: 'H' }
+  { label: 'H', value: 'H' },
 ];
 
 const childDropdown = (

packages/design-system/src/components/ChoiceList/ChoiceList.example.jsx → packages/design-system-docs/src/pages/components/ChoiceList/ChoiceList.example.jsx

@@ -1,4 +1,4 @@
-import ChoiceList from './ChoiceList';
+import { ChoiceList } from '@cmsgov/design-system';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -7,7 +7,7 @@ ReactDOM.render(
     <ChoiceList
       choices={[
         { label: 'Choice 1', value: 'A' },
-        { defaultChecked: true, label: 'Choice 2', value: 'B' }
+        { defaultChecked: true, label: 'Choice 2', value: 'B' },
       ]}
       className="ds-u-margin-top--0"
       label="Radio example"
@@ -21,8 +21,8 @@ ReactDOM.render(
           defaultChecked: true,
           label: 'Choice 2',
           hint: 'Example hint text',
-          value: 'B'
-        }
+          value: 'B',
+        },
       ]}
       errorMessage="Example error message"
       label="Checkbox example"
@@ -36,8 +36,8 @@ ReactDOM.render(
         {
           label: 'Choice 2',
           requirementLabel: 'Optional',
-          value: 'B'
-        }
+          value: 'B',
+        },
       ]}
       label="Choices with requirementLabel"
       multiple

packages/design-system/src/components/ChoiceList/_ChoiceList.docs.scss → packages/design-system-docs/src/pages/components/ChoiceList/_ChoiceList.docs.scss

@@ -17,7 +17,9 @@ A `ChoiceList` component can be used to render a radio button group, or checkbox
 
 By default the component determines the type of field for you, taking into account accessibility and usability best practices. So, you can pass in an array of `choices` and let it determine what type of field would be best for the user, or alternatively you can manually pass in the `type` prop.
 
-@react-component ChoiceList
+@react-example ChoiceList.example.jsx
+
+@react-props ChoiceList.jsx
 
 Style guide: components.choice.choicelist
 */
@@ -29,7 +31,9 @@ A `Choice` component can be used to render a checkbox or radio button.
 
 Any _undocumented_ props that you pass to this component will be passed to the `input` element, so you can use this to set additional attributes if necessary.
 
-@react-component Choice
+@react-example Choice.example.jsx
+
+@react-props Choice.jsx
 
 Style guide: components.choice.react
 */

packages/design-system/src/components/DateField/DateField.example.jsx → packages/design-system-docs/src/pages/components/DateField/DateField.example.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import DateField from './DateField';
+import { DateField } from '@cmsgov/design-system';
 import ReactDOM from 'react-dom';
 
 class ControlledDateField extends React.PureComponent {
@@ -8,7 +8,7 @@ class ControlledDateField extends React.PureComponent {
     this.state = {
       day: '10',
       month: '1',
-      year: '2000'
+      year: '2000',
     };
   }
 

packages/design-system/src/components/DateField/_DateField.docs.scss → packages/design-system-docs/src/pages/components/DateField/_DateField.docs.scss

@@ -13,7 +13,9 @@ Style guide: components.date-field
 /*
 `<DateField>`
 
-@react-component DateField
+@react-example DateField.example.jsx
+
+@react-props DateField.jsx
 
 Style guide: components.date-field.react
 */

packages/design-system/src/components/Dialog/Dialog.example.jsx → packages/design-system-docs/src/pages/components/Dialog/Dialog.example.jsx

@@ -1,5 +1,4 @@
-import Button from '../Button/Button';
-import Dialog from './Dialog';
+import { Button, Dialog } from '@cmsgov/design-system';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -8,7 +7,7 @@ class Example extends React.PureComponent {
     super(props);
 
     this.state = {
-      showModal: false
+      showModal: false,
     };
   }
 
@@ -42,7 +41,7 @@ class Example extends React.PureComponent {
                 onClick={() => this.hideModal()}
               >
                 Cancel
-              </button>
+              </button>,
             ]}
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan diam vitae metus

packages/design-system/src/components/Dialog/ThirdPartyLink.example.jsx → packages/design-system-docs/src/pages/components/Dialog/ThirdPartyLink.example.jsx

@@ -1,5 +1,4 @@
-import Button from '../Button/Button';
-import Dialog from '../Dialog/Dialog';
+import { Button, Dialog } from '@cmsgov/design-system';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
@@ -8,7 +7,7 @@ class Example extends React.PureComponent {
     super(props);
 
     this.state = {
-      showModal: false
+      showModal: false,
     };
   }
 
@@ -50,7 +49,7 @@ class Example extends React.PureComponent {
                 onClick={() => this.hideModal()}
               >
                 Cancel
-              </Button>
+              </Button>,
             ]}
           >
             You are leaving URL and connecting to a 3rd party site. Please click OK to continue or

packages/design-system/src/components/Dialog/_Dialog.docs.scss → packages/design-system-docs/src/pages/components/Dialog/_Dialog.docs.scss

@@ -24,7 +24,9 @@ Style guide: components.dialog.size
 /*
 `<Dialog />`
 
-@react-component Dialog
+@react-example Dialog.example.jsx
+
+@react-props Dialog.jsx
 
 Style guide: components.dialog.react
 */

packages/design-system/src/components/Dialog/_ThirdPartyLink.docs.scss → packages/design-system-docs/src/pages/components/Dialog/_ThirdPartyLink.docs.scss

@@ -9,9 +9,9 @@ Style guide: patterns.external-link
 /*
 `<Dialog />`
 
-@react-component Dialog
+@react-example ThirdPartyLink.example.jsx
 
-@react-example ThirdPartyLink
+@react-props Dialog.jsx
 
 Style guide: patterns.external-link.react
 */