refactor(toggle-group): split into composable components (#388)

BREAKING CHANGE: Renames ToggleGroup to FieldSet to match intended
usage.

src/FieldSet/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import propTypes from 'prop-types'
+
+const FieldSet = ({ className, children }) => (
+    <fieldset className={className}>
+        {children}
+        <style jsx>{`
+            fieldset {
+                border: none;
+                margin: 0;
+                padding: 0;
+            }
+        `}</style>
+    </fieldset>
+)
+
+FieldSet.propTypes = {
+    className: propTypes.string,
+    children: propTypes.node.isRequired,
+}
+
+export { FieldSet }

src/Legend/index.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import propTypes from 'prop-types'
+import cx from 'classnames'
+import { theme, spacers } from '../theme.js'
+
+const Legend = ({ className, children, required }) => (
+    <legend className={cx(className, { required })}>
+        {children}
+        <style jsx>{`
+            legend {
+                font-size: 16px;
+                color: ${theme.default};
+                margin: ${spacers.dp12} 0 ${spacers.dp12};
+            }
+            legend.required::after {
+                padding-left: ${spacers.dp4};
+                content: '*';
+            }
+        `}</style>
+    </legend>
+)
+
+Legend.propTypes = {
+    className: propTypes.string,
+    children: propTypes.node.isRequired,
+    required: propTypes.bool,
+}
+
+export { Legend }

src/index.js

@@ -14,14 +14,16 @@ export { ComponentCover } from './ComponentCover'
 export { Divider } from './Divider'
 export { FileField } from './FileField'
 export { Help } from './Help'
+export { FieldSet } from './FieldSet'
 export { FormControl } from './FormControl'
+export { Help } from './Help'
 export { Input } from './Input'
+export { Legend } from './Legend'
 export { LinearLoader } from './LinearLoader'
 export { Logo, LogoIcon, LogoIconWhite, LogoWhite } from './Logo'
 export { MenuList } from './MenuList'
 export { MenuItem } from './MenuItem'
 export { Radio } from './Radio'
-export { RadioGroup } from './RadioGroup'
 export { ScreenCover } from './ScreenCover'
 export { Select } from './Select'
 export { Switch } from './Switch'

stories/FieldSet.stories.js

@@ -0,0 +1,57 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { FieldSet, FormControl, Radio, Help, Legend } from '../src'
+
+import markdown from './info/atoms/fieldSet.md'
+
+const onChange = () => {
+    console.log('Radio was clicked, nothing else will happen')
+}
+
+storiesOf('FieldSet', module)
+    .addParameters({
+        notes: {
+            markdown,
+        },
+    })
+    .add('Default', () => (
+        <FieldSet>
+            It renders something in a fieldset element without the browser
+            styles
+        </FieldSet>
+    ))
+    .add('Usage example - a radio button group with error status', () => (
+        <FieldSet>
+            <Legend required>Choose an option</Legend>
+            <FormControl>
+                <Radio
+                    onChange={onChange}
+                    name="radio"
+                    value="first"
+                    label="First"
+                    error
+                />
+            </FormControl>
+            <FormControl>
+                <Radio
+                    onChange={onChange}
+                    name="radio"
+                    value="second"
+                    label="Second"
+                    error
+                />
+            </FormControl>
+            <FormControl>
+                <Radio
+                    onChange={onChange}
+                    name="radio"
+                    value="third"
+                    label="Third"
+                    error
+                />
+            </FormControl>
+            <Help error indent={false}>
+                You really have to choose something!
+            </Help>
+        </FieldSet>
+    ))

stories/InputField.stories.js

@@ -1,9 +1,7 @@
 import { storiesOf } from '@storybook/react'
-import { resolve } from 'styled-jsx/css'
-import React, { Fragment } from 'react'
+import React from 'react'
 
 import { Input, Help } from '../src'
-import { colors } from '../src/theme'
 
 const logger = ({ target }) => console.info(`${target.name}: ${target.value}`)
 

stories/Legend.stories.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { Legend } from '../src'
+
+import markdown from './info/atoms/legend.md'
+
+storiesOf('Legend', module)
+    .addParameters({
+        notes: {
+            markdown,
+        },
+    })
+    .add('Default', () => (
+        <Legend>I am wrapped in a legend which has some styling</Legend>
+    ))
+    .add('Required', () => (
+        <Legend required>
+            I am wrapped in a legend which has some styling
+        </Legend>
+    ))

stories/SelectField.stories.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { Select, Help } from '../src'