diff --git a/packages/orbit-components/src/Timeline/Timeline.stories.tsx b/packages/orbit-components/src/Timeline/Timeline.stories.tsx
index 187f067642..987a55627f 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,49 @@ 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,
+ direction: "row",
+ spaceAfter: "medium",
+ id: "ID",
+ },
-WithCritical.argTypes = {
- type: {
- options: Object.values(Types),
- control: {
- type: "select",
+ argTypes: {
+ type: {
+ options: ["info", ...Object.values(Types)],
+ control: {
+ type: "select",
+ },
+ },
+ direction: {
+ options: ["row", "column"],
+ control: {
+ type: "select",
+ },
+ },
+ spaceAfter: {
+ options: Object.values(SPACINGS_AFTER),
+ control: {
+ type: "select",
+ },
},
},
};
-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 +174,12 @@ export const Rtl = () => {
- );
-};
+ ),
-Rtl.story = {
- name: "RTL",
+ parameters: {
+ info: "This is a preview of this component in RTL setup.",
+ controls: {
+ disable: true,
+ },
+ },
};