sync: master to alpha

package.json

@@ -61,6 +61,7 @@
     "mailto-link": "^2.0.0",
     "prop-types": "^15.8.1",
     "react-bootstrap": "^1.6.5",
+    "react-colorful": "^5.6.1",
     "react-dropzone": "^14.2.1",
     "react-focus-on": "^3.5.4",
     "react-loading-skeleton": "^3.1.0",

src/Button/Button.test.jsx

@@ -18,6 +18,18 @@ describe('<Button />', () => {
       const tooltip = wrapper.find('.btn');
       expect(tooltip.hasClass('btn-brand')).toEqual(true);
     });
+    it('renders with props iconBefore and size', () => {
+      const tree = renderer.create((
+        <Button iconBefore={Close} size="md">Button</Button>
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    it('renders with props iconAfter and size', () => {
+      const tree = renderer.create((
+        <Button iconAfter={Close} size="md">Button</Button>
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
     it('renders with props iconBefore', () => {
       const tree = renderer.create((
         <Button iconBefore={Close}>Button</Button>

src/Button/ButtonGroup.test.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import Button, { ButtonGroup } from './index';
+
+describe('<ButtonGroup />', () => {
+  describe('correct rendering', () => {
+    it('renders without props', () => {
+      const tree = renderer.create((
+        <ButtonGroup />
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('renders with children', () => {
+      const tree = renderer.create((
+        <ButtonGroup size="lg">
+          <Button variant="primary">Left</Button>
+          <Button variant="primary">Middle</Button>
+          <Button variant="primary">Right</Button>
+        </ButtonGroup>
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});

src/Button/ButtonToolbar.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import { ButtonToolbar } from './index';
+
+describe('<ButtonToolbar />', () => {
+  describe('correct rendering', () => {
+    it('renders without props', () => {
+      const tree = renderer.create((
+        <ButtonToolbar />
+      )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+});

src/Button/__snapshots__/Button.test.jsx.snap

@@ -53,6 +53,35 @@ exports[`<Button /> correct rendering renders with props iconAfter 1`] = `
 </button>
 `;
 
+exports[`<Button /> correct rendering renders with props iconAfter and size 1`] = `
+<button
+  className="btn btn-primary btn-md"
+  disabled={false}
+  type="button"
+>
+  Button
+  <span
+    className="pgn__icon pgn__icon__md btn-icon-after"
+  >
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+</button>
+`;
+
 exports[`<Button /> correct rendering renders with props iconBefore 1`] = `
 <button
   className="btn btn-primary"
@@ -130,6 +159,35 @@ exports[`<Button /> correct rendering renders with props iconBefore and iconAfte
 </button>
 `;
 
+exports[`<Button /> correct rendering renders with props iconBefore and size 1`] = `
+<button
+  className="btn btn-primary btn-md"
+  disabled={false}
+  type="button"
+>
+  <span
+    className="pgn__icon pgn__icon__md btn-icon-before"
+  >
+    <svg
+      aria-hidden={true}
+      fill="none"
+      focusable={false}
+      height={24}
+      role="img"
+      viewBox="0 0 24 24"
+      width={24}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
+        fill="currentColor"
+      />
+    </svg>
+  </span>
+  Button
+</button>
+`;
+
 exports[`<Button /> correct rendering renders without props 1`] = `
 <button
   className="btn btn-primary"

src/Button/__snapshots__/ButtonGroup.test.jsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonGroup /> correct rendering renders with children 1`] = `
+<div
+  className="btn-group btn-group-lg"
+  role="group"
+>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    type="button"
+  >
+    Left
+  </button>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    type="button"
+  >
+    Middle
+  </button>
+  <button
+    className="btn btn-primary"
+    disabled={false}
+    type="button"
+  >
+    Right
+  </button>
+</div>
+`;
+
+exports[`<ButtonGroup /> correct rendering renders without props 1`] = `
+<div
+  className="btn-group btn-group-md"
+  role="group"
+/>
+`;

src/Button/__snapshots__/ButtonToolbar.test.jsx.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonToolbar /> correct rendering renders without props 1`] = `
+<div
+  className="btn-toolbar"
+  role="toolbar"
+/>
+`;

src/Button/index.jsx

@@ -19,9 +19,9 @@ const WrappedButton = React.forwardRef(({
     className={classNames(props.className)}
     ref={ref}
   >
-    {iconBefore && <Icon className={classNames('btn-icon-before', props.size && `pgn__icon__${props.size}`)} src={iconBefore} />}
+    {iconBefore && <Icon className="btn-icon-before" size={props.size} src={iconBefore} />}
     {children}
-    {iconAfter && <Icon className={classNames('btn-icon-after', props.size && `pgn__icon__${props.size}`)} src={iconAfter} />}
+    {iconAfter && <Icon className="btn-icon-after" size={props.size} src={iconAfter} />}
   </Button>
 ));
 

src/ColorPicker/ColorPicker.scss

@@ -0,0 +1,52 @@
+@import "variables";
+
+.pgn__color-picker {
+  box-shadow: 0 0 3px 1px $gray-300;
+  border: none;
+  background:
+    linear-gradient(to bottom right,
+    rgb(255, 0, 0) 0%,
+    rgb(255, 154, 0) 17%,
+    rgb(208, 222, 33) 33%,
+    rgb(79, 220, 74) 40%,
+    rgb(28, 127, 238) 75%,
+    rgb(95, 21, 242) 86%,
+    rgb(186, 12, 248) 100%
+  );
+
+  &.pgn__color-picker-sm {
+    height: $picker-size-sm;
+    width: $picker-size-sm;
+  }
+
+  &.pgn__color-picker-md {
+    height: $picker-size-md;
+    width: $picker-size-md;
+  }
+}
+
+.pgn__color-modal {
+  background: $white;
+  padding-bottom: .1rem;
+  margin-bottom: 1rem;
+}
+
+.pgn__color-error {
+  font-size: 70%;
+}
+
+.pgn__hex-form {
+  display: flex;
+  max-width: 180px;
+  margin: 5px;
+
+  h5 {
+    margin: 10px;
+  }
+
+  .form-field {
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
+      margin-inline-end: 0;
+    }
+  }
+}

src/ColorPicker/ColorPicker.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import userEvent from '@testing-library/user-event';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import '@testing-library/jest-dom';
+import ColorPicker from './index';
+
+describe('renders correctly', () => {
+  const color = '';
+  const setColor = jest.fn();
+  it('successfully renders', () => {
+    const tree = renderer.create(<ColorPicker color={color} setColor={setColor} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders with defaults', () => {
+    const { container } = render(<ColorPicker color={color} setColor={setColor} />);
+    expect(container.firstChild.firstChild).toHaveClass('pgn__color-picker-md');
+  });
+  it('renders with the passed variables ', () => {
+    const className = 'testClassName';
+    const { container } = render(
+      <ColorPicker color={color} setColor={setColor} className={className} size="lg" />,
+    );
+    expect(container.firstChild.firstChild).toHaveClass(className);
+    expect(container.firstChild.firstChild).toHaveClass('pgn__color-picker-lg');
+  });
+});
+describe('picker works as expected', () => {
+  const color = 'wassap';
+  const setColor = jest.fn();
+  it('validates hex color', async () => {
+    render(<ColorPicker color={color} setColor={setColor} />);
+    await act(async () => {
+      userEvent.click(screen.getByRole('button'));
+    });
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
+    const input = screen.getByTestId('hex-input');
+    fireEvent.change(input, { target: { value: '#32116c' } });
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
+  });
+});