feat(CHeckbox Group): Checkbox Group

components/Checkbox/Checkbox.jsx

@@ -115,7 +115,7 @@ const Checkbox = ({ label, error, id, ...rest }) => (
       <CheckIcon />
       <CheckboxLabel htmlFor={id}>{label}</CheckboxLabel>
     </CheckboxWrapper>
-    {error && <ErrorMessage>{error}</ErrorMessage>}
+    {error && typeof error === 'string' && <ErrorMessage>{error}</ErrorMessage>}
   </Wrapper>
 );
 
@@ -125,14 +125,16 @@ Checkbox.defaultProps = {
   error: '',
   id: '',
   label: '',
+  value: '',
 };
 
 Checkbox.propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
-  error: PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   id: PropTypes.string,
   label: PropTypes.string,
+  value: PropTypes.string,
 };
 
 export default Checkbox;

components/Checkbox/CheckboxGroup.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { FieldGroup, ErrorMessage } from '../shared';
+
+import Checkbox from './Checkbox';
+
+const Group = styled(FieldGroup)`
+  position: relative;
+`;
+
+const ErrorLabel = styled(ErrorMessage)`
+  margin-left: -3px;
+`;
+
+ErrorLabel.displayName = 'ErrorLabel';
+
+const CheckboxGroup = ({
+  children,
+  error,
+  name,
+  onChange,
+  options,
+  value,
+  ...rest
+}) => {
+  const _onChange = () => {
+    const checkedValues = React.Children.map(children, child => child.value);
+
+    console.log(checkedValues);
+  };
+
+  const commonProps = { name, error: Boolean(error), onChange: _onChange };
+  const checkboxOptions = options.map(option =>
+    Object.assign({}, option, {
+      key: option.value,
+      ...commonProps,
+    }),
+  );
+
+  const items =
+    React.Children.map(children, child =>
+      React.cloneElement(child, { ...commonProps }),
+    ) || checkboxOptions.map(props => <Checkbox {...props} />);
+
+  return (
+    <Group {...rest}>
+      {items}
+      {error && <ErrorLabel>{error}</ErrorLabel>}
+    </Group>
+  );
+};
+
+CheckboxGroup.Checkbox = Checkbox;
+
+/**
+ * Group for Radio components.
+ */
+CheckboxGroup.defaultProps = {
+  children: undefined,
+  error: undefined,
+  onChange: () => {},
+  options: [],
+  value: undefined,
+};
+
+CheckboxGroup.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      value: PropTypes.string.isRequired,
+      disabled: PropTypes.bool,
+    }),
+  ),
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+  ]),
+  onChange: PropTypes.func,
+  /** Initialize CheckboxGroup with a value */
+  value: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  error: PropTypes.string,
+};
+
+export default CheckboxGroup;

components/Checkbox/__snapshots__/Checkbox.unit.test.jsx.snap

@@ -97,6 +97,7 @@ exports[`<Checkbox /> should match the snapshot 1`] = `
       disabled={false}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"
@@ -294,6 +295,7 @@ exports[`<Checkbox /> should match the snapshot 2`] = `
       disabled={false}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"
@@ -496,6 +498,7 @@ exports[`<Checkbox /> should match the snapshot 3`] = `
       disabled={false}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"
@@ -690,6 +693,7 @@ exports[`<Checkbox /> should match the snapshot 4`] = `
       disabled={false}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"
@@ -879,6 +883,7 @@ exports[`<Checkbox /> should match the snapshot 5`] = `
       disabled={true}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"
@@ -1068,6 +1073,7 @@ exports[`<Checkbox /> should match the snapshot 6`] = `
       disabled={false}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"
