Skip to content

Commit b5591bd

Browse files
GuillaumeKESTEMANGuillaumeKESTEMAN
committed
docs(client,prospect): update documentation for CardRadioGroup and CardRadioOption components
1 parent 3964ac9 commit b5591bd

File tree

4 files changed

+602
-102
lines changed

4 files changed

+602
-102
lines changed

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

Lines changed: 150 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,164 @@ import * as CardRadioGroupStories from "./CardRadioGroup.stories";
33

44
<Meta of={CardRadioGroupStories} name="CardRadioGroup" />
55

6-
# CardRadioGroup components
6+
# CardRadioGroup
77

8-
## How to use
8+
One-line: visual radio group displaying options as cards (icon, subtitle, description).
99

10-
To use the `CardRadioGroup`component import it like this:
10+
## Import
1111

1212
```tsx
1313
import { CardRadioGroup } from "@axa-fr/canopee-react/prospect";
14-
15-
const MyComponent = () => (
16-
<CardRadioGroup
17-
cardStyle="vertical"
18-
position="column"
19-
name="city"
20-
label="Choisissez une ville"
21-
options={[
22-
{
23-
label: "Paris",
24-
value: "paris",
25-
icon: homeIcon,
26-
description: "Capitale de la France",
27-
subtitle: "Nord",
28-
},
29-
{
30-
label: "Bruxelles",
31-
value: "bruxelles",
32-
icon: homeIcon,
33-
description: "Capitale de la Belgique",
34-
},
35-
{
36-
label: "Lille",
37-
value: "lille",
38-
icon: homeIcon,
39-
checked: true,
40-
},
41-
]}
42-
/>
43-
);
4414
```
4515

46-
## Playground
16+
## Props
17+
18+
<table>
19+
<thead>
20+
<tr>
21+
<th>Prop</th>
22+
<th>Type</th>
23+
<th>Default</th>
24+
<th>Description</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
<tr>
29+
<td>
30+
<code>name</code>
31+
</td>
32+
<td>
33+
<code>string</code>
34+
</td>
35+
<td>—</td>
36+
<td>Form field name</td>
37+
</tr>
38+
<tr>
39+
<td>
40+
<code>label</code>
41+
</td>
42+
<td>
43+
<code>ReactNode</code>
44+
</td>
45+
<td>—</td>
46+
<td>Group legend</td>
47+
</tr>
48+
<tr>
49+
<td>
50+
<code>cardStyle</code>
51+
</td>
52+
<td>
53+
<code>'vertical' | 'horizontal'</code>
54+
</td>
55+
<td>
56+
<code>'vertical'</code>
57+
</td>
58+
<td>
59+
Radio cards layout (corresponds to <code>CardRadioOption</code>{" "}
60+
<code>position</code> prop)
61+
</td>
62+
</tr>
63+
<tr>
64+
<td>
65+
<code>position</code>
66+
</td>
67+
<td>
68+
<code>'line' | 'column'</code>
69+
</td>
70+
<td>
71+
<code>'column'</code>
72+
</td>
73+
<td>Options container layout</td>
74+
</tr>
75+
<tr>
76+
<td>
77+
<code>options</code>
78+
</td>
79+
<td>
80+
<code>CardRadioOptionProps[]</code>
81+
</td>
82+
<td>—</td>
83+
<td>
84+
Array of options — each item corresponds to the props of the{" "}
85+
<code>CardRadioOption</code> component
86+
</td>
87+
</tr>
88+
<tr>
89+
<td>
90+
<code>required</code>
91+
</td>
92+
<td>
93+
<code>boolean</code>
94+
</td>
95+
<td>
96+
<code>false</code>
97+
</td>
98+
<td>
99+
Adds <code>aria-required</code>
100+
</td>
101+
</tr>
102+
<tr>
103+
<td>
104+
<code>message</code>
105+
</td>
106+
<td>
107+
<code>ReactNode</code>
108+
</td>
109+
<td>—</td>
110+
<td>
111+
Error or help message displayed below the group (depends on the{" "}
112+
<code>messageType</code>)
113+
</td>
114+
</tr>
115+
<tr>
116+
<td>
117+
<code>className</code>
118+
</td>
119+
<td>
120+
<code>string</code>
121+
</td>
122+
<td>—</td>
123+
<td>Extra root class</td>
124+
</tr>
125+
</tbody>
126+
</table>
127+
128+
## Accessibility
129+
130+
- Renders a `<fieldset role="radiogroup">` with a `<legend>`.
131+
- Uses `aria-required`, `aria-invalid` and `aria-errormessage` when applicable.
132+
- Keyboard: Tab into group, navigate with arrow keys.
47133

48-
The CardRadioGroup component has 2 modes: `vertical` (default) and `horizontal`.
49-
You can see them in action in the stories below.
134+
## Example
135+
136+
```tsx
137+
<CardRadioGroup
138+
name="city"
139+
label="Choose a city"
140+
cardStyle="vertical"
141+
position="column"
142+
options={[
143+
{
144+
label: "Paris",
145+
value: "paris",
146+
icon: homeIcon,
147+
description: "Capitale de la France",
148+
subtitle: "Nord",
149+
},
150+
{
151+
label: "Bruxelles",
152+
value: "bruxelles",
153+
icon: homeIcon,
154+
description: "Capitale de la Belgique",
155+
},
156+
{
157+
label: "Lille",
158+
value: "lille",
159+
icon: homeIcon,
160+
},
161+
]}
162+
/>
163+
```
50164

