Skip to content

Commit

Permalink
chore(Timeline): migrate stories from CSF2 to CSF3
Browse files Browse the repository at this point in the history
  • Loading branch information
@domihustinova
domihustinova committed Oct 7, 2024
1 parent e3b901c commit 96ff5c3
Showing 1 changed file with 125 additions and 174 deletions.
299 changes: 125 additions & 174 deletions packages/orbit-components/src/Timeline/Timeline.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 }) => (
<>
<div style={{ display: open ? "block" : "none" }}>{children}</div>
<Button onClick={() => setOpen(true)}>Open</Button>
</>
),
onClose: () => {
setOpen(false);
action("onClose")();
},
};
}

export const Default = ({ type, label, time, direction, children }) => {
return (
<Timeline dataTest={dataTest} direction={direction}>
<TimelineStep label="Requested" subLabel="3rd May 14:04" type="success">
We’ve received your request and will assign it to one of our agents.
</TimelineStep>
<TimelineStep label={label} subLabel={time} type={type}>
{children}
</TimelineStep>
<TimelineStep label="Waiting for the carrier" subLabel="5th May 15:03" type="info">
We’ll wait for the carrier(s) to send us the refund and contact them again if necessary.
</TimelineStep>
<TimelineStep label="Carrier is refunding" subLabel="6th May 20:50">
The carrier has sent us a refund. There might be more depending on their policy.
</TimelineStep>
<TimelineStep label="Refunded">
We’ll forward you all refunds from the carrier(s) after we receive it.
</TimelineStep>
</Timeline>
);
};
type ToastPropsAndCustomArgs = React.ComponentProps<typeof Timeline> &
React.ComponentProps<typeof TimelineStep>;

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<ToastPropsAndCustomArgs> = {
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<ToastPropsAndCustomArgs>;

export const DefaultWithOptionalChildren = () => {
return (
export const Default: Story = {
render: () => (
<Timeline>
<TimelineStep label="Waiting for your passport or ID details" type="success" />
<TimelineStep label="Waiting for your passport or ID details" />
<TimelineStep label="Waiting for check-in" />
<TimelineStep label="Processing check-in" />
<TimelineStep label="Boarding pass ready" />
</Timeline>
);
};
),

export const AllSuccessfull = () => {
return (
<Timeline>
<TimelineStep label="Requested" type="success">
Step 1
</TimelineStep>
<TimelineStep label="Done" type="success">
Step 2
</TimelineStep>
<TimelineStep label="Waiting for the carrier" type="success">
Step 3
</TimelineStep>
<TimelineStep label="Carrier is refunding" type="success">
Step 4
</TimelineStep>
<TimelineStep label="Refunded" type="success" active={false}>
Step 5
</TimelineStep>
</Timeline>
);
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 (
<Container>
<Modal onClose={onClose} lockScrolling={false}>
<ModalSection>
<Timeline>
<TimelineStep label="Requested" subLabel="3rd May 14:04" type="success">
We’ve assigned your request to one of our agents.
</TimelineStep>
<TimelineStep label="In progress" subLabel="4th May 10:25" type="success">
We’ve applied for a refund from the carrier(s).
</TimelineStep>
<TimelineStep label="Waiting for the carrier" subLabel="5th May 15:03" type="success">
We’ve applied for a refund from the carrier(s).
</TimelineStep>
<TimelineStep label="Carrier is refunding" subLabel="6th May 20:50" type="success">
The carrier(s) is processing your refund request. We’ll contact them again if
necessary.
</TimelineStep>
<TimelineStep label="Refunded" subLabel="8th May 15:30" type="success">
We’ll forward you all refunds from the carrier(s) after we receive it.
</TimelineStep>
</Timeline>
</ModalSection>
</Modal>
</Container>
);
},

parameters: {
info: "This is the default configuration of this component.",
controls: {
disable: true,
},
},
};

export const WithWarning = ({ label, time, type, children }) => {
return (
<Timeline dataTest={dataTest}>
export const Playground: Story = {
render: ({ children, label, subLabel, type, active, ...args }) => (
<Timeline {...args}>
<TimelineStep label="Requested" subLabel="3rd May 14:04" type="success">
We’ve received your request and will assign it to one of our agents.
</TimelineStep>
<TimelineStep label="In progress" subLabel="4th May 10:25" type="success">
We’ll review your request and apply for any available refund from the carrier(s).
</TimelineStep>
<TimelineStep label={label} subLabel={time} type={type}>
<TimelineStep label={label} subLabel={subLabel} type={type} active={active}>
{children}
</TimelineStep>
<TimelineStep label="Carrier is refunding" subLabel="6th May 20:50">
Expand All @@ -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.
</TimelineStep>
</Timeline>
);
};
),

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 (
<Timeline dataTest={dataTest}>
<TimelineStep label="Requested" subLabel="3rd May 14:04" type="success">
We’ve assigned your request to one of our agents.
</TimelineStep>
<TimelineStep label="In progress" subLabel="4th May 10:25" type="success">
We’ve applied for a refund from the carrier(s).
</TimelineStep>
<TimelineStep label="Waiting for the carrier" subLabel="5th May 15:03" type="success">
We’ve applied for a refund from the carrier(s).
</TimelineStep>
<TimelineStep label="Carrier is refunding" subLabel="6th May 20:50" type="success">
The carrier(s) is processing your refund request. We’ll contact them again if necessary.
</TimelineStep>
<TimelineStep label={label} subLabel={time} type={type}>
{children}
</TimelineStep>
</Timeline>
);
};

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 (
<Modal>
<ModalSection>
<Timeline dataTest={dataTest}>
<TimelineStep label="Requested" subLabel="3rd May 14:04" type="success">
We’ve assigned your request to one of our agents.
</TimelineStep>
<TimelineStep label="In progress" subLabel="4th May 10:25" type="success">
We’ve applied for a refund from the carrier(s).
</TimelineStep>
<TimelineStep label="Waiting for the carrier" subLabel="5th May 15:03" type="success">
We’ve applied for a refund from the carrier(s).
</TimelineStep>
<TimelineStep label="Carrier is refunding" subLabel="6th May 20:50" type="success">
The carrier(s) is processing your refund request. We’ll contact them again if necessary.
</TimelineStep>
<TimelineStep label="Refunded" subLabel="8th May 15:30" type="success">
We’ll forward you all refunds from the carrier(s) after we receive it.
</TimelineStep>
</Timeline>
</ModalSection>
</Modal>
);
};

InsideModal.story = {
name: "inside Modal",
};

export const Rtl = () => {
return (
export const Rtl: Story = {
render: () => (
<RenderInRtl>
<Timeline dataTest={dataTest}>
<Timeline>
<TimelineStep label="Requested" subLabel="3rd May 14:04" type="success">
We’ve assigned your request to one of our agents.
</TimelineStep>
Expand All @@ -234,9 +182,12 @@ export const Rtl = () => {
</TimelineStep>
</Timeline>
</RenderInRtl>
);
};
),

Rtl.story = {
name: "RTL",
parameters: {
info: "This is a preview of this component in RTL setup.",
controls: {
disable: true,
},
},
};

0 comments on commit 96ff5c3

Please sign in to comment.