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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-ui-elements",
-    "version": "19.0.0-beta.9",
+    "version": "19.0.0",
     "description": "Box UI Elements",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -42,18 +42,18 @@
         "build": "yarn build:dev:dist",
         "build:ci:es": "yarn build:prod:es",
         "build:ci:dist": "LANGUAGE=en-US ENTRY=explorer REACT=true yarn build:prod:dist",
-        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider webpack --config scripts/webpack.config.js --mode development --progress --colors",
+        "build:dev:dist": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development webpack --config scripts/webpack.config.js --mode development --progress --colors",
         "build:dev:es": "BABEL_ENV=development NODE_ENV=development yarn build:es --copy-files --source-maps inline --watch --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
         "build:es": "babel src --extensions '.js,.tsx,.ts' --out-dir es",
         "build:i18n": "props2es",
         "build:npm": "npm-run-all clean build:i18n build:prod:npm build:prod:es",
         "build:prod:analyze": "BUNDLE_ANALYSIS=true npm-run-all setup build:prod:npm",
         "build:prod:es": "BABEL_ENV=npm NODE_ENV=production yarn build:es --source-maps --ignore \"**/*.d.ts,**/__tests__/**,**/__mocks__/**\"",
-        "build:prod:dist": "NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider webpack --config scripts/webpack.config.js --mode production",
-        "build:prod:examples": "LANGUAGE=en-US REACT=true NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js build --config scripts/styleguide.config.js --mode production",
+        "build:prod:dist": "NODE_ENV=production webpack --config scripts/webpack.config.js --mode production",
+        "build:prod:examples": "LANGUAGE=en-US REACT=true NODE_ENV=production node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js build --config scripts/styleguide.config.js --mode production",
         "build:prod:npm": "BABEL_ENV=production OUTPUT=dist LANGUAGE=en-US REACT=true yarn build:prod:dist",
-        "build:prod:storybook": "LANGUAGE=en-US REACT=true BROWSERSLIST_ENV=production BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o styleguide/storybook",
-        "build:sync": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider RSYNC=true webpack --config scripts/webpack.config.js --mode development",
+        "build:prod:storybook": "LANGUAGE=en-US REACT=true BROWSERSLIST_ENV=production BABEL_ENV=development NODE_ENV=development storybook build -c .storybook -o styleguide/storybook",
+        "build:sync": "LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development RSYNC=true webpack --config scripts/webpack.config.js --mode development",
         "build:assets": "./scripts/asset-import/cli.js",
         "clean": "rm -rf dist es i18n/json i18n/*.js reports styleguide",
         "copy:flow": "flow-copy-source --ignore \"**/__tests__/**\" --ignore \"**/__mocks__/**\" --ignore \"**/*.ts\" ./src ./es && copyfiles './src/**/*.js.flow' es --up 1",
@@ -74,10 +74,10 @@
         "release:cdn": "yarn setup; node ./scripts/prod.js",
         "setup": "yarn install --frozen-lockfile; npm-run-all clean build:i18n",
         "start": "npm-run-all setup start:examples",
-        "start:dev": "yarn setup; LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider node --max_old_space_size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config scripts/webpack.config.js --mode development",
-        "start:examples": "EXAMPLES=true LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js server --config scripts/styleguide.config.js --mode development",
+        "start:dev": "yarn setup; LANGUAGE=en-US BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config scripts/webpack.config.js --mode development",
+        "start:examples": "EXAMPLES=true LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development node --max_old_space_size=8192 node_modules/react-styleguidist/bin/styleguidist.js server --config scripts/styleguide.config.js --mode development",
         "start:npm": "yarn setup; yarn build:dev:es",
-        "start:storybook": "LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6061",
+        "start:storybook": "LANGUAGE=en-US REACT=true BABEL_ENV=development NODE_ENV=development storybook dev -p 6061",
         "start:storybook:ci": "yarn start:storybook --ci",
         "test": "BABEL_ENV=test NODE_ENV=test yarn jest -c scripts/jest/jest.config.js",
         "test:e2e": "BROWSERSLIST_ENV=test npm-run-all -p -r start:examples cy:run",
@@ -176,17 +176,17 @@
         "@formatjs/intl-unified-numberformat": "^3.2.0",
         "@hapi/address": "2.1.1",
         "@sambego/storybook-state": "^2.0.1",
