Skip to content

Commit b41e6f9

Browse files
astagiastagi
committed
fix: group form in examples
1 parent ff5fdbb commit b41e6f9

File tree

4 files changed

+39
-43
lines changed

4 files changed

+39
-43
lines changed

‎src/Toggle/Toggle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ export interface ToggleProps extends InputProps {
2121
export const Toggle: FC<ToggleProps> = ({ label, testId, ...rest }) => {
2222
return (
2323
<div className='toggles' data-testid={testId}>
24-
<Label check>
24+
<Label check for={rest.id}>
2525
{label}
26-
<Input {...rest} type='checkbox' />
26+
<Input {...rest} type='checkbox' aria-describedby={rest.id ? rest.id + 'Description' : '' } />
2727
<span className='lever' />
2828
</Label>
2929
</div>

‎stories/Components/Form/Checkbox.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -114,21 +114,21 @@ export const CheckboxGruppi: Story = {
114114
<Label for="group-checkbox4" check>
115115
Checkbox selezionato
116116
</Label>
117-
<FormText color="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
117+
<FormText id="group-checkbox4Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
118118
</FormGroup>
119119
<FormGroup check className="form-check-group">
120120
<Input id="group-checkbox5" type="checkbox" />
121121
<Label for="group-checkbox5" check>
122122
Checkbox non selezionato
123123
</Label>
124-
<FormText color="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
124+
<FormText id="group-checkbox5Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
125125
</FormGroup>
126126
<FormGroup check className="form-check-group">
127127
<Input id="group-checkbox6" type="checkbox" disabled />
128128
<Label for="group-checkbox6" check>
129129
Checkbox disabilitato non selezionato
130130
</Label>
131-
<FormText color="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
131+
<FormText id="group-checkbox6Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
132132
</FormGroup>
133133
</Form>
134134
</fieldset>

‎stories/Components/Form/Radio.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,21 +122,21 @@ export const RadioGruppi: Story = {
122122
<Label htmlFor="radio10" check>
123123
Opzione 1
124124
</Label>
125-
<FormText color="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
125+
<FormText id="radio10Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
126126
</FormGroup>
127127
<FormGroup check className="form-check-group">
128128
<Input id="radio11" name="group2" type="radio" />
129129
<Label htmlFor="radio11" check>
130130
Opzione 2
131131
</Label>
132-
<FormText color="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
132+
<FormText id="radio11Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
133133
</FormGroup>
134134
<FormGroup check className="form-check-group">
135135
<Input id="radio12" name="group2" type="radio" disabled />
136136
<Label htmlFor="radio12" check>
137137
Opzione 3
138138
</Label>
139-
<FormText color="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
139+
<FormText id="radio12Description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
140140
</FormGroup>
141141
</Form>
142142
</fieldset>

‎stories/Components/Form/Toggles.stories.tsx‎

Lines changed: 31 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,6 @@ export const Toggles: Story = {
2020
<Toggle label="Label dell'interruttore 1" disabled={false} />
2121
</FormGroup>
2222
</Col>
23-
<Col sm="6">
24-
<FormGroup check className="m-3">
25-
<Toggle label={<span>Label dell&apos;interruttore 2</span>} defaultChecked disabled={false} />
26-
</FormGroup>
27-
</Col>
2823
</Row>
2924
);
3025
}
@@ -39,11 +34,6 @@ export const TogglesDisabilitate: Story = {
3934
<Toggle label="Label dell'interruttore 1" disabled={true} />
4035
</FormGroup>
4136
</Col>
42-
<Col sm="6">
43-
<FormGroup check className="m-3">
44-
<Toggle label={<span>Label dell&apos;interruttore 2</span>} defaultChecked disabled={true} />
45-
</FormGroup>
46-
</Col>
4737
</Row>
4838
);
4939
}
@@ -54,34 +44,40 @@ export const GruppiDiToggles: Story = {
5444
return (
5545
<Row className="m-5">
5646
<Col md={5}>
57-
<Form>
58-
<FormGroup check className="form-check-group">
59-
<Toggle defaultChecked label="Toggle acceso" />
60-
</FormGroup>
61-
<FormGroup check className="form-check-group">
62-
<Toggle label="Toggle spento" />
63-
</FormGroup>
64-
<FormGroup check className="form-check-group">
65-
<Toggle disabled label="Toggle disabilitato" />
66-
</FormGroup>
67-
</Form>
47+
<fieldset>
48+
<legend>Gruppo di toggle</legend>
49+
<Form>
50+
<FormGroup check className="form-check-group">
51+
<Toggle defaultChecked label="Toggle acceso" id="toggleEsempio3a" />
52+
</FormGroup>
53+
<FormGroup check className="form-check-group">
54+
<Toggle label="Toggle spento" id="toggleEsempio3b" />
55+
</FormGroup>
56+
<FormGroup check className="form-check-group">
57+
<Toggle disabled label="Toggle disabilitato" id="toggleEsempio3c" />
58+
</FormGroup>
59+
</Form>
60+
</fieldset>
6861
</Col>
6962
<Col md={2} />
7063
<Col md={5}>
71-
<Form>
72-
<FormGroup check className="form-check-group">
73-
<Toggle defaultChecked label="Toggle acceso" />
74-
<FormText color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
75-
</FormGroup>
76-
<FormGroup check className="form-check-group">
77-
<Toggle label="Toggle spento" />
78-
<FormText color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
79-
</FormGroup>
80-
<FormGroup check className="form-check-group">
81-
<Toggle disabled label="Toggle disabilitato" />
82-
<FormText color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
83-
</FormGroup>
84-
</Form>
64+
<fieldset>
65+
<legend>Gruppo di toggle</legend>
66+
<Form>
67+
<FormGroup check className="form-check-group">
68+
<Toggle defaultChecked label="Toggle acceso" id="toggleEsempio3d"/>
69+
<FormText id="toggleEsempio3dDescription" color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
70+
</FormGroup>
71+
<FormGroup check className="form-check-group">
72+
<Toggle label="Toggle spento" id="toggleEsempio3e"/>
73+
<FormText id="toggleEsempio3eDescription" color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
74+
</FormGroup>
75+
<FormGroup check className="form-check-group">
76+
<Toggle disabled label="Toggle disabilitato" id="toggleEsempio3f" />
77+
<FormText id="toggleEsempio3fDescription" color="muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie libero</FormText>
78+
</FormGroup>
79+
</Form>
80+
</fieldset>
8581
</Col>
8682
</Row>
8783
);

0 commit comments

Comments
 (0)