@primer/react-brand 0.3.0 → 0.4.0-rc.420e2e9
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/CHANGELOG.md +198 -0
- package/README.md +25 -9
- package/lib/Accordion/Accordion.d.ts +9 -9
- package/lib/Accordion/Accordion.visual.spec.d.ts +1 -0
- package/lib/Button/Button.d.ts +6 -2
- package/lib/Button/Button.visual.spec.d.ts +1 -0
- package/lib/ExpandableArrow/ExpandableArrow.visual.spec.d.ts +1 -0
- package/lib/FAQ/FAQ.d.ts +14 -15
- package/lib/FAQ/FAQ.visual.spec.d.ts +1 -0
- package/lib/Heading/Heading.d.ts +4 -3
- package/lib/Heading/Heading.visual.spec.d.ts +1 -0
- package/lib/Hero/Hero.d.ts +3 -3
- package/lib/Hero/Hero.visual.spec.d.ts +1 -0
- package/lib/InlineLink/InlineLink.d.ts +4 -7
- package/lib/InlineLink/InlineLink.visual.spec.d.ts +1 -0
- package/lib/Link/Link.visual.spec.d.ts +1 -0
- package/lib/MonaSans/MonaSans.visual.spec.d.ts +1 -0
- package/lib/River/River.d.ts +52 -16
- package/lib/River/River.visual.spec.d.ts +1 -0
- package/lib/Text/Text.visual.spec.d.ts +1 -0
- package/lib/ThemeProvider/ThemeProvider.visual.spec.d.ts +1 -0
- package/lib/component-helpers.d.ts +21 -3
- package/lib/css/main.css +788 -19
- package/lib/css/stylesheets.d.ts +1 -0
- package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
- package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
- package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +25 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +9 -1
- package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/base.css +18 -0
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +55 -0
- package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
- package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
- package/lib/design-tokens/css/tokens/functional/size/size.css +3 -5
- package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
- package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
- package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/colors/global.js +149 -1
- package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +195 -0
- package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/size/size.js +3 -35
- package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/js/tokens/functional/colors/global.js +9 -1
- package/lib/design-tokens/js/tokens/functional/components/control/base.js +16 -0
- package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/js/tokens/functional/size/size.js +3 -5
- package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +13 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +13 -1
- package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +31 -0
- package/lib/design-tokens/ts/tokens/functional/components/control/base.js +30 -0
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -3
- package/lib/design-tokens/ts/tokens/functional/size/size.js +3 -5
- package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
- package/lib/forms/Checkbox/Checkbox.d.ts +57 -0
- package/lib/forms/Checkbox/forms.visual.spec.d.ts +1 -0
- package/lib/forms/Checkbox/index.d.ts +1 -0
- package/lib/forms/FormControl/FormControl.d.ts +57 -0
- package/lib/forms/FormControl/forms.visual.spec.d.ts +1 -0
- package/lib/forms/FormControl/index.d.ts +1 -0
- package/lib/forms/Select/Select.d.ts +58 -0
- package/lib/forms/Select/index.d.ts +1 -0
- package/lib/forms/TextInput/TextInput.d.ts +87 -0
- package/lib/forms/TextInput/index.d.ts +1 -0
- package/lib/forms/form-types.d.ts +2 -0
- package/lib/forms/index.d.ts +10 -0
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -1
- package/package.json +26 -9
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
# @primer/react-brand
|
|
2
|
+
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#69](https://github.com/primer/brand/pull/69) [`7838af5`](https://github.com/primer/brand/commit/7838af57ae2fdb94d07c188a142feebc0a4a605d) Thanks [@rezrah](https://github.com/rezrah)! - Added `FormControl`, `Checkbox`, `TextInput` and `Select` components.
|
|
8
|
+
|
|
9
|
+
**Read the Technical Previews for usage examples:**
|
|
10
|
+
|
|
11
|
+
[🔗 FormControl](https://primer.style/brand/components/FormControl)
|
|
12
|
+
|
|
13
|
+
[🔗 Checkbox](https://primer.style/brand/components/Checkbox)
|
|
14
|
+
|
|
15
|
+
[🔗 TextInput](https://primer.style/brand/components/TextInput)
|
|
16
|
+
|
|
17
|
+
[🔗 Select](https://primer.style/brand/components/Select)
|
|
18
|
+
|
|
19
|
+
## 0.3.1
|
|
20
|
+
|
|
21
|
+
### Patch Changes
|
|
22
|
+
|
|
23
|
+
- [#59](https://github.com/primer/brand/pull/59) [`fdc731b`](https://github.com/primer/brand/commit/fdc731bda050aaef7041aafe6aaa7857c49ea03b) Thanks [@rezrah](https://github.com/rezrah)! - Added `fillMedia` prop to River.Visual
|
|
24
|
+
|
|
25
|
+
Previously, all image and video children were automatically styled to fit the parent elements dimensions.
|
|
26
|
+
|
|
27
|
+
This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an `fillMedia` prop.
|
|
28
|
+
|
|
29
|
+
## 0.3.0
|
|
30
|
+
|
|
31
|
+
### Minor Changes
|
|
32
|
+
|
|
33
|
+
- [`c8609a8`](https://github.com/primer/brand/commit/c8609a8d35ea80192d85e97794390207f4624e63) Thanks [@rezrah](https://github.com/rezrah)! - added an FAQ component, which displays a list of questions and answers relating to a particular subject.
|
|
34
|
+
|
|
35
|
+
[See usage examples](https://primer.style/brand/components/FAQ)
|
|
36
|
+
|
|
37
|
+
* [#45](https://github.com/primer/brand/pull/45) [`2fb6924`](https://github.com/primer/brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
|
|
38
|
+
|
|
39
|
+
> This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
|
|
40
|
+
> Please read the following instructions carefully before updating:
|
|
41
|
+
|
|
42
|
+
### Updated references for "left" and "right" to "start" and "end"
|
|
43
|
+
|
|
44
|
+
For improved i18n support and closer alignment with our Figma naming conventions, we have updated the references for "left" and "right" to "start" and "end" respectively in `Hero` and `River` components.
|
|
45
|
+
|
|
46
|
+
```diff
|
|
47
|
+
- <River align="left">
|
|
48
|
+
- <River align="right">
|
|
49
|
+
+ <River align="start">
|
|
50
|
+
+ <River align="end">
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## 0.2.1
|
|
54
|
+
|
|
55
|
+
### Patch Changes
|
|
56
|
+
|
|
57
|
+
- [#38](https://github.com/primer/brand/pull/38) [`b0c9293`](https://github.com/primer/brand/commit/b0c929389d62f184e5ae447c0b00e351cb2d1c6e) Thanks [@rezrah](https://github.com/rezrah)! - updated `css-loader` to generate valid (escaped) class names
|
|
58
|
+
|
|
59
|
+
## 0.2.0
|
|
60
|
+
|
|
61
|
+
### Minor Changes
|
|
62
|
+
|
|
63
|
+
- [#33](https://github.com/primer/brand/pull/33) [`662fcfc`](https://github.com/primer/brand/commit/662fcfc6d123460730317b7ddd3d3a4622d30dce) Thanks [@rezrah](https://github.com/rezrah)! - - Adds `River` component
|
|
64
|
+
|
|
65
|
+
- Renames `LinkButton` to `Button` :warning: (see below)
|
|
66
|
+
- Button supports polymorphism and can be used `as` either `a` or `button`
|
|
67
|
+
|
|
68
|
+
### `River`
|
|
69
|
+
|
|
70
|
+
**NEW** Component :sparkles:
|
|
71
|
+
|
|
72
|
+
<table>
|
|
73
|
+
<tr>
|
|
74
|
+
<th> Before</th> <th> After</th>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr>
|
|
77
|
+
<td valign="top">❌</td>
|
|
78
|
+
<td valign="top">
|
|
79
|
+
|
|
80
|
+
```jsx
|
|
81
|
+
// import {River} from "@primer/react-brand";
|
|
82
|
+
|
|
83
|
+
<River>
|
|
84
|
+
<River.Visual>
|
|
85
|
+
<img
|
|
86
|
+
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
|
|
87
|
+
alt="placeholder, blank area with an off-white background color"
|
|
88
|
+
/>
|
|
89
|
+
</River.Visual>
|
|
90
|
+
<River.Content>
|
|
91
|
+
<Heading>Heading</Heading>
|
|
92
|
+
<Text>
|
|
93
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
|
|
94
|
+
felis nam pulvinar risus elementum.
|
|
95
|
+
</Text>
|
|
96
|
+
<Link href="#">Call to action</Link>
|
|
97
|
+
</River.Content>
|
|
98
|
+
</River>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
</td>
|
|
102
|
+
</tr>
|
|
103
|
+
</table>
|
|
104
|
+
|
|
105
|
+
See more examples in our documentation.
|
|
106
|
+
https://primer.style/brand/components/River
|
|
107
|
+
|
|
108
|
+
### `LinkButton`
|
|
109
|
+
|
|
110
|
+
> **Warning**
|
|
111
|
+
> The changes below should be considered a breaking change for anyone relying on `LinkButton`, but as we are shipping a pre-v1 library, this has been marked as a `minor` release rather than `major`. Please remember to update your usage per the below example.
|
|
112
|
+
|
|
113
|
+
<table>
|
|
114
|
+
<tr>
|
|
115
|
+
<th> Before</th> <th> After</th>
|
|
116
|
+
</tr>
|
|
117
|
+
<tr>
|
|
118
|
+
<td valign="top">
|
|
119
|
+
|
|
120
|
+
```jsx
|
|
121
|
+
//import { LinkButton } from '@primer/react-brand';
|
|
122
|
+
|
|
123
|
+
<LinkButton href="#">Sign up</LinkButton>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
</td>
|
|
127
|
+
<td valign="top">
|
|
128
|
+
|
|
129
|
+
```jsx
|
|
130
|
+
//import { Button } from '@primer/react-brand';
|
|
131
|
+
|
|
132
|
+
<Button as="a" href="#">
|
|
133
|
+
Sign up
|
|
134
|
+
</Button>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
</td>
|
|
138
|
+
</tr>
|
|
139
|
+
<tr>
|
|
140
|
+
<td valign="top">
|
|
141
|
+
|
|
142
|
+
❌
|
|
143
|
+
|
|
144
|
+
</td>
|
|
145
|
+
<td valign="top">
|
|
146
|
+
|
|
147
|
+
```jsx
|
|
148
|
+
//import { Button } from '@primer/react-brand';
|
|
149
|
+
|
|
150
|
+
<Button onClick={handler}>Sign Up</Button>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
</td>
|
|
154
|
+
</tr>
|
|
155
|
+
|
|
156
|
+
</table>
|
|
157
|
+
|
|
158
|
+
## 0.1.0
|
|
159
|
+
|
|
160
|
+
### Minor Changes
|
|
161
|
+
|
|
162
|
+
- [#19](https://github.com/primer/brand/pull/19) [`3b22e9e`](https://github.com/primer/brand/commit/3b22e9e0823401104d6e33b3c4f8664b755ea6ba) Thanks [@colebemis](https://github.com/colebemis)! - Add `size` prop to `Hero` component
|
|
163
|
+
|
|
164
|
+
### Patch Changes
|
|
165
|
+
|
|
166
|
+
- [#23](https://github.com/primer/brand/pull/23) [`77abf53`](https://github.com/primer/brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
|
|
167
|
+
|
|
168
|
+
* [#29](https://github.com/primer/brand/pull/29) [`144c7d7`](https://github.com/primer/brand/commit/144c7d762a91cb691699e4f8923ab08385c77966) Thanks [@rezrah](https://github.com/rezrah)! - Removed `gh-variables.css` from package as Brand variables are now surfaced in main.css
|
|
169
|
+
|
|
170
|
+
**To upgrade:**
|
|
171
|
+
|
|
172
|
+
- _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
|
|
173
|
+
|
|
174
|
+
- _Add_ `import "@primer/react-brand/lib/css/main.css"`
|
|
175
|
+
|
|
176
|
+
- [#23](https://github.com/primer/brand/pull/23) [`77abf53`](https://github.com/primer/brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
|
|
177
|
+
|
|
178
|
+
* [#25](https://github.com/primer/brand/pull/25) [`4b00b72`](https://github.com/primer/brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
|
|
179
|
+
|
|
180
|
+
- [#21](https://github.com/primer/brand/pull/21) [`ab06cce`](https://github.com/primer/brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
|
|
181
|
+
|
|
182
|
+
* [#27](https://github.com/primer/brand/pull/27) [`ca2d300`](https://github.com/primer/brand/commit/ca2d3002ba6f7ca9c719f80077c4d95246f33410) Thanks [@rezrah](https://github.com/rezrah)! - Updated Hero text appearance
|
|
183
|
+
|
|
184
|
+
- **updated** Hero description text size from `500` to `400`
|
|
185
|
+
- **updated** button alignment to not stretch on mobile viewports
|
|
186
|
+
- **removed** `size` prop. Now only one responsive size available.
|
|
187
|
+
|
|
188
|
+
## 0.0.3
|
|
189
|
+
|
|
190
|
+
### Patch Changes
|
|
191
|
+
|
|
192
|
+
- [#18](https://github.com/primer/brand/pull/18) [`0835830`](https://github.com/primer/brand/commit/0835830fc15c582e280ac692ff3d578d6bcf282e) Thanks [@rezrah](https://github.com/rezrah)! - Fixes for production bundles
|
|
193
|
+
|
|
194
|
+
## 0.0.2
|
|
195
|
+
|
|
196
|
+
### Patch Changes
|
|
197
|
+
|
|
198
|
+
- [#2](https://github.com/primer/brand/pull/2) [`ab01a8a`](https://github.com/primer/brand/commit/ab01a8ad1dc504f7a2865213b6f41c0b0adba131) Thanks [@colebemis](https://github.com/colebemis)! - Initialize releases with [changesets](https://github.com/changesets/changesets)
|
package/README.md
CHANGED
|
@@ -2,30 +2,38 @@
|
|
|
2
2
|
<img width="300px" src="https://user-images.githubusercontent.com/4608155/127241386-f11da52d-00d9-4366-b01c-6f4c1ebcf7f2.png">
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
-
<h1 align="center">Primer
|
|
5
|
+
<h1 align="center">Primer Brand</h1>
|
|
6
6
|
|
|
7
|
-
<p align="center">
|
|
7
|
+
<p align="center"><strong>Primer Brand is a GitHub’s design system for creating one-off marketing websites and digital experiences.</strong>
|
|
8
|
+
</p>
|
|
9
|
+
|
|
10
|
+
<p align="center">The design system comprises a Figma library and corresponding React components.
|
|
11
|
+
</p>
|
|
8
12
|
|
|
9
13
|
<p align="center">
|
|
10
14
|
<a aria-label="npm package" href="https://www.npmjs.com/package/@primer/react-brand">
|
|
11
15
|
<img alt="" src="https://img.shields.io/npm/v/@primer/react-brand.svg">
|
|
12
16
|
</a>
|
|
13
|
-
<a aria-label="build status" href="https://github.com/primer/
|
|
14
|
-
<img alt="" src="https://github.com/primer/
|
|
17
|
+
<a aria-label="build status" href="https://github.com/primer/brand/actions/workflows/ci.yml">
|
|
18
|
+
<img alt="" src="https://github.com/primer/brand/actions/workflows/ci.yml/badge.svg">
|
|
15
19
|
</a>
|
|
16
20
|
<img src="https://img.shields.io/badge/status-experimental-red" alt="status: experimental">
|
|
17
|
-
<a aria-label="license" href="https://github.com/primer/
|
|
18
|
-
<img src="https://img.shields.io/github/license/primer/
|
|
21
|
+
<a aria-label="license" href="https://github.com/primer/brand/blob/main/LICENSE">
|
|
22
|
+
<img src="https://img.shields.io/github/license/primer/brand" alt="">
|
|
19
23
|
</a>
|
|
20
24
|
</p>
|
|
21
25
|
|
|
22
26
|
<p align="center">
|
|
23
|
-
<a href="https://primer.github.io/
|
|
27
|
+
<a href="https://primer.github.io/brand/" target="_blank">https://primer.style/brand</a>
|
|
24
28
|
</p>
|
|
25
29
|
|
|
30
|
+
## Documentation
|
|
31
|
+
|
|
32
|
+
Our documentation site lives at [primer.style/brand](https://primer.style/brand). You'll be able to find detailed documentation on getting started, all of the components and more.
|
|
33
|
+
|
|
26
34
|
## Install
|
|
27
35
|
|
|
28
|
-
|
|
36
|
+
Primer Brand libraries are published to the [npm](https://www.npmjs.com/package/@primer/react-brand) registry. After [installing npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), you can install `@primer/react-brand` as a dependency of your project:
|
|
29
37
|
|
|
30
38
|
```sh
|
|
31
39
|
npm install @primer/react-brand
|
|
@@ -33,7 +41,15 @@ npm install @primer/react-brand
|
|
|
33
41
|
|
|
34
42
|
## Usage
|
|
35
43
|
|
|
36
|
-
See our [getting started guide](https://primer.github.io/
|
|
44
|
+
See our [getting started guide](https://primer.github.io/brand/getting-started) for more information.
|
|
45
|
+
|
|
46
|
+
## Contributing
|
|
47
|
+
|
|
48
|
+
See [CONTRIBUTING.md](./CONTRIBUTING.md) for development and contribution guidelines.
|
|
49
|
+
|
|
50
|
+
## Releasing (for GitHub staff)
|
|
51
|
+
|
|
52
|
+
You can find docs about our release process in [RELEASING.md](RELEASING.md).
|
|
37
53
|
|
|
38
54
|
## License
|
|
39
55
|
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { BaseProps } from '../component-helpers';
|
|
2
3
|
/**
|
|
3
4
|
* Design tokens
|
|
4
5
|
*/
|
|
5
6
|
import '../../lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css';
|
|
6
|
-
export declare type AccordionRootProps = {
|
|
7
|
+
export declare type AccordionRootProps = BaseProps<HTMLDetailsElement> & {
|
|
7
8
|
open?: boolean;
|
|
8
|
-
className?: string;
|
|
9
9
|
children: React.ReactElement<AccordionHeadingProps | AccordionContentProps>[];
|
|
10
10
|
} & React.HTMLAttributes<HTMLDetailsElement>;
|
|
11
|
-
export declare
|
|
12
|
-
declare type AccordionHeadingProps = {
|
|
11
|
+
export declare const AccordionRoot: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>>;
|
|
12
|
+
declare type AccordionHeadingProps = BaseProps<HTMLHeadingElement> & {
|
|
13
13
|
className?: string;
|
|
14
14
|
children: string;
|
|
15
15
|
};
|
|
16
|
-
export declare
|
|
17
|
-
declare type AccordionContentProps = {
|
|
16
|
+
export declare const AccordionHeading: React.ForwardRefExoticComponent<Pick<AccordionHeadingProps, "children" | "className" | "id"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
17
|
+
declare type AccordionContentProps = BaseProps<HTMLElement> & {
|
|
18
18
|
className?: string;
|
|
19
19
|
children: React.ReactElement | React.ReactElement[];
|
|
20
20
|
};
|
|
21
|
-
export declare function AccordionContent({ children, className }: AccordionContentProps): JSX.Element;
|
|
21
|
+
export declare function AccordionContent({ children, className, ...rest }: AccordionContentProps): JSX.Element;
|
|
22
22
|
/**
|
|
23
23
|
* Branded Accordion component
|
|
24
24
|
*/
|
|
25
|
-
export declare const Accordion: typeof
|
|
25
|
+
export declare const Accordion: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>> & {
|
|
26
26
|
Content: typeof AccordionContent;
|
|
27
|
-
Heading:
|
|
27
|
+
Heading: React.ForwardRefExoticComponent<Pick<AccordionHeadingProps, "children" | "className" | "id"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
28
28
|
};
|
|
29
29
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/lib/Button/Button.d.ts
CHANGED
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import '../../lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css';
|
|
3
|
-
|
|
3
|
+
import type { BaseProps } from '../component-helpers';
|
|
4
|
+
export declare type ButtonProps<C extends React.ElementType> = BaseProps<C> & {
|
|
4
5
|
as?: C;
|
|
5
6
|
variant?: 'primary' | 'secondary';
|
|
6
7
|
} & React.ComponentPropsWithoutRef<C>;
|
|
7
|
-
export declare
|
|
8
|
+
export declare const Button: React.ForwardRefExoticComponent<Pick<BaseProps<React.ElementType<any>> & {
|
|
9
|
+
as?: React.ElementType<any> | undefined;
|
|
10
|
+
variant?: "primary" | "secondary" | undefined;
|
|
11
|
+
} & Pick<any, string | number | symbol>, string | number | symbol> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/lib/FAQ/FAQ.d.ts
CHANGED
|
@@ -1,37 +1,36 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { AccordionContent, AccordionRootProps } from '..';
|
|
3
|
+
import type { BaseProps } from '../component-helpers';
|
|
3
4
|
/**
|
|
4
5
|
* Design tokens
|
|
5
6
|
*/
|
|
6
7
|
import '../../lib/design-tokens/css/tokens/functional/components/faq/base.css';
|
|
7
8
|
import '../../lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css';
|
|
8
|
-
declare type FAQRootProps = {
|
|
9
|
-
className?: string;
|
|
9
|
+
declare type FAQRootProps = BaseProps<HTMLElement> & {
|
|
10
10
|
children: React.ReactElement<FAQHeadingProps | FAQSubheadingProps | AccordionRootProps>[];
|
|
11
11
|
};
|
|
12
|
-
declare
|
|
13
|
-
declare type FAQHeadingProps = {
|
|
14
|
-
className?: string;
|
|
12
|
+
declare type FAQHeadingProps = BaseProps<HTMLHeadingElement> & {
|
|
15
13
|
size?: 'medium' | 'large';
|
|
16
14
|
align?: 'start' | 'center';
|
|
17
15
|
children: string;
|
|
18
16
|
};
|
|
19
|
-
declare
|
|
20
|
-
declare type FAQSubheadingProps = {
|
|
17
|
+
declare type FAQSubheadingProps = BaseProps<HTMLHeadingElement> & {
|
|
21
18
|
align?: 'start' | 'center';
|
|
22
|
-
className?: string;
|
|
23
19
|
children: string;
|
|
24
20
|
};
|
|
25
|
-
declare function FAQSubheading({ children, className }: FAQSubheadingProps): JSX.Element;
|
|
21
|
+
declare function FAQSubheading({ children, className, ...rest }: FAQSubheadingProps): JSX.Element;
|
|
26
22
|
/**
|
|
27
23
|
* FAQ component:
|
|
28
|
-
* {@link https://primer.style/
|
|
24
|
+
* {@link https://primer.style/brand/components/FAQ/ See usage examples}.
|
|
29
25
|
*/
|
|
30
|
-
export declare const FAQ:
|
|
26
|
+
export declare const FAQ: React.ForwardRefExoticComponent<Pick<FAQRootProps, "children" | "className" | "id"> & React.RefAttributes<HTMLElement>> & {
|
|
31
27
|
Subheading: typeof FAQSubheading;
|
|
32
|
-
Heading:
|
|
33
|
-
Item: typeof
|
|
34
|
-
Question:
|
|
28
|
+
Heading: React.ForwardRefExoticComponent<Pick<FAQHeadingProps, "children" | "className" | "align" | "id" | "size"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
29
|
+
Item: React.ForwardRefExoticComponent<Pick<AccordionRootProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "open"> & React.RefAttributes<HTMLDetailsElement>>;
|
|
30
|
+
Question: React.ForwardRefExoticComponent<Pick<BaseProps<HTMLHeadingElement> & {
|
|
31
|
+
className?: string | undefined;
|
|
32
|
+
children: string;
|
|
33
|
+
}, "children" | "className" | "id"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
35
34
|
Answer: typeof AccordionContent;
|
|
36
35
|
};
|
|
37
36
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/lib/Heading/Heading.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { BaseProps } from '../component-helpers';
|
|
2
3
|
export declare const HeadingSizes: readonly ["1", "2", "3", "4", "5", "6"];
|
|
3
4
|
export declare const HeadingTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
|
|
4
5
|
export declare const defaultHeadingTag: "h2";
|
|
@@ -10,11 +11,11 @@ export declare const classMap: {
|
|
|
10
11
|
h5: "5";
|
|
11
12
|
h6: "6";
|
|
12
13
|
};
|
|
13
|
-
declare type HeadingTags = {
|
|
14
|
+
declare type HeadingTags = BaseProps<HTMLHeadingElement> & {
|
|
14
15
|
as?: typeof HeadingTags[number];
|
|
15
16
|
} & React.HTMLAttributes<HTMLHeadingElement>;
|
|
16
17
|
export declare type HeadingProps = {
|
|
17
18
|
className?: string;
|
|
18
19
|
} & HeadingTags;
|
|
19
|
-
export declare
|
|
20
|
+
export declare const Heading: React.ForwardRefExoticComponent<Pick<HeadingProps, "children" | "className" | "id" | "slot" | "style" | "title" | "as" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
20
21
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/lib/Hero/Hero.d.ts
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import type { BaseProps } from '../component-helpers';
|
|
2
3
|
import '../../lib/design-tokens/css/tokens/functional/components/hero/base.css';
|
|
3
4
|
declare type Action = {
|
|
4
5
|
text: string;
|
|
5
6
|
href: string;
|
|
6
7
|
};
|
|
7
|
-
export declare type HeroProps = {
|
|
8
|
-
className?: string;
|
|
8
|
+
export declare type HeroProps = BaseProps<HTMLDivElement> & {
|
|
9
9
|
heading: string | React.ReactElement;
|
|
10
10
|
description?: string | React.ReactElement;
|
|
11
11
|
primaryAction: Action;
|
|
12
12
|
secondaryAction?: Action;
|
|
13
13
|
align?: 'start' | 'center';
|
|
14
14
|
};
|
|
15
|
-
export declare
|
|
15
|
+
export declare const Hero: React.ForwardRefExoticComponent<Pick<HeroProps, "className" | "heading" | "description" | "primaryAction" | "secondaryAction" | "align" | "id"> & React.RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,14 +1,11 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { TextSizes } from '../';
|
|
3
|
+
import type { BaseProps } from '../component-helpers';
|
|
3
4
|
/**
|
|
4
5
|
* Design tokens
|
|
5
6
|
*/
|
|
6
7
|
import '../../lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css';
|
|
7
|
-
export declare type InlineLinkProps = {
|
|
8
|
-
/**
|
|
9
|
-
* Forward a custom HTML class attribute
|
|
10
|
-
*/
|
|
11
|
-
className?: string;
|
|
8
|
+
export declare type InlineLinkProps = BaseProps<HTMLAnchorElement> & {
|
|
12
9
|
/**
|
|
13
10
|
* Specify the links destination
|
|
14
11
|
*/
|
|
@@ -21,4 +18,4 @@ export declare type InlineLinkProps = {
|
|
|
21
18
|
/**
|
|
22
19
|
* A HTML anchor link component that renders inline with adjacent text.
|
|
23
20
|
*/
|
|
24
|
-
export declare
|
|
21
|
+
export declare const InlineLink: React.ForwardRefExoticComponent<Pick<InlineLinkProps, "children" | "className" | "id" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "size" | "href" | "type" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|