Skip to content

Commit b124d88

Browse files
GuillaumeKESTEMANGuillaumeKESTEMAN
committed
refactor(client): update CardRadioGroup documentation and examples
1 parent 66ea290 commit b124d88

File tree

4 files changed

+142
-348
lines changed

4 files changed

+142
-348
lines changed

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

Lines changed: 3 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,16 @@
1-
import { Canvas, Controls, Meta } from "@storybook/blocks";
1+
import { Canvas, Controls, Meta, Title } from "@storybook/blocks";
22
import * as CardRadioGroupStories from "./CardRadioGroup.stories";
33

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

6-
# CardRadioGroup
7-
8-
Accessible fieldset that groups CardRadioOption components with a label, optional description and validation/error messaging.
6+
<Title />
97

108
## Import
119

1210
```tsx
1311
import { CardRadioGroup } from "@axa-fr/canopee-react/prospect";
1412
```
1513

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-
12814
## Accessibility
12915

13016
- Renders a `<fieldset role="radiogroup">` with a `<legend>`.
@@ -133,34 +19,5 @@ import { CardRadioGroup } from "@axa-fr/canopee-react/prospect";
13319

13420
## Example
13521

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-
```
164-
165-
<Canvas of={CardRadioGroupStories.CardRadioStory} />
22+
<Canvas of={CardRadioGroupStories.CardRadioStory} sourceState="shown" />
16623
<Controls of={CardRadioGroupStories.CardRadioStory} />

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

Lines changed: 68 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,98 +8,138 @@ import { ComponentProps } from "react";
88

99
const optionsDefault = [
1010
{
11-
label: "option 1",
12-
description: "description 1",
13-
subtitle: "subtitle 1",
14-
value: "1",
11+
label: "Paris",
12+
value: "paris",
1513
icon: homeIcon,
14+
description: "Capitale de la France",
1615
},
1716
{
18-
label: "option 2",
19-
description: "description 2",
20-
subtitle: "subtitle 2",
21-
value: "2",
17+
label: "Bruxelles",
18+
value: "bruxelles",
2219
icon: homeIcon,
20+
description: "Capitale de la Belgique",
2321
},
2422
{
25-
label: "option 3",
26-
description: "description 3",
27-
subtitle: "subtitle 3",
28-
value: "3",
23+
label: "Lille",
24+
value: "lille",
2925
icon: homeIcon,
26+
description: "Chef-lieu de la région Hauts-de-France",
3027
},
3128
];
3229

3330
const meta: Meta = {
3431
title: "Components/Form/Radio/CardRadioGroup",
3532
component: CardRadioGroup,
3633
argTypes: {
34+
name: {
35+
description: "Form field name",
36+
table: { category: "Field" },
37+
},
38+
label: {
39+
description: "Form field label",
40+
table: { category: "Field" },
41+
},
42+
description: {
43+
control: "text",
44+
description: "Form field description",
45+
table: { category: "Field" },
46+
},
3747
cardStyle: {
3848
control: { type: "inline-radio" },
3949
options: ["vertical", "horizontal"],
50+
description:
51+
"Radio cards layout (corresponds to `CardRadioOption` `position` prop)",
4052
table: {
53+
category: "Layout",
4154
defaultValue: { summary: "vertical" },
4255
type: { summary: '"vertical" | "horizontal"' },
4356
},
4457
},
4558
position: {
4659
control: { type: "inline-radio" },
4760
options: ["column", "line"],
61+
description: "Radio cards layout position in the group",
4862
table: {
63+
category: "Layout",
64+
defaultValue: { summary: "column" },
4965
type: { summary: '"column" | "line"' },
5066
},
5167
},
52-
label: {
53-
control: "text",
54-
},
55-
description: {
56-
control: "text",
57-
},
5868
options: {
5969
control: { type: "object" },
6070
description: "Radio card options",
71+
table: {
72+
category: "Options",
73+
type: { summary: "CardRadioOptionProps[]" },
74+
},
6175
},
6276
required: {
6377
control: "boolean",
78+
description: "Whether the field is required or not",
79+
table: {
80+
category: "Validation",
81+
defaultValue: { summary: "false" },
82+
},
6483
},
65-
error: {
84+
message: {
6685
control: "text",
86+
description:
87+
"Error, validation or warning message displayed below the group (depends on the `messageType`)",
88+
table: { category: "Validation" },
89+
},
90+
messageType: {
91+
options: Object.values(itemMessageVariants),
92+
control: { type: "select" },
93+
description:
94+
"Type of the message displayed (error, validation or warning)",
95+
table: {
96+
category: "Validation",
97+
defaultValue: { summary: "error" },
98+
type: { summary: '"error" | "validation" | "warning"' },
99+
},
100+
},
101+
className: {
102+
control: "text",
103+
description: "Class name for custom styling",
104+
table: {
105+
category: "Customization",
106+
type: { summary: "string" },
107+
},
67108
},
68109
labelGroup: {
69110
table: {
70111
disable: true,
112+
category: "Internal",
71113
},
72114
},
73115
descriptionGroup: {
74116
table: {
75117
disable: true,
118+
category: "Internal",
76119
},
77120
},
78121
isRequired: {
79122
table: {
80123
disable: true,
124+
category: "Internal",
81125
},
82126
},
83127
value: {
84128
table: {
85129
disable: true,
130+
category: "Internal",
86131
},
87132
},
88-
messageType: {
89-
options: Object.values(itemMessageVariants),
90-
control: { type: "select" },
91-
},
92133
},
93134
args: {
135+
name: "city",
136+
label: "Choose a city",
137+
description: "This is a description for the card radio group",
94138
cardStyle: "vertical",
95139
position: "column",
96-
label: "Label",
97-
description: "Description",
98-
name: "name",
99140
options: optionsDefault,
100141
required: false,
101-
error: "",
102-
message: "",
142+
messageType: "error",
103143
},
104144
};
105145

0 commit comments

Comments
 (0)