Skip to content

Commit

Permalink
chore(Modal): migrate from CSF2 to CSF3 - pt2
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarkaaa
sarkaaa committed Sep 5, 2024
1 parent faa5233 commit 84d3983
Showing 1 changed file with 154 additions and 153 deletions.
307 changes: 154 additions & 153 deletions packages/orbit-components/src/Modal/Modal.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,23 @@ import Stack from "../Stack";
import ButtonLink from "../ButtonLink";
import RenderInRtl from "../utils/rtl/RenderInRtl";
import Card from "../Card";
import CarrierLogo from "../CarrierLogo";
import CardSection from "../Card/CardSection";
import Tooltip from "../Tooltip";
import Tile from "../Tile";
import Box from "../Box";
import InputField from "../InputField";
import InputGroup from "../InputGroup";
import Select from "../Select";
import CountryFlag from "../CountryFlag";
import Radio from "../Radio";
import Checkbox from "../Checkbox";
import TextLink from "../TextLink";
import Itinerary, {
ItinerarySegment,
ItinerarySegmentDetail,
ItinerarySegmentStop,
ItineraryStatus,
} from "../Itinerary";
import Badge from "../Badge";

import Modal, { ModalHeader, ModalSection, ModalFooter } from ".";

Expand Down Expand Up @@ -52,6 +64,10 @@ const meta: Meta<ModalPropsAndCustomArgs> = {
description: "I'm lovely description",
children:
"You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
flex: ["0 0 auto", "1 1 100%"],
hasCloseButton: true,
disableAnimation: false,
labelClose: "Close",
},

argTypes: {
Expand Down Expand Up @@ -90,156 +106,6 @@ function useModal() {
};
}

export const Sizes: Story = {
render: ({ title, description, children, ...args }) => {
const { Container, onClose } = useModal();

return (
<Container>
<Modal {...args} onClose={onClose}>
<ModalHeader title={title}>{description}</ModalHeader>
<ModalSection>
<Text>{children}</Text>
</ModalSection>
</Modal>
</Container>
);
},

args: {
illustration: undefined,
},

parameters: {
controls: {
exclude: [
"fixedFooter",

"showBack",
"showSection",
"suppressed",
"illustration",
"autoFocus",
"isMobileFullPage",
"preventOverlayClose",
"hasCloseButton",
"disableAnimation",
"labelClose",
"lockScrolling",
],
},
},
};

export const ShortModal: Story = {
render: ({ ...args }) => {
const { Container, onClose } = useModal();
return (
<Container>
<Modal onClose={onClose} {...args}>
<ModalSection>
<Stack>
<Text uppercase weight="bold">
OUTBOUND
</Text>
<Tile
expandable
title={
<Stack direction="row" align="center" justify="between" spacing="200">
<CarrierLogo carriers={[{ code: "FR", name: "Ryanair" }]} size="large" />
<Stack spacing="100">
<Text size="small" type="secondary">
Sat, Mar 31 Trip length: 1h55m
</Text>
<Stack direction="row" spacing="100" align="center">
<Text weight="bold">London LHR</Text>
<FlightDirect size="small" />
<Text weight="bold">Prague PRG</Text>
</Stack>
</Stack>
</Stack>
}
>
Hidden Content
</Tile>
</Stack>
</ModalSection>
</Modal>
</Container>
);
},

args: {
illustration: undefined,
size: undefined,
title: undefined,
description: undefined,
},

parameters: {
controls: {
disable: true,
},
},
};

export const WithoutSection: Story = {
render: ({ showSection, children, ...args }) => {
const { Container, onClose } = useModal();
return (
<Container>
<Modal onClose={onClose} {...args}>
<ModalHeader
title="Enjoy something to eat while you fly"
illustration={<Illustration name="Meal" size="small" />}
description="Select a flight below to see the menu (where available)"
/>
{showSection && (
<ModalSection>
<Text>{children}</Text>
</ModalSection>
)}
<ModalFooter flex={["0 0 auto", "1 1 100%"]}>
<Button iconLeft={<ChevronBackward />} type="secondary">
Back
</Button>
<Button fullWidth>Proceed to Payment (23.98€)</Button>
</ModalFooter>
</Modal>
</Container>
);
},

args: {
title: undefined,
description: undefined,
illustration: undefined,
size: undefined,
},

parameters: {
controls: {
exclude: [
"size",
"title",
"description",
"mobileHeader",
"fixedFooter",
"showBack",
"suppressed",
"illustration",
"autoFocus",
"isMobileFullPage",
"preventOverlayClose",
"hasCloseButton",
"disableAnimation",
"labelClose",
"lockScrolling",
],
},
},
};

