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

package/src/components/tooltip/Tooltip.scss

@@ -11,14 +11,14 @@ $tooltip-offset: 4px; /* amount of space between target and tooltip arrow */
 .bdl-Tooltip {
     position: relative;
     max-width: 200px;
-    padding: 8px $horizontal-offset;
+    padding: $bdl-grid-unit * 2 $horizontal-offset;
     color: $white;
-    font-size: 13px;
+    font-size: $bdl-fontSize;
     line-height: 1.4;
     word-wrap: break-word;
     background-color: $bdl-gray-80;
     border-color: $bdl-gray-80;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 
     &::before {
         position: absolute;

package/src/components/tooltip/__tests__/Tooltip.stories.test.tsx

@@ -2,7 +2,7 @@ describe('components/tooltip/Tooltip', () => {
     test.each([
         ['components-tooltip--positioning'],
         ['components-tooltip--themes'],
-        ['components-tooltip--with-close-cutton'],
+        ['components-tooltip--with-close-button'],
         ['components-tooltip--is-shown'],
         ['components-tooltip--with-offset'],
         ['components-tooltip--with-disabled'],

package/src/elements/common/messages.js

@@ -687,6 +687,16 @@ const messages = defineMessages({
         description: 'Error message shown when file size exceeds the limit',
         defaultMessage: 'File size exceeds the folder owner’s file size limit',
     },
+    uploadsFileSizeLimitExceededErrorMessageForUpgradeCta: {
+        id: 'be.uploadsFileSizeLimitExceededErrorMessageForUpgradeCta',
+        description: 'Error message shown when file size exceeds the limit',
+        defaultMessage: 'This file exceeds your plan’s upload limit. Upgrade now to store larger files.',
+    },
+    uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta: {
+        id: 'be.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta',
+        description: 'Upgrade message shown when file size exceeds the limit',
+        defaultMessage: 'Upgrade',
+    },
     uploadsStorageLimitErrorMessage: {
         id: 'be.uploadsStorageLimitErrorMessage',
         description: 'Error message shown when account storage limit has been reached',

package/src/elements/common/modal.scss

@@ -1,5 +1,6 @@
 @import '../../styles/variables';
 @import './variables';
+@import '../../styles/mixins/buttons';
 
 .be-modal {
     .be-modal-btns {
@@ -8,6 +9,8 @@
         padding: 15px 0 0;
 
         .btn {
+            @include bdl-Button--large;
+
             margin-left: 8px;
         }
     }
@@ -52,7 +55,7 @@
     width: 400px;
     margin-right: -50%;
     padding: 25px;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
     transform: translate(-50%, -50%);
 
     .be-is-small & {

package/src/elements/content-explorer/ShareDialog.scss

@@ -14,7 +14,7 @@
             max-width: 296px;
             text-overflow: ellipsis;
             border-right: 0 none;
-            border-radius: 3px 0 0 3px;
+            border-radius: $bdl-border-radius-size 0 0 $bdl-border-radius-size;
 
             .be-is-small & {
                 width: 237px;
@@ -37,7 +37,7 @@
         line-height: 34px;
         letter-spacing: 1px;
         text-transform: uppercase;
-        border-radius: 0 3px 3px 0;
+        border-radius: 0 $bdl-border-radius-size $bdl-border-radius-size 0;
     }
 
     .be-modal-btns {

package/src/elements/content-sidebar/activity-feed/task-form/TaskForm.js

@@ -13,6 +13,7 @@ import commonMessages from '../../../../common/messages';
 import messages from './messages';
 import commentFormMessages from '../comment-form/messages';
 import Form from '../../../../components/form-elements/form/Form';
+import ModalActions from '../../../../components/modal/ModalActions';
 import ContactDatalistItem from '../../../../components/contact-datalist-item/ContactDatalistItem';
 import TextArea from '../../../../components/text-area';
 import DatePicker from '../../../../components/date-picker/DatePicker';
@@ -457,7 +458,7 @@ class TaskForm extends React.Component<Props, State> {
                             placeholder={intl.formatMessage(commentFormMessages.approvalSelectDate)}
                             value={dueDate || undefined}
                         />
-                        <div className="bcs-task-input-controls">
+                        <ModalActions>
                             <Button
                                 className="bcs-task-input-cancel-btn"
                                 data-resin-target={ACTIVITY_TARGETS.APPROVAL_FORM_CANCEL}
@@ -479,7 +480,7 @@ class TaskForm extends React.Component<Props, State> {
                             >
                                 <FormattedMessage {...submitButtonMessage} />
                             </PrimaryButton>
-                        </div>
+                        </ModalActions>
                     </Form>
                 </div>
             </div>

package/src/elements/content-sidebar/activity-feed/task-form/TaskForm.scss

@@ -5,21 +5,6 @@ $assignee-dropdown-height: 215px;
 .be .bcs-task-input-container {
     display: flex;
 
-    .bcs-task-input-controls {
-        display: block;
-        text-align: right;
-
-        .btn {
-            margin-top: 0;
-            margin-right: 0;
-            margin-bottom: 10px;
-        }
-
-        .btn:last-child {
-            margin-left: 10px;
-        }
-    }
-
     .bcs-task-input-form-container {
         flex: 1;
         min-width: 0;

package/src/elements/content-sidebar/activity-feed/task-form/__tests__/TaskForm.test.js

@@ -53,8 +53,8 @@ describe('components/ContentSidebar/ActivityFeed/task-form/TaskForm', () => {
         expect(container.find('[data-testid="task-form-assignee-input"]').length).toEqual(1);
         expect(container.find('[data-testid="task-form-name-input"]').length).toEqual(1);
         expect(container.find('[data-testid="task-form-date-input"]').length).toEqual(1);
-        expect(container.find('.bcs-task-input-controls').length).toEqual(1);
-        expect(container.find('.bcs-task-input-controls').find('button').length).toEqual(2);
+        expect(container.find('[data-testid="task-form-submit-button"]').length).toEqual(1);
+        expect(container.find('[data-testid="task-form-cancel-button"]').length).toEqual(1);
     });
 
     test('should call createTask prop on submit when form is valid', () => {

package/src/elements/content-sidebar/activity-feed/task-form/__tests__/__snapshots__/TaskForm.test.js.snap

@@ -1,153 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/ContentSidebar/ActivityFeed/task-form/TaskForm addResinInfo() should set assignee added and removed information correctly 1`] = `
-<div
-  className="bcs-task-input-controls"
->
-  <Button
-    className="bcs-task-input-cancel-btn"
-    data-resin-assigneesadded={
-      Array [
-        456,
-      ]
-    }
-    data-resin-assigneesremoved={
-      Array [
-        123,
-      ]
-    }
-    data-resin-duedate={1555027200000}
-    data-resin-isediting={true}
-    data-resin-numassigneesadded={1}
-    data-resin-numassigneesremoved={1}
-    data-resin-numgroupssadded={0}
-    data-resin-target="activityfeed-approvalformcancel"
-    data-resin-taskid={12345678}
-    data-testid="task-form-cancel-button"
-    isDisabled={false}
-    isLoading={false}
-    onClick={[Function]}
-    showRadar={false}
-    type="button"
-  >
-    <button
-      className="btn bcs-task-input-cancel-btn"
-      data-resin-assigneesadded={
-        Array [
-          456,
-        ]
-      }
-      data-resin-assigneesremoved={
-        Array [
-          123,
-        ]
-      }
-      data-resin-duedate={1555027200000}
-      data-resin-isediting={true}
-      data-resin-numassigneesadded={1}
-      data-resin-numassigneesremoved={1}
-      data-resin-numgroupssadded={0}
-      data-resin-target="activityfeed-approvalformcancel"
-      data-resin-taskid={12345678}
-      data-testid="task-form-cancel-button"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="btn-content"
-      >
-        <FormattedMessage
-          defaultMessage="Cancel"
-          id="be.contentSidebar.activityFeed.taskForm.tasksAddTaskFormCancelLabel"
-        >
-          <div />
-        </FormattedMessage>
-      </span>
-    </button>
-  </Button>
-  <PrimaryButton
-    className="bcs-task-input-submit-btn"
-    data-resin-assigneesadded={
-      Array [
-        456,
-      ]
-    }
-    data-resin-assigneesremoved={
-      Array [
-        123,
-      ]
-    }
-    data-resin-duedate={1555027200000}
-    data-resin-isediting={true}
-    data-resin-numassigneesadded={1}
-    data-resin-numassigneesremoved={1}
-    data-resin-numgroupssadded={0}
-    data-resin-target="activityfeed-approvalformpost"
-    data-resin-taskid={12345678}
-    data-testid="task-form-submit-button"
-    isDisabled={false}
-    isLoading={false}
-  >
-    <Button
-      className="btn-primary bcs-task-input-submit-btn"
-      data-resin-assigneesadded={
-        Array [
-          456,
-        ]
-      }
-      data-resin-assigneesremoved={
-        Array [
-          123,
-        ]
-      }
-      data-resin-duedate={1555027200000}
-      data-resin-isediting={true}
-      data-resin-numassigneesadded={1}
-      data-resin-numassigneesremoved={1}
-      data-resin-numgroupssadded={0}
-      data-resin-target="activityfeed-approvalformpost"
-      data-resin-taskid={12345678}
-      data-testid="task-form-submit-button"
-      isDisabled={false}
-      isLoading={false}
-      showRadar={false}
-      type="submit"
-    >
-      <button
-        className="btn btn-primary bcs-task-input-submit-btn"
-        data-resin-assigneesadded={
-          Array [
-            456,
-          ]
-        }
-        data-resin-assigneesremoved={
-          Array [
-            123,
-          ]
-        }
-        data-resin-duedate={1555027200000}
-        data-resin-isediting={true}
-        data-resin-numassigneesadded={1}
-        data-resin-numassigneesremoved={1}
-        data-resin-numgroupssadded={0}
-        data-resin-target="activityfeed-approvalformpost"
-        data-resin-taskid={12345678}
-        data-testid="task-form-submit-button"
-        onClick={[Function]}
-        type="submit"
-      >
-        <span
-          className="btn-content"
-        >
-          <FormattedMessage
-            defaultMessage="Update"
-            id="be.contentSidebar.activityFeed.taskForm.tasksEditTaskFormSubmitLabel"
-          >
-            <div />
-          </FormattedMessage>
-        </span>
-      </button>
-    </Button>
-  </PrimaryButton>
-</div>
-`;
+exports[`components/ContentSidebar/ActivityFeed/task-form/TaskForm addResinInfo() should set assignee added and removed information correctly 1`] = `null`;

package/src/elements/content-sidebar/activity-feed/version/Version.scss

@@ -9,7 +9,7 @@
         padding: 9px;
         color: $bdl-gray;
         background-color: $bdl-box-blue-05;
-        border-radius: 4px;
+        border-radius: $bdl-border-radius-size;
     }
 
     .bcs-Version-actions {

package/src/elements/content-sidebar/additional-tabs/AdditionalTabsLoading.scss

@@ -14,7 +14,7 @@ $bdl-AdditionalTabs-fade-in-time: .5s;
     width: 24px;
     height: 24px;
     background-color: $bdl-gray-50;
-    border-radius: 5px;
+    border-radius: $bdl-border-radius-size-med;
 }
 
 .bdl-AdditionalTabPlaceholder-icon--loading {

package/src/elements/content-sidebar/skills/faces/Faces.scss

@@ -14,7 +14,7 @@
         width: 24px;
         height: 24px;
         padding-top: 1px;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
 
         &:hover svg path {
             fill: $bdl-gray;

package/src/elements/content-sidebar/skills/keywords/Keywords.scss

@@ -10,7 +10,7 @@
         width: 24px;
         height: 24px;
         padding-top: 1px;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
 
         &:hover svg path {
             fill: $bdl-gray;

package/src/elements/content-sidebar/skills/timeline/Timeline.scss

@@ -26,7 +26,7 @@
         width: 290px; // match with timeslice.js
         height: 6px;
         background-color: $blue;
-        border-radius: 6px;
+        border-radius: $bdl-border-radius-size-med;
         opacity: .25;
     }
 

package/src/elements/content-sidebar/skills/timeline/Timeslice.scss

@@ -4,7 +4,7 @@
     position: absolute;
     height: 6px;
     background-color: $blue;
-    border-radius: 6px;
+    border-radius: $bdl-border-radius-size-med;
     cursor: pointer;
     opacity: .6;
 

package/src/elements/content-sidebar/skills/transcript/Transcript.scss

@@ -16,7 +16,7 @@
         height: 24px;
         margin-left: 7px;
         padding-top: 1px;
-        border-radius: 3px;
+        border-radius: $bdl-border-radius-size;
 
         &:hover svg path {
             fill: $bdl-gray;

package/src/elements/content-sidebar/versions/VersionsItemBadge.scss

@@ -6,5 +6,5 @@
     font-size: 18px;
     text-align: center;
     background-color: $selected-blue-background;
-    border-radius: 4px;
+    border-radius: $bdl-border-radius-size;
 }

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

@@ -90,6 +90,7 @@ type Props = {
     onMinimize?: Function,
     onProgress: Function,
     onResume: Function,
+    onUpgradeCTAClick?: Function,
     onUpload: Function,
     overwrite: boolean,
     requestInterceptor?: Function,
@@ -1203,17 +1204,18 @@ class ContentUploader extends Component<Props, State> {
      */
     render() {
         const {
+            className,
+            fileLimit,
+            isDraggingItemsToUploadsManager = false,
+            isFolderUploadEnabled,
+            isResumableUploadsEnabled,
+            isTouch,
             language,
+            measureRef,
             messages,
             onClose,
-            className,
-            measureRef,
-            isTouch,
-            fileLimit,
+            onUpgradeCTAClick,
             useUploadsManager,
-            isResumableUploadsEnabled,
-            isFolderUploadEnabled,
-            isDraggingItemsToUploadsManager = false,
         }: Props = this.props;
         const { view, items, errorCode, isUploadsManagerExpanded }: State = this.state;
         const isEmpty = items.length === 0;
@@ -1240,6 +1242,7 @@ class ContentUploader extends Component<Props, State> {
                             items={items}
                             onItemActionClick={this.onClick}
                             onRemoveActionClick={this.removeFileFromUploadQueue}
+                            onUpgradeCTAClick={onUpgradeCTAClick}
                             onUploadsManagerActionClick={this.clickAllWithStatus}
                             toggleUploadsManager={this.toggleUploadsManager}
                             view={view}

package/src/elements/content-uploader/Footer.scss

@@ -1,4 +1,5 @@
 @import '../common/variables';
+@import '../../styles/mixins/buttons';
 
 .bcu-footer {
     display: flex;
@@ -9,6 +10,10 @@
     background-color: $almost-white;
     border-top: 1px solid $bdl-gray-10;
 
+    .btn {
+        @include bdl-Button--large;
+    }
+
     .bcu-footer-message {
         padding: 0 10px;
         text-align: center;

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

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl } from 'react-intl';
 import type { InjectIntlProvidedProps } from 'react-intl';
 import IconCheck from '../../icons/general/IconCheck';
 import IconClose from '../../icons/general/IconClose';
@@ -12,9 +12,17 @@ import IconInProgress from './IconInProgress';
 import IconRetry from '../../icons/general/IconRetry';
 import LoadingIndicator from '../../components/loading-indicator';
 import PlainButton from '../../components/plain-button/PlainButton';
+import PrimaryButton from '../../components/primary-button/PrimaryButton';
 import Tooltip from '../../components/tooltip';
 import messages from '../common/messages';
-import { STATUS_PENDING, STATUS_IN_PROGRESS, STATUS_STAGED, STATUS_COMPLETE, STATUS_ERROR } from '../../constants';
+import {
+    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
+    STATUS_PENDING,
+    STATUS_IN_PROGRESS,
+    STATUS_STAGED,
+    STATUS_COMPLETE,
+    STATUS_ERROR,
+} from '../../constants';
 import type { UploadStatus } from '../../common/types/upload';
 
 import './ItemAction.scss';
@@ -22,15 +30,26 @@ import './ItemAction.scss';
 const ICON_CHECK_COLOR = '#26C281';
 
 type Props = {
+    error?: Object,
     isFolder?: boolean,
     isResumableUploadsEnabled: boolean,
     onClick: Function,
+    onUpgradeCTAClick?: Function,
     status: UploadStatus,
 } & InjectIntlProvidedProps;
 
-const ItemAction = ({ status, onClick, intl, isResumableUploadsEnabled, isFolder = false }: Props) => {
+const ItemAction = ({
+    error = {},
+    intl,
+    isFolder = false,
+    isResumableUploadsEnabled,
+    onClick,
+    onUpgradeCTAClick,
+    status,
+}: Props) => {
     let icon = <IconClose />;
     let tooltip;
+    const { code } = error;
 
     if (isFolder && status !== STATUS_PENDING) {
         return null;
@@ -66,6 +85,18 @@ const ItemAction = ({ status, onClick, intl, isResumableUploadsEnabled, isFolder
             break;
     }
 
+    if (status === STATUS_ERROR && code === ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED && !!onUpgradeCTAClick) {
+        return (
+            <PrimaryButton
+                onClick={onUpgradeCTAClick}
+                data-resin-target="large_version_error_inline_upgrade_cta"
+                type="button"
+            >
+                <FormattedMessage {...messages.uploadsFileSizeLimitExceededUpgradeMessageForUpgradeCta} />
+            </PrimaryButton>
+        );
+    }
+
     return (
         <div className="bcu-item-action">
             {tooltip ? (

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

@@ -20,14 +20,21 @@ type Props = {
     items: UploadItem[],
     onClick: Function,
     onRemoveClick?: (item: UploadItem) => void,
+    onUpgradeCTAClick?: Function,
 };
 
-const ItemList = ({ isResumableUploadsEnabled = false, items, onClick, onRemoveClick = noop }: Props) => (
+const ItemList = ({
+    isResumableUploadsEnabled = false,
+    items,
+    onClick,
+    onRemoveClick = noop,
+    onUpgradeCTAClick,
+}: Props) => (
     <AutoSizer>
         {({ width, height }) => {
             const nameCell = nameCellRenderer(isResumableUploadsEnabled);
-            const progressCell = progressCellRenderer();
-            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick);
+            const progressCell = progressCellRenderer(!!onUpgradeCTAClick);
+            const actionCell = actionCellRenderer(isResumableUploadsEnabled, onClick, onUpgradeCTAClick);
             const removeCell = removeCellRenderer(onRemoveClick);
 
             return (
@@ -56,7 +63,7 @@ const ItemList = ({ isResumableUploadsEnabled = false, items, onClick, onRemoveC
                         cellRenderer={actionCell}
                         dataKey="status"
                         flexShrink={0}
-                        width={25}
+                        width={onUpgradeCTAClick ? 100 : 25}
                     />
                     {isResumableUploadsEnabled && (
                         <Column

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

@@ -21,22 +21,24 @@ type Props = {
     items: UploadItem[],
     onItemActionClick: Function,
     onRemoveActionClick: (item: UploadItem) => void,
+    onUpgradeCTAClick?: Function,
     onUploadsManagerActionClick: Function,
     toggleUploadsManager: Function,
     view: View,
 };
 
 const UploadsManager = ({
+    isExpanded,
+    isVisible,
+    isResumableUploadsEnabled,
+    isDragging,
     items,
-    view,
     onItemActionClick,
     onRemoveActionClick,
+    onUpgradeCTAClick,
     onUploadsManagerActionClick,
     toggleUploadsManager,
-    isExpanded,
-    isVisible,
-    isResumableUploadsEnabled,
-    isDragging,
+    view,
 }: Props) => {
     /**
      * Keydown handler for progress bar
@@ -98,6 +100,7 @@ const UploadsManager = ({
                     items={items}
                     onClick={onItemActionClick}
                     onRemoveClick={onRemoveActionClick}
+                    onUpgradeCTAClick={onUpgradeCTAClick}
                     view={view}
                 />
             </div>

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

@@ -2,7 +2,14 @@ import React from 'react';
 import noop from 'lodash/noop';
 import { shallow } from 'enzyme';
 import { ItemActionForTesting as ItemAction } from '../ItemAction';
-import { STATUS_PENDING, STATUS_IN_PROGRESS, STATUS_COMPLETE, STATUS_STAGED, STATUS_ERROR } from '../../../constants';
+import {
+    ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
+    STATUS_PENDING,
+    STATUS_IN_PROGRESS,
+    STATUS_COMPLETE,
+    STATUS_STAGED,
+    STATUS_ERROR,
+} from '../../../constants';
 
 describe('elements/content-uploader/ItemAction', () => {
     const getWrapper = props =>
@@ -58,4 +65,15 @@ describe('elements/content-uploader/ItemAction', () => {
 
         expect(wrapper).toMatchSnapshot();
     });
+
+    test('should render PrimaryButton with STATUS_ERROR and upload file size exceeded', () => {
+        const wrapper = getWrapper({
+            status: STATUS_ERROR,
+            error: { code: ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED },
+            onUpgradeCTAClick: () => {},
+        });
+
+        expect(wrapper.exists('PrimaryButton')).toBe(true);
+        expect(wrapper.exists('PlainButton')).toBe(false);
+    });
 });