@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,244 @@
|
|
|
1
|
+
# Grid
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<Grid {...args}>
|
|
5
|
+
<Placeholder padding="400" />
|
|
6
|
+
<Placeholder padding="400" />
|
|
7
|
+
<Placeholder padding="400" />
|
|
8
|
+
<Placeholder padding="400" />
|
|
9
|
+
<Placeholder padding="400" />
|
|
10
|
+
<Placeholder padding="400" />
|
|
11
|
+
</Grid>
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
## Alternatives
|
|
15
|
+
|
|
16
|
+
- Box - For primitive styling and layouts
|
|
17
|
+
- Container - For page content, with default
|
|
18
|
+
responsive padding & gutters
|
|
19
|
+
- Flex - For stacked, inline or flexbox based
|
|
20
|
+
layouts
|
|
21
|
+
|
|
22
|
+
## Gap
|
|
23
|
+
|
|
24
|
+
`Grid` supports the `gap`, `columnGap` and `rowGap` properties, which use the
|
|
25
|
+
design token spacing scale. All gap properties are repsonsive.
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
<Grid columnGap="400" rowGap={{ mobile: "100", desktop: "300" }}>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Columns
|
|
32
|
+
|
|
33
|
+
The `Grid` component also supports a custom `columns` prop, which can
|
|
34
|
+
responsively set the number of grid columns.
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
<Grid
|
|
38
|
+
defaultResponsiveColumns // columns={{ mobile: '4', tablet: '8', desktop: '12' }}
|
|
39
|
+
width={{ mobile: '360px', tablet: '744px', desktop: '1096px' }}
|
|
40
|
+
padding={{ mobile: '200', tablet: '400' }}
|
|
41
|
+
gap="200"
|
|
42
|
+
>
|
|
43
|
+
<Placeholder gridColumnSpan="4" padding="400" />
|
|
44
|
+
<Placeholder gridColumnSpan="4" padding="400" />
|
|
45
|
+
<Placeholder gridColumnSpan={{ mobile: '4', tablet: '8', desktop: '4' }} padding="400" />
|
|
46
|
+
</Grid>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
<Grid
|
|
51
|
+
columns={{ mobile: '4', tablet: '8', desktop: '12' }}
|
|
52
|
+
padding={{ mobile: '200', tablet: '400' }}
|
|
53
|
+
gap="200"
|
|
54
|
+
>
|
|
55
|
+
<Box gridColumnSpan="4" />
|
|
56
|
+
<Box gridColumnSpan="4" />
|
|
57
|
+
<Box gridColumnSpan={{ mobile: '4', tablet: '8', desktop: '4' }} padding="400" />
|
|
58
|
+
</Grid>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Default Columns
|
|
62
|
+
|
|
63
|
+
In an effort to be more explicit about the behaviour of the `Grid` component,
|
|
64
|
+
there are no default columns set. You can, however, use the
|
|
65
|
+
`defaultResponsiveColumns` prop to set our recommended responsive columns:
|
|
66
|
+
|
|
67
|
+
- 4 columns on `mobile`
|
|
68
|
+
- 8 columns on `tablet`
|
|
69
|
+
- 12 columns on `desktop` and `wide`
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
<Grid defaultResponsiveColumns>
|
|
73
|
+
{...}
|
|
74
|
+
</Grid>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Spacing
|
|
78
|
+
|
|
79
|
+
As well as `gap`, there is a `spacing` prop which uses a smaller scale, already
|
|
80
|
+
optimised for responsive design. This prop will be overridden by the `gap`
|
|
81
|
+
prop.
|
|
82
|
+
|
|
83
|
+
```tsx
|
|
84
|
+
<Grid spacing="lg">
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Grid Items
|
|
88
|
+
|
|
89
|
+
Where the `Grid` component is considered the grid parent, or grid container,
|
|
90
|
+
all primitive layout components can be used as grid items, or grid children,
|
|
91
|
+
and support props to control their behaviour when they are the child of a
|
|
92
|
+
`Grid` component.
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
<Grid>
|
|
96
|
+
<Grid gridArea="header">
|
|
97
|
+
|
|
98
|
+
<Box gridColumn="1 / 3" />
|
|
99
|
+
|
|
100
|
+
<Flex gridColumnEnd={{ mobile: "-1", tablet: "3", desktop: "auto" }} />
|
|
101
|
+
</Grid>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Semantic HTML
|
|
105
|
+
|
|
106
|
+
By default `Grid` renders a `div` element, this can be customised using the
|
|
107
|
+
`as` prop, to render a `span`.
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
<Grid as="span">...</Grid>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
To render any other valid HTML element, you can use the `asChild` prop.
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
<Grid asChild>
|
|
117
|
+
<main>...</main>
|
|
118
|
+
</Grid>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
This will render the child element, with all the styles declared on the `Grid`
|
|
122
|
+
component passed down to it as well.
|
|
123
|
+
|
|
124
|
+
## API
|
|
125
|
+
|
|
126
|
+
This component is based on the `div` element and supports the following common style props:
|
|
127
|
+
|
|
128
|
+
- AlignSelf
|
|
129
|
+
- Gap
|
|
130
|
+
- Padding
|
|
131
|
+
- Margin
|
|
132
|
+
- Position
|
|
133
|
+
- Size
|
|
134
|
+
- Colour
|
|
135
|
+
- Background colour
|
|
136
|
+
- Border colour
|
|
137
|
+
- Spacing
|
|
138
|
+
- Border
|
|
139
|
+
- Flex item
|
|
140
|
+
- Grid item
|
|
141
|
+
- Text align
|
|
142
|
+
- Text transform
|
|
143
|
+
- Z-Index
|
|
144
|
+
- Overflow
|
|
145
|
+
- Opacity
|
|
146
|
+
- Order
|
|
147
|
+
|
|
148
|
+
| Prop | Type | Default | Description |
|
|
149
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
150
|
+
| `template` | `Responsive<string>` | — | Shorthand for the full `grid-template` property. Supports responsive values. |
|
|
151
|
+
| `asChild` | `boolean` | — | When `true`, renders the Grid as a `Slot` so that its props are forwarded to the child element instead of rendering a DOM node. |
|
|
152
|
+
| `defaultResponsiveColumns` | `boolean` | — | When `true`, applies a default responsive column configuration (typically a single column on small screens and multiple columns on larger screens). |
|
|
153
|
+
| `display` | `Responsive<"none" \| "inline-grid" \| "grid">` | — | Controls the `display` behavior of the grid container. |
|
|
154
|
+
| `columns` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | Shorthand for configuring columns using the 12-column system or a custom `grid-template-columns` string. Supports responsive values. |
|
|
155
|
+
| `templateColumns` | `Responsive<string>` | — | Maps to `grid-template-columns`. Supports responsive values. |
|
|
156
|
+
| `templateRows` | `Responsive<string>` | — | Maps to `grid-template-rows`. Supports responsive values. |
|
|
157
|
+
| `templateAreas` | `Responsive<string>` | — | Maps to `grid-template-areas`. Supports responsive values. |
|
|
158
|
+
| `autoFlow` | `Responsive<"row" \| "column" \| "dense" \| "row-dense" \| "column-dense">` | — | Maps to `grid-auto-flow`. Supports responsive values. |
|
|
159
|
+
| `autoRows` | `Responsive<string>` | — | Maps to `grid-auto-rows`. Supports responsive values. |
|
|
160
|
+
| `autoColumns` | `Responsive<string>` | — | Maps to `grid-auto-columns`. Supports responsive values. |
|
|
161
|
+
| `justifyItems` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | Maps to `justify-items`. Supports responsive values. |
|
|
162
|
+
| `alignContent` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "between" \| "around" \| "evenly">` | — | |
|
|
163
|
+
| `alignItems` | `Responsive<"center" \| "start" \| "end" \| "stretch" \| "baseline">` | — | |
|
|
164
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
165
|
+
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
166
|
+
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
167
|
+
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
168
|
+
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
169
|
+
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
170
|
+
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
171
|
+
| `borderRadius` | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | — | |
|
|
172
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
173
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
174
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
175
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
176
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
177
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
178
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
179
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
180
|
+
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
181
|
+
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
182
|
+
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
183
|
+
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
184
|
+
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
185
|
+
| `borderWidth` | `Responsive<"1" \| "2" \| "0">` | — | |
|
|
186
|
+
| `borderTopWidth` | `Responsive<"1" \| "2" \| "0">` | — | |
|
|
187
|
+
| `borderRightWidth` | `Responsive<"1" \| "2" \| "0">` | — | |
|
|
188
|
+
| `borderBottomWidth` | `Responsive<"1" \| "2" \| "0">` | — | |
|
|
189
|
+
| `borderLeftWidth` | `Responsive<"1" \| "2" \| "0">` | — | |
|
|
190
|
+
| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
|
|
191
|
+
| `flex` | `Responsive<string>` | — | |
|
|
192
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
193
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
194
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
195
|
+
| `gap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
196
|
+
| `rowGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
197
|
+
| `columnGap` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
198
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
199
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
200
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
201
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
202
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
203
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
204
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
205
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
206
|
+
| `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. |
|
|
207
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
208
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
209
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
210
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
211
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
212
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
213
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| "auto">` | — | |
|
|
214
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
215
|
+
| `order` | `Responsive<string>` | — | |
|
|
216
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
217
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
218
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
219
|
+
| `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
220
|
+
| `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
221
|
+
| `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
222
|
+
| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
223
|
+
| `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
224
|
+
| `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
225
|
+
| `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
226
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
227
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
228
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
229
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
230
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
231
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
232
|
+
| `width` | `Responsive<string>` | — | |
|
|
233
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
234
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
235
|
+
| `height` | `Responsive<string>` | — | |
|
|
236
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
237
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
238
|
+
| `spacing` | `"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| "2xl"` | — | Set responsive spacing between child elements. |
|
|
239
|
+
| `rowSpacing` | `"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| "2xl"` | — | Set responsive row spacing between child elements. |
|
|
240
|
+
| `columnSpacing` | `"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xs" \| "2xl"` | — | Set responsive column spacing between child elements. |
|
|
241
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
242
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
243
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
244
|
+
| `as` | `"div" \| "span"` | — | |
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Heading
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<Flex direction="column" gap="100">
|
|
5
|
+
{sizes.map(size => (
|
|
6
|
+
<Heading key={size} size={size}>
|
|
7
|
+
Hamburgefons ({size})
|
|
8
|
+
</Heading>
|
|
9
|
+
))}
|
|
10
|
+
</Flex>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<Heading size="md">The five boxing wizards jump quickly.</Heading>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Alternatives
|
|
18
|
+
|
|
19
|
+
- BodyText - For body text
|
|
20
|
+
- DetailText - For detail text
|
|
21
|
+
- Strong - For strong importance
|
|
22
|
+
- Em - For emphasis
|
|
23
|
+
|
|
24
|
+
## Sizes
|
|
25
|
+
|
|
26
|
+
The size prop is not responsive, as the sizes themselves are already responsive
|
|
27
|
+
where necessary.
|
|
28
|
+
|
|
29
|
+
## Inverted
|
|
30
|
+
|
|
31
|
+
When using `Heading` on a darker background, specifically `purple700` &
|
|
32
|
+
`purple1000`, use the `inverted` prop to ensure colour contrast.
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<Box backgroundColor="brand" padding="400">
|
|
36
|
+
<Heading {...args}>Inverted text</Heading>
|
|
37
|
+
</Box>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## API
|
|
41
|
+
|
|
42
|
+
This component is based on the `h2` element and supports the following common props:
|
|
43
|
+
|
|
44
|
+
- Margin
|
|
45
|
+
- Text transform
|
|
46
|
+
- Text align
|
|
47
|
+
- Text wrap
|
|
48
|
+
|
|
49
|
+
| Prop | Type | Default | Description |
|
|
50
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
|
|
51
|
+
| `as` | `"h2" \| "h1" \| "h3" \| "h4"` | `h2` | |
|
|
52
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
53
|
+
| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `md` | Set the text size styles. |
|
|
54
|
+
| `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
|
|
55
|
+
| `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
|
|
56
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
57
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
|
|
58
|
+
| `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
|
|
59
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
60
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
61
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
62
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
63
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
64
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
65
|
+
| `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,27 @@
|
|
|
1
|
+
# HelperText
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<HelperText>Hearth helper text</HelperText>
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
## API
|
|
8
|
+
|
|
9
|
+
This component is based on the `span` element and supports the following common props:
|
|
10
|
+
|
|
11
|
+
- Margin
|
|
12
|
+
- Text transform
|
|
13
|
+
- Text align
|
|
14
|
+
|
|
15
|
+
| Prop | Type | Default | Description |
|
|
16
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------- |
|
|
17
|
+
| `disabled` | `boolean` | — | Set the helper text appearance to disabled. This will be overriden by the validation status. |
|
|
18
|
+
| `disableUserSelect` | `boolean` | — | Make the text unselectable, for use when associated with input elements. |
|
|
19
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
20
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
21
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
22
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
23
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
24
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
25
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
26
|
+
| `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
|
|
27
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# HighlightBanner
|
|
2
|
+
|
|
3
|
+
`HighlightBanner` can be used to highlight key information or marketing messaging.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
<Flex gap="400" width="800px">
|
|
7
|
+
<HighlightBanner heading="Save a bundle" headingColor="highlight" colorScheme="neutralStrong">
|
|
8
|
+
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
|
9
|
+
<img src={piggies} height="200px" />
|
|
10
|
+
<HighlightBannerFooter>
|
|
11
|
+
<BodyText size="md" wrap="wrap">
|
|
12
|
+
Homeowners who bundle two or more services with UW and activate the Cashback Card trial will
|
|
13
|
+
receive up to £150 in credit.
|
|
14
|
+
</BodyText>
|
|
15
|
+
</HighlightBannerFooter>
|
|
16
|
+
</HighlightBanner>
|
|
17
|
+
<HighlightBanner
|
|
18
|
+
heading="Save money on your household bills when you get it together"
|
|
19
|
+
headingColor="pig"
|
|
20
|
+
colorScheme="neutralStrong"
|
|
21
|
+
>
|
|
22
|
+
<HighlightBannerContent>
|
|
23
|
+
<BodyText size="md" textAlign="center">
|
|
24
|
+
For almost 30 years, we've been providing energy, broadband, mobile and insurance to
|
|
25
|
+
the nation - and helping our customers save along the way.
|
|
26
|
+
</BodyText>
|
|
27
|
+
<BodyText size="md" textAlign="center">
|
|
28
|
+
Want to talk it through? Our network of friendly, local Partners can help you find ways to
|
|
29
|
+
save.
|
|
30
|
+
</BodyText>
|
|
31
|
+
<Link href="#">
|
|
32
|
+
Find a UW Partner
|
|
33
|
+
<ChevronRightSmallIcon />
|
|
34
|
+
</Link>
|
|
35
|
+
</HighlightBannerContent>
|
|
36
|
+
</HighlightBanner>
|
|
37
|
+
</Flex>
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Usage
|
|
41
|
+
|
|
42
|
+
- `HighlightBanner` - the parent component, provides heading and main content layout
|
|
43
|
+
- `HighlightBannerContent` - For main content that requires consistent banner layout
|
|
44
|
+
- `HighlightBannerFooter` - For footer content
|
|
45
|
+
|
|
46
|
+
## Heading color
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<Flex gap="200" direction="column">
|
|
50
|
+
{headingColors.map(color => (
|
|
51
|
+
<Flex key={color} direction="row" gap="200">
|
|
52
|
+
<HighlightBanner
|
|
53
|
+
heading={`Heading ${color}`}
|
|
54
|
+
headingColor={color}
|
|
55
|
+
colorScheme="neutralSubtle"
|
|
56
|
+
>
|
|
57
|
+
<Box height="100px" width="200px" />
|
|
58
|
+
<HighlightBannerFooter>
|
|
59
|
+
<BodyText size="md">Neutral subtle</BodyText>
|
|
60
|
+
</HighlightBannerFooter>
|
|
61
|
+
</HighlightBanner>
|
|
62
|
+
<HighlightBanner
|
|
63
|
+
heading={`Heading ${color}`}
|
|
64
|
+
headingColor={color}
|
|
65
|
+
colorScheme="neutralStrong"
|
|
66
|
+
>
|
|
67
|
+
<Box height="100px" width="200px" />
|
|
68
|
+
<HighlightBannerFooter>
|
|
69
|
+
<BodyText size="md">Neutral strong</BodyText>
|
|
70
|
+
</HighlightBannerFooter>
|
|
71
|
+
</HighlightBanner>
|
|
72
|
+
</Flex>
|
|
73
|
+
))}
|
|
74
|
+
</Flex>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## API
|
|
78
|
+
|
|
79
|
+
This component is based on the `div` element and supports the following common props:
|
|
80
|
+
|
|
81
|
+
- Margin
|
|
82
|
+
|
|
83
|
+
| Prop | Type | Default | Description |
|
|
84
|
+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- |
|
|
85
|
+
| `colorScheme` | `"neutralStrong" \| "neutralSubtle"` | — | |
|
|
86
|
+
| `heading` | `string` | — | |
|
|
87
|
+
| `headingColor` | `"pig" \| "energy" \| "broadband" \| "mobile" \| "insurance" \| "cashback" \| "highlight"` | — | |
|
|
88
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
89
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
90
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
91
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
92
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
93
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
94
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|