Skip to content

Commit 4b47bae

Browse files
JLouJLou
committed
feat(distributeur): ajout des EditorialsMessages
1 parent 2e51f7d commit 4b47bae

File tree

5 files changed

+397
-0
lines changed

5 files changed

+397
-0
lines changed

‎apps/slash-stories/src/EditorialMessage.mdx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { EditorialMessage } from "@axa-fr/canopee-react/distributeur";
2+
import {
3+
Description,
4+
Primary,
5+
Stories,
6+
Subtitle,
7+
Title,
8+
} from "@storybook/addon-docs/blocks";
9+
import { Canvas, Controls, Meta } from "@storybook/blocks";
10+
import * as EditorialMessageStories from "./EditorialMessage.stories";
11+
12+
<Meta of={EditorialMessageStories} />
13+
14+
<Title />
15+
<Subtitle of={EditorialMessageStories} />
16+
<Description of={EditorialMessageStories} />
17+
18+
## Import
19+
20+
```tsx title="App.tsx"
21+
import { EditorialMessage } from "@axa-fr/canopee-react/distributeur/";
22+
```
23+
24+
## Use
25+
26+
```tsx title="App.tsx"
27+
export const EditorialMessageComponent = () => (
28+
<EditorialMessage type="ecoconception">
29+
This service is eco-designed to minimize its environmental impact.
30+
</EditorialMessage>
31+
);
32+
```
33+
34+
## Types
35+
36+
There are 3 types available for the `EditorialMessage` component:
37+
38+
<table style={{ width: "100%" }}>
39+
<thead>
40+
<tr>
41+
<th>Types</th>
42+
<th>Description</th>
43+
</tr>
44+
</thead>
45+
<tbody>
46+
<tr>
47+
<td>ecoconception</td>
48+
<td>Displays an eco-conception message</td>
49+
</tr>
50+
<tr>
51+
<td>accessibility</td>
52+
<td>Displays an accessibility message</td>
53+
</tr>
54+
<tr>
55+
<td>promotion</td>
56+
<td>Displays a promotional message</td>
57+
</tr>
58+
</tbody>
59+
</table>
60+
61+
## Playground
62+
63+
<Canvas of={EditorialMessageStories.Green} />
64+
<Controls of={EditorialMessageStories.Green} />
65+
66+
## Examples
67+
68+
### Ecoconception
69+
70+
<Canvas of={EditorialMessageStories.Green} />
71+
72+
### Accessibility
73+
74+
<Canvas of={EditorialMessageStories.Information} />
75+
76+
### Promotion
77+
78+
<Canvas of={EditorialMessageStories.Promotion} />
79+
80+
### Optional content
81+
82+
At least one of `title` or `children` props must be provided. But the other one is optional.
83+
84+
<Canvas of={EditorialMessageStories.NoTitle} />
85+
<Canvas of={EditorialMessageStories.NoContent} />

‎apps/slash-stories/src/EditorialMessage.stories.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import {
2+
EditorialMessage,
3+
EditorialMessageProps,
4+
type EditorialMessageType,
5+
} from "@axa-fr/canopee-react/distributeur";
6+
7+
import accessibilityIcon from "@material-symbols/svg-700/outlined/accessibility_new-fill.svg";
8+
import eco from "@material-symbols/svg-700/outlined/eco-fill.svg";
9+
import promotionIcon from "@material-symbols/svg-700/outlined/percent-fill.svg";
10+
import { Meta, StoryObj } from "@storybook/react";
11+
import { InputType } from "storybook/internal/types";
12+
13+
const TYPES = ["green", "information", "promotion"] as EditorialMessageType[];
14+
const iconNames = [
15+
"accessibility_new-fill",
16+
"eco-fill",
17+
"percent-fill",
18+
] as const;
19+
20+
const typeInputType: InputType = {
21+
options: TYPES,
22+
control: {
23+
type: "inline-radio",
24+
},
25+
table: {
26+
type: {
27+
summary: "string",
28+
},
29+
category: "Style",
30+
},
31+
description:
32+
"Type of the editorial message. Used to determine the icon and style.",
33+
};
34+
35+
/**
36+
* Visual component used to highlight information about accessibility, promotions, eco-design, etc.
37+
* Its display is not triggered by user interaction.
38+
*/
39+
const meta = {
40+
title: "Components/EditorialMessage",
41+
component: EditorialMessage,
42+
argTypes: {
43+
type: typeInputType,
44+
children: {
45+
control: { type: "text" },
46+
description:
47+
"Content of the editorial message. Either children or title must be provided.",
48+
table: {
49+
category: "Content",
50+
type: {
51+
summary: "string",
52+
},
53+
},
54+
},
55+
title: {
56+
control: { type: "text" },
57+
description:
58+
"Title of the message. Either title or children must be provided.",
59+
table: {
60+
category: "Content",
61+
type: {
62+
summary: "string",
63+
},
64+
},
65+
},
66+
icon: {
67+
control: { type: "inline-radio" },
68+
options: iconNames,
69+
description: "Icon displayed in the editorial message, as a URI.",
70+
table: {
71+
category: "Style",
72+
},
73+
mapping: {
74+
"accessibility_new-fill": accessibilityIcon,
75+
"eco-fill": eco,
76+
"percent-fill": promotionIcon,
77+
},
78+
},
79+
},
80+
render: (args) => <EditorialMessage {...args} icon={args.icon} />,
81+
} satisfies Meta<EditorialMessageProps>;
82+
83+
export default meta;
84+
85+
type Story = StoryObj<EditorialMessageProps>;
86+
87+
export const Green: Story = {
88+
args: {
89+
type: "green",
90+
title: "Eco-conception",
91+
icon: "eco-fill",
92+
children:
93+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
94+
},
95+
};
96+
97+
export const Information: Story = {
98+
args: {
99+
type: "information",
100+
title: "Accessibility",
101+
icon: "accessibility_new-fill",
102+
children:
103+
"This service is designed to be accessible to everyone, including people with disabilities.",
104+
},
105+
};
106+
107+
export const Promotion: Story = {
108+
args: {
109+
type: "promotion",
110+
title: "Promotion",
111+
icon: "percent-fill",
112+
children:
113+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
114+
},
115+
};
116+
117+
export const NoContent: Story = {
118+
name: "No content (title only)",
119+
args: {
120+
type: "green",
121+
title: "This application was built with eco-design in mind.",
122+
icon: "eco-fill",
123+
},
124+
argTypes: {
125+
children: { control: false },
126+
},
127+
};
128+
129+
export const NoTitle: Story = {
130+
name: "No Title (content only)",
131+
args: {
132+
type: "green",
133+
children: (
134+
<>
135+
<p>
136+
This application was built following eco-design best practices,
137+
minimizing its environmental impact through optimized code, reduced
138+
resource consumption, and sustainable development principles.
139+
</p>
140+
<p>
141+
We prioritize energy efficiency, limit data transfers, and implement
142+
green hosting solutions to ensure our digital footprint remains as
143+
small as possible while delivering exceptional user experience.
144+
</p>
145+
</>
146+
),
147+
icon: "eco-fill",
148+
},
149+
argTypes: {
150+
children: { control: false },
151+
title: { control: false },
152+
},
153+
};

