box-ui-elements 15.0.0-beta.7 → 15.0.0

package/src/features/classification/security-controls/utils.js

@@ -1,9 +1,12 @@
 // @flow
+import * as React from 'react';
 import getProp from 'lodash/get';
 import isNil from 'lodash/isNil';
 
 import type { Controls, MessageItem } from '../flowTypes';
 
+import FormattedCompMessage from '../../../components/i18n/FormattedCompMessage';
+import Link from '../../../components/link/Link';
 import appRestrictionsMessageMap from './appRestrictionsMessageMap';
 import downloadRestrictionsMessageMap from './downloadRestrictionsMessageMap';
 import messages from './messages';
@@ -15,47 +18,41 @@ import {
     SHARED_LINK_ACCESS_LEVEL,
 } from '../constants';
 
-const { SHARED_LINK, DOWNLOAD, EXTERNAL_COLLAB, APP } = ACCESS_POLICY_RESTRICTION;
+const { SHARED_LINK, DOWNLOAD, EXTERNAL_COLLAB, APP, WATERMARK } = ACCESS_POLICY_RESTRICTION;
 const { DEFAULT, WITH_APP_LIST, WITH_OVERFLOWN_APP_LIST } = APP_RESTRICTION_MESSAGE_TYPE;
 const { DESKTOP, MOBILE, WEB } = DOWNLOAD_CONTROL;
 const { BLOCK, WHITELIST, BLACKLIST } = LIST_ACCESS_LEVEL;
 const { COLLAB_ONLY, COLLAB_AND_COMPANY_ONLY, PUBLIC } = SHARED_LINK_ACCESS_LEVEL;
 
