feat(drawing): add color picker component

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

@@ -0,0 +1,46 @@
+.bp-ColorPickerPalette {
+    position: absolute;
+    left: -55px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 35px;
+    margin-bottom: 125px;
+    background: inherit;
+    border-radius: 5px;
+
+    &::after {
+        position: absolute;
+        top: 75%;
+        width: 18px;
+        height: 18px;
+        background: inherit;
+        border-radius: 0 0 0 6px;
+        transform: rotate(-45deg);
+        content: '';
+        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+    }
+}
+
+.bp-ColorPickerPalette-button {
+    width: 20px;
+    height: 20px;
+    margin-right: 2px;
+    margin-left: 2px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:first-child {
+        margin-left: 8px;
+    }
+
+    &:hover {
+        box-shadow: 0 0 0 2px white;
+    }
+
+    &:last-child {
+        margin-right: 8px;
+    }
+}

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

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

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

@@ -0,0 +1,21 @@
+@import '~box-ui-elements/es/styles/variables';
+@import '../styles';
+
+.bp-ColorPickerToggle {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+}
+
+.bp-ColorPickerToggle-button {
+    @include bp-ControlButton;
+
+    svg {
+        background-color: #0061d5;
+        border-radius: 2px;
+        box-shadow: 0 0 0 2px white;
+    }
+}

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

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

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

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

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

@@ -6,3 +6,7 @@
     background: fade-out($black, .2);
     border-radius: 3px;
 }
+
+.bp-ControlsBar ~ .bp-ControlsBar {
+    margin-left: 6px;
+}

src/lib/viewers/doc/DocControls.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import AnnotationsControls, { Props as AnnotationsControlsProps } from '../controls/annotations';
+import ColorPickerToggle, { Props as ColorPickerToggleProps } 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 &
+    ColorPickerToggleProps &
     FindBarToggleProps &
     FullscreenToggleProps &
     PageControlsProps &
@@ -35,31 +37,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>
+                <ColorPickerToggle annotationMode={annotationMode} />
+            </ControlsBar>
+        </>
     );
 }