feat(drawing): add color picker component

src/lib/viewers/controls/_styles.scss

@@ -1,5 +1,7 @@
 @import '~box-ui-elements/es/styles/variables';
 
+$bp-controls-background: fade-out($black, .2);
+
 @mixin bp-ControlButton($height: 48px, $width: 48px) {
     display: flex;
     align-items: center;

src/lib/viewers/controls/color-picker/ColorPickerControl.scss

@@ -0,0 +1,42 @@
+@import '../styles';
+
+.bp-ColorPickerControl {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.bp-ColorPickerControl-button {
+    @include bp-ControlButton;
+}
+
+.bp-ColorPickerControl-palette {
+    $arrow-height: 12px;
+
+    position: absolute;
+    top: -#{$arrow-height};
+    left: 50%;
+    z-index: 1;
+    padding-bottom: 10px;
+    transform: translate(-50%, -100%);
+
+    &::after {
+        position: absolute;
+        left: 50%;
+        display: block;
+        border-top: $arrow-height solid $bp-controls-background;
+        border-right: $arrow-height solid transparent;
+        border-left: $arrow-height solid transparent;
+        transform: translateX(-50%);
+        content: '';
+    }
+}
+
+.bp-ColorPickerControl-swatch {
+    width: 18px;
+    height: 18px;
+    background-color: $box-blue;
+    border: 2px solid #fff;
+    border-radius: 2px;
+}

src/lib/viewers/controls/color-picker/ColorPickerControl.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import ColorPickerPalette from './ColorPickerPalette';
+import { AnnotationMode } from '../annotations/types';
+import './ColorPickerControl.scss';
+
+export type Props = {
+    annotationMode?: AnnotationMode;
+    onAnnotationColorClick: (color: string) => void;
+    isActive?: boolean;
+};
+
+export default function ColorPickerControl({
+    annotationMode,
+    isActive = false,
+    onAnnotationColorClick,
+    ...rest
+}: Props): JSX.Element | null {
+    const [isColorPickerToggled, setIsColorPickerToggled] = useState(false);
+
+    if (annotationMode !== AnnotationMode.DRAWING) {
+        return null;
+    }
+
+    return (
+        <div className="bp-ColorPickerControl">
+            {isColorPickerToggled && (
+                <div className="bp-ColorPickerControl-palette">
+                    <ColorPickerPalette
+                        onColorSelect={(color: string): void => {
+                            setIsColorPickerToggled(false);
+                            onAnnotationColorClick(color);
+                        }}
+                    />
+                </div>
+            )}
+            <button
+                className={classNames('bp-ColorPickerControl-button', {
+                    'bp-is-active': isActive,
+                })}
+                onClick={(): void => setIsColorPickerToggled(!isColorPickerToggled)}
+                type="button"
+                {...rest}
+            >
+                <div className="bp-ColorPickerControl-swatch" />
+            </button>
+        </div>
+    );
+}

src/lib/viewers/controls/color-picker/ColorPickerPalette.scss

@@ -0,0 +1,26 @@
+@import '../styles';
+
+.bp-ColorPickerPalette {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 8px;
+    background: $bp-controls-background;
+    border-radius: 4px;
+}
+
+.bp-ColorPickerPalette-button {
+    width: 20px;
+    height: 20px;
+    margin: 10px 2px;
+    padding: 0;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:focus,
+    &:hover {
+        outline: 0;
+        box-shadow: 0 0 0 2px #fff;
+    }
+}

src/lib/viewers/controls/color-picker/ColorPickerPalette.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './ColorPickerPalette.scss';
+
+export type Props = {
+    onColorSelect: (color: string) => void;
+};
+
+export default function ColorPickerPalette({ onColorSelect }: Props): JSX.Element {
+    const colors = ['#0061d5', '#26c281', '#ed3757', '#f5b31b', '#ffd700', '#4826c2'];
+
+    return (
+        <div className="bp-ColorPickerPalette">
+            {colors.map(color => {
+                return (
+                    <button
+                        key={color}
+                        className="bp-ColorPickerPalette-button"
+                        onClick={(): void => onColorSelect(color)}
+                        style={{
+                            backgroundColor: color,
+                        }}
+                        type="button"
+                    />
+                );
+            })}
+        </div>
+    );
+}

src/lib/viewers/controls/color-picker/__tests__/ColorPickerControl-test.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { AnnotationMode } from '../../annotations/types';
+import ColorPickerControl from '../ColorPickerControl';
+
+describe('ColorPickerControl', () => {
+    const onAnnotationColorClick = jest.fn();
+
+    const getWrapper = (props = {}): ShallowWrapper =>
+        shallow(<ColorPickerControl onAnnotationColorClick={onAnnotationColorClick} {...props} />);
+
+    const getToggleButton = (wrapper: ShallowWrapper): ShallowWrapper => wrapper.find('.bp-ColorPickerControl-button');
+
+    describe('render', () => {
+        test('should render null if annotationMode is not AnnotationMode.DRAWING', () => {
+            const wrapper = getWrapper({ annotationMode: AnnotationMode.REGION });
+
+            expect(wrapper.isEmptyRender()).toBe(true);
+        });
+
+        test('should not render ColorPickerPalette when the component is first mounted', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.find('ColorPickerPalette').exists()).toBe(false);
+        });
+
+        test('should render ColorPickerPalette when the toggle button is clicked', () => {
+            const wrapper = getWrapper({ annotationMode: AnnotationMode.DRAWING });
+
+            getToggleButton(wrapper).simulate('click');
+
+            expect(wrapper.find('ColorPickerPalette').exists()).toBe(true);
+        });
+
+        test('should render the toggle button with bp-is-active set to true if isActive is true', () => {
+            const wrapper = getWrapper({ annotationMode: AnnotationMode.DRAWING, isActive: true });
+
+            expect(getToggleButton(wrapper).hasClass('bp-is-active')).toBe(true);
+        });
+    });
+});

