@utilitywarehouse/hearth-react 0.28.6 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -20
- package/SKILL.md +355 -0
- package/dist/{chunk-O7RBVBMN.cjs → chunk-LWHIBSW2.cjs} +2 -2
- package/dist/{chunk-O7RBVBMN.cjs.map → chunk-LWHIBSW2.cjs.map} +1 -1
- package/dist/{chunk-JRVYOIXR.js → chunk-MIVYZGEV.js} +2 -2
- package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
- package/dist/components/Combobox/Combobox.cjs +1 -1
- package/dist/components/Combobox/Combobox.js +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
- package/dist/helpers/get-classname-styles.d.ts.map +1 -1
- package/dist/helpers/logger.d.ts.map +1 -1
- package/dist/helpers/merge-ids.d.ts.map +1 -1
- package/dist/hooks/use-ids.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +18 -12
- package/public/llms/components/accordion.md +321 -0
- package/public/llms/components/alert.md +217 -0
- package/public/llms/components/avatar.md +112 -0
- package/public/llms/components/badge.md +158 -0
- package/public/llms/components/body-text.md +200 -0
- package/public/llms/components/box.md +148 -0
- package/public/llms/components/breadcrumbs.md +97 -0
- package/public/llms/components/button.md +595 -0
- package/public/llms/components/card-accordion.md +277 -0
- package/public/llms/components/card.md +985 -0
- package/public/llms/components/checkbox-group.md +193 -0
- package/public/llms/components/checkbox-tile.md +116 -0
- package/public/llms/components/checkbox.md +108 -0
- package/public/llms/components/combobox.md +360 -0
- package/public/llms/components/container.md +162 -0
- package/public/llms/components/currency-input.md +85 -0
- package/public/llms/components/date-input.md +90 -0
- package/public/llms/components/date-picker.md +159 -0
- package/public/llms/components/description-list.md +149 -0
- package/public/llms/components/detail-text.md +89 -0
- package/public/llms/components/divider.md +88 -0
- package/public/llms/components/em.md +43 -0
- package/public/llms/components/expandable-card.md +231 -0
- package/public/llms/components/flex.md +197 -0
- package/public/llms/components/grid.md +244 -0
- package/public/llms/components/heading.md +65 -0
- package/public/llms/components/helper-text.md +27 -0
- package/public/llms/components/highlight-banner.md +94 -0
- package/public/llms/components/icon-button.md +516 -0
- package/public/llms/components/icon-container.md +247 -0
- package/public/llms/components/inline-link.md +190 -0
- package/public/llms/components/label.md +28 -0
- package/public/llms/components/link.md +236 -0
- package/public/llms/components/list.md +715 -0
- package/public/llms/components/menu.md +270 -0
- package/public/llms/components/modal.md +328 -0
- package/public/llms/components/pagination.md +138 -0
- package/public/llms/components/password-input.md +93 -0
- package/public/llms/components/progress-bar.md +139 -0
- package/public/llms/components/progress-stepper.md +147 -0
- package/public/llms/components/radio-group.md +487 -0
- package/public/llms/components/search-input.md +132 -0
- package/public/llms/components/section-header.md +82 -0
- package/public/llms/components/select.md +148 -0
- package/public/llms/components/skeleton.md +282 -0
- package/public/llms/components/spinner.md +59 -0
- package/public/llms/components/strong.md +49 -0
- package/public/llms/components/switch.md +106 -0
- package/public/llms/components/table.md +230 -0
- package/public/llms/components/tabs.md +320 -0
- package/public/llms/components/text-area.md +141 -0
- package/public/llms/components/text-input.md +228 -0
- package/public/llms/components/toast.md +323 -0
- package/public/llms/components/toggle-button-card.md +513 -0
- package/public/llms/components/tooltip.md +188 -0
- package/public/llms/components/unstyled-icon-button.md +175 -0
- package/public/llms/components/validation-text.md +29 -0
- package/public/llms/components/verification-input.md +96 -0
- package/public/llms/docs/changelog.md +1430 -0
- package/public/llms/docs/common-props/align-self.md +90 -0
- package/public/llms/docs/common-props/border.md +308 -0
- package/public/llms/docs/common-props/colour.md +221 -0
- package/public/llms/docs/common-props/flex-items.md +91 -0
- package/public/llms/docs/common-props/gap.md +111 -0
- package/public/llms/docs/common-props/grid-items.md +96 -0
- package/public/llms/docs/common-props/margin.md +105 -0
- package/public/llms/docs/common-props/opacity.md +100 -0
- package/public/llms/docs/common-props/order.md +90 -0
- package/public/llms/docs/common-props/overflow.md +89 -0
- package/public/llms/docs/common-props/padding.md +102 -0
- package/public/llms/docs/common-props/position.md +92 -0
- package/public/llms/docs/common-props/size.md +93 -0
- package/public/llms/docs/common-props/spacing.md +97 -0
- package/public/llms/docs/common-props/text.md +35 -0
- package/public/llms/docs/common-props/z-index.md +88 -0
- package/public/llms/docs/design-tokens.md +72 -0
- package/public/llms/docs/getting-started.md +117 -0
- package/public/llms/docs/layout.md +135 -0
- package/public/llms/docs/migrating.md +302 -0
- package/public/llms/docs/responsive-design/breakpoints.md +119 -0
- package/public/llms/docs/responsive-design/media-queries.md +89 -0
- package/public/llms/docs/responsive-design/responsive-props.md +37 -0
- package/public/llms.txt +97 -0
- package/scripts/init-ai.js +142 -0
- package/styles.css +2 -2
- /package/dist/{chunk-JRVYOIXR.js.map → chunk-MIVYZGEV.js.map} +0 -0
|
@@ -0,0 +1,513 @@
|
|
|
1
|
+
# ToggleButtonCard
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<Box maxWidth="750px">
|
|
5
|
+
<ToggleGroup
|
|
6
|
+
{...args}
|
|
7
|
+
gap="300"
|
|
8
|
+
type="single"
|
|
9
|
+
value={value}
|
|
10
|
+
direction={{ mobile: 'column', tablet: 'row' }}
|
|
11
|
+
onValueChange={(value: string) => {
|
|
12
|
+
if (value) setValue(value);
|
|
13
|
+
}}
|
|
14
|
+
>
|
|
15
|
+
<ToggleButtonCard
|
|
16
|
+
value="fixed"
|
|
17
|
+
label={value === 'fixed' ? 'Selected plan' : 'Select plan'}
|
|
18
|
+
aria-labelledby="fixed-label fixed-secondary-label"
|
|
19
|
+
aria-describedby="fixed-description"
|
|
20
|
+
>
|
|
21
|
+
<Flex direction="column" gap="200">
|
|
22
|
+
<Heading id="fixed-label" size="md">
|
|
23
|
+
Fixed
|
|
24
|
+
</Heading>
|
|
25
|
+
<Flex id="fixed-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
26
|
+
<DetailText size="3xl">£163.00</DetailText>
|
|
27
|
+
<BodyText size="md" color="secondary" as="span">
|
|
28
|
+
monthly estimate
|
|
29
|
+
</BodyText>
|
|
30
|
+
</Flex>
|
|
31
|
+
<BodyText id="fixed-description" as="p" size="md">
|
|
32
|
+
Your energy rates will stay the same until December 2025
|
|
33
|
+
</BodyText>
|
|
34
|
+
</Flex>
|
|
35
|
+
</ToggleButtonCard>
|
|
36
|
+
<ToggleButtonCard
|
|
37
|
+
value="variable"
|
|
38
|
+
label={value === 'variable' ? 'Selected plan' : 'Select plan'}
|
|
39
|
+
aria-labelledby="variable-label variable-secondary-label"
|
|
40
|
+
aria-describedby="variable-description"
|
|
41
|
+
>
|
|
42
|
+
<Flex direction="column" gap="200">
|
|
43
|
+
<Heading id="variable-label" size="md">
|
|
44
|
+
Variable
|
|
45
|
+
</Heading>
|
|
46
|
+
<Flex id="variable-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
47
|
+
<DetailText size="3xl">£153.00</DetailText>
|
|
48
|
+
<BodyText size="md" color="secondary" as="span">
|
|
49
|
+
monthly estimate
|
|
50
|
+
</BodyText>
|
|
51
|
+
</Flex>
|
|
52
|
+
<BodyText id="variable-description" as="p" size="md">
|
|
53
|
+
Your energy rates will stay the same until December 2025
|
|
54
|
+
</BodyText>
|
|
55
|
+
</Flex>
|
|
56
|
+
</ToggleButtonCard>
|
|
57
|
+
</ToggleGroup>
|
|
58
|
+
</Box>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
- [Usage](#usage)
|
|
62
|
+
- [ToggleGroup type](#togglegroup-type)
|
|
63
|
+
- [Layout](#layout)
|
|
64
|
+
- [Interactive content](#interactive-content)
|
|
65
|
+
- [Accessibility](#accessibility)
|
|
66
|
+
- [ToggleGroup API](#togglegroup-api)
|
|
67
|
+
- [ToggleButtonCard API](#togglebuttoncard-api)
|
|
68
|
+
|
|
69
|
+
## Usage
|
|
70
|
+
|
|
71
|
+
Use the `ToggleGroup` to wrap `ToggleButtonCard` components.
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
<ToggleGroup>
|
|
75
|
+
<ToggleButtonCard />
|
|
76
|
+
<ToggleButtonCard />
|
|
77
|
+
<ToggleButtonCard />
|
|
78
|
+
</ToggleGroup>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## ToggleGroup type
|
|
82
|
+
|
|
83
|
+
`ToggleGroup` can be rendered as one of two types; `single` or `multiple`. The `type` prop is required.
|
|
84
|
+
|
|
85
|
+
When `type` is set to `multiple`, then multiple items can be selected at once.
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
<ToggleGroup {...args} type="multiple" gap="200">
|
|
89
|
+
{['One', 'Two', 'Three', 'Four'].map((label, value) => (
|
|
90
|
+
<ToggleButtonCard key={value} value={`${value}`} label={label} aria-labelledby="">
|
|
91
|
+
<Placeholder borderColor="subtle" backgroundColor="primary" width="100%" height="50px" />
|
|
92
|
+
</ToggleButtonCard>
|
|
93
|
+
))}
|
|
94
|
+
</ToggleGroup>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
When `type` is set to `single`, only one item can be selected at once.
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
<ToggleGroup {...args} type="single" gap="200">
|
|
101
|
+
{['One', 'Two', 'Three', 'Four'].map((label, value) => (
|
|
102
|
+
<ToggleButtonCard key={value} value={`${value}`} label={label} aria-labelledby="">
|
|
103
|
+
<Placeholder borderColor="subtle" backgroundColor="primary" width="100%" height="50px" />
|
|
104
|
+
</ToggleButtonCard>
|
|
105
|
+
))}
|
|
106
|
+
</ToggleGroup>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
You can control the component to ensure there is always a value.
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
{...}
|
|
113
|
+
|
|
114
|
+
const [value, setValue] = React.useState('2');
|
|
115
|
+
|
|
116
|
+
{...}
|
|
117
|
+
|
|
118
|
+
return (
|
|
119
|
+
<ToggleGroup
|
|
120
|
+
type="single"
|
|
121
|
+
value={value}
|
|
122
|
+
onValueChange={(value: string) => {
|
|
123
|
+
if (value) setValue(value);
|
|
124
|
+
}}
|
|
125
|
+
>
|
|
126
|
+
{...}
|
|
127
|
+
</ToggleGroup
|
|
128
|
+
)
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<ToggleGroup
|
|
133
|
+
{...args}
|
|
134
|
+
type="single"
|
|
135
|
+
gap="200"
|
|
136
|
+
value={value}
|
|
137
|
+
onValueChange={(value: string) => {
|
|
138
|
+
if (value) setValue(value);
|
|
139
|
+
}}
|
|
140
|
+
>
|
|
141
|
+
{['One', 'Two', 'Three', 'Four'].map((label, value) => (
|
|
142
|
+
<ToggleButtonCard key={value} value={`${value}`} label={label} aria-labelledby="">
|
|
143
|
+
<Placeholder borderColor="subtle" backgroundColor="primary" width="120px" height="50px" />
|
|
144
|
+
</ToggleButtonCard>
|
|
145
|
+
))}
|
|
146
|
+
</ToggleGroup>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Layout
|
|
150
|
+
|
|
151
|
+
The `ToggleGroup` has access to the `Flex` props for controlling layout.
|
|
152
|
+
|
|
153
|
+
### Start aligned
|
|
154
|
+
|
|
155
|
+
In cases where the internal button should fit the content, rather than stretch
|
|
156
|
+
to fill the available space, you can set the `alignItems` prop to `start` on
|
|
157
|
+
the `ToggleButtonCard`.
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
<Box width="750px">
|
|
161
|
+
<ToggleGroup
|
|
162
|
+
{...args}
|
|
163
|
+
gap="300"
|
|
164
|
+
direction="column"
|
|
165
|
+
type="single"
|
|
166
|
+
value={value}
|
|
167
|
+
onValueChange={(value: string) => {
|
|
168
|
+
if (value) setValue(value);
|
|
169
|
+
}}
|
|
170
|
+
>
|
|
171
|
+
<ToggleButtonCard
|
|
172
|
+
value="fixed"
|
|
173
|
+
label={value === 'fixed' ? 'Selected plan' : 'Select plan'}
|
|
174
|
+
aria-labelledby="fixed-label fixed-secondary-label"
|
|
175
|
+
aria-describedby="fixed-description"
|
|
176
|
+
alignItems="start"
|
|
177
|
+
>
|
|
178
|
+
<Flex direction="column" gap="200">
|
|
179
|
+
<Heading id="fixed-label" size="md">
|
|
180
|
+
Fixed
|
|
181
|
+
</Heading>
|
|
182
|
+
<Flex id="fixed-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
183
|
+
<DetailText size="3xl">£163.00</DetailText>
|
|
184
|
+
<BodyText size="md" color="secondary" as="span">
|
|
185
|
+
monthly estimate
|
|
186
|
+
</BodyText>
|
|
187
|
+
</Flex>
|
|
188
|
+
<BodyText id="fixed-description" as="p" size="md">
|
|
189
|
+
Your energy rates will stay the same until December 2025
|
|
190
|
+
</BodyText>
|
|
191
|
+
</Flex>
|
|
192
|
+
</ToggleButtonCard>
|
|
193
|
+
<ToggleButtonCard
|
|
194
|
+
value="variable"
|
|
195
|
+
label={value === 'variable' ? 'Selected plan' : 'Select plan'}
|
|
196
|
+
aria-labelledby="variable-label variable-secondary-label"
|
|
197
|
+
aria-describedby="variable-description"
|
|
198
|
+
alignItems="start"
|
|
199
|
+
>
|
|
200
|
+
<Flex direction="column" gap="200">
|
|
201
|
+
<Heading id="variable-label" size="md">
|
|
202
|
+
Variable
|
|
203
|
+
</Heading>
|
|
204
|
+
<Flex id="variable-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
205
|
+
<DetailText size="3xl">£153.00</DetailText>
|
|
206
|
+
<BodyText size="md" color="secondary" as="span">
|
|
207
|
+
monthly estimate
|
|
208
|
+
</BodyText>
|
|
209
|
+
</Flex>
|
|
210
|
+
<BodyText id="variable-description" as="p" size="md">
|
|
211
|
+
Your energy rates will stay the same until December 2025
|
|
212
|
+
</BodyText>
|
|
213
|
+
</Flex>
|
|
214
|
+
</ToggleButtonCard>
|
|
215
|
+
</ToggleGroup>
|
|
216
|
+
</Box>
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Interactive content
|
|
220
|
+
|
|
221
|
+
The entire `ToggleButtonCard` is interactive, so if you need to include
|
|
222
|
+
additional interactive content, such as a link or button, then you will need to
|
|
223
|
+
wrap it in a `CardInteraction` component.
|
|
224
|
+
|
|
225
|
+
```tsx
|
|
226
|
+
<ToggleButtonCard>
|
|
227
|
+
<Flex direction="column" gap="200">
|
|
228
|
+
|
|
229
|
+
{...}
|
|
230
|
+
|
|
231
|
+
<CardInteraction secondary>
|
|
232
|
+
<Button variant="ghost" size="sm" paddingNone>
|
|
233
|
+
Tariff price breakdown
|
|
234
|
+
<ChevronRightSmallIcon />
|
|
235
|
+
</Button>
|
|
236
|
+
</CardInteraction>
|
|
237
|
+
|
|
238
|
+
</Flex>
|
|
239
|
+
</ToggleButtonCard>
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
```tsx
|
|
243
|
+
<Box width="750px">
|
|
244
|
+
<ToggleGroup
|
|
245
|
+
{...args}
|
|
246
|
+
gap="300"
|
|
247
|
+
type="single"
|
|
248
|
+
value={value}
|
|
249
|
+
onValueChange={(value: string) => {
|
|
250
|
+
if (value) setValue(value);
|
|
251
|
+
}}
|
|
252
|
+
>
|
|
253
|
+
<ToggleButtonCard
|
|
254
|
+
value="fixed"
|
|
255
|
+
label={value === 'fixed' ? 'Selected plan' : 'Select plan'}
|
|
256
|
+
aria-labelledby="fixed-label fixed-secondary-label"
|
|
257
|
+
aria-describedby="fixed-description"
|
|
258
|
+
>
|
|
259
|
+
<Flex direction="column" gap="200">
|
|
260
|
+
<Heading id="fixed-label" size="md">
|
|
261
|
+
Fixed
|
|
262
|
+
</Heading>
|
|
263
|
+
<Flex id="fixed-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
264
|
+
<DetailText size="3xl">£163.00</DetailText>
|
|
265
|
+
<BodyText size="md" color="secondary" as="span">
|
|
266
|
+
monthly estimate
|
|
267
|
+
</BodyText>
|
|
268
|
+
</Flex>
|
|
269
|
+
<BodyText id="fixed-description" as="p" size="md">
|
|
270
|
+
Your energy rates will stay the same until December 2025
|
|
271
|
+
</BodyText>
|
|
272
|
+
<CardInteraction secondary>
|
|
273
|
+
<Button variant="ghost" size="sm" paddingNone>
|
|
274
|
+
Tariff price breakdown
|
|
275
|
+
<ChevronRightSmallIcon />
|
|
276
|
+
</Button>
|
|
277
|
+
</CardInteraction>
|
|
278
|
+
</Flex>
|
|
279
|
+
</ToggleButtonCard>
|
|
280
|
+
<ToggleButtonCard
|
|
281
|
+
value="variable"
|
|
282
|
+
label={value === 'variable' ? 'Selected plan' : 'Select plan'}
|
|
283
|
+
aria-labelledby="variable-label variable-secondary-label"
|
|
284
|
+
aria-describedby="variable-description"
|
|
285
|
+
>
|
|
286
|
+
<Flex direction="column" gap="200">
|
|
287
|
+
<Heading id="variable-label" size="md">
|
|
288
|
+
Variable
|
|
289
|
+
</Heading>
|
|
290
|
+
<Flex id="variable-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
291
|
+
<DetailText size="3xl">£153.00</DetailText>
|
|
292
|
+
<BodyText size="md" color="secondary" as="span">
|
|
293
|
+
monthly estimate
|
|
294
|
+
</BodyText>
|
|
295
|
+
</Flex>
|
|
296
|
+
<BodyText id="variable-description" as="p" size="md">
|
|
297
|
+
Your energy rates will stay the same until December 2025.{' '}
|
|
298
|
+
<CardInteraction secondary asChild>
|
|
299
|
+
<InlineLink href="/tariff-price-breakdown">Tariff price breakdown</InlineLink>
|
|
300
|
+
</CardInteraction>
|
|
301
|
+
</BodyText>
|
|
302
|
+
</Flex>
|
|
303
|
+
</ToggleButtonCard>
|
|
304
|
+
</ToggleGroup>
|
|
305
|
+
</Box>
|
|
306
|
+
```
|
|
307
|
+
|
|
308
|
+
## Accessibility
|
|
309
|
+
|
|
310
|
+
As the `ToggleButtonCard` is intended to contain additional information, you
|
|
311
|
+
must ensure it is labelled properly so that this information is available to
|
|
312
|
+
assistive technologies. This is especially true as the text contents of the
|
|
313
|
+
`button` element are likely to not be usefully descriptive.
|
|
314
|
+
|
|
315
|
+
You should use the `aria-labelledby` and `aria-describedby` props to label the
|
|
316
|
+
element with the information it contains:
|
|
317
|
+
|
|
318
|
+
```tsx
|
|
319
|
+
<ToggleButtonCard
|
|
320
|
+
value="fixed"
|
|
321
|
+
// this label is not useful or descriptive
|
|
322
|
+
label={value === 'fixed' ? 'Selected plan' : 'Select plan'}
|
|
323
|
+
// include ids of any text element which describes the main heading
|
|
324
|
+
// information in the card.
|
|
325
|
+
// You can include multiple ids in a space-separated id reference list.
|
|
326
|
+
aria-labelledby="fixed-label fixed-secondary-label"
|
|
327
|
+
// any additional descriptive information can also be included.
|
|
328
|
+
aria-describedby="fixed-description"
|
|
329
|
+
>
|
|
330
|
+
<Flex direction="column" gap="200">
|
|
331
|
+
{/* label id on the main heading */}
|
|
332
|
+
<Heading id="fixed-label" size="md">
|
|
333
|
+
Fixed
|
|
334
|
+
</Heading>
|
|
335
|
+
{/* a secondary label id will include all the text contained within it, to be read out by a screenreader. */}
|
|
336
|
+
<Flex id="fixed-secondary-label" direction="row" gap="100" alignItems="baseline">
|
|
337
|
+
<DetailText size="3xl">£163.00</DetailText>
|
|
338
|
+
<BodyText size="md" color="secondary" as="span">
|
|
339
|
+
monthly estimate
|
|
340
|
+
</BodyText>
|
|
341
|
+
</Flex>
|
|
342
|
+
{/* an id for any helpful further description of the content. */}
|
|
343
|
+
<BodyText id="fixed-description" as="p" size="md">
|
|
344
|
+
Your energy rates will stay the same until December 2025
|
|
345
|
+
</BodyText>
|
|
346
|
+
</Flex>
|
|
347
|
+
</ToggleButtonCard>
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
Uses [roving tabindex](https://www.w3.org/TR/wai-aria-practices-1.2/examples/radio/radio.html) to manage focus movement among items.
|
|
351
|
+
|
|
352
|
+
### Keyboard interactions
|
|
353
|
+
|
|
354
|
+
<Flex direction="column" gap="200" className="sb-unstyled">
|
|
355
|
+
<Flex>
|
|
356
|
+
<Box width="300px">
|
|
357
|
+
<BodyText as="span" weight="bold">
|
|
358
|
+
Key
|
|
359
|
+
</BodyText>
|
|
360
|
+
</Box>
|
|
361
|
+
<BodyText as="span" weight="bold">
|
|
362
|
+
Description
|
|
363
|
+
</BodyText>
|
|
364
|
+
</Flex>
|
|
365
|
+
<Divider />
|
|
366
|
+
{[
|
|
367
|
+
{
|
|
368
|
+
key: 'Tab',
|
|
369
|
+
description: 'Moves focus to either the pressed item or the first item in the group.',
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
key: 'Space',
|
|
373
|
+
description: 'Activates/deactivates the item.',
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
key: 'Enter',
|
|
377
|
+
description: 'Activates/deactivates the item.',
|
|
378
|
+
},
|
|
379
|
+
{
|
|
380
|
+
key: 'ArrowDown',
|
|
381
|
+
description: 'Moves focus to the next item in the group.',
|
|
382
|
+
},
|
|
383
|
+
{
|
|
384
|
+
key: 'ArrowRight',
|
|
385
|
+
description: 'Moves focus to the next item in the group.',
|
|
386
|
+
},
|
|
387
|
+
{
|
|
388
|
+
key: 'ArrowUp',
|
|
389
|
+
description: 'Moves focus to the previous item in the group.',
|
|
390
|
+
},
|
|
391
|
+
{
|
|
392
|
+
key: 'ArrowLeft',
|
|
393
|
+
description: 'Moves focus to the previous item in the group.',
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
key: 'Home',
|
|
397
|
+
description: 'Moves focus to the first item.',
|
|
398
|
+
},
|
|
399
|
+
{
|
|
400
|
+
key: 'End',
|
|
401
|
+
description: 'Moves focus to the last item.',
|
|
402
|
+
},
|
|
403
|
+
].map((kbi, i) => (
|
|
404
|
+
<>
|
|
405
|
+
<Flex>
|
|
406
|
+
<Box width="300px">
|
|
407
|
+
<kbd>{kbi.key}</kbd>
|
|
408
|
+
</Box>
|
|
409
|
+
<BodyText as="span">{kbi.description}</BodyText>
|
|
410
|
+
</Flex>
|
|
411
|
+
{i < 4 ? <Divider /> : null}
|
|
412
|
+
</>
|
|
413
|
+
))}
|
|
414
|
+
</Flex>
|
|
415
|
+
|
|
416
|
+
## ToggleGroup API
|
|
417
|
+
|
|
418
|
+
This component is based on the `Flex` component.
|
|
419
|
+
|
|
420
|
+
## ToggleButtonCard API
|
|
421
|
+
|
|
422
|
+
This component is based on the `button` element and `Flex` component and supports the following common props:
|
|
423
|
+
|
|
424
|
+
- Flex item
|
|
425
|
+
|
|
426
|
+
| Prop | Type | Default | Description |
|
|
427
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
428
|
+
| `label` | `string` | — | |
|
|
429
|
+
| `value` | `string` | — | A string value for the toggle group item. All items within a toggle group should use a unique value. |
|
|
430
|
+
| `asChild` | `boolean` | — | |
|
|
431
|
+
| `spacing` | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — | Set responsive spacing between child elements. |
|
|
432
|
+
| `flex` | `Responsive<string>` | — | |
|
|
433
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
434
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
435
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
436
|
+
| `display` | `Responsive<"none" \| "flex" \| "inline-flex">` | — | |
|
|
437
|
+
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | — | |
|
|
438
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
|
|
439
|
+
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
440
|
+
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
441
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
442
|
+
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
443
|
+
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
444
|
+
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
445
|
+
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
446
|
+
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
447
|
+
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
448
|
+
| `borderRadius` | `Responsive<"none" \| "inherit" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full">` | — | |
|
|
449
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
450
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
451
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
452
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
453
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
454
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
455
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
456
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
457
|
+
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
458
|
+
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
459
|
+
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
460
|
+
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
461
|
+
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
462
|
+
| `borderWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
463
|
+
| `borderTopWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
464
|
+
| `borderRightWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
465
|
+
| `borderBottomWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
466
|
+
| `borderLeftWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
467
|
+
| `gap` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
468
|
+
| `rowGap` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
469
|
+
| `columnGap` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
470
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
471
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
472
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
473
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
474
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
475
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
476
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
477
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
478
|
+
| `justifyContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | For flexboxes, the stretch value behaves as flex-start or start. This is because, in flexboxes, stretching is controlled using the flex-grow property. |
|
|
479
|
+
| `margin` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
480
|
+
| `marginTop` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
481
|
+
| `marginRight` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
482
|
+
| `marginBottom` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
483
|
+
| `marginLeft` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
484
|
+
| `marginX` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
485
|
+
| `marginY` | `Responsive<"0" \| "auto" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
486
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
487
|
+
| `order` | `Responsive<string>` | — | |
|
|
488
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
489
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
490
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
491
|
+
| `padding` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
492
|
+
| `paddingTop` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
493
|
+
| `paddingRight` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
494
|
+
| `paddingBottom` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
495
|
+
| `paddingLeft` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
496
|
+
| `paddingX` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
497
|
+
| `paddingY` | `Responsive<"0" \| `var(--h-${string})` \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
498
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
499
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
500
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
501
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
502
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
503
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
504
|
+
| `width` | `Responsive<string>` | — | |
|
|
505
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
506
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
507
|
+
| `height` | `Responsive<string>` | — | |
|
|
508
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
509
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
510
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
511
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
512
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
513
|
+
| `as` | `"div" \| "span"` | — | |
|