Skip to content

Commit 21e80e3

Browse files
DebaerdmDebaerdm
committed
docs(canopee): add MessageBar Storybook stories and MDX docs
1 parent b854ee8 commit 21e80e3

4 files changed

Lines changed: 316 additions & 0 deletions

File tree

‎apps/apollo-stories/src/components/MessageBar/MessageBar.mdx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Canvas, Controls, Meta } from "@storybook/addon-docs";
2+
import * as MessageBarStories from "./MessageBar.stories";
3+
4+
<Meta of={MessageBarStories} name="MessageBar" />
5+
6+
# MessageBar
7+
8+
A full-width banner used to display important information. Supports collapsible description via a toggle chevron.
9+
10+
## Playground
11+
12+
<Canvas of={MessageBarStories.Playground} />
13+
<Controls of={MessageBarStories.Playground} />
14+
15+
## Blue (default)
16+
17+
<Canvas of={MessageBarStories.Blue} />
18+
19+
## Red
20+
21+
<Canvas of={MessageBarStories.Red} />
22+
23+
## Open state
24+
25+
<Canvas of={MessageBarStories.Open} />
26+
27+
## Without description
28+
29+
<Canvas of={MessageBarStories.NoDescription} />
30+
31+
## All variants
32+
33+
<Canvas of={MessageBarStories.All} layout="fullscreen" />

‎apps/apollo-stories/src/components/MessageBar/MessageBar.stories.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
MessageBar,
4+
messageBarVariants,
5+
Button,
6+
} from "@axa-fr/canopee-react/prospect";
7+
8+
const meta: Meta<typeof MessageBar> = {
9+
component: MessageBar,
10+
title: "Components/MessageBar",
11+
parameters: { layout: "fullscreen" },
12+
decorators: [
13+
(Story) => (
14+
<div style={{ padding: "1rem", maxWidth: "900px", margin: "0 auto" }}>
15+
<Story />
16+
</div>
17+
),
18+
],
19+
argTypes: {
20+
variant: {
21+
options: Object.values(messageBarVariants),
22+
control: { type: "select" },
23+
},
24+
showDescription: {
25+
control: { type: "boolean" },
26+
},
27+
showButton: {
28+
control: { type: "boolean" },
29+
},
30+
},
31+
};
32+
33+
export default meta;
34+
type Story = StoryObj<typeof MessageBar>;
35+
36+
const primaryButton = (
37+
<Button variant="primary" onClick={() => undefined}>
38+
Primary
39+
</Button>
40+
);
41+
42+
const DESCRIPTION =
43+
"Vos informations personnelles doivent etre actualisees afin de maintenir la protection de vos donnees.";
44+
45+
const DESCRIPTION_RED =
46+
"Information utile, importante ou critique, pour aider a comprendre les informations presentees.";
47+
48+
export const Playground: Story = {
49+
name: "MessageBar",
50+
args: {
51+
title: "Pensez a mettre a jour votre dossier client AXA",
52+
variant: "blue",
53+
showDescription: true,
54+
showButton: true,
55+
button: primaryButton,
56+
description: DESCRIPTION,
57+
},
58+
};
59+
60+
export const Blue: Story = {
61+
args: {
62+
title: "Pensez a mettre a jour votre dossier client AXA",
63+
variant: "blue",
64+
button: primaryButton,
65+
description: DESCRIPTION,
66+
},
67+
};
68+
69+
export const Red: Story = {
70+
args: {
71+
title: "Titre du message",
72+
variant: "red",
73+
button: primaryButton,
74+
description: DESCRIPTION_RED,
75+
},
76+
};
77+
78+
export const MobileCollapsed: Story = {
79+
args: {
80+
title: "Pensez a mettre a jour votre dossier client AXA",
81+
variant: "blue",
82+
showDescription: false,
83+
button: primaryButton,
84+
description: DESCRIPTION,
85+
},
86+
};
87+
88+
export const NoDescription: Story = {
89+
args: {
90+
title: "Pensez a mettre a jour votre dossier client AXA",
91+
variant: "blue",
92+
button: primaryButton,
93+
},
94+
};
95+
96+
export const All: StoryObj = {
97+
render: () => (
98+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
99+
<MessageBar
100+
title="Pensez a mettre a jour votre dossier client AXA"
101+
variant="blue"
102+
button={primaryButton}
103+
description={DESCRIPTION}
104+
/>
105+
<MessageBar
106+
title="Pensez a mettre a jour votre dossier client AXA"
107+
variant="blue"
108+
showDescription={false}
109+
button={primaryButton}
110+
description={DESCRIPTION}
111+
/>
112+
<MessageBar
113+
title="Titre du message"
114+
variant="red"
115+
button={primaryButton}
116+
description={DESCRIPTION_RED}
117+
/>
118+
<MessageBar
119+
title="Titre du message"
120+
variant="red"
121+
showDescription={false}
122+
button={primaryButton}
123+
description={DESCRIPTION_RED}
124+
/>
125+
</div>
126+
),
127+
};