‎packages/canopee-css/src/distributeur/EditorialMessage/EditorialMessage.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.af-editorial-message {
2+
display: grid;
3+
margin-bottom: 3rem;
4+
padding: 1.5rem;
5+
border: 1px solid var(--border-color);
6+
border-radius: 4px;
7+
grid-template: 1fr auto / auto 1fr;
8+
grid-template-areas: "icon title" "icon content";
9+
color: var(--text-color);
10+
background-color: var(--background-color);
11+
12+
--text-color: var(--green30);
13+
--background-color: var(--green10);
14+
--border-color: var(--green20);
15+
}
16+
17+
.af-editorial-message--information {
18+
--text-color: var(--cyan40);
19+
--background-color: var(--cyan10);
20+
--border-color: var(--cyan30);
21+
}
22+
23+
.af-editorial-message--promotion {
24+
--text-color: var(--orange40);
25+
--background-color: var(--orange10);
26+
--border-color: var(--orange30);
27+
}
28+
29+
.af-editorial-message__title {
30+
margin-bottom: 0;
31+
grid-area: title;
32+
align-content: center;
33+
font-size: 1rem;
34+
font-weight: 600;
35+
}
36+
37+
.af-editorial-message__content {
38+
grid-area: content;
39+
40+
> *:last-child {
41+
margin-bottom: 0;
42+
}
43+
}
44+
45+
.af-editorial-message__icon {
46+
display: flex;
47+
width: 2rem;
48+
height: 2rem;
49+
margin-right: 1rem;
50+
grid-area: icon;
51+
place-content: center center;
52+
background-color: var(--text-color);
53+
54+
/* Represents the star-shaped background */
55+
clip-path: polygon(
56+
100% 50%,
57+
88.04% 62.36%,
58+
90.45% 79.39%,
59+
73.51% 82.36%,
60+
65.45% 97.55%,
61+
50% 90%,
62+
34.55% 97.55%,
63+
26.49% 82.36%,
64+
9.55% 79.39%,
65+
11.96% 62.36%,
66+
0% 50%,
67+
11.96% 37.64%,
68+
9.55% 20.61%,
69+
26.49% 17.64%,
70+
34.55% 2.45%,
71+
50% 10%,
72+
65.45% 2.45%,
73+
73.51% 17.64%,
74+
90.45% 20.61%,
75+
88.04% 37.64%
76+
);
77+
fill: white;
78+
79+
svg {
80+
width: calc(12rem / 16);
81+
height: calc(12rem / 16);
82+
margin: auto;
83+
}
84+
}

‎packages/canopee-react/src/distributeur.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,3 +123,9 @@ export { Loader } from "./distributeur/Loader/Loader";
123123

124124
export { CardData } from "./distributeur/CardData/CardData";
125125
export type { CardDataVariant } from "./distributeur/CardData/CardData";
126+
127+
export {
128+
EditorialMessage,
129+
type EditorialMessageProps,
130+
type EditorialMessageType,
131+
} from "./distributeur/EditorialMessage/EditorialMessage";

0 commit comments

Comments
 (0)