box-ui-elements 16.1.0-beta.9 → 17.0.0

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

@@ -52,7 +52,7 @@
 .bcs-VersionsItem-info {
     display: flex;
     align-items: center;
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     white-space: nowrap;
 }
 
@@ -60,11 +60,11 @@
     display: flex;
     align-items: center;
     margin-top: 8px;
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
 }
 
 .bcs-VersionsItem-footer {
-    color: $bdl-gray-62;
+    color: $bdl-gray-65;
     font-size: 12px;
 }
 

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

@@ -23,6 +23,10 @@ type Props = {
 };
 
 const Footer = ({ isLoading, hasFiles, errorCode, onCancel, onClose, onUpload, fileLimit, isDone }: Props) => {
+    const isCloseButtonDisabled = hasFiles;
+    const isCancelButtonDisabled = !hasFiles || isDone;
+    const isUploadButtonDisabled = !hasFiles;
+
     let message;
     switch (errorCode) {
         case ERROR_CODE_UPLOAD_FILE_LIMIT:
@@ -36,17 +40,33 @@ const Footer = ({ isLoading, hasFiles, errorCode, onCancel, onClose, onUpload, f
         <div className="bcu-footer">
             <div className="bcu-footer-left">
                 {onClose ? (
-                    <Button isDisabled={hasFiles} onClick={onClose} type="button">
+                    <Button
+                        disabled={isCloseButtonDisabled}
+                        isDisabled={isCloseButtonDisabled}
+                        onClick={onClose}
+                        type="button"
+                    >
                         <FormattedMessage {...messages.close} />
                     </Button>
                 ) : null}
             </div>
             {message && <div className="bcu-footer-message">{message}</div>}
             <div className="bcu-footer-right">
-                <Button isDisabled={!hasFiles || isDone} onClick={onCancel} type="button">
+                <Button
+                    disabled={isCancelButtonDisabled}
+                    isDisabled={isCancelButtonDisabled}
+                    onClick={onCancel}
+                    type="button"
+                >
                     <FormattedMessage {...messages.cancel} />
                 </Button>
-                <PrimaryButton isDisabled={!hasFiles} isLoading={isLoading} onClick={onUpload} type="button">
+                <PrimaryButton
+                    disabled={isUploadButtonDisabled}
+                    isDisabled={isUploadButtonDisabled}
+                    isLoading={isLoading}
+                    onClick={onUpload}
+                    type="button"
+                >
                     <FormattedMessage {...messages.upload} />
                 </PrimaryButton>
             </div>

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

@@ -1,5 +1,4 @@
 @import '../common/variables';
-@import '../../styles/mixins/buttons';
 
 .bcu-footer {
     display: flex;

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

@@ -1,6 +1,6 @@
 /**
  * @flow
- * @file Item action component
+ * @file Item action component displayed on the upload toast, e.g. cancel/resume
  */
 
 import React from 'react';
@@ -50,6 +50,7 @@ const ItemAction = ({
     let icon = <IconClose />;
     let tooltip;
     const { code } = error;
+    const { formatMessage } = intl;
 
     if (isFolder && status !== STATUS_PENDING) {
         return null;
@@ -96,12 +97,14 @@ const ItemAction = ({
             </PrimaryButton>
         );
     }
+    const isDisabled = status === STATUS_STAGED;
+    const tooltipText = tooltip && formatMessage(tooltip);
 
     return (
         <div className="bcu-item-action">
             {tooltip ? (
-                <Tooltip position="top-left" text={intl.formatMessage(tooltip)}>
-                    <PlainButton onClick={onClick} type="button" isDisabled={status === STATUS_STAGED}>
+                <Tooltip position="top-left" text={tooltipText}>
+                    <PlainButton aria-label={tooltipText} isDisabled={isDisabled} onClick={onClick} type="button">
                         {icon}
                     </PlainButton>
                 </Tooltip>

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

@@ -4,20 +4,22 @@
  */
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
+import type { InjectIntlProvidedProps } from 'react-intl';
 import PlainButton from '../../components/plain-button/PlainButton';
 import Tooltip from '../../components/tooltip';
 import IconClose from '../../icons/general/IconClose';
 import messages from '../common/messages';
 import { STATUS_ERROR, STATUS_IN_PROGRESS, STATUS_STAGED } from '../../constants';
+
 import type { UploadItem, UploadStatus } from '../../common/types/upload';
 
 type Props = {
     onClick: (item: UploadItem) => void,
     status: UploadStatus,
-};
+} & InjectIntlProvidedProps;
 
-const ItemRemove = ({ onClick, status }: Props) => {
+const ItemRemove = ({ intl, onClick, status }: Props) => {
     const resin = {};
     let target = null;
 
@@ -31,10 +33,19 @@ const ItemRemove = ({ onClick, status }: Props) => {
         resin['data-resin-target'] = target;
     }
 
+    const isDisabled = status === STATUS_STAGED;
+    const tooltipText = intl.formatMessage(messages.remove);
+
     return (
         <div className="bcu-item-action">
-            <Tooltip position="top-left" text={<FormattedMessage {...messages.remove} />}>
-                <PlainButton onClick={onClick} type="button" isDisabled={status === STATUS_STAGED} {...resin}>
+            <Tooltip position="top-left" text={tooltipText}>
+                <PlainButton
+                    aria-label={tooltipText}
+                    isDisabled={isDisabled}
+                    onClick={onClick}
+                    type="button"
+                    {...resin}
+                >
                     <IconClose />
                 </PlainButton>
             </Tooltip>
@@ -42,4 +53,5 @@ const ItemRemove = ({ onClick, status }: Props) => {
     );
 };
 
-export default ItemRemove;
+export { ItemRemove as ItemRemoveBase };
+export default injectIntl(ItemRemove);

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

@@ -15,17 +15,27 @@ type Props = {
 };
 
 const UploadInput = ({
-    isMultiple = true,
-    isFolderUpload = false,
-    inputLabelClass = '',
-    inputLabel,
     handleChange,
-}: Props) =>
-    inputLabel ? (
-        // eslint-disable-next-line jsx-a11y/label-has-for
-        <label className={inputLabelClass}>
+    inputLabel,
+    inputLabelClass = '',
+    isFolderUpload = false,
+    isMultiple = true,
+}: Props) => {
+    const inputRef = React.useRef(null);
+
+    const onKeyDown = e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            if (inputRef.current) {
+                inputRef.current.click();
+            }
+        }
+    };
+
+    return inputLabel ? (
+        <label className={inputLabelClass} onKeyDown={onKeyDown} tabIndex={0}>
             {inputLabel}
             <input
+                ref={inputRef}
                 directory={isFolderUpload ? '' : undefined}
                 multiple={isMultiple}
                 onChange={handleChange}
@@ -34,5 +44,5 @@ const UploadInput = ({
             />
         </label>
     ) : null;
-
+};
 export default UploadInput;

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import noop from 'lodash/noop';
+import Button from '../../../components/button/Button';
+import Footer from '../Footer';
+import PrimaryButton from '../../../components/primary-button/PrimaryButton';
+
+describe('elements/content-uploader/Footer', () => {
+    const defaultProps = {
+        fileLimit: 10,
+        hasFiles: false,
+        isDone: false,
+        isLoading: false,
+        onCancel: noop,
+        onUpload: noop,
+    };
+    const getWrapper = (props = {}) => shallow(<Footer {...defaultProps} {...props} />);
+
+    test.each`
+        hasFiles | isDone   | isDisabled
+        ${true}  | ${false} | ${false}
+        ${false} | ${true}  | ${true}
+        ${false} | ${false} | ${true}
+        ${true}  | ${true}  | ${true}
+    `(
+        'cancel button disabled props should be $isDisabled when hasFiles is $hasFiles and isDone is $isDone',
+        ({ hasFiles, isDone, isDisabled }) => {
+            const wrapper = getWrapper({ hasFiles, isDone });
+            const closeButton = wrapper.find(Button);
+
+            expect(closeButton.prop('disabled')).toBe(isDisabled);
+            expect(closeButton.prop('isDisabled')).toBe(isDisabled);
+        },
+    );
+
+    test.each`
+        hasFiles | isDisabled
+        ${true}  | ${false}
+        ${false} | ${true}
+    `('upload button disabled props should be $isDisabled when hasFiles is $hasFiles', ({ hasFiles, isDisabled }) => {
+        const wrapper = getWrapper({ hasFiles });
+        const uploadButton = wrapper.find(PrimaryButton);
+
+        expect(uploadButton.prop('disabled')).toBe(isDisabled);
+        expect(uploadButton.prop('isDisabled')).toBe(isDisabled);
+    });
+
+    test.each`
+        hasFiles | isDisabled
+        ${true}  | ${true}
+        ${false} | ${false}
+    `('close button disabled props should be $isDisabled when hasFiles is $hasFiles', ({ hasFiles, isDisabled }) => {
+        const wrapper = getWrapper({ hasFiles, onClose: noop });
+        const closeButton = wrapper.find(Button).at(0);
+
+        expect(closeButton.prop('disabled')).toBe(isDisabled);
+        expect(closeButton.prop('isDisabled')).toBe(isDisabled);
+    });
+});

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import noop from 'lodash/noop';
 import { shallow } from 'enzyme';
+import PlainButton from '../../../components/plain-button';
 import { ItemActionForTesting as ItemAction } from '../ItemAction';
 import {
     ERROR_CODE_UPLOAD_FILE_SIZE_LIMIT_EXCEEDED,
@@ -15,7 +16,7 @@ describe('elements/content-uploader/ItemAction', () => {
     const getWrapper = props =>
         shallow(
             <ItemAction
-                intl={{ formatMessage: data => <span {...data} /> }}
+                intl={{ formatMessage: data => data.defaultMessage }}
                 onClick={noop}
                 status={STATUS_PENDING}
                 {...props}
@@ -76,4 +77,13 @@ describe('elements/content-uploader/ItemAction', () => {
         expect(wrapper.exists('PrimaryButton')).toBe(true);
         expect(wrapper.exists('PlainButton')).toBe(false);
     });
+
+    test('should have aria-label "Cancel this upload" when status is pending', () => {
+        const wrapper = getWrapper({
+            status: STATUS_PENDING,
+        });
+        const plainButton = wrapper.find(PlainButton);
+        expect(plainButton.prop('aria-label')).toBe('Cancel this upload');
+        expect(plainButton.prop('aria-describedby')).toBeFalsy();
+    });
 });

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import PlainButton from '../../../components/plain-button';
+import { ItemRemoveBase as ItemRemove } from '../ItemRemove';
+
+import { STATUS_IN_PROGRESS } from '../../../constants';
+
+describe('elements/content-uploader/ItemRemove', () => {
+    test('should have aria-label "Remove" and no aria-describedby', () => {
+        const wrapper = shallow(
+            <ItemRemove
+                intl={{ formatMessage: data => data.defaultMessage }}
+                status={STATUS_IN_PROGRESS} // Use any status. The label does not change based on status.
+            />,
+        );
+
+        const plainButton = wrapper.find(PlainButton);
+        expect(plainButton.prop('aria-label')).toBe('Remove');
+        expect(plainButton.prop('aria-describedby')).toBeFalsy();
+    });
+});

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

@@ -20,6 +20,12 @@ exports[`elements/content-uploader/ItemAction should render correctly with compl
     theme="default"
   >
     <PlainButton
+      aria-label={
+        <span
+          defaultMessage="Remove"
+          id="be.remove"
+        />
+      }
       isDisabled={false}
       onClick={[Function]}
       type="button"
@@ -60,6 +66,12 @@ exports[`elements/content-uploader/ItemAction should render correctly with error
     theme="default"
   >
     <PlainButton
+      aria-label={
+        <span
+          defaultMessage="Retry"
+          id="be.retry"
+        />
+      }
       isDisabled={false}
       onClick={[Function]}
       type="button"
@@ -91,6 +103,12 @@ exports[`elements/content-uploader/ItemAction should render correctly with error
     theme="default"
   >
     <PlainButton
+      aria-label={
+        <span
+          defaultMessage="Resume"
+          id="be.resume"
+        />
+      }
       isDisabled={false}
       onClick={[Function]}
       type="button"
@@ -122,6 +140,12 @@ exports[`elements/content-uploader/ItemAction should render correctly with inpro
     theme="default"
   >
     <PlainButton
+      aria-label={
+        <span
+          defaultMessage="Cancel this upload"
+          id="be.uploadsCancelButtonTooltip"
+        />
+      }
       isDisabled={false}
       onClick={[Function]}
       type="button"
@@ -158,6 +182,12 @@ exports[`elements/content-uploader/ItemAction should render correctly with pendi
     theme="default"
   >
     <PlainButton
+      aria-label={
+        <span
+          defaultMessage="Cancel this upload"
+          id="be.uploadsCancelButtonTooltip"
+        />
+      }
       isDisabled={false}
       onClick={[Function]}
       type="button"
@@ -194,6 +224,12 @@ exports[`elements/content-uploader/ItemAction should render correctly with stage
     theme="default"
   >
     <PlainButton
+      aria-label={
+        <span
+          defaultMessage="Cancel this upload"
+          id="be.uploadsCancelButtonTooltip"
+        />
+      }
       isDisabled={true}
       onClick={[Function]}
       type="button"

package/src/elements/content-uploader/__tests__/__snapshots__/UploadInput.test.js.snap

@@ -3,6 +3,8 @@
 exports[`elements/content-uploader/UploadInput should render correctly when inputLabel is available 1`] = `
 <label
   className="inputLabelClass"
+  onKeyDown={[Function]}
+  tabIndex={0}
 >
   yo
   <input
@@ -18,6 +20,8 @@ exports[`elements/content-uploader/UploadInput should render correctly when inpu
 exports[`elements/content-uploader/UploadInput should render correctly when isFolderUpload is true 1`] = `
 <label
   className=""
+  onKeyDown={[Function]}
+  tabIndex={0}
 >
   yo
   <input

package/src/features/advanced-content-insights/AdvancedContentInsightsToggle.scss

@@ -0,0 +1,19 @@
+@import '../../styles/variables';
+
+.AdvancedContentInsightsToggle {
+    margin-bottom: 0;
+
+    .toggle-simple-label {
+        display: flex;
+    }
+
+    .toggle-simple-description {
+        color: $bdl-gray;
+    }
+}
+
+.AdvancedContentInsightsToggle-icon {
+    display: flex;
+    align-items: center;
+    margin-left: 5px;
+}

package/src/features/advanced-content-insights/AdvancedContentInsightsToggle.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { FormattedMessage } from 'react-intl';
+import InfoBadge16 from '../../icon/fill/InfoBadge16';
+// @ts-ignore flow import
+import Toggle from '../../components/toggle';
+import Tooltip from '../../components/tooltip';
+
+import messages from './messages';
+
+import './AdvancedContentInsightsToggle.scss';
+
+interface Props {
+    hasDescription?: boolean;
+    hasTooltip?: boolean;
+    isChecked?: boolean;
+    isDisabled: boolean;
+    onChange?: (isEnabled: boolean) => void;
+}
+
+const AdvancedContentInsightsToggle = ({
+    hasDescription,
+    hasTooltip = true,
+    isChecked = false,
+    isDisabled,
+    onChange = noop,
+}: Props) => {
+    const description = <FormattedMessage {...messages.advancedContentInsightsDescription} />;
+    const label = (
+        <>
+            <FormattedMessage
+                {...(isChecked
+                    ? messages.advancedContentInsightsTitleEnabled
+                    : messages.advancedContentInsightsTitleDisabled)}
+            />
+            {hasTooltip && (
+                <Tooltip text={description}>
+                    <div className="AdvancedContentInsightsToggle-icon">
+                        <InfoBadge16 height={14} width={14} />
+                    </div>
+                </Tooltip>
+            )}
+        </>
+    );
+
+    return (
+        <Toggle
+            className="AdvancedContentInsightsToggle"
+            data-testid="insights-toggle"
+            description={!hasTooltip && hasDescription && description}
+            isDisabled={isDisabled}
+            isOn={isChecked}
+            label={label}
+            onChange={() => onChange(!isChecked)}
+        />
+    );
+};
+
+export default AdvancedContentInsightsToggle;

package/src/features/advanced-content-insights/__tests__/AdvancedContentInsightsToggle.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import AdvancedContentInsightsToggle from '../AdvancedContentInsightsToggle';
+
+describe('features/advanced-content-insights/AdvancedContentInsightsToggle', () => {
+    const getWrapper = (props = {}) =>
+        shallow(<AdvancedContentInsightsToggle isChecked isDisabled={false} {...props} />);
+
+    test('should render default component', () => {
+        expect(getWrapper()).toMatchSnapshot();
+    });
+
+    test('should render the description inside a tooltip', () => {
+        const wrapper = getWrapper();
+        const toggle = wrapper.find('Toggle').dive();
+        expect(toggle.find('Tooltip').exists()).toBe(true);
+    });
+
+    test('should not render the description inside a tooltip', () => {
+        const wrapper = getWrapper({ hasTooltip: false });
+        const toggle = wrapper.find('Toggle').dive();
+        expect(toggle.find('Tooltip').exists()).toBe(false);
+    });
+
+    test('should call the callback function if the toggle changes', () => {
+        const onChange = jest.fn();
+        const wrapper = getWrapper({ onChange });
+        const toggle = wrapper.find('Toggle').dive();
+        expect(toggle.length).toBe(1);
+        toggle.find('input').simulate('change');
+        expect(onChange).toBeCalled();
+    });
+});

package/src/features/advanced-content-insights/__tests__/__snapshots__/AdvancedContentInsightsToggle.test.tsx.snap

@@ -0,0 +1,42 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`features/advanced-content-insights/AdvancedContentInsightsToggle should render default component 1`] = `
+<Toggle
+  className="AdvancedContentInsightsToggle"
+  data-testid="insights-toggle"
+  description={false}
+  isDisabled={false}
+  isOn={true}
+  label={
+    <React.Fragment>
+      <FormattedMessage
+        defaultMessage="Engagement Insights is activated"
+        id="boxui.advancedContentInsights.advancedContentInsightsTitleEnabled"
+      />
+      <Tooltip
+        constrainToScrollParent={false}
+        constrainToWindow={true}
+        isDisabled={false}
+        position="top-center"
+        text={
+          <FormattedMessage
+            defaultMessage="Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details."
+            id="boxui.advancedContentInsights.advancedContentInsightsDescription"
+          />
+        }
+        theme="default"
+      >
+        <div
+          className="AdvancedContentInsightsToggle-icon"
+        >
+          <InfoBadge16
+            height={14}
+            width={14}
+          />
+        </div>
+      </Tooltip>
+    </React.Fragment>
+  }
+  onChange={[Function]}
+/>
+`;

package/src/features/advanced-content-insights/messages.ts

@@ -0,0 +1,22 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    advancedContentInsightsTitleEnabled: {
+        defaultMessage: 'Engagement Insights is activated',
+        description: 'Advanced Content Insights toggle title',
+        id: 'boxui.advancedContentInsights.advancedContentInsightsTitleEnabled',
+    },
+    advancedContentInsightsTitleDisabled: {
+        defaultMessage: 'Activate Engagement Insights',
+        description: 'Advanced Content Insights toggle title',
+        id: 'boxui.advancedContentInsights.advancedContentInsightsTitleDisabled',
+    },
+    advancedContentInsightsDescription: {
+        defaultMessage:
+            'Get actionable insights into how viewers are engaging with this content. Measure average time spent, page-by-page engagement, per person and per visit details.',
+        description: 'Description text about advanced content insights.',
+        id: 'boxui.advancedContentInsights.advancedContentInsightsDescription',
+    },
+});
+
+export default messages;

package/src/features/classification/classificationColorsMap.js

@@ -51,7 +51,7 @@ const classificationColorsMap = {
     [CLASSIFICATION_COLOR_ID_7]: {
         name: messages.classificationGrey,
         color: vars.bdlGray20,
-        tinycon: vars.bdlGray62,
+        tinycon: vars.bdlGray65,
     },
 };
 

package/src/features/collaborator-avatars/CollaboratorAvatarItem.js

@@ -1,6 +1,7 @@
 /* @flow */
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl';
+import type { InjectIntlProvidedProps } from 'react-intl';
 
 import Badgeable from '../../components/badgeable/Badgeable';
 import Tooltip from '../../components/tooltip/Tooltip';
@@ -19,12 +20,13 @@ type Props = {
     id: number,
     isExternalCollab?: boolean,
     name: string,
-};
+} & InjectIntlProvidedProps;
 
 const CollaboratorAvatarItem = (props: Props) => {
     const {
         allowBadging = false,
         expiration,
+        intl,
         isExternalCollab = false,
         hasCustomAvatar,
         avatarUrl,
@@ -45,13 +47,13 @@ const CollaboratorAvatarItem = (props: Props) => {
             <Avatar name={name || '-'} {...rest} isExternal={isExternalCollab} shouldShowExternal={allowBadging} />
         );
 
+    const expirationTooltipMessage = intl.formatMessage(messages.expirationTooltipText, {
+        date: expiration?.executeAt,
+    });
     const expirationBadge =
         allowBadging && expiration && expiration.executeAt ? (
-            <Tooltip
-                position="middle-right"
-                text={<FormattedMessage {...messages.expirationTooltipText} values={{ date: expiration.executeAt }} />}
-            >
-                <div>
+            <Tooltip position="middle-right" text={expirationTooltipMessage}>
+                <div aria-label={expirationTooltipMessage} role="img">
                     <IconExpirationBadge className="themed" height={14} width={14} />
                 </div>
             </Tooltip>
@@ -60,4 +62,5 @@ const CollaboratorAvatarItem = (props: Props) => {
     return <Badgeable topLeft={expirationBadge}>{avatarInstance}</Badgeable>;
 };
 
-export default CollaboratorAvatarItem;
+export { CollaboratorAvatarItem as CollaboratorAvatarItemBase };
+export default injectIntl(CollaboratorAvatarItem);

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

@@ -13,7 +13,7 @@
 
     .avatars-label {
         margin-right: 5px;
-        color: $bdl-gray-62;
+        color: $bdl-gray-65;
     }
 
     .avatars {