Created the <ButtonGroup /> Preact Component (#7048)

* Created the <ButtonGroup /> component.

* Removed comment for children proptypes.

* Updated <ButtonGroup /> SB story and tests.

app/javascript/crayons/ButtonGroup/ButtonGroup.jsx

@@ -0,0 +1,12 @@
+import { h } from 'preact';
+import { defaultChildrenPropTypes } from '../../src/components/common-prop-types';
+
+export const ButtonGroup = ({ children }) => (
+  <div className="crayons-btn-group">{children}</div>
+);
+
+ButtonGroup.displayName = 'ButtonGroup';
+
+ButtonGroup.propTypes = {
+  children: defaultChildrenPropTypes.isRequired,
+};

app/javascript/crayons/ButtonGroup/__stories__/ButtonGroup.stories.jsx

@@ -0,0 +1,28 @@
+import { h } from 'preact';
+import { Button, ButtonGroup } from '@crayons';
+
+import '../../storybook-utiltiies/designSystem.scss';
+
+export default {
+  title: 'Components/ButtonGroup',
+};
+
+export const Default = () => {
+  const Icon = () => (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      className="crayons-icon"
+    >
+      <path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
+    </svg>
+  );
+
+  return (
+    <ButtonGroup>
+      <Button>Hello World!</Button>
+      <Button icon={Icon} />
+    </ButtonGroup>
+  );
+};

app/javascript/crayons/ButtonGroup/__tests__/ButtonGroup.test.jsx

@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import render from 'preact-render-to-json';
+import { Button, ButtonGroup } from '@crayons';
+
+describe('<ButtonGroup /> component', () => {
+  it('should render', () => {
+    const Icon = () => (
+      <svg
+        width="24"
+        height="24"
+        xmlns="http://www.w3.org/2000/svg"
+        className="crayons-icon"
+      >
+        <path d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z" />
+      </svg>
+    );
+
+    const tree = render(
+      <ButtonGroup>
+        <Button>Hello World!</Button>
+        <Button icon={Icon} />
+      </ButtonGroup>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+});

app/javascript/crayons/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.jsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonGroup /> component should render 1`] = `
+<div
+  class="crayons-btn-group"
+>
+  <button
+    class="crayons-btn"
+    disabled={false}
+    type="button"
+  >
+    Hello World!
+  </button>
+  <button
+    class="crayons-btn crayons-btn--icon-alone"
+    disabled={false}
+    type="button"
+  >
+    <svg
+      class="crayons-icon"
+      height="24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.99999 15.172L19.192 5.979L20.607 7.393L9.99999 18L3.63599 11.636L5.04999 10.222L9.99999 15.172Z"
+      />
+    </svg>
+  </button>
+</div>
+`;

app/javascript/crayons/ButtonGroup/index.js

@@ -0,0 +1 @@
+export * from './ButtonGroup';

app/javascript/crayons/index.js

@@ -1,2 +1,3 @@
 export * from '@crayons/Button';
+export * from '@crayons/ButtonGroup';
 export * from '@crayons/Dropdown';