-        "@storybook/addon-actions": "^5.3.9",
-        "@storybook/addon-docs": "^5.3.9",
-        "@storybook/addon-info": "^5.3.9",
-        "@storybook/addon-knobs": "^5.3.9",
-        "@storybook/addon-links": "^5.3.9",
-        "@storybook/addon-notes": "^5.3.9",
-        "@storybook/addon-storyshots": "^5.3.9",
-        "@storybook/addon-viewport": "^5.3.9",
-        "@storybook/addons": "^5.3.9",
-        "@storybook/preset-typescript": "^1.1.0",
-        "@storybook/react": "^5.3.9",
+        "@storybook/addon-actions": "^7.5.3",
+        "@storybook/addon-essentials": "^7.5.3",
+        "@storybook/addon-interactions": "^7.5.3",
+        "@storybook/addon-knobs": "^7.0.2",
+        "@storybook/addon-links": "^7.5.3",
+        "@storybook/addon-storyshots": "^7.5.3",
+        "@storybook/addon-styling": "^1.3.7",
+        "@storybook/addon-styling-webpack": "^0.0.5",
+        "@storybook/addons": "^7.5.3",
+        "@storybook/react-webpack5": "^7.5.3",
+        "@storybook/theming": "^7.5.3",
         "@svgr/core": "^5.0.1",
         "@svgr/plugin-prettier": "^5.0.1",
         "@svgr/plugin-svgo": "^5.1.0",
@@ -197,28 +197,28 @@
         "@types/color": "^3.0.2",
         "@types/enzyme": "^3.10.4",
         "@types/history": "^4.7.5",
-        "@types/jest": "^25.1.1",
+        "@types/jest": "^29.5.11",
         "@types/jest-image-snapshot": "^2.11.0",
         "@types/lodash": "^4.14.149",
         "@types/node": "^13.5.2",
         "@types/pikaday": "^1.7.4",
         "@types/puppeteer": "^2.0.1",
         "@types/react": "^16.9.18",
-        "@types/react-beautiful-dnd": "^13.0.0",
+        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^16.9.5",
         "@types/react-measure": "^2.0.6",
         "@types/react-router-dom": "^5.1.3",
         "@types/sinon": "^7.5.1",
         "@types/webpack": "^4.41.3",
-        "@typescript-eslint/eslint-plugin": "^4.11.1",
-        "@typescript-eslint/parser": "^4.11.1",
+        "@typescript-eslint/eslint-plugin": "^6.10.0",
+        "@typescript-eslint/parser": "^6.10.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
         "autoprefixer": "^9.7.4",
         "axios": "0.25.0",
         "babel-core": "^7.0.0-bridge.0",
         "babel-eslint": "^10.0.3",
         "babel-jest": "^24.9.0",
-        "babel-loader": "^8.0.6",
+        "babel-loader": "^8.3.0",
         "babel-plugin-dynamic-import-node": "^2.3.0",
         "babel-plugin-flow-react-proptypes": "^25.1.0",
         "babel-plugin-react-intl": "^5.1.18",
@@ -244,7 +244,7 @@
         "draft-js": "^0.10.1",
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.4.3",
-        "eslint": "^6.7.2",
+        "eslint": "^7.32.0",
         "eslint-config-airbnb": "^18.0.1",
         "eslint-config-prettier": "^6.9.0",
         "eslint-plugin-babel": "^5.3.0",
@@ -258,6 +258,7 @@
         "eslint-plugin-prettier": "^3.1.2",
         "eslint-plugin-react": "^7.18.0",
         "eslint-plugin-react-hooks": "^2.3.0",
+        "eslint-plugin-storybook": "^0.6.15",
         "filesize": "^4.1.2",
         "flow-bin": "^0.95.1",
         "flow-copy-source": "^2.0.9",
@@ -270,7 +271,8 @@
         "intl": "^1.2.5",
         "intl-messageformat": "^7.8.4",
         "intl-messageformat-parser": "^3.6.4",
-        "jest": "^25.1.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
         "jest-image-snapshot": "^2.12.0",
         "jest-puppeteer": "^4.4.0",
         "js-sha1": "0.6.0",
@@ -299,7 +301,7 @@
         "raf": "^3.4.1",
         "react": "^17.0.1",
         "react-animate-height": "^2.0.8",