51165
<Canvas of={CardRadioGroupStories.CardRadioStory} />
52166
<Controls of={CardRadioGroupStories.CardRadioStory} />

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

Lines changed: 151 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,164 @@ import * as CardRadioOptionStories from "./CardRadioOption.stories";
33

44
<Meta of={CardRadioOptionStories} name="CardRadioOption" />
55

6-
# CardRadioOption components
6+
# CardRadioOption
77

8-
## How to use
8+
One-line: a single selectable card used inside `CardRadioGroup`, rendering a label, optional icon/picture, description and subtitle.
99

10-
To use the `CardRadioOption`component import it like this:
10+
## Import
1111

1212
```tsx
1313
import { CardRadioOption } from "@axa-fr/canopee-react/prospect";
14-
15-
const MyComponent = () => (
16-
<CardRadioOption
17-
label="Titre"
18-
description="Sous-titre 1"
19-
subtitle="Sous-titre 2"
20-
icon={icon}
21-
name="foo"
22-
value="bar"
23-
/>
24-
);
2514
```
2615

27-
## Playground
16+
## Props
17+
18+
<table>
19+
<thead>
20+
<tr>
21+
<th>Prop</th>
22+
<th>Type</th>
23+
<th>Default</th>
24+
<th>Description</th>
25+
</tr>
26+
</thead>
27+
<tbody>
28+
<tr>
29+
<td>
30+
<code>name</code>
31+
</td>
32+
<td>
33+
<code>string</code>
34+
</td>
35+
<td>—</td>
36+
<td>Form field name (usually provided by the group)</td>
37+
</tr>
38+
<tr>
39+
<td>
40+
<code>value</code>
41+
</td>
42+
<td>
43+
<code>string | number</code>
44+
</td>
45+
<td>—</td>
46+
<td>Option value</td>
47+
</tr>
48+
<tr>
49+
<td>
50+
<code>label</code>
51+
</td>
52+
<td>
53+
<code>ReactNode</code>
54+
</td>
55+
<td>—</td>
56+
<td>Main title shown on the card</td>
57+
</tr>
58+
<tr>
59+
<td>
60+
<code>description</code>
61+
</td>
62+
<td>
63+
<code>ReactNode</code>
64+
</td>
65+
<td>—</td>
66+
<td>Extended text under the label</td>
67+
</tr>
68+
<tr>
69+
<td>
70+
<code>subtitle</code>
71+
</td>
72+
<td>
73+
<code>ReactNode</code>
74+
</td>
75+
<td>—</td>
76+
<td>Small subtitle text</td>
77+
</tr>
78+
<tr>
79+
<td>
80+
<code>position</code>
81+
</td>
82+
<td>
83+
<code>'vertical' | 'horizontal'</code>
84+
</td>
85+
<td>
86+
<code>'vertical'</code>
87+
</td>
88+
<td>Visual orientation of the card</td>
89+
</tr>
90+
<tr>
91+
<td>
92+
<code>icon</code>
93+
</td>
94+
<td>
95+
<code>string</code>
96+
</td>
97+
<td>—</td>
98+
<td>Icon to display on the card</td>
99+
</tr>
100+
<tr>
101+
<td>
102+
<code>src</code>
103+
</td>
104+
<td>
105+
<code>string</code>
106+
</td>
107+
<td>—</td>
108+
<td>Image source for `BasePicture`</td>
109+
</tr>
110+
<tr>
111+
<td>
112+
<code>disabled</code>
113+
</td>
114+
<td>
115+
<code>boolean</code>
116+
</td>
117+
<td>
118+
<code>false</code>
119+
</td>
120+
<td>Disable the option</td>
121+
</tr>
122+
<tr>
123+
<td>
124+
<code>isInvalid</code>
125+
</td>
126+
<td>
127+
<code>boolean</code>
128+
</td>
129+
<td>
130+
<code>false</code>
131+
</td>
132+
<td>Mark option as invalid (affects styling)</td>
133+
</tr>
134+
<tr>
135+
<td>
136+
<code>className</code>
137+
</td>
138+
<td>
139+
<code>string</code>
140+
</td>
141+
<td>—</td>
142+
<td>Extra class on the option</td>
143+
</tr>
144+
</tbody>
145+
</table>
146+
147+
## Accessibility
148+
149+
- The option is rendered as a `<label>` wrapping the radio control; ensure `label` content is descriptive.
150+
- If used inside `CardRadioGroup`, keyboard and ARIA responsibilities are handled by the group (radiogroup / legend / aria-errormessage).
151+
152+
## Example
153+
154+
```tsx
155+
<CardRadioOption
156+
name="city"
157+
value="paris"
158+
label="Paris"
159+
description="Capitale de la France"
160+
subtitle="Nord"
161+
icon={homeIcon}
162+
/>
163+
```
28164

29165
<Canvas of={CardRadioOptionStories.CardRadioOptionStory} />
30166
<Controls of={CardRadioOptionStories.CardRadioOptionStory} />

0 commit comments

Comments
 (0)