box-ui-elements 19.0.0-beta.8 → 19.0.0

package/src/elements/content-sharing/stories/ContentSharing.stories.js

@@ -1,97 +1,31 @@
 // @flow
 import * as React from 'react';
-import { select, text } from '@storybook/addon-knobs';
-import { IntlProvider } from 'react-intl';
 import { DEFAULT_HOSTNAME_API, TYPE_FILE, TYPE_FOLDER } from '../../../constants';
 import Button from '../../../components/button/Button';
 import ContentSharing from '../ContentSharing';
-import notes from './ContentSharing.stories.md';
 
-export const withModal = () => {
-    const apiHost = text('API Host', DEFAULT_HOSTNAME_API);
-    const itemID = text('Item ID');
-    const itemType = select('Item Type', [TYPE_FILE, TYPE_FOLDER], TYPE_FILE);
-    const token = text('Access Token');
-    return (
-        <>
-            <p>
-                Update the values in the Knobs section below to view the ContentSharing UI Element. The internal
-                SharingModal will appear when valid values have been entered.
-            </p>
-            <IntlProvider locale="en">
-                <ContentSharing
-                    apiHost={apiHost}
-                    config={{ showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false }}
-                    displayInModal
-                    itemID={itemID}
-                    itemType={itemType}
-                    language="en"
-                    token={token}
-                />
-            </IntlProvider>
-        </>
-    );
-};
-
-export const withModalAndCustomButton = () => {
-    const apiHost = text('API Host', DEFAULT_HOSTNAME_API);
-    const itemID = text('Item ID');
-    const itemType = select('Item Type', [TYPE_FILE, TYPE_FOLDER], TYPE_FILE);
-    const token = text('Access Token');
-    const customButton = <Button>&#10047; Launch ContentSharing &#10047;</Button>;
-    return (
-        <>
-            <p>
-                Update the values in the Knobs section below to view the ContentSharing UI Element. The API will be
-                instantiated on load, but the internal SharingModal will not be instantiated until the button is
-                clicked.
-            </p>
-            <IntlProvider locale="en">
-                <ContentSharing
-                    apiHost={apiHost}
-                    config={{ showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false }}
-                    customButton={customButton}
-                    displayInModal
-                    itemID={itemID}
-                    itemType={itemType}
-                    language="en"
-                    token={token}
-                />
-            </IntlProvider>
-        </>
-    );
-};
+export const basic = {};
 
