From 38510903a94b07ff8dfa8fdbdb7ef258adad52af Mon Sep 17 00:00:00 2001 From: Kyle Shike Date: Thu, 8 Aug 2024 13:00:36 -0400 Subject: [PATCH] upgrade typescript ts-eslint, eslint (#1278) --- .eslintrc | 3 +- package.json | 22 +- src/Accordion/Accordion.stories.tsx | 604 +++++++------- src/Accordion/Accordion.tsx | 28 +- src/Accordion/AccordionCollapse.tsx | 30 +- src/Accordion/AccordionItem.tsx | 22 +- src/Accordion/AccordionToggle.tsx | 6 +- src/Alert/Alert.stories.tsx | 188 +++-- src/Avatar/Avatar.stories.tsx | 198 ++--- src/Avatar/index.ts | 4 +- src/Button/Button.stories.tsx | 788 +++++++++--------- src/Button/index.ts | 5 +- src/Card/Card.stories.tsx | 162 ++-- src/Card/Card.tsx | 34 +- src/Card/index.ts | 5 +- src/CardStack/CardStack.stories.tsx | 46 +- src/CardStack/CardStack.tsx | 20 +- src/CheckboxButton/CheckboxButton.stories.jsx | 12 +- .../CheckboxButtonGroup.stories.jsx | 414 ++++----- .../CheckboxButtonGroup.test.jsx | 4 +- src/Container/Col.tsx | 36 +- src/Container/Container.stories.tsx | 427 +++++----- src/Container/Container.tsx | 26 +- src/Container/Row.tsx | 36 +- src/ControlButtonGroup/ControlButtonGroup.tsx | 6 +- .../CopyToClipboard.stories.tsx | 14 +- src/CopyToClipboard/index.ts | 4 +- .../CopyToClipboardButton.stories.tsx | 34 +- .../CopyToClipboardButton.tsx | 3 +- src/CopyToClipboardButton/index.ts | 5 +- src/DateTimePicker/DateTimePicker.stories.tsx | 24 +- src/Drawer/Drawer.stories.tsx | 24 +- src/Drawer/Drawer.tsx | 16 +- src/Drawer/DrawerFooter.tsx | 24 +- src/Drawer/DrawerHeader.tsx | 6 +- src/Dropdown/Dropdown.stories.tsx | 162 ++-- src/Dropdown/Dropdown.tsx | 42 +- src/Dropdown/DropdownDivider.tsx | 18 +- src/Dropdown/DropdownItem.tsx | 36 +- src/Dropdown/DropdownMenu.tsx | 40 +- src/Dropdown/DropdownToggle.tsx | 32 +- src/EmptyState/EmptyState.tsx | 28 +- src/EmptyState/index.ts | 4 +- src/FadeTransition/FadeTransition.jsx | 12 +- src/FadeTransition/index.js | 4 +- src/Flex/Flex.tsx | 6 +- src/Form/Form.stories.tsx | 82 +- src/Form/index.ts | 4 +- .../FormControlLabel.stories.tsx | 102 +-- src/FormControlLabel/index.ts | 4 +- src/FormGroup/FormGroup.stories.tsx | 382 +++++---- src/FormGroup/FormGroup.tsx | 3 +- src/FormGroup/index.ts | 4 +- src/Heading/Heading.tsx | 9 +- src/IconButton/IconButton.stories.tsx | 66 +- src/IconButton/IconButton.tsx | 6 +- src/IconButton/index.ts | 4 +- src/IconCell/IconCell.stories.tsx | 20 +- src/IconCell/IconCell.tsx | 14 +- src/Input/index.ts | 4 +- src/InputLabel/InputLabel.tsx | 6 +- src/InputLabel/index.ts | 4 +- src/InputLegend/InputLegend.tsx | 6 +- src/InputLegend/index.ts | 4 +- src/Layout/Header/Controls.tsx | 12 +- src/Layout/Header/Header.tsx | 22 +- src/Layout/Header/index.ts | 4 +- src/Layout/SidebarNav/SidebarNav.tsx | 16 +- src/Layout/SidebarNav/SidebarNavLink.tsx | 30 +- src/Layout/SidebarNav/SidebarNavLinks.tsx | 14 +- src/Layout/SidebarNav/index.ts | 4 +- src/Layout/SidebarView/index.ts | 4 +- src/LoadingOverlay/LoadingOverlay.stories.tsx | 6 +- src/LoadingOverlay/LoadingOverlay.tsx | 6 +- src/LoadingOverlay/index.ts | 4 +- .../LoadingSkeleton.stories.tsx | 24 +- src/LoadingSkeleton/LoadingSkeleton.tsx | 22 +- src/Main/Main.stories.tsx | 146 ++-- src/Main/Main.tsx | 26 +- src/Modal/Modal.stories.tsx | 334 ++++---- src/Modal/Modal.tsx | 6 +- src/Modal/ModalBody.tsx | 15 +- src/MoneyInput/MoneyInput.stories.tsx | 88 +- src/MoneyInput/MoneyInput.tsx | 26 +- src/MoneyInput/index.ts | 4 +- src/OverlayTrigger/OverlayTrigger.tsx | 32 +- src/Pill/Pill.stories.tsx | 274 +++--- src/Pill/Pill.tsx | 28 +- src/Pill/Pills.tsx | 20 +- src/Popover/Popover.stories.tsx | 64 +- src/Popover/PopoverBody.tsx | 18 +- src/Popover/PopoverCard.tsx | 6 +- src/Popper/Popper.stories.jsx | 24 +- src/Popper/index.js | 4 +- src/ProfileCell/ProfileCell.stories.tsx | 104 +-- src/ProfileCell/ProfileCell.tsx | 66 +- src/ProfileCell/ProfileCellSkeleton.tsx | 22 +- src/ProfileCell/index.ts | 3 +- src/RadioButton/RadioButton.stories.tsx | 8 +- src/RadioButton/index.ts | 4 +- .../RadioButtonGroup.stories.tsx | 416 ++++----- src/RadioButtonGroup/index.ts | 4 +- src/RichTextEditor/RichTextEditor.stories.tsx | 98 ++- src/RichTextEditor/RichTextEditor.test.tsx | 4 +- src/Select/AsyncCreatableSelect.jsx | 68 +- src/Select/AsyncCreatableSelect.stories.jsx | 76 +- src/Select/AsyncSelect.jsx | 72 +- src/Select/AsyncSelect.stories.jsx | 76 +- src/Select/CreatableSelect.jsx | 54 +- src/Select/CreatableSelect.stories.jsx | 8 +- src/Select/OptionWithDescription.jsx | 28 +- src/Select/SingleSelect.jsx | 62 +- src/Select/SingleSelect.stories.jsx | 275 +++--- src/Select/ValueContainer.jsx | 4 +- src/Steps/Step.tsx | 30 +- src/Steps/Steps.stories.tsx | 132 +-- src/Steps/Steps.tsx | 14 +- src/Table/Table.stories.tsx | 748 +++++++++-------- src/Table/Table.tsx | 28 +- src/Table/TableBody.tsx | 20 +- src/Table/TableCell.tsx | 6 +- src/Table/TableFoot.tsx | 20 +- src/Table/TableHead.tsx | 20 +- src/Table/TableLoadingSkeleton.tsx | 20 +- src/Table/TableRow.tsx | 8 +- src/Table/TableSortLabel.tsx | 12 +- src/Tabs/Tab/Tab.tsx | 8 +- src/Tabs/Tabs.tsx | 22 +- src/Text/Text.stories.tsx | 60 +- src/Text/Text.tsx | 9 +- src/Toast/Toast.stories.tsx | 96 ++- src/Toast/withToast.test.tsx | 4 +- src/Toast/withToast.tsx | 6 +- src/ToggleInput/ToggleInput.jsx | 44 +- src/ToggleInput/ToggleInput.stories.tsx | 16 +- src/Tooltip/Tooltip.stories.jsx | 154 ++-- src/Tooltip/index.js | 4 +- src/TrackedButton/index.ts | 4 +- src/TransitionGroup/TransitionGroup.jsx | 18 +- src/hoc/withTrackedClick.tsx | 4 +- stories/ColorPalette/Palette.stories.jsx | 56 +- stories/Intro.stories.jsx | 58 +- stories/Spacing/Spacing.stories.jsx | 42 +- stories/Typography/Typography.stories.jsx | 118 +-- yarn.lock | 690 +++++++-------- 145 files changed, 5025 insertions(+), 4569 deletions(-) diff --git a/.eslintrc b/.eslintrc index 9a230a22..7033dff3 100644 --- a/.eslintrc +++ b/.eslintrc @@ -117,8 +117,9 @@ "files": "**/*.{ts,tsx}", "rules": { "react/require-default-props": "off", + "react/prop-types": "off", "no-shadow": "off", - "@typescript-eslint/no-shadow": "error", + "@typescript-eslint/no-shadow": "error" } } ], diff --git a/package.json b/package.json index 4a40df40..594770f1 100644 --- a/package.json +++ b/package.json @@ -121,8 +121,8 @@ "@types/react-toggle": "^4", "@types/react-transition-group": "^4", "@types/testing-library__jest-dom": "^6.0.0", - "@typescript-eslint/eslint-plugin": "^6.21.0", - "@typescript-eslint/parser": "^6.21.0", + "@typescript-eslint/eslint-plugin": "^8.0.1", + "@typescript-eslint/parser": "^8.0.1", "babel-eslint": "^10.1.0", "babel-jest": "^29.7.0", "babel-loader": "^9.1.3", @@ -133,15 +133,16 @@ "chromatic": "^6.24.1", "classnames": "^2.5.1", "css-loader": "^6.11.0", - "eslint": "^7.32.0", - "eslint-config-airbnb": "^18.2.1", + "eslint": "^8.57.0", + "eslint-config-airbnb": "^19.0.4", "eslint-plugin-babel": "^5.3.1", - "eslint-plugin-flowtype": "^4.7.0", "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jsx-a11y": "^6.9.0", - "eslint-plugin-react": "^7.34.3", + "eslint-plugin-jsx-a11y": "^6.8.0", + "eslint-plugin-local-rules": "^2.0.1", + "eslint-plugin-no-only-tests": "^3.1.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.2", - "eslint-utils": "^1.4.3", + "eslint-utils": "^3.0.0", "file-loader": "^6.2.0", "jest": "^29.7.0", "jest-css-modules-transform": "^4.4.2", @@ -161,7 +162,7 @@ "storybook": "^8.1.10", "storybook-addon-designs": "6.3.1", "style-loader": "^1.3.0", - "typescript": "^4.9.5", + "typescript": "^5.5.4", "webpack": "^5.91.0", "yalc": "^1.0.0-pre.53" }, @@ -204,5 +205,6 @@ "volta": { "node": "20.12.1", "yarn": "4.2.1" - } + }, + "packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195" } diff --git a/src/Accordion/Accordion.stories.tsx b/src/Accordion/Accordion.stories.tsx index c439715e..e0dce1b8 100644 --- a/src/Accordion/Accordion.stories.tsx +++ b/src/Accordion/Accordion.stories.tsx @@ -22,38 +22,40 @@ export default { }, }; -export const Default = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); +export function Default(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + ); +} Default.args = { chevronLeft: false, @@ -62,36 +64,38 @@ Default.args = { title: 'Accordion Toggle', }; -export const DefaultOpen = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • I was opened by default!
    • -
- - - -); +export function DefaultOpen(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • I was opened by default!
    • +
+ + + + ); +} DefaultOpen.args = { chevronLeft: false, @@ -100,36 +104,38 @@ DefaultOpen.args = { title: 'Accordion Toggle', }; -export const ChevronLeft = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); +export function ChevronLeft(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + ); +} ChevronLeft.args = { chevronLeft: true, @@ -138,36 +144,38 @@ ChevronLeft.args = { title: 'Accordion Toggle', }; -export const ChevronLeftLateral = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); +export function ChevronLeftLateral(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + ); +} ChevronLeftLateral.args = { chevronLateral: true, @@ -177,36 +185,38 @@ ChevronLeftLateral.args = { title: 'Accordion Toggle', }; -export const ChevronLateral = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); +export function ChevronLateral(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + ); +} ChevronLateral.args = { chevronLateral: true, @@ -215,36 +225,38 @@ ChevronLateral.args = { title: 'Accordion Toggle', }; -export const CollapsedText = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); +export function CollapsedText(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + ); +} CollapsedText.args = { collapsedText: 'This shows only when collapsed', @@ -253,38 +265,40 @@ CollapsedText.args = { title: 'Accordion Toggle', }; -export const Borderless = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); +export function Borderless(args) { + return ( + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + + +
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + ); +} Borderless.args = { chevronLeft: false, @@ -293,42 +307,85 @@ Borderless.args = { title: 'Accordion Toggle', }; -export const InCard = (args) => ( - <> - - - +export function InCard(args) { + return ( + <> + + + + + +

This text is aligned with the content of other Card components

+
    +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
    • +
+ + + + +
+ + + ); +} + +InCard.args = { + chevronLeft: false, + disabled: false, + helperText: 'helper text', + title: 'Accordion Toggle', +}; + +export function Separate(args) { + return ( + <> + + - -

This text is aligned with the content of other Card components

+
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • +
  • I'm inside my own Accordion parent element
 - -
- - -); +
+ + + + +
    +
  • I'm inside my own Accordion parent element
    • +
+ + + + + ); +} -InCard.args = { +Separate.args = { chevronLeft: false, disabled: false, helperText: 'helper text', title: 'Accordion Toggle', }; -export const Separate = (args) => ( - <> +export function Disabled(args) { + return ( ( />
    -
  • I'm inside my own Accordion parent element
    • +
  • Item 1
    • +
  • Item 2
    • +
  • Item 3
 -
- - - - -
    -
  • I'm inside my own Accordion parent element
    • -
- - - - -); - -Separate.args = { - chevronLeft: false, - disabled: false, - helperText: 'helper text', - title: 'Accordion Toggle', -}; - -export const Disabled = (args) => ( - - - - -
    -
  • Item 1
    • -
  • Item 2
    • -
  • Item 3
    • -
- - - -); + ); +} Disabled.args = { chevronLeft: false, @@ -391,21 +411,23 @@ Disabled.args = { title: 'Accordion Toggle -- disabled', }; -export const AccordionAlert = (args) => ( - - - - -
- Add content here. -
- - - -); +export function AccordionAlert(args) { + return ( + + + + +
+ Add content here. +
+ + + + ); +} AccordionAlert.args = { chevronLateral: true, diff --git a/src/Accordion/Accordion.tsx b/src/Accordion/Accordion.tsx index 1803ff33..447b1503 100644 --- a/src/Accordion/Accordion.tsx +++ b/src/Accordion/Accordion.tsx @@ -33,7 +33,7 @@ type AccordionProps = { onSelect?: () => void; }; -const Accordion = ({ +function Accordion({ activeKey, alwaysOpen, as, @@ -43,19 +43,21 @@ const Accordion = ({ onSelect, // eslint-disable-next-line camelcase UNSAFE_className, -}: AccordionProps) => ( - - { children } - +}: AccordionProps) { + return ( + + { children } + ); +} Accordion.defaultProps = { activeKey: undefined, diff --git a/src/Accordion/AccordionCollapse.tsx b/src/Accordion/AccordionCollapse.tsx index 9dc3c2c9..ce3618a9 100644 --- a/src/Accordion/AccordionCollapse.tsx +++ b/src/Accordion/AccordionCollapse.tsx @@ -16,7 +16,7 @@ type AccordionCollapseProps = { UNSAFE_className?: string; }; -const AccordionCollapse = ({ +function AccordionCollapse({ variant, children, eventKey, @@ -25,27 +25,29 @@ const AccordionCollapse = ({ UNSAFE_className, ...props -}: AccordionCollapseProps) => ( - -
+
- {children} -
- -); + > + {children} +
+ + ); +} AccordionCollapse.defaultProps = { variant: undefined, diff --git a/src/Accordion/AccordionItem.tsx b/src/Accordion/AccordionItem.tsx index 2c3270c8..c950ca18 100644 --- a/src/Accordion/AccordionItem.tsx +++ b/src/Accordion/AccordionItem.tsx @@ -21,7 +21,7 @@ type AccordionItemProps = { variant?: string; }; -const AccordionItem = ({ +function AccordionItem({ variant, as, borderless, @@ -29,20 +29,22 @@ const AccordionItem = ({ eventKey, // eslint-disable-next-line camelcase UNSAFE_className, -}: AccordionItemProps) => ( - - { children } - -); + eventKey={eventKey} + > + { children } + + ); +} AccordionItem.defaultProps = { variant: undefined, diff --git a/src/Accordion/AccordionToggle.tsx b/src/Accordion/AccordionToggle.tsx index 3828d6da..2a9aed09 100644 --- a/src/Accordion/AccordionToggle.tsx +++ b/src/Accordion/AccordionToggle.tsx @@ -37,7 +37,7 @@ type AccordionToggleProps = { UNSAFE_className?: string; }; -const AccordionToggle = ({ +function AccordionToggle({ children, chevronLateral, chevronLeft, @@ -51,7 +51,7 @@ const AccordionToggle = ({ // eslint-disable-next-line camelcase UNSAFE_className, -}: AccordionToggleProps) => { +}: AccordionToggleProps) { const { activeEventKey } = React.useContext(AccordionContext); const [isCollapsed, setIsCollapsed] = useState(true); @@ -125,7 +125,7 @@ const AccordionToggle = ({ ); -}; +} AccordionToggle.defaultProps = { chevronLateral: false, diff --git a/src/Alert/Alert.stories.tsx b/src/Alert/Alert.stories.tsx index 42d9d417..36848bb9 100644 --- a/src/Alert/Alert.stories.tsx +++ b/src/Alert/Alert.stories.tsx @@ -15,118 +15,132 @@ export default { }, }; -export const Success = () => ( - -); - -export const Info = () => ( - -); - -export const Feature = () => ( - -); - -export const Error = () => ( - -); - -export const Warning = () => ( - -); - -const onDismiss = (id) => { - action('alert dismissed')(id); -}; - -export const WithDismiss = () => ( - -); - -export const WithCallToAction = () => ( - <> -

Default CTA rendered by component

+export function Success() { + return ( + ); +} + +export function Info() { + return ( + ); +} + +export function Feature() { + return ( + + ); +} + +export function Error() { + return ( + ); +} + +export function Warning() { + return ( + ); +} + +const onDismiss = (id) => { + action('alert dismissed')(id); +}; + +export function WithDismiss() { + return ( - -); + ); +} + +export function WithCallToAction() { + return ( + <> +

Default CTA rendered by component

+ + + + + + + ); +} diff --git a/src/Avatar/Avatar.stories.tsx b/src/Avatar/Avatar.stories.tsx index a28da590..5faf16c7 100644 --- a/src/Avatar/Avatar.stories.tsx +++ b/src/Avatar/Avatar.stories.tsx @@ -13,101 +13,109 @@ export default { }, }; -export const Small = () => ( -
- - - - - - - -
-); +export function Small() { + return ( +
+ + + + + + + +
+ ); +} -export const Large = () => ( -
- - - - - - - -
-); +export function Large() { + return ( +
+ + + + + + + +
+ ); +} -export const WithAlert = () => ( -
- - -
-); +export function WithAlert() { + return ( +
+ + +
+ ); +} -export const WithImage = () => ( -
- - -
-); +export function WithImage() { + return ( +
+ + +
+ ); +} diff --git a/src/Avatar/index.ts b/src/Avatar/index.ts index ea51b745..aff208f4 100644 --- a/src/Avatar/index.ts +++ b/src/Avatar/index.ts @@ -1 +1,3 @@ -export { default } from './Avatar'; +import Avatar from './Avatar'; + +export default Avatar; diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index dc5deec2..cb11daf5 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -18,396 +18,408 @@ export default { }, }; -export const Primary = () => ( - <> - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - -); +export function Primary() { + return ( + <> + + {' '} + + {' '} + + {' '} + + {' '} + + {' '} + + {' '} + + {' '} + + + ); +} -export const Tertiary = () => ( - <> - - {' '} - - {' '} - - {' '} - - -); +export function Tertiary() { + return ( + <> + + {' '} + + {' '} + + {' '} + + + ); +} -export const Transparent = () => ( - <> - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - {' '} - - -); +export function Transparent() { + return ( + <> + + {' '} + + {' '} + + {' '} + + {' '} + + {' '} + + {' '} + + {' '} + + + ); +} -export const Link = () => ( - <> - - {' '} - - {' '} - - -); +export function Link() { + return ( + <> + + {' '} + + {' '} + + + ); +} -export const Brands = () => ( - <> - - {' '} - - {' '} - - {' '} - -
- - {' '} - - {' '} - - {' '} - - {' '} -
- - {' '} - - {' '} - - {' '} - -
- - {' '} - - {' '} - - {' '} - - -); +export function Brands() { + return ( + <> + + {' '} + + {' '} + + {' '} + +
+ + {' '} + + {' '} + + {' '} + + {' '} +
+ + {' '} + + {' '} + + {' '} + +
+ + {' '} + + {' '} + + {' '} + + + ); +} -export const Loading = () => ( - <> - - {' '} - - {' '} - - {' '} - - -); +export function Loading() { + return ( + <> + + {' '} + + {' '} + + {' '} + + + ); +} diff --git a/src/Button/index.ts b/src/Button/index.ts index 59927b51..1ce76da0 100644 --- a/src/Button/index.ts +++ b/src/Button/index.ts @@ -1 +1,4 @@ -export { default, ButtonSizes, ButtonVariants } from './Button'; +import Button from './Button'; + +export { ButtonSizes, ButtonVariants } from './Button'; +export default Button; diff --git a/src/Card/Card.stories.tsx b/src/Card/Card.stories.tsx index 31769291..975cd1a0 100644 --- a/src/Card/Card.stories.tsx +++ b/src/Card/Card.stories.tsx @@ -16,91 +16,99 @@ export default { }, }; -export const Default = () => ( - -); - -export const Sizes = () => ( - <> - - CardSizes.EXTRA_SMALL - +export function Default() { + return ( - CardSizes.SMALL - + divided={false} + helperText="(helper text)" + noPadding={false} + size="sm" + subTitle="Subtitle" + title="Default card title" + /> + ); +} + +export function Sizes() { + return ( + <> + + CardSizes.EXTRA_SMALL + + + CardSizes.SMALL + + + CardSizes.MEDIUM + + + CardSizes.LARGE + + + ); +} + +export function LoadingDefault() { + return ( - CardSizes.MEDIUM + + Powerful panel management and recruitment automation. + The #1 panel software for teams that research at scale. Built for ReOps, + loved by researchers, trusted by participants. + + ); +} + +export function LoadingParagraphCount() { + return ( - CardSizes.LARGE + + Powerful panel management and recruitment automation. + The #1 panel software for teams that research at scale. Built for ReOps, + loved by researchers, trusted by participants. + + + From branding to invite rules, you’re in total control over how research gets done org-wide + doodle-y blue check mark with a black outline. With integrations and an API, our open + platform plays nice with all your favorite research tools and methods doodle-y blue check + mark with a black outline. SOC2 certified, SSO, 2FA, data consent, and all the privacy + settings you need to stay GDPR compliant. + - -); - -export const LoadingDefault = () => ( - - - Powerful panel management and recruitment automation. - The #1 panel software for teams that research at scale. Built for ReOps, - loved by researchers, trusted by participants. - - -); - -export const LoadingParagraphCount = () => ( - - - Powerful panel management and recruitment automation. - The #1 panel software for teams that research at scale. Built for ReOps, - loved by researchers, trusted by participants. - - - From branding to invite rules, you’re in total control over how research gets done org-wide - doodle-y blue check mark with a black outline. With integrations and an API, our open - platform plays nice with all your favorite research tools and methods doodle-y blue check - mark with a black outline. SOC2 certified, SSO, 2FA, data consent, and all the privacy - settings you need to stay GDPR compliant. - - ); +} -export const LoadingCustom = () => { +export function LoadingCustom() { const CustomLoadingSkeleton = ( <> @@ -123,4 +131,4 @@ export const LoadingCustom = () => { title="Default card title" /> ); -}; +} diff --git a/src/Card/Card.tsx b/src/Card/Card.tsx index 3f95cca8..06561e1b 100644 --- a/src/Card/Card.tsx +++ b/src/Card/Card.tsx @@ -34,7 +34,7 @@ type CardProps = { title?: ReactNode; } & ElementProps; -const Card = ({ +function Card({ children, className, divided = false, @@ -48,7 +48,7 @@ const Card = ({ subTitle, title, ...props -}: CardProps) => { +}: CardProps) { const defaultLoadingSkeleton = ( <> @@ -76,23 +76,21 @@ const Card = ({ }, ), }, - <> - {isLoading ? (loadingSkeleton || defaultLoadingSkeleton) : ( - <> - {title && ( -
-

{title}

- {helperText && {helperText}} -
- )} + (isLoading ? (loadingSkeleton || defaultLoadingSkeleton) : ( + <> + {title && ( +
+

{title}

+ {helperText && {helperText}} +
+ )} - {divided &&
} - {subTitle &&

{subTitle}

} - {children} - - )} - , + {divided &&
} + {subTitle &&

{subTitle}

} + {children} + + )), ); -}; +} export default Card; diff --git a/src/Card/index.ts b/src/Card/index.ts index 6b11f0e3..ef0e7178 100644 --- a/src/Card/index.ts +++ b/src/Card/index.ts @@ -1 +1,4 @@ -export { default, CardSizes } from './Card'; +import Card from './Card'; + +export { CardSizes } from './Card'; +export default Card; diff --git a/src/CardStack/CardStack.stories.tsx b/src/CardStack/CardStack.stories.tsx index 102be163..2fe4c05f 100644 --- a/src/CardStack/CardStack.stories.tsx +++ b/src/CardStack/CardStack.stories.tsx @@ -16,31 +16,35 @@ export default { }, }; -export const Default = () => ( - -

CardStack

- -

A layout container for a vertical stack of Card components

-

Adjust the size knob below

- - - - -); - -export const Centered = () => ( - +export function Default() { + return (

CardStack

-

Many pages consist of CardStack containers centered on the page.

-

- CardStack can be placed in any container and aligned as needed. - This example is in a container with display: flex; justify-content: center; -

+

A layout container for a vertical stack of Card components

+

Adjust the size knob below

 - -); + ); +} + +export function Centered() { + return ( + + +

CardStack

+ +

Many pages consist of CardStack containers centered on the page.

+

+ CardStack can be placed in any container and aligned as needed. + This example is in a container with display: flex; justify-content: center; +

+ + + + + + ); +} diff --git a/src/CardStack/CardStack.tsx b/src/CardStack/CardStack.tsx index 8864646e..02b6db46 100644 --- a/src/CardStack/CardStack.tsx +++ b/src/CardStack/CardStack.tsx @@ -12,7 +12,7 @@ type CardStackProps = { children: React.ReactNode; }; -const CardStack = ({ +function CardStack({ children, // eslint-disable-next-line camelcase @@ -20,18 +20,20 @@ const CardStack = ({ size, ...props -}: CardStackProps) => ( -
- {children} -
-); + {...props} + > + {children} +
+ ); +} CardStack.defaultProps = { size: undefined, diff --git a/src/CheckboxButton/CheckboxButton.stories.jsx b/src/CheckboxButton/CheckboxButton.stories.jsx index db34106e..39dbd8bf 100644 --- a/src/CheckboxButton/CheckboxButton.stories.jsx +++ b/src/CheckboxButton/CheckboxButton.stories.jsx @@ -14,7 +14,7 @@ export default { }, }; -export const Default = () => { +export function Default() { const [isChecked, setIsChecked] = useState(CHECKED_STATES.CHECKED); const handleChange = () => { @@ -32,9 +32,9 @@ export const Default = () => { onChange={handleChange} /> ); -}; +} -export const Indeterminate = () => { +export function Indeterminate() { const inputEl = useRef(null); const [checked, setChecked] = useState([]); const checkboxes = ['1', '2', '3']; @@ -75,9 +75,9 @@ export const Indeterminate = () => { ))}
); -}; +} -export const WithDescription = () => { +export function WithDescription() { const [checked, setChecked] = useState(false); const toggleChecked = () => { setChecked(!checked); @@ -96,4 +96,4 @@ export const WithDescription = () => { This is where the description goes ); -}; +} diff --git a/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx b/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx index 685554a7..4989ad29 100644 --- a/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx +++ b/src/CheckboxButtonGroup/CheckboxButtonGroup.stories.jsx @@ -17,7 +17,7 @@ export default { }; /* eslint-disable react/prop-types */ -const CheckboxButtonGroupComponent = ({ +function CheckboxButtonGroupComponent({ bordered, children, defaultValue, @@ -29,7 +29,7 @@ const CheckboxButtonGroupComponent = ({ labelHelperText, orientation, labelHtmlFor, -}) => { +}) { const [value, setValue] = useState(defaultValue); return ( @@ -53,10 +53,10 @@ const CheckboxButtonGroupComponent = ({ ); -}; +} /* eslint-enable react/prop-types */ -export const Default = () => { +export function Default() { const orientation = ORIENTATIONS.COLUMN; const bordered = false; @@ -95,211 +95,221 @@ export const Default = () => { /> ); -}; +} -export const Row = () => ( - - - - - + defaultValue={[]} + elementType="fieldset" + fullWidth={false} + id="with-checkbox-button-group-1" + inline + label="Legend" + labelHelperText="helper text" + labelHtmlFor="checkbox-button-group" + orientation={ORIENTATIONS.ROW} + > + + + + ); +} -export const BorderedRow = () => ( - - - - - -); - -export const DescriptionColumn = () => ( - - - This is where the description goes - - - This is where the description goes - - - This is where the description goes - - -); + + + + + ); +} -export const DescriptionRow = () => ( - - - This is where the description goes - - - This is where the description goes - - - This is where the description goes - - -); + + This is where the description goes + + + This is where the description goes + + + This is where the description goes + + + ); +} -export const BorderedColumnFullWidth = () => ( - - - This is where the description goes - - - This is where the description goes - - + This is where the description goes + + + This is where the description goes + + + This is where the description goes + + + ); +} + +export function BorderedColumnFullWidth() { + return ( + - This is where the description goes - - -); + + This is where the description goes + + + This is where the description goes + + + This is where the description goes + + + ); +} diff --git a/src/CheckboxButtonGroup/CheckboxButtonGroup.test.jsx b/src/CheckboxButtonGroup/CheckboxButtonGroup.test.jsx index d3efd270..65ff145e 100644 --- a/src/CheckboxButtonGroup/CheckboxButtonGroup.test.jsx +++ b/src/CheckboxButtonGroup/CheckboxButtonGroup.test.jsx @@ -5,14 +5,14 @@ import PropTypes from 'prop-types'; import CheckboxButtonGroup from 'src/CheckboxButtonGroup'; import CheckboxButton from 'src/CheckboxButton'; -const CheckboxButtonGroupComponent = ({ children, defaultValues }) => { +function CheckboxButtonGroupComponent({ children, defaultValues }) { const [value, setValue] = useState(defaultValues); return ( {children} ); -}; +} CheckboxButtonGroupComponent.propTypes = { defaultValues: PropTypes.array.isRequired, diff --git a/src/Container/Col.tsx b/src/Container/Col.tsx index 2c5af803..5bad4603 100644 --- a/src/Container/Col.tsx +++ b/src/Container/Col.tsx @@ -53,7 +53,7 @@ export type ColProps = { xxl?: ReactBootstrapColProps['xxl']; } & ReactBootstrapColProps; -export const Col = ({ +export function Col({ as, children, className, @@ -65,19 +65,21 @@ export const Col = ({ xxl, bsPrefix = 'col', ...props -}: ColProps) => ( - - { children } - -); +}: ColProps) { + return ( + + { children } + + ); +} diff --git a/src/Container/Container.stories.tsx b/src/Container/Container.stories.tsx index 60570f2c..287b0fa5 100644 --- a/src/Container/Container.stories.tsx +++ b/src/Container/Container.stories.tsx @@ -14,75 +14,83 @@ export default { }, }; -export const Default = () => ( - - - - - {``} provides a means to center and horizontally pad your site's contents. - Use Container for a responsive pixel width. - - - - -); +export function Default() { + return ( + + + + + {``} provides a means to center and horizontally pad your site's contents. + Use Container for a responsive pixel width. + + + + + ); +} -export const FluidContainer = () => ( - - - - - You can use {``} for width: 100% across all viewport and device sizes. - - - - -); +export function FluidContainer() { + return ( + + + + + You can use {``} for width: 100% across all viewport and device sizes. + + + + + ); +} -export const FluidContainerWithBreakpoints = () => ( - - - - - You can set breakpoints for the fluid prop. - Setting it to a breakpoint ['sm', 'md', 'lg', 'xl', 'xxl'] will set the - Container as fluid until the specified breakpoint. - - - - -); +export function FluidContainerWithBreakpoints() { + return ( + + + + + You can set breakpoints for the fluid prop. + Setting it to a breakpoint ['sm', 'md', 'lg', 'xl', 'xxl'] will set the + Container as fluid until the specified breakpoint. + + + + + ); +} -export const AutoLayoutColumns = () => ( - -

- When no column widths are specified the {` `} - component will render equal width columns. -

- - - - - - - - -
- - - - - - - - - - - - -); +export function AutoLayoutColumns() { + return ( + +

+ When no column widths are specified the {` `} + component will render equal width columns. +

+ + + + + + + + +
+ + + + + + + + + + + + + ); +} -export const SettingOneColumnWidth = () => { +export function SettingOneColumnWidth() { const xs = 8; return ( @@ -122,167 +130,176 @@ export const SettingOneColumnWidth = () => { ); -}; +} + +export function ResponsiveGrids() { + return ( + <> + + + + +

+ sm={8} +

+

+ The Col lets you specify column widths across + 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). + For every breakpoint, you can specify the amount of columns to span, + or set the prop to {``} for auto layout widths. +

+ + + + +

+ sm={4} +

+ + + + +
+ + + + +

+ {`sm={true}`} +

+

+ Or set the prop to {``} for auto layout widths. +

+ + + + +

+ {`sm={true}`} +

+ + + + +

+ {`sm={true}`} +

+ + + + + + ); +} -export const ResponsiveGrids = () => ( - <> +export function MixingBreakpoints() { + return ( + <> + + + + +

+ {`md={8} xs={12}`} +

+

+ You can also mix and match breakpoints to create different grids + depending on the screen size. +

+ + + + +

+ {`md={4} xs={6}`} +

+ + + + +
+ + + + +

+ {`md={4} xs={3}`} +

+ + + + +

+ {`md={4} xs={3}`} +

+ + + + +

+ {`md={4} xs={3}`} +

+ + + + + + ); +} + +export function OffsettingColumns() { + return ( - +

- sm={8} -

-

- The Col lets you specify column widths across - 6 breakpoint sizes (xs, sm, md, lg, xl and xxl). - For every breakpoint, you can specify the amount of columns to span, - or set the prop to {``} for auto layout widths. + {`md={4}`}

- +

- sm={4} -

- - - - -
- - - - -

- {`sm={true}`} -

-

- Or set the prop to {``} for auto layout widths. -

- - - - -

- {`sm={true}`} + {`md={{ span: 6, offset: 2 }}`}

- - - -

- {`sm={true}`} + For offsetting grid columns you can set an offset value.

- -); + ); +} -export const MixingBreakpoints = () => ( - <> - - - - -

- {`md={8} xs={12}`} -

-

- You can also mix and match breakpoints to create different grids - depending on the screen size. -

- - - - -

- {`md={4} xs={6}`} -

- - - - -
+export function SettingColumnWidthsInRow() { + return ( - - - -

- {`md={4} xs={3}`} -

- +

+ The Row lets you specify column widths across + 5 breakpoint sizes (xs, sm, md, lg, xl and xxl). + { /* eslint-disable-next-line max-len */ } + For every breakpoint, you can specify the amount of columns that will fit next to each other. + You can also specify auto to set the columns to their natural widths. +

+

+ Note that Row column widths will override Col + widths set on lower breakpoints when viewed on larger screens. + The {``} size will be overriden by + {``} on medium and larger screens. +

+ + + - - -

- {`md={4} xs={3}`} -

- + + - - -

- {`md={4} xs={3}`} -

- + + - -); - -export const OffsettingColumns = () => ( - - - - -

- {`md={4}`} -

- - - - -

- {`md={{ span: 6, offset: 2 }}`} -

-

- For offsetting grid columns you can set an offset value. -

- - - - -); - -export const SettingColumnWidthsInRow = () => ( - -

- The Row lets you specify column widths across - 5 breakpoint sizes (xs, sm, md, lg, xl and xxl). - For every breakpoint, you can specify the amount of columns that will fit next to each other. - You can also specify auto to set the columns to their natural widths. -

-

- Note that Row column widths will override Col - widths set on lower breakpoints when viewed on larger screens. - The {``} size will be overriden by - {``} on medium and larger screens. -

- - - - - - - - - - - - -); + ); +} diff --git a/src/Container/Container.tsx b/src/Container/Container.tsx index 3293fc22..fb4b6245 100644 --- a/src/Container/Container.tsx +++ b/src/Container/Container.tsx @@ -22,21 +22,23 @@ export type ContainerProps = { fluid?: ReactBootstrapContainerProps['fluid']; } & ReactBootstrapContainerProps; -export const Container = ({ +export function Container({ as, children, className, fluid, bsPrefix = 'container', ...props -}: ContainerProps) => ( - - { children } - -); +}: ContainerProps) { + return ( + + { children } + + ); +} diff --git a/src/Container/Row.tsx b/src/Container/Row.tsx index e26b7095..744525ea 100644 --- a/src/Container/Row.tsx +++ b/src/Container/Row.tsx @@ -53,7 +53,7 @@ export type RowProps = { xxl?: ReactBootstrapRowProps['xxl']; } & ReactBootstrapRowProps; -export const Row = ({ +export function Row({ as, children, className, @@ -65,19 +65,21 @@ export const Row = ({ xxl, bsPrefix = 'row', ...props -}: RowProps) => ( - - { children } - -); +}: RowProps) { + return ( + + { children } + + ); +} diff --git a/src/ControlButtonGroup/ControlButtonGroup.tsx b/src/ControlButtonGroup/ControlButtonGroup.tsx index 63ae177e..d0793cfb 100644 --- a/src/ControlButtonGroup/ControlButtonGroup.tsx +++ b/src/ControlButtonGroup/ControlButtonGroup.tsx @@ -13,13 +13,13 @@ type ControlButtonGroupProps = { onChange?: React.ChangeEventHandler; }; -const ControlButtonGroup = ({ +function ControlButtonGroup({ children, childChecked, handleChangeValue, orientation = ORIENTATIONS.COLUMN, onChange = undefined, -}: ControlButtonGroupProps) => { +}: ControlButtonGroupProps) { const row = orientation === ORIENTATIONS.ROW; const renderChildElement = (child) => { @@ -44,6 +44,6 @@ const ControlButtonGroup = ({ }; return <>{Children.toArray(children).map(renderChildElement)}; -}; +} export default ControlButtonGroup; diff --git a/src/CopyToClipboard/CopyToClipboard.stories.tsx b/src/CopyToClipboard/CopyToClipboard.stories.tsx index 28af547b..095fac48 100644 --- a/src/CopyToClipboard/CopyToClipboard.stories.tsx +++ b/src/CopyToClipboard/CopyToClipboard.stories.tsx @@ -7,9 +7,11 @@ export default { component: CopyToClipboard, }; -export const Default = () => ( - -); +export function Default() { + return ( + + ); +} diff --git a/src/CopyToClipboard/index.ts b/src/CopyToClipboard/index.ts index 13e55353..7b6b62c1 100644 --- a/src/CopyToClipboard/index.ts +++ b/src/CopyToClipboard/index.ts @@ -1 +1,3 @@ -export { default } from './CopyToClipboard'; +import CopyToClipboard from './CopyToClipboard'; + +export default CopyToClipboard; diff --git a/src/CopyToClipboardButton/CopyToClipboardButton.stories.tsx b/src/CopyToClipboardButton/CopyToClipboardButton.stories.tsx index 65b3fd3d..28db61ae 100644 --- a/src/CopyToClipboardButton/CopyToClipboardButton.stories.tsx +++ b/src/CopyToClipboardButton/CopyToClipboardButton.stories.tsx @@ -7,19 +7,23 @@ export default { component: CopyToClipboardButton, }; -export const Default = () => ( - -); +export function Default() { + return ( + + ); +} -export const Secondary = () => ( - -); +export function Secondary() { + return ( + + ); +} diff --git a/src/CopyToClipboardButton/CopyToClipboardButton.tsx b/src/CopyToClipboardButton/CopyToClipboardButton.tsx index 8a5cb1c6..e1b9ebe3 100644 --- a/src/CopyToClipboardButton/CopyToClipboardButton.tsx +++ b/src/CopyToClipboardButton/CopyToClipboardButton.tsx @@ -42,7 +42,8 @@ function CopyToClipboardButton({ aria-label="Copy to clipboard" className={classNames( 'CopyToClipboardButton', - 'btn', { + 'btn', +{ 'btn-outline-secondary': variant === ButtonVariants.SECONDARY, }, )} diff --git a/src/CopyToClipboardButton/index.ts b/src/CopyToClipboardButton/index.ts index c958ada8..35024c60 100644 --- a/src/CopyToClipboardButton/index.ts +++ b/src/CopyToClipboardButton/index.ts @@ -1 +1,4 @@ -export { default, ButtonVariants } from './CopyToClipboardButton'; +import CopyToClipboardButton from './CopyToClipboardButton'; + +export { ButtonVariants } from './CopyToClipboardButton'; +export default CopyToClipboardButton; diff --git a/src/DateTimePicker/DateTimePicker.stories.tsx b/src/DateTimePicker/DateTimePicker.stories.tsx index eec693a5..298d6318 100644 --- a/src/DateTimePicker/DateTimePicker.stories.tsx +++ b/src/DateTimePicker/DateTimePicker.stories.tsx @@ -7,18 +7,18 @@ export default { component: DateTimePicker, }; -export const Default = () => ( - - ); +export function Default() { + return ; +} -export const EnforcedInput = () => ( - - ); +export function EnforcedInput() { + return ; +} -export const ShowMonthAndYearSelects = () => ( - - ); +export function ShowMonthAndYearSelects() { + return ; +} -export const ShowTimeSelect = () => ( - - ); +export function ShowTimeSelect() { + return ; +} diff --git a/src/Drawer/Drawer.stories.tsx b/src/Drawer/Drawer.stories.tsx index 14c19093..1c0df8ce 100644 --- a/src/Drawer/Drawer.stories.tsx +++ b/src/Drawer/Drawer.stories.tsx @@ -22,7 +22,7 @@ export default { }, }; -export const Default = () => { +export function Default() { const [isVisible, setVisible] = useState(false); const toggleVisible = () => setVisible(!isVisible); @@ -73,9 +73,9 @@ export const Default = () => { ); -}; +} -export const Orientation = () => { +export function Orientation() { const [isVisible, setVisible] = useState(false); const toggleVisible = () => setVisible(!isVisible); @@ -126,9 +126,9 @@ export const Orientation = () => { ); -}; +} -export const Expandable = () => { +export function Expandable() { const [isVisible, setVisible] = useState(false); const toggleVisible = () => setVisible(!isVisible); @@ -179,9 +179,9 @@ export const Expandable = () => { ); -}; +} -export const DefaultExpanded = () => { +export function DefaultExpanded() { const [isVisible, setVisible] = useState(false); const toggleVisible = () => setVisible(!isVisible); @@ -232,9 +232,9 @@ export const DefaultExpanded = () => { ); -}; +} -export const AdditionalActions = () => { +export function AdditionalActions() { const [isVisible, setVisible] = useState(false); const toggleVisible = () => setVisible(!isVisible); @@ -292,9 +292,9 @@ export const AdditionalActions = () => { ); -}; +} -export const Empty = () => { +export function Empty() { const [isVisible, setVisible] = useState(false); const toggleVisible = () => setVisible(!isVisible); @@ -308,4 +308,4 @@ export const Empty = () => { /> ); -}; +} diff --git a/src/Drawer/Drawer.tsx b/src/Drawer/Drawer.tsx index c0e0869e..6af6b08f 100644 --- a/src/Drawer/Drawer.tsx +++ b/src/Drawer/Drawer.tsx @@ -1,5 +1,5 @@ import React, { - createContext, useEffect, useState, useCallback, useRef, + createContext, useEffect, useState, useCallback, useRef, useMemo, } from 'react'; import classNames from 'classnames'; @@ -37,7 +37,7 @@ type DrawerProps = { onRequestClose: (...args: unknown[]) => unknown; }; -const Drawer = ({ +function Drawer({ behindNav = true, children, className = '', @@ -48,11 +48,11 @@ const Drawer = ({ orientation = ORIENTATION_RIGHT, size = 'sm', onRequestClose, -}: DrawerProps) => { +}: DrawerProps) { const isCurrentlyOpen = useRef(false); const [expanded, setExpanded] = useState(defaultExpanded); - const handleExpand = () => setExpanded(!expanded); + const handleExpand = useCallback(() => setExpanded(!expanded), [expanded]); const drawerClasses = classNames(`Drawer Drawer--${orientation} Drawer--${size}`, { 'Drawer--expanded': expanded, @@ -61,6 +61,10 @@ const Drawer = ({ [className]: !!className, }); + const expandContentContextValue = useMemo(() => ({ + expandable, expanded, handleExpand, + }), [expandable, expanded, handleExpand]); + const handleEscKeyPress = useCallback((event) => { if (visible && event.key === 'Escape') { onRequestClose(); @@ -124,12 +128,12 @@ const Drawer = ({ ) }
- + {children}
); -}; +} export default Drawer; diff --git a/src/Drawer/DrawerFooter.tsx b/src/Drawer/DrawerFooter.tsx index 2372dbbb..d153de4a 100644 --- a/src/Drawer/DrawerFooter.tsx +++ b/src/Drawer/DrawerFooter.tsx @@ -21,7 +21,7 @@ type DrawerFooterProps = { onSecondaryAction?: () => void; }; -const DrawerFooter = ({ +function DrawerFooter({ children, isPrimaryActionLoading, isSecondaryActionLoading, @@ -35,13 +35,14 @@ const DrawerFooter = ({ secondaryActionText, onPrimaryAction, onSecondaryAction, -}: DrawerFooterProps) => ( -
-
- {children} -
-
- {onSecondaryAction && ( +}: DrawerFooterProps) { + return ( +
+
+ {children} +
+
+ {onSecondaryAction && (
-
-); + ); +} DrawerFooter.defaultProps = { children: undefined, diff --git a/src/Drawer/DrawerHeader.tsx b/src/Drawer/DrawerHeader.tsx index 1a7a6e64..abc35228 100644 --- a/src/Drawer/DrawerHeader.tsx +++ b/src/Drawer/DrawerHeader.tsx @@ -17,11 +17,11 @@ type DrawerHeaderProps = { onRequestClose: (...args: unknown[]) => unknown; }; -const DrawerHeader = ({ +function DrawerHeader({ bordered = true, title, onRequestClose, -}: DrawerHeaderProps) => { +}: DrawerHeaderProps) { const { expandable, expanded, handleExpand } = useContext(ExpandContext); return ( @@ -56,7 +56,7 @@ const DrawerHeader = ({
); -}; +} DrawerHeader.defaultProps = { bordered: true, diff --git a/src/Dropdown/Dropdown.stories.tsx b/src/Dropdown/Dropdown.stories.tsx index 2356440a..1f835c06 100644 --- a/src/Dropdown/Dropdown.stories.tsx +++ b/src/Dropdown/Dropdown.stories.tsx @@ -21,56 +21,60 @@ export default { }, }; -export const Default = () => ( - <> - - - Dropdown toggle - - - Add label - Compose email - - -
- - - Dropdown toggle - - - Add label - Compose email - - - -); +export function Default() { + return ( + <> + + + Dropdown toggle + + + Add label + Compose email + + +
+ + + Dropdown toggle + + + Add label + Compose email + + + + ); +} -export const Sizes = () => ( - <> - - - Small toggle - - - Add label - Compose email - - -
- - - Large toggle - - - Add label - Compose email - - - -); +export function Sizes() { + return ( + <> + + + Small toggle + + + Add label + Compose email + + +
+ + + Large toggle + + + Add label + Compose email + + + + ); +} -export const IconDefault = () => ( - <> +export function IconDefault() { + return ( @@ -78,11 +82,11 @@ export const IconDefault = () => ( Compose email - -); + ); +} -export const IconSwap = () => ( - <> +export function IconSwap() { + return ( @@ -92,13 +96,14 @@ export const IconSwap = () => ( Compose email - -); + ); +} -export const UnstyledToggle = () => ( - - -
+ +
( alignItems: 'center', justifyContent: 'space-between', }} - > -
-
Team A
-
Organization
-
-
- + > +
+
Team A
+
Organization
+
+
+ +
-
- - - Team A - Team B - Team C - - -); + + + Team A + Team B + Team C + + + ); +} -export const WithDivider = () => ( - <> +export function WithDivider() { + return ( Dropdown toggle @@ -138,5 +144,5 @@ export const WithDivider = () => ( Delete - -); + ); +} diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx index 5a381299..d93aa8f5 100644 --- a/src/Dropdown/Dropdown.tsx +++ b/src/Dropdown/Dropdown.tsx @@ -64,7 +64,7 @@ type DropdownProps = { onToggle?: RBDropdownProps['onToggle']; } & RBDropdownProps; -const Dropdown = ({ +function Dropdown({ align = 'start', as, autoClose = true, @@ -79,24 +79,26 @@ const Dropdown = ({ onToggle, show, ...props -}: DropdownProps) => ( - - { children } - -); +}: DropdownProps) { + return ( + + { children } + + ); +} export default Dropdown; diff --git a/src/Dropdown/DropdownDivider.tsx b/src/Dropdown/DropdownDivider.tsx index 615a9aaa..547d4553 100644 --- a/src/Dropdown/DropdownDivider.tsx +++ b/src/Dropdown/DropdownDivider.tsx @@ -20,17 +20,19 @@ type DropdownDividerProps = { className?: string; }; -const DropdownDivider = ({ +function DropdownDivider({ as = 'hr', bsPrefix = 'dropdown', className, -}: DropdownDividerProps) => ( - -); +}: DropdownDividerProps) { + return ( + + ); +} DropdownDivider.defaultProps = { as: 'hr', diff --git a/src/Dropdown/DropdownItem.tsx b/src/Dropdown/DropdownItem.tsx index 02dcbaa9..ea420a9f 100644 --- a/src/Dropdown/DropdownItem.tsx +++ b/src/Dropdown/DropdownItem.tsx @@ -47,7 +47,7 @@ type DropdownItemProps = { variant?: 'danger' }; -const DropdownItem = ({ +function DropdownItem({ active, as, children, @@ -59,25 +59,27 @@ const DropdownItem = ({ onClick, bsPrefix = 'dropdown-item', ...props -}: DropdownItemProps) => ( - - { leadingIcon && } - { children } - -); + disabled={disabled} + eventKey={eventKey} + href={href} + onClick={onClick} + {...props} + > + { leadingIcon && } + { children } + + ); +} export default DropdownItem; diff --git a/src/Dropdown/DropdownMenu.tsx b/src/Dropdown/DropdownMenu.tsx index ada214e7..73b2c04b 100644 --- a/src/Dropdown/DropdownMenu.tsx +++ b/src/Dropdown/DropdownMenu.tsx @@ -52,7 +52,7 @@ type DropdownMenuProps = { onSelect?: (...args: unknown[]) => unknown; }; -const DropdownMenu = ({ +function DropdownMenu({ align, as, children, @@ -66,23 +66,25 @@ const DropdownMenu = ({ variant, bsPrefix = 'dropdown-menu', ...props -}: DropdownMenuProps) => ( - - { children } - -); +}: DropdownMenuProps) { + return ( + + { children } + + ); +} export default DropdownMenu; diff --git a/src/Dropdown/DropdownToggle.tsx b/src/Dropdown/DropdownToggle.tsx index f5cd3e6c..e02b8785 100644 --- a/src/Dropdown/DropdownToggle.tsx +++ b/src/Dropdown/DropdownToggle.tsx @@ -48,7 +48,7 @@ type DropdownToggleProps = { split?: boolean; }; -const DropdownToggle = ({ +function DropdownToggle({ as, ariaLabel = 'dropdown-toggle', bsPrefix = 'dropdown-toggle', @@ -60,23 +60,25 @@ const DropdownToggle = ({ removeCaret, unstyled, ...props -}: DropdownToggleProps) => ( - - { leadingIcon && ()} - { children } - -); + id={id} + {...props} + > + { leadingIcon && ()} + { children } + + ); +} export default DropdownToggle; diff --git a/src/EmptyState/EmptyState.tsx b/src/EmptyState/EmptyState.tsx index 69e78052..4f329e43 100644 --- a/src/EmptyState/EmptyState.tsx +++ b/src/EmptyState/EmptyState.tsx @@ -17,7 +17,7 @@ export interface EmptyStateProps { title?: ReactNode; } -const EmptyState = ({ +function EmptyState({ className, fullWidth = false, image, @@ -25,24 +25,25 @@ const EmptyState = ({ primaryAction, subtitle, title, -}: EmptyStateProps) => ( -
-
+
- {image && ( + > + {image && (
)} - {title && ( + {title && ( - {title} + {title} )} - {subtitle && ( + {subtitle && ( {subtitle} )} - {primaryAction && ( + {primaryAction && (
{primaryAction}
)} +
-
-); + ); +} export default EmptyState; diff --git a/src/EmptyState/index.ts b/src/EmptyState/index.ts index 7dfa367b..195ead54 100644 --- a/src/EmptyState/index.ts +++ b/src/EmptyState/index.ts @@ -1 +1,3 @@ -export { default } from './EmptyState'; +import EmptyState from './EmptyState'; + +export default EmptyState; diff --git a/src/FadeTransition/FadeTransition.jsx b/src/FadeTransition/FadeTransition.jsx index 826be03c..20d0e931 100644 --- a/src/FadeTransition/FadeTransition.jsx +++ b/src/FadeTransition/FadeTransition.jsx @@ -4,11 +4,13 @@ import { CSSTransition } from 'react-transition-group'; import './FadeTransition.scss'; -const FadeTransition = ({ children, ...props }) => ( - - {children} - -); +function FadeTransition({ children, ...props }) { + return ( + + {children} + + ); +} FadeTransition.propTypes = { children: PropTypes.element.isRequired, diff --git a/src/FadeTransition/index.js b/src/FadeTransition/index.js index 63b6124a..1aeab771 100644 --- a/src/FadeTransition/index.js +++ b/src/FadeTransition/index.js @@ -1 +1,3 @@ -export { default } from './FadeTransition'; +import FadeTransition from './FadeTransition'; + +export default FadeTransition; diff --git a/src/Flex/Flex.tsx b/src/Flex/Flex.tsx index 5f83a3c9..037e37cc 100644 --- a/src/Flex/Flex.tsx +++ b/src/Flex/Flex.tsx @@ -42,7 +42,7 @@ export interface FlexProps { width?: string; } -const Flex = ({ +function Flex({ alignItems, alignSelf, as = 'div', @@ -62,7 +62,7 @@ const Flex = ({ maxWidth, width, ...props -}: FlexProps) => { +}: FlexProps) { // Defined flex properties as strings const flexClasses = [ container ? styles[`flex-container`] : styles.container, @@ -95,6 +95,6 @@ const Flex = ({ }, children, ); -}; +} export default Flex; diff --git a/src/Form/Form.stories.tsx b/src/Form/Form.stories.tsx index 7986b5a6..ebb6c42f 100644 --- a/src/Form/Form.stories.tsx +++ b/src/Form/Form.stories.tsx @@ -26,50 +26,52 @@ const onSubmit = (event) => { action('form submitted')(event); }; -const InputComponent = (props) => { +function InputComponent(props) { const [value, setValue] = useState(''); const handleChangeValue = (event) => setValue(event.target.value); return ( ); -}; +} -export const Default = () => ( -
- - - - - - - - - - - - - - - - - -
-); +export function Default() { + return ( +
+ + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/src/Form/index.ts b/src/Form/index.ts index 8bc7b770..d0b85532 100644 --- a/src/Form/index.ts +++ b/src/Form/index.ts @@ -1 +1,3 @@ -export { default } from './Form'; +import Form from './Form'; + +export default Form; diff --git a/src/FormControlLabel/FormControlLabel.stories.tsx b/src/FormControlLabel/FormControlLabel.stories.tsx index 36fee8a2..c72f042f 100644 --- a/src/FormControlLabel/FormControlLabel.stories.tsx +++ b/src/FormControlLabel/FormControlLabel.stories.tsx @@ -10,7 +10,7 @@ export default { component: FormControlLabel, }; -const FormControlLabelControlComponent = (props) => { +function FormControlLabelControlComponent(props) { const [value, setValue] = useState(false); const onChange = (e) => { setValue(e.target.checked); @@ -24,53 +24,61 @@ const FormControlLabelControlComponent = (props) => { onChange={onChange} /> ); -}; +} -export const Checkbox = () => ( - -); +export function Checkbox() { + return ( + + ); +} -export const CheckboxWithChildren = () => ( - -
This checkbox has some helper text too!
- -); +export function CheckboxWithChildren() { + return ( + +
This checkbox has some helper text too!
+ + ); +} -export const Radio = () => ( - -); +export function Radio() { + return ( + + ); +} -export const RadioWithChildren = () => ( - -
This radio button has some helper text too!
- -); +export function RadioWithChildren() { + return ( + +
This radio button has some helper text too!
+ + ); +} diff --git a/src/FormControlLabel/index.ts b/src/FormControlLabel/index.ts index 7b77e026..2016ed1f 100644 --- a/src/FormControlLabel/index.ts +++ b/src/FormControlLabel/index.ts @@ -1 +1,3 @@ -export { default } from './FormControlLabel'; +import FormControlLabel from './FormControlLabel'; + +export default FormControlLabel; diff --git a/src/FormGroup/FormGroup.stories.tsx b/src/FormGroup/FormGroup.stories.tsx index 18f3911f..2b7f91c8 100644 --- a/src/FormGroup/FormGroup.stories.tsx +++ b/src/FormGroup/FormGroup.stories.tsx @@ -21,208 +21,234 @@ export default { }, }; -const InputComponent = (props) => { +function InputComponent(props) { const [value, setValue] = useState(''); const handleChangeValue = (event) => setValue(event.target.value); return ( ); -}; - -export const Default = () => ( - - - -); - -export const WithHelperText = () => ( - - - -); +} -export const Required = () => ( - - - -); +export function Default() { + return ( + + + + ); +} -export const NoMargin = () => ( - +export function WithHelperText() { + return ( - + + ); +} + +export function Required() { + return ( - + - -); + ); +} -export const WithLabelTooltip = () => ( - - - -); +export function NoMargin() { + return ( + + + + + + + + + ); +} + +export function WithLabelTooltip() { + return ( + + + + ); +} -export const WithLeadingIcon = () => ( - - - -); +export function WithLeadingIcon() { + return ( + + + + ); +} -export const WithTrailingText = () => ( - - - -); +export function WithTrailingText() { + return ( + + + + ); +} -export const WithTrailingIcon = () => ( - - - -); +export function WithTrailingIcon() { + return ( + + + + ); +} -export const WithTrailingIconAndButton = () => ( - - alert('Great job!')} - /> - -); +export function WithTrailingIconAndButton() { + return ( + + alert('Great job!')} + /> + + ); +} -export const WithTrailingIconAndButtonWithSubmit = () => ( - - alert('Great job!')} - trailingIconOnClickSubmit - /> - -); +export function WithTrailingIconAndButtonWithSubmit() { + return ( + + alert('Great job!')} + trailingIconOnClickSubmit + /> + + ); +} -export const WithTrailingIconAndButtonWithSubmitAndLabel = () => ( - - alert('Great job!')} - trailingIconOnClickSubmit - /> - -); +export function WithTrailingIconAndButtonWithSubmitAndLabel() { + return ( + + alert('Great job!')} + trailingIconOnClickSubmit + /> + + ); +} -export const WithLeadingAndTrailingIcons = () => ( - - - -); +export function WithLeadingAndTrailingIcons() { + return ( + + + + ); +} -export const WithErrors = () => ( - Sorry, we’re not able to accept this type of input. For more information, click here
] }} - id="with-errors" - inputKey="test" - label="Form Group with errors" - labelHtmlFor="input" - > - - -); +export function WithErrors() { + return ( + Sorry, we’re not able to accept this type of input. For more information, click here
] }} + id="with-errors" + inputKey="test" + label="Form Group with errors" + labelHtmlFor="input" + > + + + ); +} /* eslint-disable react/prop-types */ -const ButtonGroupComponent = ({ +function ButtonGroupComponent({ ButtonGroup, bordered, children, @@ -234,7 +260,7 @@ const ButtonGroupComponent = ({ labelHelperText, orientation, labelHtmlFor, -}) => { +}) { const [value, setValue] = useState(defaultValue); const handleChangeValue = (values) => setValue(values); @@ -258,10 +284,10 @@ const ButtonGroupComponent = ({ ); -}; +} /* eslint-enable react/prop-types */ -export const WithRadioButtonGroup = () => { +export function WithRadioButtonGroup() { const orientation = ORIENTATIONS.COLUMN; const bordered = true; @@ -304,4 +330,4 @@ export const WithRadioButtonGroup = () => { /> ); -}; +} diff --git a/src/FormGroup/FormGroup.tsx b/src/FormGroup/FormGroup.tsx index 73787296..7c04212d 100644 --- a/src/FormGroup/FormGroup.tsx +++ b/src/FormGroup/FormGroup.tsx @@ -135,7 +135,8 @@ export default function FormGroup({ { className: classNames( 'FormGroup', - className, { + className, +{ 'FormGroup--is-invalid': hasErrors, 'FormGroup--bordered': bordered, 'FormGroup--inline': inline, diff --git a/src/FormGroup/index.ts b/src/FormGroup/index.ts index 79cbe24a..18196474 100644 --- a/src/FormGroup/index.ts +++ b/src/FormGroup/index.ts @@ -1 +1,3 @@ -export { default } from './FormGroup'; +import FormGroup from './FormGroup'; + +export default FormGroup; diff --git a/src/Heading/Heading.tsx b/src/Heading/Heading.tsx index 9a315253..e19c0eb1 100644 --- a/src/Heading/Heading.tsx +++ b/src/Heading/Heading.tsx @@ -38,7 +38,7 @@ const LevelToSizeMap = { const getHeadingSizeClassFromLevel = (level: number) => `Heading--${LevelToSizeMap[level]}`; -const Heading = ({ +function Heading({ children, className, level = 1, @@ -46,7 +46,8 @@ const Heading = ({ textAlign, weight = 'bold', ...props -}: HeadingProps) => createElement( +}: HeadingProps) { + return createElement( `h${level}`, { style: { textAlign }, @@ -60,7 +61,9 @@ const Heading = ({ }, ), ...props, - }, children, + }, +children, ); +} export default Heading; diff --git a/src/IconButton/IconButton.stories.tsx b/src/IconButton/IconButton.stories.tsx index 8e9442b3..277762f2 100644 --- a/src/IconButton/IconButton.stories.tsx +++ b/src/IconButton/IconButton.stories.tsx @@ -14,35 +14,43 @@ export default { }, }; -export const CommonActions = () => ( - <> - - - - - - - - - - -); +export function CommonActions() { + return ( + <> + + + + + + + + + + + ); +} -export const AriaLabel = () => ( - <> - - - - - -); +export function AriaLabel() { + return ( + <> + + + + + + ); +} -export const Loading = () => ; +export function Loading() { + return ; +} -export const Sizes = () => ( - <> - - - - -); +export function Sizes() { + return ( + <> + + + + + ); +} diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx index 928475b0..885761bc 100644 --- a/src/IconButton/IconButton.tsx +++ b/src/IconButton/IconButton.tsx @@ -68,7 +68,7 @@ export type IconButtonProps = ( size?: 'sm' | 'lg'; } & ButtonProps; -const IconButton = ({ +function IconButton({ action, ariaLabel, className, @@ -77,7 +77,7 @@ const IconButton = ({ size = 'sm', variant = 'transparent', ...props -}: IconButtonProps) => { +}: IconButtonProps) { const getAriaLabel = () => { if (action) { return ariaLabel || IconButtonActions[action]?.ariaLabel; @@ -101,6 +101,6 @@ const IconButton = ({ /> ); -}; +} export default IconButton; diff --git a/src/IconButton/index.ts b/src/IconButton/index.ts index 86c5e513..a51790e7 100644 --- a/src/IconButton/index.ts +++ b/src/IconButton/index.ts @@ -1 +1,3 @@ -export { default } from './IconButton'; +import IconButton from './IconButton'; + +export default IconButton; diff --git a/src/IconCell/IconCell.stories.tsx b/src/IconCell/IconCell.stories.tsx index 78b83423..1dfa0a3c 100644 --- a/src/IconCell/IconCell.stories.tsx +++ b/src/IconCell/IconCell.stories.tsx @@ -17,12 +17,14 @@ export default { }, }; -export const Default = () => ( -
- - - - - -
-); +export function Default() { + return ( +
+ + + + + +
+ ); +} diff --git a/src/IconCell/IconCell.tsx b/src/IconCell/IconCell.tsx index 210a2d54..c0c43b9e 100644 --- a/src/IconCell/IconCell.tsx +++ b/src/IconCell/IconCell.tsx @@ -9,12 +9,14 @@ export type IconCellProps = { icon: IconDefinition; }; -const IconCell = ({ +function IconCell({ icon, -}: IconCellProps) => ( -
- -
-); +}: IconCellProps) { + return ( +
+ +
+ ); +} export default IconCell; diff --git a/src/Input/index.ts b/src/Input/index.ts index a2e60496..a122bd4b 100644 --- a/src/Input/index.ts +++ b/src/Input/index.ts @@ -1 +1,3 @@ -export { default } from './Input'; +import Input from './Input'; + +export default Input; diff --git a/src/InputLabel/InputLabel.tsx b/src/InputLabel/InputLabel.tsx index 2e7cd2e1..52170a95 100644 --- a/src/InputLabel/InputLabel.tsx +++ b/src/InputLabel/InputLabel.tsx @@ -16,7 +16,7 @@ export type InputLabelProps = { tooltipText?: React.ReactNode; } & LabelProps; -const InputLabel = ({ +function InputLabel({ className = '', labelHtmlFor = '', text, @@ -24,7 +24,7 @@ const InputLabel = ({ labelHelperText = '', tooltipText, ...props -}: InputLabelProps) => { +}: InputLabelProps) { const inputLabelChildren = ( <> {text} @@ -43,6 +43,6 @@ const InputLabel = ({ {inputLabelChildren} ); -}; +} export default InputLabel; diff --git a/src/InputLabel/index.ts b/src/InputLabel/index.ts index 3b0b90ad..219e24ad 100644 --- a/src/InputLabel/index.ts +++ b/src/InputLabel/index.ts @@ -1 +1,3 @@ -export { default } from './InputLabel'; +import InputLabel from './InputLabel'; + +export default InputLabel; diff --git a/src/InputLegend/InputLegend.tsx b/src/InputLegend/InputLegend.tsx index 30830643..e99ffd2e 100644 --- a/src/InputLegend/InputLegend.tsx +++ b/src/InputLegend/InputLegend.tsx @@ -18,14 +18,14 @@ export type InputLegendProps = { tooltipText?: React.ReactNode; } & LegendProps; -const InputLegend = ({ +function InputLegend({ className = '', text, required, labelHelperText = '', tooltipText, ...props -}: InputLegendProps) => { +}: InputLegendProps) { const inputLegendChildren = ( <> {text} @@ -43,6 +43,6 @@ const InputLegend = ({ {inputLegendChildren} ); -}; +} export default InputLegend; diff --git a/src/InputLegend/index.ts b/src/InputLegend/index.ts index 81445ae1..92f9cd7a 100644 --- a/src/InputLegend/index.ts +++ b/src/InputLegend/index.ts @@ -1 +1,3 @@ -export { default } from './InputLegend'; +import InputLegend from './InputLegend'; + +export default InputLegend; diff --git a/src/Layout/Header/Controls.tsx b/src/Layout/Header/Controls.tsx index 6f1bb4df..5042a710 100644 --- a/src/Layout/Header/Controls.tsx +++ b/src/Layout/Header/Controls.tsx @@ -1,9 +1,11 @@ import React from 'react'; -const Controls = (props) => ( -
- {props.children} -
-); +function Controls(props) { + return ( +
+ {props.children} +
+ ); +} export default Controls; diff --git a/src/Layout/Header/Header.tsx b/src/Layout/Header/Header.tsx index b5ea8772..e496d238 100644 --- a/src/Layout/Header/Header.tsx +++ b/src/Layout/Header/Header.tsx @@ -12,18 +12,19 @@ type HeaderProps = { onToggleSidebarRequest: (...args: unknown[]) => void; }; -const Header = ({ +function Header({ controls, isMobileView, isSidebarOpen, titleComponent, onToggleSidebarRequest, -}: HeaderProps) => ( -
- {titleComponent} - - {!isMobileView && controls} - {isMobileView && ( +}: HeaderProps) { + return ( +
+ {titleComponent} + + {!isMobileView && controls} + {isMobileView && (
-); + +
+ ); +} export default Header; diff --git a/src/Layout/Header/index.ts b/src/Layout/Header/index.ts index 579f1ac2..a9ce1058 100644 --- a/src/Layout/Header/index.ts +++ b/src/Layout/Header/index.ts @@ -1 +1,3 @@ -export { default } from './Header'; +import Header from './Header'; + +export default Header; diff --git a/src/Layout/SidebarNav/SidebarNav.tsx b/src/Layout/SidebarNav/SidebarNav.tsx index d060e918..e2df9a4c 100644 --- a/src/Layout/SidebarNav/SidebarNav.tsx +++ b/src/Layout/SidebarNav/SidebarNav.tsx @@ -8,20 +8,22 @@ export type SidebarNavProps = { isMobileView: boolean; }; -const SidebarNav = ({ +function SidebarNav({ controls, isMobileView, content, -}: SidebarNavProps) => ( -
- {content} +}: SidebarNavProps) { + return ( +
+ {content} - {controls && isMobileView && ( + {controls && isMobileView && (
{controls}
)} -
-); +
+ ); +} export default SidebarNav; diff --git a/src/Layout/SidebarNav/SidebarNavLink.tsx b/src/Layout/SidebarNav/SidebarNavLink.tsx index 5e9b810e..ab318067 100644 --- a/src/Layout/SidebarNav/SidebarNavLink.tsx +++ b/src/Layout/SidebarNav/SidebarNavLink.tsx @@ -13,28 +13,30 @@ export type SidebarNavLinkProps = { url: string; }; -const SidebarNavLink = ({ +function SidebarNavLink({ icon, iconClass, text, url, -}: SidebarNavLinkProps) => ( -
  • - - {icon && ( +}: SidebarNavLinkProps) { + return ( +
  • + + {icon && ( )} - {text} - -
    • -); + {text} + + + ); +} export default SidebarNavLink; diff --git a/src/Layout/SidebarNav/SidebarNavLinks.tsx b/src/Layout/SidebarNav/SidebarNavLinks.tsx index 2a00a743..480347ef 100644 --- a/src/Layout/SidebarNav/SidebarNavLinks.tsx +++ b/src/Layout/SidebarNav/SidebarNavLinks.tsx @@ -6,12 +6,14 @@ export type SidebarNavLinksProps = { children: React.ReactNode; }; -const SidebarNavLinks = ({ +function SidebarNavLinks({ children, -}: SidebarNavLinksProps) => ( -
      - {children} -
    -); +}: SidebarNavLinksProps) { + return ( +
      + {children} +
    + ); +} export default SidebarNavLinks; diff --git a/src/Layout/SidebarNav/index.ts b/src/Layout/SidebarNav/index.ts index fd7a5dba..62cf55c3 100644 --- a/src/Layout/SidebarNav/index.ts +++ b/src/Layout/SidebarNav/index.ts @@ -1 +1,3 @@ -export { default } from './SidebarNav'; +import SidebarNav from './SidebarNav'; + +export default SidebarNav; diff --git a/src/Layout/SidebarView/index.ts b/src/Layout/SidebarView/index.ts index 475ec188..3a51ab8f 100644 --- a/src/Layout/SidebarView/index.ts +++ b/src/Layout/SidebarView/index.ts @@ -1 +1,3 @@ -export { default } from './SidebarView'; +import SidebarView from './SidebarView'; + +export default SidebarView; diff --git a/src/LoadingOverlay/LoadingOverlay.stories.tsx b/src/LoadingOverlay/LoadingOverlay.stories.tsx index 7a7c1f0a..76caf031 100644 --- a/src/LoadingOverlay/LoadingOverlay.stories.tsx +++ b/src/LoadingOverlay/LoadingOverlay.stories.tsx @@ -14,6 +14,6 @@ export default { }, }; -export const Default = () => ( - -); +export function Default() { + return ; +} diff --git a/src/LoadingOverlay/LoadingOverlay.tsx b/src/LoadingOverlay/LoadingOverlay.tsx index f92f3736..2c99e391 100644 --- a/src/LoadingOverlay/LoadingOverlay.tsx +++ b/src/LoadingOverlay/LoadingOverlay.tsx @@ -16,7 +16,7 @@ type LoadingOverlayProps = { visible?: boolean; }; -const LoadingOverlay = ({ +function LoadingOverlay({ contentCenterOverflow = false, contentTop = false, dataTestid = 'LoadingOverlay', @@ -24,7 +24,7 @@ const LoadingOverlay = ({ text, textClassName, visible = true, -}: LoadingOverlayProps) => { +}: LoadingOverlayProps) { // Only set style if this is not visible to let CSS handle how to display this const classes = classNames( 'overlay', @@ -51,6 +51,6 @@ const LoadingOverlay = ({
    ); -}; +} export default LoadingOverlay; diff --git a/src/LoadingOverlay/index.ts b/src/LoadingOverlay/index.ts index 8bf207af..433e9927 100644 --- a/src/LoadingOverlay/index.ts +++ b/src/LoadingOverlay/index.ts @@ -1 +1,3 @@ -export { default } from './LoadingOverlay'; +import LoadingOverlay from './LoadingOverlay'; + +export default LoadingOverlay; diff --git a/src/LoadingSkeleton/LoadingSkeleton.stories.tsx b/src/LoadingSkeleton/LoadingSkeleton.stories.tsx index ba634fed..32fde5d1 100644 --- a/src/LoadingSkeleton/LoadingSkeleton.stories.tsx +++ b/src/LoadingSkeleton/LoadingSkeleton.stories.tsx @@ -13,18 +13,18 @@ export default { }, }; -export const Default = () => ( - -); +export function Default() { + return ; +} -export const MultiLine = () => ( - -); +export function MultiLine() { + return ; +} -export const HeightAndWidth = () => ( - -); +export function HeightAndWidth() { + return ; +} -export const Circle = () => ( - -); +export function Circle() { + return ; +} diff --git a/src/LoadingSkeleton/LoadingSkeleton.tsx b/src/LoadingSkeleton/LoadingSkeleton.tsx index 43040f69..a0a60632 100644 --- a/src/LoadingSkeleton/LoadingSkeleton.tsx +++ b/src/LoadingSkeleton/LoadingSkeleton.tsx @@ -46,18 +46,20 @@ export type LoadingSkeletonProps = SkeletonProps & { width?: number | string; }; -const LoadingSkeleton = ({ +function LoadingSkeleton({ className, ...props -}: LoadingSkeletonProps) => ( - - - -); +}: LoadingSkeletonProps) { + return ( + + + + ); +} LoadingSkeleton.defaultProps = { borderRadius: '4px', diff --git a/src/Main/Main.stories.tsx b/src/Main/Main.stories.tsx index 7fac1307..81a1a74e 100644 --- a/src/Main/Main.stories.tsx +++ b/src/Main/Main.stories.tsx @@ -47,76 +47,82 @@ const styles = { }, }; -export const Default = () => ( -
    -

    This is a header

    -

    With some paragraph text all wrapped in a {'

    '}

    -
    -); - -export const PageExample = () => ( -
    - -
    -

    Some header

    -
    -
    -

    Main content area of this page

    -

    - Having at least one main landmark on a page helps with accessibility and allows - assistive technology (AT) users to orient themselves on a page. -

    +export function Default() { + return ( +
    +

    This is a header

    +

    With some paragraph text all wrapped in a {'

    '}

    -
    -); + ); +} -export const Accessibility = () => ( -
    -
    - -

    Accessibility information

    - -

    - Any document needs to have a navigation point to the primary content of the page. - Ensure all content is contained within a landmark region, designated with HTML5 - landmark elements and/or ARIA landmark regions. -

    -

    - It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content - is contained within a navigational region. - In HTML5, you should use elements like header, nav, main, and footer. - Their ARIA counterparts are role="banner", role="navigation", role="main", - and role="contentinfo", in that order. - By using both HTML5 and ARIA markup, you make the webpage more robust and functional - no matter what screen reader technology is used. -

    -

    - Once added, screen reader users can navigate to a section based on its ARIA landmark - or HTML element. - Landmarks provide a simple replacement for a skip navigation link, - though the replacement is only useful for users of screen readers. - Sighted users or users of screen enlargers wouldn’t get much benefit from - the addition, so it can’t replace skip navigation links altogether. -

    - - Source:  - - Source: Deque University - Landmark one main - - -
    - - Interactive example:  - - W3C: ARIA Landmarks Example - - -     -     +export function PageExample() { + return ( +
    + +
    +

    Some header

    +
    +
    +

    Main content area of this page

    +

    + Having at least one main landmark on a page helps with accessibility and allows + assistive technology (AT) users to orient themselves on a page. +

    +
    -
    -); + ); +} + +export function Accessibility() { + return ( +
    +
    + +

    Accessibility information

    + +

    + Any document needs to have a navigation point to the primary content of the page. + Ensure all content is contained within a landmark region, designated with HTML5 + landmark elements and/or ARIA landmark regions. +

    +

    + It is a best practice to use both HTML 5 and ARIA landmarks to ensure all content + is contained within a navigational region. + In HTML5, you should use elements like header, nav, main, and footer. + Their ARIA counterparts are role="banner", role="navigation", role="main", + and role="contentinfo", in that order. + By using both HTML5 and ARIA markup, you make the webpage more robust and functional + no matter what screen reader technology is used. +

    +

    + Once added, screen reader users can navigate to a section based on its ARIA landmark + or HTML element. + Landmarks provide a simple replacement for a skip navigation link, + though the replacement is only useful for users of screen readers. + Sighted users or users of screen enlargers wouldn’t get much benefit from + the addition, so it can’t replace skip navigation links altogether. +

    + + Source:  + + Source: Deque University - Landmark one main + + +
    + + Interactive example:  + + W3C: ARIA Landmarks Example + + +     +     +
    +
    + ); +} diff --git a/src/Main/Main.tsx b/src/Main/Main.tsx index 5bc65515..2c4f9dd4 100644 --- a/src/Main/Main.tsx +++ b/src/Main/Main.tsx @@ -20,23 +20,25 @@ type MainProps = ElementProps & { id?: string; }; -const Main = ({ +function Main({ as = 'main', className, children, fluid = true, id, ...props -}: MainProps) => ( - - {children} - -); +}: MainProps) { + return ( + + {children} + + ); +} export default Main; diff --git a/src/Modal/Modal.stories.tsx b/src/Modal/Modal.stories.tsx index 4484581b..92dc1080 100644 --- a/src/Modal/Modal.stories.tsx +++ b/src/Modal/Modal.stories.tsx @@ -19,176 +19,190 @@ export default { const handleRequestClose = () => action('Close'); -export const Default = () => ( - - - -

    Some content goes here.

    -     - - - -     -); + + +

    Some content goes here.

    +     + + + + + ); +} -export const MediumModal = () => ( - - - -

    Some content goes here.

    -     - - - -     -); + + +

    Some content goes here.

    +     + + + + + ); +} -export const LargeModal = () => ( - - - -

    Some content goes here.

    -     - - - -     -); + + +

    Some content goes here.

    +     + + + + + ); +} -export const WithSubtitleModal = () => ( - - - -

    Some content goes here.

    -     - - - -     -); + + +

    Some content goes here.

    +     + + + + + ); +} -export const TransactionalModal = () => ( - - - -

    The user needs to take action here.

    - -     - - - -     -); + + +

    The user needs to take action here.

    + +     + + + + + ); +} -export const WarningModal = () => ( - - - -

    Are you sure you want to do this?

    -     - - - -     -); + + +

    Are you sure you want to do this?

    +     + + + + + ); +} -export const DangerModal = () => ( - - - -

    Are you sure you want to do this?

    -     - - - -     -); + + +

    Are you sure you want to do this?

    +     + + + + + ); +} diff --git a/src/Modal/Modal.tsx b/src/Modal/Modal.tsx index 7d482214..6ea9a7b2 100644 --- a/src/Modal/Modal.tsx +++ b/src/Modal/Modal.tsx @@ -11,11 +11,11 @@ type ModalProps = { size?: typeof MODAL_SIZES[keyof typeof MODAL_SIZES]; } & ReactModalProps; -const Modal = ({ +function Modal({ size = 'small', className, ...props -}: ModalProps) => { +}: ModalProps) { let componentClassName = className; if (size === MODAL_SIZES.MEDIUM) { @@ -27,6 +27,6 @@ const Modal = ({ return ( ); -}; +} export default Modal; diff --git a/src/Modal/ModalBody.tsx b/src/Modal/ModalBody.tsx index 2713b6fe..eac356a8 100644 --- a/src/Modal/ModalBody.tsx +++ b/src/Modal/ModalBody.tsx @@ -7,14 +7,15 @@ type ModalBodyProps = { className?: string; }; -const ModalBody = ({ +function ModalBody({ children, className, -}: ModalBodyProps) => ( - -
    - {children} -
    -); +}: ModalBodyProps) { + return ( +
    + {children} +
    + ); +} export default ModalBody; diff --git a/src/MoneyInput/MoneyInput.stories.tsx b/src/MoneyInput/MoneyInput.stories.tsx index 513464bb..a74ae9ff 100644 --- a/src/MoneyInput/MoneyInput.stories.tsx +++ b/src/MoneyInput/MoneyInput.stories.tsx @@ -16,7 +16,7 @@ export default { }, }; -export const Default = (args) => { +export function Default(args) { const [value, setValue] = useState(1250.99); const handleOnValueChange = (val) => { @@ -28,19 +28,17 @@ export const Default = (args) => { }; return ( - <> - - -
    - Value: {value} -     - + + +
    + Value: {value} +     ); -}; +} Default.args = { id: 'money-input-1', @@ -48,7 +46,7 @@ Default.args = { decimalsLimit: 2, }; -export const Step = (args) => { +export function Step(args) { const [value, setValue] = useState(200); const handleOnValueChange = (val) => { @@ -60,23 +58,21 @@ export const Step = (args) => { }; return ( - <> - - -
    - Value: {value} -     - + + +
    + Value: {value} +     ); -}; +} Step.args = { decimalsLimit: 2, @@ -85,7 +81,7 @@ Step.args = { step: 1, }; -export const Prefix = (args) => { +export function Prefix(args) { const [value, setValue] = useState(500); const handleOnValueChange = (val) => { @@ -97,23 +93,21 @@ export const Prefix = (args) => { }; return ( - <> - - -
    - Value: {value} -     - + + +
    + Value: {value} +     ); -}; +} Prefix.args = { decimalsLimit: 2, diff --git a/src/MoneyInput/MoneyInput.tsx b/src/MoneyInput/MoneyInput.tsx index a7a32e96..fa628a97 100644 --- a/src/MoneyInput/MoneyInput.tsx +++ b/src/MoneyInput/MoneyInput.tsx @@ -45,7 +45,7 @@ export type MoneyInputProps = CurrencyInputProps & { onValueChange?: (...args: unknown[]) => unknown; }; -const MoneyInput = ({ +function MoneyInput({ allowDecimals = true, allowNegativeValue = true, disabled = false, @@ -53,16 +53,18 @@ const MoneyInput = ({ intlConfig = { locale: 'en-US', currency: 'USD' }, prefix = '$ ', ...props -}: MoneyInputProps) => ( - -); +}: MoneyInputProps) { + return ( + + ); +} export default MoneyInput; diff --git a/src/MoneyInput/index.ts b/src/MoneyInput/index.ts index 35939668..44b25dae 100644 --- a/src/MoneyInput/index.ts +++ b/src/MoneyInput/index.ts @@ -1 +1,3 @@ -export { default } from './MoneyInput'; +import MoneyInput from './MoneyInput'; + +export default MoneyInput; diff --git a/src/OverlayTrigger/OverlayTrigger.tsx b/src/OverlayTrigger/OverlayTrigger.tsx index ebd4a1a9..cb3a9b74 100644 --- a/src/OverlayTrigger/OverlayTrigger.tsx +++ b/src/OverlayTrigger/OverlayTrigger.tsx @@ -65,7 +65,7 @@ type OverlayTriggerProps = RBOverlayTriggerProps & { onToggle?: (...args: unknown[]) => unknown; }; -export const OverlayTrigger = ({ +export function OverlayTrigger({ children, defaultShow, delay, @@ -75,17 +75,19 @@ export const OverlayTrigger = ({ show, trigger, ...props -}: OverlayTriggerProps) => ( - - {children} - -); +}: OverlayTriggerProps) { + return ( + + {children} + + ); +} diff --git a/src/Pill/Pill.stories.tsx b/src/Pill/Pill.stories.tsx index 250dd9e5..305f7215 100644 --- a/src/Pill/Pill.stories.tsx +++ b/src/Pill/Pill.stories.tsx @@ -21,148 +21,160 @@ const handleClose = (id) => { action('handle close')(id); }; -export const Default = () => ( -
    -

    Test Pill

    +export function Default() { + return ( +
    +

    Test Pill

    + + Text + +

    Colors

    + + blue + + + orange + + + yellow + + + red + + + green + + + gray + + + silver + +
    + ); +} + +export function Statuses() { + return ( + + + Informational + + + Informational + + + Partially complete + + + Incomplete + + + Attention + + + Active + + + Inactive + + + ); +} + +export function WithContainer() { + return ( + + + 1-on-1 Interview + + + Online + + + $120 choice of dozens of digital gift cards + + + 1 hour + + + ); +} + +export function WithLeadingIcon() { + return ( Text -

    Colors

    - - blue - - - orange - - - yellow - - - red - - - green - - - gray - - - silver - -
    -); + ); +} -export const Statuses = () => ( - +export function WithClose() { + return ( - Informational - - - Informational - - - Partially complete - - - Incomplete - - - Attention - - - Active - - - Inactive + Text - -); + ); +} -export const WithContainer = () => ( - - - 1-on-1 Interview - - - Online - +export function WithLink() { + return ( - $120 choice of dozens of digital gift cards - - - 1 hour + Visit our site - -); - -export const WithLeadingIcon = () => ( - - Text - -); - -export const WithClose = () => ( - - Text - -); - -export const WithLink = () => ( - - Visit our site - -); + ); +} diff --git a/src/Pill/Pill.tsx b/src/Pill/Pill.tsx index cca9d234..3b3e866c 100644 --- a/src/Pill/Pill.tsx +++ b/src/Pill/Pill.tsx @@ -25,7 +25,7 @@ type PillProps = { onClose?: (...args: unknown[]) => unknown; }; -const Pill = ({ +function Pill({ children, color = 'blue', icon, @@ -33,9 +33,10 @@ const Pill = ({ onClose, text, ...props -}: PillProps) => ( - - { icon && ( - + {...props} + > + { icon && ( + )} - { children } - { text } - { onClose && ( + { children } + { text } + { onClose && ( )} - -); + + ); +} export default Pill; diff --git a/src/Pill/Pills.tsx b/src/Pill/Pills.tsx index 80ae41d9..a3028bb9 100644 --- a/src/Pill/Pills.tsx +++ b/src/Pill/Pills.tsx @@ -8,17 +8,19 @@ type PillsProps = { children?: React.ReactNode; }; -const Pills = ({ +function Pills({ children, className, ...props -}: PillsProps) => ( -
    - {children} -
    -); +}: PillsProps) { + return ( +
    + {children} +
    + ); +} export default Pills; diff --git a/src/Popover/Popover.stories.tsx b/src/Popover/Popover.stories.tsx index 6fac4501..aba6123c 100644 --- a/src/Popover/Popover.stories.tsx +++ b/src/Popover/Popover.stories.tsx @@ -19,39 +19,43 @@ export default { }, }; -export const Default = () => ( - - - This is the default Popover body. - - +export function Default() { + return ( + + + This is the default Popover body. + + )} - placement="auto" - trigger="click" - > - - -); + placement="auto" + trigger="click" + > + + + ); +} -export const Placement = () => ( - - - This is the default Popover body. - - +export function Placement() { + return ( + + + This is the default Popover body. + + )} - placement="bottom" - trigger="click" - > - - -); + placement="bottom" + trigger="click" + > + + + ); +} -export const CardPopover = () => { +export function CardPopover() { const [isOpen, setIsOpen] = useState(false); const handleOpen = () => { @@ -101,4 +105,4 @@ export const CardPopover = () => { ); -}; +} diff --git a/src/Popover/PopoverBody.tsx b/src/Popover/PopoverBody.tsx index 7ac7db2d..04a7d1ed 100644 --- a/src/Popover/PopoverBody.tsx +++ b/src/Popover/PopoverBody.tsx @@ -10,18 +10,20 @@ type PopoverBodyProps = { // eslint-disable-next-line @typescript-eslint/no-explicit-any } & any; -const PopoverBody = ({ +function PopoverBody({ children, className, ...props -}: PopoverBodyProps) => ( - - { children } - +}: PopoverBodyProps) { + return ( + + { children } + ); +} PopoverBody.defaultProps = { className: undefined, diff --git a/src/Popover/PopoverCard.tsx b/src/Popover/PopoverCard.tsx index 21897035..1b46e5bb 100644 --- a/src/Popover/PopoverCard.tsx +++ b/src/Popover/PopoverCard.tsx @@ -19,11 +19,11 @@ interface PopoverCardProps { size?: 'sm' | 'md'; } -const PopoverCard = ({ +function PopoverCard({ children, className, size = 'sm', -}: PopoverCardProps) => { +}: PopoverCardProps) { const widthClass = handleWidth(size); return ( @@ -31,6 +31,6 @@ const PopoverCard = ({ {children} ); -}; +} export default PopoverCard; diff --git a/src/Popper/Popper.stories.jsx b/src/Popper/Popper.stories.jsx index e53bc34e..4b3e506d 100644 --- a/src/Popper/Popper.stories.jsx +++ b/src/Popper/Popper.stories.jsx @@ -13,14 +13,18 @@ export default { }, }; -export const Default = () => ( - -

    reference element

    -     -); +export function Default() { + return ( + +

    reference element

    +     + ); +} -export const Dark = () => ( - -

    reference element

    -     -); +export function Dark() { + return ( + +

    reference element

    +     + ); +} diff --git a/src/Popper/index.js b/src/Popper/index.js index 30e5f42e..f1809e1c 100644 --- a/src/Popper/index.js +++ b/src/Popper/index.js @@ -1 +1,3 @@ -export { default } from './Popper'; +import Popper from './Popper'; + +export default Popper; diff --git a/src/ProfileCell/ProfileCell.stories.tsx b/src/ProfileCell/ProfileCell.stories.tsx index 9c404138..6e783708 100644 --- a/src/ProfileCell/ProfileCell.stories.tsx +++ b/src/ProfileCell/ProfileCell.stories.tsx @@ -39,59 +39,69 @@ const userWithImage = { imageUrl: 'https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg', }; -export const Small = () => ( - -); - -export const Large = () => ( - -); +export function Small() { + return ( + + ); +} -export const WithImage = () => ( - -); +export function Large() { + return ( + + ); +} -export const WithTrailingIcon = () => ( - -); +export function WithImage() { + return ( + + ); +} -export const Loading = () => ( - <> +export function WithTrailingIcon() { + return ( -
    - - -); + ); +} + +export function Loading() { + return ( + <> + +
    + + + ); +} diff --git a/src/ProfileCell/ProfileCell.tsx b/src/ProfileCell/ProfileCell.tsx index 751fddf6..1ebc76d1 100644 --- a/src/ProfileCell/ProfileCell.tsx +++ b/src/ProfileCell/ProfileCell.tsx @@ -35,43 +35,39 @@ function ProfileCell(props: ProfileCellProps) { maxWidth: props.maxWidth ? props.maxWidth : 'none', }; - return ( - <> - {props.isLoading ? ( - - ) : ( -
    + ) : ( +
    +
    + +
    +
    +
    +
    + {props.user.name} +
    + {props.trailingIcon && ( + )} - > -
    - -
    -
    -
    -
    - {props.user.name} -
    - {props.trailingIcon && ( - - )} -
    -
    - {props.subtitle || ' '} -
    -
    - )} - +
    + {props.subtitle || ' '} +
    +
    +
    ); } diff --git a/src/ProfileCell/ProfileCellSkeleton.tsx b/src/ProfileCell/ProfileCellSkeleton.tsx index 7274e9d4..7d14ba0c 100644 --- a/src/ProfileCell/ProfileCellSkeleton.tsx +++ b/src/ProfileCell/ProfileCellSkeleton.tsx @@ -8,18 +8,20 @@ type ProfileCellSkeletonProps = { maxWidth?: string; }; -const ProfileCellSkeleton = ({ +function ProfileCellSkeleton({ maxWidth = '100%', ...props -}: ProfileCellSkeletonProps) => ( -
    -
    - +}: ProfileCellSkeletonProps) { + return ( +
    +
    + +
    +
    + +
    -
    - -
    -
    -); + ); +} export default ProfileCellSkeleton; diff --git a/src/ProfileCell/index.ts b/src/ProfileCell/index.ts index 63cb5794..69a1a116 100644 --- a/src/ProfileCell/index.ts +++ b/src/ProfileCell/index.ts @@ -1,7 +1,8 @@ import ProfileCellSkeleton from './ProfileCellSkeleton'; +import ProfileCell from './ProfileCell'; export { ProfileCellSkeleton, }; -export { default } from './ProfileCell'; +export default ProfileCell; diff --git a/src/RadioButton/RadioButton.stories.tsx b/src/RadioButton/RadioButton.stories.tsx index 86d57f6f..487cb581 100644 --- a/src/RadioButton/RadioButton.stories.tsx +++ b/src/RadioButton/RadioButton.stories.tsx @@ -14,7 +14,7 @@ export default { }, }; -export const Default = () => { +export function Default() { const [isChecked, setIsChecked] = useState(false); const handleChange = () => { @@ -30,9 +30,9 @@ export const Default = () => { onChange={handleChange} /> ); -}; +} -export const WithDescription = () => { +export function WithDescription() { const [isChecked, setIsChecked] = useState(false); const handleChange = () => { @@ -52,4 +52,4 @@ export const WithDescription = () => { This is where the description goes ); -}; +} diff --git a/src/RadioButton/index.ts b/src/RadioButton/index.ts index b97ac7c5..635f25f1 100644 --- a/src/RadioButton/index.ts +++ b/src/RadioButton/index.ts @@ -1 +1,3 @@ -export { default } from './RadioButton'; +import RadioButton from './RadioButton'; + +export default RadioButton; diff --git a/src/RadioButtonGroup/RadioButtonGroup.stories.tsx b/src/RadioButtonGroup/RadioButtonGroup.stories.tsx index 9fc800bb..79b1433a 100644 --- a/src/RadioButtonGroup/RadioButtonGroup.stories.tsx +++ b/src/RadioButtonGroup/RadioButtonGroup.stories.tsx @@ -17,7 +17,7 @@ export default { }; /* eslint-disable react/prop-types */ -const RadioButtonGroupComponent = ({ +function RadioButtonGroupComponent({ bordered, children, defaultValue, @@ -29,7 +29,7 @@ const RadioButtonGroupComponent = ({ labelHelperText, orientation, labelHtmlFor, -}) => { +}) { const [value, setValue] = useState(defaultValue); return ( @@ -52,10 +52,10 @@ const RadioButtonGroupComponent = ({ ); -}; +} /* eslint-enable react/prop-types */ -export const Default = () => { +export function Default() { const orientation = ORIENTATIONS.COLUMN; const bordered = false; @@ -94,211 +94,221 @@ export const Default = () => { /> ); -}; +} -export const Row = () => ( - - - - - -); - -export const BorderedRow = () => ( - - - - - -); - -export const DescriptionColumn = () => ( - - - This is where the description goes - - - This is where the description goes - - - This is where the description goes - - -); + + + + + ); +} -export const DescriptionRow = () => ( - - - This is where the description goes - - - This is where the description goes - - - This is where the description goes - - -); + + + + + ); +} -export const BorderedColumnFullWidth = () => ( - - - This is where the description goes - - + This is where the description goes + + + This is where the description goes + + + This is where the description goes + + + ); +} + +export function DescriptionRow() { + return ( + - This is where the description goes - - + This is where the description goes + + + This is where the description goes + + + This is where the description goes + + + ); +} + +export function BorderedColumnFullWidth() { + return ( + - This is where the description goes - - -); + + This is where the description goes + + + This is where the description goes + + + This is where the description goes + + + ); +} diff --git a/src/RadioButtonGroup/index.ts b/src/RadioButtonGroup/index.ts index d7294d66..b3b216b5 100644 --- a/src/RadioButtonGroup/index.ts +++ b/src/RadioButtonGroup/index.ts @@ -1 +1,3 @@ -export { default } from './RadioButtonGroup'; +import RadioButtonGroup from './RadioButtonGroup'; + +export default RadioButtonGroup; diff --git a/src/RichTextEditor/RichTextEditor.stories.tsx b/src/RichTextEditor/RichTextEditor.stories.tsx index b8399f03..407ef637 100644 --- a/src/RichTextEditor/RichTextEditor.stories.tsx +++ b/src/RichTextEditor/RichTextEditor.stories.tsx @@ -16,54 +16,66 @@ export default { }, }; -export const Default = () => ( - null} - /> -); +export function Default() { + return ( + null} + /> + ); +} -export const ARIAAttributes = () => ( - null} - /> -); +export function ARIAAttributes() { + return ( + null} + /> + ); +} -export const AvailableActions = () => ( - null} - /> -); +export function AvailableActions() { + return ( + null} + /> + ); +} -export const CharacterLimit = () => ( - null} - /> -); +export function CharacterLimit() { + return ( + null} + /> + ); +} -export const OneLine = () => ( - null} - /> -); +export function OneLine() { + return ( + null} + /> + ); +} -export const Error = () => ( - null} - /> -); +export function Error() { + return ( + null} + /> + ); +} -export const SetContent = () => { +export function SetContent() { const ref = useRef(null); const handleClick = () => { @@ -80,4 +92,4 @@ export const SetContent = () => { /> ); -}; +} diff --git a/src/RichTextEditor/RichTextEditor.test.tsx b/src/RichTextEditor/RichTextEditor.test.tsx index 02795dc8..ee79bd26 100644 --- a/src/RichTextEditor/RichTextEditor.test.tsx +++ b/src/RichTextEditor/RichTextEditor.test.tsx @@ -13,13 +13,15 @@ describe('', () => { findAll: () => screen.findAllByRole('button'), }, }; - const Setup = (overrides: Omit = {}) => ( + function Setup(overrides: Omit = {}) { + return ( ); +} it('renders snapshot', async () => { const { asFragment } = render(); diff --git a/src/Select/AsyncCreatableSelect.jsx b/src/Select/AsyncCreatableSelect.jsx index 087a8ef9..00f65680 100644 --- a/src/Select/AsyncCreatableSelect.jsx +++ b/src/Select/AsyncCreatableSelect.jsx @@ -6,7 +6,7 @@ import zStack from 'src/Styles/zStack'; import { defaultStyles, defaultTheme, SELECT_SIZES } from './styles'; -const AsyncCreatableSelect = ({ +function AsyncCreatableSelect({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, @@ -32,31 +32,32 @@ const AsyncCreatableSelect = ({ onChange, ...props -}) => ( - ( modal ? @@ -64,13 +65,14 @@ const AsyncCreatableSelect = ({ base ), }} - theme={defaultTheme} - value={value} - onBlurResetsInput={false} - onChange={onChange} - onSelectResetsInput={false} - /> -); + theme={defaultTheme} + value={value} + onBlurResetsInput={false} + onChange={onChange} + onSelectResetsInput={false} + /> + ); +} AsyncCreatableSelect.propTypes = { 'aria-label': propTypes.string, diff --git a/src/Select/AsyncCreatableSelect.stories.jsx b/src/Select/AsyncCreatableSelect.stories.jsx index f495dbc3..cad0c728 100644 --- a/src/Select/AsyncCreatableSelect.stories.jsx +++ b/src/Select/AsyncCreatableSelect.stories.jsx @@ -21,7 +21,7 @@ const options = [ const handleRequestClose = () => action('Close'); async function loadOptions(search) { - await new Promise((resolve) => setTimeout(resolve, 2000)); + await new Promise((resolve) => { setTimeout(resolve, 2000); }); if (!search || !search.length) { return options; @@ -30,7 +30,7 @@ async function loadOptions(search) { return options.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase())); } -export const Default = () => { +export function Default() { const handleChange = () => {}; const handleInputChange = () => {}; @@ -50,41 +50,43 @@ export const Default = () => { /> ); -}; +} -export const InModal = () => ( - - - - - label} - getOptionValue={({ value }) => value} - inputId="in-modal-creatable-select" - loadOptions={loadOptions} - modal - noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'} - /> - - - - - - + + + + label} + getOptionValue={({ value }) => value} + inputId="in-modal-creatable-select" + loadOptions={loadOptions} + modal + noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'} + /> + + + + + + ); +} diff --git a/src/Select/AsyncSelect.jsx b/src/Select/AsyncSelect.jsx index db53265c..5317c70b 100644 --- a/src/Select/AsyncSelect.jsx +++ b/src/Select/AsyncSelect.jsx @@ -6,7 +6,7 @@ import zStack from 'src/Styles/zStack'; import { defaultStyles, defaultTheme, SELECT_SIZES } from './styles'; -const AsyncSelect = ({ +function AsyncSelect({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, cacheOptions, @@ -33,33 +33,34 @@ const AsyncSelect = ({ onChange, ...props -}) => ( - ( modal ? @@ -67,13 +68,14 @@ const AsyncSelect = ({ base ), }} - theme={defaultTheme} - value={value} - onBlurResetsInput={false} - onChange={onChange} - onSelectResetsInput={false} - /> -); + theme={defaultTheme} + value={value} + onBlurResetsInput={false} + onChange={onChange} + onSelectResetsInput={false} + /> + ); +} AsyncSelect.propTypes = { 'aria-label': propTypes.string, diff --git a/src/Select/AsyncSelect.stories.jsx b/src/Select/AsyncSelect.stories.jsx index a7c4f801..760a66ce 100644 --- a/src/Select/AsyncSelect.stories.jsx +++ b/src/Select/AsyncSelect.stories.jsx @@ -23,7 +23,7 @@ const options = [ ]; async function loadOptions(search) { - await new Promise((resolve) => setTimeout(resolve, 2000)); + await new Promise((resolve) => { setTimeout(resolve, 2000); }); if (!search || !search.length) { return options; @@ -32,22 +32,24 @@ async function loadOptions(search) { return options.filter(({ label }) => label.toLowerCase().includes(search.toLowerCase())); } -export const Default = () => ( - - label} - getOptionValue={({ value }) => value} - inputId="default-async-select" - loadOptions={loadOptions} - noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'} - /> - -); +export function Default() { + return ( + + label} + getOptionValue={({ value }) => value} + inputId="default-async-select" + loadOptions={loadOptions} + noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'} + /> + + ); +} -export const InModal = () => { +export function InModal() { const [isOpen, setIsOpen] = useState(false); const handleRequestClose = () => setIsOpen(false); @@ -91,24 +93,26 @@ export const InModal = () => { ); -}; +} -export const MultiSelect = () => ( - - label} - getOptionValue={({ value }) => value} - inputId="async-multiselect" - isClearable - isMulti - loadOptions={loadOptions} - noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'} - /> - -); +export function MultiSelect() { + return ( + + label} + getOptionValue={({ value }) => value} + inputId="async-multiselect" + isClearable + isMulti + loadOptions={loadOptions} + noOptionsMessage={({ inputValue }) => inputValue.length ? 'No results!' : 'Type to search...'} + /> + + ); +} diff --git a/src/Select/CreatableSelect.jsx b/src/Select/CreatableSelect.jsx index e71ca9da..fb181ab5 100644 --- a/src/Select/CreatableSelect.jsx +++ b/src/Select/CreatableSelect.jsx @@ -8,7 +8,7 @@ import { borderedMultiValueStyles, defaultTheme, defaultStyles, SELECT_SIZES, } from './styles'; -const CreatableSelect = ({ +function CreatableSelect({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, borderedMultiValue, @@ -31,27 +31,28 @@ const CreatableSelect = ({ value, onChange, ...props -}) => ( - ( @@ -60,11 +61,12 @@ const CreatableSelect = ({ base ), }} - theme={defaultTheme} - value={value} - onChange={onChange} - /> + theme={defaultTheme} + value={value} + onChange={onChange} + /> ); +} CreatableSelect.propTypes = { 'aria-label': PropTypes.string, diff --git a/src/Select/CreatableSelect.stories.jsx b/src/Select/CreatableSelect.stories.jsx index 387f423f..10029849 100644 --- a/src/Select/CreatableSelect.stories.jsx +++ b/src/Select/CreatableSelect.stories.jsx @@ -18,7 +18,7 @@ const options = [ { label: 'Blue', value: 3 }, ]; -export const Default = () => { +export function Default() { const handleChange = () => {}; const handleInputChange = () => {}; @@ -36,9 +36,9 @@ export const Default = () => { /> ); -}; +} -export const InModal = () => { +export function InModal() { const [isOpen, setIsOpen] = useState(false); const handleChange = () => {}; @@ -84,4 +84,4 @@ export const InModal = () => { ); -}; +} diff --git a/src/Select/OptionWithDescription.jsx b/src/Select/OptionWithDescription.jsx index d9d87432..93ba725d 100644 --- a/src/Select/OptionWithDescription.jsx +++ b/src/Select/OptionWithDescription.jsx @@ -12,24 +12,26 @@ import './OptionWithDescription.scss'; // See: https://react-select.com/components#replaceable-components /* eslint-disable react/prop-types */ -const OptionWithDescription = ({ hideDescription, ...props }) => ( - -
    - - {!hideDescription && ( +function OptionWithDescription({ hideDescription, ...props }) { + return ( + +
    + + {!hideDescription && (
    {props.data.description}
    )} -
    -     +
    +     ); +} /* eslint-enable react/prop-types */ export default OptionWithDescription; diff --git a/src/Select/SingleSelect.jsx b/src/Select/SingleSelect.jsx index 008b0d4e..8f7de5ae 100644 --- a/src/Select/SingleSelect.jsx +++ b/src/Select/SingleSelect.jsx @@ -9,7 +9,7 @@ import { borderedMultiValueStyles, defaultTheme, defaultStyles, SELECT_SIZES, } from './styles'; -const SingleSelect = ({ +function SingleSelect({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, borderedMultiValue, @@ -36,30 +36,31 @@ const SingleSelect = ({ value, onChange, ...props -}) => ( -