@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,149 @@
|
|
|
1
|
+
# DescriptionList
|
|
2
|
+
|
|
3
|
+
Use the `DescriptionList` component when you need to present pairs of related information together.
|
|
4
|
+
|
|
5
|
+
```tsx
|
|
6
|
+
<Box width="550px">
|
|
7
|
+
<DescriptionList {...args} trailingContent={<Link href="#">Link</Link>}>
|
|
8
|
+
<DescriptionListItem
|
|
9
|
+
heading="Heading"
|
|
10
|
+
description="Description"
|
|
11
|
+
link={<Link href="#">Link</Link>}
|
|
12
|
+
/>
|
|
13
|
+
<DescriptionListItem
|
|
14
|
+
heading="Heading"
|
|
15
|
+
description="Description"
|
|
16
|
+
link={<Link href="#">Link</Link>}
|
|
17
|
+
/>
|
|
18
|
+
<DescriptionListItem
|
|
19
|
+
heading="Heading"
|
|
20
|
+
description="Description"
|
|
21
|
+
link={<Link href="#">Link</Link>}
|
|
22
|
+
/>
|
|
23
|
+
<DescriptionListItem
|
|
24
|
+
heading="Heading"
|
|
25
|
+
description="Description"
|
|
26
|
+
link={<Link href="#">Link</Link>}
|
|
27
|
+
validationText="Validation text"
|
|
28
|
+
validationStatus="invalid"
|
|
29
|
+
/>
|
|
30
|
+
</DescriptionList>
|
|
31
|
+
</Box>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
- [Usage](#usage)
|
|
35
|
+
- [Heading](#heading)
|
|
36
|
+
- [Trailing content](#trailing-content)
|
|
37
|
+
- [Direction](#direction)
|
|
38
|
+
- [API](#api)
|
|
39
|
+
- [DescriptionListItem API](#descriptionlistitem-api)
|
|
40
|
+
|
|
41
|
+
## Usage
|
|
42
|
+
|
|
43
|
+
Use the `DescriptionList` element to wrap any number of `DescriptionListItem`
|
|
44
|
+
components. This will render a semantic `dl` element, containing `dt` & `dd`
|
|
45
|
+
elements, where the `DescriptionListItem` heading is the `description term
|
|
46
|
+
(dt)`, and the description is the `description details (dd)`.
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<DescriptionList heading="Contact details">
|
|
50
|
+
<DescriptionListItem heading="Phone number" description="07123 456789" />
|
|
51
|
+
<DescriptionListItem heading="Email address" description="emailname@uw.co.uk" />
|
|
52
|
+
<DescriptionListItem heading="Password" description="***************" />
|
|
53
|
+
</DescriptionList>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Heading
|
|
57
|
+
|
|
58
|
+
The `heading` prop specifies the title of the list. This is useful for
|
|
59
|
+
providing context or describing the purpose of the list.
|
|
60
|
+
|
|
61
|
+
The `headingElement` prop allows you to specify the HTML element used for the
|
|
62
|
+
heading. This is important for maintaining semantic structure in your document.
|
|
63
|
+
|
|
64
|
+
- Use `'h1'`, `'h2'`, etc., for headings that are part of your page's hierarchy.
|
|
65
|
+
- Use `'div'` if the heading is purely decorative or doesn't fit into the semantic structure.
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<DescriptionList heading="Contact details" headingElement="h2">
|
|
69
|
+
<DescriptionListItem heading="Phone number" description="07123 456789" />
|
|
70
|
+
<DescriptionListItem heading="Email address" description="emailname@uw.co.uk" />
|
|
71
|
+
</DescriptionList>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Trailing content
|
|
75
|
+
|
|
76
|
+
Use the `trailingContent` prop to include a `Link`, `Button` or `Badge` component.
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<DescriptionList
|
|
80
|
+
heading="My Bills"
|
|
81
|
+
trailingContent={
|
|
82
|
+
<Link href="https://uw.co.uk/bills">
|
|
83
|
+
View all
|
|
84
|
+
<ChevronRightSmallIcon />
|
|
85
|
+
</Link>
|
|
86
|
+
}
|
|
87
|
+
>
|
|
88
|
+
{...}
|
|
89
|
+
</DescriptionList>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Direction
|
|
93
|
+
|
|
94
|
+
The direction of the `DescriptionListItem` components can be controlled via the
|
|
95
|
+
root `DescriptionList`. This prop is responsive, so you can control the layout
|
|
96
|
+
per breakpoint.
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<Box width="100%" maxWidth="800px">
|
|
100
|
+
<DescriptionList
|
|
101
|
+
{...args}
|
|
102
|
+
trailingContent={<Link href="#">Edit</Link>}
|
|
103
|
+
direction={{ mobile: 'column', tablet: 'row' }}
|
|
104
|
+
>
|
|
105
|
+
<DescriptionListItem heading="Phone number" description="07123 456789" />
|
|
106
|
+
<DescriptionListItem heading="Email address" description="emailname@uw.co.uk" />
|
|
107
|
+
<DescriptionListItem heading="Password" description="***************" />
|
|
108
|
+
</DescriptionList>
|
|
109
|
+
</Box>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
## API
|
|
113
|
+
|
|
114
|
+
This component is based on the `dl` element and supports the following common props:
|
|
115
|
+
|
|
116
|
+
- Margin
|
|
117
|
+
- Size (width props only)
|
|
118
|
+
|
|
119
|
+
| Prop | Type | Default | Description |
|
|
120
|
+
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- |
|
|
121
|
+
| `heading` | `string` | — | Actual string to display as section header |
|
|
122
|
+
| `headingElement` | `"div" \| "h1" \| "h2" \| "h3" \| "h4"` | `h2` | |
|
|
123
|
+
| `helperText` | `string` | — | Optional helper text to provide additional context or instructions. |
|
|
124
|
+
| `trailingContent` | `ReactNode` | — | Optional trailing content element |
|
|
125
|
+
| `validationStatus` | `"invalid"` | — | Indicates the validation state |
|
|
126
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
127
|
+
| `direction` | `Responsive<"row" \| "column">` | — | Responsive direction of the section header content. By default, the content is laid out in a row. |
|
|
128
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
129
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
130
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
131
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
132
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
133
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
134
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
135
|
+
| `width` | `Responsive<string>` | — | |
|
|
136
|
+
| `maxWidth` | `Responsive<string>` | — | |
|
|
137
|
+
| `minWidth` | `Responsive<string>` | — | |
|
|
138
|
+
|
|
139
|
+
## DescriptionListItem API
|
|
140
|
+
|
|
141
|
+
This component is base on the `div` element.
|
|
142
|
+
|
|
143
|
+
| Prop | Type | Default | Description |
|
|
144
|
+
| ------------------ | ----------- | ------- | --------------------------------------------------- |
|
|
145
|
+
| `heading` | `string` | — | Description term |
|
|
146
|
+
| `description` | `string` | — | Description details |
|
|
147
|
+
| `link` | `ReactNode` | — | Optional link element |
|
|
148
|
+
| `validationStatus` | `"invalid"` | — | Indicates the validation state |
|
|
149
|
+
| `validationText` | `string` | — | Text to display when the `validationStatus` is set. |
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# DetailText
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<Flex direction="column" gap="100">
|
|
5
|
+
{sizes.map(size => (
|
|
6
|
+
<DetailText key={size} size={size}>
|
|
7
|
+
Hamburgefons ({size})
|
|
8
|
+
</DetailText>
|
|
9
|
+
))}
|
|
10
|
+
</Flex>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<DetailText size="md" color="text">
|
|
15
|
+
The five boxing wizards jump quickly.
|
|
16
|
+
</DetailText>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Alternatives
|
|
20
|
+
|
|
21
|
+
- BodyText - For body text
|
|
22
|
+
- Strong - For strong importance
|
|
23
|
+
- Em - For emphasis
|
|
24
|
+
- Heading - For heading-level text
|
|
25
|
+
|
|
26
|
+
## Size
|
|
27
|
+
|
|
28
|
+
The size prop is responsive, so you can render different sizes at different breakpoints.
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
<DetailText size={{ mobile: 'sm', tablet: 'md', desktop: 'lg'}}>{...}</DetailText>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<Flex direction="column" gap="100">
|
|
36
|
+
{sizes.map(size => (
|
|
37
|
+
<DetailText key={size} size={size}>
|
|
38
|
+
{size}
|
|
39
|
+
</DetailText>
|
|
40
|
+
))}
|
|
41
|
+
<DetailText size={{ mobile: 'sm', tablet: 'xl', desktop: '4xl' }}>Responsive size</DetailText>
|
|
42
|
+
</Flex>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Color
|
|
46
|
+
|
|
47
|
+
The text color of `DetailText` can be set to either `text`, `valid` or
|
|
48
|
+
`invalid`. These colours will be overridden by the `inverted` prop.
|
|
49
|
+
|
|
50
|
+
## Inverted
|
|
51
|
+
|
|
52
|
+
When using `BodyText` on a darker background, specifically `uwPurple` &
|
|
53
|
+
`darkPurple`, use the `inverted` prop to ensure colour contrast.
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
<Flex direction="column">
|
|
57
|
+
<Box backgroundColor="brand" padding="400">
|
|
58
|
+
<DetailText {...args}>Inverted text</DetailText>
|
|
59
|
+
</Box>
|
|
60
|
+
</Flex>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## API
|
|
64
|
+
|
|
65
|
+
This component is based on the `span` element and supports the following common props:
|
|
66
|
+
|
|
67
|
+
- Margin
|
|
68
|
+
- Text transform
|
|
69
|
+
- Text align
|
|
70
|
+
- Text wrap
|
|
71
|
+
|
|
72
|
+
| Prop | Type | Default | Description |
|
|
73
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
|
|
74
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
75
|
+
| `size` | `Responsive<"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl">` | `md` | Set the text size styles. |
|
|
76
|
+
| `color` | `(Responsive<"text" \| "valid" \| "invalid"> & string)` | `text` | Set the text color |
|
|
77
|
+
| `inverted` | `boolean` | — | Inverts the component colours, for use on darker surface colours. |
|
|
78
|
+
| `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
|
|
79
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
80
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
|
|
81
|
+
| `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
|
|
82
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
83
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
84
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
85
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
86
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
87
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
88
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
89
|
+
| `as` | `"span" \| "div" \| "p"` | — | |
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# Divider
|
|
2
|
+
|
|
3
|
+
Used to provide a visual break and semantically divide content. Supports
|
|
4
|
+
vertical and horizontal orientations. Vertical dividers will only be visible
|
|
5
|
+
when contained inside an element with display set to `flex` or `grid`.
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
<Flex direction="column" gap="400" width="100%" maxWidth="800px" padding="200">
|
|
9
|
+
<Flex direction="column" gap="100" paddingX="400">
|
|
10
|
+
<Heading>Mobile number: 07891123456</Heading>
|
|
11
|
+
<Flex gap="300" alignItems="center">
|
|
12
|
+
<BodyText>Unlimited Tariff</BodyText>
|
|
13
|
+
<Divider decorative orientation="vertical" />
|
|
14
|
+
<BodyText>
|
|
15
|
+
Budget control: <Strong>On</Strong>
|
|
16
|
+
</BodyText>
|
|
17
|
+
<Divider decorative orientation="vertical" />
|
|
18
|
+
<BodyText>
|
|
19
|
+
SIM number: <Strong>249320592996</Strong>
|
|
20
|
+
</BodyText>
|
|
21
|
+
</Flex>
|
|
22
|
+
</Flex>
|
|
23
|
+
<Divider />
|
|
24
|
+
<Flex direction="column" gap="100" paddingX="400">
|
|
25
|
+
<Heading>Mobile number: 07875123456</Heading>
|
|
26
|
+
<Flex gap="300" alignItems="center">
|
|
27
|
+
<BodyText>Value Tariff</BodyText>
|
|
28
|
+
<Divider decorative orientation="vertical" />
|
|
29
|
+
<BodyText>
|
|
30
|
+
Budget control: <Strong>On</Strong>
|
|
31
|
+
</BodyText>
|
|
32
|
+
<Divider decorative orientation="vertical" />
|
|
33
|
+
<BodyText>
|
|
34
|
+
SIM number: <Strong>249320592996</Strong>
|
|
35
|
+
</BodyText>
|
|
36
|
+
</Flex>
|
|
37
|
+
</Flex>
|
|
38
|
+
<Divider />
|
|
39
|
+
<Flex direction="column" gap="100" paddingX="400">
|
|
40
|
+
<Heading>Mobile number: 07929123456</Heading>
|
|
41
|
+
<Flex gap="300" alignItems="center">
|
|
42
|
+
<BodyText>Unlimited Tariff</BodyText>
|
|
43
|
+
<Divider decorative orientation="vertical" />
|
|
44
|
+
<BodyText>
|
|
45
|
+
Budget control: <Strong>Off</Strong>
|
|
46
|
+
</BodyText>
|
|
47
|
+
<Divider decorative orientation="vertical" />
|
|
48
|
+
<BodyText>
|
|
49
|
+
SIM number: <Strong>249320592996</Strong>
|
|
50
|
+
</BodyText>
|
|
51
|
+
</Flex>
|
|
52
|
+
</Flex>
|
|
53
|
+
</Flex>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Accessibility
|
|
57
|
+
|
|
58
|
+
Follows the [Separator role requirements](https://www.w3.org/TR/wai-aria-1.2/#separator).
|
|
59
|
+
|
|
60
|
+
By default the `Divider` component renders an `hr` which has a role of
|
|
61
|
+
`separator` by default. This is a semantically meaningful division between
|
|
62
|
+
elements, and should be used considerately.
|
|
63
|
+
|
|
64
|
+
If you need a purely visual separation you can use the `decorative` prop, which
|
|
65
|
+
will remove the element from the accessibility tree. Alternatively you could
|
|
66
|
+
use CSS styling, such as `border-color`, instead of this component.
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
<Divider decorative />
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## API
|
|
73
|
+
|
|
74
|
+
This component is based on the `hr` element, and supports the following common props:
|
|
75
|
+
|
|
76
|
+
- Margin
|
|
77
|
+
|
|
78
|
+
| Prop | Type | Default | Description |
|
|
79
|
+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
80
|
+
| `orientation` | `"horizontal" \| "vertical"` | `horizontal` | |
|
|
81
|
+
| `decorative` | `boolean` | — | Whether or not the component is purely decorative. When true, accessibility-related attributes are updated so that that the rendered element is removed from the accessibility tree. |
|
|
82
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
83
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
84
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
85
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
86
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
87
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
88
|
+
| `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,43 @@
|
|
|
1
|
+
# Em
|
|
2
|
+
|
|
3
|
+
```tsx
|
|
4
|
+
<Flex direction="column" gap="100">
|
|
5
|
+
{sizes.map(size => (
|
|
6
|
+
<BodyText key={size} size={size}>
|
|
7
|
+
We <Em>had</Em> to do something about it.
|
|
8
|
+
</BodyText>
|
|
9
|
+
))}
|
|
10
|
+
</Flex>
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Alternatives
|
|
14
|
+
|
|
15
|
+
- BodyText - For body text
|
|
16
|
+
- DetailText - For detail text
|
|
17
|
+
- Heading - For heading-level text
|
|
18
|
+
- Strong - For strong importance
|
|
19
|
+
|
|
20
|
+
## API
|
|
21
|
+
|
|
22
|
+
This component is based on the `em` element and supports the following common props:
|
|
23
|
+
|
|
24
|
+
- Margin
|
|
25
|
+
- Text transform
|
|
26
|
+
- Text align
|
|
27
|
+
- Text wrap
|
|
28
|
+
|
|
29
|
+
| Prop | Type | Default | Description |
|
|
30
|
+
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| `asChild` | `boolean` | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
|
|
32
|
+
| `truncate` | `boolean` | — | If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow). |
|
|
33
|
+
| `textAlign` | `Responsive<"center" \| "left" \| "right">` | — | |
|
|
34
|
+
| `textTransform` | `"none" \| "uppercase" \| "lowercase" \| "capitalize"` | — | Set the text-transform on the component. |
|
|
35
|
+
| `wrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | DEPRECATED: use `textWrap` instead of `wrap` @deprecated Use `textWrap` instead of `wrap` |
|
|
36
|
+
| `textWrap` | `Responsive<"wrap" \| "nowrap" \| "balance" \| "pretty">` | — | |
|
|
37
|
+
| `margin` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
38
|
+
| `marginTop` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
39
|
+
| `marginRight` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
40
|
+
| `marginBottom` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
41
|
+
| `marginLeft` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
42
|
+
| `marginX` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|
|
43
|
+
| `marginY` | `Responsive<"auto" \| "0" \| "25" \| "50" \| "75" \| "100" \| "150" \| "175" \| "200" \| "250" \| "300" \| "350" \| "400" \| "500" \| "600" \| "700" \| "800" \| "900" \| "1000" \| `var(--h-${string})`>` | — | |
|