feat: added recommended colors array

Author: Guilherme Monte

index.d.ts

@@ -17,6 +17,7 @@ export interface InputColorProps {
   placement?: string;
   onChange?(color: Color): void;
   disabled?: boolean;
+  recommendedColors?: string[];
 }
 
 export default function InputColor(props: InputColorProps);

src/__tests__/input-color.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import InputColor from '../';
-import { parseColor, hex2alpha, rgba2hex, alpha2hex } from '../utils';
+import { parseColor, hex2alpha, rgba2hex, alpha2hex, onlyUnique } from '../utils';
 
 test('render', () => {
   expect(() =>
@@ -51,3 +51,7 @@ test('alpha2hex', () => {
 test('rgba2hex', () => {
   expect(rgba2hex(255, 255, 255, 50)).toEqual(`#ffffff80`);
 });
+
+test('onlyUnique', () => {
+  expect(onlyUnique(['a', 'b', 'c', 'b'])).toEqual(['a', 'b', 'c']);
+});

src/color-picker.js

@@ -10,11 +10,12 @@ import {
   rgba,
   hsv2rgb,
 } from '@swiftcarrot/color-fns';
-import { rgba2hex } from './utils';
+import { rgba2hex, parseColor, onlyUnique } from './utils';
+import ColorSquare from './color-square'
 
 const KEY_ENTER = 13;
 
-const ColorPicker = ({ color, onChange, disabled }) => {
+const ColorPicker = ({ color, onChange, disabled, recommendedColors }) => {
   const { r, g, b, a, h, s, v } = color;
 
   function changeColor(color) {
@@ -70,6 +71,20 @@ const ColorPicker = ({ color, onChange, disabled }) => {
 
   return (
     <div css={styles.picker} onClick={handleClick}>
+
+      {!!recommendedColors.length && (
+        <div css={styles.recommendedColors}>
+          {onlyUnique(recommendedColors).map((recommendedColor) => (
+            <ColorSquare
+              key={recommendedColor}
+              color={recommendedColor}
+              onClick={() => !disabled && onChange(parseColor(recommendedColor))}
+              disabled={disabled}
+            />
+          ))}
+        </div>
+      )}
+
       <div css={styles.selector} style={{ backgroundColor: hueBackground }}>
         <div css={styles.gradientWhite} />
         <div css={styles.gradientDark} />
@@ -153,9 +168,7 @@ const ColorPicker = ({ color, onChange, disabled }) => {
             disabled={disabled}
           />
         </div>
-        <div
-          style={{ backgroundColor: rgbaBackground, width: 30, height: 30 }}
-        />
+        <ColorSquare color={rgbaBackground} />
       </div>
 
       <div css={styles.inputs}>
@@ -219,7 +232,8 @@ const ColorPicker = ({ color, onChange, disabled }) => {
 
 ColorPicker.defaultProps = {
   initialValue: '#5e72e4',
-  disabled: false
+  disabled: false,
+  recommendedColors: []
 };
 
 const styles = {
@@ -278,6 +292,16 @@ const styles = {
       marginTop: 4,
     },
   },
+
+  recommendedColors: {
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    paddingBottom: 10,
+    marginBottom: 10,
+    borderBottom: '1px solid #e9e9e9'
+  }
 };
 
 export default ColorPicker;

src/color-square.js

@@ -0,0 +1,38 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+const ColorSquare = ({color, onClick, disabled}) => {
+  return (
+    <div
+      onClick={onClick}
+      css={{...styles.square, ...(onClick && styles.button)}}
+      style={{ cursor: (onClick && !disabled) ? 'pointer' : 'normal' }}
+    >
+      <div css={styles.content} style={{ backgroundColor: color }} />
+    </div>
+  );
+};
+
+ColorSquare.defaultProps = {
+  onClick: undefined,
+  disabled: false,
+  recommendedColors: []
+};
+
+const styles = {
+  button: {
+    padding: 3,
+    border: '1px solid #bebebe',
+    borderRadius: 4,
+  },
+  square: {
+    display: 'flex',
+    width: 30,
+    height: 30,
+  },
+  content: {
+    flex: 1,
+  }
+};
+
+export default ColorSquare;

src/input-color.js

@@ -5,7 +5,7 @@ import Popover from '@xkit/popover';
 import ColorPicker from './color-picker';
 import { parseColor } from './utils';
 
-const InputColor = ({ initialValue, onChange, placement, disabled, ...props }) => {
+const InputColor = ({ initialValue, onChange, placement, disabled, recommendedColors, ...props }) => {
   const [color, setColor] = useState(parseColor(initialValue));
 
   useEffect(() => {
@@ -22,7 +22,14 @@ const InputColor = ({ initialValue, onChange, placement, disabled, ...props }) =
   return (
     <Popover
       placement={placement}
-      body={<ColorPicker color={color} onChange={changeColor} disabled={ disabled } />}
+      body={(
+        <ColorPicker
+          color={color}
+          onChange={changeColor}
+          disabled={disabled}
+          recommendedColors={recommendedColors}
+        />
+      )}
     >
       <span
         {...props}
@@ -55,7 +62,8 @@ const InputColor = ({ initialValue, onChange, placement, disabled, ...props }) =
 
 InputColor.defaultProps = {
   placement: 'bottom',
-  disabled: false
+  disabled: false,
+  recommendedColors: []
 };
 
 export default InputColor;

src/utils.js

@@ -31,3 +31,7 @@ export {
   rgba,
   hsv2rgb,
 } from '@swiftcarrot/color-fns';
+
+export function onlyUnique(arr) {
+  return arr.filter((value, index, self) => self.indexOf(value) === index);
+}

stories/InputColor.stories.js

@@ -39,7 +39,11 @@ export const Demo = () => {
         onChange={(e) => setInitial(e.target.value)}
       />
       <br />
-      <InputColor initialValue={initial} onChange={handleChange} />
+      <InputColor
+        initialValue={initial}
+        onChange={handleChange}
+        recommendedColors={['#000', '#babaca', '#3a1596', '#5e72e4', '#Fa2c4a', '#b24acf']}
+      />
     </div>
   );
 };