feat(sidebar): Toggle button

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

@@ -0,0 +1,12 @@
+### Examples
+**Open**
+```js
+const isOpen = true;
+<SidebarToggleButton isOpen={isOpen}/>
+```
+**Closed**
+```js
+const isOpen = true;
+<SidebarToggleButton isOpen={isOpen}/>
+```
+

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

@@ -0,0 +1,38 @@
+// @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';
+
+type Props = {
+    isOpen: Boolean,
+    onClick?: Function,
+} & InjectIntlProvidedProps;
+
+const SidebarToggleButton = ({ intl, isOpen, onClick, ...rest }: Props) => {
+    const isCollapsed = !isOpen ? 'collapsed' : '';
+    const intlMessage = isOpen ? messages.sidebarHide : messages.sidebarShow;
+    const intlText = intl.formatMessage(intlMessage);
+    const classes = classNames({
+        'bdl-SidebarToggleButton': true,
+        'bdl-is-collapsed': isCollapsed,
+    });
+
+    return (
+        <Tooltip position="middle-left" text={intlText}>
+            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                {isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />}
+            </PlainButton>
+        </Tooltip>
+    );
+};
+
+export default injectIntl(SidebarToggleButton);

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

@@ -0,0 +1,33 @@
+@import '../../styles/variables';
+
+.bdl-SidebarToggleButton,
+.bdl-SidebarToggleButton:hover,
+.bdl-SidebarToggleButton:active,
+.bdl-SidebarToggleButton:focus {
+    border-radius: $bdl-border-radius-size;
+    height: 24px;
+    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/index.js

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

src/elements/content-sidebar/SidebarNav.js

@@ -10,6 +10,7 @@ import IconMagicWand from '../../icons/general/IconMagicWand';
 import IconMetadataThick from '../../icons/general/IconMetadataThick';
 import IconDocInfo from '../../icons/general/IconDocInfo';
 import IconChatRound from '../../icons/general/IconChatRound';
+import SidebarToggleButton from '../../components/sidebar-toggle-button';
 import messages from '../common/messages';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 import SidebarNavButton from './SidebarNavButton';
@@ -46,52 +47,64 @@ const SidebarNav = ({
     isOpen,
     onNavigate,
 }: Props) => (
-    <div aria-label={intl.formatMessage(messages.sidebarNavLabel)} role="tablist">
-        {hasActivity && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.ACTIVITY}
+    <div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)} role="tablist">
+        <div className="bcs-SidebarNav-tabs">
+            {hasActivity && (
+                <SidebarNavButton
+                    interactionTarget={SIDEBAR_NAV_TARGETS.ACTIVITY}
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_ACTIVITY}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarActivityTitle} />}
+                >
+                    <IconChatRound />
+                </SidebarNavButton>
+            )}
+            {hasDetails && (
+                <SidebarNavButton
+                    interactionTarget={SIDEBAR_NAV_TARGETS.DETAILS}
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_DETAILS}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarDetailsTitle} />}
+                >
+                    <IconDocInfo />
+                </SidebarNavButton>
+            )}
+            {hasSkills && (
+                <SidebarNavButton
+                    interactionTarget={SIDEBAR_NAV_TARGETS.SKILLS}
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_SKILLS}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarSkillsTitle} />}
+                >
+                    <IconMagicWand />
+                </SidebarNavButton>
+            )}
+            {hasMetadata && (
+                <SidebarNavButton
+                    interactionTarget={SIDEBAR_NAV_TARGETS.METADATA}
+                    isOpen={isOpen}
+                    sidebarView={SIDEBAR_VIEW_METADATA}
+                    onNavigate={onNavigate}
+                    tooltip={<FormattedMessage {...messages.sidebarMetadataTitle} />}
+                >
+                    <IconMetadataThick />
+                </SidebarNavButton>
+            )}
+            {hasAdditionalTabs && <AdditionalTabs key={fileId} tabs={additionalTabs} />}
+        </div>
+        <div className="bcs-SidebarNav-toggle">
+            <SidebarToggleButton
                 isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_ACTIVITY}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarActivityTitle} />}
-            >
-                <IconChatRound />
-            </SidebarNavButton>
-        )}
-        {hasDetails && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.DETAILS}
-                isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_DETAILS}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarDetailsTitle} />}
-            >
-                <IconDocInfo />
-            </SidebarNavButton>
-        )}
-        {hasSkills && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.SKILLS}
-                isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_SKILLS}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarSkillsTitle} />}
-            >
-                <IconMagicWand />
-            </SidebarNavButton>
-        )}
-        {hasMetadata && (
-            <SidebarNavButton
-                interactionTarget={SIDEBAR_NAV_TARGETS.METADATA}
-                isOpen={isOpen}
-                sidebarView={SIDEBAR_VIEW_METADATA}
-                onNavigate={onNavigate}
-                tooltip={<FormattedMessage {...messages.sidebarMetadataTitle} />}
-            >
-                <IconMetadataThick />
-            </SidebarNavButton>
-        )}
-        {hasAdditionalTabs && <AdditionalTabs key={fileId} tabs={additionalTabs} />}
+                onClick={event => {
+                    if (onNavigate) {
+                        onNavigate(event, { isToggle: true });
+                    }
+                }}
+            />
+        </div>
     </div>
 );
 

src/elements/content-sidebar/SidebarNav.scss

@@ -1,7 +1,17 @@
 @import '../common/variables';
 
 .bcs {
-    nav {
+    .bcs-SidebarNav {
         border-left: 1px solid $off-white;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .bcs-SidebarNav-toggle {
+        align-items: center;
+        display: flex;
+        height: 60px;
+        justify-content: center;
     }
 }