@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,88 @@
|
|
|
1
|
+
# Z-Index
|
|
2
|
+
|
|
3
|
+
The `zIndex` prop sets the `z-index` value, it is responsive but does not
|
|
4
|
+
use any token values.
|
|
5
|
+
|
|
6
|
+
```tsx
|
|
7
|
+
<Box zIndex="1" />
|
|
8
|
+
<Box zIndex={{ mobile: "1", desktop: "-1" }}/>
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
| Prop | Type | Default | Description |
|
|
12
|
+
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------- |
|
|
13
|
+
| `asChild` | `boolean` | — | |
|
|
14
|
+
| `display` | `Responsive<"none" \| "inline" \| "inline-block" \| "block">` | — | |
|
|
15
|
+
| `alignSelf` | `Responsive<"center" \| "start" \| "end" \| "stretch">` | — | |
|
|
16
|
+
| `backgroundColor` | `"primary" \| "secondary" \| "brand" \| `var(--h-${string})`` | — | |
|
|
17
|
+
| `borderColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
18
|
+
| `borderTopColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
19
|
+
| `borderRightColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
20
|
+
| `borderBottomColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
21
|
+
| `borderLeftColor` | `"strong" \| `var(--h-${string})` \| "subtle"` | — | |
|
|
22
|
+
| `borderRadius` | `Responsive<"none" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "full" \| "inherit">` | — | |
|
|
23
|
+
| `borderRadiusTopLeftNone` | `boolean` | — | |
|
|
24
|
+
| `borderRadiusTopRightNone` | `boolean` | — | |
|
|
25
|
+
| `borderRadiusBottomLeftNone` | `boolean` | — | |
|
|
26
|
+
| `borderRadiusBottomRightNone` | `boolean` | — | |
|
|
27
|
+
| `borderRadiusTopNone` | `boolean` | — | |
|
|
28
|
+
| `borderRadiusRightNone` | `boolean` | — | |
|
|
29
|
+
| `borderRadiusBottomNone` | `boolean` | — | |
|
|
30
|
+
| `borderRadiusLeftNone` | `boolean` | — | |
|
|
31
|
+
| `borderStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
32
|
+
| `borderTopStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
33
|
+
| `borderRightStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
34
|
+
| `borderBottomStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
35
|
+
| `borderLeftStyle` | `Responsive<"none" \| "solid">` | — | |
|
|
36
|
+
| `borderWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
37
|
+
| `borderTopWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
38
|
+
| `borderRightWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
39
|
+
| `borderBottomWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
40
|
+
| `borderLeftWidth` | `Responsive<"0" \| "1" \| "2">` | — | |
|
|
41
|
+
| `color` | `"primary" \| "secondary" \| "brand" \| "affirmative" \| "inverted" \| `var(--h-${string})`` | — | |
|
|
42
|
+
| `flex` | `Responsive<string>` | — | |
|
|
43
|
+
| `flexBasis` | `Responsive<string>` | — | |
|
|
44
|
+
| `flexShrink` | `Responsive<string>` | — | |
|
|
45
|
+
| `flexGrow` | `Responsive<string>` | — | |
|
|
46
|
+
| `gridColumnSpan` | `Responsive<Union<string, "1" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "10" \| "11" \| "12">>` | — | |
|
|
47
|
+
| `gridArea` | `Responsive<string>` | — | |
|
|
48
|
+
| `gridColumn` | `Responsive<string>` | — | |
|
|
49
|
+
| `gridColumnStart` | `Responsive<string>` | — | |
|
|
50
|
+
| `gridColumnEnd` | `Responsive<string>` | — | |
|
|
51
|
+
| `gridRow` | `Responsive<string>` | — | |
|
|
52
|
+
| `gridRowStart` | `Responsive<string>` | — | |
|
|
53
|
+
| `gridRowEnd` | `Responsive<string>` | — | |
|
|
54
|
+
| `margin` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
55
|
+
| `marginTop` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
56
|
+
| `marginRight` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
57
|
+
| `marginBottom` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
58
|
+
| `marginLeft` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
59
|
+
| `marginX` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
60
|
+
| `marginY` | `Responsive<`var(--h-${string})` \| "0" \| "auto" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
61
|
+
| `opacity` | `Responsive<string>` | — | |
|
|
62
|
+
| `order` | `Responsive<string>` | — | |
|
|
63
|
+
| `overflow` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
64
|
+
| `overflowX` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
65
|
+
| `overflowY` | `Responsive<"hidden" \| "auto" \| "visible" \| "clip" \| "scroll">` | — | |
|
|
66
|
+
| `padding` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
67
|
+
| `paddingTop` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
68
|
+
| `paddingRight` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
69
|
+
| `paddingBottom` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
70
|
+
| `paddingLeft` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
71
|
+
| `paddingX` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
72
|
+
| `paddingY` | `Responsive<`var(--h-${string})` \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">` | — | |
|
|
73
|
+
| `position` | `Responsive<"fixed" \| "static" \| "relative" \| "absolute" \| "sticky">` | — | |
|
|
74
|
+
| `inset` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
75
|
+
| `top` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
76
|
+
| `right` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
77
|
+
| `bottom` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
78
|
+
| `left` | `Responsive<Union<string, "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000">>` | — | |
|
|
79
|
+
| `width` | `Responsive<string>` | — | |
|
|
80
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
81
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
82
|
+
| `height` | `Responsive<string>` | — | |
|
|
83
|
+
| `maxHeight` | `Responsive<string>` | — | |
|
|
84
|
+
| `minHeight` | `Responsive<string>` | — | |
|
|
85
|
+
| `textAlign` | `Responsive<"center" \| "right" \| "left">` | — | |
|
|
86
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
87
|
+
| `zIndex` | `Responsive<string>` | — | |
|
|
88
|
+
| `as` | `"div" \| "span"` | — | |
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
# Hearth Tokens
|
|
2
|
+
|
|
3
|
+
Hearth Tokens is a Design Tokens library providing an easy way to access
|
|
4
|
+
predefined values for spacing, colour, typography, borders, components, radii,
|
|
5
|
+
and more.
|
|
6
|
+
|
|
7
|
+
It is used to apply consistent styling across our React components, via CSS custom
|
|
8
|
+
properties. These properties are included in the CSS for Hearth React, and can
|
|
9
|
+
be used in your own stylesheets, as well as in CSS-in-JS via the browser
|
|
10
|
+
specific tokens.
|
|
11
|
+
|
|
12
|
+
While the Hearth React components try to meet all your styling needs, there may
|
|
13
|
+
be times you need to access specific values for your own custom styles or
|
|
14
|
+
design overrides. In these cases, the Hearth tokens can be a useful resource to
|
|
15
|
+
ensure you are using the correct values, and to keep your styles consistent
|
|
16
|
+
with the components.
|
|
17
|
+
|
|
18
|
+
## CSS Usage
|
|
19
|
+
|
|
20
|
+
As the CSS custom properties are included in the CSS for Hearth React, you can
|
|
21
|
+
use them directly in your stylesheets without needing to install the tokens
|
|
22
|
+
package.
|
|
23
|
+
|
|
24
|
+
```css
|
|
25
|
+
.my-component {
|
|
26
|
+
color: var(--h-text-primary);
|
|
27
|
+
background-color: var(--h-background-primary);
|
|
28
|
+
padding: var(--h-space-300);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## JavaScript Usage
|
|
33
|
+
|
|
34
|
+
To use the Hearth Tokens in JavaScript or TypeScript files you will need to
|
|
35
|
+
install it separately.
|
|
36
|
+
|
|
37
|
+
```console
|
|
38
|
+
npm install @utilitywarehouse/hearth-tokens
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
When importing the tokens, make sure you specifically import the browser
|
|
42
|
+
tokens, and **not** the JS tokens. These tokens reference the CSS custom
|
|
43
|
+
properties already included with Hearth React, rather than raw values.
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
import {
|
|
47
|
+
border,
|
|
48
|
+
space,
|
|
49
|
+
color,
|
|
50
|
+
components,
|
|
51
|
+
semantic,
|
|
52
|
+
font,
|
|
53
|
+
} from '@utilitywarehouse/hearth-tokens/browser';
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
You can then reference them in your code.
|
|
57
|
+
|
|
58
|
+
```tsx
|
|
59
|
+
// Usage in CSS-in-JS
|
|
60
|
+
<Component
|
|
61
|
+
sx={{
|
|
62
|
+
color: semantic.feedback.positive.foreground.subtle, // color: var(--h-color); & --h-color: var(--h-feedback-positive-foreground-subtle);
|
|
63
|
+
}}
|
|
64
|
+
>
|
|
65
|
+
{...}
|
|
66
|
+
</Component>
|
|
67
|
+
|
|
68
|
+
// Some, but not all, style props will accept the browser tokens as values
|
|
69
|
+
<Box color={semantic.feedback.positive.foreground.subtle}>
|
|
70
|
+
{...}
|
|
71
|
+
</Box>
|
|
72
|
+
```
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# Hearth React
|
|
2
|
+
|
|
3
|
+
Current version: v0.28.7
|
|
4
|
+
|
|
5
|
+
- [Install Hearth](#install-hearth)
|
|
6
|
+
- [Import CSS](#import-css)
|
|
7
|
+
- [HearthProvider](#hearthprovider)
|
|
8
|
+
- [Start building](#start-building)
|
|
9
|
+
- [CSS reset](#css-reset)
|
|
10
|
+
- [Portals](#portals)
|
|
11
|
+
- [React DevTools](#react-devtools)
|
|
12
|
+
|
|
13
|
+
## Install Hearth
|
|
14
|
+
|
|
15
|
+
There are 3 libraries you'll need to get started:
|
|
16
|
+
|
|
17
|
+
- Hearth React
|
|
18
|
+
- Hearth React Icons
|
|
19
|
+
- Hearth Fonts
|
|
20
|
+
|
|
21
|
+
```console
|
|
22
|
+
yarn add @utilitywarehouse/hearth-react @utilitywarehouse/hearth-react-icons @utilitywarehouse/hearth-fonts
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
or
|
|
26
|
+
|
|
27
|
+
```console
|
|
28
|
+
npm install @utilitywarehouse/hearth-react @utilitywarehouse/hearth-react-icons @utilitywarehouse/hearth-fonts
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
or
|
|
32
|
+
|
|
33
|
+
```console
|
|
34
|
+
pnpm add @utilitywarehouse/hearth-react @utilitywarehouse/hearth-react-icons @utilitywarehouse/hearth-fonts
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Import CSS
|
|
38
|
+
|
|
39
|
+
Add the following imports in the root of your application:
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import '@utilitywarehouse/hearth-fonts';
|
|
43
|
+
import '@utilitywarehouse/hearth-react/styles.css';
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## HearthProvider
|
|
47
|
+
|
|
48
|
+
Wrap your application with `HearthProvider` to enable all necessary context
|
|
49
|
+
providers for Hearth components. It is recommended to place this at the root of
|
|
50
|
+
your application. However if you prefer a more specific approach, you can use
|
|
51
|
+
the specific providers as needed, which are also exported from the package.
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
import { HearthProvider } from '@utilitywarehouse/hearth-react';
|
|
55
|
+
|
|
56
|
+
function App({ children }) {
|
|
57
|
+
return <HearthProvider>{children}</HearthProvider>;
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
`HearthProvider` currently includes the following providers:
|
|
62
|
+
|
|
63
|
+
- `TooltipProvider` — required for the `Tooltip` component.
|
|
64
|
+
|
|
65
|
+
## Start building
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { Flex, BodyText, Button } from '@utilitywarehouse/hearth-react';
|
|
69
|
+
import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-icons';
|
|
70
|
+
|
|
71
|
+
export default function MyApp() {
|
|
72
|
+
return (
|
|
73
|
+
<Flex direction="column" gap="200">
|
|
74
|
+
<BodyText>Hello from Hearth React</BodyText>
|
|
75
|
+
<Button variant="emphasis">
|
|
76
|
+
Let's go
|
|
77
|
+
<ChevronRightSmallIcon />
|
|
78
|
+
</Button>
|
|
79
|
+
</Flex>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
## CSS reset
|
|
85
|
+
|
|
86
|
+
The Heart CSS Reset and Hearth Tokens CSS custom properties are now included in
|
|
87
|
+
the Heart React global styles, so you don't need to install them separately.
|
|
88
|
+
|
|
89
|
+
## Portals
|
|
90
|
+
|
|
91
|
+
Hearth React uses portals for components that render popups, such as `Modal`.
|
|
92
|
+
To make portalled components always appear on top of the entire page, add the
|
|
93
|
+
following style to your application layout root.
|
|
94
|
+
|
|
95
|
+
```html
|
|
96
|
+
<body>
|
|
97
|
+
<div className="root">{children}</div>
|
|
98
|
+
</body>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
```css
|
|
102
|
+
.root {
|
|
103
|
+
isolation: isolate;
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
This style creates a separate stacking context for your application’s `.root`
|
|
108
|
+
element. This way, popups will always appear above the page contents, and any
|
|
109
|
+
`z-index` property in your styles won’t interfere with them.
|
|
110
|
+
|
|
111
|
+
## React DevTools
|
|
112
|
+
|
|
113
|
+
React DevTools can interfere with PostCSS AST nodes during development, so as
|
|
114
|
+
we are using PostCSS, you may see an error when debugging your code. This happens because React DevTools may modify object prototypes or add non-standard properties to objects, which can break assumptions made by build-time tools like PostCSS.
|
|
115
|
+
This is a known limitation of browser DevTools extensions interfering with build-time tooling. You can safely ignore these errors, and turn off React DevTools while debugging if you're not using it.
|
|
116
|
+
|
|
117
|
+
For more details, see [facebook/react-devtools#1667](https://github.com/facebook/react-devtools/issues/1667) and [postcss/postcss#1451](https://github.com/postcss/postcss/issues/1451).
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
# Layout
|
|
2
|
+
|
|
3
|
+
These components focus on creating layouts and can be used as base building
|
|
4
|
+
blocks for other components and patterns. These layout primitives are built
|
|
5
|
+
upon our design tokens, and provide styling options which make it easier to
|
|
6
|
+
apply design decisions coherently.
|
|
7
|
+
|
|
8
|
+
## Box
|
|
9
|
+
|
|
10
|
+
```tsx
|
|
11
|
+
<Box {...args} />
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
`Box` is the most fundamental component, and can be used to provide spacing,
|
|
15
|
+
size and colour to elements. It can be used to control behaviour of child
|
|
16
|
+
elements within `flexbox` and `grid` containers, and to show or hide content
|
|
17
|
+
responsively.
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
<Box
|
|
21
|
+
display={{ mobile: "none", tablet: "block" }}
|
|
22
|
+
padding={{ tablet: "200", desktop: "400" }}
|
|
23
|
+
marginBottom="300"
|
|
24
|
+
maxWidth="800px"
|
|
25
|
+
>
|
|
26
|
+
{...}
|
|
27
|
+
</Box>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Flex
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<Flex {...args}>
|
|
34
|
+
<Placeholder padding="600" />
|
|
35
|
+
<Placeholder padding="600" />
|
|
36
|
+
<Placeholder padding="600" />
|
|
37
|
+
<Placeholder padding="600" />
|
|
38
|
+
</Flex>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
`Flex` takes everything `Box` can do, and adds a handy set of props for
|
|
42
|
+
building with CSS flexbox properties. This component is useful for defining
|
|
43
|
+
layouts along an axis, and replaces the `Stack` component you may have used in
|
|
44
|
+
other libraries.
|
|
45
|
+
|
|
46
|
+
```tsx
|
|
47
|
+
<Flex
|
|
48
|
+
padding="400"
|
|
49
|
+
gap={{ mobile: "200", desktop: "400" }}
|
|
50
|
+
direction={{ mobile: 'column', desktop: 'row' }}
|
|
51
|
+
alignItems="center"
|
|
52
|
+
>
|
|
53
|
+
{...}
|
|
54
|
+
</Flex>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Grid
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Grid {...args}>
|
|
61
|
+
<Placeholder padding="400" />
|
|
62
|
+
<Placeholder padding="400" />
|
|
63
|
+
<Placeholder padding="400" />
|
|
64
|
+
<Placeholder padding="400" />
|
|
65
|
+
<Placeholder padding="400" />
|
|
66
|
+
<Placeholder padding="400" />
|
|
67
|
+
</Grid>
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
`Grid` is used to create grid layouts, organizing content in columns and rows.
|
|
71
|
+
Like `Flex` and `Box`, the `Grid` component provides access to a range of
|
|
72
|
+
styling props, and to all the properties needed to build with CSS grid.
|
|
73
|
+
|
|
74
|
+
You can easily build responsive layouts using Design System defaults.
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
<Grid defaultResponsiveColumns>
|
|
78
|
+
<Box gridItemColumns="4">{...}</Box>
|
|
79
|
+
<Box gridItemColumns="4">{...}</Box>
|
|
80
|
+
<Box gridItemColumns={{ mobile: '4', tablet: '8', desktop: '4' }}>{...}</Box>
|
|
81
|
+
</Grid>
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
As well as more complicated grid layouts.
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<Grid
|
|
88
|
+
gap="100"
|
|
89
|
+
templateColumns="100px 100px 100px 100px"
|
|
90
|
+
templateRows="auto"
|
|
91
|
+
templateAreas='"header header header header" "main main . sidebar" "footer footer footer footer"'
|
|
92
|
+
>
|
|
93
|
+
<Box gridArea="header">Header</Box>
|
|
94
|
+
<Box gridArea="main">Main</Box>
|
|
95
|
+
<Box gridArea="sidebar">Sidebar</Box>
|
|
96
|
+
<Box gridArea="footer">Footer</Box>
|
|
97
|
+
</Grid>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Container
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
<Container {...args}>
|
|
104
|
+
<Placeholder
|
|
105
|
+
width="100%"
|
|
106
|
+
height="84px"
|
|
107
|
+
backgroundColor="secondary"
|
|
108
|
+
borderColor="subtle"
|
|
109
|
+
borderWidth="1"
|
|
110
|
+
/>
|
|
111
|
+
<Placeholder
|
|
112
|
+
width="100%"
|
|
113
|
+
height="100px"
|
|
114
|
+
backgroundColor="secondary"
|
|
115
|
+
borderColor="subtle"
|
|
116
|
+
borderWidth="1"
|
|
117
|
+
/>
|
|
118
|
+
<Placeholder
|
|
119
|
+
width="100%"
|
|
120
|
+
height={{ mobile: '544px', desktop: '383px' }}
|
|
121
|
+
backgroundColor="secondary"
|
|
122
|
+
borderColor="subtle"
|
|
123
|
+
borderWidth="1"
|
|
124
|
+
/>
|
|
125
|
+
</Container>
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
`Container` provides a page content container, constraining the width, while
|
|
129
|
+
providing responsive padding, gutters and vertical spacing.
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<Container spacing='xl'>
|
|
133
|
+
{...}
|
|
134
|
+
</Container>
|
|
135
|
+
```
|