export const RemovableSections: Story = {
render: ({ showSection, children, lockScrolling }) => {
const { Container, onClose } = useModal();
Expand Down Expand Up @@ -273,6 +139,7 @@ export const RemovableSections: Story = {
parameters: {
controls: {
exclude: [
"flex",
"size",
"title",
"description",
Expand Down Expand Up @@ -473,11 +340,13 @@ export const WithFixedFooter: Story = {
illustration: undefined,
title: undefined,
description: undefined,
fixedFooter: true,
},

parameters: {
controls: {
exclude: [
"flex",
"size",
"title",
"description",
Expand All @@ -499,6 +368,138 @@ export const WithFixedFooter: Story = {
},
};

export const WithForm: Story = {
render: ({ showSection }) => {
const { Container, onClose } = useModal();

return (
<Container>
<Modal onClose={onClose} fixedFooter autoFocus={false} lockScrolling={false}>
<ModalHeader title="Refund" description="Reservation number: 123456789" />
<ModalSection>
<Stack>
<Card title="Cancellation" />
<Text size="small" weight="bold">
Contact information
</Text>
<InputField label="E-mail" autoFocus placeholder="Your email" />
<InputGroup
flex={["0 0 120px", "1 1 100%"]}
onChange={action("onChange")}
label="Mobile phone"
>
<Select
options={[
{ value: 1, label: "+420" },
{ value: 2, label: "+421" },
]}
value={1}
prefix={<CountryFlag code="cz" />}
/>
<InputField placeholder="111 222 333" />
</InputGroup>
{showSection && (
<>
<Text weight="bold" size="small">
Options
</Text>
<Radio label="Option one" checked />
<Radio label="Option two" />
<Text size="small" type="secondary" spaceAfter="large">
These are the most favorite. <TextLink href="#">Show more</TextLink>
</Text>
<Checkbox label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at mauris laoreet, eleifend nunc eu, venenatis sem. Etiam ullamcorper euismod suscipit. In a tortor ac velit elementum ultrices. Sed accumsan suscipit pulvinar." />
</>
)}
</Stack>
</ModalSection>
<ModalFooter flex={["0 0 auto", "1 1 100%"]}>
<Button iconLeft={<ChevronBackward />} type="secondary">
Back
</Button>
<Button fullWidth>Proceed to Payment (23.98€)</Button>
</ModalFooter>
</Modal>
</Container>
);
},

parameters: {
info: "An example of a modal with a form. Check Orbit.Kiwi for more detailed design guidelines.",
controls: {
exclude: [
"flex",
"size",
"title",
"description",
"mobileHeader",
"fixedFooter",
"showBack",
"suppressed",
"illustration",
"autoFocus",
"isMobileFullPage",
"preventOverlayClose",
"hasCloseButton",
"disableAnimation",
"labelClose",
"lockScrolling",
"children",
],
},
},
};

export const WithItinerary: Story = {
render: () => {
const { Container, onClose } = useModal();

return (
<Container>
<Modal onClose={onClose} autoFocus={false} lockScrolling={false}>
<ModalSection>
<Itinerary>
<ItineraryStatus type="success" label="This part is new">
<ItinerarySegment>
<ItinerarySegmentStop
city="Prague"
station="Václav Haivel Airport Prague (PRG)"
time="16:20"
date="Wed, 15.6"
/>
<ItinerarySegmentDetail
duration="2h 10m"
summary={
<Badge carriers={[{ code: "FR", name: "Ryanair" }]} border={false}>
Ryanair
</Badge>
}
/>
<ItinerarySegmentStop
hidden
city="Frankfurt"
time="18:30"
date="Wed, 15.6"
station="Frankfurt International Airport "
/>
<ItinerarySegmentStop city="New York JFK" station="United States" />
</ItinerarySegment>
</ItineraryStatus>
</Itinerary>
</ModalSection>
</Modal>
</Container>
);
},

parameters: {
info: "An example of a modal with an Itineary component. Check Orbit.Kiwi for more detailed design guidelines.",
controls: {
disable: true,
},
},
};

type PlagroundStory = StoryObj<ModalPropsAndCustomArgs & { header: boolean; footer: boolean }>;
export const Playground: PlagroundStory = {
render: ({
Expand Down Expand Up @@ -564,7 +565,7 @@ export const Playground: PlagroundStory = {

parameters: {
controls: {
exclude: ["autoFocus", "hasCloseButton", "disableAnimation", "labelClose"],
exclude: ["autoFocus"],
},
},
};
Expand Down

0 comments on commit 84d3983

Please sign in to comment.