src/lib/viewers/controls/color-picker/__tests__/ColorPickerPalette-test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import ColorPickerPalette from '../ColorPickerPalette';
+
+describe('ColorPickerPalette', () => {
+    const onColorSelect = jest.fn();
+
+    const getWrapper = (props = {}): ShallowWrapper =>
+        shallow(<ColorPickerPalette onColorSelect={onColorSelect} {...props} />);
+
+    describe('render', () => {
+        test('should render the six color swatches', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.find('button').length).toBe(6);
+        });
+    });
+});

src/lib/viewers/controls/color-picker/index.ts

@@ -0,0 +1,2 @@
+export * from './ColorPickerControl';
+export { default } from './ColorPickerControl';

src/lib/viewers/controls/controls-bar/ControlsBar.scss

@@ -5,4 +5,8 @@
     align-items: center;
     background: fade-out($black, .2);
     border-radius: 3px;
+
+    & + & {
+        margin-left: 6px;
+    }
 }

src/lib/viewers/doc/DocBaseViewer.js

@@ -111,6 +111,7 @@ class DocBaseViewer extends BaseViewer {
         this.emitMetric = this.emitMetric.bind(this);
         this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
         this.handleFindBarClose = this.handleFindBarClose.bind(this);
+        this.handleAnnotationColorClick = this.handleAnnotationColorClick.bind(this);
         this.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
         this.handleAnnotationControlsEscape = this.handleAnnotationControlsEscape.bind(this);
         this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
@@ -1094,6 +1095,7 @@ class DocBaseViewer extends BaseViewer {
                     hasRegion={canAnnotate}
                     maxScale={MAX_SCALE}
                     minScale={MIN_SCALE}
+                    onAnnotationColorClick={this.handleAnnotationColorClick}
                     onAnnotationModeClick={this.handleAnnotationControlsClick}
                     onAnnotationModeEscape={this.handleAnnotationControlsEscape}
                     onFindBarToggle={this.toggleFindBar}
@@ -1669,6 +1671,10 @@ class DocBaseViewer extends BaseViewer {
         }
     }
 
+    handleAnnotationColorClick() {
+        // TODO: Will implement in a separate PR
+    }
+
     handleAnnotationControlsClick({ mode }) {
         const nextMode = this.annotationControlsFSM.transition(AnnotationInput.CLICK, mode);
         this.annotator.toggleAnnotationMode(

src/lib/viewers/doc/DocControls.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import AnnotationsControls, { Props as AnnotationsControlsProps } from '../controls/annotations';
+import ColorPickerControl, { Props as ColorPickerControlProps } from '../controls/color-picker';
 import ControlsBar from '../controls/controls-bar';
 import FindBarToggle, { Props as FindBarToggleProps } from '../controls/findbar';
 import FullscreenToggle, { Props as FullscreenToggleProps } from '../controls/fullscreen';
@@ -8,6 +9,7 @@ import ThumbnailsToggle, { Props as ThumbnailsToggleProps } from '../controls/si
 import ZoomControls, { Props as ZoomControlsProps } from '../controls/zoom';
 
 export type Props = AnnotationsControlsProps &
+    ColorPickerControlProps &
     FindBarToggleProps &
     FullscreenToggleProps &
     PageControlsProps &
@@ -21,6 +23,7 @@ export default function DocControls({
     hasRegion,
     maxScale,
     minScale,
+    onAnnotationColorClick,
     onAnnotationModeClick,
     onAnnotationModeEscape,
     onFindBarToggle,
@@ -35,31 +38,36 @@ export default function DocControls({
     scale,
 }: Props): JSX.Element {
     return (
-        <ControlsBar>
-            <ThumbnailsToggle onThumbnailsToggle={onThumbnailsToggle} />
-            <FindBarToggle onFindBarToggle={onFindBarToggle} />
-            <ZoomControls
-                maxScale={maxScale}
-                minScale={minScale}
-                onZoomIn={onZoomIn}
-                onZoomOut={onZoomOut}
-                scale={scale}
-            />
-            <PageControls
-                onPageChange={onPageChange}
-                onPageSubmit={onPageSubmit}
-                pageCount={pageCount}
-                pageNumber={pageNumber}
-            />
-            <FullscreenToggle onFullscreenToggle={onFullscreenToggle} />
-            <AnnotationsControls
-                annotationMode={annotationMode}
-                hasDrawing={hasDrawing}
-                hasHighlight={hasHighlight}
-                hasRegion={hasRegion}
-                onAnnotationModeClick={onAnnotationModeClick}
-                onAnnotationModeEscape={onAnnotationModeEscape}
-            />
-        </ControlsBar>
+        <>
+            <ControlsBar>
+                <ThumbnailsToggle onThumbnailsToggle={onThumbnailsToggle} />
+                <FindBarToggle onFindBarToggle={onFindBarToggle} />
+                <ZoomControls
+                    maxScale={maxScale}
+                    minScale={minScale}
+                    onZoomIn={onZoomIn}
+                    onZoomOut={onZoomOut}
+                    scale={scale}
+                />
+                <PageControls
+                    onPageChange={onPageChange}
+                    onPageSubmit={onPageSubmit}
+                    pageCount={pageCount}
+                    pageNumber={pageNumber}
+                />
+                <FullscreenToggle onFullscreenToggle={onFullscreenToggle} />
+                <AnnotationsControls
+                    annotationMode={annotationMode}
+                    hasDrawing={hasDrawing}
+                    hasHighlight={hasHighlight}
+                    hasRegion={hasRegion}
+                    onAnnotationModeClick={onAnnotationModeClick}
+                    onAnnotationModeEscape={onAnnotationModeEscape}
+                />
+            </ControlsBar>
+            <ControlsBar>
+                <ColorPickerControl annotationMode={annotationMode} onAnnotationColorClick={onAnnotationColorClick} />
+            </ControlsBar>
+        </>
     );
 }

src/lib/viewers/doc/__tests__/DocBaseViewer-test.js

@@ -1725,6 +1725,7 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                         hasRegion={false}
                         maxScale={10}
                         minScale={0.1}
+                        onAnnotationColorClick={docBase.handleAnnotationColorClick}
                         onAnnotationModeClick={docBase.handleAnnotationControlsClick}
                         onAnnotationModeEscape={docBase.handleAnnotationControlsEscape}
                         onFindBarToggle={docBase.toggleFindBar}