From 300ef37da570c8425f7ac1aed52e87392b44fadf Mon Sep 17 00:00:00 2001 From: cassie spain <58054751+dreamwasp@users.noreply.github.com> Date: Fri, 13 Dec 2024 09:48:26 -0500 Subject: [PATCH 1/4] feat: Storybook 8 Feature Branch --- .circleci/config.yml | 8 +- .eslintrc.js | 5 + .github/workflows/push.yml | 11 +- .lintstagedrc.mjs | 6 +- .nvmrc | 2 +- .prettierignore | 4 +- .vscode/stories.code-snippets | 171 +- .yarnclean | 1 - README.md | 2 + dist/static/CNAME | 1 - dist/static/robots.txt | 2 - dist/static/storybook/index.html | 23 - nx.json | 20 +- package.json | 78 +- packages/eslint-plugin-gamut/project.json | 7 +- packages/gamut-icons/babel.config.js | 17 +- packages/gamut-icons/project.json | 7 +- packages/gamut-illustrations/babel.config.js | 17 +- packages/gamut-illustrations/project.json | 7 +- .../gamut-illustrations/src/MobilePhone.tsx | 2 +- packages/gamut-patterns/babel.config.js | 17 +- packages/gamut-patterns/project.json | 7 +- packages/gamut-styles/project.json | 4 +- .../src/__tests__/GamutProvider.test.tsx | 26 +- packages/gamut-tests/babel.config.js | 17 +- packages/gamut-tests/project.json | 4 +- packages/gamut-tests/src/index.tsx | 2 +- packages/gamut/babel.config.js | 17 +- packages/gamut/package.json | 2 +- packages/gamut/project.json | 7 +- .../AccordionAreaDeprecated.test.tsx | 2 +- .../ButtonDeprecated/index.tsx | 4 +- .../ButtonDeprecatedBase/index.tsx | 2 +- packages/gamut/src/Alert/Alert.tsx | 4 +- packages/gamut/src/BodyPortal/index.tsx | 4 +- packages/gamut/src/Box/props.ts | 2 +- .../__tests__/Breadcrumbs.test.tsx | 15 +- .../src/Button/__tests__/IconButton.test.tsx | 12 +- .../src/Button/__tests__/TextButton.test.tsx | 4 +- .../ButtonBase/__tests__/ButtonBase.test.tsx | 2 +- packages/gamut/src/Coachmark/index.tsx | 2 +- .../src/ConnectedForm/ConnectedFormGroup.tsx | 6 +- .../ConnectedInputs/ConnectedInput.tsx | 2 +- .../ConnectedInputs/ConnectedRadio.tsx | 4 +- .../ConnectedInputs/ConnectedSelect.tsx | 2 +- .../ConnectedInputs/ConnectedTextArea.tsx | 2 +- .../gamut/src/ConnectedForm/SubmitButton.tsx | 12 +- .../__tests__/ConnectedForm.test.tsx | 47 +- .../__tests__/useDebouncedField.test.tsx | 12 +- packages/gamut/src/ConnectedForm/index.ts | 11 +- packages/gamut/src/ConnectedForm/types.ts | 4 +- packages/gamut/src/ConnectedForm/utils.tsx | 33 +- .../src/DataList/Controls/ExpandControl.tsx | 3 +- .../src/DataList/Controls/FilterControl.tsx | 2 +- .../src/DataList/Controls/SelectControl.tsx | 2 +- .../src/DataList/Controls/SortControl.tsx | 2 +- packages/gamut/src/DataList/DataGrid.tsx | 3 +- packages/gamut/src/DataList/Rows/Row.tsx | 7 +- .../src/DataList/hooks/useListControls.tsx | 2 +- .../gamut/src/DataList/hooks/useListState.tsx | 2 +- .../src/DataList/hooks/useLocalQuery.tsx | 8 +- .../src/Disclosure/DisclosureButton/index.tsx | 3 +- .../Disclosure/__tests__/Disclosure.test.tsx | 8 +- .../src/Flyout/__tests__/Flyout.test.tsx | 4 +- packages/gamut/src/Flyout/index.tsx | 3 +- packages/gamut/src/FocusTrap/index.tsx | 2 +- .../src/Form/SelectDropdown/elements.tsx | 32 +- .../gamut/src/Form/__tests__/Radio.test.tsx | 4 +- .../Form/__tests__/SelectDropdown.test.tsx | 52 +- packages/gamut/src/GridForm/GridForm.tsx | 5 +- .../__fixtures__/assertions.tsx | 11 +- .../GridFormSections/GridFormContent.tsx | 22 +- .../src/GridForm/__fixtures__/helpers.tsx | 3 +- .../src/GridForm/__tests__/GridForm.test.tsx | 19 +- packages/gamut/src/List/ListRow.tsx | 14 +- .../src/Markdown/__tests__/Markdown.test.tsx | 8 +- packages/gamut/src/Motion/FadeInSlideOut.tsx | 2 +- packages/gamut/src/Popover/elements.tsx | 4 +- packages/gamut/src/PopoverContainer/types.ts | 2 +- packages/gamut/src/ProgressBar/index.tsx | 2 - packages/gamut/src/Tabs/TabNav.tsx | 2 +- packages/gamut/src/Tag/types.tsx | 2 +- packages/gamut/src/Tip/ToolTip/index.tsx | 2 +- .../Tip/__tests__/DeprecatedToolTip.test.tsx | 8 +- .../gamut/src/Tip/__tests__/InfoTip.test.tsx | 8 +- .../src/Tip/__tests__/PreviewTip.test.tsx | 10 +- .../gamut/src/Tip/__tests__/ToolTip.test.tsx | 10 +- packages/gamut/src/Tip/shared/types.tsx | 2 +- packages/gamut/src/Toast/Toast.tsx | 2 +- .../gamut/src/Video/__tests__/Video.test.tsx | 11 +- packages/macros/project.json | 3 +- packages/styleguide/.babelrc.json | 44 + packages/styleguide/.gitignore | 1 - .../addons/system/components/Elements.tsx | 64 - .../addons/system/components/PropsTable.tsx | 106 - .../addons/system/components/index.ts | 1 - .../system/components/useSystemProps.ts | 124 - .../.storybook/addons/system/enhancers.ts | 169 - .../.storybook/addons/system/preset.ts | 9 - .../.storybook/addons/system/propMeta.ts | 17 - .../.storybook/addons/system/register.ts | 5 - .../styleguide/.storybook/babel.config.js | 21 - .../components/Docs/DocsContainer.tsx | 126 - .../.storybook/components/Docs/DocsPage.tsx | 134 - .../components/Elements/Callout.tsx | 9 + .../components/Elements/ComponentSource.tsx | 27 + .../components/Elements/DocsContainer.tsx | 59 + .../Elements.tsx => Elements/Markdown.tsx} | 46 +- .../{Docs => Elements}/StatusIndicator.tsx | 0 .../components/Elements/StorySource.tsx | 26 + .../components/Elements/Wrappers.tsx | 11 + .../components/Headers/AboutHeader.tsx | 41 + .../components/Headers/ComponentHeader.tsx | 120 + .../.storybook/components/Headers/index.ts | 2 + .../.storybook/components/ImageWrapper.tsx | 26 + .../components/Navigation/BreadCrumbs.tsx | 45 - .../Navigation/NavigationProvider.tsx | 113 - .../components/Navigation/TableOfContents.tsx | 94 +- .../.storybook/components/Navigation/index.ts | 5 - .../.storybook/components/Navigation/types.ts | 35 - .../.storybook/components/Navigation/utils.ts | 185 - .../components/Scales/ColorScale.tsx | 2 +- .../{DataTable => TokenTable}/elements.tsx | 5 +- .../{DataTable => TokenTable}/index.tsx | 10 +- .../.storybook/components/index.tsx | 14 +- .../styleguide/.storybook/components/utils.ts | 30 - packages/styleguide/.storybook/main.ts | 104 +- packages/styleguide/.storybook/manager.ts | 6 +- .../styleguide/.storybook/preview-head.html | 7 - packages/styleguide/.storybook/preview.ts | 190 +- .../{theme.ts => theming/GamutTheme.ts} | 8 +- .../GamutThemeProvider.tsx} | 2 +- packages/styleguide/AboutHeader.tsx | 23 + packages/styleguide/CHANGELOG.md | 6845 ------ packages/styleguide/README.md | 3 - packages/styleguide/dist/favicon.ico | Bin 0 -> 32988 bytes packages/styleguide/jest.config.ts | 4 - packages/styleguide/package.json | 45 +- packages/styleguide/project.json | 43 +- .../About.stories.mdx => src/lib/About.mdx} | 14 +- packages/styleguide/src/lib/Atoms/About.mdx | 139 + .../src/lib/Atoms/Animation/Animation.mdx | 29 + .../lib/Atoms/Animation/Animation.stories.tsx | 23 + .../styleguide/src/lib/Atoms/Badge/Badge.mdx | 119 + .../src/lib/Atoms/Badge/Badge.stories.tsx | 72 + .../src/lib/Atoms/Badge/examples.tsx | 23 + .../src/lib/Atoms/Buttons/About.mdx | 58 + .../src/lib/Atoms/Buttons/Button/Button.mdx | 74 + .../Atoms/Buttons/Button/Button.stories.tsx | 122 + .../lib/Atoms/Buttons/CTAButton/CTAButton.mdx | 33 + .../Buttons/CTAButton/CTAButton.stories.tsx | 36 + .../Atoms/Buttons/FillButton/FillButton.mdx | 31 + .../Buttons/FillButton/FillButton.stories.tsx | 42 + .../Atoms/Buttons/IconButton/IconButton.mdx | 31 + .../Buttons/IconButton/IconButton.stories.tsx | 40 + .../Buttons/StrokeButton/StrokeButton.mdx | 31 + .../StrokeButton/StrokeButton.stories.tsx | 42 + .../Atoms/Buttons/TextButton/TextButton.mdx | 37 + .../Buttons/TextButton/TextButton.stories.tsx | 42 + .../styleguide/src/lib/Atoms/Card/Card.mdx | 83 + .../src/lib/Atoms/Card/Card.stories.tsx | 119 + .../src/lib/Atoms/Drawer/Drawer.mdx | 41 + .../src/lib/Atoms/Drawer/Drawer.stories.tsx | 24 + .../lib/Atoms/FloatingCard/FloatingCard.mdx | 77 + .../FloatingCard/FloatingCard.stories.tsx | 65 + .../src/lib/Atoms/FocusTrap/FocusTrap.mdx | 30 + .../lib/Atoms/FocusTrap/FocusTrap.stories.tsx | 56 + .../src/lib/Atoms/FormElements/About.mdx | 64 + .../src/lib/Atoms/FormElements/Form/Form.mdx | 33 + .../Atoms/FormElements/Form/Form.stories.tsx | 16 + .../FormElements/FormGroup/FormGroup.mdx | 64 + .../FormGroup/FormGroup.stories.tsx | 94 + .../FormGroupDescription.mdx | 28 + .../FormGroupDescription.stories.tsx | 15 + .../FormGroupLabel/FormGroupLabel.mdx | 60 + .../FormGroupLabel/FormGroupLabel.stories.tsx | 43 + .../FormRequiredText/FormRequiredText.mdx | 28 + .../FormRequiredText.stories.tsx | 14 + .../src/lib/Atoms/FormInputs/About.mdx | 61 + .../Atoms/FormInputs/Checkbox/Checkbox.mdx | 109 + .../FormInputs/Checkbox/Checkbox.stories.tsx | 213 + .../src/lib/Atoms/FormInputs/Input/Input.mdx | 105 + .../Atoms/FormInputs/Input/Input.stories.tsx | 164 + .../src/lib/Atoms/FormInputs/Radio/Radio.mdx | 63 + .../Atoms/FormInputs/Radio/Radio.stories.tsx | 77 + .../lib/Atoms/FormInputs/Select/Select.mdx | 60 + .../FormInputs/Select/Select.stories.tsx | 97 + .../SelectDropdown/SelectDropdown.mdx | 153 + .../SelectDropdown/SelectDropdown.stories.tsx | 528 + .../Atoms/FormInputs/TextArea/TextArea.mdx | 47 + .../FormInputs/TextArea/TextArea.stories.tsx | 40 + .../lib/Atoms/Icons/About.mdx} | 47 +- .../src/lib/Atoms/Icons/Mini/Mini.mdx | 48 + .../src/lib/Atoms/Icons/Mini/Mini.stories.tsx | 14 + .../src/lib/Atoms/Icons/Regular/Regular.mdx | 93 + .../Atoms/Icons/Regular/Regular.stories.tsx | 16 + .../lib}/Atoms/Icons/constants.tsx | 0 .../lib/Atoms/Illustrations/Illustrations.mdx | 52 + .../Illustrations/Illustrations.stories.tsx | 18 + .../src/lib/Atoms/Loaders/About.mdx | 30 + .../src/lib/Atoms/Loaders/Shimmer/Shimmer.mdx | 34 + .../Atoms/Loaders/Shimmer/Shimmer.stories.tsx | 16 + .../src/lib/Atoms/Loaders/Spinner/Spinner.mdx | 33 + .../Atoms/Loaders/Spinner/Spinner.stories.tsx | 16 + .../src/lib/Atoms/Patterns/Patterns.mdx | 44 + .../lib/Atoms/Patterns/Patterns.stories.tsx | 18 + .../PopoverContainer/PopoverContainer.mdx} | 101 +- .../PopoverContainer.stories.tsx} | 55 +- .../src/lib/Atoms/ProgressBar/ProgressBar.mdx | 101 + .../Atoms/ProgressBar/ProgressBar.stories.tsx | 107 + .../Atoms/RadialProgress/RadialProgress.mdx | 47 + .../RadialProgress/RadialProgress.stories.tsx | 41 + .../lib/Atoms/SkipToContent/SkipToContent.mdx | 51 + .../SkipToContent/SkipToContent.stories.tsx | 14 + packages/styleguide/src/lib/Atoms/Tag/Tag.mdx | 69 + .../src/lib/Atoms/Tag/Tag.stories.tsx | 38 + .../src/lib/Atoms/Toggle/Toggle.mdx | 87 + .../src/lib/Atoms/Toggle/Toggle.stories.tsx | 110 + .../styleguide/src/lib/Foundations/About.mdx | 52 + .../lib/Foundations/ColorMode/ColorMode.mdx} | 32 +- .../lib}/Foundations/ColorMode/examples.tsx | 63 +- .../lib/Foundations/Layout.mdx} | 40 +- .../src/lib/Foundations/System/About.mdx | 45 + .../lib/Foundations/System/Compose.mdx} | 36 +- .../lib/Foundations/System/Props.mdx} | 90 +- .../System/ResponsiveProperties.mdx} | 34 +- .../lib/Foundations/System/Variants.mdx} | 28 +- .../lib/Foundations/Theme/Theme.mdx} | 82 +- .../lib/Foundations/Typography.mdx} | 39 +- .../lib/Foundations/Utilities/Utilities.mdx} | 49 +- .../lib/Foundations/Utilities/boxShadow.tsx | 30 + .../lib/Foundations/shared/elements.tsx} | 99 +- packages/styleguide/src/lib/Layouts/About.mdx | 40 + .../src/lib/Layouts/Boxes/About.mdx | 41 + .../src/lib/Layouts/Boxes/Box/Box.mdx | 60 + .../src/lib/Layouts/Boxes/Box/Box.stories.tsx | 60 + .../src/lib/Layouts/Boxes/FlexBox/FlexBox.mdx | 57 + .../Layouts/Boxes/FlexBox/FlexBox.stories.tsx | 25 + .../src/lib/Layouts/Boxes/GridBox/GridBox.mdx | 36 + .../Layouts/Boxes/GridBox/GridBox.stories.tsx | 42 + .../ContentContainer/ContentContainer.mdx | 55 + .../ContentContainer.stories.tsx | 20 + .../src/lib/Layouts/LayoutGrid/LayoutGrid.mdx | 75 + .../Layouts/LayoutGrid/LayoutGrid.stories.tsx | 59 + .../src/lib/Layouts/LayoutGrid/examples.tsx | 69 + packages/styleguide/src/lib/Meta/About.mdx | 40 + .../lib/Meta/Best Practices.mdx} | 45 +- packages/styleguide/src/lib/Meta/Brand.mdx | 16 + .../styleguide/src/lib/Meta/Contributing.mdx | 92 + .../lib/Meta/FAQs.mdx} | 28 +- packages/styleguide/src/lib/Meta/Stories.mdx | 169 + .../styleguide/src/lib/Molecules/About.mdx | 119 + .../AccordionButtonDeprecated.mdx | 54 + .../AccordionButtonDeprecated.stories.tsx | 33 + .../AccordionDeprecated.mdx | 51 + .../AccordionDeprecated.stories.tsx | 31 + .../src/lib/Molecules/Alert/Alert.mdx | 110 + .../src/lib/Molecules/Alert/Alert.stories.tsx | 107 + .../lib}/Molecules/Alert/constants.tsx | 2 +- .../lib/Molecules/Breadcrumbs/Breadcrumbs.mdx | 48 + .../Breadcrumbs/Breadcrumbs.stories.tsx | 51 + .../src/lib/Molecules/Coachmark/Coachmark.mdx | 50 + .../Coachmark/Coachmark.stories.tsx} | 33 +- .../lib/Molecules/Disclosure/Disclosure.mdx | 60 + .../Disclosure/Disclosure.stories.tsx | 108 + .../src/lib/Molecules/Flyout/Flyout.mdx | 38 + .../lib/Molecules/Flyout/Flyout.stories.tsx | 52 + .../src/lib/Molecules/Menu/Menu.mdx | 104 + .../lib/Molecules/Menu/Menu.stories.tsx} | 72 +- .../src/lib/Molecules/Modals/About.mdx | 48 + .../lib/Molecules/Modals/Dialog/Dialog.mdx | 84 + .../Modals/Dialog/Dialog.stories.tsx | 61 + .../src/lib/Molecules/Modals/Modal/Modal.mdx | 93 + .../Molecules/Modals/Modal/Modal.stories.tsx | 263 + .../ModalDeprecated/ModalDeprecated.mdx | 61 + .../ModalDeprecated.stories.tsx | 77 + .../lib/Molecules/Modals/Overlay/Overlay.mdx | 36 + .../Modals/Overlay/Overlay.stories.tsx | 40 + .../lib/Molecules/Pagination/Pagination.mdx | 66 + .../Pagination/Pagination.stories.tsx} | 71 +- .../src/lib/Molecules/Popover/Popover.mdx | 127 + .../lib/Molecules/Popover/Popover.stories.tsx | 138 + .../src/lib/Molecules/Tabs/Tabs.mdx | 74 + .../src/lib/Molecules/Tabs/Tabs.stories.tsx | 213 + .../src/lib/Molecules/Tips/About.mdx | 53 + .../DeprecatedToolTip/DeprecatedToolTip.mdx | 90 + .../DeprecatedToolTip.stories.tsx | 139 + .../lib/Molecules/Tips/InfoTip/InfoTip.mdx | 73 + .../Tips/InfoTip/InfoTip.stories.tsx | 135 + .../Molecules/Tips/PreviewTip/PreviewTip.mdx | 63 + .../Tips/PreviewTip/PreviewTip.stories.tsx | 112 + .../lib/Molecules/Tips/TipsTable.tsx} | 26 +- .../lib/Molecules/Tips/ToolTip/ToolTip.mdx | 52 + .../Tips/ToolTip/ToolTip.stories.tsx | 69 + .../src/lib/Molecules/Toasts/About.mdx | 37 + .../src/lib/Molecules/Toasts/Toast/Toast.mdx | 71 + .../Molecules/Toasts/Toast/Toast.stories.tsx | 90 + .../lib/Molecules/Toasts/Toaster/Toaster.mdx | 34 + .../Toasts/Toaster/Toaster.stories.tsx} | 36 +- .../src/lib/Molecules/Video/Video.mdx | 57 + .../src/lib/Molecules/Video/Video.stories.tsx | 33 + .../styleguide/src/lib/Organisms/About.mdx | 49 + .../src/lib/Organisms/ConnectedForm/About.mdx | 47 + .../ConnectedForm/ConnectedForm.mdx} | 145 +- .../ConnectedForm/ConnectedForm.stories.tsx} | 31 +- .../ConnectedFormGroup/ConnectedFormGroup.mdx | 66 + .../ConnectedFormGroup.stories.tsx} | 22 +- .../ConnectedFormInputs.mdx} | 80 +- .../ConnectedFormInputs.stories.tsx | 16 + .../ConnectedFormInputsTable.tsx | 52 + .../SubmitButton/SubmitButton.mdx} | 48 +- .../SubmitButton/SubmitButton.stories.tsx} | 18 +- .../src/lib/Organisms/GridForm/GridForm.mdx | 232 + .../Organisms/GridForm/GridForm.stories.tsx | 1335 ++ .../lib/Organisms/Lists & Tables/About.mdx | 41 + .../Lists & Tables/DataList/DataList.mdx | 104 + .../DataList/DataList.stories.tsx | 90 + .../Lists & Tables/DataTable/DataTable.mdx | 114 + .../DataTable/DataTable.stories.tsx | 85 + .../Organisms/Lists & Tables/List/List.mdx} | 264 +- .../Lists & Tables/List/List.stories.tsx} | 561 +- .../Organisms/Lists & Tables/examples.tsx | 6 +- .../src/lib/Organisms/Markdown/Markdown.mdx | 53 + .../Organisms/Markdown/Markdown.stories.tsx | 96 + .../lib/Organisms/Markdown/example.md} | 0 .../styleguide/src/lib/Typography/About.mdx | 43 + .../Typography/Anchor}/Anchor.examples.tsx | 15 + .../src/lib/Typography/Anchor/Anchor.mdx | 110 + .../lib/Typography/Anchor/Anchor.stories.tsx | 87 + .../lib/Typography/HiddenText/HiddenText.mdx | 36 + .../HiddenText/HiddenText.stories.tsx | 14 + .../src/lib/Typography/Text/Text.mdx | 110 + .../src/lib/Typography/Text/Text.stories.tsx | 165 + .../src/lib/Typography/Text/tables.tsx | 21 + .../styleguide/src/static/alertAnatomy.png | Bin 0 -> 5164 bytes .../styleguide/src/static/atoms/badge.png | Bin 0 -> 3643 bytes .../src/static/typography/anchor.png | Bin 0 -> 8360 bytes .../stories/Atoms/About.stories.mdx | 16 - .../stories/Atoms/Animation.examples.tsx | 13 - .../stories/Atoms/Animation.stories.mdx | 60 - .../stories/Atoms/Badge/Badge.stories.mdx | 127 - .../stories/Atoms/Badge/examples.tsx | 11 - .../stories/Atoms/Button/examples.tsx | 57 - .../stories/Atoms/Button/index.stories.mdx | 216 - .../styleguide/stories/Atoms/Card.stories.mdx | 130 - .../stories/Atoms/Drawer.stories.mdx | 51 - .../stories/Atoms/FloatingCard.stories.mdx | 111 - .../stories/Atoms/FocusTrap.stories.mdx | 70 - .../Atoms/FormElements/About.stories.mdx | 27 - .../Atoms/FormElements/Form.stories.mdx | 22 - .../Atoms/FormElements/FormGroup.stories.mdx | 120 - .../FormGroupDescription.stories.mdx | 24 - .../FormElements/FormGroupLabel.stories.mdx | 60 - .../FormElements/FormRequiredText.stories.mdx | 23 - .../Atoms/FormInputs/About.stories.mdx | 22 - .../Atoms/FormInputs/Checkbox.stories.mdx | 203 - .../Atoms/FormInputs/Input.stories.mdx | 286 - .../Atoms/FormInputs/Radio.stories.mdx | 98 - .../Atoms/FormInputs/RadioGroup.stories.mdx | 36 - .../Atoms/FormInputs/Select.stories.mdx | 135 - .../FormInputs/SelectDropdown.stories.mdx | 598 - .../Atoms/FormInputs/TextArea.stories.mdx | 48 - .../stories/Atoms/FormInputs/examples.tsx | 292 - .../stories/Atoms/Icons/Mini.stories.mdx | 51 - .../stories/Atoms/Icons/Regular.stories.mdx | 137 - .../stories/Atoms/Illustrations.stories.mdx | 84 - .../stories/Atoms/Loaders/Shimmer.stories.mdx | 27 - .../stories/Atoms/Loaders/Spinner.stories.mdx | 27 - .../stories/Atoms/Patterns.stories.mdx | 50 - .../stories/Atoms/ProgressBar/constants.tsx | 18 - .../Atoms/ProgressBar/index.stories.mdx | 184 - .../stories/Atoms/RadialProgress.stories.mdx | 63 - .../stories/Atoms/SkipToContent.stories.mdx | 40 - .../styleguide/stories/Atoms/Tag.examples.tsx | 79 - .../styleguide/stories/Atoms/Tag.stories.mdx | 72 - .../stories/Atoms/Toggle.examples.tsx | 34 - .../stories/Atoms/Toggle.stories.mdx | 161 - .../stories/Foundations/About.stories.mdx | 17 - .../Foundations/System/About.stories.mdx | 18 - .../stories/Foundations/System/tables.tsx | 64 - .../stories/Installation.stories.mdx | 97 - .../stories/Layouts/About.stories.mdx | 17 - .../stories/Layouts/Box/FlexBox.stories.mdx | 67 - .../stories/Layouts/Box/GridBox.stories.mdx | 60 - .../stories/Layouts/Box/index.stories.mdx | 109 - .../Layouts/ContentContainer.stories.mdx | 53 - .../stories/Layouts/Elements/index.tsx | 15 - .../stories/Layouts/LayoutGrid.stories.mdx | 151 - .../styleguide/stories/Meta/About.stories.mdx | 18 - .../stories/Meta/Brand Labs/About.stories.mdx | 11 - .../stories/Meta/Contributing.stories.mdx | 118 - .../stories/Meta/Stories.stories.mdx | 106 - .../stories/Molecules/About.stories.mdx | 19 - .../AccordionButtonDeprecated.stories.mdx | 66 - .../Molecules/AccordionDeprecated.stories.mdx | 56 - .../stories/Molecules/Alert/index.stories.mdx | 179 - .../stories/Molecules/Breadcrumbs.stories.mdx | 61 - .../Molecules/Coachmark/index.stories.mdx | 54 - .../stories/Molecules/Disclosure/examples.tsx | 66 - .../Molecules/Disclosure/index.stories.mdx | 177 - .../stories/Molecules/Flyout.stories.mdx | 212 - .../Molecules/Menu/MenuItem.stories.mdx | 30 - .../Molecules/Menu/MenuSeparator.stories.mdx | 31 - .../stories/Molecules/Menu/index.stories.mdx | 166 - .../Molecules/Modals/About.stories.mdx | 34 - .../Molecules/Modals/Dialog.examples.tsx | 27 - .../Molecules/Modals/Dialog.stories.mdx | 218 - .../Molecules/Modals/Modal.examples.tsx | 68 - .../Molecules/Modals/Modal.stories.mdx | 325 - .../Modals/ModalDeprecated.stories.mdx | 107 - .../Molecules/Modals/Overlay.stories.mdx | 62 - .../Molecules/Pagination/index.stories.mdx | 145 - .../Molecules/Popover/Popover.examples.tsx | 112 - .../Molecules/Popover/index.stories.mdx | 137 - .../stories/Molecules/Tabs/Tabs.examples.tsx | 203 - .../stories/Molecules/Tabs/index.stories.mdx | 135 - .../stories/Molecules/Tip/About.stories.mdx | 28 - .../Tip/DeprecatedToolTip.stories.mdx | 223 - .../stories/Molecules/Tip/InfoTip.stories.mdx | 134 - .../Molecules/Tip/PreviewTip.stories.mdx | 101 - .../stories/Molecules/Tip/ToolTip.stories.mdx | 135 - .../stories/Molecules/Tip/examples.tsx | 82 - .../stories/Molecules/Toast.stories.mdx | 150 - .../stories/Molecules/Toaster.stories.mdx | 36 - .../Molecules/Video/Video.examples.tsx | 21 - .../stories/Molecules/Video/index.stories.mdx | 56 - .../stories/Organisms/About.stories.mdx | 18 - .../Organisms/ConnectedForm/About.stories.mdx | 25 - .../ConnectedFormGroup.stories.mdx | 79 - .../stories/Organisms/ConnectedForm/utils.tsx | 36 - .../stories/Organisms/GridForm.stories.mdx | 1461 -- .../Lists & Tables/About.stories.mdx | 16 - .../Lists & Tables/DataList.stories.mdx | 168 - .../Lists & Tables/DataTable.stories.mdx | 184 - .../stories/Organisms/Markdown/examples.tsx | 25 - .../Organisms/Markdown/index.stories.mdx | 107 - .../styleguide/stories/Organisms/examples.tsx | 50 - .../stories/Typography/About.stories.mdx | 14 - .../stories/Typography/Anchor.stories.mdx | 138 - .../stories/Typography/HiddenText.stories.mdx | 27 - .../stories/Typography/Text.stories.mdx | 227 - .../stories/UX Writing/About.stories.mdx | 32 - .../Accessibility guidelines.stories.mdx | 247 - .../Component guidelines/About.stories.mdx | 16 - .../Component guidelines/Alerts.stories.mdx | 96 - .../Bell notification.stories.mdx | 39 - .../Buttons and links.stories.mdx | 67 - .../Confirmation dialogs.stories.mdx | 101 - .../Error messages.stories.mdx | 63 - .../Component guidelines/Toasts.stories.mdx | 55 - .../Component guidelines/Tooltips.stories.mdx | 82 - .../UX Writing/UI copy checklist.stories.mdx | 101 - packages/styleguide/tsconfig.json | 37 +- packages/styleguide/tsconfig.lib.json | 33 + packages/styleguide/tsconfig.storybook.json | 36 + packages/styleguide/typings.d.ts | 12 - packages/variance/babel.config.js | 17 +- packages/variance/project.json | 7 +- yarn.lock | 18520 ++++++---------- 459 files changed, 21626 insertions(+), 33607 deletions(-) delete mode 100644 dist/static/CNAME delete mode 100644 dist/static/robots.txt delete mode 100644 dist/static/storybook/index.html create mode 100644 packages/styleguide/.babelrc.json delete mode 100644 packages/styleguide/.gitignore delete mode 100644 packages/styleguide/.storybook/addons/system/components/Elements.tsx delete mode 100644 packages/styleguide/.storybook/addons/system/components/PropsTable.tsx delete mode 100644 packages/styleguide/.storybook/addons/system/components/index.ts delete mode 100644 packages/styleguide/.storybook/addons/system/components/useSystemProps.ts delete mode 100644 packages/styleguide/.storybook/addons/system/enhancers.ts delete mode 100644 packages/styleguide/.storybook/addons/system/preset.ts delete mode 100644 packages/styleguide/.storybook/addons/system/propMeta.ts delete mode 100644 packages/styleguide/.storybook/addons/system/register.ts delete mode 100644 packages/styleguide/.storybook/babel.config.js delete mode 100644 packages/styleguide/.storybook/components/Docs/DocsContainer.tsx delete mode 100644 packages/styleguide/.storybook/components/Docs/DocsPage.tsx create mode 100644 packages/styleguide/.storybook/components/Elements/Callout.tsx create mode 100644 packages/styleguide/.storybook/components/Elements/ComponentSource.tsx create mode 100644 packages/styleguide/.storybook/components/Elements/DocsContainer.tsx rename packages/styleguide/.storybook/components/{Markdown/Elements.tsx => Elements/Markdown.tsx} (58%) rename packages/styleguide/.storybook/components/{Docs => Elements}/StatusIndicator.tsx (100%) create mode 100644 packages/styleguide/.storybook/components/Elements/StorySource.tsx create mode 100644 packages/styleguide/.storybook/components/Elements/Wrappers.tsx create mode 100644 packages/styleguide/.storybook/components/Headers/AboutHeader.tsx create mode 100644 packages/styleguide/.storybook/components/Headers/ComponentHeader.tsx create mode 100644 packages/styleguide/.storybook/components/Headers/index.ts create mode 100644 packages/styleguide/.storybook/components/ImageWrapper.tsx delete mode 100644 packages/styleguide/.storybook/components/Navigation/BreadCrumbs.tsx delete mode 100644 packages/styleguide/.storybook/components/Navigation/NavigationProvider.tsx delete mode 100644 packages/styleguide/.storybook/components/Navigation/index.ts delete mode 100644 packages/styleguide/.storybook/components/Navigation/types.ts delete mode 100644 packages/styleguide/.storybook/components/Navigation/utils.ts rename packages/styleguide/.storybook/components/{DataTable => TokenTable}/elements.tsx (90%) rename packages/styleguide/.storybook/components/{DataTable => TokenTable}/index.tsx (85%) delete mode 100644 packages/styleguide/.storybook/components/utils.ts delete mode 100644 packages/styleguide/.storybook/preview-head.html rename packages/styleguide/.storybook/{theme.ts => theming/GamutTheme.ts} (87%) rename packages/styleguide/.storybook/{decorators/theme.tsx => theming/GamutThemeProvider.tsx} (96%) create mode 100644 packages/styleguide/AboutHeader.tsx delete mode 100644 packages/styleguide/CHANGELOG.md delete mode 100644 packages/styleguide/README.md create mode 100644 packages/styleguide/dist/favicon.ico delete mode 100644 packages/styleguide/jest.config.ts rename packages/styleguide/{stories/About.stories.mdx => src/lib/About.mdx} (69%) create mode 100644 packages/styleguide/src/lib/Atoms/About.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Animation/Animation.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Animation/Animation.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Badge/Badge.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Badge/Badge.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Badge/examples.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/About.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/Button/Button.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/Button/Button.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/CTAButton/CTAButton.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/CTAButton/CTAButton.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/FillButton/FillButton.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/FillButton/FillButton.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/StrokeButton/StrokeButton.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/StrokeButton/StrokeButton.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/TextButton/TextButton.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Buttons/TextButton/TextButton.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Card/Card.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FloatingCard/FloatingCard.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FloatingCard/FloatingCard.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FocusTrap/FocusTrap.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FocusTrap/FocusTrap.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/About.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/Form/Form.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/Form/Form.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormGroup/FormGroup.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormGroup/FormGroup.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormGroupDescription/FormGroupDescription.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormGroupDescription/FormGroupDescription.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormGroupLabel/FormGroupLabel.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormGroupLabel/FormGroupLabel.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormRequiredText/FormRequiredText.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormElements/FormRequiredText/FormRequiredText.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/About.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Checkbox/Checkbox.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Input/Input.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Input/Input.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Radio/Radio.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Select/Select.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/Select/Select.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/SelectDropdown/SelectDropdown.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/SelectDropdown/SelectDropdown.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/TextArea/TextArea.mdx create mode 100644 packages/styleguide/src/lib/Atoms/FormInputs/TextArea/TextArea.stories.tsx rename packages/styleguide/{stories/Atoms/Icons/About.stories.mdx => src/lib/Atoms/Icons/About.mdx} (63%) create mode 100644 packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Icons/Mini/Mini.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Icons/Regular/Regular.stories.tsx rename packages/styleguide/{stories => src/lib}/Atoms/Icons/constants.tsx (100%) create mode 100644 packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Illustrations/Illustrations.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Loaders/About.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Loaders/Shimmer/Shimmer.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Loaders/Shimmer/Shimmer.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Loaders/Spinner/Spinner.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Loaders/Spinner/Spinner.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Patterns/Patterns.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Patterns/Patterns.stories.tsx rename packages/styleguide/{stories/Atoms/PopoverContainer/index.stories.mdx => src/lib/Atoms/PopoverContainer/PopoverContainer.mdx} (56%) rename packages/styleguide/{stories/Atoms/PopoverContainer/examples.tsx => src/lib/Atoms/PopoverContainer/PopoverContainer.stories.tsx} (85%) create mode 100644 packages/styleguide/src/lib/Atoms/ProgressBar/ProgressBar.mdx create mode 100644 packages/styleguide/src/lib/Atoms/ProgressBar/ProgressBar.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.mdx create mode 100644 packages/styleguide/src/lib/Atoms/RadialProgress/RadialProgress.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/SkipToContent/SkipToContent.mdx create mode 100644 packages/styleguide/src/lib/Atoms/SkipToContent/SkipToContent.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Tag/Tag.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Tag/Tag.stories.tsx create mode 100644 packages/styleguide/src/lib/Atoms/Toggle/Toggle.mdx create mode 100644 packages/styleguide/src/lib/Atoms/Toggle/Toggle.stories.tsx create mode 100644 packages/styleguide/src/lib/Foundations/About.mdx rename packages/styleguide/{stories/Foundations/ColorMode/index.stories.mdx => src/lib/Foundations/ColorMode/ColorMode.mdx} (89%) rename packages/styleguide/{stories => src/lib}/Foundations/ColorMode/examples.tsx (76%) rename packages/styleguide/{stories/Foundations/Layout.stories.mdx => src/lib/Foundations/Layout.mdx} (89%) create mode 100644 packages/styleguide/src/lib/Foundations/System/About.mdx rename packages/styleguide/{stories/Foundations/System/Compose.stories.mdx => src/lib/Foundations/System/Compose.mdx} (81%) rename packages/styleguide/{stories/Foundations/System/Props.stories.mdx => src/lib/Foundations/System/Props.mdx} (75%) rename packages/styleguide/{stories/Foundations/System/Responsive Properties.stories.mdx => src/lib/Foundations/System/ResponsiveProperties.mdx} (88%) rename packages/styleguide/{stories/Foundations/System/Variants.stories.mdx => src/lib/Foundations/System/Variants.mdx} (92%) rename packages/styleguide/{stories/Foundations/Theme/index.stories.mdx => src/lib/Foundations/Theme/Theme.mdx} (72%) rename packages/styleguide/{stories/Foundations/Typography.stories.mdx => src/lib/Foundations/Typography.mdx} (87%) rename packages/styleguide/{stories/Foundations/Utilities.stories.mdx => src/lib/Foundations/Utilities/Utilities.mdx} (78%) create mode 100644 packages/styleguide/src/lib/Foundations/Utilities/boxShadow.tsx rename packages/styleguide/{stories/Foundations/Theme/tables.tsx => src/lib/Foundations/shared/elements.tsx} (76%) create mode 100644 packages/styleguide/src/lib/Layouts/About.mdx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/About.mdx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/Box/Box.mdx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/Box/Box.stories.tsx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/FlexBox/FlexBox.mdx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/FlexBox/FlexBox.stories.tsx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/GridBox/GridBox.mdx create mode 100644 packages/styleguide/src/lib/Layouts/Boxes/GridBox/GridBox.stories.tsx create mode 100644 packages/styleguide/src/lib/Layouts/ContentContainer/ContentContainer.mdx create mode 100644 packages/styleguide/src/lib/Layouts/ContentContainer/ContentContainer.stories.tsx create mode 100644 packages/styleguide/src/lib/Layouts/LayoutGrid/LayoutGrid.mdx create mode 100644 packages/styleguide/src/lib/Layouts/LayoutGrid/LayoutGrid.stories.tsx create mode 100644 packages/styleguide/src/lib/Layouts/LayoutGrid/examples.tsx create mode 100644 packages/styleguide/src/lib/Meta/About.mdx rename packages/styleguide/{stories/Meta/Best Practices.stories.mdx => src/lib/Meta/Best Practices.mdx} (88%) create mode 100644 packages/styleguide/src/lib/Meta/Brand.mdx create mode 100644 packages/styleguide/src/lib/Meta/Contributing.mdx rename packages/styleguide/{stories/Meta/FAQs.stories.mdx => src/lib/Meta/FAQs.mdx} (78%) create mode 100644 packages/styleguide/src/lib/Meta/Stories.mdx create mode 100644 packages/styleguide/src/lib/Molecules/About.mdx create mode 100644 packages/styleguide/src/lib/Molecules/AccordionButtonDeprecated/AccordionButtonDeprecated.mdx create mode 100644 packages/styleguide/src/lib/Molecules/AccordionButtonDeprecated/AccordionButtonDeprecated.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/AccordionDeprecated/AccordionDeprecated.mdx create mode 100644 packages/styleguide/src/lib/Molecules/AccordionDeprecated/AccordionDeprecated.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Alert/Alert.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Alert/Alert.stories.tsx rename packages/styleguide/{stories => src/lib}/Molecules/Alert/constants.tsx (98%) create mode 100644 packages/styleguide/src/lib/Molecules/Breadcrumbs/Breadcrumbs.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Breadcrumbs/Breadcrumbs.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Coachmark/Coachmark.mdx rename packages/styleguide/{stories/Molecules/Coachmark/Coachmark.examples.tsx => src/lib/Molecules/Coachmark/Coachmark.stories.tsx} (56%) create mode 100644 packages/styleguide/src/lib/Molecules/Disclosure/Disclosure.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Disclosure/Disclosure.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Menu/Menu.mdx rename packages/styleguide/{stories/Molecules/Menu/Menu.examples.tsx => src/lib/Molecules/Menu/Menu.stories.tsx} (71%) create mode 100644 packages/styleguide/src/lib/Molecules/Modals/About.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/Dialog/Dialog.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/Dialog/Dialog.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/ModalDeprecated/ModalDeprecated.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/ModalDeprecated/ModalDeprecated.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/Overlay/Overlay.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Modals/Overlay/Overlay.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Pagination/Pagination.mdx rename packages/styleguide/{stories/Molecules/Pagination/Pagination.examples.tsx => src/lib/Molecules/Pagination/Pagination.stories.tsx} (56%) create mode 100644 packages/styleguide/src/lib/Molecules/Popover/Popover.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Popover/Popover.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Tabs/Tabs.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Tabs/Tabs.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/About.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/DeprecatedToolTip/DeprecatedToolTip.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/DeprecatedToolTip/DeprecatedToolTip.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/InfoTip/InfoTip.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/PreviewTip/PreviewTip.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/PreviewTip/PreviewTip.stories.tsx rename packages/styleguide/{stories/Molecules/Tip/elements.tsx => src/lib/Molecules/Tips/TipsTable.tsx} (87%) create mode 100644 packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Toasts/About.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Toasts/Toast/Toast.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Toasts/Toast/Toast.stories.tsx create mode 100644 packages/styleguide/src/lib/Molecules/Toasts/Toaster/Toaster.mdx rename packages/styleguide/{stories/Molecules/Toaster.example.tsx => src/lib/Molecules/Toasts/Toaster/Toaster.stories.tsx} (55%) create mode 100644 packages/styleguide/src/lib/Molecules/Video/Video.mdx create mode 100644 packages/styleguide/src/lib/Molecules/Video/Video.stories.tsx create mode 100644 packages/styleguide/src/lib/Organisms/About.mdx create mode 100644 packages/styleguide/src/lib/Organisms/ConnectedForm/About.mdx rename packages/styleguide/{stories/Organisms/ConnectedForm/ConnectedForm.stories.mdx => src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx} (54%) rename packages/styleguide/{stories/Organisms/ConnectedForm/ConnectedForm.examples.tsx => src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.stories.tsx} (90%) create mode 100644 packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.mdx rename packages/styleguide/{stories/Organisms/ConnectedForm/ConnectedFormGroup.examples.tsx => src/lib/Organisms/ConnectedForm/ConnectedFormGroup/ConnectedFormGroup.stories.tsx} (79%) rename packages/styleguide/{stories/Organisms/ConnectedForm/ConnectedFormInputs.stories.mdx => src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx} (68%) create mode 100644 packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.stories.tsx create mode 100644 packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputsTable.tsx rename packages/styleguide/{stories/Organisms/ConnectedForm/SubmitButton.stories.mdx => src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.mdx} (52%) rename packages/styleguide/{stories/Organisms/ConnectedForm/SubmitButton.examples.tsx => src/lib/Organisms/ConnectedForm/SubmitButton/SubmitButton.stories.tsx} (73%) create mode 100644 packages/styleguide/src/lib/Organisms/GridForm/GridForm.mdx create mode 100644 packages/styleguide/src/lib/Organisms/GridForm/GridForm.stories.tsx create mode 100644 packages/styleguide/src/lib/Organisms/Lists & Tables/About.mdx create mode 100644 packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.mdx create mode 100644 packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.stories.tsx create mode 100644 packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx create mode 100644 packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx rename packages/styleguide/{stories/Organisms/Lists & Tables/List/index.stories.mdx => src/lib/Organisms/Lists & Tables/List/List.mdx} (66%) rename packages/styleguide/{stories/Organisms/Lists & Tables/List/List.examples.tsx => src/lib/Organisms/Lists & Tables/List/List.stories.tsx} (70%) rename packages/styleguide/{stories => src/lib}/Organisms/Lists & Tables/examples.tsx (95%) create mode 100644 packages/styleguide/src/lib/Organisms/Markdown/Markdown.mdx create mode 100644 packages/styleguide/src/lib/Organisms/Markdown/Markdown.stories.tsx rename packages/styleguide/{stories/Organisms/Markdown/markdown-example.md => src/lib/Organisms/Markdown/example.md} (100%) create mode 100644 packages/styleguide/src/lib/Typography/About.mdx rename packages/styleguide/{stories/Typography => src/lib/Typography/Anchor}/Anchor.examples.tsx (87%) create mode 100644 packages/styleguide/src/lib/Typography/Anchor/Anchor.mdx create mode 100644 packages/styleguide/src/lib/Typography/Anchor/Anchor.stories.tsx create mode 100644 packages/styleguide/src/lib/Typography/HiddenText/HiddenText.mdx create mode 100644 packages/styleguide/src/lib/Typography/HiddenText/HiddenText.stories.tsx create mode 100644 packages/styleguide/src/lib/Typography/Text/Text.mdx create mode 100644 packages/styleguide/src/lib/Typography/Text/Text.stories.tsx create mode 100644 packages/styleguide/src/lib/Typography/Text/tables.tsx create mode 100644 packages/styleguide/src/static/alertAnatomy.png create mode 100644 packages/styleguide/src/static/atoms/badge.png create mode 100644 packages/styleguide/src/static/typography/anchor.png delete mode 100644 packages/styleguide/stories/Atoms/About.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Animation.examples.tsx delete mode 100644 packages/styleguide/stories/Atoms/Animation.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Badge/Badge.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Badge/examples.tsx delete mode 100644 packages/styleguide/stories/Atoms/Button/examples.tsx delete mode 100644 packages/styleguide/stories/Atoms/Button/index.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Card.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Drawer.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FloatingCard.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FocusTrap.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormElements/About.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormElements/Form.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormElements/FormGroup.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormElements/FormGroupDescription.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormElements/FormGroupLabel.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormElements/FormRequiredText.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/About.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/Checkbox.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/Input.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/Radio.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/RadioGroup.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/Select.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/SelectDropdown.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/TextArea.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/FormInputs/examples.tsx delete mode 100644 packages/styleguide/stories/Atoms/Icons/Mini.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Icons/Regular.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Illustrations.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Loaders/Shimmer.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Loaders/Spinner.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Patterns.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/ProgressBar/constants.tsx delete mode 100644 packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/RadialProgress.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/SkipToContent.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Tag.examples.tsx delete mode 100644 packages/styleguide/stories/Atoms/Tag.stories.mdx delete mode 100644 packages/styleguide/stories/Atoms/Toggle.examples.tsx delete mode 100644 packages/styleguide/stories/Atoms/Toggle.stories.mdx delete mode 100644 packages/styleguide/stories/Foundations/About.stories.mdx delete mode 100644 packages/styleguide/stories/Foundations/System/About.stories.mdx delete mode 100644 packages/styleguide/stories/Foundations/System/tables.tsx delete mode 100644 packages/styleguide/stories/Installation.stories.mdx delete mode 100644 packages/styleguide/stories/Layouts/About.stories.mdx delete mode 100644 packages/styleguide/stories/Layouts/Box/FlexBox.stories.mdx delete mode 100644 packages/styleguide/stories/Layouts/Box/GridBox.stories.mdx delete mode 100644 packages/styleguide/stories/Layouts/Box/index.stories.mdx delete mode 100644 packages/styleguide/stories/Layouts/ContentContainer.stories.mdx delete mode 100644 packages/styleguide/stories/Layouts/Elements/index.tsx delete mode 100644 packages/styleguide/stories/Layouts/LayoutGrid.stories.mdx delete mode 100644 packages/styleguide/stories/Meta/About.stories.mdx delete mode 100644 packages/styleguide/stories/Meta/Brand Labs/About.stories.mdx delete mode 100644 packages/styleguide/stories/Meta/Contributing.stories.mdx delete mode 100644 packages/styleguide/stories/Meta/Stories.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/About.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/AccordionButtonDeprecated.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/AccordionDeprecated.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Alert/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Breadcrumbs.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Coachmark/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Disclosure/examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Disclosure/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Flyout.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Menu/MenuItem.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Menu/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Modals/About.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Modals/Dialog.examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Modals/Dialog.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Modals/Modal.examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Modals/Modal.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Modals/ModalDeprecated.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Modals/Overlay.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Pagination/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Popover/Popover.examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Popover/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tabs/Tabs.examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Tabs/index.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tip/About.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tip/DeprecatedToolTip.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tip/InfoTip.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tip/PreviewTip.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tip/ToolTip.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Tip/examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Toast.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Toaster.stories.mdx delete mode 100644 packages/styleguide/stories/Molecules/Video/Video.examples.tsx delete mode 100644 packages/styleguide/stories/Molecules/Video/index.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/About.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/ConnectedForm/About.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/ConnectedForm/ConnectedFormGroup.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/ConnectedForm/utils.tsx delete mode 100644 packages/styleguide/stories/Organisms/GridForm.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/Lists & Tables/About.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/Lists & Tables/DataList.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/Lists & Tables/DataTable.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/Markdown/examples.tsx delete mode 100644 packages/styleguide/stories/Organisms/Markdown/index.stories.mdx delete mode 100644 packages/styleguide/stories/Organisms/examples.tsx delete mode 100644 packages/styleguide/stories/Typography/About.stories.mdx delete mode 100644 packages/styleguide/stories/Typography/Anchor.stories.mdx delete mode 100644 packages/styleguide/stories/Typography/HiddenText.stories.mdx delete mode 100644 packages/styleguide/stories/Typography/Text.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/About.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Accessibility guidelines.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/About.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Alerts.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Bell notification.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Buttons and links.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Confirmation dialogs.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Error messages.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Toasts.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/Component guidelines/Tooltips.stories.mdx delete mode 100644 packages/styleguide/stories/UX Writing/UI copy checklist.stories.mdx create mode 100644 packages/styleguide/tsconfig.lib.json create mode 100644 packages/styleguide/tsconfig.storybook.json delete mode 100644 packages/styleguide/typings.d.ts diff --git a/.circleci/config.yml b/.circleci/config.yml index c594d0ab1f..35c520f695 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -5,7 +5,7 @@ orbs: references: default_env: &default_env docker: - - image: cimg/node:16.17.0 + - image: cimg/node:18.18.2 working_directory: ~/repo environment: IGNORE_COMMIT_MESSAGE: 'chore(release): publish' @@ -169,7 +169,7 @@ jobs: - *build_all_packages - run: name: build storybook - command: yarn build-storybook + command: yarn nx run styleguide:build-storybook - run: name: deploy command: yarn deploy @@ -190,14 +190,14 @@ jobs: - *build_all_packages - run: name: build storybook - command: yarn build-storybook + command: yarn nx run styleguide:build-storybook - *save_nx_cache - *save_webpack_cache - run: name: deploy command: | DEPLOY_MESSAGE="User: ${CIRCLE_USERNAME} Project: ${CIRCLE_PROJECT_USERNAME}/${CIRCLE_PROJECT_REPONAME} Pull Request: ${CIRCLE_PULL_REQUEST}" - npx netlify-cli@2.37.0 deploy --message="${DEPLOY_MESSAGE}" --dir=dist/docs --json > .deploy-output + npx netlify-cli@17.37.1 deploy --message "${DEPLOY_MESSAGE}" --dir dist/storybook/styleguide --json --filter @codecademy/styleguide > .deploy-output - setup_remote_docker - run: docker pull cloudposse/github-commenter:0.5.0-58 - run: diff --git a/.eslintrc.js b/.eslintrc.js index 50b5fa7d66..3e040dfc71 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -46,6 +46,11 @@ module.exports = { '@typescript-eslint/no-unsafe-return': 'off', '@typescript-eslint/restrict-plus-operands': 'off', '@typescript-eslint/restrict-template-expressions': 'off', + 'import/no-cycle': 'off', + 'react/no-unknown-property': [ + 'error', + { ignore: ['mask-type', 'xmlns-x', 'xmlns-i', 'xmlns-graph'] }, + ], }, }, { diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml index 85adf1e2f0..b9e63e85c8 100644 --- a/.github/workflows/push.yml +++ b/.github/workflows/push.yml @@ -6,7 +6,7 @@ jobs: steps: - uses: Codecademy/run-on-yarn@v3.0.0 with: - node-version: 16 + node-version: 20 command: format:verify lint: @@ -14,6 +14,15 @@ jobs: fail-fast: false matrix: command: ['lint', 'verify'] + runs-on: ubuntu-latest + steps: + - uses: Codecademy/run-on-yarn@v3.0.0 + with: + node-version: 20 + command: build + - run: yarn ${{ matrix.command }} + + runs-on: ubuntu-latest steps: - uses: Codecademy/run-on-yarn@v3.0.0 diff --git a/.lintstagedrc.mjs b/.lintstagedrc.mjs index 90380937d3..1cdc904996 100644 --- a/.lintstagedrc.mjs +++ b/.lintstagedrc.mjs @@ -9,9 +9,9 @@ export default { commands.push(`yarn syncpack format`); } - // if (micromatch.some(allChanges, 'yarn.lock')) { - // commands.push(`npx yarn-deduplicate`); - // } + if (micromatch.some(allChanges, 'yarn.lock')) { + commands.push(`npx yarn-deduplicate`); + } const eslintExtensions = `{mdx,ts,tsx,js,jsx,json}`; const eslintFiles = micromatch( diff --git a/.nvmrc b/.nvmrc index 37e391febb..bb52a169c1 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v16.17.0 +v18.18.2 diff --git a/.prettierignore b/.prettierignore index c8e12df14a..291938f37e 100644 --- a/.prettierignore +++ b/.prettierignore @@ -5,4 +5,6 @@ node_modules packages/gamut-icons/src/icons packages/gamut-styles/**/*.d.ts packages/styleguide/stories/Core/Atoms/Markdown/*.md -.nx + +/.nx/cache +/.nx/workspace-data diff --git a/.vscode/stories.code-snippets b/.vscode/stories.code-snippets index be682ee3d1..da25ae07cd 100644 --- a/.vscode/stories.code-snippets +++ b/.vscode/stories.code-snippets @@ -1,86 +1,137 @@ { - "Component Story": { - "prefix": "component-story", + "Component Doc": { + "prefix": "component-doc", "body": [ - "import { $1 } from '@codecademy/$2';", - "import title from '@codecademy/macros/lib/title.macro';", - "import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';", - "import { PropsTable } from '@codecademy/storybook-addon-variance';", + "import { Canvas, Controls, Meta } from '@storybook/blocks';", + "", + "import { ComponentHeader } from '~styleguide/blocks';", + "", + "import * as $1Stories from './$1.stories';", + "", + "export const parameters = {", + "subtitle: `Template component`,", + "design: {", + "type: 'figma',", + "url: 'https: //www.figma.com/file/XXX',", + " },", + "status: 'current',", + "source: {", + "repo: '$2',", + "// this is easy to find by right clicking on the file in VSCode and clicking 'Copy Remote File Url From...' and the selecting 'main' or amending the url path below like so: https://github.com/Codecademy/gamut/blob/main/packages/${2}/src/file/location", + "githubLink:", + "'https: //github.com/Codecademy/gamut/blob/main/packages/gamut/src/Logo',", + " },", + "};", + "", + "", + "", + "", + "## Usage", + "", + "Use $1 to [what it should be used for]", + "", + "### Best practices:", + "", + "- [recommendation / best practice for implementation]", + "- [recommendation / best practice for implementation]", + "", + "When NOT to use", + "", + "- [use case]- for [describe the use case], use the [similar component] component.", + "- [use case]- for [describe the use case], use the [similar component] component", + "", + "## Anatomy", + "", + "[Insert image exported from Figma]", + "", + "1. [Element name]", + "- [description including available options and ux writing if relevant]", "", - "", + "## Variants", "", - "`$1` component summary goes here", + "### [Variant 1 name]", "", - "## Design Principles", + "Use the [variant 1 name] to [what it should be used for]", "", - "Design Principles summary", + "", "", - "## Usage Guidelines", + "## Playground", "", - "Usage summary", + "If you are using a story named 'Default', you can forgo the `of` prop.", "", - "## Code Playground", + "", "", - "", - " ", - " {(args) => <$1 {...args} />}", - " ", - "", + "", "", - "" + "## Accessibility considerations", + "", + "- [Accessibility guidance]", + "", + "## UX writing", + "", + "- [content]", + " - [guidance]", + " - [guidance]" ], - "description": "Default Component Story Structure." + "description": "Default Component Doc Structure." }, "Table of Contents Story": { "prefix": "toc-story", "body": [ - "import title from '@codecademy/macros/lib/title.macro';", - "import { Meta } from '@storybook/addon-docs/blocks';", + "import { Meta } from '@storybook/blocks';", + "import { AboutHeader, TableOfContents } from '~styleguide/blocks';", + "", + "export const parameters = {", + " id: '$1',", + " title: '$1/About',", + " subtitle: '$2',", + " }", "", - "import { TableOfContents } from '~styleguide/blocks';", + "", "", - "", + "", "", - "" + "Foundations make up the smallest scale design values that comprise a design system. Sometimes referred to elsewhere as "tokens", they are the abstract units that comprise and stitch together our atoms, molecules, and organisms.", + "", + "" ], "description": "TOC Story Structure." }, - "Canvas Block": { - "prefix": "canvas-block", - "body": [ - "", - " ", - " {(args) => <$2 {...args} />}", - " ", - "" - ], - "description": "A single story block wrapped in a canvas" - }, - "Story Block": { - "prefix": "story-block", + "Component Story": { + "prefix": "component-story", "body": [ - " ", - " {(args) => <$2 {...args} />}", - " " + "import { $1 } from '@codecademy/gamut';", + "import type { Meta, StoryObj } from '@storybook/react';", + "", + "const meta: Meta = {", + " component: $1,", + " args: {},", + "};", + "", + "export default meta;", + "type Story = StoryObj;", + "", + "export const Default: Story = {", + " args: {", + " children: 'Test'", + " },", + "};", + "", + "export const Secondary: Story = {", + " args: {", + " children: 'Test again',", + " variant: 'secondary'", + " }", + "};" ], - "description": "A single story block without a canvas" + "description": "Default TSX story structure." } } diff --git a/.yarnclean b/.yarnclean index 632afb12c5..d62c8fee69 100644 --- a/.yarnclean +++ b/.yarnclean @@ -5,7 +5,6 @@ tests powered-test # asset directories -docs website images diff --git a/README.md b/README.md index 49333cfdcb..d77d082801 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # Gamut +// Storybook 8 branch + _The component library & design system for Codecademy._ ✨ --- diff --git a/dist/static/CNAME b/dist/static/CNAME deleted file mode 100644 index e9c9997a55..0000000000 --- a/dist/static/CNAME +++ /dev/null @@ -1 +0,0 @@ -gamut.codecademy.com diff --git a/dist/static/robots.txt b/dist/static/robots.txt deleted file mode 100644 index eb0536286f..0000000000 --- a/dist/static/robots.txt +++ /dev/null @@ -1,2 +0,0 @@ -User-agent: * -Disallow: diff --git a/dist/static/storybook/index.html b/dist/static/storybook/index.html deleted file mode 100644 index a8130a85ae..0000000000 --- a/dist/static/storybook/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - Styleguide | Codecademy - - - - - - - - - - diff --git a/nx.json b/nx.json index bf3d0091c5..d597dd20d1 100644 --- a/nx.json +++ b/nx.json @@ -16,9 +16,6 @@ } }, "extends": "nx/presets/npm.json", - "affected": { - "defaultBase": "main" - }, "workspaceLayout": { "appsDir": "packages", "libsDir": "packages" @@ -34,7 +31,10 @@ "default", "!{projectRoot}/**/*.(test|spec).ts{,.snap}", "!{projectRoot}/**/__tests__/**/*", - "!{projectRoot}/**/__fixtures__/**/*" + "!{projectRoot}/**/__fixtures__/**/*", + "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)", + "!{projectRoot}/.storybook/**/*", + "!{projectRoot}/tsconfig.storybook.json" ] }, "targetDefaults": { @@ -42,7 +42,10 @@ "dependsOn": ["^build"], "inputs": ["production", "^production", "babelConfig", "ci"] }, - "test": { + "verify": { + "cache": true + }, + "@nx/jest:jest": { "dependsOn": ["^build"], "inputs": [ "default", @@ -64,5 +67,10 @@ "linter": "eslint" } }, - "$schema": "./node_modules/nx/schemas/nx-schema.json" + "$schema": "./node_modules/nx/schemas/nx-schema.json", + "useDaemonProcess": false, + "nxCloudAccessToken": "ZmVjZWYxNzctYTdmZC00ODYzLTg4MzEtZTE1YTVmZDdkZmY1fHJlYWQ=", + "parallel": 3, + "useInferencePlugins": false, + "defaultBase": "main" } diff --git a/package.json b/package.json index 2505ac8ffd..67727eb169 100644 --- a/package.json +++ b/package.json @@ -4,45 +4,71 @@ "version": "1.2.0", "author": "Codecademy Engineers ", "dependencies": { - "@babel/cli": "7.20.7", - "@babel/core": "7.20.12", - "@babel/preset-typescript": "^7.18.6", + "@emotion/react": "11.11.1", + "@emotion/styled": "11.11.0", + "core-js": "3.7.0", + "lodash": "^4.17.5", + "react": "18.3.1", + "react-dom": "18.3.1", + "react-helmet-async": "^2.0.5" + }, + "devDependencies": { + "@babel/cli": "7.24.7", + "@babel/core": "7.24.7", + "@babel/preset-env": "^7.24.7", + "@babel/preset-react": "^7.24.7", + "@babel/preset-typescript": "^7.24.7", "@codecademy/eslint-config": "8.0.0", "@codecademy/prettier-config": "^0.2.0", "@codecademy/tsconfig": "^0.3.0", "@emotion/babel-plugin": "11.11.0", "@emotion/jest": "^11.11.0", - "@emotion/react": "11.11.1", - "@emotion/styled": "11.11.0", - "@nx/jest": "16.8.1", - "@nx/react": "16.8.1", + "@mdx-js/react": "^3.1.0", + "@nx/jest": "19.3.2", + "@nx/js": "19.3.2", + "@nx/react": "19.3.2", + "@nx/storybook": "19.3.2", + "@nx/web": "19.3.2", + "@nx/webpack": "19.3.2", + "@storybook/addon-controls": "8.3.6", + "@storybook/addon-designs": "^8.0.3", + "@storybook/addon-docs": "^8.3.6", + "@storybook/addon-essentials": "^8.3.6", + "@storybook/addon-links": "^8.3.6", + "@storybook/addon-webpack5-compiler-babel": "^3.0.3", + "@storybook/blocks": "^8.3.6", + "@storybook/core-server": "8.3.6", + "@storybook/docs-tools": "^8.3.6", + "@storybook/icons": "1.2.12", + "@storybook/manager-api": "^8.3.6", + "@storybook/react-webpack5": "^8.3.6", + "@storybook/theming": "^8.3.6", "@svgr/cli": "5.5.0", "@testing-library/dom": "^8.11.1", "@testing-library/jest-dom": "^5.16.1", - "@testing-library/react": "^12.1.2", + "@testing-library/react": "15.0.6", "@testing-library/react-hooks": "^7.0.2", - "@testing-library/user-event": "^13.5.0", + "@testing-library/user-event": "^14.5.2", "@types/classnames": "2.2.10", "@types/invariant": "2.2.29", "@types/konami-code-js": "^0.8.0", "@types/lodash": "4.17.0", - "@types/react": "^17", - "@types/react-dom": "^17", + "@types/react": "18.3.1", + "@types/react-dom": "18.3.0", "@types/react-test-renderer": "^17.0.1", "@types/stylis": "^4.2.0", "@typescript-eslint/eslint-plugin": "^5.15.0", "@typescript-eslint/parser": "^5.15.0", "babel-jest": "29.6.4", "babel-plugin-macros": "3.0.1", - "babel-preset-codecademy": "7.0.0", "component-test-setup": "^0.3.1", "conventional-changelog-cli": "^2.0.34", "conventional-changelog-conventionalcommits": "^4.3.0", - "core-js": "3.7.0", "cpy-cli": "^4.1.0", "eslint": "^8.11.0", "eslint-plugin-gamut": "^2.0.0", "eslint-plugin-local-rules": "^1.1.0", + "eslint-plugin-lodash": "^7.4.0", "gh-pages": "^2.2.0", "husky": "8.0.3", "identity-obj-proxy": "3.0.0", @@ -52,16 +78,13 @@ "jest-junit": "^16.0.0", "lerna": "7.2.0", "lint-staged": "14.0.1", - "lodash": "^4.17.5", "micromatch": "^4.0.5", "mutationobserver-shim": "^0.3.3", - "nx": "16.8.1", - "nx-cloud": "16.4.0", - "prettier": "2.2.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-helmet": "6.1.0", - "react-test-renderer": "^17.0.2", + "nx": "19.3.2", + "onchange": "^7.0.2", + "prettier": "^2.6.2", + "react-test-renderer": "18.3.1", + "storybook": "^8.3.6", "svgo": "^1.3.2", "syncpack": "^10.9.3", "ts-jest": "29.1.1", @@ -69,13 +92,8 @@ "tslib": "2.4.0", "typescript": "5.1.3" }, - "devDependencies": { - "eslint-plugin-lodash": "^7.4.0", - "onchange": "^7.0.2", - "webpack": "4.46.0" - }, "engines": { - "node": "^16.17", + "node": "^18.18.2", "yarn": "^1.21.1" }, "license": "MIT", @@ -116,12 +134,6 @@ "workspaces": { "packages": [ "packages/*" - ], - "nohoist": [ - "**/@storybook", - "**/@storybook/**", - "**/storybook-*", - "**/storybook-*/**" ] } } diff --git a/packages/eslint-plugin-gamut/project.json b/packages/eslint-plugin-gamut/project.json index 412201d58b..168fc2ace2 100644 --- a/packages/eslint-plugin-gamut/project.json +++ b/packages/eslint-plugin-gamut/project.json @@ -3,6 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "packages/eslint-plugin-gamut/src", "projectType": "library", + "tags": [], "targets": { "build": { "executor": "nx:run-commands", @@ -16,10 +17,8 @@ "executor": "@nx/jest:jest", "outputs": ["{workspaceRoot}/coverage/packages/eslint-plugin-gamut"], "options": { - "jestConfig": "packages/eslint-plugin-gamut/jest.config.ts", - "passWithNoTests": true + "jestConfig": "packages/eslint-plugin-gamut/jest.config.ts" } } - }, - "tags": [] + } } diff --git a/packages/gamut-icons/babel.config.js b/packages/gamut-icons/babel.config.js index ffd4ed9873..e325473dfd 100644 --- a/packages/gamut-icons/babel.config.js +++ b/packages/gamut-icons/babel.config.js @@ -1,4 +1,19 @@ module.exports = { extends: '../../babel.defaults.js', - presets: ['codecademy', '@babel/preset-typescript'], + presets: [ + [ + '@babel/env', + { + modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false, + targets: 'defaults', + }, + ], + [ + '@babel/react', + { + runtime: 'automatic', + }, + ], + '@babel/preset-typescript', + ], }; diff --git a/packages/gamut-icons/project.json b/packages/gamut-icons/project.json index 1fe2a72193..9712ead4a1 100644 --- a/packages/gamut-icons/project.json +++ b/packages/gamut-icons/project.json @@ -3,6 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "packages/gamut-icons/src", "projectType": "library", + "tags": [], "targets": { "build": { "outputs": [ @@ -31,8 +32,7 @@ "dependsOn": ["build"], "outputs": ["{workspaceRoot}/coverage/packages/gamut-icons"], "options": { - "jestConfig": "packages/gamut-icons/jest.config.ts", - "passWithNoTests": true + "jestConfig": "packages/gamut-icons/jest.config.ts" } }, "clean": { @@ -42,6 +42,5 @@ "command": "rm -rf ./dist" } } - }, - "tags": [] + } } diff --git a/packages/gamut-illustrations/babel.config.js b/packages/gamut-illustrations/babel.config.js index b1bcb85b9c..04bc362829 100644 --- a/packages/gamut-illustrations/babel.config.js +++ b/packages/gamut-illustrations/babel.config.js @@ -1,6 +1,21 @@ module.exports = { extends: '../../babel.defaults.js', - presets: ['codecademy', '@babel/preset-typescript'], + presets: [ + [ + '@babel/env', + { + modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false, + targets: 'defaults', + }, + ], + [ + '@babel/react', + { + runtime: 'automatic', + }, + ], + '@babel/preset-typescript', + ], plugins: [ [ '@emotion/babel-plugin', diff --git a/packages/gamut-illustrations/project.json b/packages/gamut-illustrations/project.json index 428715436d..de30ecec23 100644 --- a/packages/gamut-illustrations/project.json +++ b/packages/gamut-illustrations/project.json @@ -3,6 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "packages/gamut-illustrations/src", "projectType": "library", + "tags": [], "targets": { "build": { "outputs": ["{projectRoot}/dist"], @@ -21,8 +22,7 @@ "executor": "@nx/jest:jest", "outputs": ["{workspaceRoot}/coverage/packages/gamut-illustrations"], "options": { - "jestConfig": "packages/gamut-illustrations/jest.config.ts", - "passWithNoTests": true + "jestConfig": "packages/gamut-illustrations/jest.config.ts" } }, "clean": { @@ -32,6 +32,5 @@ "command": "rm -rf ./dist" } } - }, - "tags": [] + } } diff --git a/packages/gamut-illustrations/src/MobilePhone.tsx b/packages/gamut-illustrations/src/MobilePhone.tsx index c10050089a..fabd13f0fa 100644 --- a/packages/gamut-illustrations/src/MobilePhone.tsx +++ b/packages/gamut-illustrations/src/MobilePhone.tsx @@ -15,7 +15,7 @@ export const MobilePhone: React.FC = ({ viewBox="0 0 108 203" xmlns="http://www.w3.org/2000/svg" aria-hidden={ariaHidden} - class-name={className} + className={className} > { }); it('renders global styles', () => { renderView(); - const allStyles = Array.from( - document.querySelectorAll('style') - ).filter((el) => Boolean(el.getAttribute('data-emotion'))); + const allStyles = Array.from(document.querySelectorAll('style')).filter( + (el) => Boolean(el.getAttribute('data-emotion')) + ); expect(allStyles.length).toBeGreaterThan(0); }); it('does not render global styles when configured', () => { renderView({ useGlobals: false }); - const allStyles = Array.from( - document.querySelectorAll('style') - ).filter((el) => Boolean(el.getAttribute('data-emotion'))); + const allStyles = Array.from(document.querySelectorAll('style')).filter( + (el) => Boolean(el.getAttribute('data-emotion')) + ); expect(allStyles.length).toBe(0); }); @@ -64,9 +64,9 @@ describe(GamutProvider, () => { children: , }); - const allStyles = Array.from( - document.querySelectorAll('style') - ).filter((el) => Boolean(el.getAttribute('data-emotion'))); + const allStyles = Array.from(document.querySelectorAll('style')).filter( + (el) => Boolean(el.getAttribute('data-emotion')) + ); expect(createEmotionCache).toHaveBeenCalledTimes(1); expect(allStyles.length).toBeGreaterThan(0); @@ -83,10 +83,10 @@ describe(GamutProvider, () => { variables: { cool: { '--cool': 'blue' } }, }); - const allStyles = Array.from( - document.querySelectorAll('style') - ).filter((el) => el.innerHTML.includes('--cool')); + const rootElement = document.documentElement; + const rootStyles = getComputedStyle(rootElement); + const blue = rootStyles.getPropertyValue('--cool'); - expect(allStyles.length).toBe(1); + expect(blue).toBe('blue'); }); }); diff --git a/packages/gamut-tests/babel.config.js b/packages/gamut-tests/babel.config.js index 427504c86e..66e5a32ab7 100644 --- a/packages/gamut-tests/babel.config.js +++ b/packages/gamut-tests/babel.config.js @@ -1,6 +1,21 @@ module.exports = { extends: '../../babel.defaults.js', - presets: ['codecademy', '@babel/preset-typescript'], + presets: [ + [ + '@babel/env', + { + modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false, + targets: 'defaults', + }, + ], + [ + '@babel/react', + { + runtime: 'automatic', + }, + ], + '@babel/preset-typescript', + ], plugins: [ [ '@emotion/babel-plugin', diff --git a/packages/gamut-tests/project.json b/packages/gamut-tests/project.json index 2b66f526d2..9fb5a513b2 100644 --- a/packages/gamut-tests/project.json +++ b/packages/gamut-tests/project.json @@ -3,6 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "packages/gamut-tests/src", "projectType": "library", + "tags": [], "targets": { "build": { "outputs": ["{projectRoot}/dist"], @@ -32,6 +33,5 @@ "command": "rm -rf ./dist" } } - }, - "tags": [] + } } diff --git a/packages/gamut-tests/src/index.tsx b/packages/gamut-tests/src/index.tsx index 75d3261f99..3310a74337 100644 --- a/packages/gamut-tests/src/index.tsx +++ b/packages/gamut-tests/src/index.tsx @@ -18,7 +18,7 @@ export const MockGamutProvider: React.FC<{ children?: React.ReactNode }> = ({ ); }; -function withMockGamutProvider( +function withMockGamutProvider( WrappedComponent: React.ComponentType ) { const WithBoundaryComponent: React.FC = (props) => ( diff --git a/packages/gamut/babel.config.js b/packages/gamut/babel.config.js index b1bcb85b9c..04bc362829 100644 --- a/packages/gamut/babel.config.js +++ b/packages/gamut/babel.config.js @@ -1,6 +1,21 @@ module.exports = { extends: '../../babel.defaults.js', - presets: ['codecademy', '@babel/preset-typescript'], + presets: [ + [ + '@babel/env', + { + modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false, + targets: 'defaults', + }, + ], + [ + '@babel/react', + { + runtime: 'automatic', + }, + ], + '@babel/preset-typescript', + ], plugins: [ [ '@emotion/babel-plugin', diff --git a/packages/gamut/package.json b/packages/gamut/package.json index 7816c2651e..bc7b144569 100644 --- a/packages/gamut/package.json +++ b/packages/gamut/package.json @@ -21,7 +21,7 @@ "polished": "^4.1.2", "react-aria-tabpanel": "^4.4.0", "react-focus-on": "^3.5.1", - "react-hook-form": "^7.21.2", + "react-hook-form": "^7.53.1", "react-player": "^2.16.0", "react-select": "^5.2.2", "react-truncate-markup": "^5.1.2", diff --git a/packages/gamut/project.json b/packages/gamut/project.json index b3ba248349..9efa3641a9 100644 --- a/packages/gamut/project.json +++ b/packages/gamut/project.json @@ -3,6 +3,7 @@ "$schema": "../../node_modules/nx/schemas/project-schema.json", "sourceRoot": "packages/gamut/src", "projectType": "library", + "tags": [], "targets": { "build": { "outputs": ["{projectRoot}/dist"], @@ -23,8 +24,7 @@ "executor": "@nx/jest:jest", "outputs": ["{workspaceRoot}/coverage/packages/gamut"], "options": { - "jestConfig": "packages/gamut/jest.config.ts", - "passWithNoTests": true + "jestConfig": "packages/gamut/jest.config.ts" } }, "clean": { @@ -34,6 +34,5 @@ "command": "rm -rf ./dist" } } - }, - "tags": [] + } } diff --git a/packages/gamut/src/AccordionAreaDeprecated/__tests__/AccordionAreaDeprecated.test.tsx b/packages/gamut/src/AccordionAreaDeprecated/__tests__/AccordionAreaDeprecated.test.tsx index 50eff5de23..8dd0f30332 100644 --- a/packages/gamut/src/AccordionAreaDeprecated/__tests__/AccordionAreaDeprecated.test.tsx +++ b/packages/gamut/src/AccordionAreaDeprecated/__tests__/AccordionAreaDeprecated.test.tsx @@ -1,5 +1,5 @@ import { setupRtl } from '@codecademy/gamut-tests'; -import { act } from 'react-dom/test-utils'; +import { act } from 'react'; import { AccordionAreaDeprecated } from '..'; diff --git a/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx b/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx index 0a229af65b..ae65e0f0dd 100644 --- a/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx +++ b/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecated/index.tsx @@ -4,7 +4,7 @@ import hasIn from 'lodash/hasIn'; import { ReactNode } from 'react'; import * as React from 'react'; -import { omitProps } from '../../utils/omitProps'; +import { omitProps } from '../../utils'; import { ButtonDeprecatedBase, ButtonDeprecatedBaseProps, @@ -39,7 +39,7 @@ const themes = [ export type ButtonDeprecatedThemes = | keyof typeof buttonPresetThemes - | typeof themes[number]; + | (typeof themes)[number]; const propKeys = [ 'theme', diff --git a/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx b/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx index 2a2a9014d3..fc96ae090a 100644 --- a/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx +++ b/packages/gamut/src/AccordionButtonDeprecated/ButtonDeprecatedBase/index.tsx @@ -3,7 +3,7 @@ import { HTMLProps, ReactNode } from 'react'; import * as React from 'react'; import { ChildComponentDescriptor } from '../../typings/react'; -import { omitProps } from '../../utils/omitProps'; +import { omitProps } from '../../utils'; // eslint-disable-next-line gamut/no-css-standalone import styles from './styles.module.scss'; diff --git a/packages/gamut/src/Alert/Alert.tsx b/packages/gamut/src/Alert/Alert.tsx index d91b434d34..e6993b6eba 100644 --- a/packages/gamut/src/Alert/Alert.tsx +++ b/packages/gamut/src/Alert/Alert.tsx @@ -6,9 +6,11 @@ import * as React from 'react'; import TruncateMarkup from 'react-truncate-markup'; import { useMeasure } from 'react-use'; -import { Rotation, ToolTip, WithChildrenProp } from '..'; +import { Rotation } from '../Animation'; import { Box } from '../Box'; import { FillButton, IconButton, TextButton } from '../Button'; +import { ToolTip } from '../Tip/ToolTip'; +import { WithChildrenProp } from '../utils'; import { AlertBanner, AlertBox, diff --git a/packages/gamut/src/BodyPortal/index.tsx b/packages/gamut/src/BodyPortal/index.tsx index 0f5a7a8190..6b8f00d528 100644 --- a/packages/gamut/src/BodyPortal/index.tsx +++ b/packages/gamut/src/BodyPortal/index.tsx @@ -5,8 +5,6 @@ import * as React from 'react'; import ReactDOM from 'react-dom'; import { useIsomorphicLayoutEffect } from 'react-use'; -import { WithChildrenProp } from '..'; - const PortalWrapper = styled .div( system.css({ @@ -20,7 +18,7 @@ const PortalWrapper = styled ) .withComponent(ColorMode); -export const BodyPortal: React.FC = ({ children }) => { +export const BodyPortal: React.FC = ({ children }) => { const [ready, setReady] = useState(false); const mode = useCurrentMode(); diff --git a/packages/gamut/src/Box/props.ts b/packages/gamut/src/Box/props.ts index 99e254c394..536ff57539 100644 --- a/packages/gamut/src/Box/props.ts +++ b/packages/gamut/src/Box/props.ts @@ -1,7 +1,7 @@ import { system } from '@codecademy/gamut-styles'; import { StyleProps, variance } from '@codecademy/variance'; -import { WithChildrenProp } from '..'; +import { WithChildrenProp } from '../utils'; export const boxProps = variance.compose( system.space, diff --git a/packages/gamut/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx b/packages/gamut/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx index 451d102649..73ae0d31a4 100644 --- a/packages/gamut/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx +++ b/packages/gamut/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx @@ -19,9 +19,9 @@ describe('Breadcrumbs', () => { it('renders crumbs with a path as links', () => { const { view } = renderView({ crumbs: [ - { title: 'one', href: 'one/path' }, - { title: 'two', href: 'two/path' }, - { title: 'three', href: 'three/path' }, + { title: 'one', href: 'www.one.com/path' }, + { title: 'two', href: 'www.two.com/path' }, + { title: 'three', href: 'www.three.com/path' }, ], }); view.getByText('one'); @@ -30,15 +30,16 @@ describe('Breadcrumbs', () => { expect(view.getAllByRole('link')).toHaveLength(3); }); - it('passes payload to onClick if both are provided', () => { - const payload = 'owo'; + it('passes payload to onClick if both are provided', async () => { + const payload = { owo: 'hey' }; const onClick = jest.fn(); const { view } = renderView({ - crumbs: [{ title: 'one', href: 'one/path', payload }], + crumbs: [{ title: 'one', href: '#one/path', payload }], onClick, }); - userEvent.click(view.getByText('one')); + + await userEvent.click(view.getByText('one')); expect(onClick).toHaveBeenCalledWith( expect.anything(), diff --git a/packages/gamut/src/Button/__tests__/IconButton.test.tsx b/packages/gamut/src/Button/__tests__/IconButton.test.tsx index b6e85d27e9..de4caf1dcb 100644 --- a/packages/gamut/src/Button/__tests__/IconButton.test.tsx +++ b/packages/gamut/src/Button/__tests__/IconButton.test.tsx @@ -1,4 +1,5 @@ import { StarIcon } from '@codecademy/gamut-icons'; +import { waitFor } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { setupRtl } from 'component-test-setup'; @@ -23,12 +24,12 @@ const renderView = setupRtl(IconButton, buttonProps); const renderFloatingView = setupRtl(IconButtonFloatingMock, buttonProps); describe('IconButton', () => { - it('renders a clickable button', () => { + it('renders a clickable button', async () => { const { view } = renderView(); const cta = view.getByRole('button', { name: label }); - userEvent.click(cta); + await userEvent.click(cta); expect(onClick).toHaveBeenCalled(); }); @@ -83,7 +84,10 @@ describe('IconButton', () => { expect(view.queryByText('tooltip')).toBeNull(); - userEvent.hover(cta); - await view.findByText(tip); + await userEvent.hover(cta); + + await waitFor(() => { + view.getByText(tip); + }); }); }); diff --git a/packages/gamut/src/Button/__tests__/TextButton.test.tsx b/packages/gamut/src/Button/__tests__/TextButton.test.tsx index da2dd685c9..0ca31c95bd 100644 --- a/packages/gamut/src/Button/__tests__/TextButton.test.tsx +++ b/packages/gamut/src/Button/__tests__/TextButton.test.tsx @@ -12,12 +12,12 @@ const renderView = setupRtl(TextButton, { }); describe('TextButton', () => { - it('renders a clickable button', () => { + it('renders a clickable button', async () => { const { view } = renderView(); const cta = view.getByRole('button', { name: 'Click me!' }); - userEvent.click(cta); + await userEvent.click(cta); expect(onClick).toHaveBeenCalled(); }); diff --git a/packages/gamut/src/ButtonBase/__tests__/ButtonBase.test.tsx b/packages/gamut/src/ButtonBase/__tests__/ButtonBase.test.tsx index 726634988d..62eeff1b44 100644 --- a/packages/gamut/src/ButtonBase/__tests__/ButtonBase.test.tsx +++ b/packages/gamut/src/ButtonBase/__tests__/ButtonBase.test.tsx @@ -27,7 +27,7 @@ describe('ButtonBase', () => { const { view } = renderView({ href: '' }); view.getByText(buttonText); - view.getByRole('link'); + expect(view.container.querySelector('a')?.getAttribute('href')).toBe(''); }); it('renders a button with the correct role', () => { diff --git a/packages/gamut/src/Coachmark/index.tsx b/packages/gamut/src/Coachmark/index.tsx index dfbceb6b2f..4411151249 100644 --- a/packages/gamut/src/Coachmark/index.tsx +++ b/packages/gamut/src/Coachmark/index.tsx @@ -1,8 +1,8 @@ import { useEffect, useRef, useState } from 'react'; import * as React from 'react'; -import { WithChildrenProp } from '..'; import { Popover, PopoverProps } from '../Popover'; +import { WithChildrenProp } from '../utils'; export interface CoachmarkProps extends WithChildrenProp { /** diff --git a/packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx b/packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx index 29a3ace294..5bb53fa8fa 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx @@ -14,7 +14,7 @@ import { Anchor } from '../Anchor'; import { HiddenText } from '../HiddenText'; import { Markdown } from '../Markdown'; import { ConnectedField, FieldProps, SubmitContextProps } from './types'; -import { useField } from './utils'; +import { getErrorMessage, useField } from './utils'; const ErrorAnchor = styled(Anchor)( css({ @@ -88,6 +88,8 @@ export function ConnectedFormGroup({ ); + const textError = customError || getErrorMessage(error); + return ( {hideLabel ? {renderedLabel} : renderedLabel} @@ -112,7 +114,7 @@ export function ConnectedFormGroup({ }} skipDefaultOverrides={{ a: true }} inline - text={error || customError} + text={textError} spacing="none" /> diff --git a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedInput.tsx b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedInput.tsx index 6be1764aba..333e1a48bb 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedInput.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedInput.tsx @@ -17,7 +17,7 @@ export const ConnectedInput: React.FC = ({ return ( = ({ disabled, }); - return ; + return ( + + ); }; diff --git a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedSelect.tsx b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedSelect.tsx index 73cabeac74..8aa9078c43 100644 --- a/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedSelect.tsx +++ b/packages/gamut/src/ConnectedForm/ConnectedInputs/ConnectedSelect.tsx @@ -17,7 +17,7 @@ export const ConnectedSelect: React.FC = ({ return (