feat(controls): Create new rotate control + add to image viewer

src/lib/viewers/controls/rotate/RotateControl.scss

@@ -0,0 +1,5 @@
+@import '../styles';
+
+.bp-RotateControl {
+    @include bp-ControlButton;
+}

src/lib/viewers/controls/rotate/RotateControl.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import IconRotate24 from '../icons/IconRotate24';
+import './RotateControl.scss';
+
+export type Props = {
+    onRotateLeft: () => void;
+};
+
+export default function RotateControl({ onRotateLeft }: Props): JSX.Element {
+    return (
+        <button className="bp-RotateControl" onClick={onRotateLeft} title={__('rotate_left')} type="button">
+            <IconRotate24 />
+        </button>
+    );
+}

src/lib/viewers/controls/rotate/__tests__/RotateControl-test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import IconRotate24 from '../../icons/IconRotate24';
+import RotateControl from '../RotateControl';
+
+describe('RotateControl', () => {
+    const getWrapper = (props = {}): ShallowWrapper => shallow(<RotateControl onRotateLeft={jest.fn()} {...props} />);
+
+    describe('event handlers', () => {
+        test('should invoke onRotateLeft prop on click', () => {
+            const onRotateLeft = jest.fn();
+            const wrapper = getWrapper({ onRotateLeft });
+
+            wrapper.simulate('click');
+
+            expect(onRotateLeft).toHaveBeenCalled();
+        });
+    });
+
+    describe('render', () => {
+        test('should return a valid wrapper', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.hasClass('bp-RotateControl')).toBe(true);
+            expect(wrapper.exists(IconRotate24)).toBe(true);
+        });
+    });
+});

src/lib/viewers/controls/rotate/index.ts

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

src/lib/viewers/image/ImageControls.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import ControlsBar from '../controls/controls-bar';
 import FullscreenToggle, { Props as FullscreenToggleProps } from '../controls/fullscreen';
+import RotateControl, { Props as RotateControlProps } from '../controls/rotate';
 import ZoomControls, { Props as ZoomControlsProps } from '../controls/zoom';
 
-export type Props = FullscreenToggleProps & ZoomControlsProps;
+export type Props = FullscreenToggleProps & RotateControlProps & ZoomControlsProps;
 
-export default function ImageControls({ onFullscreenToggle, onZoomIn, onZoomOut, scale }: Props): JSX.Element {
+export default function ImageControls({
+    onFullscreenToggle,
+    onRotateLeft,
+    onZoomIn,
+    onZoomOut,
+    scale,
+}: Props): JSX.Element {
     return (
         <ControlsBar>
             <ZoomControls onZoomIn={onZoomIn} onZoomOut={onZoomOut} scale={scale} />
-            {/* TODO: RotateControl */}
+            <RotateControl onRotateLeft={onRotateLeft} />
             <FullscreenToggle onFullscreenToggle={onFullscreenToggle} />
             {/* TODO: AnnotationControls (separate group) */}
         </ControlsBar>

src/lib/viewers/image/ImageViewer.js

@@ -393,6 +393,7 @@ class ImageViewer extends ImageBaseViewer {
             this.controls.render(
                 <ImageControls
                     onFullscreenToggle={this.toggleFullscreen}
+                    onRotateLeft={this.rotateLeft}
                     onZoomIn={this.zoomIn}
                     onZoomOut={this.zoomOut}
                     scale={this.scale}

src/lib/viewers/image/__tests__/ImageViewer-test.js

@@ -424,6 +424,7 @@ describe('lib/viewers/image/ImageViewer', () => {
             expect(image.controls.render).toBeCalledWith(
                 <ImageControls
                     onFullscreenToggle={image.toggleFullscreen}
+                    onRotateLeft={image.rotateLeft}
                     onZoomIn={image.zoomIn}
                     onZoomOut={image.zoomOut}
                     scale={1}