[WNMGDS-246] Separate utilities documentation (#522)

* Separate out some

* Split up the rest and import them all

* Fix documentation organization in ChoiceList

* Add back react documentation for the rest of the components

* Rename doc scss files to partial naming convention

* PR feedback

* Mask description change

Author: bernardwang

packages/core/src/components/ChoiceList/Choice.jsx

@@ -8,13 +8,6 @@ import uniqueId from 'lodash.uniqueid';
 /** Used to emit events to all Choice components */
 const dsChoiceEmitter = new EvEmitter();
 
-/**
- * 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.
- */
 export class Choice extends React.PureComponent {
   constructor(props) {
     super(props);

packages/core/src/components/ChoiceList/ChoiceList.jsx

@@ -6,15 +6,6 @@ import Select from './Select';
 import classNames from 'classnames';
 import uniqueId from 'lodash.uniqueid';
 
-/**
- * A `ChoiceList` component can be used to render a radio
- * button group, or checkbox group.
- *
- * 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.
- */
 export class ChoiceList extends React.PureComponent {
   constructor(props) {
     super(props);

packages/core/src/components/ChoiceList/Select.jsx

@@ -3,16 +3,6 @@ import React from 'react';
 import classNames from 'classnames';
 import uniqueId from 'lodash.uniqueid';
 
-/**
- * A `Select` component can be used to render an HTML `select` menu.
- * Any _undocumented_ props that you pass to this component will be passed
- * to the `select` element, so you can use this to set additional attributes if
- * necessary.
- *
- * Class-based component gives flexibility for active focus management
- * by allowing refs to be passed.
- */
-
 export class Select extends React.PureComponent {
   componentDidMount() {
     if (this.props.focusTrigger) {

packages/core/src/components/ChoiceList/_Choice.docs.scss renamed to packages/core/src/components/ChoiceList/_ChoiceList.docs.scss

@@ -39,6 +39,10 @@ Style guide: components.choice.size
 /*
 `<ChoiceList>`
 
+A `ChoiceList` component can be used to render a radio button group, or checkbox group.
+
+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
 
 Style guide: components.choice.choicelist
@@ -47,6 +51,10 @@ Style guide: components.choice.choicelist
 /*
 `<Choice>`
 
+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
 
 Style guide: components.choice.react

packages/core/src/components/ChoiceList/_Select.docs.scss

@@ -23,6 +23,10 @@ Style guide: components.select.choicelist
 /*
 `<Select>`
 
+A `Select` component can be used to render an HTML `select` menu. Any _undocumented_ props that you pass to this component will be passed to the `select` element, so you can use this to set additional attributes if necessary.
+
+Class-based component gives flexibility for active focus management by allowing refs to be passed.
+
 @react-component Select
 
 Style guide: components.select.react

packages/core/src/components/Dropdown/_Dropdown.docs.scss

@@ -13,6 +13,10 @@ Style guide: components.dropdown
 /*
 `<Dropdown>`
 
+A `Dropdown` component can be used to render an HTML `select` menu. Any _undocumented_ props that you pass to this component will be passed to the `select` element, so you can use this to set additional attributes if necessary.
+
+Class-based component gives flexibility for active focus management by allowing refs to be passed.
+
 @react-component Dropdown
 
 Style guide: components.dropdown.react

packages/core/src/components/FormLabel/FormLabel.jsx

@@ -2,10 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 
-/**
- * The `FormLabel` component provides the `label` (or `legend`) for a field,
- * along with any associated hint text and error message.
- */
 export class FormLabel extends React.PureComponent {
   errorMessage() {
     if (this.props.errorMessage) {

packages/core/src/components/FormLabel/_FormLabel.docs.scss

@@ -11,6 +11,8 @@ Style guide: components.form-label
 /*
 `<FormLabel>`
 
+The `FormLabel` component provides the `label` (or `legend`) for a field, along with any associated hint text and error message.
+
 @react-component FormLabel
 
 Style guide: components.form-label.react

packages/core/src/components/MonthPicker/MonthPicker.jsx

@@ -7,14 +7,6 @@ import React from 'react';
 import classNames from 'classnames';
 import uniqueId from 'lodash.uniqueid';
 
-/*
-`<MonthPicker>`
-
-@react-component MonthPicker
-
-Style guide: components.month-picker.react
-*/
-
 const NUM_MONTHS = 12;
 const monthNumbers = (() => {
   const months = [];
@@ -24,13 +16,6 @@ const monthNumbers = (() => {
   return months;
 })();
 
-/**
- * The `MonthPicker` component renders a grid of checkboxes with shortened month
- * names as well as buttons for selecting or deselecting all. For internationalization
- * one can pass a `locale` prop, and the month names will change to match the
- * language of the locale. Full month names are also included as `aria-label`
- * attributes.
- */
 export class MonthPicker extends React.PureComponent {
   constructor(props) {
     super(props);

packages/core/src/components/MonthPicker/_MonthPicker.docs.scss

@@ -3,3 +3,13 @@ Month Picker
 
 Style guide: components.month-picker
 */
+
+/*
+`<MonthPicker>`
+
+The `MonthPicker` component renders a grid of checkboxes with shortened month names as well as buttons for selecting or deselecting all. For internationalization one can pass a `locale` prop, and the month names will change to match the language of the locale. Full month names are also included as `aria-label` attributes.
+
+@react-component MonthPicker
+
+Style guide: components.month-picker.react
+*/