-export const withoutModal = () => {
-    const apiHost = text('API Host', DEFAULT_HOSTNAME_API);
-    const itemID = text('Item ID');
-    const itemType = select('Item Type', [TYPE_FILE, TYPE_FOLDER], TYPE_FILE);
-    const token = text('Access Token');
-    return (
-        <>
-            <p>
-                Update the values in the Knobs section below to view the ContentSharing UI Element. The internal
-                SharingModal will appear as a form within this page when valid values are entered.
-            </p>
-            <IntlProvider locale="en">
-                <ContentSharing
-                    apiHost={apiHost}
-                    config={{ showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false }}
-                    displayInModal={false}
-                    itemID={itemID}
-                    itemType={itemType}
-                    language="en"
-                    token={token}
-                />
-            </IntlProvider>
-        </>
-    );
+export const withCustomButton = {
+    args: {
+        displayInModal: true,
+        customButton: <Button>&#10047; Launch ContentSharing &#10047;</Button>,
+    },
 };
 
 export default {
-    title: 'Elements|ContentSharing',
+    title: 'Elements/ContentSharing',
     component: ContentSharing,
-    parameters: {
-        notes,
+    args: {
+        apiHost: DEFAULT_HOSTNAME_API,
+        config: { showEmailSharedLinkForm: false, showInviteCollaboratorMessageSection: false },
+        displayInModal: false,
+        itemType: TYPE_FILE,
+    },
+    argTypes: {
+        itemType: {
+            options: [TYPE_FILE, TYPE_FOLDER],
+            control: { type: 'select' },
+        },
     },
 };

package/src/elements/content-sidebar/ActivitySidebar.js

@@ -73,7 +73,7 @@ import type { Translations } from './flowTypes';
 import type { FeatureConfig } from '../common/feature-checking';
 import './ActivitySidebar.scss';
 
-import { type OnAnnotationEdit } from './activity-feed/comment/types';
+import type { OnAnnotationEdit, OnAnnotationStatusChange } from './activity-feed/comment/types';
 
 type ExternalProps = {
     activeFeedEntryId?: string,
@@ -224,7 +224,7 @@ class ActivitySidebar extends React.PureComponent<Props, State> {
         this.fetchFeedItems();
     };
 
-    handleAnnotationStatusChange = (id: string, status: FeedItemStatus, permissions: AnnotationPermission) => {
+    handleAnnotationStatusChange: OnAnnotationStatusChange = ({ id, permissions, status }) => {
         const { api, emitAnnotationUpdateEvent, file } = this.props;
 
         emitAnnotationUpdateEvent({ id, status }, true);

package/src/elements/content-sidebar/ContentSidebar.scss

@@ -29,9 +29,9 @@ $sidebarWidth: $sidebarTabsWidth + $sidebarContentWidth;
     }
 }
 
-.is-responsive-web {
-    @include breakpoint($medium-screen) {
-        .be.bcs {
+@include breakpoint($medium-screen) {
+    .be {
+        &.bcs {
             flex-basis: 100%;
             flex-direction: column;
             width: 100%;
@@ -39,13 +39,13 @@ $sidebarWidth: $sidebarTabsWidth + $sidebarContentWidth;
             max-width: none;
             max-height: 48px;
             transition: max-height .5s ease-in-out 0s;
+        }
 
-            &.bcs-is-open {
-                position: absolute;
-                bottom: 0;
-                z-index: 2;
-                max-height: 100%;
-            }
+        &.bcs-is-open {
+            position: absolute;
+            bottom: 0;
+            z-index: 5; // Stack sidebar above annotations. See z-index values https://github.com/box/box-annotations/blob/master/src/common/BaseAnnotator.scss
+            max-height: 100%;
         }
     }
 }

package/src/elements/content-sidebar/SidebarContent.scss

@@ -39,15 +39,13 @@
     }
 }
 
-.is-responsive-web {
-    @include breakpoint($medium-screen) {
-        .bcs-content {
-            flex-basis: 100%;
-            width: auto;
+@include breakpoint($medium-screen) {
+    .bcs-content {
+        flex-basis: 100%;
+        width: auto;
 
-            .bcs-scroll-content {
-                width: auto;
-            }
+        .bcs-scroll-content {
+            width: auto;
         }
     }
 }

package/src/elements/content-sidebar/SidebarNav.scss

@@ -64,17 +64,8 @@
     }
 }
 
-.is-responsive-web {
-    @include breakpoint($small-screen) {
-        .bcs .bcs-NavButton,
-        .bcs-SidebarNav-secondary .btn-plain,
-        .bdl-AdditionalTab {
-            width: $sidebarTabResponsiveSize - 2; //Reducing by 2px allows all the icons to fit on the smallest supported screen size (320px)
-            margin-right: 0;
-        }
-    }
-
-    @include breakpoint($medium-screen) {
+@include breakpoint($medium-screen) {
+    .bcs {
         .bcs-SidebarNav,
         .bcs-SidebarNav-tabs,
         .bcs-SidebarNav-main {
@@ -89,25 +80,25 @@
             margin-right: 12px;
         }
 
+        .bcs-SidebarNav-secondary > :last-child,
+        .bdl-AdditionalTabs > :last-child {
+            margin-right: 0;
+        }
+
         .bdl-AdditionalTab:not(.bdl-is-overflow),
         .bdl-AdditionalTabPlaceholder {
             display: none;
         }
 
-        .bdl-AdditionalTabs > :last-child,
-        .bcs-SidebarNav-secondary > :last-child {
-            margin-right: 0;
-        }
-
         .bcs-SidebarNav-overflow {
-            .bdl-AdditionalTabs {
-                padding: 0;
-            }
-
             &::after,
             &::before {
                 display: none;
             }
+
+            .bdl-AdditionalTabs {
+                padding: 0;
+            }
         }
 
         .bcs-SidebarNav-footer {
@@ -127,3 +118,14 @@
         }
     }
 }
+
+@include breakpoint($small-screen) {
+    .bcs {
+        .bcs-NavButton,
+        .bcs-SidebarNav-secondary .btn-plain,
+        .bdl-AdditionalTab {
+            width: $sidebarTabResponsiveSize - 2; // Reducing by 2px allows all the icons to fit on the smallest supported screen size (320px)
+            margin-right: 0;
+        }
+    }
+}

package/src/elements/content-sidebar/SidebarNavButton.scss

@@ -32,21 +32,19 @@
     }
 }
 
-.is-responsive-web {
-    @include breakpoint($medium-screen) {
-        .bcs-NavButton {
-            width: $sidebarTabResponsiveSize;
-            height: $sidebarTabResponsiveSize;
-            margin-right: $bdl-grid-unit * 3;
+@include breakpoint($medium-screen) {
+    .bcs .bcs-NavButton {
+        width: $sidebarTabResponsiveSize;
+        height: $sidebarTabResponsiveSize;
+        margin-right: $bdl-grid-unit * 3;
 
-            &::before {
-                top: $sidebarTabResponsiveSize;
-                right: 0;
-                bottom: 0;
-                left: 0;
-                width: auto;
-                height: 2px;
-            }
+        &::before {
+            top: $sidebarTabResponsiveSize;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            width: auto;
+            height: 2px;
         }
     }
 }

package/src/elements/content-sidebar/SidebarNavSignButton.scss

@@ -14,14 +14,12 @@
     margin-top: 2px; //for visual alignment
 }
 
-.is-responsive-web {
-    @include breakpoint($medium-screen) {
-        .bcs-SidebarNavSignButton-icon {
-            display: none;
-        }
+@include breakpoint($medium-screen) {
+    .bcs-SidebarNavSignButton-icon {
+        display: none;
+    }
 
-        .bcs-SidebarNavSignButton-icon--grayscale {
-            display: inline;
-        }
+    .bcs-SidebarNavSignButton-icon--grayscale {
+        display: inline;
     }
 }

package/src/elements/content-sidebar/__tests__/ActivitySidebar.test.js

@@ -1446,10 +1446,14 @@ describe('elements/content-sidebar/ActivitySidebar', () => {
             const instance = wrapper.instance();
             instance.fetchFeedItems = jest.fn();
 
-            wrapper.instance().handleAnnotationStatusChange('123', 'open', {
-                can_edit: true,
-                can_delete: true,
-                can_resolve: true,
+            wrapper.instance().handleAnnotationStatusChange({
+                id: '123',
+                status: 'open',
+                permissions: {
+                    can_edit: true,
+                    can_delete: true,
+                    can_resolve: true,
+                },
             });
 
             expect(mockEmitAnnotationUpdateEvent).toBeCalledWith({ id: '123', status: 'open' }, true);

package/src/elements/content-sidebar/__tests__/__snapshots__/ActivitySidebar.test.js.snap

@@ -8,9 +8,9 @@ exports[`elements/content-sidebar/ActivitySidebar render() should render the act
         isDisabled={false}
         onTaskModalClose={[Function]}
         taskFormProps={
-          Object {
+          {
             "approverSelectorContacts": undefined,
-            "approvers": Array [],
+            "approvers": [],
             "completionRule": "ALL_ASSIGNEES",
             "createTask": [Function],
             "getApproverWithQuery": [Function],
@@ -34,14 +34,14 @@ exports[`elements/content-sidebar/ActivitySidebar render() should render the act
 >
   <ActivityFeed
     currentUser={
-      Object {
+      {
         "id": "123",
         "name": "foo bar",
       }
     }
     file={
-      Object {
-        "file_version": Object {
+      {
+        "file_version": {
           "id": "123",
         },
         "id": "I_AM_A_FILE",

package/src/elements/content-sidebar/__tests__/__snapshots__/DetailsSidebar.test.js.snap

@@ -14,7 +14,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
 >
   <SidebarAccessStats
     file={
-      Object {
+      {
         "description": "bar",
         "id": "foo",
       }
@@ -40,7 +40,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
   >
     <SidebarNotices
       file={
-        Object {
+        {
           "description": "bar",
           "id": "foo",
         }
@@ -49,13 +49,13 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
   </div>
   <SidebarClassification
     classification={
-      Object {
+      {
         "definition": "message",
         "name": "name",
       }
     }
     file={
-      Object {
+      {
         "description": "bar",
         "id": "foo",
       }
@@ -64,7 +64,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
   />
   <SidebarAccessStats
     file={
-      Object {
+      {
         "description": "bar",
         "id": "foo",
       }
@@ -83,7 +83,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
   >
     <SidebarVersions
       file={
-        Object {
+        {
           "description": "bar",
           "id": "foo",
         }
@@ -91,7 +91,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
     />
     <SidebarFileProperties
       file={
-        Object {
+        {
           "description": "bar",
           "id": "foo",
         }
@@ -121,7 +121,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
   >
     <SidebarNotices
       file={
-        Object {
+        {
           "description": "bar",
           "id": "foo",
         }
@@ -156,7 +156,7 @@ exports[`elements/content-sidebar/DetailsSidebar render() should render DetailsS
   >
     <SidebarFileProperties
       file={
-        Object {
+        {
           "description": "bar",
           "id": "foo",
         }

package/src/elements/content-sidebar/__tests__/__snapshots__/MetadataSidebar.test.js.snap

@@ -19,8 +19,8 @@ exports[`elements/content-sidebar/Metadata/MetadataSidebar should render Metadat
   >
     <Instances
       editors={
-        Array [
-          Object {},
+        [
+          {},
         ]
       }
       onModification={[Function]}
@@ -62,9 +62,9 @@ exports[`elements/content-sidebar/Metadata/MetadataSidebar should render Metadat
       hasTemplates={false}
       isDropdownBusy={false}
       onAdd={[Function]}
-      templates={Array []}
+      templates={[]}
       usedTemplates={
-        Array [
+        [
           undefined,
         ]
       }
@@ -86,8 +86,8 @@ exports[`elements/content-sidebar/Metadata/MetadataSidebar should render Metadat
   >
     <Instances
       editors={
-        Array [
-          Object {},
+        [
+          {},
         ]
       }
       onModification={[Function]}

package/src/elements/content-sidebar/__tests__/__snapshots__/SidebarAccessStats.test.js.snap

@@ -34,36 +34,36 @@ exports[`elements/content-sidebar/SidebarAccessStats should render the component
   <AccessStats
     commentCount={0}
     commentStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-comments",
       }
     }
     downloadCount={0}
     downloadStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-downloads",
       }
     }
     editCount={0}
     editStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-edits",
       }
     }
     isBoxNote={false}
     previewCount={0}
     previewStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-previews",
       }
     }
     viewMoreButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-viewdetails",
       }
     }
     viewStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-views",
       }
     }
@@ -86,36 +86,36 @@ exports[`elements/content-sidebar/SidebarAccessStats should render the component
   <AccessStats
     commentCount={0}
     commentStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-comments",
       }
     }
     downloadCount={0}
     downloadStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-downloads",
       }
     }
     editCount={0}
     editStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-edits",
       }
     }
     isBoxNote={false}
     previewCount={1}
     previewStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-previews",
       }
     }
     viewMoreButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-viewdetails",
       }
     }
     viewStatButtonProps={
-      Object {
+      {
         "data-resin-target": "accessstats-views",
       }
     }

package/src/elements/content-sidebar/__tests__/__snapshots__/SidebarClassification.test.js.snap

@@ -4,7 +4,7 @@ exports[`elements/content-sidebar/SidebarClassification render() should render c
 <Collapsible
   animationDuration={100}
   buttonProps={
-    Object {
+    {
       "data-resin-target": "classification",
     }
   }
@@ -36,7 +36,7 @@ exports[`elements/content-sidebar/SidebarClassification render() should render c
 <Collapsible
   animationDuration={100}
   buttonProps={
-    Object {
+    {
       "data-resin-target": "classification",
     }
   }
@@ -62,7 +62,7 @@ exports[`elements/content-sidebar/SidebarClassification render() should render c
 <Collapsible
   animationDuration={100}
   buttonProps={
-    Object {
+    {
       "data-resin-target": "classification",
     }
   }

package/src/elements/content-sidebar/__tests__/__snapshots__/SidebarFileProperties.test.js.snap

@@ -6,14 +6,14 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render I
     createdAt="2018-04-18T16:56:05.352Z"
     description="foo"
     descriptionTextareaProps={
-      Object {
+      {
         "data-resin-target": "description",
       }
     }
     modifiedAt="2018-04-18T16:56:05.352Z"
     onDescriptionChange={[MockFunction]}
     owner="foo"
-    retentionPolicyProps={Object {}}
+    retentionPolicyProps={{}}
     size="1 B"
     uploader="foo"
   />
@@ -26,14 +26,14 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render I
     createdAt="2018-04-18T16:56:05.352Z"
     description="foo"
     descriptionTextareaProps={
-      Object {
+      {
         "data-resin-target": "description",
       }
     }
     modifiedAt="2018-04-18T16:56:05.352Z"
     onDescriptionChange={[MockFunction]}
     owner="foo"
-    retentionPolicyProps={Object {}}
+    retentionPolicyProps={{}}
     size="1 B"
     uploader="File Request"
   />
@@ -59,7 +59,7 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render a
   </InlineError>
   <SidebarFileProperties
     intl={
-      Object {
+      {
         "formatDate": [Function],
         "formatMessage": [Function],
         "formatNumber": [Function],
@@ -73,19 +73,19 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render a
 exports[`elements/content-sidebar/SidebarFileProperties render() should render retention policy information when given proper props and callback 1`] = `
 <SidebarFileProperties
   file={
-    Object {
+    {
       "size": "1",
     }
   }
   hasRetentionPolicy={true}
   intl={
-    Object {
+    {
       "locale": "en",
     }
   }
   onRetentionPolicyExtendClick={[MockFunction]}
   retentionPolicy={
-    Object {
+    {
       "dispositionTime": 1556317461,
       "policyName": "test policy",
       "policyType": "finite",
@@ -99,12 +99,12 @@ exports[`elements/content-sidebar/SidebarFileProperties render() should render r
     >
       <ItemProperties
         descriptionTextareaProps={
-          Object {
+          {
             "data-resin-target": "description",
           }
         }
         retentionPolicyProps={
-          Object {
+          {
             "dispositionTime": 1556317461,
             "openModal": [MockFunction],
             "policyName": "test policy",