-        "react-beautiful-dnd": "^11.0.5",
+        "react-beautiful-dnd": "^13.1.1",
         "react-docgen-typescript": "^1.16.1",
         "react-docgen-typescript-loader": "^3.6.0",
         "react-dom": "^17.0.1",
@@ -316,7 +318,7 @@
         "react-styleguidist": "^8.0.6",
         "react-test-renderer": "^16.13.1",
         "react-tether": "1.0.5",
-        "react-textarea-autosize": "^7.1.0",
+        "react-textarea-autosize": "^8.5.3",
         "regenerator-runtime": "^0.13.3",
         "rimraf": "^3.0.1",
         "sanitize-html": "1.21.1",
@@ -329,8 +331,7 @@
         "sinon": "^2.3.7",
         "source-map-loader": "^0.2.4",
         "start-server-and-test": "^1.10.8",
-        "storybook": "^5.3.9",
-        "storybook-addon-intl": "^2.4.1",
+        "storybook": "^7.5.3",
         "string-replace-loader": "^2.2.0",
         "style-loader": "^1.0.0",
         "styled-components": "^5.0.0",
@@ -340,11 +341,11 @@
         "stylelint-order": "^3.1.1",
         "tabbable": "^1.1.3",
         "ts-loader": "^6.2.1",
-        "typescript": "^3.7.5",
+        "typescript": "^5.2.2",
         "uniqid": "^5.2.0",
         "uuid": "^8.3.2",
         "wait-on": "^3.3.0",
-        "webpack": "^4.41.5",
+        "webpack": "^4.47.0",
         "webpack-bundle-analyzer": "^3.6.0",
         "webpack-cli": "^3.3.10",
         "webpack-dev-server": "^3.10.1",
@@ -374,7 +375,7 @@
         "query-string": "5.1.1",
         "react": "^17.0.1",
         "react-animate-height": "^2.0.8",
-        "react-beautiful-dnd": "^11.0.5",
+        "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^17.0.1",
         "react-draggable": "^3.3.0",
         "react-immutable-proptypes": "^2.1.0",
@@ -387,7 +388,7 @@
         "react-router-dom": "^5.0.0",
         "react-scrollbars-custom": "^4.0.21",
         "react-tether": "^1.0.0",
-        "react-textarea-autosize": "^7.1.0",
+        "react-textarea-autosize": "^8.5.3",
         "regenerator-runtime": "^0.13.2",
         "sanitize-html": "1.21.1",
         "sass": "1.34.1",
@@ -402,6 +403,17 @@
         }
     },
     "resolutions": {
-        "ip": "1.1.8"
+        "ip": "1.1.8",
+        "terser-webpack-plugin": "^4.2.3"
+    },
+    "overrides": {
+        "draft-js": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        },
+        "react-tether": {
+            "react": "$react",
+            "react-dom": "$react-dom"
+        }
     }
 }

package/src/api/APIFactory.js

@@ -35,6 +35,7 @@ import AnnotationsAPI from './Annotations';
 import OpenWithAPI from './OpenWith';
 import MetadataQueryAPI from './MetadataQuery';
 import BoxEditAPI from './box-edit';
+import IntelligenceAPI from './Intelligence';
 import { DEFAULT_HOSTNAME_API, DEFAULT_HOSTNAME_UPLOAD, TYPE_FOLDER, TYPE_FILE, TYPE_WEBLINK } from '../constants';
 import type { ItemType } from '../common/types/core';
 import type { APIOptions } from '../common/types/api';
@@ -198,6 +199,11 @@ class APIFactory {
      */
     annotationsAPI: AnnotationsAPI;
 
+    /**
+     * @property {IntelligenceAPI}
+     */
+    intelligenceAPI: IntelligenceAPI;
+
     /**
      * [constructor]
      *
@@ -367,6 +373,11 @@ class APIFactory {
             delete this.annotationsAPI;
         }
 
+        if (this.intelligenceAPI) {
+            this.intelligenceAPI.destroy();
+            delete this.intelligenceAPI;
+        }
+
         if (destroyCache) {
             this.options.cache = new Cache();
         }
@@ -830,6 +841,20 @@ class APIFactory {
         this.annotationsAPI = new AnnotationsAPI(this.options);
         return this.annotationsAPI;
     }
+
+    /**
+     * API for Intelligence
+     *
+     * @return {IntelligenceAPI} IntelligenceAPI instance
+     */
+    getIntelligenceAPI(shouldDestroy: boolean): IntelligenceAPI {
+        if (shouldDestroy) {
+            this.destroy();
+        }
+
+        this.intelligenceAPI = new IntelligenceAPI(this.options);
+        return this.intelligenceAPI;
+    }
 }
 
 export default APIFactory;

