feat(select): Adjust accessibility for select / Abstract Helper to it…

…s own component (Feedback) / Add docs select component

src/components/Checkbox/__tests__/Checkbox.spec.jsx

@@ -5,7 +5,7 @@ import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 import Checkbox from '../Checkbox'
-import Helper from '../../FormField/Helper/Helper'
+import Helper from '../../Feedback/Feedback'
 import ColoredTextProvider from '../../Typography/ColoredTextProvider/ColoredTextProvider'
 
 describe('Checkbox', () => {

src/components/Choice/Choice.jsx

@@ -10,7 +10,7 @@ import Paragraph from '../Typography/Paragraph/Paragraph'
 import Box from '../Box/Box'
 import ColoredTextProvider from '../Typography/ColoredTextProvider/ColoredTextProvider'
 import Flexbox from '../Flexbox/Flexbox'
-import Helper from '../FormField/Helper/Helper'
+import Feedback from '../Feedback/Feedback'
 
 import styles from './Choice.modules.scss'
 import messagingStyles from '../Messaging.modules.scss'
@@ -63,9 +63,9 @@ const renderLabel = (label, feedback, checked, disabled) => {
 }
 
 const renderError = (error, errorId) => (
-  <Helper id={errorId} feedback="error">
+  <Feedback id={errorId} feedback="error">
     <Paragraph size="small">{error}</Paragraph>
-  </Helper>
+  </Feedback>
 )
 
 class Choice extends React.Component {

src/components/FormField/Helper/Helper.jsx → src/components/Feedback/Feedback.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Box from '../../Box/Box'
+import Box from '../Box/Box'
 
-import safeRest from '../../../utils/safeRest'
+import safeRest from '../../utils/safeRest'
 
-import styles from './Helper.modules.scss'
+import styles from './Feedback.modules.scss'
 
-const Helper = ({ feedback, children, ...rest }) => (
+const Feedback = ({ feedback, children, ...rest }) => (
   <Box
     {...safeRest(rest)}
     inset={3}
@@ -17,13 +17,13 @@ const Helper = ({ feedback, children, ...rest }) => (
   </Box>
 )
 
-Helper.propTypes = {
+Feedback.propTypes = {
   feedback: PropTypes.oneOf(['success', 'error']),
   children: PropTypes.node.isRequired,
 }
 
-Helper.defaultProps = {
+Feedback.defaultProps = {
   feedback: undefined,
 }
 
-export default Helper
+export default Feedback

src/components/Feedback/Feedback.modules.scss

@@ -0,0 +1,18 @@
+.base {
+  composes: rounded from '../Borders.modules.scss';
+}
+
+.default {
+  composes: base;
+  composes: default from '../Messaging.modules.scss';
+}
+
+.success {
+  composes: base;
+  composes: success from '../Messaging.modules.scss';
+}
+
+.error {
+  composes: base;
+  composes: error from '../Messaging.modules.scss';
+}

src/components/FormField/Helper/__tests__/Helper.spec.jsx → src/components/Feedback/__tests__/Feedback.spec.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { shallow, mount, render } from 'enzyme'
 
-import Helper from '../Helper'
+import Helper from '../Feedback'
 
 describe('Helper', () => {
   const defaultChildren = 'Some helper text.'

src/components/FormField/FormField.jsx

@@ -9,7 +9,7 @@ import Box from '../Box/Box'
 import Flexbox from '../Flexbox/Flexbox'
 import Text from '../Typography/Text/Text'
 import Paragraph from '../Typography/Paragraph/Paragraph'
-import Helper from './Helper/Helper'
+import Feedback from '../Feedback/Feedback'
 import Tooltip from '../Tooltip/Tooltip'
 
 import styles from './FormField.modules.scss'
@@ -34,22 +34,22 @@ const getClassName = (feedback, focus, disabled) => {
 const showFeedbackIcon = (feedback, focus) =>
   (feedback === 'success' || feedback === 'error') && !focus
 
-const renderLabel = (label, hint, fieldId) => (
-  <label htmlFor={fieldId.identity()} data-no-global-styles>
-    <Box inline between={2} dangerouslyAddClassName={styles.alignCenter}>
-      <Text size="medium" bold>
-        {label}
-      </Text>
-
-      {hint && <Text size="small">{hint}</Text>}
-    </Box>
-  </label>
-)
-
+const renderLabel = (label, hint, fieldId) => {
+  return (
+    <label htmlFor={fieldId.identity()} data-no-global-styles>
+      <Box inline between={2} dangerouslyAddClassName={styles.alignCenter}>
+        <Text size="medium" bold>
+          {label}
+        </Text>
+        {hint && <Text size="small">{hint}</Text>}
+      </Box>
+    </label>
+  )
+}
 const renderError = (error, errorId) => (
-  <Helper id={errorId} feedback="error">
+  <Feedback id={errorId} feedback="error">
     <Paragraph size="small">{error}</Paragraph>
-  </Helper>
+  </Feedback>
 )
 
 const renderHelper = (helper, helperId, feedback, value) => {
@@ -62,9 +62,9 @@ const renderHelper = (helper, helperId, feedback, value) => {
   }
 
   return (
-    <Helper id={helperId} feedback={feedback}>
+    <Feedback id={helperId} feedback={feedback}>
       <Text size="small">{helper}</Text>
-    </Helper>
+    </Feedback>
   )
 }
 

src/components/Input/Input.jsx

@@ -5,7 +5,7 @@ import { childrenOfType } from 'airbnb-prop-types'
 import joinClassNames from '../../utils/joinClassNames'
 
 import Tooltip from '../Tooltip/Tooltip'
-import Helper from '../FormField/Helper/Helper'
+import Feedback from '../Feedback/Feedback'
 import FormField from '../FormField/FormField'
 import FeedbackIcon from '../FormField/FeedbackIcon'
 
@@ -109,6 +109,6 @@ Input.defaultProps = {
 }
 
 // TODO: This will no longer necessary once Helper is exported on its own. Removing this will be a breaking change.
-Input.Helper = Helper
+Input.Helper = Feedback
 
 export default Input

src/components/Input/__tests__/Input.spec.jsx

@@ -6,7 +6,7 @@ import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../../Animation/Fade'
 import Input from '../Input'
-import Helper from '../../FormField/Helper/Helper'
+import Helper from '../../Feedback/Feedback'
 import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 
 describe('Input', () => {

src/components/Radio/__tests__/Radio.spec.jsx

@@ -4,7 +4,7 @@ import { mount, render } from 'enzyme'
 import Text from '../../Typography/Text/Text'
 import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 import Radio from '../Radio'
-import Helper from '../../FormField/Helper/Helper'
+import Helper from '../../Feedback/Feedback'
 import ColoredTextProvider from '../../Typography/ColoredTextProvider/ColoredTextProvider'
 
 describe('Radio', () => {

src/components/Select/Select.jsx

@@ -96,7 +96,7 @@ Select.propTypes = {
    * A detailed explanation of the input expected by a form field. Can be text,
    * other components, or HTML elements.
    *
-   * If a function is provided, it must return a `Helper`. The function will be
+   * If a function is provided, it must return a `Feedback` component. The function will be
    * invoked with the following arguments.
    *
    * @param {String} feedback The input's current feedback state.

src/components/Select/Select.md

@@ -1,7 +1,21 @@
+
+### Usage criteria
+
+* Selects should be used sparingly where possible or need to reduce space on forms etc. (Work with design for specifics)
+* Selects should have instructions such as "Please select…" as a default option but not able to be selected.
+* Selects are most appropriate when there are 4 or more choice. Less than 4, checkboxes or radios are more appropriate.
+
 ```
+const info = (
+  <Text>
+    We have special promotions in <Text bold>British Columbia, Ontario and Quebec</Text>.
+  </Text>
+);
+
 <Select 
   label="Select your province"
-  options={[{text: 'British Columbia', value: 'BC'}, {text: 'Ontario', value: 'ON'}]}
+  helper={info}
+  options={[{text: 'British Columbia', value: 'BC'}, {text: 'Ontario', value: 'ON'}, {text: 'Quebec', value: 'QC'}]}
   onChange={e => console.log(e.target.value)}
 />
 ```

src/components/Select/__tests__/Select.spec.jsx

@@ -6,7 +6,7 @@ import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../../Animation/Fade'
 import Select from '../Select'
-import Helper from '../../FormField/Helper/Helper'
+import Helper from '../../Feedback/Feedback'
 import DecorativeIcon from '../../Icons/DecorativeIcon/DecorativeIcon'
 
 describe('Select', () => {

src/components/Textarea/__tests__/Textarea.spec.jsx

@@ -7,7 +7,7 @@ import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../../Animation/Fade'
 import Textarea from '../Textarea'
-import Helper from '../../FormField/Helper/Helper'
+import Helper from '../../Feedback/Feedback'
 
 describe('Textarea', () => {
   const defaultProps = {