Skip to content

Commit b929a08

Browse files
MartinWebMartinWeb
committed
refactor(stories): create mdx for restitution component
1 parent 1197813 commit b929a08

File tree

3 files changed

+153
-136
lines changed

3 files changed

+153
-136
lines changed

‎.storybook/main.js

-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ module.exports = {
4242
'../packages/Modal/default/src/*.stories.@(ts|tsx|js)',
4343
'../packages/panel/src/*.stories.@(ts|tsx|js)',
4444
'../packages/popover/src/*.stories.@(ts|tsx|js)',
45-
'../packages/restitution/src/*.stories.@(ts|tsx|js)',
4645
'../packages/status/src/*.stories.@(ts|tsx|js)',
4746
],
4847
addons: [

‎packages/restitution/src/Restitution.stories.mdx

+153
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { Meta, Story, Canvas } from '@storybook/addon-docs';
2+
import { ArgsTable } from '@storybook/addon-docs';
3+
import ArticleRestitution from './ArticleRestitution';
4+
import HeaderRestitution from './HeaderRestitution';
5+
import Restitution from './Restitution';
6+
import SectionRestitution from './SectionRestitution';
7+
import SectionRestitutionColumn from './SectionRestitutionColumn';
8+
import SectionRestitutionRow from './SectionRestitutionRow';
9+
import RestitutionList from './RestitutionList';
10+
11+
<Meta
12+
title="Components/Restitution"
13+
component={ArticleRestitution}
14+
argTypes={{
15+
classModifier: '',
16+
className: '',
17+
headerTitle: '',
18+
headerSubtitle: '',
19+
sectionRowTitle: '',
20+
sectionColumnTitle: '',
21+
restitutionList: {
22+
control: {
23+
type: 'array',
24+
options: [],
25+
},
26+
},
27+
restitutionLabel: '',
28+
restitutionValue: '',
29+
}}
30+
/>
31+
32+
# Restitution
33+
34+
export const RightTitle = () => (
35+
<a
36+
className="af-link af-link--hasIconLeft"
37+
href="/#"
38+
onClick={(e) => console.log(e)}>
39+
<i className="glyphicon glyphicon-pencil" />
40+
<span className="af-link__text">Modifier</span>
41+
</a>
42+
);
43+
44+
export const Template = (args) => (
45+
<ArticleRestitution {...args}>
46+
<HeaderRestitution
47+
title={args.headerTitle}
48+
subtitle={args.headerSubtitle}
49+
rightTitle={<RightTitle />}
50+
/>
51+
<SectionRestitution>
52+
<SectionRestitutionRow title={args.sectionRowTitle}>
53+
<SectionRestitutionColumn>
54+
<Restitution label={args.restitutionLabel}>{args.restitutionValue}</Restitution>
55+
<Restitution label="EURO">EURO</Restitution>
56+
<Restitution label="TT" />
57+
<Restitution label="Garanties complémentaires" classModifier="marge">
58+
<RestitutionList values={args.restitutionList} />
59+
</Restitution>
60+
</SectionRestitutionColumn>
61+
<SectionRestitutionColumn classModifier="test">
62+
<Restitution label={args.restitutionLabel}>{args.restitutionValue}</Restitution>
63+
<Restitution label="EURO">EURO</Restitution>
64+
<Restitution label="TT" />
65+
<Restitution label="Garanties complémentaires" classModifier="marge">
66+
<RestitutionList values={args.restitutionList} />
67+
</Restitution>
68+
</SectionRestitutionColumn>
69+
</SectionRestitutionRow>
70+
<SectionRestitutionRow title={args.sectionRowTitle}>
71+
<SectionRestitutionColumn>
72+
<Restitution label={args.restitutionLabel}>{args.restitutionValue}</Restitution>
73+
<Restitution label="EURO">EURO</Restitution>
74+
<Restitution label="TT" />
75+
<Restitution label="Garanties complémentaires" classModifier="marge">
76+
<RestitutionList values={args.restitutionList} />
77+
</Restitution>
78+
</SectionRestitutionColumn>
79+
<SectionRestitutionColumn>
80+
<Restitution label={args.restitutionLabel}>{args.restitutionValue}</Restitution>
81+
<Restitution label="EURO">
82+
<span style={{ textDecoration: 'underline' }}>EURO</span>
83+
</Restitution>
84+
<Restitution label="Garanties complémentaires" classModifier="marge">
85+
<RestitutionList values={args.restitutionList} />
86+
</Restitution>
87+
</SectionRestitutionColumn>
88+
</SectionRestitutionRow>
89+
<SectionRestitutionRow>
90+
<SectionRestitutionColumn title={args.sectionColumnTitle}>
91+
<Restitution label={args.restitutionLabel}>{args.restitutionValue}</Restitution>
92+
<Restitution label="EURO">EURO</Restitution>
93+
</SectionRestitutionColumn>
94+
<SectionRestitutionColumn title={args.sectionColumnTitle}>
95+
<Restitution label={args.restitutionLabel}>{args.restitutionValue}</Restitution>
96+
<Restitution label="EURO">
97+
<span style={{ textDecoration: 'underline' }}>EURO</span>
98+
</Restitution>
99+
</SectionRestitutionColumn>
100+
</SectionRestitutionRow>
101+
</SectionRestitution>
102+
</ArticleRestitution>
103+
);
104+
105+
The restitution package provides multiple components in order to restitute some informations (in read-only) to the user.
106+
107+
The `ArticleRestitution` is the base that add an article html element into the DOM.
108+
109+
Next, you can add an `HeaderRestitution` in order to give some heading informations about your restitution.
110+
The `title` property is the main title in the header and `subtitle` allows you to add more details.
111+
The header can also put in place an action link or button on the right with the `rightTitle` property.
112+
113+
Next, you can add a `SectionRestitution` that will add a section html element into the DOM.
114+
Semantically, after the section, you need to add a `SectionRestitutionRow` to create an new row in your restitution.
115+
This component have an optionnal `title` property that allows you to describe all in the restitution informations inside that row.
116+
After an section row will come one or more section columns with `SectionRestitutionColumn`. This component will give you the opportunity to split the informations into different columns grid.
117+
This component also have an optionnal `title` property that allows you to describe all in the restitution informations inside that column.
118+
119+
Finally, you want to restitute your information and that's the job of the `Restitution` component.
120+
A restitution have two major properties, first the `label` which is the name of the information you want to show and second the `children` which is the value of that specific information.
121+
As value you can basically show some text, but also give a more enriched information. For example, with the `RestitutionList` component you can add an array in the `values` property to show a list of informations.
122+
123+
Don't forget to import the component css file, so that your restitution is styled thanks to the `af-restitution` css class.
124+
125+
```javascript
126+
import '@axa-fr/react-toolkit-restitution/dist/af-restitution.css';
127+
```
128+
129+
<Canvas>
130+
<Story
131+
name="Default"
132+
args={{
133+
classModifier: '',
134+
className: '',
135+
headerTitle: 'Tarifs',
136+
headerSubtitle: 'Tout adhérent, assuré, base (sans EAC ou sans PAC)',
137+
sectionRowTitle: 'Base de calcul des prestations',
138+
sectionColumnTitle: 'Base de calcul des remboursements',
139+
restitutionList: [
140+
'Vol au domicile',
141+
'Vol étendu aux appareils nomades',
142+
'Bris des glaces',
143+
'Plomberie et électricité',
144+
'Jardin',
145+
],
146+
restitutionLabel: 'TA',
147+
restitutionValue: '99,99 %',
148+
}}>
149+
{Template.bind({})}
150+
</Story>
151+
</Canvas>
152+
153+
<ArgsTable story="Default" />

‎packages/restitution/src/Restitution.stories.tsx

-135
This file was deleted.

0 commit comments

Comments
 (0)