package/src/api/Intelligence.js

@@ -0,0 +1,47 @@
+/**
+ * @flow
+ * @file Helper for the Box AI API endpoint
+ * @author Box
+ */
+
+import Base from './Base';
+import type { BoxItem } from '../common/types/core';
+
+class Intelligence extends Base {
+    /**
+     * API endpoint to ask ai a question
+     *
+     * @param {string} prompt - Question
+     * @param {Array<object>} items - Array of items to ask about
+     * @return {Promise}
+     */
+    async ask(prompt: string, items: Array<BoxItem>) {
+        if (!prompt) {
+            throw new Error('Missing prompt!');
+        }
+
+        if (!items || items.length === 0) {
+            throw new Error('Missing items!');
+        }
+
+        items.forEach(item => {
+            if (!item.id || !item.type) {
+                throw new Error('Invalid item!');
+            }
+        });
+
+        const url = `${this.getBaseApiUrl()}/ai/ask`;
+
+        return this.xhr.post({
+            url,
+            id: `file_${items[0].id}`,
+            data: {
+                mode: 'single_item_qa',
+                prompt,
+                items,
+            },
+        });
+    }
+}
+
+export default Intelligence;

package/src/api/__tests__/Intelligence.test.js

@@ -0,0 +1,81 @@
+import Intelligence from '../Intelligence';
+
+describe('api/Intelligence', () => {
+    let intelligence;
+
+    const mockItems = [{ id: '123', type: 'file' }];
+    const mockPrompt = 'summarize';
+
+    beforeEach(() => {
+        intelligence = new Intelligence({});
+    });
+
+    test('should return promise with data', async () => {
+        const data = { data: 'foo' };
+        intelligence.xhr.post = jest.fn().mockReturnValueOnce(Promise.resolve(data));
+        const response = await intelligence.ask(mockPrompt, mockItems);
+        expect(response).toEqual(data);
+    });
+
+    test('should make post to xhr', async () => {
+        const data = {
+            data: {
+                items: mockItems,
+                mode: 'single_item_qa',
+                prompt: mockPrompt,
+            },
+            id: 'file_123',
+            url: 'https://api.box.com/2.0/ai/ask',
+        };
+        const postMock = jest.fn();
+        intelligence.xhr.post = postMock.mockReturnValueOnce(Promise.resolve({}));
+        await intelligence.ask(mockPrompt, mockItems);
+        expect(postMock).toBeCalledWith(data);
+    });
+
+    test('should call error handler', async () => {
+        intelligence.xhr.post = jest.fn().mockReturnValueOnce(
+            // eslint-disable-next-line prefer-promise-reject-errors
+            Promise.reject({
+                response: {
+                    data: 'bad',
+                },
+            }),
+        );
+        try {
+            await intelligence.ask(mockPrompt, mockItems);
+        } catch (e) {
+            expect(e).toEqual({
+                response: {
+                    data: 'bad',
+                },
+            });
+        }
+    });
+
+    test.each`
+        prompt        | items        | message              | missing
+        ${''}         | ${mockItems} | ${'Missing prompt!'} | ${'prompt'}
+        ${mockPrompt} | ${[{}]}      | ${'Invalid item!'}   | ${'item'}
+    `('should throw error if $missing is missing  ', async ({ prompt, items, message }) => {
+        try {
+            await intelligence.ask(prompt, items);
+            expect(true).toEqual(false); // should never hit this line, if it does then the test fails
+        } catch (e) {
+            expect(e.message).toEqual(message);
+        }
+    });
+
+    test.each`
+        badItems     | description
+        ${undefined} | ${'undefined'}
+        ${[]}        | ${'an empty array'}
+    `('should throw error if items is $description ', async ({ badItems }) => {
+        try {
+            await intelligence.ask(prompt, badItems);
+            expect(true).toEqual(false); // should never hit this line, if it does then the test fails
+        } catch (e) {
+            expect(e.message).toEqual('Missing items!');
+        }
+    });
+});

package/src/api/__tests__/Item.test.js