-const getShortSecurityControlsMessage = (controls: Controls): ?MessageItem => {
-    const { sharedLink, download, externalCollab, app } = controls;
+const getShortSecurityControlsMessage = (controls: Controls): Array<MessageItem> => {
+    const items = [];
+    const { sharedLink, download, externalCollab, app, watermark } = controls;
+
     // Shared link and external collab restrictions are grouped
     // together as generic "sharing" restrictions
     const sharing = (sharedLink && sharedLink.accessLevel !== PUBLIC) || externalCollab;
 
     if (sharing && download && app) {
-        return { message: messages.shortAllRestrictions };
-    }
-
-    if (sharing && download) {
-        return { message: messages.shortSharingDownload };
-    }
-
-    if (sharing && app) {
-        return { message: messages.shortSharingApp };
-    }
-
-    if (download && app) {
-        return { message: messages.shortDownloadApp };
-    }
-
-    if (sharing) {
-        return { message: messages.shortSharing };
+        items.push({ message: messages.shortAllRestrictions });
+    } else if (sharing && download) {
+        items.push({ message: messages.shortSharingDownload });
+    } else if (sharing && app) {
+        items.push({ message: messages.shortSharingApp });
+    } else if (download && app) {
+        items.push({ message: messages.shortDownloadApp });
+    } else if (sharing) {
+        items.push({ message: messages.shortSharing });
+    } else if (download) {
+        items.push({ message: messages.shortDownload });
+    } else if (app) {
+        items.push({ message: messages.shortApp });
     }
 
-    if (download) {
-        return { message: messages.shortDownload };
+    if (watermark) {
+        items.push({ message: messages.shortWatermarking });
     }
 
-    if (app) {
-        return { message: messages.shortApp };
-    }
-
-    return null;
+    return items;
 };
 
 const getSharedLinkMessages = (controls: Controls): Array<MessageItem> => {
@@ -76,6 +73,32 @@ const getSharedLinkMessages = (controls: Controls): Array<MessageItem> => {
     return items;
 };
 
+const getWatermarkingMessages = (controls: Controls): Array<MessageItem> => {
+    const items = [];
+    const isWatermarkEnabled = getProp(controls, `${WATERMARK}.enabled`, false);
+    if (isWatermarkEnabled) {
+        const formattedCompMessage = (
+            <FormattedCompMessage
+                id="boxui.securityControls.watermarkingAppliedWithLink"
+                description="Bullet point that summarizes watermarking applied to classification"
+            >
+                Watermarking will be applied, click{' '}
+                <Link
+                    className="support-link"
+                    href="https://support.box.com/hc/en-us/articles/360044195253"
+                    target="_blank"
+                >
+                    here
+                </Link>{' '}
+                more details on Watermarking
+            </FormattedCompMessage>
+        );
+        items.push({ message: formattedCompMessage });
+    }
+
+    return items;
+};
+
 const getExternalCollabMessages = (controls: Controls): Array<MessageItem> => {
     const items = [];
     const accessLevel = getProp(controls, `${EXTERNAL_COLLAB}.accessLevel`);
@@ -191,6 +214,7 @@ const getFullSecurityControlsMessages = (controls: Controls, maxAppCount?: numbe
         ...getExternalCollabMessages(controls),
         ...getDownloadMessages(controls),
         ...getAppDownloadMessages(controls, maxAppCount),
+        ...getWatermarkingMessages(controls),
     ];
     return items;
 };

package/src/features/collapsible-sidebar/CollapsibleSidebar.js

@@ -36,6 +36,9 @@ type Props = {
 
     /** Optional HTML attributes to append to menu item */
     htmlAttributes?: Object,
+
+    /** Optionally apply "aria-hidden": "true" to CollapsibleSidebar wrapper */
+    isHidden?: boolean,
 };
 
 class CollapsibleSidebar extends React.Component<Props> {
@@ -81,18 +84,23 @@ class CollapsibleSidebar extends React.Component<Props> {
     };
 
     render() {
-        const { children, className, expanded, htmlAttributes } = this.props;
-        const classes = classNames(
+        const { children, className, expanded, isHidden, htmlAttributes } = this.props;
+        const navClasses = classNames(
             {
                 'is-expanded': expanded,
             },
             'bdl-CollapsibleSidebar',
             className,
         );
-
+        const ariaAttributes = { 'aria-hidden': isHidden ? 'true' : undefined };
         return (
-            <div className="bdl-CollapsibleSidebar-wrapper" {...htmlAttributes}>
-                <StyledNav ref={this.navRef} className={classes} onKeyDown={this.handleKeyDown}>
+            <div
+                className="bdl-CollapsibleSidebar-wrapper"
+                {...htmlAttributes}
+                {...ariaAttributes}
+                data-testid="CollapsibleSidebar-wrapper"
+            >
+                <StyledNav ref={this.navRef} className={navClasses} onKeyDown={this.handleKeyDown}>
                     {children}
                 </StyledNav>
             </div>

package/src/features/collapsible-sidebar/CollapsibleSidebar.scss

@@ -111,6 +111,12 @@ $left-sidebar-z-index: 40 !default;
     }
 }
 
+@include large-size {
+    .bdl-CollapsibleSidebar-logo {
+        margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px /* border */;
+    }
+}
+
 @include medium-minus-size {
     .bdl-CollapsibleSidebar-logo {
         .bdl-CollapsibleSidebar-toggleButton {
@@ -133,8 +139,34 @@ $left-sidebar-z-index: 40 !default;
     }
 }
 
-@include large-size {
-    .bdl-CollapsibleSidebar-logo {
-        margin-left: $collapsible-side-bar-h-padding + $bdl-grid-unit * 2 - 1px /* border */;
+@include breakpoint($medium-screen) {
+    .Body.is-responsive-web {
+        .bdl-CollapsibleSidebar-wrapper {
+            width: 0;
+        }
+
+        .bdl-CollapsibleSidebar-footer {
+            display: none;
+        }
+
+        .bdl-CollapsibleSidebar-nav ul {
+            display: none;
+            // using fixed width due to performance issues during expand transition
+            width: calc(100vw - (#{$collapsible-side-bar-h-padding} * 2));
+        }
+
+        .bdl-CollapsibleSidebar {
+            width: 0;
+            border: none;
+
+            &.is-expanded {
+                width: 100vw;
+
+                .bdl-CollapsibleSidebar-nav ul,
+                .bdl-CollapsibleSidebar-footer {
+                    display: block;
+                }
+            }
+        }
     }
 }

package/src/features/collapsible-sidebar/__tests__/CollapsibleSidebar.test.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from 'styled-components';
 
 import { mountConnected } from '../../../test-utils/enzyme';
 import CollapsibleSidebar from '../CollapsibleSidebar';
@@ -112,4 +114,37 @@ describe('components/core/collapsible-sidebar/CollapsibleSidebar', () => {
             });
         });
     });
+
+    const dummyTheme = {
+        primary: {
+            background: '',
+            foreground: '',
+            border: '',
+        },
+    };
+
+    describe('responsiveness', () => {
+        const wrapper = params =>
+            render(
+                <ThemeProvider theme={dummyTheme}>
+                    <CollapsibleSidebar isHidden={params.isHidden} />
+                </ThemeProvider>,
+            );
+
+        test.each`
+            isHidden
+            ${false}
+            ${undefined}
+        `('should NOT be hidden when isHidden is $isHidden', ({ isHidden }) => {
+            wrapper({ isHidden });
+            const CollapsibleSidebarWrapper = screen.getByTestId('CollapsibleSidebar-wrapper');
+            expect(CollapsibleSidebarWrapper).not.toHaveAttribute('aria-hidden', 'true');
+        });
+
+        test('should be hidden when isHidden is true', () => {
+            wrapper({ isHidden: true });
+            const CollapsibleSidebarWrapper = screen.getByTestId('CollapsibleSidebar-wrapper');
+            expect(CollapsibleSidebarWrapper).toHaveAttribute('aria-hidden', 'true');
+        });
+    });
 });

package/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebar.test.js.snap

@@ -3,6 +3,7 @@
 exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 1`] = `
 <div
   className="bdl-CollapsibleSidebar-wrapper"
+  data-testid="CollapsibleSidebar-wrapper"
 >
   <CollapsibleSidebar__StyledNav
     className="is-expanded bdl-CollapsibleSidebar foo"

package/src/features/content-explorer/content-explorer/ContentExplorer.scss

@@ -67,7 +67,7 @@
 
         .content-explorer-select-all-checkbox {
             float: right;
-            margin-right: -20 * $bdl-grid-unit;
+            margin-right: -21 * $bdl-grid-unit;
         }
     }
 

package/src/features/content-explorer/item-list/ItemList.js

@@ -57,6 +57,7 @@ const itemNameCellRenderer = rendererParams => {
         name && (
             <div className={TABLE_CELL_CLASS}>
                 <ItemListName
+                    itemId={id}
                     type={type}
                     name={name}
                     label={label}

package/src/features/content-explorer/item-list/ItemListName.js

@@ -9,7 +9,7 @@ import { ItemTypePropType } from '../prop-types';
 
 const ITEM_LIST_NAME_CLASS = 'item-list-name';
 
-const ItemListName = ({ type, name, label = '', isSelected = false, onClick, linkRenderer }) => {
+const ItemListName = ({ itemId = '', type, name, label = '', isSelected = false, onClick, linkRenderer }) => {
     const isFolder = type === ItemTypes.FOLDER;
 
     const linkProps = {
@@ -26,7 +26,7 @@ const ItemListName = ({ type, name, label = '', isSelected = false, onClick, lin
             />,
         ],
     };
-    const renderLink = () => (linkRenderer ? linkRenderer(linkProps) : <PlainButton {...linkProps} />);
+    const renderLink = () => (linkRenderer ? linkRenderer({ ...linkProps, itemId }) : <PlainButton {...linkProps} />);
 
     return (
         <div className="item-list-name-container">
@@ -37,6 +37,7 @@ const ItemListName = ({ type, name, label = '', isSelected = false, onClick, lin
 };
 
 ItemListName.propTypes = {
+    itemId: PropTypes.string,
     type: ItemTypePropType,
     name: PropTypes.string.isRequired,
     label: PropTypes.string,

package/src/features/content-explorer/item-list/__tests__/ItemListName.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import sinon from 'sinon';
 
 import ItemListName from '../ItemListName';
@@ -53,15 +54,28 @@ describe('features/content-explorer/item-list/ItemListName', () => {
 
     describe('linkRenderer', () => {
         test('should use linkRenderer when specified', () => {
+            const itemId = '1';
             const name = 'item';
-            const linkRenderer = () => <button type="button" className="name-test" />;
+            const linkRenderer = props => <button type="button" className={`name-${props.itemId}`} />;
+            linkRenderer.propTypes = { itemId: PropTypes.string };
             const wrapper = renderComponent({
+                itemId,
                 name,
                 type: 'folder',
                 linkRenderer,
             });
+            expect(wrapper.find(`button.name-${itemId}`)).toHaveLength(1);
+        });
 
-            expect(wrapper.find('button.name-test').length).toBe(1);
+        test('should not pass id to PlainButton', () => {
+            const itemId = 'abc'; // Must be a valid html ID for this test. wrapper.find('#1') will crash.
+            const name = 'item';
+            const wrapper = renderComponent({
+                itemId,
+                name,
+                type: 'folder',
+            });
+            expect(wrapper.find(`#${itemId}`)).toHaveLength(0);
         });
     });
 });

package/src/features/header-flyout/HeaderFlyout.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import classNames from 'classnames';
-import { Flyout, Overlay } from '../../components/flyout';
+import { Flyout, Overlay, OverlayHeader } from '../../components/flyout';
 import ScrollWrapper from '../../components/scroll-wrapper';
 import type { FlyoutProps } from '../../components/flyout/Flyout';
 
@@ -34,20 +34,16 @@ class HeaderFlyout extends React.Component<Props> {
 
         return (
             <Flyout
-                closeOnClick={false}
-                offset={HeaderFlyout.panelOffset}
                 className={classNames('header-flyout', className)}
+                closeOnClick={false}
                 constrainToWindow
+                offset={HeaderFlyout.panelOffset}
                 {...rest}
             >
                 {flyoutButton}
                 <Overlay className="header-flyout-overlay">
+                    <OverlayHeader>{header && <h4 className="header-flyout-title">{header}</h4>}</OverlayHeader>
                     <div className="header-flyout-list-container">
-                        {header && (
-                            <div className="flyout-list-container-title">
-                                <h4 className="flyout-list-title">{header}</h4>
-                            </div>
-                        )}
                         <div
                             className={classNames('flyout-list-container-body', {
                                 'with-header': !!header,

package/src/features/header-flyout/__tests__/__snapshots__/HeaderFlyout.test.js.snap

@@ -8,6 +8,7 @@ exports[`components/core/header/components/HeaderFlyout render() should include
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={true}
+  isResponsive={false}
   isVisibleByDefault={false}
   offset="-4px 0px"
   onClose={[Function]}
@@ -20,20 +21,18 @@ exports[`components/core/header/components/HeaderFlyout render() should include
   <Overlay
     className="header-flyout-overlay"
   >
+    <OverlayHeader>
+      <h4
+        className="header-flyout-title"
+      >
+        <span>
+          test header
+        </span>
+      </h4>
+    </OverlayHeader>
     <div
       className="header-flyout-list-container"
     >
-      <div
-        className="flyout-list-container-title"
-      >
-        <h4
-          className="flyout-list-title"
-        >
-          <span>
-            test header
-          </span>
-        </h4>
-      </div>
       <div
         className="flyout-list-container-body with-header with-footer"
       >
@@ -66,6 +65,7 @@ exports[`components/core/header/components/HeaderFlyout render() should render d
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={true}
+  isResponsive={false}
   isVisibleByDefault={false}
   offset="-4px 0px"
   onClose={[Function]}
@@ -78,6 +78,7 @@ exports[`components/core/header/components/HeaderFlyout render() should render d
   <Overlay
     className="header-flyout-overlay"
   >
+    <OverlayHeader />
     <div
       className="header-flyout-list-container"
     >
@@ -106,6 +107,7 @@ exports[`components/core/header/components/HeaderFlyout render() should render t
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={true}
+  isResponsive={false}
   isVisibleByDefault={false}
   offset="-4px 0px"
   openOnHover={false}
@@ -121,6 +123,7 @@ exports[`components/core/header/components/HeaderFlyout render() should render t
   <Overlay
     className="header-flyout-overlay"
   >
+    <OverlayHeader />
     <div
       className="header-flyout-list-container"
     >

package/src/features/header-flyout/styles/HeaderFlyout.scss

@@ -1,3 +1,4 @@
+@import '../../../components/flyout/variables';
 @import '../../../styles/variables';
 @import '../../../styles/mixins/overlay';
 @import './variables';
@@ -17,43 +18,35 @@
 
         padding: (2 * $flyout-header-spacer) $flyout-list-padding 0;
     }
-}
-
-.header-flyout-list-container {
-    padding: 0;
-
-    .flyout-list-container-title {
-        padding-bottom: $flyout-header-spacer;
-    }
 
-    .flyout-list-title {
+    .header-flyout-title {
         margin: 0;
+        padding-bottom: $flyout-header-spacer;
         font-size: $flyout-title-font-size;
         line-height: $flyout-title-line-height;
     }
+}
 
+.header-flyout-list-container {
     .flyout-list-container-body {
-        $title-height: $flyout-title-line-height + $flyout-header-spacer;
-        $footer-height: $flyout-title-line-height + 2 * $flyout-footer-spacer;
-
         // the overall height, minus the top and bottom padding
         height: $flyout-list-height - 2 * $flyout-list-padding;
         margin-bottom: $flyout-list-padding;
 
         &.with-header {
             // the overall height minus the padding, and header height
-            height: $flyout-list-height - (2 * $flyout-list-padding + $title-height);
+            height: $flyout-list-height - (2 * $flyout-list-padding + $flyout-title-height);
         }
 
         &.with-footer {
             // the overall height minus the padding, and the footer height
-            height: $flyout-list-height - ($flyout-list-padding + $footer-height);
+            height: $flyout-list-height - ($flyout-list-padding + $flyout-footer-height);
             margin-bottom: 0;
         }
 
         &.with-header.with-footer {
             // the overall height minus the padding, and both text hbdl-gray-50
-            height: $flyout-list-height - ($flyout-list-padding + $title-height + $footer-height);
+            height: $flyout-list-height - ($flyout-list-padding + $flyout-title-height + $flyout-footer-height);
             margin-bottom: 0;
         }
     }
@@ -69,3 +62,49 @@
         }
     }
 }
+
+@include breakpoint($medium-screen) {
+    .bdl-Flyout--responsive {
+        .header-flyout-list-container {
+            .flyout-list-container-body {
+                $header-height: $bdl-OverlayHeader-height;
+
+                height: calc(100vh - #{$header-height});
+
+                &.with-header {
+                    height: calc(100vh - #{$header-height});
+                }
+
+                &.with-footer {
+                    height: calc(100vh - #{$flyout-footer-height});
+                }
+
+                &.with-header.with-footer {
+                    height: calc(100vh - #{$header-height} - #{$flyout-footer-height});
+                }
+
+                .scroll-container {
+                    overflow-y: auto;
+
+                    .scroll-wrap-container {
+                        &::before,
+                        &::after {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            .flyout-list-container-footer {
+                height: $flyout-footer-height;
+                padding: $flyout-footer-spacer;
+            }
+        }
+
+        .header-flyout-overlay {
+            .header-flyout-title {
+                padding-bottom: 0;
+            }
+        }
+    }
+}

package/src/features/header-flyout/styles/_variables.scss

@@ -11,6 +11,10 @@ $flyout-title-line-height: 16px;
 $flyout-footer-font-size: 13px;
 $flyout-footer-line-height: 16px;
 
+// Variables for title and footer height to help calculate component height
+$flyout-title-height: $flyout-title-line-height + $flyout-header-spacer;
+$flyout-footer-height: $flyout-title-line-height + 2 * $flyout-footer-spacer;
+
 // Consumable mixins - to use with the contents of a header flyout
 @mixin header-flyout-row-padding {
     padding: 12px 0;

package/src/features/message-center/components/message-center-modal/MessageCenterModal.js

@@ -242,6 +242,7 @@ function MessageCenterModal({
                 rowCount={filteredMessages.length}
                 rowHeight={cache.rowHeight}
                 rowRenderer={rowRenderer}
+                scrollToIndex={0}
                 style={listStyle}
                 width={width - SCROLLBAR_MARGIN}
             />

package/src/features/metadata-instance-editor/__tests__/__snapshots__/TemplateDropdown.test.js.snap

@@ -8,6 +8,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render butto
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -67,6 +68,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render dropd
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -132,6 +134,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render dropd
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -197,6 +200,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render empty
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -254,6 +258,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render error
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -311,6 +316,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render loadi
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}
@@ -363,6 +369,7 @@ exports[`features/metadata-instance-editor/fields/ should correctly render plain
   closeOnWindowBlur={false}
   constrainToScrollParent={true}
   constrainToWindow={false}
+  isResponsive={false}
   isVisibleByDefault={false}
   onClose={[Function]}
   onOpen={[Function]}