feat(sidebar): Toggle button (#1268)

* feat(sidebar): Toggle button

* chore: PR comments and add unit tests

* chore: fix classes

* chore: add e2e tests

* chore: update README.md

* chore: decouple resin tags from data testids

Author: Conrad Chan

src/components/sidebar-toggle-button/README.md

@@ -0,0 +1,14 @@
+### Examples
+**Open**
+```js
+<SidebarToggleButton isOpen/>
+```
+**Closed**
+```js
+<SidebarToggleButton isOpen={false}/>
+```
+**When sidebar is on the left, change the direction**
+```js
+<SidebarToggleButton direction="left" isOpen/>
+```
+

src/components/sidebar-toggle-button/SidebarToggleButton.js

@@ -0,0 +1,57 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+import { injectIntl } from 'react-intl';
+
+import IconHide from '../../icons/general/IconHide';
+import IconShow from '../../icons/general/IconShow';
+import PlainButton from '../plain-button';
+import Tooltip from '../tooltip';
+
+import messages from '../../elements/common/messages';
+
+import './SidebarToggleButton.scss';
+
+const DIRECTION_LEFT = 'left';
+const DIRECTION_RIGHT = 'right';
+
+type Props = {
+    className?: string,
+    direction?: string,
+    isOpen: boolean,
+    onClick?: Function,
+} & InjectIntlProvidedProps;
+
+const SidebarToggleButton = ({
+    className = '',
+    direction = DIRECTION_RIGHT,
+    intl,
+    isOpen,
+    onClick,
+    ...rest
+}: Props) => {
+    const isCollapsed = !isOpen ? 'collapsed' : '';
+    const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow;
+    const intlText = intl.formatMessage(intlMessage);
+    const classes = classNames(className, 'bdl-SidebarToggleButton', {
+        'bdl-is-collapsed': isCollapsed,
+    });
+    const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
+
+    const renderButton = () => {
+        if (direction === DIRECTION_LEFT) {
+            return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
+        }
+        return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
+    };
+
+    return (
+        <Tooltip position={tooltipPosition} text={intlText}>
+            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                {renderButton()}
+            </PlainButton>
+        </Tooltip>
+    );
+};
+
+export default injectIntl(SidebarToggleButton);

src/components/sidebar-toggle-button/SidebarToggleButton.scss

@@ -0,0 +1,29 @@
+@import '../../styles/variables';
+
+.bdl-SidebarToggleButton {
+    border-radius: $bdl-border-radius-size;
+    margin: 0 3px;
+    padding: 4px;
+
+    path {
+        fill: $bdl-gray-50;
+    }
+
+    &:not(.is-disabled):hover {
+        background-color: $bdl-gray-05;
+    }
+
+    &:not(.is-disabled):focus {
+        border-color: #96a0a6;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    }
+
+    &.bdl-is-collapsed,
+    &.bdl-is-collapsed:hover {
+        background-color: $bdl-box-blue;
+
+        path {
+            fill: $white;
+        }
+    }
+}

src/components/sidebar-toggle-button/__tests__/SidebarToggleButton-test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import SidebarToggleButton from '..';
+
+describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
+    test('should render correctly as open', () => {
+        const wrapper = mount(<SidebarToggleButton isOpen />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render correctly as closed', () => {
+        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should have the proper class when it is collapsed', () => {
+        const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+
+        expect(wrapper.find('PlainButton').hasClass('bdl-is-collapsed')).toBeTruthy();
+    });
+
+    test('should render correctly as left oriented toggle when open', () => {
+        const wrapper = mount(<SidebarToggleButton direction="left" isOpen />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    test('should render correctly as left oriented toggle when closed', () => {
+        const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />);
+
+        expect(wrapper).toMatchSnapshot();
+    });
+});