@@ -659,7 +659,7 @@ describe('api/Item', () => {
             item.errorHandler = jest.fn();
             item.getUrl = jest.fn().mockReturnValueOnce('url');
             item.xhr = {
-                delete: jest.fn().mockReturnValueOnce(Promise.reject(error)),
+                delete: jest.fn().mockRejectedValue(error),
             };
             return item.deleteItem(file, 'success', 'error').then(() => {
                 expect(item.errorHandler).toHaveBeenCalledWith(error);

package/src/api/uploads/__tests__/BaseUpload.test.js

@@ -355,7 +355,7 @@ describe('api/uploads/BaseUpload', () => {
             upload.preflightErrorHandler({
                 status: 429,
             });
-            clock.runTimersToTime(retryAfterMs + 1);
+            clock.advanceTimersByTime(retryAfterMs + 1);
 
             expect(upload.makePreflightRequest).toHaveBeenCalled();
         });
@@ -368,7 +368,7 @@ describe('api/uploads/BaseUpload', () => {
             upload.preflightErrorHandler({
                 code: 'too_many_requests',
             });
-            clock.runTimersToTime(retryAfterMs + 1);
+            clock.advanceTimersByTime(retryAfterMs + 1);
 
             expect(upload.makePreflightRequest).toHaveBeenCalled();
         });
@@ -385,7 +385,7 @@ describe('api/uploads/BaseUpload', () => {
                     get: getMock,
                 },
             });
-            clock.runTimersToTime(retryAfterMs + 1);
+            clock.advanceTimersByTime(retryAfterMs + 1);
 
             expect(upload.makePreflightRequest).toHaveBeenCalled();
             expect(getMock).toHaveBeenCalledWith('Retry-After');
@@ -415,7 +415,7 @@ describe('api/uploads/BaseUpload', () => {
             upload.makePreflightRequest = jest.fn();
 
             upload.preflightErrorHandler(error);
-            clock.runTimersToTime(retryAfterMs + 1);
+            clock.advanceTimersByTime(retryAfterMs + 1);
 
             expect(upload.makePreflightRequest).toHaveBeenCalled();
         });
@@ -428,7 +428,7 @@ describe('api/uploads/BaseUpload', () => {
             upload.retryCount = retryCount;
 
             upload.preflightErrorHandler(error);
-            clock.runTimersToTime(2 ** retryCount * MS_IN_S - 1);
+            clock.advanceTimersByTime(2 ** retryCount * MS_IN_S - 1);
 
             expect(upload.retryCount).toBe(retryCount + 1);
 

package/src/api/uploads/__tests__/FolderUpload.test.js

@@ -4,7 +4,7 @@ import FolderUpload from '../FolderUpload';
 let folderUploadInstance;
 const destinationFolderID = '123';
 jest.mock('../../../utils/uploads', () => ({
-    ...require.requireActual('../../../utils/uploads'),
+    ...jest.requireActual('../../../utils/uploads'),
     getDataTransferItem: jest.fn(item => item.item || item),
     getEntryFromDataTransferItem: jest.fn(item => item),
     getDataTransferItemAPIOptions: jest.fn(item => item.options || {}),

package/src/api/uploads/__tests__/FolderUploadNode.test.js

@@ -9,7 +9,7 @@ import {
 
 jest.mock('../../Folder');
 jest.mock('../../../utils/uploads', () => ({
-    ...require.requireActual('../../../utils/uploads'),
+    ...jest.requireActual('../../../utils/uploads'),
     getFileFromEntry: jest.fn(entry => entry),
 }));
 

package/src/api/uploads/__tests__/MultiputUpload.test.js

@@ -654,7 +654,7 @@ describe('api/uploads/MultiputUpload', () => {
             // Execute
             multiputUploadTest.createSessionRetry();
 
-            clock.runTimersToTime(11);
+            clock.advanceTimersByTime(11);
             expect(uploadUtil.getBoundedExpBackoffRetryDelay).toHaveBeenCalledWith(5000, 60000, 5);
             expect(multiputUploadTest.makePreflightRequest).toHaveBeenCalled();
             expect(multiputUploadTest.createSessionNumRetriesPerformed).toBe(6);

package/src/common/types/core.js

@@ -227,6 +227,7 @@ type BoxItemVersion = {
     modified_by: ?User,
     name?: string,
     permissions?: BoxItemVersionPermission,
+    promoted_by?: ?User,
     restored_at?: string,
     restored_by?: ?User,
     retention?: BoxItemVersionRetention,

package/src/components/accessible-svg/AccessibleSVG.stories.tsx

@@ -13,6 +13,6 @@ export const IconExample = (props: SVGProps) => (
 );
 
 export default {
-    title: 'Components|AccessibleSVG',
+    title: 'Components/AccessibleSVG',
     component: AccessibleSVG,
 };

package/src/components/avatar/Avatar.stories.tsx

@@ -90,7 +90,7 @@ export const withMultipleAvatars = () => (
 export const withoutNameOrInitials = () => <Avatar />;
 
 export default {
-    title: 'Components|Avatar',
+    title: 'Components/Avatar',
     component: Avatar,
     parameters: {
         notes,

package/src/components/badge/Badge.stories.tsx

@@ -19,7 +19,7 @@ export const alert = () => <Badge type={BadgeType.ALERT}>Alert Badge</Badge>;
 export const success = () => <Badge type={BadgeType.SUCCESS}>Success Badge</Badge>;
 
 export default {
-    title: 'Components|Badges/Badge',
+    title: 'Components/Badges/Badge',
     component: Badge,
     parameters: {
         notes,

package/src/components/badge/BetaBadge.stories.tsx

@@ -4,6 +4,6 @@ import BetaBadge from './BetaBadge';
 export const betaBadge = () => <BetaBadge />;
 
 export default {
-    title: 'Components|Badges/BetaBadge',
+    title: 'Components/Badges/BetaBadge',
     component: BetaBadge,
 };

package/src/components/badge/TrialBadge.stories.tsx

@@ -4,6 +4,6 @@ import TrialBadge from './TrialBadge';
 export const trialBadge = () => <TrialBadge />;
 
 export default {
-    title: 'Components|Badges/TrialBadge',
+    title: 'Components/Badges/TrialBadge',
     component: TrialBadge,
 };

package/src/components/badge/UpgradeBadge.stories.tsx

@@ -4,6 +4,6 @@ import UpgradeBadge from './UpgradeBadge';
 export const upgradeBadge = () => <UpgradeBadge />;
 
 export default {
-    title: 'Components|Badges/UpgradeBadge',
+    title: 'Components/Badges/UpgradeBadge',
     component: UpgradeBadge,
 };

package/src/components/breadcrumb/Breadcrumb.stories.js

@@ -31,7 +31,7 @@ export const withMultipleCrumbs = () => (
 );
 
 export default {
-    title: 'Components|Breadcrumb',
+    title: 'Components/Breadcrumb',
     component: Breadcrumb,
     parameters: {
         notes,

package/src/components/button/Button.stories.tsx

@@ -83,7 +83,7 @@ export const fixingMargins = () => (
 );
 
 export default {
-    title: 'Components|Buttons/Button',
+    title: 'Components/Buttons/Button',
     component: Button,
     parameters: {
         notes,

package/src/components/button-group/ButtonGroup.stories.tsx

@@ -22,7 +22,7 @@ export const disabled = () => (
 );
 
 export default {
-    title: 'Components|Buttons/ButtonGroup',
+    title: 'Components/Buttons/ButtonGroup',
     component: ButtonGroup,
     parameters: {
         notes,

package/src/components/category-selector/CategorySelector.stories.tsx

@@ -59,7 +59,7 @@ export const withDropdown = () => {
 };
 
 export default {
-    title: 'Components|CategorySelector',
+    title: 'Components/CategorySelector',
     component: CategorySelector,
     parameters: {
         notes,

package/src/components/checkbox/Checkbox.stories.tsx

@@ -68,7 +68,7 @@ export const withSubsection = () => (
 );
 
 export default {
-    title: 'Components|Checkbox',
+    title: 'Components/Checkbox',
     component: Checkbox,
     parameters: {
         notes,

package/src/components/close-button/CloseButton.stories.tsx

@@ -6,7 +6,7 @@ import notes from './CloseButton.stories.md';
 export const regular = () => <CloseButton />;
 
 export default {
-    title: 'Components|Buttons/CloseButton',
+    title: 'Components/Buttons/CloseButton',
     component: CloseButton,
     parameters: {
         notes,

package/src/components/collapsible/Collapsible.stories.tsx

@@ -63,7 +63,7 @@ export const withButtonInHeader = () => (
 );
 
 export default {
-    title: 'Components|Collapsible',
+    title: 'Components/Collapsible',
     component: Collapsible,
     parameters: {
         notes,