Merge pull request #98 from arturbien/feature/color-input

Feature/color input

Author: arturbien

src/components/ColorInput/ColorInput.js

@@ -0,0 +1,132 @@
+import React from 'react';
+import propTypes from 'prop-types';
+
+import styled, { css } from 'styled-components';
+import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
+import Button from '../Button/Button';
+import Bar from '../Bar/Bar';
+
+const StyledBar = styled(Bar)`
+  height: 23px;
+  position: relative;
+  top: -1px;
+`;
+
+export const StyledColorInput = styled.input`
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+`;
+
+// TODO replace with SVG icon
+const ColorPreview = styled.div`
+  box-sizing: border-box;
+  height: 21px;
+  display: inline-block;
+  width: 35px;
+  margin-right: 0.5rem;
+
+  background: ${({ color }) => color};
+
+  ${({ isDisabled }) =>
+    isDisabled
+      ? css`
+          border: 2px solid ${({ theme }) => theme.textDisabled};
+          filter: drop-shadow(
+            1px 1px 0px ${({ theme }) => theme.textDisabledShadow}
+          );
+        `
+      : css`
+          border: 2px solid ${({ theme }) => theme.text};
+        `}
+`;
+
+const ChevronIcon = styled.span`
+  position: relative;
+  width: 0px;
+  height: 0px;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  display: inline-block;
+  margin-left: 0.5rem;
+
+  ${({ isDisabled }) =>
+    isDisabled
+      ? css`
+          border-top: 6px solid ${({ theme }) => theme.textDisabled};
+          filter: drop-shadow(
+            1px 1px 0px ${({ theme }) => theme.textDisabledShadow}
+          );
+        `
+      : css`
+          border-top: 6px solid ${({ theme }) => theme.text};
+        `}
+`;
+
+// TODO make sure all aria and role attributes are in place
+const ColorInput = React.forwardRef(function ColorInput(props, ref) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    variant,
+    ...otherProps
+  } = props;
+
+  const [valueDerived, setValueState] = useControlledOrUncontrolled({
+    value,
+    defaultValue
+  });
+
+  const handleChange = e => {
+    const color = e.target.value;
+    setValueState(color);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
+  return (
+    // we only need button styles, so we display it as a div and reset type attribute
+    <Button isDisabled={disabled} as='div' type={null} variant={variant}>
+      <ColorPreview
+        color={valueDerived}
+        isDisabled={disabled}
+        role='presentation'
+      />
+      {variant === 'default' && <StyledBar />}
+      <StyledColorInput
+        onChange={handleChange}
+        readOnly={disabled}
+        disabled={disabled}
+        value={valueDerived || '#008080'}
+        type='color'
+        ref={ref}
+        {...otherProps}
+      />
+      <ChevronIcon isDisabled={disabled} />
+    </Button>
+  );
+});
+
+ColorInput.defaultProps = {
+  value: undefined,
+  defaultValue: undefined,
+  disabled: false,
+  variant: 'default',
+  onChange: () => {}
+};
+
+ColorInput.propTypes = {
+  value: propTypes.string,
+  defaultValue: propTypes.string,
+  onChange: propTypes.func,
+  disabled: propTypes.bool,
+  variant: propTypes.oneOf(['default', 'flat'])
+};
+export default ColorInput;

src/components/ColorInput/ColorInput.spec.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+import ColorInput from './ColorInput';
+
+function rgb2hex(str) {
+  const rgb = str.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+  function hex(x) {
+    return `0${parseInt(x, 10).toString(16)}`.slice(-2);
+  }
+  return `#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`;
+}
+
+describe('<ColorInput />', () => {
+  // TODO
+  it('should call handlers', () => {});
+
+  it('should properly pass value to input element', () => {
+    const color = '#f0f0dd';
+    const { container } = renderWithTheme(<ColorInput value={color} />);
+    const input = container.querySelector(`[type="color"]`);
+
+    expect(input.value).toBe(color);
+  });
+  it('should display current color', () => {
+    const color = '#f0f0dd';
+    const { getByRole } = renderWithTheme(<ColorInput value={color} />);
+    const colorPreview = getByRole('presentation');
+    const displayedColor = window.getComputedStyle(colorPreview, null)
+      .background;
+
+    const displayedColorHex = rgb2hex(displayedColor);
+    expect(displayedColorHex).toBe(color);
+  });
+
+  describe('prop: disabled', () => {
+    it('should render disabled input', () => {
+      const { container } = renderWithTheme(<ColorInput disabled />);
+      const input = container.querySelector(`[type="color"]`);
+
+      expect(input).toHaveAttribute('disabled');
+    });
+
+    it('should be overridden by props', () => {
+      const { container, rerender } = renderWithTheme(<ColorInput disabled />);
+      rerender(<ColorInput disabled={false} />);
+      const input = container.querySelector(`[type="color"]`);
+
+      expect(input).not.toHaveAttribute('disabled');
+    });
+  });
+});

src/components/ColorInput/ColorInput.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import styled from 'styled-components';
+
+import { ColorInput, Cutout } from '..';
+
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+  display: inline-block;
+  padding: 4rem;
+`;
+storiesOf('ColorInput', module)
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
+  .add('default', () =>
+    React.createElement(() => <ColorInput defaultValue='#00f' />)
+  )
+
+  .add('disabled', () =>
+    React.createElement(() => <ColorInput disabled defaultValue='#00f' />)
+  )
+  .add('flat', () =>
+    React.createElement(() => (
+      <StyledCutout>
+        <ColorInput variant='flat' defaultValue='#00f' />
+      </StyledCutout>
+    ))
+  );

src/components/Slider/Slider.spec.js

@@ -114,7 +114,7 @@ describe('<Slider />', () => {
   });
 
   describe('prop: disabled', () => {
-    it("shouldn't render disabled slider", () => {
+    it('should render disabled slider', () => {
       const { getByRole, container } = renderWithTheme(
         <Slider
           step={null}

src/components/index.js

@@ -38,6 +38,7 @@ export { default as Tooltip } from './Tooltip/Tooltip';
 export { default as Window } from './Window/Window';
 export { default as WindowContent } from './WindowContent/WindowContent';
 export { default as WindowHeader } from './WindowHeader/WindowHeader';
+export { default as ColorInput } from './ColorInput/ColorInput';
 
 export {
   default as LoadingIndicator