feat(preview-sidebar): add modernized version of sidebar toggle button

scripts/jest/jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
     moduleNameMapper: {
         'box-ui-elements-locale-data': '<rootDir>/i18n/en-US.js',
         'box-locale-data': '<rootDir>/node_modules/@box/cldr-data/locale-data/en-US',
+        '^elements/(.*)$': '<rootDir>/src/elements/$1',
         '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
             '<rootDir>/scripts/jest/mocks/fileMock.js',
         '\\.(css|less|scss|md)$': '<rootDir>/scripts/jest/mocks/styleMock.js',

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

@@ -4,8 +4,12 @@ import classNames from 'classnames';
 import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
 
+import { IconButton } from '@box/blueprint-web';
+import { useFeatureConfig } from 'elements/common/feature-checking';
 import IconHide from '../../icons/general/IconHide';
 import IconShow from '../../icons/general/IconShow';
+import IconRightSidebarChevronOpen from '../../icons/general/IconRightSidebarChevronOpen';
+import IconRightSidebarChevronClose from '../../icons/general/IconRightSidebarChevronClose';
 import PlainButton from '../plain-button';
 import Tooltip from '../tooltip';
 
@@ -40,18 +44,49 @@ const SidebarToggleButton = ({
     });
     const tooltipPosition = direction === DIRECTION_LEFT ? 'middle-right' : 'middle-left';
 
+    const { enabled: isPreviewModernizationEnabled } = useFeatureConfig('previewModernization');
+
     const renderButton = () => {
-        if (direction === DIRECTION_LEFT) {
-            return isOpen ? <IconShow height={16} width={16} /> : <IconHide height={16} width={16} />;
+        if (isPreviewModernizationEnabled) {
+            if (direction === DIRECTION_LEFT) {
+                return (
+                    <IconButton
+                        aria-label={intlText}
+                        icon={isOpen ? IconRightSidebarChevronOpen : IconRightSidebarChevronClose}
+                        onClick={onClick}
+                        size="large"
+                        variant="high-contrast"
+                    />
+                );
+            }
+            return (
+                <IconButton
+                    aria-label={intlText}
+                    icon={isOpen ? IconRightSidebarChevronClose : IconRightSidebarChevronOpen}
+                    onClick={onClick}
+                    size="large"
+                    variant="high-contrast"
+                />
+            );
         }
-        return isOpen ? <IconHide height={16} width={16} /> : <IconShow height={16} width={16} />;
+
+        const renderIcon = () => {
+            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 (
+            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
+                {renderIcon()}
+            </PlainButton>
+        );
     };
 
     return (
         <Tooltip position={tooltipPosition} text={intlText}>
-            <PlainButton aria-label={intlText} className={classes} onClick={onClick} type="button" {...rest}>
-                {renderButton()}
-            </PlainButton>
+            {renderButton()}
         </Tooltip>
     );
 };

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

@@ -2,7 +2,19 @@ import * as React from 'react';
 
 import SidebarToggleButton from '..';
 
+jest.mock('elements/common/feature-checking', () => ({
+    useFeatureConfig: jest.fn(),
+}));
+
+const { useFeatureConfig } = require('elements/common/feature-checking');
+
+const mockUseFeatureConfig = useFeatureConfig;
+
 describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
+    beforeEach(() => {
+        mockUseFeatureConfig.mockReturnValue({ enabled: false });
+    });
+
     test('should render correctly as open', () => {
         const wrapper = mount(<SidebarToggleButton isOpen />);
 
@@ -32,4 +44,61 @@ describe('components/sidebar-toggle-button/SidebarToggleButton', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
+
+    describe('previewModernization feature enabled', () => {
+        beforeEach(() => {
+            mockUseFeatureConfig.mockReturnValue({ enabled: true });
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is open (right direction)', () => {
+            const wrapper = mount(<SidebarToggleButton isOpen />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is closed (right direction)', () => {
+            const wrapper = mount(<SidebarToggleButton isOpen={false} />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is open (left direction)', () => {
+            const wrapper = mount(<SidebarToggleButton direction="left" isOpen />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should render IconButton when previewModernization is enabled and sidebar is closed (left direction)', () => {
+            const wrapper = mount(<SidebarToggleButton direction="left" isOpen={false} />);
+
+            expect(wrapper.find('IconButton')).toHaveLength(1);
+            expect(wrapper.find('PlainButton')).toHaveLength(0);
+            expect(wrapper).toMatchSnapshot();
+        });
+
+        test('should call onClick when IconButton is clicked', () => {
+            const onClick = jest.fn();
+            const wrapper = mount(<SidebarToggleButton isOpen onClick={onClick} />);
+
+            wrapper.find('IconButton').simulate('click');
+
+            expect(onClick).toHaveBeenCalledTimes(1);
+        });
+
+        test('should render IconButton with correct props when previewModernization is enabled', () => {
+            const onClick = jest.fn();
+            const wrapper = mount(<SidebarToggleButton isOpen onClick={onClick} />);
+
+            const iconButton = wrapper.find('IconButton');
+            expect(iconButton.prop('size')).toBe('large');
+            expect(iconButton.prop('variant')).toBe('high-contrast');
+            expect(iconButton.prop('onClick')).toBe(onClick);
+        });
+    });
 });