From f426141835e191441c20abb1a1d528bebc65a572 Mon Sep 17 00:00:00 2001 From: Greg Wong Date: Thu, 25 Apr 2024 16:20:44 -0400 Subject: [PATCH 01/26] WIP --- .storybook/main.ts | 18 +- i18n/en-US.properties | 6 - package.json | 59 ++-- scripts/jest/enzyme-adapter.js | 2 +- scripts/jest/jest-setup.ts | 5 + .../__snapshots__/Collapsible.test.tsx.snap | 161 +-------- .../dropdown-menu/DropdownMenu.stories.js | 8 +- .../__tests__/DropdownMenu.test.js | 30 +- src/components/flyout/Flyout.stories.tsx | 23 +- .../flyout/__tests__/Flyout.test.js | 16 +- .../FooterIndicator.stories.test.tsx | 34 +- .../form-elements/formik/Formik.stories.js | 5 +- src/components/ghost/Ghost.stories.tsx | 3 +- src/components/header/Header.stories.tsx | 3 +- .../label-pill/LabelPill.stories.tsx | 29 +- src/components/label/Label.stories.tsx | 3 +- .../link/stories/LinkButton.stories.tsx | 2 - .../stories/LinkPrimaryButton.stories.tsx | 8 +- .../stories/SelectMenuLinkItem.stories.tsx | 3 +- .../nav-sidebar/NavSidebar.stories.js | 3 +- .../radio/stories/RadioButton.stories.tsx | 5 +- .../radio/stories/RadioGroup.stories.tsx | 3 +- .../select-button/SelectButton.stories.js | 3 +- src/components/select/Select.stories.js | 5 +- src/components/tooltip/Tooltip.stories.tsx | 53 +-- .../__tests__/useAnnotatorEvents.test.tsx | 2 +- .../common/droppable/makeDroppable.js | 314 +++++------------- .../stories/ContentExplorer.mdx | 219 +++++++----- .../stories/ContentExplorer.stories.js | 1 + .../DeleteConfirmationDialog.stories.js | 3 +- .../tests/ContentExplorer-visual.stories.js | 2 +- ...DeleteConfirmationDialog-visual.stories.js | 3 +- .../__tests__/PreviewNavigation.test.js | 7 +- .../PreviewNavigation.test.js.snap | 279 ++++++++++++++++ .../stories/ContentPreview.stories.js | 7 +- .../stories/ContentSharing.mdx | 3 +- .../content-sidebar/SidebarNavButton.js | 48 ++- .../__tests__/useAnnotationAPI.test.js | 2 +- .../__tests__/useAnnotationThread.test.js | 2 +- .../__tests__/useRepliesAPI.test.js | 2 +- .../comment/__tests__/BaseComment.test.js | 13 +- .../CollapsibleSidebar.stories.js | 34 +- .../__tests__/CollapsibleSidebarNav.test.js | 5 +- .../__tests__/SandboxBanner.stories.test.tsx | 36 +- .../stories/SecurityCloudGame.stories.js | 8 +- .../targeting/__tests__/useShowOne.test.js | 2 +- .../utils/__tests__/useCallOnce.test.js | 2 +- .../utils/__tests__/useCombined.test.js | 2 +- .../utils/__tests__/useOnClickBody.test.js | 2 +- .../utils/__tests__/useSuppressed.test.js | 2 +- .../DraggableVirtualizedTable.stories.js | 3 +- .../RetentionPolicyModifiable32.stories.tsx | 3 +- ...RetentionPolicyNonModifiable32.stories.tsx | 3 +- .../IconCollectionsStarFilled.stories.tsx | 3 +- .../EmptyStatePreviewActivity140.stories.tsx | 3 +- src/utils/__tests__/dom.test.js | 2 +- 56 files changed, 766 insertions(+), 741 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index d7ead195db..6a9a729eda 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -2,8 +2,15 @@ import path from 'path'; const language = process.env.LANGUAGE; -const config: { webpackFinal: (config: any) => Promise; staticDirs: string[]; stories: string[]; framework: { name: string }; addons: (string | { name: string; options: { sass: { implementation: any } } } | { name: string; options: { mdxPluginOptions: { mdxCompileOptions: { remarkPlugins: any[] } } } })[] } = { - stories: ['../src/**/*.mdx','../src/**/*.stories.@(js|jsx|ts|tsx)'], +const config: { + webpackFinal: (config: any) => Promise; + staticDirs: string[]; + stories: string[]; + framework: { name: string }; + addons: (string | { name: string; options: { sass: { implementation: any } } })[] +} = { + stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ '@storybook/addon-links', '@storybook/addon-essentials', @@ -17,11 +24,18 @@ const config: { webpackFinal: (config: any) => Promise; staticDirs: string[ }, }, '@storybook/addon-styling-webpack', + '@storybook/addon-docs', + '@storybook/addon-webpack5-compiler-babel', + '@chromatic-com/storybook', + 'storybook-react-intl' ], + framework: { name: '@storybook/react-webpack5', }, + staticDirs: ['public'], + webpackFinal: async (config: any) => { // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION' // You can change the configuration based on that. diff --git a/i18n/en-US.properties b/i18n/en-US.properties index 3eb96c6258..378bf6dd0c 100644 --- a/i18n/en-US.properties +++ b/i18n/en-US.properties @@ -34,12 +34,6 @@ be.activitySidebarFilter.status.tasks = Tasks be.add = Add # Text to display when app is disabled by applied access policy be.additionalTab.blockedByShieldAccessPolicy = Use of this app is blocked due to a security policy. -# Error message when an annotation deletion fails -be.annotationThread.errorDeleteAnnotation = There was an error deleting this item. -# Error message when an annotation update fails -be.annotationThread.errorEditAnnotation = This annotation could not be modified. -# Error message when an annotation fetch fails -be.annotattionThread.errorFetchAnnotation = The annotation could not be fetched. # Error message when an app activity deletion fails be.api.appActivityDeleteErrorMessage = There was an error deleting this item. # Error message when a comment creation fails due to a conflict diff --git a/package.json b/package.json index 0d97a5196e..e49d96624a 100644 --- a/package.json +++ b/package.json @@ -136,6 +136,8 @@ "@box/frontend": "^10.0.0", "@box/languages": "^1.0.0", "@box/react-virtualized": "9.22.3-rc-box.7", + "@cfaester/enzyme-adapter-react-18": "^0.8.0", + "@chromatic-com/storybook": "^1", "@commitlint/cli": "^8.3.5", "@commitlint/config-conventional": "^8.3.4", "@eslint/eslintrc": "^3.1.0", @@ -144,26 +146,25 @@ "@formatjs/intl-relativetimeformat": "^4.5.9", "@formatjs/intl-unified-numberformat": "^3.2.0", "@hapi/address": "2.1.1", - "@storybook/addon-actions": "^7.5.3", - "@storybook/addon-docs": "^8.0.8", - "@storybook/addon-essentials": "^7.5.3", - "@storybook/addon-interactions": "^7.5.3", + "@storybook/addon-actions": "^8.0.9", + "@storybook/addon-docs": "^8.0.9", + "@storybook/addon-essentials": "^8.0.9", + "@storybook/addon-interactions": "^8.0.9", "@storybook/addon-knobs": "^7.0.2", - "@storybook/addon-links": "^7.5.3", - "@storybook/addon-storyshots": "^7.5.3", + "@storybook/addon-links": "^8.0.9", "@storybook/addon-styling": "^1.3.7", - "@storybook/addon-styling-webpack": "^0.0.5", - "@storybook/addons": "^7.5.3", - "@storybook/blocks": "^7.6.11", - "@storybook/preview-api": "^7.6.11", - "@storybook/react-webpack5": "^7.5.3", - "@storybook/testing-library": "^0.2.2", - "@storybook/theming": "^7.5.3", + "@storybook/addon-styling-webpack": "^1.0.0", + "@storybook/addon-webpack5-compiler-babel": "^3.0.3", + "@storybook/addons": "^7.6.17", + "@storybook/blocks": "^8.0.9", + "@storybook/preview-api": "^8.0.9", + "@storybook/react-webpack5": "^8.0.9", + "@storybook/theming": "^8.0.9", "@svgr/core": "^5.0.1", "@svgr/plugin-prettier": "^5.0.1", "@svgr/plugin-svgo": "^5.1.0", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "12.1.5", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^16.0.0", "@testing-library/react-hooks": "^8.0.1", "@types/classnames": "^2.2.9", "@types/color": "^3.0.2", @@ -184,7 +185,6 @@ "@types/webpack": "^4.41.3", "@typescript-eslint/eslint-plugin": "^7.3.1", "@typescript-eslint/parser": "^7.3.1", - "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", "autoprefixer": "^9.7.4", "axios": "0.25.0", "babel-core": "^7.0.0-bridge.0", @@ -272,21 +272,21 @@ "puppeteer": "^2.0.0", "query-string": "5.1.1", "raf": "^3.4.1", - "react": "^17.0.1", - "react-animate-height": "^2.0.8", + "react": "^18.3.1", + "react-animate-height": "^3.2.3", "react-beautiful-dnd": "^13.1.1", "react-docgen-typescript": "^1.16.1", "react-docgen-typescript-loader": "^3.6.0", - "react-dom": "^17.0.1", - "react-draggable": "^3.3.0", + "react-dom": "^18.3.1", + "react-draggable": "^4.4.6", "react-immutable-proptypes": "^2.1.0", "react-intl": "6.4.2", "react-measure": "^2.3.0", "react-modal": "^3.8.1", "react-popper": "^1.3.4", "react-process-string": "^1.2.0", - "react-responsive": "8.2.0", - "react-router-dom": "^5.0.0", + "react-responsive": "^10.0.0", + "react-router-dom": "5.3.4", "react-scrollbars-custom": "^4.0.21", "react-styleguidist": "12.0.1", "react-test-renderer": "^16.13.1", @@ -304,7 +304,8 @@ "sinon": "^2.3.7", "source-map-loader": "^0.2.4", "start-server-and-test": "^1.10.8", - "storybook": "^7.6.11", + "storybook": "^8.0.9", + "storybook-react-intl": "^3.0.1", "string-replace-loader": "^2.2.0", "style-loader": "^1.0.0", "styled-components": "5.0.0", @@ -346,10 +347,10 @@ "mousetrap": "^1.6.3", "pikaday": "^1.8.0", "query-string": "5.1.1", - "react": "^17.0.1", + "react": "^17.0.1 || ^18.0.0", "react-animate-height": "^2.0.8", "react-beautiful-dnd": "^13.1.1", - "react-dom": "^17.0.1", + "react-dom": "^17.0.1 || ^18.0.0", "react-draggable": "^3.3.0", "react-immutable-proptypes": "^2.1.0", "react-intl": ">=2.9.0", @@ -360,7 +361,7 @@ "react-responsive": "8.2.0", "react-router-dom": "^5.0.0", "react-scrollbars-custom": "^4.0.21", - "react-tether": "^1.0.0", + "react-tether": "1.0.5", "react-textarea-autosize": "^8.5.3", "regenerator-runtime": "^0.13.2", "sanitize-html": "1.21.1", @@ -376,8 +377,7 @@ } }, "resolutions": { - "ip": "1.1.8", - "**/react-intl/**/@types/react": "^16.9.18" + "ip": "1.1.8" }, "overrides": { "draft-js": { @@ -391,5 +391,8 @@ }, "msw": { "workerDirectory": [".storybook/public"] + }, + "dependencies": { + "@storybook/test": "^8.0.9" } } diff --git a/scripts/jest/enzyme-adapter.js b/scripts/jest/enzyme-adapter.js index ba6590a12f..d0a7050867 100644 --- a/scripts/jest/enzyme-adapter.js +++ b/scripts/jest/enzyme-adapter.js @@ -4,7 +4,7 @@ import 'core-js/es/set'; import 'raf/polyfill'; import 'mutationobserver-shim'; import Enzyme, { mount, shallow } from 'enzyme'; -import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; +import Adapter from '@cfaester/enzyme-adapter-react-18'; Enzyme.configure({ adapter: new Adapter() }); diff --git a/scripts/jest/jest-setup.ts b/scripts/jest/jest-setup.ts index 29e3d4f805..80011b0dc6 100644 --- a/scripts/jest/jest-setup.ts +++ b/scripts/jest/jest-setup.ts @@ -1,6 +1,11 @@ // @ts-nocheck override setImmediate to use setTimeout import '@testing-library/jest-dom'; +import util from 'util'; global.setImmediate = cb => { setTimeout(cb, 0); }; + +Object.defineProperty(global, 'TextEncoder', { + value: util.TextEncoder, +}); diff --git a/src/components/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap b/src/components/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap index 2a8a582d04..5de51251e0 100644 --- a/src/components/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap +++ b/src/components/collapsible/__tests__/__snapshots__/Collapsible.test.tsx.snap @@ -23,28 +23,9 @@ exports[`components/collapsible/Collapsible should apply buttonProps correctly 1 /> -
- + `; @@ -78,28 +59,9 @@ exports[`components/collapsible/Collapsible should apply correct border class 1` /> -
- + `; @@ -133,28 +95,9 @@ exports[`components/collapsible/Collapsible should apply correct isOpen state 1` /> -
- + `; @@ -188,28 +131,9 @@ exports[`components/collapsible/Collapsible should not render a PlainButton if a /> -
- + `; @@ -243,28 +167,9 @@ exports[`components/collapsible/Collapsible should render a PlainButton if a but /> -
- + `; @@ -298,28 +203,9 @@ exports[`components/collapsible/Collapsible should render component correctly 1` /> -
- + `; @@ -367,28 +253,9 @@ exports[`components/collapsible/Collapsible should render with headerActionItems -
- + `; diff --git a/src/components/dropdown-menu/DropdownMenu.stories.js b/src/components/dropdown-menu/DropdownMenu.stories.js index d897d3d005..b61f8cdf1c 100644 --- a/src/components/dropdown-menu/DropdownMenu.stories.js +++ b/src/components/dropdown-menu/DropdownMenu.stories.js @@ -1,6 +1,5 @@ // @flow import * as React from 'react'; -import { boolean } from '@storybook/addon-knobs'; import Avatar from '../avatar/Avatar'; import Button from '../button/Button'; @@ -45,10 +44,7 @@ export const basic = () => ( View Profile Help - + Disabled Option @@ -88,7 +84,7 @@ export const responsiveWithHeader = () => ( View Profile Help - Disabled Option + Disabled Option Submenu diff --git a/src/components/dropdown-menu/__tests__/DropdownMenu.test.js b/src/components/dropdown-menu/__tests__/DropdownMenu.test.js index b5d685632a..0deb68416f 100644 --- a/src/components/dropdown-menu/__tests__/DropdownMenu.test.js +++ b/src/components/dropdown-menu/__tests__/DropdownMenu.test.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { mount, shallow } from 'enzyme'; import sinon from 'sinon'; +import { act } from 'react-dom/test-utils'; import DropdownMenu from '../DropdownMenu'; import { KEYS } from '../../../constants'; @@ -526,7 +527,9 @@ describe('components/dropdown-menu/DropdownMenu', () => { documentMock.expects('addEventListener').withArgs('click', sinon.match.any, !useBubble); documentMock.expects('addEventListener').withArgs('contextmenu', sinon.match.any, !useBubble); documentMock.expects('removeEventListener').never(); - instance.openMenuAndSetFocusIndex(0); + act(() => { + instance.openMenuAndSetFocusIndex(0); + }); }); test('should remove click and contextmenu listeners when closing menu', () => { const wrapper = mount( @@ -536,12 +539,16 @@ describe('components/dropdown-menu/DropdownMenu', () => { , ); const instance = wrapper.instance(); - instance.openMenuAndSetFocusIndex(0); + act(() => { + instance.openMenuAndSetFocusIndex(0); + }); const documentMock = sandbox.mock(document); documentMock.expects('removeEventListener').withArgs('contextmenu', sinon.match.any, !useBubble); documentMock.expects('removeEventListener').withArgs('click', sinon.match.any, !useBubble); documentMock.expects('addEventListener').never(); - instance.closeMenu(); + act(() => { + instance.closeMenu(); + }); }); test('should not do anything opening a menu when menu is already open', () => { const wrapper = mount( @@ -582,7 +589,9 @@ describe('components/dropdown-menu/DropdownMenu', () => { ); const documentMock = sandbox.mock(document); const instance = wrapper.instance(); - instance.openMenuAndSetFocusIndex(0); + act(() => { + instance.openMenuAndSetFocusIndex(0); + }); documentMock.expects('removeEventListener').withArgs('contextmenu', sinon.match.any, !useBubble); documentMock.expects('removeEventListener').withArgs('click', sinon.match.any, !useBubble); wrapper.unmount(); @@ -631,7 +640,9 @@ describe('components/dropdown-menu/DropdownMenu', () => { ); const instance = wrapper.instance(); - instance.openMenuAndSetFocusIndex(0); + act(() => { + instance.openMenuAndSetFocusIndex(0); + }); instance.closeMenu = closeMenuSpy; const handleDocumentClickEvent = { target: document.createElement('div'), @@ -651,11 +662,16 @@ describe('components/dropdown-menu/DropdownMenu', () => { ); const instance = wrapper.instance(); - instance.openMenuAndSetFocusIndex(0); + act(() => { + instance.openMenuAndSetFocusIndex(0); + }); + const handleDocumentClickEvent = { target: document.createElement('div'), }; - instance.handleDocumentClick(handleDocumentClickEvent); + act(() => { + instance.handleDocumentClick(handleDocumentClickEvent); + }); expect(onMenuCloseSpy).toHaveBeenCalledWith(handleDocumentClickEvent); }); diff --git a/src/components/flyout/Flyout.stories.tsx b/src/components/flyout/Flyout.stories.tsx index 0062898a99..d9ea3703bf 100644 --- a/src/components/flyout/Flyout.stories.tsx +++ b/src/components/flyout/Flyout.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { select } from '@storybook/addon-knobs'; import Button from '../button'; import IconHelp from '../../icons/general/IconHelp'; @@ -15,18 +14,18 @@ import { Flyout, Overlay } from '.'; import notes from './Flyout.stories.md'; export const Basic = () => { - const positions = { - 'bottom-center': 'bottom-center', - 'bottom-left': 'bottom-left', - 'bottom-right': 'bottom-right', - 'middle-left': 'middle-left', - 'middle-right': 'middle-right', - 'top-center': 'top-left', - 'top-left': 'top-left', - 'top-right': 'top-right', - }; + // const positions = { + // 'bottom-center': 'bottom-center', + // 'bottom-left': 'bottom-left', + // 'bottom-right': 'bottom-right', + // 'middle-left': 'middle-left', + // 'middle-right': 'middle-right', + // 'top-center': 'top-left', + // 'top-left': 'top-left', + // 'top-right': 'top-right', + // }; - const position = select('Position', positions, 'bottom-center'); + const position = 'bottom-center'; return (
diff --git a/src/components/flyout/__tests__/Flyout.test.js b/src/components/flyout/__tests__/Flyout.test.js index 78af5e0544..3d55690d18 100644 --- a/src/components/flyout/__tests__/Flyout.test.js +++ b/src/components/flyout/__tests__/Flyout.test.js @@ -289,7 +289,7 @@ describe('components/flyout/Flyout', () => { }); describe('handleOverlayClick()', () => { - [ + test.each([ { closeOnClick: true, hasClickableAncestor: true, @@ -310,8 +310,9 @@ describe('components/flyout/Flyout', () => { hasClickableAncestor: false, shouldCloseOverlay: false, }, - ].forEach(({ closeOnClick, hasClickableAncestor, shouldCloseOverlay }) => { - test('should handle clicks within overlay properly', () => { + ])( + 'should handle clicks within overlay properly %s', + ({ closeOnClick, hasClickableAncestor, shouldCloseOverlay }) => { const wrapper = mount( @@ -338,10 +339,11 @@ describe('components/flyout/Flyout', () => { .expects('handleOverlayClose') .never(); } - - instance.handleOverlayClick(event); - }); - }); + act(() => { + instance.handleOverlayClick(event); + }); + }, + ); }); describe('handleButtonClick()', () => { diff --git a/src/components/footer-indicator/__tests__/FooterIndicator.stories.test.tsx b/src/components/footer-indicator/__tests__/FooterIndicator.stories.test.tsx index 7515a4b17a..67e6414bf1 100644 --- a/src/components/footer-indicator/__tests__/FooterIndicator.stories.test.tsx +++ b/src/components/footer-indicator/__tests__/FooterIndicator.stories.test.tsx @@ -1,16 +1,18 @@ -jest.retryTimes(3); -describe('components/footer-indicator/FooterIndicator', () => { - const STORIES = [['components-footerindicator--regular'], ['components-footerindicator--with-truncated-text']]; - test.each(STORIES)('looks visually correct when using story %s', async id => { - const image = await BoxVisualTestUtils.takeScreenshot(id); - return expect(image).toMatchImageSnapshot(); - }); - - test.each(STORIES)('displays tooltip on hover for story %s', async id => { - const page = await BoxVisualTestUtils.gotoStory(id); - await page.hover('.bdl-FooterIndicator-text'); - await page.waitForSelector('[data-testid="bdl-Tooltip"]', { visible: true }); - const image = await page.screenshot(); - return expect(image).toMatchImageSnapshot(); - }); -}); +// // tslint:disable +// test.retryTimes(3); +// // tslint:enable +// describe('components/footer-indicator/FooterIndicator', () => { +// const STORIES = [['components-footerindicator--regular'], ['components-footerindicator--with-truncated-text']]; +// test.each(STORIES)('looks visually correct when using story %s', async id => { +// const image = await BoxVisualTestUtils.takeScreenshot(id); +// return expect(image).toMatchImageSnapshot(); +// }); +// +// test.each(STORIES)('displays tooltip on hover for story %s', async id => { +// const page = await BoxVisualTestUtils.gotoStory(id); +// await page.hover('.bdl-FooterIndicator-text'); +// await page.waitForSelector('[data-testid="bdl-Tooltip"]', { visible: true }); +// const image = await page.screenshot(); +// return expect(image).toMatchImageSnapshot(); +// }); +// }); diff --git a/src/components/form-elements/formik/Formik.stories.js b/src/components/form-elements/formik/Formik.stories.js index 6f3d9938cf..30b88db86b 100644 --- a/src/components/form-elements/formik/Formik.stories.js +++ b/src/components/form-elements/formik/Formik.stories.js @@ -1,7 +1,6 @@ // @flow import * as React from 'react'; import { Field, Form, Formik } from 'formik'; -import { boolean } from '@storybook/addon-knobs'; import TextInput from '../../text-input/TextInput'; import TextArea from '../../text-area/TextAreaField'; @@ -61,7 +60,7 @@ export const basic = () => { { component={TextInput} /> ; +export const regular = () => ; export const withoutAnimation = () => ; diff --git a/src/components/header/Header.stories.tsx b/src/components/header/Header.stories.tsx index 84e1de67fa..83adaed328 100644 --- a/src/components/header/Header.stories.tsx +++ b/src/components/header/Header.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { text } from '@storybook/addon-knobs'; import { bdlBoxBlue } from '../../styles/variables'; @@ -7,7 +6,7 @@ import Header from './Header'; import notes from './Header.stories.md'; export const regular = () => ( -
+

Lorem Ipsum

); diff --git a/src/components/label-pill/LabelPill.stories.tsx b/src/components/label-pill/LabelPill.stories.tsx index 8a0115a6be..1fce71a724 100644 --- a/src/components/label-pill/LabelPill.stories.tsx +++ b/src/components/label-pill/LabelPill.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { select } from '@storybook/addon-knobs'; + import Shield16 from '../../icon/line/Shield16'; import LabelPill, { LabelPillStatus, LabelPillSize } from './LabelPill'; import notes from './LabelPill.stories.md'; @@ -21,28 +21,19 @@ const typeOptions: LabelPillStatus[] = [ const sizeOptions: LabelPillSize[] = [LabelPillSize.REGULAR, LabelPillSize.LARGE]; export const withText = () => ( - + TEST TEXT ); export const withIcon = () => ( - + ); export const withBoth = () => ( - + TEST TEXT @@ -50,23 +41,23 @@ export const withBoth = () => ( export const severalComponents = () => (
- + BETA {' '} - + IN PROGRESS {' '} - + CONFIDENTIAL {' '} - + NEW {' '} - + DUE JUL 9 AT 11:59 PM {' '} - + SUCCESS {' '}
diff --git a/src/components/label/Label.stories.tsx b/src/components/label/Label.stories.tsx index 5dcb49ab6a..ff971aa0a6 100644 --- a/src/components/label/Label.stories.tsx +++ b/src/components/label/Label.stories.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { boolean } from '@storybook/addon-knobs'; import Label from './Label'; import notes from './Label.stories.md'; @@ -11,7 +10,7 @@ export const basic = () => ( ); export const withOptionalText = () => ( -