box-ui-elements 14.0.0 → 14.1.0-beta.11

package/src/elements/content-uploader/__tests__/ItemList.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED, STATUS_COMPLETE, STATUS_ERROR } from '../../../constants';
+import ItemList from '../ItemList';
+
+jest.mock('@box/react-virtualized/dist/es/AutoSizer', () => ({ children }) => children({ height: 600, width: 600 }));
+
+describe('elements/content-uploader/ItemList', () => {
+    const renderComponent = props => mount(<ItemList items={[]} onClick={() => {}} {...props} />);
+
+    describe('render()', () => {
+        test('should render default component', () => {
+            const wrapper = renderComponent();
+
+            expect(wrapper.find('Table').length).toBe(1);
+            expect(wrapper.find('Table.bcu-item-list').length).toBe(1);
+        });
+
+        test('should render component with correct number of items', () => {
+            const items = [
+                { id: '1', name: 'item1', status: STATUS_COMPLETE },
+                { id: '2', name: 'item2', status: STATUS_COMPLETE },
+                { id: '3', name: 'item3', status: STATUS_COMPLETE },
+            ];
+            const wrapper = renderComponent({ items });
+            expect(wrapper.find('div.bcu-item-row').length).toBe(3);
+            const actionColumnStyle = wrapper
+                .find('.bcu-item-list-action-column')
+                .first()
+                .prop('style');
+            expect(actionColumnStyle.flex).toEqual('0 0 25px');
+        });
+
+        test('should render action column with correct width for upgrade cta', () => {
+            const items = [
+                { id: '1', name: 'item1', status: STATUS_ERROR, code: ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED },
+            ];
+            const wrapper = renderComponent({ items, onUpgradeCTAClick: () => {} });
+            expect(wrapper.find('div.bcu-item-row').length).toBe(1);
+            const actionColumnStyle = wrapper.find('.bcu-item-list-action-column').prop('style');
+            expect(actionColumnStyle.flex).toEqual('0 0 100px');
+        });
+    });
+});

package/src/elements/content-uploader/actionCellRenderer.js

@@ -11,6 +11,13 @@ type Props = {
     rowData: UploadItem,
 };
 
