📝(react) add Alert doc
Add the Alert doc with various examples and use cases.
This commit is contained in:
Nathan Vasse
109
packages/react/src/components/Alert/index.mdx
Normal file
109
packages/react/src/components/Alert/index.mdx
Normal file
@@ -0,0 +1,109 @@
|
||||
import { Canvas, Meta, Story, Source, ArgTypes } from '@storybook/blocks';
|
||||
import { Alert } from "./index";
|
||||
import * as Stories from './index.stories';
|
||||
|
||||
<Meta of={Stories}/>
|
||||
|
||||
# Alert
|
||||
|
||||
Cunningham provides a versatile Alert component for displaying any kind of information.
|
||||
|
||||
<Canvas of={Stories.All}/>
|
||||
|
||||
<Source
|
||||
language='ts'
|
||||
dark
|
||||
format={false}
|
||||
code={`import { Alert } from "@openfun/cunningham-react";`}
|
||||
/>
|
||||
|
||||
## Types
|
||||
|
||||
You can use the `type` prop to change the style of the alert.
|
||||
|
||||
<Canvas of={Stories.Info}/>
|
||||
<Canvas of={Stories.Success}/>
|
||||
<Canvas of={Stories.Warning}/>
|
||||
<Canvas of={Stories.Error}/>
|
||||
<Canvas of={Stories.Neutral}/>
|
||||
|
||||
## Format
|
||||
|
||||
There are 3 possible formats for the alert, the one line, the multi line one and the expandable one.
|
||||
|
||||
|
||||
#### The one line format
|
||||
|
||||
<Canvas of={Stories.Info}/>
|
||||
|
||||
#### The multi line format
|
||||
|
||||
> This one is automatically applied when you provide `additionalInformation` prop.
|
||||
|
||||
<Canvas of={Stories.InfoAdditionalInformation}/>
|
||||
|
||||
#### The expandable format
|
||||
|
||||
> This one is automatically applied when you provide `additionalInformation` and `expandable` prop.
|
||||
|
||||
<Canvas of={Stories.InfoExpandable}/>
|
||||
|
||||
## Actions
|
||||
|
||||
As you can see in the examples above, you can display buttons on the alerts. You can use the following prop to do so:
|
||||
|
||||
- `primaryLabel`
|
||||
- `primaryOnClick`
|
||||
- `primaryProps`
|
||||
|
||||
Those props are shortcuts props provided to the `Button` component.
|
||||
|
||||
<Canvas of={Stories.Info}/>
|
||||
|
||||
The same goes for the tertiary button:
|
||||
|
||||
- `tertiaryLabel`
|
||||
- `tertiaryOnClick`
|
||||
- `tertiaryProps`
|
||||
|
||||
<Canvas of={Stories.InfoWithTertiary}/>
|
||||
|
||||
> Those buttons automatically adapt according to the alert format.
|
||||
|
||||
### Customize actions
|
||||
|
||||
If the default provided buttons are not enough for you, you can provide your own buttons and any `ReactNode` you want.
|
||||
To achieve that, you can use the `buttons` prop.
|
||||
|
||||
> We strongly recommend you to stick to the default `primaryLabel` and `tertiaryLabel` props to match the design system.
|
||||
|
||||
<Canvas of={Stories.CustomButtons}/>
|
||||
|
||||
## Controlled / Non Controlled
|
||||
|
||||
There are two different props that can be used to control the alert: `expanded`, `closed`.
|
||||
|
||||
When using those props, you must provide `onExpand` and `onClose` callbacks to handle the state of the alert.
|
||||
|
||||
<Canvas of={Stories.Controlled}/>
|
||||
<Canvas of={Stories.ExpandableControlled}/>
|
||||
|
||||
## Props
|
||||
|
||||
<ArgTypes of={Alert} />
|
||||
|
||||
|
||||
|
||||
## Design tokens
|
||||
|
||||
Here are the custom design tokens defined by the Alert.
|
||||
|
||||
| Token | Description |
|
||||
|--------------- |----------------------------- |
|
||||
| background-color | Default background color |
|
||||
| border-radius | Border radius of the Alert |
|
||||
| font-weight | Font weight of the main content |
|
||||
| color | Color of the main content |
|
||||
| additional-font-weight | Font weight of the additional information |
|
||||
| additional-color | Color of the additional content |
|
||||
| icon-size | Size of the left icon |
|
||||
163
packages/react/src/components/Alert/index.stories.tsx
Normal file
163
packages/react/src/components/Alert/index.stories.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
import { Meta, StoryObj } from "@storybook/react";
|
||||
import React from "react";
|
||||
import { Alert, AlertProps, AlertType } from ":/components/Alert";
|
||||
import { Button } from ":/components/Button";
|
||||
|
||||
const meta: Meta<typeof Alert> = {
|
||||
title: "Components/Alert",
|
||||
component: Alert,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof Alert>;
|
||||
|
||||
export const All: Story = {
|
||||
render: (args) => {
|
||||
const customProps: AlertProps = { type: args.type ?? AlertType.INFO };
|
||||
return (
|
||||
<div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
|
||||
<Alert {...Info.args} primaryLabel={undefined} {...customProps} />
|
||||
<Alert {...Info.args} {...customProps} />
|
||||
<Alert {...InfoAdditionalInformation.args} {...customProps} />
|
||||
<Alert
|
||||
{...Info.args}
|
||||
additional="Additional information"
|
||||
expandable={true}
|
||||
expanded={true}
|
||||
{...customProps}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
argTypes: {
|
||||
type: {
|
||||
options: ["info", "success", "warning", "error", "neutral"],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const Info: Story = {
|
||||
args: {
|
||||
children: "Alert component info",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
},
|
||||
};
|
||||
export const InfoWithTertiary: Story = {
|
||||
args: {
|
||||
children: "Alert component info",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
tertiaryLabel: "Tertiary",
|
||||
},
|
||||
};
|
||||
export const CustomButtons: Story = {
|
||||
args: {
|
||||
children: "Alert component info",
|
||||
canClose: true,
|
||||
buttons: (
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
<Button color="primary">Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
export const Success: Story = {
|
||||
args: {
|
||||
children: "Alert component Success",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
type: AlertType.SUCCESS,
|
||||
},
|
||||
};
|
||||
|
||||
export const Warning: Story = {
|
||||
args: {
|
||||
children: "Alert component Warning",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
type: AlertType.WARNING,
|
||||
},
|
||||
};
|
||||
|
||||
export const Error: Story = {
|
||||
args: {
|
||||
children: "Alert component Error",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
type: AlertType.ERROR,
|
||||
},
|
||||
};
|
||||
|
||||
export const Neutral: Story = {
|
||||
args: {
|
||||
children: "Alert component Neutral",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
type: AlertType.NEUTRAL,
|
||||
},
|
||||
};
|
||||
|
||||
export const InfoAdditionalInformation: Story = {
|
||||
args: {
|
||||
children: "Alert component info",
|
||||
additional: "Additional information",
|
||||
canClose: true,
|
||||
primaryLabel: "Primary",
|
||||
tertiaryLabel: "Tertiary ",
|
||||
},
|
||||
};
|
||||
|
||||
export const Controlled: Story = {
|
||||
render: () => {
|
||||
const [closed, setClosed] = React.useState(false);
|
||||
return (
|
||||
<div>
|
||||
<Alert {...Info.args} closed={closed} onClose={() => setClosed(true)} />
|
||||
<div>closed: {closed ? "true" : "false"}</div>
|
||||
<Button onClick={() => setClosed(false)}>Open</Button>
|
||||
<Button onClick={() => setClosed(true)}>Close</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const InfoExpandable: Story = {
|
||||
render: () => {
|
||||
return (
|
||||
<Alert
|
||||
{...Info.args}
|
||||
additional="Additional information"
|
||||
expandable={true}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export const ExpandableControlled: Story = {
|
||||
render: () => {
|
||||
const [closed, setClosed] = React.useState(false);
|
||||
const [expanded, setExpanded] = React.useState(false);
|
||||
return (
|
||||
<div>
|
||||
<Alert
|
||||
{...Info.args}
|
||||
additional="Additional information"
|
||||
closed={closed}
|
||||
onClose={() => setClosed(true)}
|
||||
expandable={true}
|
||||
expanded={expanded}
|
||||
onExpand={(value) => setExpanded(value)}
|
||||
/>
|
||||
<div>closed: {closed ? "true" : "false"}</div>
|
||||
<Button onClick={() => setClosed(false)}>Open</Button>
|
||||
<Button onClick={() => setClosed(true)}>Close</Button>
|
||||
<div>expanded: {expanded ? "true" : "false"}</div>
|
||||
<Button onClick={() => setExpanded(true)}>Expand</Button>
|
||||
<Button onClick={() => setExpanded(false)}>Shrink</Button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user