@@ -1258,6 +1264,7 @@ exports[`<Checkbox /> should match the snapshot 7`] = `
       disabled={true}
       id=""
       type="checkbox"
+      value=""
     />
     <span
       aria-hidden="true"

stories/Checkbox/Checkbox.story.jsx

@@ -1,79 +1,32 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import {
+  TabbedView,
+  Heading,
   Tab,
-  Title,
-  SimpleHighlight,
-  AutoExample,
-  StoryContainer,
+  ComponentPanel,
+  AutoPropsApi,
 } from '@catho/quantum-storybook-ui';
 import Checkbox from '../../components/Checkbox';
-import FieldGroup from '../../components/shared/FieldGroup';
-
-const exampleUsage = `<Checkbox label="Default" checked={false} onChange={() => {}} />
-<Checkbox label="Checked" checked onChange={() => {}} />
-<Checkbox label="Disabled" disabled checked={false} onChange={() => {}} />
-<Checkbox label="Disabled & Checked" disabled checked onChange={() => {}} />
-<Checkbox label="With error" error="Message" checked={false} onChange={() => {}} />
-<Checkbox label="With error & Checked" error="Message" checked onChange={() => {}} />`;
-
-const exampleTab = (
-  <Tab title="Example">
-    <StoryContainer>
-      <Title as="h2">Examples</Title>
-      <FieldGroup>
-        <Checkbox label="Default" checked={false} onChange={() => {}} />
-      </FieldGroup>
-      <FieldGroup>
-        <Checkbox label="Checked" checked onChange={() => {}} />
-      </FieldGroup>
-      <FieldGroup>
-        <Checkbox
-          label="Disabled"
-          disabled
-          checked={false}
-          onChange={() => {}}
-        />
-      </FieldGroup>
-      <FieldGroup>
-        <Checkbox
-          label="Disabled & Checked"
-          disabled
-          checked
-          onChange={() => {}}
-        />
-      </FieldGroup>
-      <FieldGroup>
-        <Checkbox
-          label="With error"
-          error="Message"
-          checked={false}
-          onChange={() => {}}
-        />
-      </FieldGroup>
-      <FieldGroup>
-        <Checkbox
-          label="With error & Checked"
-          error="Message"
-          checked
-          onChange={() => {}}
-        />
-      </FieldGroup>
-      <Title as="h2">Usage</Title>
-      <SimpleHighlight>{exampleUsage}</SimpleHighlight>
-    </StoryContainer>
-  </Tab>
-);
+import checkboxGroup from './sub-components/checkboxGroup';
 
 const description = `Checkboxes are used when there is a list of options and
 the user may select multiple options, including all or none.`;
 
 storiesOf('Forms', module).add('Checkbox', () => (
   <>
-    <AutoExample
-      description={description}
-      component={Checkbox}
-      additionalTabs={exampleTab}
-    />
+    <Heading name="Checkbox">{description}</Heading>
+
+    <TabbedView>
+      <Tab title="Usage">
+        <ComponentPanel component={<Checkbox />} importModules="Checkbox" />
+      </Tab>
+
+      <Tab title="API">
+        <AutoPropsApi component={Checkbox} />
+      </Tab>
+
+      <Tab title="Checkbox group">{checkboxGroup}</Tab>
+    </TabbedView>
   </>
 ));

stories/Checkbox/sub-components/checkboxGroup.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Title, StoryContainer } from '@catho/quantum-storybook-ui';
+import CheckboxGroup from '../../../components/Checkbox/CheckboxGroup';
+
+export default (
+  <StoryContainer>
+    <Title as="h2">Checkbox Group</Title>
+
+    <CheckboxGroup name="group-test" error="Select one">
+      <CheckboxGroup.Checkbox label="Option 1" value="Option 1" />
+      <CheckboxGroup.Checkbox label="Option 2" value="Option 2" checked />
+      <CheckboxGroup.Checkbox label="Option 3" value="Option 3" />
+      <CheckboxGroup.Checkbox
+        label="Option 4"
+        value="Option 4"
+        disabled
+        checked
+      />
+      <CheckboxGroup.Checkbox label="Option 5" value="Option 5" />
+      <CheckboxGroup.Checkbox label="Option 6" value="Option 6" />
+    </CheckboxGroup>
+  </StoryContainer>
+);

stories/RadioGroup/RadioGroup.story.jsx

@@ -106,8 +106,8 @@ stories.add('Radio group', () => (
           <br />
 
           <p>
-            It&apos;s also possible to render it inline, <code>inline</code>{' '}
-            prop.
+            It&apos;s also possible to render it inline, with{' '}
+            <code>inline</code> prop.
           </p>
           <br />
 

stories/RadioGroup/sub-components/buttonGroupError.jsx

@@ -24,6 +24,7 @@ class Group extends React.Component {
         options={options}
         type="button"
         error="Example error message"
+        inline
       />
     );
   }