@utilitywarehouse/hearth-react 0.28.7 → 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-TLCA3FQZ.js → chunk-ABES5BZY.js} +2 -2
- package/dist/{chunk-OHPQ5IRM.cjs → chunk-Y2CHQFKQ.cjs} +2 -2
- package/dist/{chunk-OHPQ5IRM.cjs.map → chunk-Y2CHQFKQ.cjs.map} +1 -1
- package/dist/components/CardAccordion/CardAccordion.context.d.ts.map +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.cjs +1 -1
- package/dist/components/ExpandableCard/ExpandableCard.js +1 -1
- package/dist/components/ProgressBar/ProgressBar.cjs +1 -1
- package/dist/components/ProgressBar/ProgressBar.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 +14 -10
- 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 +1 -1
- /package/dist/{chunk-TLCA3FQZ.js.map → chunk-ABES5BZY.js.map} +0 -0
|
@@ -0,0 +1,231 @@
|
|
|
1
|
+
# ExpandableCard
|
|
2
|
+
|
|
3
|
+
Use `ExpandableCard` to show a summary header with an optional leading icon and helper text, which
|
|
4
|
+
can be expanded to reveal additional content.
|
|
5
|
+
|
|
6
|
+
- [Leading icon](#leading-icon)
|
|
7
|
+
- [Default open](#default-open)
|
|
8
|
+
- [Controlled](#controlled)
|
|
9
|
+
- [ExpandableCardGroup](#expandablecardgroup)
|
|
10
|
+
- [Accessibility](#accessibility)
|
|
11
|
+
- [Keyboard interactions](#keyboard-interactions)
|
|
12
|
+
- [API](#api)
|
|
13
|
+
- [ExpandableCardGroup](#expandablecardgroup-api)
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Box width="400px" marginX="auto">
|
|
17
|
+
<ExpandableCard {...args}>
|
|
18
|
+
<BodyText size="md">
|
|
19
|
+
This is the expandable content area. It can contain any content you need to show when the card
|
|
20
|
+
is expanded.
|
|
21
|
+
</BodyText>
|
|
22
|
+
</ExpandableCard>
|
|
23
|
+
</Box>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Alternatives
|
|
27
|
+
|
|
28
|
+
- Accordion - for when you have multiple
|
|
29
|
+
sections of content that need to be expanded/collapsed independently.
|
|
30
|
+
|
|
31
|
+
## Leading icon
|
|
32
|
+
|
|
33
|
+
Use the `leadingIcon` prop to render an icon to the left of the heading. Pass `aria-hidden` to
|
|
34
|
+
ensure it is not announced to screen readers. Use `leadingIconContainerColorScheme` to wrap the
|
|
35
|
+
icon in a coloured `IconContainer`.
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
<Flex width="400px" direction="column" gap="200">
|
|
39
|
+
<ExpandableCard {...args} leadingIcon={<SettingsMediumIcon aria-hidden />}>
|
|
40
|
+
<BodyText size="md">
|
|
41
|
+
This is the expandable content area. It can contain any content you need to show when the card
|
|
42
|
+
is expanded.
|
|
43
|
+
</BodyText>
|
|
44
|
+
</ExpandableCard>
|
|
45
|
+
<ExpandableCard
|
|
46
|
+
heading="Broadband"
|
|
47
|
+
helperText="Manage your broadband settings"
|
|
48
|
+
leadingIcon={<BroadbandMediumIcon aria-hidden />}
|
|
49
|
+
>
|
|
50
|
+
<BodyText size="md">Your broadband plan details and settings appear here.</BodyText>
|
|
51
|
+
</ExpandableCard>
|
|
52
|
+
<ExpandableCard heading="Broadband" leadingIcon={<BroadbandMediumIcon aria-hidden />}>
|
|
53
|
+
<BodyText size="md">Your broadband plan details and settings appear here.</BodyText>
|
|
54
|
+
</ExpandableCard>
|
|
55
|
+
<ExpandableCard
|
|
56
|
+
heading="Mobile"
|
|
57
|
+
helperText="Manage your mobile settings"
|
|
58
|
+
leadingIcon={<MobileMediumIcon aria-hidden />}
|
|
59
|
+
leadingIconContainerColorScheme="mobile"
|
|
60
|
+
>
|
|
61
|
+
<BodyText size="md">Your mobile plan details and settings appear here.</BodyText>
|
|
62
|
+
</ExpandableCard>
|
|
63
|
+
<ExpandableCard
|
|
64
|
+
heading="Mobile"
|
|
65
|
+
leadingIcon={<MobileMediumIcon aria-hidden />}
|
|
66
|
+
leadingIconContainerColorScheme="mobile"
|
|
67
|
+
>
|
|
68
|
+
<BodyText size="md">Your mobile plan details and settings appear here.</BodyText>
|
|
69
|
+
</ExpandableCard>
|
|
70
|
+
</Flex>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Default open
|
|
74
|
+
|
|
75
|
+
Use `defaultOpen` to render the card in the open state on initial mount. This is an uncontrolled
|
|
76
|
+
approach — the card manages its own open/closed state internally after mount.
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<ExpandableCard heading="Heading" helperText="Helper text" defaultOpen>
|
|
80
|
+
{children}
|
|
81
|
+
</ExpandableCard>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<Box width="400px" marginX="auto">
|
|
86
|
+
<ExpandableCard
|
|
87
|
+
heading="Heading"
|
|
88
|
+
helperText="This card starts expanded"
|
|
89
|
+
leadingIcon={<SettingsMediumIcon aria-hidden />}
|
|
90
|
+
defaultOpen
|
|
91
|
+
>
|
|
92
|
+
<BodyText size="md">
|
|
93
|
+
This card is open by default using the <code>defaultOpen</code> prop.
|
|
94
|
+
</BodyText>
|
|
95
|
+
</ExpandableCard>
|
|
96
|
+
</Box>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Controlled
|
|
100
|
+
|
|
101
|
+
Use the `open` and `onOpenChange` props together to control the open state externally.
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
const [open, setOpen] = React.useState(false);
|
|
105
|
+
|
|
106
|
+
<ExpandableCard heading="Heading" helperText="Helper text" open={open} onOpenChange={setOpen}>
|
|
107
|
+
{children}
|
|
108
|
+
</ExpandableCard>;
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## ExpandableCardGroup
|
|
112
|
+
|
|
113
|
+
Use `ExpandableCardGroup` to group multiple `ExpandableCard` components together with a consistent
|
|
114
|
+
gap. An optional `heading`, `helperText`, and `trailingContent` can be provided via the built-in
|
|
115
|
+
`SectionHeader`.
|
|
116
|
+
|
|
117
|
+
If the `ExpandableCard` components are closely related, you might be better off
|
|
118
|
+
using the `Accordion` component instead, which has built-in support for
|
|
119
|
+
grouping related content.
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<Box width="400px" marginX="auto">
|
|
123
|
+
<ExpandableCardGroup heading="My services" helperText="Manage your UW services">
|
|
124
|
+
<ExpandableCard
|
|
125
|
+
heading="Broadband"
|
|
126
|
+
helperText="Manage your broadband settings"
|
|
127
|
+
leadingIcon={<BroadbandMediumIcon aria-hidden />}
|
|
128
|
+
leadingIconContainerColorScheme="broadband"
|
|
129
|
+
>
|
|
130
|
+
<BodyText size="md">Your broadband plan details and settings appear here.</BodyText>
|
|
131
|
+
</ExpandableCard>
|
|
132
|
+
<ExpandableCard
|
|
133
|
+
heading="Mobile"
|
|
134
|
+
helperText="Manage your mobile settings"
|
|
135
|
+
leadingIcon={<MobileMediumIcon aria-hidden />}
|
|
136
|
+
leadingIconContainerColorScheme="mobile"
|
|
137
|
+
>
|
|
138
|
+
<BodyText size="md">Your mobile plan details and settings appear here.</BodyText>
|
|
139
|
+
</ExpandableCard>
|
|
140
|
+
<ExpandableCard
|
|
141
|
+
heading="Settings"
|
|
142
|
+
helperText="General account settings"
|
|
143
|
+
leadingIcon={<SettingsMediumIcon aria-hidden />}
|
|
144
|
+
leadingIconContainerColorScheme="highlight"
|
|
145
|
+
>
|
|
146
|
+
<BodyText size="md">Your account settings appear here.</BodyText>
|
|
147
|
+
</ExpandableCard>
|
|
148
|
+
</ExpandableCardGroup>
|
|
149
|
+
</Box>
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Accessibility
|
|
153
|
+
|
|
154
|
+
Follows the [Disclosure (Show/Hide) WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
|
|
155
|
+
|
|
156
|
+
### Keyboard interactions
|
|
157
|
+
|
|
158
|
+
<Flex direction="column" gap="200" className="sb-unstyled">
|
|
159
|
+
<Flex>
|
|
160
|
+
<Box width="300px">
|
|
161
|
+
<BodyText as="span" weight="bold">
|
|
162
|
+
Key
|
|
163
|
+
</BodyText>
|
|
164
|
+
</Box>
|
|
165
|
+
<BodyText as="span" weight="bold">
|
|
166
|
+
Description
|
|
167
|
+
</BodyText>
|
|
168
|
+
</Flex>
|
|
169
|
+
<Divider />
|
|
170
|
+
{[
|
|
171
|
+
{ key: 'Space', description: 'Toggles the expanded state of the card.' },
|
|
172
|
+
{ key: 'Enter', description: 'Toggles the expanded state of the card.' },
|
|
173
|
+
{ key: 'Tab', description: 'Moves focus to the next focusable element.' },
|
|
174
|
+
{ key: 'Shift+Tab', description: 'Moves focus to the previous focusable element.' },
|
|
175
|
+
].map((kbi, i, arr) => (
|
|
176
|
+
<>
|
|
177
|
+
<Flex>
|
|
178
|
+
<Box width="300px">
|
|
179
|
+
<kbd>{kbi.key}</kbd>
|
|
180
|
+
</Box>
|
|
181
|
+
<BodyText as="span">{kbi.description}</BodyText>
|
|
182
|
+
</Flex>
|
|
183
|
+
{i < arr.length - 1 ? <Divider /> : null}
|
|
184
|
+
</>
|
|
185
|
+
))}
|
|
186
|
+
</Flex>
|
|
187
|
+
|
|
188
|
+
## API
|
|
189
|
+
|
|
190
|
+
This component is based on the `div` element and supports the following common props:
|
|
191
|
+
|
|
192
|
+
- Margin
|
|
193
|
+
|
|
194
|
+
| Prop | Type | Default | Description |
|
|
195
|
+
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
|
|
196
|
+
| `heading` | `string` | — | |
|
|
197
|
+
| `helperText` | `string` | — | |
|
|
198
|
+
| `leadingIcon` | `ReactNode` | — | |
|
|
199
|
+
| `leadingIconContainerColorScheme` | `"energy" \| "mobile" \| "broadband" \| "insurance" \| "cashback" \| "pig" \| "highlight"` | — | |
|
|
200
|
+
| `badge` | `ReactNode` | — | |
|
|
201
|
+
| `numericValue` | `string` | — | |
|
|
202
|
+
| `open` | `boolean` | — | |
|
|
203
|
+
| `defaultOpen` | `boolean` | — | |
|
|
204
|
+
| `onOpenChange` | `((open: boolean) => void)` | — | |
|
|
205
|
+
| `margin` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
206
|
+
| `marginTop` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
207
|
+
| `marginRight` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
208
|
+
| `marginBottom` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
209
|
+
| `marginLeft` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
210
|
+
| `marginX` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
211
|
+
| `marginY` | `Responsive<"0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
212
|
+
|
|
213
|
+
### ExpandableCardGroup API
|
|
214
|
+
|
|
215
|
+
This component is based on the `div` element and supports the following common props:
|
|
216
|
+
|
|
217
|
+
- Margin
|
|
218
|
+
|
|
219
|
+
| Prop | Type | Default | Description |
|
|
220
|
+
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- |
|
|
221
|
+
| `heading` | `string` | — | Actual string to display as section header |
|
|
222
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
223
|
+
| `trailingContent` | `ReactNode` | — | Optional trailing content element |
|
|
224
|
+
| `headingElement` | `"h1" \| "h2" \| "h3" \| "h4"` | — | |
|
|
225
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
226
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
227
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
228
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
229
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
230
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
231
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# Flex
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<Flex {...args}>
|
|
5
|
+
<Placeholder padding="600" />
|
|
6
|
+
<Placeholder padding="600" />
|
|
7
|
+
<Placeholder padding="600" />
|
|
8
|
+
<Placeholder padding="600" />
|
|
9
|
+
</Flex>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Alternatives
|
|
13
|
+
|
|
14
|
+
- Box - For primitive styling and layouts
|
|
15
|
+
- Container - For page content, with default
|
|
16
|
+
responsive padding & gutters
|
|
17
|
+
- Flex - For stacked, inline or flexbox based
|
|
18
|
+
layouts
|
|
19
|
+
|
|
20
|
+
## Gap
|
|
21
|
+
|
|
22
|
+
`Flex` supports the `gap`, `columnGap` and `rowGap` properties, which use the
|
|
23
|
+
design token spacing scale. All gap properties are responsive.
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
<Flex columnGap="400" rowGap={{ mobile: "100", desktop: "300" }}>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Spacing
|
|
30
|
+
|
|
31
|
+
As well as `gap`, there is a `spacing` prop which uses a smaller scale, already
|
|
32
|
+
optimised for responsive design. This prop will be overridden by the `gap`
|
|
33
|
+
prop.
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<Flex spacing="lg">
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Semantic HTML
|
|
40
|
+
|
|
41
|
+
By default `Flex` renders a `div` element, this can be customised using the
|
|
42
|
+
`as` prop, to render a `span`.
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<Flex as="span">...</Flex>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
To render any other valid HTML element, you can use the `asChild` prop.
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
<Flex asChild>
|
|
52
|
+
<main>...</main>
|
|
53
|
+
</Flex>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
This will render the child element, with all the styles declared on the `Flex`
|
|
57
|
+
component passed down to it as well.
|
|
58
|
+
|
|
59
|
+
## Usage with Divider
|
|
60
|
+
|
|
61
|
+
You can insert a `Divider` component in between `Flex` children in the following way:
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
<Flex direction="column">
|
|
65
|
+
{meters.map((meter, index) => (
|
|
66
|
+
<>
|
|
67
|
+
<EnergyMeter
|
|
68
|
+
key={meter.meterId ? meter.meterId : `${meter.__typename}-${index}`}
|
|
69
|
+
meter={meter}
|
|
70
|
+
/>
|
|
71
|
+
<Divider />
|
|
72
|
+
</>
|
|
73
|
+
))}
|
|
74
|
+
</Flex>
|
|
75
|
+
|
|
76
|
+
<Flex direction="column">
|
|
77
|
+
{["100", "200", "400"].map((padding, i) => (
|
|
78
|
+
<>
|
|
79
|
+
<Box padding={padding} >
|
|
80
|
+
<BodyText>Item {i + 1}</BodyText>
|
|
81
|
+
</Box>
|
|
82
|
+
{i < 2 ? <Divider /> : null}
|
|
83
|
+
</>
|
|
84
|
+
))}
|
|
85
|
+
</Flex>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
## API
|
|
89
|
+
|
|
90
|
+
This component is based on the `div` element and supports the following common props:
|
|
91
|
+
|
|
92
|
+
- AlignSelf
|
|
93
|
+
- Gap
|
|
94
|
+
- Padding
|
|
95
|
+
- Margin
|
|
96
|
+
- Position
|
|
97
|
+
- Size
|
|
98
|
+
- Colour
|
|
99
|
+
- Background colour
|
|
100
|
+
- Border colour
|
|
101
|
+
- Border
|
|
102
|
+
- Flex item
|
|
103
|
+
- Grid item
|
|
104
|
+
- Text align
|
|
105
|
+
- Text transform
|
|
106
|
+
- Z-Index
|
|
107
|
+
- Overflow
|
|
108
|
+
- Opacity
|
|
109
|
+
- Order
|
|
110
|
+
|
|
111
|
+
| Prop | Type | Default | Description |
|
|
112
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
113
|
+
| `spacing` | `"none" \| "2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | — | Set responsive spacing between child elements. |
|
|
114
|
+
| `asChild` | `boolean` | — | |
|
|
115
|
+
| `display` | `Responsive<"flex" \| "none" \| "inline-flex">` | — | |
|
|
116
|
+
| `direction` | `Responsive<"row" \| "column" \| "row-reverse" \| "column-reverse">` | — | |
|
|
117
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "wrap-reverse">` | — | |
|
|
118
|
+
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
119
|
+
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
120
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
121
|
+
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
122
|
+
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
123
|
+
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
124
|
+
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
125
|
+
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
126
|
+
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
127
|
+
| `borderRadius` | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | — | |
|
|
128
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
129
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
130
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
131
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
132
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
133
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
134
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
135
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
136
|
+
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
137
|
+
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
138
|
+
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
139
|
+
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
140
|
+
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
141
|
+
| `borderWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
142
|
+
| `borderTopWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
143
|
+
| `borderRightWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
144
|
+
| `borderBottomWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
145
|
+
| `borderLeftWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
146
|
+
| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
|
|
147
|
+
| `flex` | `Responsive<string>` | — | |
|
|
148
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
149
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
150
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
151
|
+
| `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
152
|
+
| `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
153
|
+
| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
154
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
155
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
156
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
157
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
158
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
159
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
160
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
161
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
162
|
+
| `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. |
|
|
163
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
164
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
165
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
166
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
167
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
168
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
169
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
170
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
171
|
+
| `order` | `Responsive<string>` | — | |
|
|
172
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
173
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
174
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
175
|
+
| `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
176
|
+
| `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
177
|
+
| `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
178
|
+
| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
179
|
+
| `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
180
|
+
| `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
181
|
+
| `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
182
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
183
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
184
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
185
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
186
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
187
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
188
|
+
| `width` | `Responsive<string>` | — | |
|
|
189
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
190
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
191
|
+
| `height` | `Responsive<string>` | — | |
|
|
192
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
193
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
194
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
195
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
196
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
197
|
+
| `as` | `"span" \| "div"` | — | |
|