From d00335c79c4ee7a6fd35aee6acc8a25839eff34f Mon Sep 17 00:00:00 2001 From: Cassandra Date: Mon, 25 Nov 2024 15:35:29 +1100 Subject: [PATCH] docs: update stickersheets (#5299) * chore: delete old StickerSheet (breaks usages) * chore: move future StickerSheet to current * docs(StickerSheet): default to hug content, with option to stretch * docs(ClearButton): update stickersheet * docs(Button): update stickersheet * docs(IconButton): update stickersheet * docs(Menu): update stickersheet * docs(GuidanceBlock): update stickersheet * docs(Icon): update stickersheet * docs(EmptyState): fix stickersheet * docs(Tooltip/v1): fix stickersheet * chore(StickerSheet): update types and increase heading gap * chore(SB): clean up decorators * docs(LikertScaleLegacy): fix stickersheet * chore(Tooltip/v3): remove usage of StickerSheet type * docs(Avatar): fix stickersheet * docs(AvatarGroup): fix stickersheet * docs(Badge): fix stickersheet * docs(BrandMoment): fix stickersheet * docs(Brand): fix stickersheet * docs(ButtonGroup): fix stickersheet * docs(SplitButton): fix stickersheet * docs(Card): update stickersheet * docs(Checkbox): update stickersheet * docs(Collapsible): update stickersheet * docs(Calendar): update stickersheet * docs(DatePicker): update stickersheet * docs(DateRangePicker): update stickersheet * docs(Divider): update stickersheet * docs(FieldGroup): update stickersheet * docs(FieldMessage): update stickersheet * docs(FilterBar): update stickersheet * docs(Heading): update stickersheet * docs(Illustration): update stickersheet * docs(Input): update stickersheet * docs(Label): update stickersheet * docs(Loading): update stickersheet * docs(MultiSelect): update stickersheet * docs(Notification): update stickersheet * docs(Pagination): update stickersheet * docs(Popover): update stickersheet * docs(ProgressBar): update stickersheet * docs(Radio): update stickersheet * docs(RTE): update stickersheet * docs(SearchField): update stickersheet * docs(Select): update stickersheet * docs(Slider): update stickersheet * docs(Tag): update stickersheet * docs(Text): update stickersheet * docs(Tile): update stickersheet * docs(TimeField): update stickersheet * docs(TitleBlockZen): update stickersheet * docs(ToggleSwitch): update stickersheet * docs(LabelledMessage): update stickersheet * docs(Well): update stickersheet * docs(ErrorPage): update stickersheet * docs(Tailwind): convert template to table and fix stickersheets * docs(Button/v3): update stickersheet * docs(Loading): update stories using stickersheet * chore(plop): update stickersheet template * docs: fix ButtonGroup and update DatePicker locale stickersheet * docs(StickerSheet): add padding in chromatic * docs(StickerSheet): evenly space grid * docs(FilterBar): stretch stickersheets * docs: adjust stickersheet vertical alignment for some components * docs(GuidanceBlock): fix stickersheet width * docs(StickerSheet): reduce gap * docs(Popover): fix stickersheet * docs: fix TW table heading size --- .changeset/twelve-fans-notice.md | 2 + docs/.storybook/preview.tsx | 16 +- .../StickerSheet/StickerSheet.module.css | 22 +- docs/components/StickerSheet/StickerSheet.tsx | 131 ++-- .../StickerSheetBody/StickerSheetBody.tsx | 26 - .../components/StickerSheetBody/index.ts | 1 - .../StickerSheetCell.module.scss | 5 - .../StickerSheetCell/StickerSheetCell.tsx | 13 +- .../StickerSheetHeader.module.css | 0 .../StickerSheetHeader/StickerSheetHeader.tsx | 41 +- .../StickerSheetRow.module.css | 0 .../StickerSheetRow/StickerSheetRow.tsx | 53 +- .../StickerSheetTableHeading.module.scss | 18 - .../StickerSheetTableHeading.tsx | 28 - .../StickerSheetTableHeading/index.ts | 1 - docs/components/StickerSheet/types.ts | 9 +- .../StickerSheet/StickerSheet.module.css | 18 - .../_future/StickerSheet/StickerSheet.tsx | 101 --- .../StickerSheetCell/StickerSheetCell.tsx | 12 - .../components/StickerSheetCell/index.ts | 1 - .../StickerSheetHeader/StickerSheetHeader.tsx | 28 - .../components/StickerSheetHeader/index.ts | 1 - .../StickerSheetRow/StickerSheetRow.tsx | 37 -- .../components/StickerSheetRow/index.ts | 1 - docs/components/_future/StickerSheet/index.ts | 2 - docs/components/_future/StickerSheet/types.ts | 10 - .../_docs/Avatar.stickersheet.stories.tsx | 62 +- .../AvatarGroup.stickersheet.stories.tsx | 30 +- .../_docs/Badge.stickersheet.stories.tsx | 44 +- .../_docs/Brand.stickersheet.stories.tsx | 50 +- .../BrandMoment.stickersheet.stories.tsx | 74 +-- .../ButtonGroup.stickersheet.stories.tsx | 239 ++++--- .../CalendarPopover.stickersheet.stories.tsx | 8 +- .../CalendarRange.stickersheet.stories.tsx | 52 +- .../CalendarSingle.stickersheet.stories.tsx | 116 ++-- .../Card/_docs/Card.stickersheet.stories.tsx | 28 +- .../_docs/Checkbox.stickersheet.stories.tsx | 51 +- .../CheckboxField.stickersheet.stories.tsx | 65 +- .../CheckboxGroup.stickersheet.stories.tsx | 54 +- .../ClearButton.stickersheet.stories.tsx | 18 +- .../Collapsible.stickersheet.stories.tsx | 118 ++-- .../CollapsibleGroup.stickersheet.stories.tsx | 40 +- ...dviceCollapsible.stickersheets.stories.tsx | 14 +- .../_docs/DatePicker.stickersheet.stories.tsx | 273 ++++---- .../_docs/getLocale.stickersheet.stories.tsx | 20 +- .../DateRangePicker.stickersheet.stories.tsx | 54 +- .../_docs/Divider.stickersheet.stories.tsx | 23 +- .../_docs/EmptyState.stickersheet.stories.tsx | 9 +- .../_docs/ErrorPage.stickersheet.stories.tsx | 36 +- .../_docs/FieldGroup.stickersheet.stories.tsx | 13 +- .../FieldMessage.stickersheet.stories.tsx | 30 +- .../_docs/Filter.stickersheet.stories.tsx | 28 +- .../_docs/FilterBar.stickersheet.stories.tsx | 80 +-- .../filter-buttons.stickersheet.stories.tsx | 96 ++- .../FilterDatePicker.stickersheet.stories.tsx | 167 +++-- ...erDateRangePicker.stickersheet.stories.tsx | 238 ++++--- .../FilterSelect.stickersheet.stories.tsx | 488 +++++++------- .../GuidanceBlock.stickersheet.stories.tsx | 78 ++- .../_docs/Heading.stickersheet.stories.tsx | 212 +++---- .../Icon/_docs/Icon.stickersheet.stories.tsx | 32 +- ...omentCaptureIntro.stickersheet.stories.tsx | 16 +- .../_docs/Scene.stickersheet.stories.tsx | 324 ++++------ .../VideoPlayer.stickersheet.stories.tsx | 80 ++- .../_docs/Input.stickersheet.stories.tsx | 63 +- .../_docs/InputRange.stickersheet.stories.tsx | 41 +- .../InputSearch.stickersheet.stories.tsx | 281 ++++----- .../_docs/Label.stickersheet.stories.tsx | 163 +++-- .../LabelledMessage.stickersheet.stories.tsx | 8 +- ...LikertScaleLegacy.stickersheet.stories.tsx | 164 ++--- .../LoadingGraphic.stickersheet.stories.tsx | 38 +- .../_docs/LoadingGraphic.stories.tsx | 98 ++- .../LoadingHeading.stickersheet.stories.tsx | 32 +- .../_docs/LoadingHeading.stories.tsx | 20 +- .../LoadingParagraph.stickersheet.stories.tsx | 30 +- .../LoadingSpinner.stickersheet.stories.tsx | 28 +- .../MultiSelect.stickersheet.stories.tsx | 143 ++--- .../_docs/Checkbox.stickersheet.stories.tsx | 50 +- ...SelectOptionField.stickersheet.stories.tsx | 129 ++-- ...ultiSelectOptions.stickersheet.stories.tsx | 49 +- ...MultiSelectToggle.stickersheet.stories.tsx | 162 ++--- ...lobalNotification.stickersheet.stories.tsx | 29 +- ...nlineNotification.stickersheet.stories.tsx | 29 +- .../_docs/Pagination.stickersheet.stories.tsx | 134 ++-- .../DirectionalLink.stickersheet.stories.tsx | 44 +- .../PaginationLink.stickersheet.stories.tsx | 52 +- .../_docs/Popover.stickersheet.stories.tsx | 78 +-- .../ProgressBar.stickersheet.stories.tsx | 41 +- .../_docs/Radio.stickersheet.stories.tsx | 100 ++- .../_docs/RadioField.stickersheet.stories.tsx | 105 ++- .../_docs/RadioGroup.stickersheet.stories.tsx | 166 +++-- ...leRichTextContent.stickersheet.stories.tsx | 100 ++- .../ToggleIconButton.stickersheet.stories.tsx | 91 +-- .../SearchField.stickersheet.stories.tsx | 63 +- .../_docs/Select.stickersheet.stories.tsx | 255 ++++---- .../_docs/Slider.stickersheet.stories.tsx | 181 +++--- .../SplitButton.stickersheet.stories.tsx | 130 ++-- .../Tag/_docs/Tag.stickersheet.stories.tsx | 106 ++-- .../Text/_docs/Text.stickersheet.stories.tsx | 90 ++- .../_docs/TextArea.stickersheet.stories.tsx | 59 +- .../TextAreaField.stickersheet.stories.tsx | 160 +++-- .../_docs/TextField.stickersheet.stories.tsx | 97 ++- .../InformationTile.stickersheet.stories.tsx | 36 +- .../MultiActionTile.stickersheet.stories.tsx | 36 +- .../_docs/TileGrid.stickersheet.stories.tsx | 190 +++--- .../GenericTile.stickersheet.stories.tsx | 36 +- .../_docs/TimeField.stickersheet.stories.tsx | 157 +++-- .../_docs/TitleBlockZen.stories.tsx | 148 +++-- .../ToggleSwitch.stickersheet.stories.tsx | 51 +- ...ToggleSwitchField.stickersheet.stories.tsx | 97 ++- .../Well/_docs/Well.stickersheet.stories.tsx | 72 +-- .../_docs/Button.stickersheet.stories.tsx | 253 ++++---- .../_docs/IconButton.stickersheet.stories.tsx | 55 +- .../v3/_docs/Button.stickersheet.stories.tsx | 300 +++++---- .../v1/_docs/Menu.stickersheet.stories.tsx | 69 +- .../Icon/_docs/Icon.docs.stories.tsx | 40 +- .../Icon/_docs/Icon.stickersheet.stories.tsx | 135 ++-- .../_docs/Select.stickersheet.stories.tsx | 596 +++++++++--------- .../RemovableTag.stickersheet.stories.tsx | 88 ++- .../Tag/_docs/Tag.stickersheet.stories.tsx | 31 +- .../v1/_docs/Tooltip.stickersheet.stories.tsx | 204 +++--- .../v3/_docs/Tooltip.stickersheet.stories.tsx | 7 +- .../backgrounds/background-color.stories.tsx | 5 +- .../pages/borders/border-color.stories.tsx | 5 +- .../pages/borders/border-radius.stories.tsx | 5 +- .../pages/borders/border-spacing.stories.tsx | 5 +- .../pages/borders/border-width.stories.tsx | 5 +- .../_docs/pages/effects/shadow.stories.tsx | 3 +- .../pages/modifiers/pseudo-states.stories.tsx | 14 +- .../_docs/pages/spacing/margin.stories.tsx | 3 +- .../_docs/pages/spacing/padding.stories.tsx | 3 +- .../pages/typography/font-family.stories.tsx | 5 +- .../pages/typography/font-size.stories.tsx | 3 +- .../pages/typography/font-weight.stories.tsx | 5 +- .../pages/typography/line-height.stories.tsx | 5 +- .../typography/max-text-width.stories.tsx | 5 +- .../pages/typography/text-color.stories.tsx | 3 +- .../TailwindStoryTemplate.tsx | 78 ++- ...mponentName}}.stickersheet.stories.tsx.hbs | 52 +- 138 files changed, 4720 insertions(+), 5631 deletions(-) create mode 100644 .changeset/twelve-fans-notice.md delete mode 100644 docs/components/StickerSheet/components/StickerSheetBody/StickerSheetBody.tsx delete mode 100644 docs/components/StickerSheet/components/StickerSheetBody/index.ts delete mode 100644 docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.module.scss rename docs/components/{_future => }/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.module.css (100%) rename docs/components/{_future => }/StickerSheet/components/StickerSheetRow/StickerSheetRow.module.css (100%) delete mode 100644 docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.module.scss delete mode 100644 docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.tsx delete mode 100644 docs/components/StickerSheet/components/StickerSheetTableHeading/index.ts delete mode 100644 docs/components/_future/StickerSheet/StickerSheet.module.css delete mode 100644 docs/components/_future/StickerSheet/StickerSheet.tsx delete mode 100644 docs/components/_future/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx delete mode 100644 docs/components/_future/StickerSheet/components/StickerSheetCell/index.ts delete mode 100644 docs/components/_future/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx delete mode 100644 docs/components/_future/StickerSheet/components/StickerSheetHeader/index.ts delete mode 100644 docs/components/_future/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx delete mode 100644 docs/components/_future/StickerSheet/components/StickerSheetRow/index.ts delete mode 100644 docs/components/_future/StickerSheet/index.ts delete mode 100644 docs/components/_future/StickerSheet/types.ts diff --git a/.changeset/twelve-fans-notice.md b/.changeset/twelve-fans-notice.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/twelve-fans-notice.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/docs/.storybook/preview.tsx b/docs/.storybook/preview.tsx index 6192eae560b..3035470eada 100644 --- a/docs/.storybook/preview.tsx +++ b/docs/.storybook/preview.tsx @@ -4,8 +4,7 @@ import "./preview.css" import React, { useEffect } from "react" import { decorators as bgDecorators } from "@storybook/addon-backgrounds/preview" -import { Preview } from "@storybook/react" -import isChromatic from "chromatic" +import { Decorator, Preview } from "@storybook/react" import { KaizenProvider } from "~components/KaizenProvider" import { I18nProvider } from "~components/__react-aria-components__" import { ReversedColors } from "~components/__utilities__/v3" @@ -14,7 +13,6 @@ import { backgrounds } from "../utils/backgrounds" import { globalA11yRules } from "../utils/global-a11y-rules" const [, withBackground] = bgDecorators -const IS_CHROMATIC = isChromatic() const globalTypes: Preview["globalTypes"] = { textDirection: { @@ -28,7 +26,7 @@ const globalTypes: Preview["globalTypes"] = { }, } -const RACDecorator = (Story, context): JSX.Element => { +const RACDecorator: Decorator = (Story, context) => { const dir = context.parameters.textDirection ?? context.globals.textDirection useEffect(() => { @@ -43,7 +41,7 @@ const RACDecorator = (Story, context): JSX.Element => { ) } -const KaizenProviderDecorator = (Story): JSX.Element => ( +const KaizenProviderDecorator: Decorator = Story => ( @@ -52,14 +50,6 @@ const KaizenProviderDecorator = (Story): JSX.Element => ( const decorators: Preview["decorators"] = [ RACDecorator, KaizenProviderDecorator, - (Story, context) => - (context.args.isReversed || context.args.reversed) && !IS_CHROMATIC ? ( -
- -
- ) : ( - - ), // reverseColor parameter wraps story in ReversedColors context and sets default background to Purple 700 // @ts-ignore (Story, context) => { diff --git a/docs/components/StickerSheet/StickerSheet.module.css b/docs/components/StickerSheet/StickerSheet.module.css index 328158214d8..c6ebc4b2e08 100644 --- a/docs/components/StickerSheet/StickerSheet.module.css +++ b/docs/components/StickerSheet/StickerSheet.module.css @@ -1,11 +1,23 @@ .stickerSheetSectionHeading { - margin-bottom: var(--spacing-12); + margin-bottom: var(--spacing-20); - .stickerSheet + .stickerSheet & { - margin-top: var(--spacing-lg); + .stickerSheetContainer + .stickerSheetContainer & { + margin-top: var(--spacing-40); } } -.stickerSheetTable { - margin-left: calc(-1 * var(--spacing-12)); +.stickerSheet { + max-width: fit-content; + display: grid; + gap: var(--spacing-24); +} + +.stretch { + max-width: unset; +} + +.stickerSheetHeaders { + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / -1; } diff --git a/docs/components/StickerSheet/StickerSheet.tsx b/docs/components/StickerSheet/StickerSheet.tsx index 03bfc5311fe..17b12259547 100644 --- a/docs/components/StickerSheet/StickerSheet.tsx +++ b/docs/components/StickerSheet/StickerSheet.tsx @@ -1,70 +1,115 @@ -import React, { TableHTMLAttributes } from "react" +import React, { HTMLAttributes } from "react" +// eslint-disable-next-line import/no-extraneous-dependencies +import isChromatic from "chromatic" import classnames from "classnames" import { Heading } from "~components/Heading" -import { - StickerSheetBody, - StickerSheetBodyProps, -} from "./components/StickerSheetBody" import { StickerSheetCell } from "./components/StickerSheetCell" +import { StickerSheetHeader } from "./components/StickerSheetHeader" import { - StickerSheetHeader, - StickerSheetHeaderProps, -} from "./components/StickerSheetHeader" -import { StickerSheetRow } from "./components/StickerSheetRow" + StickerSheetRow, + StickerSheetRowProps, +} from "./components/StickerSheetRow" import styles from "./StickerSheet.module.css" -type ReversibleSubcomponents = StickerSheetBodyProps | StickerSheetHeaderProps +const IS_CHROMATIC = isChromatic() + +const countMaxColumns = (children: React.ReactNode): number => + React.Children.toArray(children).reduce((acc, child) => { + if (React.isValidElement(child) && child.type === StickerSheetRow) { + return Math.max(acc, React.Children.count(child.props.children)) + } + return acc + }, 0) + +type ReversibleSubcomponents = StickerSheetRowProps const isReversibleSubcomponent = ( child: React.ReactNode ): child is React.ReactElement => React.isValidElement(child) && - (child.type === StickerSheetHeader || child.type === StickerSheetBody) + child.type === StickerSheetRow export type StickerSheetProps = { children: React.ReactNode - heading?: string + title?: string + headers?: string[] + layout?: "fit-content" | "stretch" isReversed?: boolean -} & TableHTMLAttributes +} & Omit, "layout"> export const StickerSheet = ({ children, - heading, + title, + headers, + layout = "fit-content", isReversed = false, className, + style, ...restProps -}: StickerSheetProps): JSX.Element => ( -
- {heading && ( - - {heading} - - )} +}: StickerSheetProps): JSX.Element => { + const hasVerticalHeaders = React.Children.toArray(children).some( + child => + React.isValidElement(child) && + child.type === StickerSheetRow && + child.props.header !== undefined + ) - - {React.Children.map(children, child => { - if (isReversibleSubcomponent(child)) { - return React.cloneElement(child, { - ...child.props, - isReversed, - }) - } - return child - })} -
-
-) + {title && ( + + {title} + + )} + +
+ {headers && ( +
+ {hasVerticalHeaders &&
} + {headers.map(heading => ( + + {heading} + + ))} +
+ )} + {React.Children.map(children, child => { + if (isReversibleSubcomponent(child)) { + return React.cloneElement(child, { + isReversed, + }) + } + return child + })} +
+
+ ) +} -StickerSheet.Header = StickerSheetHeader -StickerSheet.Body = StickerSheetBody StickerSheet.Row = StickerSheetRow StickerSheet.Cell = StickerSheetCell diff --git a/docs/components/StickerSheet/components/StickerSheetBody/StickerSheetBody.tsx b/docs/components/StickerSheet/components/StickerSheetBody/StickerSheetBody.tsx deleted file mode 100644 index 2967dc62ba6..00000000000 --- a/docs/components/StickerSheet/components/StickerSheetBody/StickerSheetBody.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { HTMLAttributes } from "react" -import { StickerSheetRowProps } from "../StickerSheetRow" - -export type StickerSheetBodyProps = { - children: - | React.ReactElement - | Array> - isReversed?: boolean -} & Omit, "children"> - -export const StickerSheetBody = ({ - children, - isReversed = false, - ...restProps -}: StickerSheetBodyProps): JSX.Element => ( - - {React.Children.map(children, child => - React.cloneElement(child, { - isReversed, - ...child.props, - }) - )} - -) - -StickerSheetBody.displayName = "StickerSheet.Body" diff --git a/docs/components/StickerSheet/components/StickerSheetBody/index.ts b/docs/components/StickerSheet/components/StickerSheetBody/index.ts deleted file mode 100644 index 7eb350e61a9..00000000000 --- a/docs/components/StickerSheet/components/StickerSheetBody/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./StickerSheetBody" diff --git a/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.module.scss b/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.module.scss deleted file mode 100644 index 359a82e3ce5..00000000000 --- a/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "~@kaizen/design-tokens/sass/spacing"; - -.stickerSheetCell { - padding: $spacing-sm; -} diff --git a/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx b/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx index 67e6da469d5..789952d1629 100644 --- a/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx +++ b/docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx @@ -1,19 +1,12 @@ -import React, { TdHTMLAttributes } from "react" -import classnames from "classnames" -import styles from "./StickerSheetCell.module.scss" +import React, { HTMLAttributes } from "react" export type StickerSheetCellProps = { children: React.ReactNode -} & TdHTMLAttributes +} & HTMLAttributes export const StickerSheetCell = ({ children, - className, ...restProps -}: StickerSheetCellProps): JSX.Element => ( - - {children} - -) +}: StickerSheetCellProps): JSX.Element =>
{children}
StickerSheetCell.displayName = "StickerSheet.Cell" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.module.css b/docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.module.css similarity index 100% rename from docs/components/_future/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.module.css rename to docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.module.css diff --git a/docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx b/docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx index 80611cd9869..366b9844a2b 100644 --- a/docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx +++ b/docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx @@ -1,37 +1,28 @@ import React, { HTMLAttributes } from "react" -import { StickerSheetTableHeading } from "../StickerSheetTableHeading" +import classnames from "classnames" +import styles from "./StickerSheetHeader.module.css" export type StickerSheetHeaderProps = { - headings: string[] - headingsWidth?: number | string + children: React.ReactNode isReversed?: boolean - hasVerticalHeadings?: boolean - verticalHeadingsWidth?: number | string -} & HTMLAttributes +} & HTMLAttributes export const StickerSheetHeader = ({ - headings, - headingsWidth, + children, isReversed = false, - hasVerticalHeadings = false, - verticalHeadingsWidth = "7rem", + className, ...restProps }: StickerSheetHeaderProps): JSX.Element => ( - - - {hasVerticalHeadings && } - {headings.map(heading => ( - - {heading} - - ))} - - +
+ {children} +
) StickerSheetHeader.displayName = "StickerSheet.Header" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetRow/StickerSheetRow.module.css b/docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.module.css similarity index 100% rename from docs/components/_future/StickerSheet/components/StickerSheetRow/StickerSheetRow.module.css rename to docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.module.css diff --git a/docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx b/docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx index 36b1d4a0609..244c6b075ef 100644 --- a/docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx +++ b/docs/components/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx @@ -1,46 +1,37 @@ import React, { HTMLAttributes } from "react" +import classnames from "classnames" import { StickerSheetCell } from "../StickerSheetCell" -import { StickerSheetTableHeading } from "../StickerSheetTableHeading" +import { StickerSheetHeader } from "../StickerSheetHeader" +import styles from "./StickerSheetRow.module.css" export type StickerSheetRowProps = { children: React.ReactNode - rowTitle?: string - rowTitleWidth?: number | string + header?: string isReversed?: boolean -} & HTMLAttributes +} & HTMLAttributes export const StickerSheetRow = ({ children, - rowTitle, - rowTitleWidth, + header, isReversed = false, dir, + className, ...restProps -}: StickerSheetRowProps): JSX.Element => { - const headingPaddingX = "1.5rem" // $spacing-sm * 2 - const rowTitleWidthString = - typeof rowTitleWidth === "number" ? `${rowTitleWidth}px` : rowTitleWidth +}: StickerSheetRowProps): JSX.Element => ( +
+ {header && ( + + {header} + + )} + {React.Children.map(children, child => { + if (React.isValidElement(child) && child.type === StickerSheetCell) { + return child + } - return ( - - {rowTitle && ( - - {rowTitle} - - )} - {React.Children.map(children, child => { - if (React.isValidElement(child) && child.type === StickerSheetCell) { - return child - } - - return {child} - })} - - ) -} + return {child} + })} +
+) StickerSheetRow.displayName = "StickerSheet.Row" diff --git a/docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.module.scss b/docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.module.scss deleted file mode 100644 index 002b5807649..00000000000 --- a/docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -@import "~@kaizen/design-tokens/sass/color"; -@import "~@kaizen/design-tokens/sass/spacing"; -@import "~@kaizen/design-tokens/sass/typography"; - -.stickerSheetTableHeading { - padding: $spacing-sm; - text-align: start; - font-family: $typography-heading-5-font-family; - font-weight: $typography-heading-5-font-weight; - font-size: $typography-heading-5-font-size; - line-height: $typography-heading-5-line-height; - letter-spacing: $typography-heading-5-letter-spacing; - color: $color-purple-800; - - &.isReversed { - color: $color-white; - } -} diff --git a/docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.tsx b/docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.tsx deleted file mode 100644 index ca5148114c4..00000000000 --- a/docs/components/StickerSheet/components/StickerSheetTableHeading/StickerSheetTableHeading.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { ThHTMLAttributes } from "react" -import classnames from "classnames" -import styles from "./StickerSheetTableHeading.module.scss" - -export type StickerSheetTableHeadingProps = { - children: React.ReactNode - isReversed?: boolean -} & ThHTMLAttributes - -export const StickerSheetTableHeading = ({ - children, - isReversed = false, - className, - ...restProps -}: StickerSheetTableHeadingProps): JSX.Element => ( - - {children} - -) - -StickerSheetTableHeading.displayName = "StickerSheetTableHeading" diff --git a/docs/components/StickerSheet/components/StickerSheetTableHeading/index.ts b/docs/components/StickerSheet/components/StickerSheetTableHeading/index.ts deleted file mode 100644 index f0caa6553e8..00000000000 --- a/docs/components/StickerSheet/components/StickerSheetTableHeading/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./StickerSheetTableHeading" diff --git a/docs/components/StickerSheet/types.ts b/docs/components/StickerSheet/types.ts index 73d69f41f3b..46b965d11c2 100644 --- a/docs/components/StickerSheet/types.ts +++ b/docs/components/StickerSheet/types.ts @@ -1,10 +1,9 @@ // eslint-disable-next-line import/no-extraneous-dependencies import { StoryObj } from "@storybook/react" -import type { ColorSchema } from "~components/LikertScaleLegacy" -export type StickerSheetArgs = { +export type StickerSheetArgs> = { isReversed?: boolean - colorSchema?: ColorSchema -} +} & T -export type StickerSheetStory = StoryObj +export type StickerSheetStory = object> = + StoryObj> diff --git a/docs/components/_future/StickerSheet/StickerSheet.module.css b/docs/components/_future/StickerSheet/StickerSheet.module.css deleted file mode 100644 index 19cccdbafe6..00000000000 --- a/docs/components/_future/StickerSheet/StickerSheet.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.stickerSheetSectionHeading { - margin-bottom: var(--spacing-12); - - .stickerSheetContainer + .stickerSheetContainer & { - margin-top: var(--spacing-40); - } -} - -.stickerSheet { - display: grid; - gap: var(--spacing-32); -} - -.stickerSheetHeaders { - display: grid; - grid-template-columns: subgrid; - grid-column: 1 / -1; -} diff --git a/docs/components/_future/StickerSheet/StickerSheet.tsx b/docs/components/_future/StickerSheet/StickerSheet.tsx deleted file mode 100644 index 9c2c0458fc0..00000000000 --- a/docs/components/_future/StickerSheet/StickerSheet.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import { Heading } from "~components/Heading" -import { StickerSheetCell } from "./components/StickerSheetCell" -import { StickerSheetHeader } from "./components/StickerSheetHeader" -import { - StickerSheetRow, - StickerSheetRowProps, -} from "./components/StickerSheetRow" -import styles from "./StickerSheet.module.css" - -const countMaxColumns = (children: React.ReactNode): number => - React.Children.toArray(children).reduce((acc, child) => { - if (React.isValidElement(child) && child.type === StickerSheetRow) { - return Math.max(acc, React.Children.count(child.props.children)) - } - return acc - }, 0) - -type ReversibleSubcomponents = StickerSheetRowProps - -const isReversibleSubcomponent = ( - child: React.ReactNode -): child is React.ReactElement => - React.isValidElement(child) && - child.type === StickerSheetRow - -export type StickerSheetProps = { - children: React.ReactNode - title?: string - headers?: string[] - isReversed?: boolean -} & HTMLAttributes - -export const StickerSheet = ({ - children, - title, - headers, - isReversed = false, - className, - style, - ...restProps -}: StickerSheetProps): JSX.Element => { - const hasVerticalHeaders = React.Children.toArray(children).some( - child => - React.isValidElement(child) && - child.type === StickerSheetRow && - child.props.header !== undefined - ) - - const colCount = headers?.length ?? countMaxColumns(children) - - const gridTemplateColumns = hasVerticalHeaders - ? `fit-content(100%) repeat(${colCount}, 1fr)` - : `repeat(${colCount}, 1fr)` - - return ( -
- {title && ( - - {title} - - )} - -
- {headers && ( -
- {hasVerticalHeaders &&
} - {headers.map(heading => ( - - {heading} - - ))} -
- )} - {React.Children.map(children, child => { - if (isReversibleSubcomponent(child)) { - return React.cloneElement(child, { - isReversed, - }) - } - return child - })} -
-
- ) -} - -StickerSheet.Row = StickerSheetRow -StickerSheet.Cell = StickerSheetCell - -StickerSheet.displayName = "StickerSheet" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx b/docs/components/_future/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx deleted file mode 100644 index 789952d1629..00000000000 --- a/docs/components/_future/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React, { HTMLAttributes } from "react" - -export type StickerSheetCellProps = { - children: React.ReactNode -} & HTMLAttributes - -export const StickerSheetCell = ({ - children, - ...restProps -}: StickerSheetCellProps): JSX.Element =>
{children}
- -StickerSheetCell.displayName = "StickerSheet.Cell" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetCell/index.ts b/docs/components/_future/StickerSheet/components/StickerSheetCell/index.ts deleted file mode 100644 index 251adeb9ad0..00000000000 --- a/docs/components/_future/StickerSheet/components/StickerSheetCell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./StickerSheetCell" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx b/docs/components/_future/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx deleted file mode 100644 index 366b9844a2b..00000000000 --- a/docs/components/_future/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import styles from "./StickerSheetHeader.module.css" - -export type StickerSheetHeaderProps = { - children: React.ReactNode - isReversed?: boolean -} & HTMLAttributes - -export const StickerSheetHeader = ({ - children, - isReversed = false, - className, - ...restProps -}: StickerSheetHeaderProps): JSX.Element => ( -
- {children} -
-) - -StickerSheetHeader.displayName = "StickerSheet.Header" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetHeader/index.ts b/docs/components/_future/StickerSheet/components/StickerSheetHeader/index.ts deleted file mode 100644 index 52937b0a219..00000000000 --- a/docs/components/_future/StickerSheet/components/StickerSheetHeader/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./StickerSheetHeader" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx b/docs/components/_future/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx deleted file mode 100644 index 244c6b075ef..00000000000 --- a/docs/components/_future/StickerSheet/components/StickerSheetRow/StickerSheetRow.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React, { HTMLAttributes } from "react" -import classnames from "classnames" -import { StickerSheetCell } from "../StickerSheetCell" -import { StickerSheetHeader } from "../StickerSheetHeader" -import styles from "./StickerSheetRow.module.css" - -export type StickerSheetRowProps = { - children: React.ReactNode - header?: string - isReversed?: boolean -} & HTMLAttributes - -export const StickerSheetRow = ({ - children, - header, - isReversed = false, - dir, - className, - ...restProps -}: StickerSheetRowProps): JSX.Element => ( -
- {header && ( - - {header} - - )} - {React.Children.map(children, child => { - if (React.isValidElement(child) && child.type === StickerSheetCell) { - return child - } - - return {child} - })} -
-) - -StickerSheetRow.displayName = "StickerSheet.Row" diff --git a/docs/components/_future/StickerSheet/components/StickerSheetRow/index.ts b/docs/components/_future/StickerSheet/components/StickerSheetRow/index.ts deleted file mode 100644 index 4e9c9aa32fb..00000000000 --- a/docs/components/_future/StickerSheet/components/StickerSheetRow/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./StickerSheetRow" diff --git a/docs/components/_future/StickerSheet/index.ts b/docs/components/_future/StickerSheet/index.ts deleted file mode 100644 index 4f269424bb7..00000000000 --- a/docs/components/_future/StickerSheet/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./StickerSheet" -export * from "./types" diff --git a/docs/components/_future/StickerSheet/types.ts b/docs/components/_future/StickerSheet/types.ts deleted file mode 100644 index 73d69f41f3b..00000000000 --- a/docs/components/_future/StickerSheet/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -// eslint-disable-next-line import/no-extraneous-dependencies -import { StoryObj } from "@storybook/react" -import type { ColorSchema } from "~components/LikertScaleLegacy" - -export type StickerSheetArgs = { - isReversed?: boolean - colorSchema?: ColorSchema -} - -export type StickerSheetStory = StoryObj diff --git a/packages/components/src/Avatar/_docs/Avatar.stickersheet.stories.tsx b/packages/components/src/Avatar/_docs/Avatar.stickersheet.stories.tsx index 7cede8fb477..b22ffd1db65 100644 --- a/packages/components/src/Avatar/_docs/Avatar.stickersheet.stories.tsx +++ b/packages/components/src/Avatar/_docs/Avatar.stickersheet.stories.tsx @@ -71,39 +71,37 @@ const ROWS: Array<{ title: string; size: AvatarSizes }> = [ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - - - - {ROWS.map(({ title, size }) => ( - - - - - - - ))} - + + {ROWS.map(({ title, size }) => ( + + + + + + + ))} - - - - {ROWS.map(({ title, size }) => ( - - - - - - ))} - + + + {ROWS.map(({ title, size }) => ( + + + + + + ))} ), diff --git a/packages/components/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx b/packages/components/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx index 47d2c08b35a..97ba015b749 100644 --- a/packages/components/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx +++ b/packages/components/src/AvatarGroup/_docs/AvatarGroup.stickersheet.stories.tsx @@ -23,22 +23,20 @@ const ROWS: Array<{ title: string; size: AvatarGroupSize }> = [ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - {ROWS.map(({ title, size }) => ( - - - - - ))} - + + {ROWS.map(({ title, size }) => ( + + + + + ))} ), } diff --git a/packages/components/src/Badge/_docs/Badge.stickersheet.stories.tsx b/packages/components/src/Badge/_docs/Badge.stickersheet.stories.tsx index ae102871271..b1fecde2144 100644 --- a/packages/components/src/Badge/_docs/Badge.stickersheet.stories.tsx +++ b/packages/components/src/Badge/_docs/Badge.stickersheet.stories.tsx @@ -16,28 +16,28 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - 3 - - - 3 - - - - - - 3 - - - 3 - - - - + + + + 3 + + + 3 + + + + + + 3 + + + 3 + + + ), } diff --git a/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx b/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx index 2194dca1bde..f1f38c9cbdb 100644 --- a/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx +++ b/packages/components/src/Brand/_docs/Brand.stickersheet.stories.tsx @@ -17,32 +17,30 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - + + + + + + + + + + + + ), } diff --git a/packages/components/src/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx b/packages/components/src/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx index bbbd5014e4c..a385867f047 100644 --- a/packages/components/src/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx +++ b/packages/components/src/BrandMoment/_docs/BrandMoment.stickersheet.stories.tsx @@ -44,47 +44,43 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - - - - - - - - - - - - + + + + + + + + + + - - - - } - variant={undefined} - mood="informative" - /> - - - } - variant={undefined} - mood="positive" - /> - - - } - variant={undefined} - mood="negative" - /> - - + + + } + variant={undefined} + mood="informative" + /> + + + } + variant={undefined} + mood="positive" + /> + + + } + variant={undefined} + mood="negative" + /> + ), diff --git a/packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx b/packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx index 29f7a74e6f2..1b59d07d5d2 100644 --- a/packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx +++ b/packages/components/src/ButtonGroup/_docs/ButtonGroup.stickersheet.stories.tsx @@ -19,132 +19,127 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( <> - - - - - - First - Last - - - First - Middle - Last - - - - Tooltips here - - - Styles should still work - - - - + + + + First + Last + + + First + Middle + Last + + + + Tooltips here + + + Styles should still work + + + - - - - - - - First - - Last - - - - First - - Last - - - - First - - Last - - + + + + + First + + Last + + + + First + + Last + + + + First + + Last + + - - - First - - Last - - - - First - - Last - - - - First - - Last - - - + + + First + + Last + + + + First + + Last + + + + First + + Last + + + - - - First - - Middle - - Last - - - First - - Middle - - Last - - - First - - Middle - - Last - - - + + + First + + Middle + + Last + + + First + + Middle + + Last + + + First + + Middle + + Last + + ), diff --git a/packages/components/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx b/packages/components/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx index 0d7bc83a68c..104490a6c93 100644 --- a/packages/components/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx +++ b/packages/components/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx @@ -99,7 +99,7 @@ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - + CalendarPopover
@@ -107,13 +107,13 @@ const StickerSheetTemplate: StickerSheetStory = { - + - + - + ( <> - - - - - + + + + - -
- -
- - + +
+ +
+ - - - - - - - + + + + + - - - - + + + + - - - - - + + + + ), diff --git a/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx b/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx index 1a3fc46f117..c817e1cf184 100644 --- a/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx +++ b/packages/components/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx @@ -27,70 +27,70 @@ const CalendarSingleExample = ( const StickerSheetTemplate: StickerSheetStory = { render: () => ( <> - - - - - - - - - + + + + + + - - - - - - - - - + + + + + + - - - - - - - - - + + + + + + - - - - - - - - + + + + + ), diff --git a/packages/components/src/Card/_docs/Card.stickersheet.stories.tsx b/packages/components/src/Card/_docs/Card.stickersheet.stories.tsx index c0f6b702e8b..d3e9e3e4461 100644 --- a/packages/components/src/Card/_docs/Card.stickersheet.stories.tsx +++ b/packages/components/src/Card/_docs/Card.stickersheet.stories.tsx @@ -41,23 +41,19 @@ const variants = [ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed, ...args }) => ( <> - - - {colors.map(color => ( - - - - ))} - + + {colors.map(color => ( + + + + ))} - - - {variants.map(variant => ( - - - - ))} - + + {variants.map(variant => ( + + + + ))} ), diff --git a/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx b/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx index 15c0ba73514..16c1bb28fa0 100644 --- a/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx +++ b/packages/components/src/Checkbox/Checkbox/_docs/Checkbox.stickersheet.stories.tsx @@ -42,33 +42,30 @@ const StickerSheetTemplate: StickerSheetStory = { }> return ( - - - - {rows.map(({ title, checkedStatus }) => ( - - - - - - - ))} - + + {rows.map(({ title, checkedStatus }) => ( + + + + + + + ))} ) }, diff --git a/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx b/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx index 016ff771020..5c6acb2a655 100644 --- a/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx +++ b/packages/components/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx @@ -31,40 +31,37 @@ const StickerSheetTemplate: StickerSheetStory = { }> return ( - - - - {rows.map(({ title, checkedStatus }) => ( - - - - - - - ))} - + + {rows.map(({ title, checkedStatus }) => ( + + + + + + + ))} ) }, diff --git a/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stickersheet.stories.tsx b/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stickersheet.stories.tsx index c0364ca287f..41109f1aeeb 100644 --- a/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stickersheet.stories.tsx +++ b/packages/components/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.stickersheet.stories.tsx @@ -38,31 +38,31 @@ const CheckboxGroupWrapped = ({ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - <> - - - Next line - - - <> - - - Next line - - - - + + + <> + + + Next line + + + <> + + + Next line + + + ), } @@ -76,8 +76,6 @@ export const StickerSheetReversed: StickerSheetStory = { ...StickerSheetTemplate, name: "Sticker Sheet (Reversed)", parameters: { - /** @note: Only required if template has parameters, otherwise this spread can be removed */ - ...StickerSheetTemplate.parameters, backgrounds: { default: "Purple 700" }, }, args: { isReversed: true }, @@ -87,8 +85,6 @@ export const StickerSheetRTL: StickerSheetStory = { ...StickerSheetTemplate, name: "Sticker Sheet (RTL)", parameters: { - /** @note: Only required if template has parameters, otherwise this spread can be removed */ - ...StickerSheetTemplate.parameters, textDirection: "rtl", }, } diff --git a/packages/components/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx b/packages/components/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx index 4377932dc2f..2262945956c 100644 --- a/packages/components/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx +++ b/packages/components/src/ClearButton/_docs/ClearButton.stickersheet.stories.tsx @@ -16,15 +16,15 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - + + + + + + ), parameters: { diff --git a/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx b/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx index b70e6dd7ca6..ac5fc3e76e4 100644 --- a/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx +++ b/packages/components/src/Collapsible/Collapsible/_docs/Collapsible.stickersheet.stories.tsx @@ -34,33 +34,31 @@ const CollapsibleWrapped = ( const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - - - - - - - - - - - - - - - ( - - {title} - - )} - /> - - + + + + + + + + + + + + + + + + + ( + + {title} + + )} + /> + ), } @@ -79,41 +77,37 @@ export const StickerSheetRTL: StickerSheetStory = { export const Sticky: StickerSheetStory = { render: () => ( - - -
- - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Phasellus ac scelerisque sem, vel ultricies justo. Donec eu - porttitor ante, nec gravida orci. Nulla facilisi. Cras varius - erat id fermentum mattis. Mauris bibendum vestibulum erat, quis - blandit metus viverra sit amet. Vivamus pretium vitae turpis ut - condimentum. Sed vulputate magna nisl, in cursus urna hendrerit - et. Aenean semper, est non feugiat sodales, nisl ligula aliquet - lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra - urna. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Phasellus ac scelerisque sem, vel ultricies justo. Donec eu - porttitor ante, nec gravida orci. Nulla facilisi. Cras varius - erat id fermentum mattis. Mauris bibendum vestibulum erat, quis - blandit metus viverra sit amet. Vivamus pretium vitae turpis ut - condimentum. Sed vulputate magna nisl, in cursus urna hendrerit - et. Aenean semper, est non feugiat sodales, nisl ligula aliquet - lorem, sit amet scelerisque arcu quam a sapien. Donec in viverra - urna. - - -
- - + +
+ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus + ac scelerisque sem, vel ultricies justo. Donec eu porttitor ante, + nec gravida orci. Nulla facilisi. Cras varius erat id fermentum + mattis. Mauris bibendum vestibulum erat, quis blandit metus + viverra sit amet. Vivamus pretium vitae turpis ut condimentum. Sed + vulputate magna nisl, in cursus urna hendrerit et. Aenean semper, + est non feugiat sodales, nisl ligula aliquet lorem, sit amet + scelerisque arcu quam a sapien. Donec in viverra urna. + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus + ac scelerisque sem, vel ultricies justo. Donec eu porttitor ante, + nec gravida orci. Nulla facilisi. Cras varius erat id fermentum + mattis. Mauris bibendum vestibulum erat, quis blandit metus + viverra sit amet. Vivamus pretium vitae turpis ut condimentum. Sed + vulputate magna nisl, in cursus urna hendrerit et. Aenean semper, + est non feugiat sodales, nisl ligula aliquet lorem, sit amet + scelerisque arcu quam a sapien. Donec in viverra urna. + + +
+ ), play: async ({ canvasElement }) => { diff --git a/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.stickersheet.stories.tsx b/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.stickersheet.stories.tsx index 44da0da63da..e2c1a5e5703 100644 --- a/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.stickersheet.stories.tsx +++ b/packages/components/src/Collapsible/CollapsibleGroup/_docs/CollapsibleGroup.stickersheet.stories.tsx @@ -45,27 +45,25 @@ const CollapsibleGroupWrapped = ( const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + ), } diff --git a/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx b/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx index 537df38c87d..aea9c6a3407 100644 --- a/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx +++ b/packages/components/src/Collapsible/ExpertAdviceCollapsible/_docs/ExpertAdviceCollapsible.stickersheets.stories.tsx @@ -31,14 +31,12 @@ const ExpertAdviceCollapsibleWrapped = ( const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - - - - - + + + + + + ), } diff --git a/packages/components/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx b/packages/components/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx index 5d3ee1248e0..3c8a6a52c45 100644 --- a/packages/components/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx +++ b/packages/components/src/DatePicker/_docs/DatePicker.stickersheet.stories.tsx @@ -22,119 +22,117 @@ const StickerSheetTemplate: StickerSheetStory = { const [selectedDate, setValueDate] = useState() return ( <> - - - - - - undefined} - isReversed={isReversed} - /> - undefined} - isReversed={isReversed} - description={ - <> - - My Custom Description - - - } - /> - undefined} - isReversed={isReversed} - disabled - /> - - + + + + undefined} + isReversed={isReversed} + /> + undefined} + isReversed={isReversed} + description={ + <> + + My Custom Description + + + } + /> + undefined} + isReversed={isReversed} + disabled + /> + - - - - - undefined} - data-sb-pseudo-styles="hover" - /> - undefined} - data-sb-pseudo-styles="focus" - /> - + + + undefined} + data-sb-pseudo-styles="hover" + /> + undefined} + data-sb-pseudo-styles="focus" + /> + - - undefined} - classNameOverride="story__date-input-single-field--hover" - /> - undefined} - classNameOverride="story__date-input-single-field--focus" - /> - - + + undefined} + classNameOverride="story__date-input-single-field--hover" + /> + undefined} + classNameOverride="story__date-input-single-field--focus" + /> + - - - - - undefined} - isReversed={isReversed} - /> - undefined} - isReversed={isReversed} - status="caution" - validationMessage="Custom cautionary message" - /> - - + + + undefined} + isReversed={isReversed} + /> + undefined} + isReversed={isReversed} + status="caution" + validationMessage="Custom cautionary message" + /> + ) @@ -185,50 +183,37 @@ export const StickerSheetLocales: StickerSheetStory = { name: "Sticker Sheet (Locales)", render: () => ( <> - - - - - undefined} - /> + + + undefined} + /> + undefined} + locale="en-US" + /> + + + + + + undefined} - locale="en-US" + locale="fr-CA" + data-testid="id--dp-fr-ca" /> - - - - - - - - - - undefined} - locale="fr-CA" - data-testid="id--dp-fr-ca" - /> - - - + + ), - decorators: [ - Story => ( -
- -
- ), - ], play: async ({ canvasElement }) => { const canvas = within(canvasElement) await userEvent.click(canvas.getByTestId("id--dp-fr-ca")) diff --git a/packages/components/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx b/packages/components/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx index 10900a1f2b5..04db5dc0e3d 100644 --- a/packages/components/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx +++ b/packages/components/src/DatePicker/_docs/getLocale.stickersheet.stories.tsx @@ -32,17 +32,15 @@ export const UtilGetLocale: StickerSheetStory = { ] return ( - - - {locales.map(locale => ( - - - - ))} - + + {locales.map(locale => ( + + + + ))} ) }, diff --git a/packages/components/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx b/packages/components/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx index 4e3583ed4be..5ebe1cb6b18 100644 --- a/packages/components/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx +++ b/packages/components/src/DateRangePicker/_docs/DateRangePicker.stickersheet.stories.tsx @@ -43,15 +43,13 @@ const DateRangePickerTemplate = ( }, [selectedDateRange]) return ( - <> - - + ) } @@ -83,28 +81,28 @@ const selectedDateRange = { const StickerSheetTemplate: StickerSheetStory = { render: () => ( <> - - - - - - + + + + + + + + + + + - - - + + ( - - - - + + + - - + + + + - - + + + + - - + + ), } diff --git a/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx b/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx index 33b69a75ace..f154ebde3c0 100644 --- a/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx +++ b/packages/components/src/EmptyState/_docs/EmptyState.stickersheet.stories.tsx @@ -6,7 +6,7 @@ import { Icon } from "~components/__future__/Icon" import { StickerSheet, StickerSheetStory, -} from "~storybook/components/_future/StickerSheet" +} from "~storybook/components/StickerSheet" import { EmptyState, EmptyStateProps } from "../index" export default { @@ -56,7 +56,11 @@ const StickerSheetTemplate: StickerSheetStory = { return ( <> - + {variants.map(variant => ( @@ -93,6 +97,7 @@ const StickerSheetTemplate: StickerSheetStory = { {illustrationTypes.map(illustrationType => ( diff --git a/packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx b/packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx index a1e9915a1a0..1ebd5a7efee 100644 --- a/packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx +++ b/packages/components/src/ErrorPage/_docs/ErrorPage.stickersheet.stories.tsx @@ -33,28 +33,24 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - - - - - - + + + + - - - - alert("Custom handler"), - homeHref: "/anewhome", - }} - /> - - + + + alert("Custom handler"), + homeHref: "/anewhome", + }} + /> + ), diff --git a/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx b/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx index 0f77720719d..b66d2ec48ee 100644 --- a/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx +++ b/packages/components/src/FieldGroup/_docs/FieldGroup.stickersheet.stories.tsx @@ -36,14 +36,11 @@ const FieldGroupTemplate = ({ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - + + + + + ), } diff --git a/packages/components/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx b/packages/components/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx index 1aa64a3d263..7158b0f3290 100644 --- a/packages/components/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx +++ b/packages/components/src/FieldMessage/_docs/FieldMessage.stickersheet.stories.tsx @@ -20,26 +20,16 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed, ...otherProps }) => ( - - - - - - - - - - + + + + + + + ), } diff --git a/packages/components/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx b/packages/components/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx index 6f14dd35cf1..6489a571db6 100644 --- a/packages/components/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx +++ b/packages/components/src/Filter/Filter/_docs/Filter.stickersheet.stories.tsx @@ -35,23 +35,21 @@ const StickerSheetTemplate: StickerSheetStory = { return ( - - - - ( - - )} - > - Filter Contents - - - + + ( + + )} + > + Filter Contents + + ) }, diff --git a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx index 9e01c5c421d..aa3eb38c10e 100644 --- a/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx +++ b/packages/components/src/Filter/FilterBar/_docs/FilterBar.stickersheet.stories.tsx @@ -122,60 +122,46 @@ const StickerSheetTemplate: StickerSheetStory = { return ( <> - - - + + + + filters={filters} + values={activeValues} + onValuesChange={setActiveValues} + /> + + + + + +
filters={filters} - values={activeValues} - onValuesChange={setActiveValues} + values={activeValuesOverflow} + onValuesChange={setActiveValuesOverflow} /> - - - - - - - -
- - filters={filters} - values={activeValuesOverflow} - onValuesChange={setActiveValuesOverflow} - /> -
- - +
+ - - - - - filters={removableFilters} - values={valuesRemovableAllActive} - onValuesChange={setValuesRemovableAllActive} - /> - - + + + + filters={removableFilters} + values={valuesRemovableAllActive} + onValuesChange={setValuesRemovableAllActive} + /> + - - - - - filters={removableFilters} - values={valuesRemovablePartialActive} - onValuesChange={setValuesRemovablePartialActive} - /> - - + + + + filters={removableFilters} + values={valuesRemovablePartialActive} + onValuesChange={setValuesRemovablePartialActive} + /> + ) diff --git a/packages/components/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx b/packages/components/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx index f2451087efa..8209bd126db 100644 --- a/packages/components/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx +++ b/packages/components/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx @@ -19,61 +19,55 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( <> - - - - - Label - - Label - - - Label - - - Label - - - + + + Label + + Label + + + Label + + + Label + + - - - - - - - - - + + + + + + - - - - undefined, - }} - /> - - + + + undefined, + }} + /> + ), diff --git a/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx b/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx index 1f06ce8a42f..16fdd257011 100644 --- a/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx +++ b/packages/components/src/Filter/FilterDatePicker/_docs/FilterDatePicker.stickersheet.stories.tsx @@ -38,79 +38,73 @@ const StickerSheetTemplate: StickerSheetStory = { return ( - - - - ( - - )} - label="Start day" - locale="en-AU" - defaultMonth={new Date("2022-05-01")} - selectedDate={noDateValue} - onDateChange={setNoDateValue} - /> - ( - - )} - label="Start day" - locale="en-AU" - selectedDate={dateValue} - onDateChange={setDateValue} - /> - - + + ( + + )} + label="Start day" + locale="en-AU" + defaultMonth={new Date("2022-05-01")} + selectedDate={noDateValue} + onDateChange={setNoDateValue} + /> + ( + + )} + label="Start day" + locale="en-AU" + selectedDate={dateValue} + onDateChange={setDateValue} + /> + - - - - - - - - - - - - + + + + + + + + + + ) @@ -148,36 +142,23 @@ export const StickerSheetLocales: StickerSheetStory = { return ( <> - - - - - - - - + + + + + - - - - - - - - - + + + + + + ) }, - decorators: [ - Story => ( -
- -
- ), - ], parameters: { a11y: { // Wait for translations to load diff --git a/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx b/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx index a82f0376ea6..b07ff0a204a 100644 --- a/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx +++ b/packages/components/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx @@ -56,116 +56,111 @@ const StickerSheetTemplate: StickerSheetStory = { }) return ( - <> +
- - - - ( - - )} - label="Dates" - locale="en-US" - selectedRange={rangePartial} - onRangeChange={setRangePartial} - /> - ( - - )} - label="Dates" - locale="en-US" - selectedRange={rangeComplete} - onRangeChange={setRangeComplete} - /> - - + + ( + + )} + label="Dates" + locale="en-US" + selectedRange={rangePartial} + onRangeChange={setRangePartial} + /> + ( + + )} + label="Dates" + locale="en-US" + selectedRange={rangeComplete} + onRangeChange={setRangeComplete} + /> + - - - - - - - - - - - - - + + + + + + + + + + + - +
) }, play: async ({ canvasElement }): Promise => { @@ -218,34 +213,21 @@ export const StickerSheetLocales: StickerSheetStory = { return ( <> - - - - - - - - + + + + + - - - - - - - - - + + + + + + ) }, - decorators: [ - Story => ( -
- -
- ), - ], } diff --git a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx index 0362e34a953..786d85b7cbc 100644 --- a/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx +++ b/packages/components/src/Filter/FilterSelect/_docs/FilterSelect.stickersheet.stories.tsx @@ -53,283 +53,273 @@ const StickerSheetTemplate: StickerSheetStory = { return ( <> - - - -
- ( - - )} - items={singleMockItems} - /> -
-
- ( - - )} - items={groupedMockItems} - /> -
-
- ( - - )} - items={singleMockItems} - selectedKey="mocha" - /> -
-
- ( - - )} - items={mixedMockItemsDisabled} - /> -
- - + +
+ ( + + )} + items={singleMockItems} + /> +
+
+ ( + + )} + items={groupedMockItems} + /> +
+
+ ( + + )} + items={singleMockItems} + selectedKey="mocha" + /> +
+
+ ( + + )} + items={mixedMockItemsDisabled} + /> +
+ - - - -
- ( - - )} - items={singleMockItems} - > - {({ items }): JSX.Element[] => - items.map(item => { - if (item.type === "item") { - return ( - -
- Customised in list! -
-
{item.rendered}
-
- ), - }} - /> - ) - } - + +
+ ( + + )} + items={singleMockItems} + > + {({ items }): JSX.Element[] => + items.map(item => { + if (item.type === "item") { return ( - +
+ Customised in list! +
+
{item.rendered}
+
+ ), + }} /> ) - }) - } - -
+ } -
- ( - - )} - items={mixedMockItemsUngroupedFirst} - > - {({ items }): JSX.Element[] => - items.map(item => { - if (item.type === "item" && item.key === "batch-brew") { - return ( - ++ {item.rendered}
, - }} - /> - ) - } + return ( + + ) + }) + } + + - if (item.type === "section" && item.key === "Syrup") { - return ( - ({ - ...child, - rendered:
-- {child.rendered}
, - }) - ), - }} - /> - ) - } +
+ ( + + )} + items={mixedMockItemsUngroupedFirst} + > + {({ items }): JSX.Element[] => + items.map(item => { + if (item.type === "item" && item.key === "batch-brew") { + return ( + ++ {item.rendered}
, + }} + /> + ) + } + if (item.type === "section" && item.key === "Syrup") { return ( - ({ + ...child, + rendered:
-- {child.rendered}
, + }) + ), + }} /> ) - }) - } - - + } -
- ( - - )} - items={mixedMockItemsUnordered} - > - {({ items }): JSX.Element[] => - items.map(item => ( - - {item.type === "section" && ( - - )} - - {item.type === "section" && ( - - )} - - )) - } - -
+ return ( + + ) + }) + } + + -
- ( - - )} - items={[ - { label: "Customise...", value: "custom" }, - ...singleMockItems, - ]} - > - {({ items }): JSX.Element[] => - items.map(item => { - if (item.type === "item" && item.key === "custom") { - return ( - - - - - ) - } +
+ ( + + )} + items={mixedMockItemsUnordered} + > + {({ items }): JSX.Element[] => + items.map(item => ( + + {item.type === "section" && ( + + )} + + {item.type === "section" && ( + + )} + + )) + } + +
+
+ ( + + )} + items={[ + { label: "Customise...", value: "custom" }, + ...singleMockItems, + ]} + > + {({ items }): JSX.Element[] => + items.map(item => { + if (item.type === "item" && item.key === "custom") { return ( - + + + + ) - }) - } - -
- - + } + + return ( + + ) + }) + } + +
+ - - - -
- ( - - )} - items={[{ value: "a", label: "A" }]} - /> -
-
- ( - - )} - items={[ - { - value: "long-1", - label: - "Super long option where the container is fixed width and the selected option goes multiline", - }, - { - value: "long-2", - label: - "Another super long option where the container is fixed width and the selected option goes multiline", - }, - ...singleMockItems, - ]} - /> -
- - + +
+ ( + + )} + items={[{ value: "a", label: "A" }]} + /> +
+
+ ( + + )} + items={[ + { + value: "long-1", + label: + "Super long option where the container is fixed width and the selected option goes multiline", + }, + { + value: "long-2", + label: + "Another super long option where the container is fixed width and the selected option goes multiline", + }, + ...singleMockItems, + ]} + /> +
+ ) diff --git a/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx b/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx index c32eca7d45f..2d13046ecb9 100644 --- a/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx +++ b/packages/components/src/GuidanceBlock/_docs/GuidanceBlock.stickersheet.stories.tsx @@ -61,47 +61,45 @@ const CONTENT_PROPS: GuidanceBlockProps = { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - <> - {variantsMap.map(variant => ( - - - - ))} - - - - - - - - - + <> + {variantsMap.map(variant => ( + + + + ))} + + + + + + + + + - - - } - illustrationType="scene" - /> - - - - - + }, + }} + /> + + + } + illustrationType="scene" + /> + + + + ), } diff --git a/packages/components/src/Heading/_docs/Heading.stickersheet.stories.tsx b/packages/components/src/Heading/_docs/Heading.stickersheet.stories.tsx index acda3f4c1b5..6a48d652ae1 100644 --- a/packages/components/src/Heading/_docs/Heading.stickersheet.stories.tsx +++ b/packages/components/src/Heading/_docs/Heading.stickersheet.stories.tsx @@ -19,124 +19,114 @@ const StickerSheetTemplate: StickerSheetStory = { const fontColour = isReversed ? "white" : "dark" return ( <> - - - - - Let's create a better world of work + + + + Let's create a better world of work + + + + + Use me in the composable header! + + + +
+ + Have the courage to be vulnerable. - - - - Use me in the composable header! + + Be authentic, ask for help, be willing to fail, create open + environments. - - -
- - Have the courage to be vulnerable. - - - Be authentic, ask for help, be willing to fail, create open - environments. - -
- - -
- - Learn faster through feedback. - - - Seek feedback, give feedback responsibly, respond - constructively, learn continuously. - -
- - -
- - Trust people to make decisions. - - - Provide constructive feedback, support decisions, be - accountable, delegate decisions. - -
- - -
- - Amplify others. - - - Recognise others, succeed together, grow others, create - opportunities. - -
- - -
- - An employee experience that people love. - - - Get the employee engagement, performance and development tools - and insights you need to build a category-defining culture. - -
- - - - Discover the power of humanity at work. +
+ + +
+ + Learn faster through feedback. - - + + Seek feedback, give feedback responsibly, respond + constructively, learn continuously. + +
+ + +
+ + Trust people to make decisions. + + + Provide constructive feedback, support decisions, be + accountable, delegate decisions. + +
+ + +
+ + Amplify others. + + + Recognise others, succeed together, grow others, create + opportunities. + +
+ + +
+ + An employee experience that people love. + + + Get the employee engagement, performance and development tools + and insights you need to build a category-defining culture. + +
+ + + + Discover the power of humanity at work. + + + {!isReversed ? ( - - - - - - Discover the power of humanity at work. - - - Discover the power of humanity at work. - - - Discover the power of humanity at work. - - - Discover the power of humanity at work. - - - + + + + Discover the power of humanity at work. + + + Discover the power of humanity at work. + + + Discover the power of humanity at work. + + + Discover the power of humanity at work. + + ) : ( - - - - - - Discover the power of humanity at work. - - - Discover the power of humanity at work. - - - + + + + Discover the power of humanity at work. + + + Discover the power of humanity at work. + + )} diff --git a/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx b/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx index 47054ca7dfa..50db15399f5 100644 --- a/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx +++ b/packages/components/src/Icon/_docs/Icon.stickersheet.stories.tsx @@ -16,26 +16,20 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - {Object.keys(ICONS).map(iconName => { - const icon = ICONS[iconName as keyof typeof ICONS]({ - role: "presentation", - }) - return ( - + + {Object.keys(ICONS).map(iconName => { + const icon = ICONS[iconName as keyof typeof ICONS]({ + role: "presentation", + }) + return ( + + {icon} + {icon} - - {icon} - - - ) - })} - + + + ) + })} ), } diff --git a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx index 8df689cc745..a4b0d766325 100644 --- a/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx +++ b/packages/components/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx @@ -16,14 +16,14 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - + + + + + ), parameters: { diff --git a/packages/components/src/Illustration/Scene/_docs/Scene.stickersheet.stories.tsx b/packages/components/src/Illustration/Scene/_docs/Scene.stickersheet.stories.tsx index 58f86ac99e3..3868b2cea60 100644 --- a/packages/components/src/Illustration/Scene/_docs/Scene.stickersheet.stories.tsx +++ b/packages/components/src/Illustration/Scene/_docs/Scene.stickersheet.stories.tsx @@ -63,191 +63,145 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - EmptyStatesAction - - - - - - EmptyStatesInformative - - - - EmptyStatesNegative - - - - EmptyStatesNeutral - - - - EmptyStatesPositive - - - - Information360Upgrade - - - - InformationDemographicFocus - - - - InformationEmergingTrends - - - - InformationEmployeeLifecycle - - - - InformationReportOwner - - - - InformationReportOwnerByRule - - - - InformationTurnoverCalculator - - - - InformationTurnoverForecast - - - - Collaboration - - - - Communication - - - - CompanyValues - - - - ConnectTheDots - - - - CultureLab - - - - TermsAgreement - - - - Programs - - - - PerformanceCompanySettings - - - - EngagementSurveySummaryFemale - - - - EngagementSurveySummaryMale - - - - BrandMomentNewAccountOnboarding - - - - BrandMomentUploadEmployeeData - - - - BrandMomentPositiveOutro - - - - BrandMomentLogin - - - - BrandMomentError - - - - BrandMomentStarterKit - - - - SkillsCoach1On1Meetings - - - - SkillsCoachCoaching - - - - SkillsCoachEmployeeDevelopment - - - - SkillsCoachEssentialFeedback - - - - SkillsCoachEssentialProductivity - - - - SkillsCoachEssentialResilience - - - - SkillsCoachInfluentialCommunication - - - - SkillsCoachLeadingChange - - - - SkillsCoachFeedback - - - - SkillsCoachManagerHub - - - - SkillsCoachProductivity - - - - SkillsCoachRemoteManager - - - - SkillsCoachResilience - - - - SkillsCoachStrategy - - - - SurveyGetStarted - - - - SurveyOverviewClosed - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), } diff --git a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx index 53edd4e622d..5d18f54c0d0 100644 --- a/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx +++ b/packages/components/src/Illustration/subcomponents/VideoPlayer/VideoPlayer.stickersheet.stories.tsx @@ -17,47 +17,45 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - -
- -
- - -
- -
- - -
- -
- - -
- -
- - + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ ), } diff --git a/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx b/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx index e84abd71bf0..0e8c9b72134 100644 --- a/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx +++ b/packages/components/src/Input/Input/_docs/Input.stickersheet.stories.tsx @@ -61,39 +61,36 @@ const InputExampleGroup = (props: InputProps): JSX.Element => ( const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - {InputStatus.map(status => ( - - - - - - - - ))} - + + {InputStatus.map(status => ( + + + + + + + + ))} ), parameters: { diff --git a/packages/components/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx b/packages/components/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx index dd848e1d6b8..44d702e53fd 100644 --- a/packages/components/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx +++ b/packages/components/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx @@ -32,26 +32,27 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - - - Min} - maxLabel={Max} - value={2} - disabled - data-sb-a11y-color-contrast-disable - /> - - + + + + Min} + maxLabel={Max} + value={2} + disabled + data-sb-a11y-color-contrast-disable + /> + ), } diff --git a/packages/components/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx b/packages/components/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx index 2ac03bc1eb2..28d067ddd93 100644 --- a/packages/components/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx +++ b/packages/components/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx @@ -27,150 +27,143 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), parameters: { diff --git a/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx b/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx index b71ec0bb1c0..8d198ee6372 100644 --- a/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx +++ b/packages/components/src/Label/_docs/Label.stickersheet.stories.tsx @@ -92,105 +92,98 @@ const BlockControl = ({ labelText, ...props }: WrapperProps): JSX.Element => ( const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - + + + + + + + + {InlineLabelTypes.map(type => ( + + + - - - + ))} - - {InlineLabelTypes.map(type => ( - - - - - - - ))} - - - - {BlockLabelTypes.map(type => ( - - - - - - - ))} - + {BlockLabelTypes.map(type => ( + + + + + + + ))} ), } diff --git a/packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx b/packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx index 58cfe5b3ea1..c6d9ff2d593 100644 --- a/packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx +++ b/packages/components/src/LabelledMessage/_docs/LabelledMessage.stickersheet.stories.tsx @@ -17,11 +17,9 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - - + + + ), } diff --git a/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx b/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx index b2b22063a86..446b483f3bd 100644 --- a/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx +++ b/packages/components/src/LikertScaleLegacy/_docs/LikertScaleLegacy.stickersheet.stories.tsx @@ -4,7 +4,7 @@ import { StickerSheet, StickerSheetStory, } from "~storybook/components/StickerSheet" -import { LikertScaleLegacy } from "../index" +import { LikertScaleLegacy, LikertScaleProps } from "../index" import { Scale } from "../types" export default { @@ -42,99 +42,99 @@ const scale: Scale = [ }, ] -const StickerSheetTemplate: StickerSheetStory = { +type Story = StickerSheetStory<{ colorSchema: LikertScaleProps["colorSchema"] }> + +const StickerSheetTemplate: Story = { render: ({ isReversed, colorSchema }) => ( - - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - /> - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - /> - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - /> - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - /> - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - /> - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - /> - - - undefined} - reversed={isReversed} - colorSchema={colorSchema} - validationMessage="Error message here" - status="error" - /> - - + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + /> + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + /> + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + /> + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + /> + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + /> + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + /> + + + undefined} + reversed={isReversed} + colorSchema={colorSchema} + validationMessage="Error message here" + status="error" + /> + ), } -export const StickerSheetDefault: StickerSheetStory = { +export const StickerSheetDefault: Story = { ...StickerSheetTemplate, name: "Sticker Sheet (Default - Classical)", } -export const StickerBlueSheetDefault: StickerSheetStory = { +export const StickerBlueSheetDefault: Story = { ...StickerSheetTemplate, name: "Sticker Sheet (Blue)", args: { colorSchema: "blue" }, } -export const StickerSheetClassicalReversed: StickerSheetStory = { +export const StickerSheetClassicalReversed: Story = { ...StickerSheetTemplate, name: "Sticker Sheet (Classical Reversed)", parameters: { @@ -143,7 +143,7 @@ export const StickerSheetClassicalReversed: StickerSheetStory = { args: { isReversed: true }, } -export const StickerSheetBlueReversed: StickerSheetStory = { +export const StickerSheetBlueReversed: Story = { ...StickerSheetTemplate, name: "Sticker Sheet (Blue Reversed)", parameters: { @@ -152,7 +152,7 @@ export const StickerSheetBlueReversed: StickerSheetStory = { args: { isReversed: true, colorSchema: "blue" }, } -export const StickerSheetRTL: StickerSheetStory = { +export const StickerSheetRTL: Story = { ...StickerSheetTemplate, name: "Sticker Sheet (RTL)", parameters: { diff --git a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stickersheet.stories.tsx b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stickersheet.stories.tsx index 1b04fe68c7f..cee03c9de2a 100644 --- a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stickersheet.stories.tsx +++ b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stickersheet.stories.tsx @@ -17,26 +17,24 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + ), } diff --git a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx index 295c9b7d460..d6e2c37b7bc 100644 --- a/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx +++ b/packages/components/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx @@ -41,58 +41,52 @@ export const Reversed: Story = { export const Size: Story = { render: () => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + ), } diff --git a/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx b/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx index 86da6604e8d..7309e8442f9 100644 --- a/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx +++ b/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stickersheet.stories.tsx @@ -27,25 +27,21 @@ const headingVariants = [ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - {headingVariants.map(variant => ( - - - - - - ))} - - - - + {headingVariants.map(variant => ( + + + + - + ))} + + + ), } diff --git a/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx b/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx index 05940bd54a1..aa6ff450d50 100644 --- a/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx +++ b/packages/components/src/Loading/LoadingHeading/_docs/LoadingHeading.stories.tsx @@ -49,19 +49,13 @@ const headingVariants = [ export const Variant: Story = { render: () => ( - - ", ""]} - hasVerticalHeadings - /> - - {headingVariants.map(variant => ( - - - Heading - - ))} - + ", ""]}> + {headingVariants.map(variant => ( + + + Heading + + ))} ), } diff --git a/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stickersheet.stories.tsx b/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stickersheet.stories.tsx index c523e83a80d..a43b566c7e0 100644 --- a/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stickersheet.stories.tsx +++ b/packages/components/src/Loading/LoadingParagraph/_docs/LoadingParagraph.stickersheet.stories.tsx @@ -17,22 +17,20 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + ), } diff --git a/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx b/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx index b582cfc8d47..d6aa055a439 100644 --- a/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx +++ b/packages/components/src/Loading/LoadingSpinner/_docs/LoadingSpinner.stickersheet.stories.tsx @@ -16,21 +16,19 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - + + + + + + + ), } diff --git a/packages/components/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx b/packages/components/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx index e561b0bce44..c8469b16b91 100644 --- a/packages/components/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx +++ b/packages/components/src/MultiSelect/_docs/MultiSelect.stickersheet.stories.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react" import { Meta } from "@storybook/react" import isChromatic from "chromatic" -import classnames from "classnames" import { StickerSheet, StickerSheetStory, @@ -53,83 +52,79 @@ const StickerSheetTemplate: StickerSheetStory = { return ( <> - - - - - - - - + + + + + + - - - - undefined} - onSelectedValuesChange={() => undefined} - selectedValues={selectedValuesOpen} - items={options} - validationMessage={{ - status: "error", - message: "There are no waffles left.", - }} - /> - undefined} - onSelectedValuesChange={() => undefined} - selectedValues={selectedValuesNoItems} - items={options} - validationMessage={{ - status: "error", - message: "There are only four pancakes left.", - }} - /> - - + + undefined} + onSelectedValuesChange={() => undefined} + selectedValues={selectedValuesOpen} + items={options} + validationMessage={{ + status: "error", + message: "There are no waffles left.", + }} + /> + undefined} + onSelectedValuesChange={() => undefined} + selectedValues={selectedValuesNoItems} + items={options} + validationMessage={{ + status: "caution", + message: "There are only four pancakes left.", + }} + /> + ) diff --git a/packages/components/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx b/packages/components/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx index 9f09eb1a6d8..09071a9c927 100644 --- a/packages/components/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx +++ b/packages/components/src/MultiSelect/subcomponents/Checkbox/_docs/Checkbox.stickersheet.stories.tsx @@ -22,34 +22,28 @@ const STATUS_ROWS = [ const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - {STATUS_ROWS.map(({ title, status }) => ( - - - - - - ))} - + + {STATUS_ROWS.map(({ title, status }) => ( + + + + + + ))} ), parameters: { diff --git a/packages/components/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx b/packages/components/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx index ddc787535f5..5a2fd8235e2 100644 --- a/packages/components/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx +++ b/packages/components/src/MultiSelect/subcomponents/MultiSelectOptionField/_docs/MultiSelectOptionField.stickersheet.stories.tsx @@ -28,75 +28,70 @@ const STATUS_ROWS = [ const StickerSheetTemplate: Story = { render: () => ( <> - - - - {STATUS_ROWS.map(({ title, status }) => ( - - - - - - ))} - + + {STATUS_ROWS.map(({ title, status }) => ( + + + + + + ))} - - - -
- - -
- - + + +
+ + +
+ ), diff --git a/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx b/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx index 7e91904e9ed..2e608a18542 100644 --- a/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx +++ b/packages/components/src/MultiSelect/subcomponents/MultiSelectOptions/_docs/MultiSelectOptions.stickersheet.stories.tsx @@ -31,34 +31,27 @@ const options = [ const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - - undefined} - /> - undefined} - /> - - undefined} - /> - - - + + + undefined} + /> + undefined} + /> + undefined} + /> + ), parameters: { diff --git a/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx b/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx index 80a8a44b5da..32f8d46f213 100644 --- a/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx +++ b/packages/components/src/MultiSelect/subcomponents/MultiSelectToggle/_docs/MultiSelectToggle.stickersheet.stories.tsx @@ -45,115 +45,91 @@ const StickerSheetTemplate: StickerSheetStory = { <> - - - - - - - - + + + + + + - - - - - - - - - - - + + + + + + + + - - - - - - - + + + + - - - - - - - - - - - - - - + + + + + ) diff --git a/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx b/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx index d454785dfbf..7bd253686a5 100644 --- a/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx +++ b/packages/components/src/Notification/GlobalNotification/_docs/GlobalNotification.stickersheet.stories.tsx @@ -85,23 +85,20 @@ const StickerSheetTemplate: StickerSheetStory = { return ( <> - - - {variants.map(({ title, props }) => ( - - - - ))} - + + {variants.map(({ title, props }) => ( + + + + ))} - - - {types.map(({ title, props }) => ( - - - - ))} - + + + {types.map(({ title, props }) => ( + + + + ))} ) diff --git a/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx b/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx index 7ae4e0e970e..ebe4bee17c4 100644 --- a/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx +++ b/packages/components/src/Notification/InlineNotification/_docs/InlineNotification.stickersheet.stories.tsx @@ -199,23 +199,20 @@ const TYPE_PROPS: Array<{ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - - - {VARIANTS_PROPS.map(({ title, props }) => ( - - - - ))} - + + {VARIANTS_PROPS.map(({ title, props }) => ( + + + + ))} - - - {TYPE_PROPS.map(({ title, props }) => ( - - - - ))} - + + + {TYPE_PROPS.map(({ title, props }) => ( + + + + ))} ), diff --git a/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx b/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx index c08dfdbacb2..fee6d1cc237 100644 --- a/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx +++ b/packages/components/src/Pagination/_docs/Pagination.stickersheet.stories.tsx @@ -17,80 +17,66 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - { - alert("Page Change") - }} - /> - - - { - alert("Page Change") - }} - /> - - - { - alert("Page Change") - }} - /> - - - { - alert("Page Change") - }} - /> - - - { - alert("Page Change") - }} - /> - - - { - alert("Page Change") - }} - /> - - + + alert("Page Change")} + /> + + + alert("Page Change")} + /> + + + alert("Page Change")} + /> + + + alert("Page Change")} + /> + + + alert("Page Change")} + /> + + + alert("Page Change")} + /> + ), } diff --git a/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx index 1d23cfd24bf..5e92ab791ac 100644 --- a/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx +++ b/packages/components/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.stickersheet.stories.tsx @@ -51,29 +51,27 @@ const DIRECTIONAL_LINK_PROPS: Array<{ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - {DIRECTIONAL_LINK_PROPS.map(({ title, props }) => ( - - - - - - - - ))} - + {DIRECTIONAL_LINK_PROPS.map(({ title, props }) => ( + + + + + + + + ))} ), parameters: { diff --git a/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx index 4f830e9b7fa..84170da799f 100644 --- a/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx +++ b/packages/components/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.stickersheet.stories.tsx @@ -37,34 +37,30 @@ const PAGINATION_LINK_PROPS: Array<{ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - {PAGINATION_LINK_PROPS.map(({ title, props }) => ( - - - - - - - ))} - + + {PAGINATION_LINK_PROPS.map(({ title, props }) => ( + + + + + + + ))} ), parameters: { diff --git a/packages/components/src/Popover/_docs/Popover.stickersheet.stories.tsx b/packages/components/src/Popover/_docs/Popover.stickersheet.stories.tsx index ec68056639f..638c5c97dc8 100644 --- a/packages/components/src/Popover/_docs/Popover.stickersheet.stories.tsx +++ b/packages/components/src/Popover/_docs/Popover.stickersheet.stories.tsx @@ -30,57 +30,45 @@ const PopoverWrapper = ( ) } -const cellStyle = { width: "400px", height: "250px" } - -const PopoverRow = ({ - placement, -}: { - placement?: PopoverProps["placement"] -}): JSX.Element => ( - - - - - -) +const cellStyle = { + display: "grid", + placeContent: "center", + width: "220px", + height: "250px", +} const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + {popoverPlacements.map(placement => ( + - + - <> - {popoverPlacements.map(placement => ( - - ))} - - + ))} ), } diff --git a/packages/components/src/ProgressBar/_docs/ProgressBar.stickersheet.stories.tsx b/packages/components/src/ProgressBar/_docs/ProgressBar.stickersheet.stories.tsx index f925fa2a96d..4d2fa2a3de6 100644 --- a/packages/components/src/ProgressBar/_docs/ProgressBar.stickersheet.stories.tsx +++ b/packages/components/src/ProgressBar/_docs/ProgressBar.stickersheet.stories.tsx @@ -84,38 +84,27 @@ const StickerSheetTemplate: StickerSheetStory = { return ( <> - - {colors.map(({ title, props }) => ( - - - - ))} - + {colors.map(({ title, props }) => ( + + + + ))} + - - {moods.map(({ title, props }) => ( - - - - ))} - + {moods.map(({ title, props }) => ( + + + + ))} ) diff --git a/packages/components/src/Radio/Radio/_docs/Radio.stickersheet.stories.tsx b/packages/components/src/Radio/Radio/_docs/Radio.stickersheet.stories.tsx index 09099417bcf..e8b3a28d448 100644 --- a/packages/components/src/Radio/Radio/_docs/Radio.stickersheet.stories.tsx +++ b/packages/components/src/Radio/Radio/_docs/Radio.stickersheet.stories.tsx @@ -27,60 +27,52 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - + + + + + + + + + + + ), parameters: { diff --git a/packages/components/src/Radio/RadioField/_docs/RadioField.stickersheet.stories.tsx b/packages/components/src/Radio/RadioField/_docs/RadioField.stickersheet.stories.tsx index 2f2310cd3d1..dc58216dad2 100644 --- a/packages/components/src/Radio/RadioField/_docs/RadioField.stickersheet.stories.tsx +++ b/packages/components/src/Radio/RadioField/_docs/RadioField.stickersheet.stories.tsx @@ -16,60 +16,57 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - - - - - - - - - - + + + + + + + + + + + ), parameters: { diff --git a/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx b/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx index 558f318c73e..065bf663b23 100644 --- a/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx +++ b/packages/components/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx @@ -18,93 +18,87 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - - <> - - - - - - - Next line - - - <> - - - - - - - Next line - - - - -
- + + <> + + - - - - - Next line - -
- - + /> + + + + + Next line + + + <> + + + + + + + Next line + + + + +
+ + + + + + Next line + +
+ ), } diff --git a/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx b/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx index 91fbd3d0333..93c050ea82a 100644 --- a/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx +++ b/packages/components/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.stickersheet.stories.tsx @@ -17,64 +17,48 @@ export default meta const StickerSheetTemplate: StickerSheetStory = { render: () => ( -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ + + + + + + + + + + + + + ), parameters: { pseudo: { diff --git a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx index 9ffabbfcc85..baeb4d90a67 100644 --- a/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx +++ b/packages/components/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx @@ -16,57 +16,16 @@ export default { }, } satisfies Meta -const ToggleIconButtonGroup = ({ - rowTitle, - ...props -}: Omit & { - rowTitle: string -}): JSX.Element => ( - - } - {...props} - /> - } - {...props} - data-sb-pseudo-styles="hover" - /> - } - {...props} - isActive - /> - } - {...props} - data-sb-pseudo-styles="focus" - /> - } - {...props} - disabled - /> - } - {...props} - disabled - data-sb-pseudo-styles="focus" - /> - -) - const StickerSheetTemplate: StickerSheetStory = { - render: () => ( - - { + const defaultProps = { + label: "bold", + icon: , + } satisfies ToggleIconButtonProps + + return ( + - + > {moodsList.map(mood => ( - + + + + + + + + ))} - - - ), + + ) + }, parameters: { pseudo: { hover: '[data-sb-pseudo-styles="hover"]', diff --git a/packages/components/src/SearchField/_docs/SearchField.stickersheet.stories.tsx b/packages/components/src/SearchField/_docs/SearchField.stickersheet.stories.tsx index 5320c943a13..1e8ccf6c99d 100644 --- a/packages/components/src/SearchField/_docs/SearchField.stickersheet.stories.tsx +++ b/packages/components/src/SearchField/_docs/SearchField.stickersheet.stories.tsx @@ -40,39 +40,40 @@ const StickerSheetTemplate: StickerSheetStory = { <> {variants.map(({ heading, variantProps }) => ( - - - - - - - - - + + + + + + - - - - - - - - - + + + + + + ))} diff --git a/packages/components/src/Select/_docs/Select.stickersheet.stories.tsx b/packages/components/src/Select/_docs/Select.stickersheet.stories.tsx index 68b0c439323..2dd4b48a09a 100644 --- a/packages/components/src/Select/_docs/Select.stickersheet.stories.tsx +++ b/packages/components/src/Select/_docs/Select.stickersheet.stories.tsx @@ -45,136 +45,137 @@ const OPTIONS = [ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - - - - - - - - - + + + + + + - - - - - - - + + + + + - - - - - - - - - - + + + + + + + + - - - - - - - + + + + + ), diff --git a/packages/components/src/Slider/_docs/Slider.stickersheet.stories.tsx b/packages/components/src/Slider/_docs/Slider.stickersheet.stories.tsx index 5075f28aa77..b3018dad870 100644 --- a/packages/components/src/Slider/_docs/Slider.stickersheet.stories.tsx +++ b/packages/components/src/Slider/_docs/Slider.stickersheet.stories.tsx @@ -16,102 +16,91 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: () => ( - - - - - - - Example Description - - } - minLabel={Min} - maxLabel={Max} - disabled - data-sb-a11y-color-contrast-disable - /> - - - Example Description - - } - minLabel={Min} - maxLabel={Max} - variant="prominent" - disabled - data-sb-a11y-color-contrast-disable - /> - - - - - Example Description - - } - minLabel={Min} - maxLabel={Max} - labelPosition="block" - disabled - data-sb-a11y-color-contrast-disable - /> - Min} - maxLabel={Max} - labelPosition="block" - variant="prominent" - /> - - Example Description - - } - minLabel={Min} - maxLabel={Max} - variant="prominent" - labelPosition="block" - disabled - data-sb-a11y-color-contrast-disable - /> - - + + + + Example Description + } + minLabel={Min} + maxLabel={Max} + disabled + data-sb-a11y-color-contrast-disable + /> + + Example Description + } + minLabel={Min} + maxLabel={Max} + variant="prominent" + disabled + data-sb-a11y-color-contrast-disable + /> + + + + Example Description + } + minLabel={Min} + maxLabel={Max} + labelPosition="block" + disabled + data-sb-a11y-color-contrast-disable + /> + Min} + maxLabel={Max} + labelPosition="block" + variant="prominent" + /> + Example Description + } + minLabel={Min} + maxLabel={Max} + variant="prominent" + labelPosition="block" + disabled + data-sb-a11y-color-contrast-disable + /> + ), } diff --git a/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx b/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx index 5f30ba074dd..7177942d9cd 100644 --- a/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx +++ b/packages/components/src/SplitButton/_docs/SplitButton.stickersheet.stories.tsx @@ -35,76 +35,70 @@ const ROWS_MAP = [ const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( <> - - - - {ROWS_MAP.map(({ rowTitle, ...props }) => ( - - - - - ))} - + + {ROWS_MAP.map(({ rowTitle, ...props }) => ( + + + + + ))} - - - - - - - - - - - - - - + + + + + + + + + + + ), diff --git a/packages/components/src/Tag/_docs/Tag.stickersheet.stories.tsx b/packages/components/src/Tag/_docs/Tag.stickersheet.stories.tsx index 88c7039be75..75e8423e9a5 100644 --- a/packages/components/src/Tag/_docs/Tag.stickersheet.stories.tsx +++ b/packages/components/src/Tag/_docs/Tag.stickersheet.stories.tsx @@ -30,64 +30,56 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - {TagVariants.map(variant => ( - - <> - Tag - - Small - - - <> - - Tag - - - Small - - - - ))} - - - - - } - > - Jane Doe - - - } - dismissible - > - Jane Doe - + + {TagVariants.map(variant => ( + + <> + Tag + + Small + + + <> + + Tag + + + Small + + - + ))} + + + } + > + Jane Doe + + + } + dismissible + > + Jane Doe + + ), } diff --git a/packages/components/src/Text/_docs/Text.stickersheet.stories.tsx b/packages/components/src/Text/_docs/Text.stickersheet.stories.tsx index 92da412de81..f62d6e87eb8 100644 --- a/packages/components/src/Text/_docs/Text.stickersheet.stories.tsx +++ b/packages/components/src/Text/_docs/Text.stickersheet.stories.tsx @@ -19,62 +19,58 @@ const StickerSheetTemplate: StickerSheetStory = { const fontColour = isReversed ? "white" : "dark" return ( - <> - - - - + + + + The quick brown fox jumps over the lazy dog. + + + + + The quick brown fox jumps over the lazy dog. + + + + + The quick brown fox jumps over the lazy dog. + + + + + The quick brown fox jumps over the lazy dog. + + + + + The quick brown fox jumps over the lazy dog. + + + {!isReversed ? ( + <> + + The quick brown fox jumps over the lazy dog. - - + + The quick brown fox jumps over the lazy dog. - - - The quick brown fox jumps over the lazy dog. - - - - - The quick brown fox jumps over the lazy dog. - - - - + + The quick brown fox jumps over the lazy dog. - {!isReversed ? ( - <> - - - The quick brown fox jumps over the lazy dog. - - - - - The quick brown fox jumps over the lazy dog. - - - - - The quick brown fox jumps over the lazy dog. - - - - ) : ( - - - The quick brown fox jumps over the lazy dog. - - - )} - - - + + ) : ( + + + The quick brown fox jumps over the lazy dog. + + + )} + ) }, } diff --git a/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx b/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx index dbf1e5ceeda..33dd5ea5ce3 100644 --- a/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx +++ b/packages/components/src/TextArea/_docs/TextArea.stickersheet.stories.tsx @@ -27,37 +27,34 @@ export default { const StickerSheetTemplate: StickerSheetStory = { render: ({ isReversed }) => ( - - - - -