feat(InputColor): New ColorPicker base component, major overhaul of InputColor (#2013)

* Initial commit

* Utilized basic hsv to string conversion functions from color_format_utils

* Added color prop to accept color state piece

* Added handle to HueSlider

* Added handle to SaturationAndLightnessPreview

* Fixed react preemptive state update bug

* Added drag to HueSlider

* Added drag handler to SaturationAndLightnessPreview

* Removed Box from story

* Added proper click + grab behavior to HueSlider
- Also proper cursor styling

* Added point and grab to Preview element

* Fixed "too many classes generated" bug

* Renamed Light and Saturation preview component

* Moved HueSlider and LightSaturationPreview into InputColor

* Removed LuminositySlider code

* Removed all mentions of ColorWheel code

* Revert "Removed LuminositySlider code"

This reverts commit 07eda61.

* Fixed imports in HueSlider and LSPreview

* Removed unnecessary color and backgroundColor props

* Added ColorPicker component

* Updated InputColor tests

* Reexported ColorWheel and LuminositySlider to fix gatsby

* Luke feedback

* Added comments about transform math

* Removed LuminositySlider and ColorWheel components

* Moved used util functions to separate files

* Renamed color_utils to isValidColor

* Renamed color_utils.test to toPercent.test

* Removed unused color format util functions

* Fixed spelling error on simpleHsvToFormattedColorString name

* Be gone ColorWheel docs

* Remove unused utils & attributes

* Fixed HueSlider color and moved Handle2d to own file

* HueSlider - Removed SLIDER_HEIGHT

* Consolidated HANDLE_HEIGHT and WIDTH to HANDLE_SIZE in Handle2d

* Consolidated types for ColorPicker, HueSlider and LightSatPreview

* Consolidated width to originate from InputColor ColorPicker element

* Moved HueSliderHandle to own file

* DRY-ed up Handle and Handle2d

* Renamed handleClick to handleMouseDown
- Less confusing since this is fed to onMouseDown in div element

* Proposed InputColor test and fix

* Revert "Proposed InputColor test and fix"

This reverts commit 5d033bf.

* Added InputColor click test

* Added blur focus test to InputColor

* Added xtest for InputColor drag event

Co-authored-by: Luke Bowerman <[email protected]>

Author: Elliot

config/all-components.csv

@@ -35,7 +35,7 @@ CheckboxGroup,component
 Chip,component
 Code,component
 CodeBlock,component
-ColorWheel,component
+ColorPicker, component
 Comboxbox,component
 ComboxboxInput,component
 ComboxboxList,component
@@ -111,7 +111,6 @@ Layout,component
 Link,component
 List,component
 ListItem,component
-LuminositySlider,component
 Menu,component
 MenuItem,component
 MenuList,component

…puts/InputColor/utils/math_utils.test.ts …s/InputColor/ColorPicker/ColorPicker.tsxpackages/components/src/Form/Inputs/InputColor/utils/math_utils.test.ts renamed to packages/components/src/Form/Inputs/InputColor/ColorPicker/ColorPicker.tsx packages/components/src/Form/Inputs/InputColor/utils/math_utils.test.ts renamed to packages/components/src/Form/Inputs/InputColor/ColorPicker/ColorPicker.tsx

@@ -24,19 +24,17 @@
 
  */
 
-import { toPercent } from './math_utils'
-
-describe('math_utils', () => {
-  const correctValues = [60, 24, 10, 13, 25]
-  test('toPercent', () => {
-    ;[
-      [60, 100],
-      [60, 255],
-      [25, 255],
-      [32, 255],
-      [96, 384],
-    ].map((values, index) =>
-      expect(toPercent(values[0], values[1])).toBe(correctValues[index])
-    )
-  })
-})
+import React, { FC } from 'react'
+import styled from 'styled-components'
+import { SpaceVertical } from '../../../../Layout'
+import { LightSaturationPreview, HueSlider } from '..'
+import { ColorPickerProps } from '../types'
+
+const ColorPickerInternal: FC<ColorPickerProps> = ({ hsv, setHsv, width }) => (
+  <SpaceVertical gap="medium" data-testid="color-picker">
+    <LightSaturationPreview hsv={hsv} setHsv={setHsv} width={width} />
+    <HueSlider hsv={hsv} setHsv={setHsv} width={width} />
+  </SpaceVertical>
+)
+
+export const ColorPicker = styled(ColorPickerInternal)``

…rm/Inputs/InputColor/utils/math_utils.ts …/Inputs/InputColor/ColorPicker/index.tsxpackages/components/src/Form/Inputs/InputColor/utils/math_utils.ts renamed to packages/components/src/Form/Inputs/InputColor/ColorPicker/index.tsx packages/components/src/Form/Inputs/InputColor/utils/math_utils.ts renamed to packages/components/src/Form/Inputs/InputColor/ColorPicker/index.tsx

@@ -24,8 +24,4 @@
 
  */
 
-/**
- * Utility to convert a numerical value to a percent given the value and a max value.
- */
-export const toPercent = (value: number, maxValue: number) =>
-  Math.round((value / maxValue) * 100)
+export * from './ColorPicker'