From 96ff5c327b3874c0e0893d7b4e6fcc80087b0c61 Mon Sep 17 00:00:00 2001 From: Dominika Hustinova Date: Thu, 26 Sep 2024 12:52:04 +0200 Subject: [PATCH] chore(Timeline): migrate stories from CSF2 to CSF3 --- .../src/Timeline/Timeline.stories.tsx | 299 ++++++++---------- 1 file changed, 125 insertions(+), 174 deletions(-) diff --git a/packages/orbit-components/src/Timeline/Timeline.stories.tsx b/packages/orbit-components/src/Timeline/Timeline.stories.tsx index 187f067642..be08af94e1 100644 --- a/packages/orbit-components/src/Timeline/Timeline.stories.tsx +++ b/packages/orbit-components/src/Timeline/Timeline.stories.tsx @@ -1,112 +1,110 @@ import * as React from "react"; +import { action } from "@storybook/addon-actions"; +import type { Meta, StoryObj } from "@storybook/react"; +import { SPACINGS_AFTER } from "../common/consts"; +import RenderInRtl from "../utils/rtl/RenderInRtl"; import { Type as Types } from "./TimelineStep/consts"; +import Button from "../Button"; import Modal, { ModalSection } from "../Modal"; import TimelineStep from "./TimelineStep"; -import RenderInRtl from "../utils/rtl/RenderInRtl"; import Timeline from "."; -const dataTest = "test"; - -export default { - title: "Timeline", -}; +function useModal() { + const [open, setOpen] = React.useState(true); + return { + Container: ({ children }) => ( + <> +
{children}
+ + + ), + onClose: () => { + setOpen(false); + action("onClose")(); + }, + }; +} -export const Default = ({ type, label, time, direction, children }) => { - return ( - - - We’ve received your request and will assign it to one of our agents. - - - {children} - - - We’ll wait for the carrier(s) to send us the refund and contact them again if necessary. - - - The carrier has sent us a refund. There might be more depending on their policy. - - - We’ll forward you all refunds from the carrier(s) after we receive it. - - - ); -}; +type ToastPropsAndCustomArgs = React.ComponentProps & + React.ComponentProps; -Default.args = { - type: Types.Success, - label: "In progress", - time: "4th May 10:25", - direction: "row", - children: "We’ll review your request and apply for any available refund from the carrier(s)", +const meta: Meta = { + title: "Timeline", + component: Timeline, }; -Default.argTypes = { - type: { - options: Object.values(Types), - control: { - type: "select", - }, - }, - direction: { - options: ["row", "column"], - control: { - type: "select", - }, - }, -}; +export default meta; +type Story = StoryObj; -export const DefaultWithOptionalChildren = () => { - return ( +export const Default: Story = { + render: () => ( - + - ); -}; + ), -export const AllSuccessfull = () => { - return ( - - - Step 1 - - - Step 2 - - - Step 3 - - - Step 4 - - - Step 5 - - - ); + parameters: { + info: "This is the default configuration of this component. Visit Orbit.Kiwi for more detailed guidelines.", + controls: { + disable: true, + }, + }, }; -Default.story = { +export const InsideModal: Story = { + render: () => { + const { Container, onClose } = useModal(); + + return ( + + + + + + We’ve assigned your request to one of our agents. + + + We’ve applied for a refund from the carrier(s). + + + We’ve applied for a refund from the carrier(s). + + + The carrier(s) is processing your refund request. We’ll contact them again if + necessary. + + + We’ll forward you all refunds from the carrier(s) after we receive it. + + + + + + ); + }, + parameters: { - info: "This is the default configuration of this component.", + controls: { + disable: true, + }, }, }; -export const WithWarning = ({ label, time, type, children }) => { - return ( - +export const Playground: Story = { + render: ({ children, label, subLabel, type, active, ...args }) => ( + We’ve received your request and will assign it to one of our agents. We’ll review your request and apply for any available refund from the carrier(s). - + {children} @@ -116,107 +114,57 @@ export const WithWarning = ({ label, time, type, children }) => { We’ll forward you all refunds from the carrier(s) after we receive it. - ); -}; + ), -WithWarning.story = { - name: "with warning", - parameters: { info: "This is example of Timeline with warning type" }, -}; - -WithWarning.args = { - label: "Action required", - time: "5th May 15:03", - type: Types.Success, - children: "The carrier has sent us a refund. There might be more depending on their policy", -}; - -WithWarning.argTypes = { - type: { - options: Object.values(Types), - control: { - type: "select", - }, + parameters: { + info: "You can try all possible configurations of this component. Visit Orbit.Kiwi for more detailed guidelines.", }, -}; - -export const WithCritical = ({ label, time, type, children }) => { - return ( - - - We’ve assigned your request to one of our agents. - - - We’ve applied for a refund from the carrier(s). - - - We’ve applied for a refund from the carrier(s). - - - The carrier(s) is processing your refund request. We’ll contact them again if necessary. - - - {children} - - - ); -}; -WithCritical.story = { - name: "with critical", - parameters: { info: "This is example of Timeline with critical type" }, -}; - -WithCritical.args = { - label: "Non refundable", - time: "7th May 10:30", - type: Types.Critical, - children: "The carrier rejected the refund", -}; + args: { + children: "We’ve applied for a refund from the carrier(s).", + label: "Waiting for the carrier", + subLabel: "5th May 15:03", + type: Types.Success, + active: true, + spaceAfter: "medium", + direction: "row", + id: "ID", + }, -WithCritical.argTypes = { - type: { - options: Object.values(Types), - control: { - type: "select", + argTypes: { + spaceAfter: { + table: { category: "Timeline" }, + options: Object.values(SPACINGS_AFTER), + control: { + type: "select", + }, + }, + direction: { + table: { category: "Timeline" }, + options: ["row", "column"], + control: { + type: "select", + }, }, + id: { table: { category: "Timeline" } }, + children: { table: { category: "TimelineStep" } }, + label: { table: { category: "TimelineStep" } }, + subLabel: { table: { category: "TimelineStep" } }, + type: { + table: { category: "TimelineStep" }, + options: ["info", ...Object.values(Types)], + control: { + type: "select", + }, + }, + active: { table: { category: "TimelineStep" } }, }, }; -export const InsideModal = () => { - return ( - - - - - We’ve assigned your request to one of our agents. - - - We’ve applied for a refund from the carrier(s). - - - We’ve applied for a refund from the carrier(s). - - - The carrier(s) is processing your refund request. We’ll contact them again if necessary. - - - We’ll forward you all refunds from the carrier(s) after we receive it. - - - - - ); -}; - -InsideModal.story = { - name: "inside Modal", -}; - -export const Rtl = () => { - return ( +export const Rtl: Story = { + render: () => ( - + We’ve assigned your request to one of our agents. @@ -234,9 +182,12 @@ export const Rtl = () => { - ); -}; + ), -Rtl.story = { - name: "RTL", + parameters: { + info: "This is a preview of this component in RTL setup.", + controls: { + disable: true, + }, + }, };