-export default (isResumableUploadsEnabled: boolean, onClick: Function) => ({ rowData }: Props) => (
-    <ItemAction {...rowData} isResumableUploadsEnabled={isResumableUploadsEnabled} onClick={() => onClick(rowData)} />
+export default (isResumableUploadsEnabled: boolean, onClick: Function, onUpgradeCTAClick?: Function) => ({
+    rowData,
+}: Props) => (
+    <ItemAction
+        {...rowData}
+        isResumableUploadsEnabled={isResumableUploadsEnabled}
+        onClick={() => onClick(rowData)}
+        onUpgradeCTAClick={onUpgradeCTAClick}
+    />
 );

package/src/elements/content-uploader/progressCellRenderer.js

@@ -35,11 +35,14 @@ type Props = {
  * @param {string} [itemName]
  * @returns {FormattedMessage}
  */
-const getErrorMessage = (errorCode: ?string, itemName: ?string) => {
+const getErrorMessage = (errorCode: ?string, itemName: ?string, shouldShowUpgradeCTAMessage?: boolean) => {
     switch (errorCode) {
         case ERROR_CODE_UPLOAD_CHILD_FOLDER_FAILED:
             return <FormattedMessage {...messages.uploadsOneOrMoreChildFoldersFailedToUploadMessage} />;
         case ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED:
+            if (shouldShowUpgradeCTAMessage) {
+                return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta} />;
+            }
             return <FormattedMessage {...messages.uploadsFileSizeLimitExceededErrorMessage} />;
         case ERROR_CODE_ITEM_NAME_IN_USE:
             return <FormattedMessage {...messages.uploadsItemNameInUseErrorMessage} />;
@@ -58,7 +61,7 @@ const getErrorMessage = (errorCode: ?string, itemName: ?string) => {
     }
 };
 
-export default () => ({ rowData }: Props) => {
+export default (shouldShowUpgradeCTAMessage?: boolean) => ({ rowData }: Props) => {
     const { status, error = {}, name, isFolder, file } = rowData;
     const { code } = error;
 
@@ -74,7 +77,7 @@ export default () => ({ rowData }: Props) => {
             if (Browser.isSafari() && code === ERROR_CODE_UPLOAD_BAD_DIGEST && file.name.indexOf('.zip') !== -1) {
                 return getErrorMessage(ERROR_CODE_UPLOAD_FAILED_PACKAGE, file.name);
             }
-            return getErrorMessage(code, name);
+            return getErrorMessage(code, name, shouldShowUpgradeCTAMessage);
         default:
             return null;
     }

package/src/features/collaborator-avatars/CollaboratorList.scss

@@ -7,7 +7,7 @@
         margin: 0;
         overflow-y: scroll;
         border: solid 1px $bdl-gray-20;
-        border-radius: 4px;
+        border-radius: $bdl-border-radius-size;
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .08) inset;
     }
 }

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

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
-import { bdlGridUnit } from '../../styles/variables';
+import { bdlGridUnit, bdlBorderRadiusSizeLarge } from '../../styles/variables';
 import Logo from '../../icon/logo/BoxLogo';
 import PlainButton from '../../components/plain-button/PlainButton';
 import LinkBase from '../../components/link/LinkBase';
@@ -18,7 +18,7 @@ import messages from './messages';
 const StyledLogo = styled(Logo)`
     padding: ${bdlGridUnit};
     border: 1px solid transparent;
-    border-radius: 8px;
+    border-radius: ${bdlBorderRadiusSizeLarge};
 
     & path,
     & .fill-color {
@@ -51,7 +51,7 @@ const StyledToggleButton = styled(PlainButton)`
         border-color: transparent;
         border-style: solid;
         border-width: 1px;
-        border-radius: 8px; /* we don't have unitless variables to multiply in JS yet */
+        border-radius: ${bdlBorderRadiusSizeLarge};
     }
 
     &:focus {

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

@@ -94,12 +94,12 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 1`] = `
         >
           <PlainButton
             aria-label="Collapse"
-            className="CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 ehAKgQ bdl-CollapsibleSidebar-toggleButton"
+            className="CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 grnFTv bdl-CollapsibleSidebar-toggleButton"
             type="button"
           >
             <button
               aria-label="Collapse"
-              className="btn-plain CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 ehAKgQ bdl-CollapsibleSidebar-toggleButton"
+              className="btn-plain CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 grnFTv bdl-CollapsibleSidebar-toggleButton"
               type="button"
             >
               <CollapsibleSidebarLogo__StyledIconHamburger
@@ -155,19 +155,19 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 1`] = `
               width={71}
             >
               <BoxLogo
-                className="CollapsibleSidebarLogo__StyledLogo-sc-6amevi-0 jTcBgl bdl-CollapsibleSidebar-logoIcon"
+                className="CollapsibleSidebarLogo__StyledLogo-sc-6amevi-0 fwAwTE bdl-CollapsibleSidebar-logoIcon"
                 height={42}
                 width={71}
               >
                 <AccessibleSVG
-                  className="CollapsibleSidebarLogo__StyledLogo-sc-6amevi-0 jTcBgl bdl-CollapsibleSidebar-logoIcon"
+                  className="CollapsibleSidebarLogo__StyledLogo-sc-6amevi-0 fwAwTE bdl-CollapsibleSidebar-logoIcon"
                   height={42}
                   viewBox="0 0 461 244"
                   width={71}
                 >
                   <svg
                     aria-hidden="true"
-                    className="CollapsibleSidebarLogo__StyledLogo-sc-6amevi-0 jTcBgl bdl-CollapsibleSidebar-logoIcon"
+                    className="CollapsibleSidebarLogo__StyledLogo-sc-6amevi-0 fwAwTE bdl-CollapsibleSidebar-logoIcon"
                     focusable="false"
                     height={42}
                     role="presentation"
@@ -262,12 +262,12 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 2`] = `
           >
             <PlainButton
               aria-label="Expand"
-              className="CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 ehAKgQ bdl-CollapsibleSidebar-toggleButton"
+              className="CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 grnFTv bdl-CollapsibleSidebar-toggleButton"
               type="button"
             >
               <button
                 aria-label="Expand"
-                className="btn-plain CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 ehAKgQ bdl-CollapsibleSidebar-toggleButton"
+                className="btn-plain CollapsibleSidebarLogo__StyledToggleButton-sc-6amevi-2 grnFTv bdl-CollapsibleSidebar-toggleButton"
                 type="button"
               >
                 <CollapsibleSidebarLogo__StyledIconHamburger

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

@@ -1,4 +1,5 @@
 @import '../../../styles/variables';
+@import '../../../styles/mixins/buttons';
 
 .content-explorer {
     .content-explorer-search-new-folder-container {
@@ -86,6 +87,10 @@
         padding-top: 20px;
         border-top: 1px solid $bdl-gray-10;
 
+        .btn {
+            @include bdl-Button--large;
+        }
+
         .status-message {
             position: absolute;
             left: 0;

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

@@ -78,6 +78,6 @@
         width: 75%;
         height: 12px;
         background-color: $bdl-gray-30;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
     }
 }

package/src/features/left-sidebar/styles/LeftSidebarDropWrapper.scss

@@ -21,7 +21,7 @@
         margin: 0;
         background-color: rgba($hover-blue-background, .75);
         border: 1px dashed $bdl-box-blue;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
     }
 
     .left-sidebar-drop-wrapper-text {

package/src/features/left-sidebar/styles/LeftSidebarLinkCallout.scss

@@ -11,7 +11,7 @@ $arrow-size: 6px;
     word-wrap: break-word;
     background-color: $bdl-dark-blue;
     border-color: $bdl-dark-blue;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 
     &::before {
         position: absolute;
@@ -74,7 +74,7 @@ $arrow-size: 6px;
 
         .left-nav-callout-button {
             padding: 10px;
-            border-radius: 4px;
+            border-radius: $bdl-border-radius-size;
         }
 
         .left-nav-callout-secondary-button {

package/src/features/message-preview-content/styles/PreviewErrorNotification.scss

@@ -8,7 +8,7 @@
     width: 100%;
     height: 100%;
     background-image: linear-gradient(to left, $bdl-gray-02, $bdl-gray-05 14%);
-    border-radius: 8px;
+    border-radius: $bdl-border-radius-size-large;
 }
 
 .PreviewErrorNotification-image {

package/src/features/metadata-based-view/MetadataBasedItemList.scss

@@ -44,7 +44,7 @@ $bdl-MetadataBasedItemList-insetShadowRight: 3px 0 3px -2px $bdl-gray-10 inset;
     height: 32px;
     background-color: $white;
     border: 1px solid $bdl-gray-20;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     .bdl-MetadataBasedItemList-cell--cancelIcon,
     .bdl-MetadataBasedItemList-cell--saveIcon {

package/src/features/metadata-instance-editor/CascadePolicy.scss

@@ -8,14 +8,14 @@ $cascade-policy-background: #f1e2fd;
     color: $bdl-gray;
     background-color: $cascade-policy-background;
     border: none;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 }
 
 .metadata-cascade-editor {
     color: $bdl-gray;
     background-color: $bdl-gray-05;
     border: none;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 
     hr {
         display: block;

package/src/features/metadata-instance-editor/CustomInstanceNewField.scss

@@ -3,7 +3,7 @@
 .custom-new-field {
     padding: 10px 25px 20px;
     background-color: $bdl-gray-10;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     .text-input-container {
         flex: 1;

package/src/features/metadata-instance-editor/Instance.scss

@@ -30,7 +30,7 @@
     justify-content: center;
     width: 24px;
     height: 24px;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size;
 
     &:hover svg path {
         fill: $bdl-gray;

package/src/features/metadata-instance-editor/TemplateDropdown.scss

@@ -15,7 +15,7 @@
         padding: 0;
         overflow: hidden;
         border: 1px solid $bdl-gray-30;
-        border-radius: 4px;
+        border-radius: $bdl-border-radius-size-med;
     }
 
     ul.overlay {
@@ -32,7 +32,7 @@
         .overlay-wrapper {
             overflow: hidden;
             border-top: none;
-            border-radius: 0 0 4px 4px;
+            border-radius: 0 0 $bdl-border-radius-size-med $bdl-border-radius-size-med;
 
             // NOTE (cwei): targets ie11
             @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@@ -90,7 +90,7 @@
             margin: 0;
             padding: 10px 12px 12px;
             border-bottom: 1px solid $bdl-gray-30;
-            border-radius: 4px 4px 0 0;
+            border-radius: $bdl-border-radius-size-med $bdl-border-radius-size-med 0 0;
 
             .action-button {
                 .clear-button {
@@ -153,7 +153,7 @@
         background-color: $white;
         border: 1px solid $bdl-gray-30;
         border-top-color: transparent;
-        border-radius: 0 0 4px 4px;
+        border-radius: 0 0 $bdl-border-radius-size-med $bdl-border-radius-size-med;
 
         &.template-dropdown-loading-indicator {
             display: flex;

package/src/features/query-bar/styles/Condition.scss

@@ -8,7 +8,7 @@
     margin-top: auto;
     padding: 8px;
     border: 1px solid #d2d2d2;
-    border-radius: 5px;
+    border-radius: $bdl-border-radius-size-med;
     box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .05);
 }
 
@@ -68,7 +68,7 @@
             .bdl-SelectButton,
             .select-button {
                 width: 160px;
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
 
             .bdl-SelectButton.placeholder,
@@ -92,7 +92,7 @@
 
             .bdl-SelectButton,
             .select-button {
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
         }
     }
@@ -144,7 +144,7 @@
             .bdl-SelectButton,
             .select-button {
                 width: 160px;
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
 
             .bdl-SelectButton.placeholder,

package/src/features/query-bar/styles/QueryBarButtons.scss

@@ -116,7 +116,7 @@ $query-bar-button-width: 240px;
                 color: $white;
                 background-color: $bdl-box-blue;
                 border: none;
-                border-radius: 5px;
+                border-radius: $bdl-border-radius-size-med;
             }
         }
     }

package/src/features/quick-search/QuickSearch.scss

@@ -9,13 +9,10 @@
         width: 100%;
     }
 
-    .overlay {
-        border-radius: $bdl-border-radius-size;
-    }
-
     ul.overlay {
         @include bdl-transition($bdl-transitionDurationBase, transform);
 
+        margin-top: $bdl-grid-unit * 2;
         padding: 0;
         overflow-x: hidden;
         overflow-y: auto;

package/src/features/quick-search/QuickSearchMessage.scss

@@ -8,5 +8,6 @@
         color: $bdl-gray-50;
         text-align: center;
         background-color: $bdl-gray-02;
+        border-radius: $bdl-border-radius-size-med;
     }
 }

package/src/features/security/_mixins.scss

@@ -5,7 +5,7 @@
     align-items: center;
     margin: 0;
     padding: 2px 8px;
-    border-radius: $bdl-border-radius-large-size;
+    border-radius: 10px; // Rounded sides: radius half the height of the badge
 }
 
 @mixin bdl-SecurityBadge-name {

package/src/icon/fill/LightningBolt16.js.flow

@@ -0,0 +1,28 @@
+// @flow
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from '../../icons/accessible-svg';
+import type { Icon } from '../../icons/flowTypes';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const LightningBolt16 = (props: Icon) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path
+            fill={vars.bdlGray50}
+            d="M11.503 1a.496.496 0 01.447.712L9.302 6.998h2.193a.5.5 0 01.423.766L6.91 14.792a.5.5 0 01-.902-.365L6.836 9H4.493a.496.496 0 01-.483-.602l1.516-7A.495.495 0 016.008 1h5.495z"
+        />
+    </AccessibleSVG>
+);
+
+export default LightningBolt16;

package/src/icon/fill/LightningBolt16.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import LightningBolt16 from './LightningBolt16';
+
+export const lightningBolt16 = () => <LightningBolt16 />;
+
+export default {
+    title: 'Icon|Fill|LightningBolt16',
+    component: LightningBolt16,
+    parameters: {
+        notes: "`import LightningBolt16 from 'box-ui-elements/es/icon/fill/LightningBolt16';`",
+    },
+};

package/src/icon/fill/LightningBolt16.tsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG, { SVGProps } from '../../components/accessible-svg/AccessibleSVG';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const LightningBolt16 = (props: SVGProps) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path
+            fill={vars.bdlGray50}
+            d="M11.503 1a.496.496 0 01.447.712L9.302 6.998h2.193a.5.5 0 01.423.766L6.91 14.792a.5.5 0 01-.902-.365L6.836 9H4.493a.496.496 0 01-.483-.602l1.516-7A.495.495 0 016.008 1h5.495z"
+        />
+    </AccessibleSVG>
+);
+
+export default LightningBolt16;

package/src/icon/line/GenericCopy16.js.flow

@@ -0,0 +1,25 @@
+// @flow
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG from '../../icons/accessible-svg';
+import type { Icon } from '../../icons/flowTypes';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const GenericCopy16 = (props: Icon) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path fill={vars.bdlGray} d="M13 3c.557 0 .942.345.994.875L14 4v11H4V3h9zm0 1H5v10h8V4zm-2-3v1H3v10H2V1h9z" />
+    </AccessibleSVG>
+);
+
+export default GenericCopy16;

package/src/icon/line/GenericCopy16.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import GenericCopy16 from './GenericCopy16';
+
+export const genericCopy16 = () => <GenericCopy16 />;
+
+export default {
+    title: 'Icon|Line|GenericCopy16',
+    component: GenericCopy16,
+    parameters: {
+        notes: "`import GenericCopy16 from 'box-ui-elements/es/icon/line/GenericCopy16';`",
+    },
+};

package/src/icon/line/GenericCopy16.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-sort-props */
+import * as React from 'react';
+import * as vars from '../../styles/variables';
+import AccessibleSVG, { SVGProps } from '../../components/accessible-svg/AccessibleSVG';
+
+/**
+ * This is an auto-generated component and should not be edited
+ * manually in contributor pull requests.
+ *
+ * If you have problems with this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Bug_report.md
+ *
+ * If there are missing features in this component:
+ * - https://github.com/box/box-ui-elements/issues/new?template=Feature_request.md
+ */
+
+const GenericCopy16 = (props: SVGProps) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path fill={vars.bdlGray} d="M13 3c.557 0 .942.345.994.875L14 4v11H4V3h9zm0 1H5v10h8V4zm-2-3v1H3v10H2V1h9z" />
+    </AccessibleSVG>
+);
+
+export default GenericCopy16;

package/src/styles/_inputs.scss

@@ -4,7 +4,7 @@
     padding: 7px;
     color: $bdl-gray;
     border: 1px solid $bdl-gray-20;
-    border-radius: 3px;
+    border-radius: $bdl-border-radius-size-med;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
     transition: border-color linear .15s, box-shadow linear .1s;
     -webkit-font-smoothing: antialiased;

package/src/styles/_variables.scss

@@ -4,9 +4,11 @@
 @import './constants/animation';
 @import './constants/typography';
 @import './constants/themes';
+@import './constants/buttons';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins
 @import './mixins/animation';
 @import './mixins/layout';
 @import './mixins/typography';
+@import './mixins/buttons';