From 09043f68fb2f43efee969ef4de0268dcf8096f1b Mon Sep 17 00:00:00 2001 From: Dominika Hustinova Date: Thu, 26 Sep 2024 09:56:36 +0200 Subject: [PATCH] chore(TileGroup): migrate stories from CSF2 to CSF3 --- .../src/TileGroup/TileGroup.stories.tsx | 453 +++++++++--------- 1 file changed, 224 insertions(+), 229 deletions(-) diff --git a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx index 138d3023f4..7682695267 100644 --- a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx +++ b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx @@ -1,5 +1,6 @@ import * as React from "react"; import { action } from "@storybook/addon-actions"; +import type { Meta, StoryObj } from "@storybook/react"; import * as Icons from "../icons"; import Stack from "../Stack"; @@ -14,272 +15,266 @@ import TileGroup from "."; const getIcon = source => Icons[source]; -export default { +type TileGroupPropsAndCustomArgs = React.ComponentProps & + React.ComponentProps & { + content: string; + }; + +const meta: Meta = { title: "TileGroup", + component: TileGroup, }; -export const DefaultJustWrapper = ({ dataTest, as, content }) => { - return ( - - {content} - {content} - {content} - {content} - - ); -}; +export default meta; +type Story = StoryObj; -DefaultJustWrapper.story = { - name: "Default - just wrapper", +export const DefaultJustWrapper: Story = { + render: ({ content }) => { + return ( + + {content} + {content} + {content} + {content} + + ); + }, parameters: { - info: "This is the default configuration of this component.", + info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.", }, -}; -DefaultJustWrapper.args = { - dataTest: "test", - as: "div", - content: "Lorem ipsum dolor sit amet", -}; - -export const DefaultWithHeaderProps = ({ title, description, icon }) => { - const Icon = getIcon(icon); - return ( - - } - title={title} - description={description} - /> - } - title={title} - description={description} - /> - } - title={title} - description={description} - /> - } - title={title} - description={description} - /> - - ); + args: { + content: "Lorem ipsum dolor sit amet", + }, }; -DefaultWithHeaderProps.story = { - name: "Default - with header props", +export const DefaultWithHeaderProps: Story = { + render: ({ title, description, icon }) => { + const Icon = getIcon(icon); + return ( + + } + title={title} + description={description} + /> + } + title={title} + description={description} + /> + } + title={title} + description={description} + /> + } + title={title} + description={description} + /> + + ); + }, parameters: { - info: "This is the default configuration of this component.", + info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.", }, -}; -DefaultWithHeaderProps.args = { - title: "Expandable", - description: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.", - icon: "Airplane", -}; + args: { + title: "Title", + description: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.", + icon: "Airplane", + }, -DefaultWithHeaderProps.argTypes = { - icon: { - options: Object.keys(Icons), - control: { - type: "select", + argTypes: { + icon: { + options: Object.keys(Icons), + control: { + type: "select", + }, }, }, }; -export const ExpandableWithCustomDescription = ({ icon }) => { - const Icon = getIcon(icon); +export const Playground: Story = { + render: args => { + const Icon = getIcon("GenderMan"); - return ( - - } - onClick={action("clicked")} - expandable - header={ - - - - - Mr. Hot potato - - + return ( + + } + onClick={action("clicked")} + expandable + header={ + + + + + Mr. Hot potato + + + + 13/37/1337 - 13/37/1337 - - - You - - - } - > - This is example of expanded content - - } - onClick={action("clicked")} - expandable - header={ - - - - - Mr. Hot potato - - + + You - 13/37/1337 - - - You - - } - > - This is example of expanded content - - } - onClick={action("clicked")} - expandable - header={ - - - - - Mr. Hot potato - - + } + > + This is example of expanded content + + } + onClick={action("clicked")} + expandable + header={ + + + + + Mr. Hot potato + + + + 13/37/1337 + + + You - 13/37/1337 - - - You - - } - > - This is example of expanded content - - } - onClick={action("clicked")} - expandable - header={ - - - - - Mr. Hot potato - - + } + > + This is example of expanded content + + } + onClick={action("clicked")} + expandable + header={ + + + + + Mr. Hot potato + + + + 13/37/1337 + + + You - 13/37/1337 - - You + } + > + This is example of expanded content + + } + onClick={action("clicked")} + expandable + header={ + + + + + Mr. Hot potato + + + + 13/37/1337 + + + You + - - } - > - This is example of expanded content - - - ); -}; - -ExpandableWithCustomDescription.story = { - name: "Expandable with custom description", + } + > + This is example of expanded content + + + ); + }, parameters: { - info: "This is the playground configuration of this component.", + info: "This is the playground configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.", }, -}; - -ExpandableWithCustomDescription.args = { - icon: "GenderMan", -}; -ExpandableWithCustomDescription.argTypes = { - icon: { - options: Object.keys(Icons), - control: { - type: "select", - }, + args: { + id: "ID", + as: "div", }, }; -export const Rtl = () => ( - - - - Mr. John Smith - 20 kg - - } - expandable - > - This is example of expanded content - - - Mr. John Smith - 20 kg - - } - expandable - > - This is example of expanded content - - - Mr. John Smith - 20 kg - - } - expandable - > - This is example of expanded content - - - Mr. John Smith - 20 kg - - } - expandable - > - This is example of expanded content - - - -); - -Rtl.story = { - name: "RTL", +export const Rtl: Story = { + render: () => ( + + + + Mr. John Smith + 20 kg + + } + expandable + > + This is example of expanded content + + + Mr. John Smith + 20 kg + + } + expandable + > + This is example of expanded content + + + Mr. John Smith + 20 kg + + } + expandable + > + This is example of expanded content + + + Mr. John Smith + 20 kg + + } + expandable + > + This is example of expanded content + + + + ), parameters: { info: "This is a preview of this component in RTL setup.", + controls: { + disable: true, + }, }, };