box-ui-elements 16.0.0-beta.9 → 16.0.0

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

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

package/src/icon/line/CommentBubble16.tsx

@@ -0,0 +1,32 @@
+/* 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 CommentBubble16 = (props: SVGProps) => (
+    <AccessibleSVG width={16} height={16} viewBox="0 0 16 16" {...props}>
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M8.905 1A6.09 6.09 0 0115 7.084c0 3.36-2.729 5.917-6.095 5.917H7.83l-3.754 1.927a.767.767 0 01-.736-.049.743.743 0 01-.34-.642v-2.782c-1.343-1.157-2-2.591-2-4.37A6.09 6.09 0 017.095 1h1.81zm0 1A5.09 5.09 0 0114 7.084c0 2.808-2.28 4.917-5.095 4.917H7.6L4 13.839v-2.83l-.326-.315C2.551 9.726 2 8.572 2 7.084A5.09 5.09 0 017.095 2h1.81z"
+            fill={vars.bdlGray}
+        />
+        <path
+            d="M6 7a1 1 0 11-2 0 1 1 0 012 0zm3 0a1 1 0 11-2 0 1 1 0 012 0zm3 0a1 1 0 11-2 0 1 1 0 012 0z"
+            fill={vars.bdlGray}
+        />
+    </AccessibleSVG>
+);
+
+export default CommentBubble16;

package/src/styles/constants/_layout.scss

@@ -2,9 +2,9 @@
 $modal-dialog-z-index: 160 !default;
 $menu-z-index: 170 !default;
 $submenu-z-index: 171 !default;
-$notifications-wrapper-z-index: 180 !default;
 $overlay-z-index: 190 !default;
 $tooltip-z-index: 190 !default;
+$notifications-wrapper-z-index: 200 !default;
 
 // Borders
 $bdl-border-radius-size: 4px;

package/src/styles/constants/_media-queries.scss

@@ -6,11 +6,13 @@ $size-small-max: 374px;
 $size-small-medium-max: 460px;
 $size-medium-max: 767px;
 $size-large-max: 1023px;
+$size-xlarge-max: 1219px;
 
 $small-screen: unquote('(max-width: #{$size-small-max})');
 $small-medium-screen: unquote('(max-width: #{$size-small-medium-max})');
 $medium-screen: unquote('(max-width: #{$size-medium-max})');
 $large-screen: unquote('(max-width: #{$size-large-max})');
+$xlarge-screen: unquote('(max-width: #{$size-xlarge-max})');
 
 @mixin breakpoint($media-query) {
     @media #{$media-query} {

package/src/styles/variables.js

@@ -86,9 +86,9 @@ export const avatarColors = ["#0061d5","#003c84","#767676","#222","#4826c2","#9f
 export const modalDialogZIndex = "160"; // modal-dialog-z-index
 export const menuZIndex = "170"; // menu-z-index
 export const submenuZIndex = "171"; // submenu-z-index
-export const notificationsWrapperZIndex = "180"; // notifications-wrapper-z-index
 export const overlayZIndex = "190"; // overlay-z-index
 export const tooltipZIndex = "190"; // tooltip-z-index
+export const notificationsWrapperZIndex = "200"; // notifications-wrapper-z-index
 export const bdlBorderRadiusSize = "4px"; // bdl-border-radius-size
 export const bdlBorderRadiusSizeMed = "6px"; // bdl-border-radius-size-med
 export const bdlBorderRadiusSizeLarge = "8px"; // bdl-border-radius-size-large
@@ -112,7 +112,9 @@ export const sizeSmallMax = "374px"; // size-small-max
 export const sizeSmallMediumMax = "460px"; // size-small-medium-max
 export const sizeMediumMax = "767px"; // size-medium-max
 export const sizeLargeMax = "1023px"; // size-large-max
+export const sizeXlargeMax = "1219px"; // size-xlarge-max
 export const smallScreen = "(max-width: 374px)"; // small-screen
 export const smallMediumScreen = "(max-width: 460px)"; // small-medium-screen
 export const mediumScreen = "(max-width: 767px)"; // medium-screen
-export const largeScreen = "(max-width: 1023px)"; // large-screen
+export const largeScreen = "(max-width: 1023px)"; // large-screen
+export const xlargeScreen = "(max-width: 1219px)"; // xlarge-screen

package/src/styles/variables.json

@@ -83,9 +83,9 @@
     "modal-dialog-z-index": "160",
     "menu-z-index": "170",
     "submenu-z-index": "171",
-    "notifications-wrapper-z-index": "180",
     "overlay-z-index": "190",
     "tooltip-z-index": "190",
+    "notifications-wrapper-z-index": "200",
     "bdl-border-radius-size": "4px",
     "bdl-border-radius-size-med": "6px",
     "bdl-border-radius-size-large": "8px",
@@ -109,8 +109,10 @@
     "size-small-medium-max": "460px",
     "size-medium-max": "767px",
     "size-large-max": "1023px",
+    "size-xlarge-max": "1219px",
     "small-screen": "(max-width: 374px)",
     "small-medium-screen": "(max-width: 460px)",
     "medium-screen": "(max-width: 767px)",
-    "large-screen": "(max-width: 1023px)"
+    "large-screen": "(max-width: 1023px)",
+    "xlarge-screen": "(max-width: 1219px)"
 }

package/src/styles/variables.ts

@@ -83,9 +83,9 @@ export const avatarColors = ['#0061d5', '#003c84', '#767676', '#222', '#4826c2',
 export const modalDialogZIndex = '160'; // modal-dialog-z-index
 export const menuZIndex = '170'; // menu-z-index
 export const submenuZIndex = '171'; // submenu-z-index
-export const notificationsWrapperZIndex = '180'; // notifications-wrapper-z-index
 export const overlayZIndex = '190'; // overlay-z-index
 export const tooltipZIndex = '190'; // tooltip-z-index
+export const notificationsWrapperZIndex = '200'; // notifications-wrapper-z-index
 export const bdlBorderRadiusSize = '4px'; // bdl-border-radius-size
 export const bdlBorderRadiusSizeMed = '6px'; // bdl-border-radius-size-med
 export const bdlBorderRadiusSizeLarge = '8px'; // bdl-border-radius-size-large
@@ -109,7 +109,9 @@ export const sizeSmallMax = '374px'; // size-small-max
 export const sizeSmallMediumMax = '460px'; // size-small-medium-max
 export const sizeMediumMax = '767px'; // size-medium-max
 export const sizeLargeMax = '1023px'; // size-large-max
+export const sizeXlargeMax = '1219px'; // size-xlarge-max
 export const smallScreen = '(max-width: 374px)'; // small-screen
 export const smallMediumScreen = '(max-width: 460px)'; // small-medium-screen
 export const mediumScreen = '(max-width: 767px)'; // medium-screen
 export const largeScreen = '(max-width: 1023px)'; // large-screen
+export const xlargeScreen = '(max-width: 1219px)'; // xlarge-screen

package/src/utils/__tests__/fields.test.js

@@ -1,14 +1,15 @@
 import {
+    COMMENTS_FIELDS_TO_FETCH,
+    FEED_FILE_VERSIONS_FIELDS_TO_FETCH,
+    FILE_VERSIONS_FIELDS_TO_FETCH,
     FOLDER_FIELDS_TO_FETCH,
     PREVIEW_FIELDS_TO_FETCH,
     SIDEBAR_FIELDS_TO_FETCH,
-    TASKS_FIELDS_TO_FETCH,
-    FILE_VERSIONS_FIELDS_TO_FETCH,
     TASK_ASSIGNMENTS_FIELDS_TO_FETCH,
-    COMMENTS_FIELDS_TO_FETCH,
-    findMissingProperties,
+    TASKS_FIELDS_TO_FETCH,
     fillMissingProperties,
     fillUserPlaceholder,
+    findMissingProperties,
 } from '../fields';
 import {
     FIELD_ID,
@@ -100,6 +101,24 @@ describe('util/fields', () => {
         ]);
     });
 
+    test('should fetch correct activity feed fields', () => {
+        expect(FEED_FILE_VERSIONS_FIELDS_TO_FETCH).toEqual([
+            FIELD_CREATED_AT,
+            FIELD_EXTENSION,
+            FIELD_IS_DOWNLOAD_AVAILABLE,
+            FIELD_MODIFIED_AT,
+            FIELD_MODIFIED_BY,
+            FIELD_NAME,
+            FIELD_RESTORED_AT,
+            FIELD_RESTORED_BY,
+            FIELD_SIZE,
+            FIELD_TRASHED_AT,
+            FIELD_TRASHED_BY,
+            FIELD_UPLOADER_DISPLAY_NAME,
+            FIELD_VERSION_NUMBER,
+        ]);
+    });
+
     test('should fetch correct sidebar fields', () => {
         expect(SIDEBAR_FIELDS_TO_FETCH).toEqual([
             FIELD_ID,

package/src/utils/__tests__/sorter.test.js

@@ -1,6 +1,6 @@
 import Cache from '../Cache';
 import sort, { sortFeedItems } from '../sorter';
-import { SORT_ASC, SORT_DESC } from '../../constants';
+import { FEED_ITEM_TYPE_COMMENT, FEED_ITEM_TYPE_TASK, SORT_ASC, SORT_DESC } from '../../constants';
 import { annotation as mockAnnotation } from '../../__mocks__/annotations';
 
 let cache;
@@ -270,7 +270,7 @@ describe('util/sorter', () => {
             total_count: 1,
             entries: [
                 {
-                    type: 'comment',
+                    type: FEED_ITEM_TYPE_COMMENT,
                     id: '123',
                     created_at: 'Thu Sep 26 33658 19:46:39 GMT-0600 (CST)',
                     tagged_message: 'test @[123:Jeezy] @[10:Kanye West]',
@@ -282,7 +282,7 @@ describe('util/sorter', () => {
             total_count: 1,
             entries: [
                 {
-                    type: 'task',
+                    type: FEED_ITEM_TYPE_TASK,
                     id: '1234',
                     created_at: 'Thu Sep 25 33658 19:45:39 GMT-0600 (CST)',
                     modified_at: 'Thu Sep 25 33658 19:46:39 GMT-0600 (CST)',

package/src/utils/error.js

@@ -22,6 +22,10 @@ function getBadUserError(): Error {
     return new Error('Bad box user!');
 }
 
+function getMissingItemTextOrStatus(): Error {
+    return new Error('Missing text or status!');
+}
+
 function isUserCorrectableError(status: number) {
     return (
         status === HTTP_STATUS_CODE_RATE_LIMIT ||
@@ -31,4 +35,4 @@ function isUserCorrectableError(status: number) {
     );
 }
 
-export { getBadItemError, getBadPermissionsError, getBadUserError, isUserCorrectableError };
+export { getBadItemError, getBadPermissionsError, getBadUserError, getMissingItemTextOrStatus, isUserCorrectableError };

package/src/utils/fields.js

@@ -126,6 +126,23 @@ const PREVIEW_FIELDS_TO_FETCH = [
     FIELD_IS_DOWNLOAD_AVAILABLE,
 ];
 
+// Fields needed to get versions for a file in activity feed
+const FEED_FILE_VERSIONS_FIELDS_TO_FETCH = [
+    FIELD_CREATED_AT,
+    FIELD_EXTENSION,
+    FIELD_IS_DOWNLOAD_AVAILABLE,
+    FIELD_MODIFIED_AT,
+    FIELD_MODIFIED_BY,
+    FIELD_NAME,
+    FIELD_RESTORED_AT,
+    FIELD_RESTORED_BY,
+    FIELD_SIZE,
+    FIELD_TRASHED_AT,
+    FIELD_TRASHED_BY,
+    FIELD_UPLOADER_DISPLAY_NAME,
+    FIELD_VERSION_NUMBER,
+];
+
 // Fields needed to get information on the current version of a file
 const FILE_VERSION_FIELDS_TO_FETCH = [
     FIELD_FILE_VERSION,
@@ -139,17 +156,17 @@ const FILE_VERSION_FIELDS_TO_FETCH = [
 
 // Fields needed to get versions for a file
 const FILE_VERSIONS_FIELDS_TO_FETCH = [
-    FIELD_AUTHENTICATED_DOWNLOAD_URL,
+    FIELD_AUTHENTICATED_DOWNLOAD_URL, // Expensive field to fetch
     FIELD_CREATED_AT,
     FIELD_EXTENSION,
     FIELD_IS_DOWNLOAD_AVAILABLE,
     FIELD_MODIFIED_AT,
     FIELD_MODIFIED_BY,
     FIELD_NAME,
-    FIELD_PERMISSIONS,
+    FIELD_PERMISSIONS, // Expensive field to fetch
     FIELD_RESTORED_AT,
     FIELD_RESTORED_BY,
-    FIELD_RETENTION,
+    FIELD_RETENTION, // Expensive field to fetch
     FIELD_SIZE,
     FIELD_TRASHED_AT,
     FIELD_TRASHED_BY,
@@ -255,6 +272,7 @@ function fillUserPlaceholder(obj: Object): Object {
 export {
     APP_ACTIVITY_FIELDS_TO_FETCH,
     COMMENTS_FIELDS_TO_FETCH,
+    FEED_FILE_VERSIONS_FIELDS_TO_FETCH,
     FILE_SHARED_LINK_FIELDS_TO_FETCH,
     FILE_VERSION_FIELDS_TO_FETCH,
     FILE_VERSIONS_FIELDS_TO_FETCH,

package/src/utils/sorter.js

@@ -6,7 +6,7 @@
 
 import comparator from './comparator';
 import { getBadItemError } from './error';
-import type { Annotations, AppActivityItems, Comments, FeedItems, Tasks } from '../common/types/feed';
+import type { Annotations, AppActivityItems, Comments, FeedItems, Tasks, ThreadedComments } from '../common/types/feed';
 import type {
     SortBy,
     SortDirection,
@@ -67,7 +67,7 @@ export default function(
  * @return {Array<?Comments | ?Tasks | ?FileVersions>} the sorted feed items
  */
 export function sortFeedItems(
-    ...args: Array<?Comments | ?Tasks | ?FileVersions | ?AppActivityItems | ?Annotations>
+    ...args: Array<?Comments | ?ThreadedComments | ?Tasks | ?FileVersions | ?AppActivityItems | ?Annotations>
 ): FeedItems {
     const feedItems: FeedItems = args
         .reduce((items, itemContainer) => {

package/es/common/types/threadedComments.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=threadedComments.js.map

package/es/common/types/threadedComments.js.flow

@@ -1,9 +0,0 @@
-// @flow
-
-export type ThreadedCommentStatus = 'open' | 'resolved';
-
-export type ThreadedCommentPermission = {
-    can_delete?: boolean,
-    can_edit?: boolean,
-    can_resolve?: boolean,
-};

package/src/common/types/threadedComments.js

@@ -1,9 +0,0 @@
-// @flow
-
-export type ThreadedCommentStatus = 'open' | 'resolved';
-
-export type ThreadedCommentPermission = {
-    can_delete?: boolean,
-    can_edit?: boolean,
-    can_resolve?: boolean,
-};