‎apps/look-and-feel-stories/src/components/MessageBar/MessageBar.mdx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Canvas, Controls, Meta } from "@storybook/addon-docs";
2+
import * as MessageBarStories from "./MessageBar.stories";
3+
4+
<Meta of={MessageBarStories} name="MessageBar" />
5+
6+
# MessageBar
7+
8+
A full-width banner used to display important information. Supports collapsible description via a toggle chevron.
9+
10+
## Playground
11+
12+
<Canvas of={MessageBarStories.Playground} />
13+
<Controls of={MessageBarStories.Playground} />
14+
15+
## Blue (default)
16+
17+
<Canvas of={MessageBarStories.Blue} />
18+
19+
## Red
20+
21+
<Canvas of={MessageBarStories.Red} />
22+
23+
## Open state
24+
25+
<Canvas of={MessageBarStories.Open} />
26+
27+
## All variants
28+
29+
<Canvas of={MessageBarStories.All} layout="fullscreen" />

‎apps/look-and-feel-stories/src/components/MessageBar/MessageBar.stories.tsx‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import {
3+
MessageBar,
4+
messageBarVariants,
5+
Button,
6+
} from "@axa-fr/canopee-react/client";
7+
8+
const meta: Meta<typeof MessageBar> = {
9+
component: MessageBar,
10+
title: "Components/MessageBar",
11+
parameters: { layout: "fullscreen" },
12+
decorators: [
13+
(Story) => (
14+
<div style={{ padding: "1rem", maxWidth: "900px", margin: "0 auto" }}>
15+
<Story />
16+
</div>
17+
),
18+
],
19+
argTypes: {
20+
variant: {
21+
options: Object.values(messageBarVariants),
22+
control: { type: "select" },
23+
},
24+
showDescription: {
25+
control: { type: "boolean" },
26+
},
27+
showButton: {
28+
control: { type: "boolean" },
29+
},
30+
},
31+
};
32+
33+
export default meta;
34+
type Story = StoryObj<typeof MessageBar>;
35+
36+
const primaryButton = (
37+
<Button variant="primary" onClick={() => undefined}>
38+
Primary
39+
</Button>
40+
);
41+
42+
const DESCRIPTION =
43+
"Vos informations personnelles doivent etre actualisees afin de maintenir la protection de vos donnees.";
44+
45+
const DESCRIPTION_RED =
46+
"Information utile, importante ou critique, pour aider a comprendre les informations presentees.";
47+
48+
export const Playground: Story = {
49+
name: "MessageBar",
50+
args: {
51+
title: "Pensez a mettre a jour votre dossier client AXA",
52+
variant: "blue",
53+
showDescription: true,
54+
showButton: true,
55+
button: primaryButton,
56+
description: DESCRIPTION,
57+
},
58+
};
59+
60+
export const Blue: Story = {
61+
args: {
62+
title: "Pensez a mettre a jour votre dossier client AXA",
63+
variant: "blue",
64+
button: primaryButton,
65+
description: DESCRIPTION,
66+
},
67+
};
68+
69+
export const Red: Story = {
70+
args: {
71+
title: "Titre du message",
72+
variant: "red",
73+
button: primaryButton,
74+
description: DESCRIPTION_RED,
75+
},
76+
};
77+
78+
export const MobileCollapsed: Story = {
79+
args: {
80+
title: "Pensez a mettre a jour votre dossier client AXA",
81+
variant: "blue",
82+
showDescription: false,
83+
button: primaryButton,
84+
description: DESCRIPTION,
85+
},
86+
};
87+
88+
export const NoDescription: Story = {
89+
args: {
90+
title: "Pensez a mettre a jour votre dossier client AXA",
91+
variant: "blue",
92+
button: primaryButton,
93+
},
94+
};
95+
96+
export const All: StoryObj = {
97+
render: () => (
98+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
99+
<MessageBar
100+
title="Pensez a mettre a jour votre dossier client AXA"
101+
variant="blue"
102+
button={primaryButton}
103+
description={DESCRIPTION}
104+
/>
105+
<MessageBar
106+
title="Pensez a mettre a jour votre dossier client AXA"
107+
variant="blue"
108+
showDescription={false}
109+
button={primaryButton}
110+
description={DESCRIPTION}
111+
/>
112+
<MessageBar
113+
title="Titre du message"
114+
variant="red"
115+
button={primaryButton}
116+
description={DESCRIPTION_RED}
117+
/>
118+
<MessageBar
119+
title="Titre du message"
120+
variant="red"
121+
showDescription={false}
122+
button={primaryButton}
123+
description={DESCRIPTION_RED}
124+
/>
125+
</div>
126+
),
127+
};

0 commit comments

Comments
 (0)