@primer/react-brand 0.5.0 → 0.5.1-rc.b80c351
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 +310 -0
- package/lib/SubdomainNavBar/SubdomainNavBar.d.ts +13 -1
- package/lib/css/main.css +30 -22
- 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 +1 -1
- package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -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 +1 -1
- package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
- 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/components/subdomain-nav-bar/colors-with-modes.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 +1 -1
- 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 +1 -1
- package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
- 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 +1 -1
- 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 +1 -1
- package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
- 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 +1 -1
- 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 +1 -1
- package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
- package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
- 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 -1
- package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
- 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/index.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,310 @@
|
|
|
1
|
+
# @primer/react-brand
|
|
2
|
+
|
|
3
|
+
## 0.5.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#87](https://github.com/primer/brand/pull/87) [`0a82cd4`](https://github.com/primer/brand/commit/0a82cd42e8eb4f001504345172d209a33e18a476) Thanks [@rezrah](https://github.com/rezrah)! - UI bugfixes for `SubdomainNavBar` and `Testimonial` components.
|
|
8
|
+
|
|
9
|
+
## SubdomainNavBar
|
|
10
|
+
|
|
11
|
+
- Fix bug where a missing `SubdomainNavBar.Search` child would cause the `SubdomainNavBar` to render incorrectly, despite being optional.
|
|
12
|
+
- Fix bug where the overflow menu still appears when there are no items in the overflow menu.
|
|
13
|
+
- Fix bug where longer titles caused text wrapping and layout issues. Slightly longer titles are now accepted.
|
|
14
|
+
|
|
15
|
+
## Testimonial
|
|
16
|
+
|
|
17
|
+
- Increase spacing beneath the quote visual to 48px from 45px.
|
|
18
|
+
|
|
19
|
+
* [#89](https://github.com/primer/brand/pull/89) [`396734e`](https://github.com/primer/brand/commit/396734ecc4d4559c5ea7a63d009050b2b487d489) Thanks [@rezrah](https://github.com/rezrah)! - Add `titleHref` and `fullWidth` props for SubdomainNavBar
|
|
20
|
+
|
|
21
|
+
Usage example:
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
<SubdomainNavBar fullWidth={true} titleHref="/something-other-than-home" title="Subdomain">
|
|
25
|
+
{/* ... */}
|
|
26
|
+
</SubdomainNavBar>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## 0.5.0
|
|
30
|
+
|
|
31
|
+
### Minor Changes
|
|
32
|
+
|
|
33
|
+
- [#81](https://github.com/primer/brand/pull/81) [`88e2007`](https://github.com/primer/brand/commit/88e20076f797338b9ab6d7d2d932320094cda5d7) Thanks [@rezrah](https://github.com/rezrah)! - Added `SubdomainNavBar` component.
|
|
34
|
+
|
|
35
|
+
Usage example:
|
|
36
|
+
|
|
37
|
+
```jsx
|
|
38
|
+
<SubdomainNavBar title="Subdomain">
|
|
39
|
+
<SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
|
|
40
|
+
<SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
|
|
41
|
+
<SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
|
|
42
|
+
<SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
|
|
43
|
+
<SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
|
|
44
|
+
<SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
|
|
45
|
+
<SubdomainNavBar.Search ref={inputRef} onSubmit={handleSubmit} />
|
|
46
|
+
<SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
|
|
47
|
+
<SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
|
|
48
|
+
</SubdomainNavBar>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
See the [documentation](https://primer.style/brand/components/SubdomainNavBar) and [Storybook](https://primer.style/brand/storybook/?path=/story/components-subdomainnavbar--playground) for more usage examples.
|
|
52
|
+
|
|
53
|
+
* [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Testimonial` component.
|
|
54
|
+
|
|
55
|
+
Usage example:
|
|
56
|
+
|
|
57
|
+
```jsx
|
|
58
|
+
<Testimonial>
|
|
59
|
+
<Testimonial.Quote>
|
|
60
|
+
GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
|
|
61
|
+
of code we're writing.
|
|
62
|
+
</Testimonial.Quote>
|
|
63
|
+
<Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
|
|
64
|
+
<Testimonial.Avatar
|
|
65
|
+
src="https://avatars.githubusercontent.com/u/92997159?v=4"
|
|
66
|
+
alt="Circular avatar from David Ross's GitHub profile"
|
|
67
|
+
/>
|
|
68
|
+
</Testimonial>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
See the [documentation](https://primer.style/brand/components/Testimonial) or [Storybook](https://primer.style/brand/storybook/?path=/story/components-testimonial--playground) for more usage examples.
|
|
72
|
+
|
|
73
|
+
- [#82](https://github.com/primer/brand/pull/82) [`afbab6c`](https://github.com/primer/brand/commit/afbab6c24b5a8fe08d6eea28dfebc4bde143bfd5) Thanks [@rezrah](https://github.com/rezrah)! - Added `Stack` component.
|
|
74
|
+
|
|
75
|
+
Usage example:
|
|
76
|
+
|
|
77
|
+
```jsx
|
|
78
|
+
<Stack direction="horizontal" gap="spacious" padding="spacious">
|
|
79
|
+
<div>
|
|
80
|
+
<img
|
|
81
|
+
src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
|
|
82
|
+
alt="placeholder with gray background and no foreground text"
|
|
83
|
+
/>
|
|
84
|
+
</div>
|
|
85
|
+
<div>
|
|
86
|
+
<img
|
|
87
|
+
src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
|
|
88
|
+
alt="placeholder with gray background and no foreground text"
|
|
89
|
+
/>
|
|
90
|
+
</div>
|
|
91
|
+
<div>
|
|
92
|
+
<img
|
|
93
|
+
src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
|
|
94
|
+
alt="placeholder with gray background and no foreground text"
|
|
95
|
+
/>
|
|
96
|
+
</div>
|
|
97
|
+
</Stack>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
See [Storybook](https://primer.style/brand/storybook/?path=/story/components-stack--playground) for more usage examples.
|
|
101
|
+
|
|
102
|
+
## 0.4.0
|
|
103
|
+
|
|
104
|
+
### Minor Changes
|
|
105
|
+
|
|
106
|
+
- [#78](https://github.com/primer/brand/pull/78) [`487a9e7`](https://github.com/primer/brand/commit/487a9e7b03b6c196358e1f1146fd87e8c4fe44d4) Thanks [@JoshBowdenConcepts](https://github.com/JoshBowdenConcepts)! - Added a new `size` prop to `Button` and a `medium` sized variant, making the previous `large` size optional.
|
|
107
|
+
|
|
108
|
+
⚠️ This update should be considered a breaking change, despite being issued in a `minor` release.
|
|
109
|
+
|
|
110
|
+
Selectable values: `medium` (default) and `large`.
|
|
111
|
+
|
|
112
|
+
**Upgrade steps:**
|
|
113
|
+
|
|
114
|
+
```diff
|
|
115
|
+
- <Button>before</Button>
|
|
116
|
+
+ <Button size="large">after</Button>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
* [#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.
|
|
120
|
+
|
|
121
|
+
**Read the Technical Previews for usage examples:**
|
|
122
|
+
|
|
123
|
+
[🔗 FormControl](https://primer.style/brand/components/FormControl)
|
|
124
|
+
|
|
125
|
+
[🔗 Checkbox](https://primer.style/brand/components/Checkbox)
|
|
126
|
+
|
|
127
|
+
[🔗 TextInput](https://primer.style/brand/components/TextInput)
|
|
128
|
+
|
|
129
|
+
[🔗 Select](https://primer.style/brand/components/Select)
|
|
130
|
+
|
|
131
|
+
## 0.3.1
|
|
132
|
+
|
|
133
|
+
### Patch Changes
|
|
134
|
+
|
|
135
|
+
- [#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
|
|
136
|
+
|
|
137
|
+
Previously, all image and video children were automatically styled to fit the parent elements dimensions.
|
|
138
|
+
|
|
139
|
+
This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an `fillMedia` prop.
|
|
140
|
+
|
|
141
|
+
## 0.3.0
|
|
142
|
+
|
|
143
|
+
### Minor Changes
|
|
144
|
+
|
|
145
|
+
- [`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.
|
|
146
|
+
|
|
147
|
+
[See usage examples](https://primer.style/brand/components/FAQ)
|
|
148
|
+
|
|
149
|
+
* [#45](https://github.com/primer/brand/pull/45) [`2fb6924`](https://github.com/primer/brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
|
|
150
|
+
|
|
151
|
+
> This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
|
|
152
|
+
> Please read the following instructions carefully before updating:
|
|
153
|
+
|
|
154
|
+
### Updated references for "left" and "right" to "start" and "end"
|
|
155
|
+
|
|
156
|
+
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.
|
|
157
|
+
|
|
158
|
+
```diff
|
|
159
|
+
- <River align="left">
|
|
160
|
+
- <River align="right">
|
|
161
|
+
+ <River align="start">
|
|
162
|
+
+ <River align="end">
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
## 0.2.1
|
|
166
|
+
|
|
167
|
+
### Patch Changes
|
|
168
|
+
|
|
169
|
+
- [#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
|
|
170
|
+
|
|
171
|
+
## 0.2.0
|
|
172
|
+
|
|
173
|
+
### Minor Changes
|
|
174
|
+
|
|
175
|
+
- [#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
|
|
176
|
+
|
|
177
|
+
- Renames `LinkButton` to `Button` :warning: (see below)
|
|
178
|
+
- Button supports polymorphism and can be used `as` either `a` or `button`
|
|
179
|
+
|
|
180
|
+
### `River`
|
|
181
|
+
|
|
182
|
+
**NEW** Component :sparkles:
|
|
183
|
+
|
|
184
|
+
<table>
|
|
185
|
+
<tr>
|
|
186
|
+
<th> Before</th> <th> After</th>
|
|
187
|
+
</tr>
|
|
188
|
+
<tr>
|
|
189
|
+
<td valign="top">❌</td>
|
|
190
|
+
<td valign="top">
|
|
191
|
+
|
|
192
|
+
```jsx
|
|
193
|
+
// import {River} from "@primer/react-brand";
|
|
194
|
+
|
|
195
|
+
<River>
|
|
196
|
+
<River.Visual>
|
|
197
|
+
<img
|
|
198
|
+
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
|
|
199
|
+
alt="placeholder, blank area with an off-white background color"
|
|
200
|
+
/>
|
|
201
|
+
</River.Visual>
|
|
202
|
+
<River.Content>
|
|
203
|
+
<Heading>Heading</Heading>
|
|
204
|
+
<Text>
|
|
205
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
|
|
206
|
+
felis nam pulvinar risus elementum.
|
|
207
|
+
</Text>
|
|
208
|
+
<Link href="#">Call to action</Link>
|
|
209
|
+
</River.Content>
|
|
210
|
+
</River>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
</td>
|
|
214
|
+
</tr>
|
|
215
|
+
</table>
|
|
216
|
+
|
|
217
|
+
See more examples in our documentation.
|
|
218
|
+
https://primer.style/brand/components/River
|
|
219
|
+
|
|
220
|
+
### `LinkButton`
|
|
221
|
+
|
|
222
|
+
> **Warning**
|
|
223
|
+
> 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.
|
|
224
|
+
|
|
225
|
+
<table>
|
|
226
|
+
<tr>
|
|
227
|
+
<th> Before</th> <th> After</th>
|
|
228
|
+
</tr>
|
|
229
|
+
<tr>
|
|
230
|
+
<td valign="top">
|
|
231
|
+
|
|
232
|
+
```jsx
|
|
233
|
+
//import { LinkButton } from '@primer/react-brand';
|
|
234
|
+
|
|
235
|
+
<LinkButton href="#">Sign up</LinkButton>
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
</td>
|
|
239
|
+
<td valign="top">
|
|
240
|
+
|
|
241
|
+
```jsx
|
|
242
|
+
//import { Button } from '@primer/react-brand';
|
|
243
|
+
|
|
244
|
+
<Button as="a" href="#">
|
|
245
|
+
Sign up
|
|
246
|
+
</Button>
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
</td>
|
|
250
|
+
</tr>
|
|
251
|
+
<tr>
|
|
252
|
+
<td valign="top">
|
|
253
|
+
|
|
254
|
+
❌
|
|
255
|
+
|
|
256
|
+
</td>
|
|
257
|
+
<td valign="top">
|
|
258
|
+
|
|
259
|
+
```jsx
|
|
260
|
+
//import { Button } from '@primer/react-brand';
|
|
261
|
+
|
|
262
|
+
<Button onClick={handler}>Sign Up</Button>
|
|
263
|
+
```
|
|
264
|
+
|
|
265
|
+
</td>
|
|
266
|
+
</tr>
|
|
267
|
+
|
|
268
|
+
</table>
|
|
269
|
+
|
|
270
|
+
## 0.1.0
|
|
271
|
+
|
|
272
|
+
### Minor Changes
|
|
273
|
+
|
|
274
|
+
- [#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
|
|
275
|
+
|
|
276
|
+
### Patch Changes
|
|
277
|
+
|
|
278
|
+
- [#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
|
|
279
|
+
|
|
280
|
+
* [#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
|
|
281
|
+
|
|
282
|
+
**To upgrade:**
|
|
283
|
+
|
|
284
|
+
- _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
|
|
285
|
+
|
|
286
|
+
- _Add_ `import "@primer/react-brand/lib/css/main.css"`
|
|
287
|
+
|
|
288
|
+
- [#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
|
|
289
|
+
|
|
290
|
+
* [#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
|
|
291
|
+
|
|
292
|
+
- [#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.
|
|
293
|
+
|
|
294
|
+
* [#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
|
|
295
|
+
|
|
296
|
+
- **updated** Hero description text size from `500` to `400`
|
|
297
|
+
- **updated** button alignment to not stretch on mobile viewports
|
|
298
|
+
- **removed** `size` prop. Now only one responsive size available.
|
|
299
|
+
|
|
300
|
+
## 0.0.3
|
|
301
|
+
|
|
302
|
+
### Patch Changes
|
|
303
|
+
|
|
304
|
+
- [#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
|
|
305
|
+
|
|
306
|
+
## 0.0.2
|
|
307
|
+
|
|
308
|
+
### Patch Changes
|
|
309
|
+
|
|
310
|
+
- [#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)
|
|
@@ -17,16 +17,24 @@ export declare type SubdomainNavBarProps = {
|
|
|
17
17
|
* Fixes the navigation bar to the top of the viewport. Defaults to `true`.
|
|
18
18
|
*/
|
|
19
19
|
fixed?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Fill the maximum width of the parent container. Defaults to `false`.
|
|
22
|
+
*/
|
|
23
|
+
fullWidth?: boolean;
|
|
20
24
|
/**
|
|
21
25
|
* The title or name of the subdomain. Appears adjacent to the logo and is required for communicating content to assisitive technologies.
|
|
22
26
|
*/
|
|
23
27
|
title: string;
|
|
28
|
+
/**
|
|
29
|
+
* The URL for the site. Typically used to link the titleText prop value to the site root.
|
|
30
|
+
*/
|
|
31
|
+
titleHref?: string;
|
|
24
32
|
/**
|
|
25
33
|
* Optionally change the URL of the logo
|
|
26
34
|
*/
|
|
27
35
|
logoHref?: string;
|
|
28
36
|
};
|
|
29
|
-
declare function Root({ children, fixed, logoHref, title, ...rest }: SubdomainNavBarProps): JSX.Element;
|
|
37
|
+
declare function Root({ children, fixed, fullWidth, logoHref, title, titleHref, ...rest }: SubdomainNavBarProps): JSX.Element;
|
|
30
38
|
declare type LinkProps = {
|
|
31
39
|
href: string;
|
|
32
40
|
} & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
|
|
@@ -59,5 +67,9 @@ export declare const SubdomainNavBar: typeof Root & {
|
|
|
59
67
|
Search: React.ForwardRefExoticComponent<Pick<SearchProps, "title" | "onChange" | "onSubmit" | "autoComplete" | "active" | "searchResults" | "searchTerm" | "handlerFn"> & React.RefAttributes<unknown>>;
|
|
60
68
|
PrimaryAction: typeof PrimaryAction;
|
|
61
69
|
SecondaryAction: typeof SecondaryAction;
|
|
70
|
+
testIds: {
|
|
71
|
+
root: string;
|
|
72
|
+
readonly innerContainer: string;
|
|
73
|
+
};
|
|
62
74
|
};
|
|
63
75
|
export {};
|
package/lib/css/main.css
CHANGED
|
@@ -91,7 +91,7 @@ select {
|
|
|
91
91
|
|
|
92
92
|
/**
|
|
93
93
|
* Do not edit directly
|
|
94
|
-
* Generated on Thu,
|
|
94
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
95
95
|
*/
|
|
96
96
|
|
|
97
97
|
:root,
|
|
@@ -631,7 +631,7 @@ select {
|
|
|
631
631
|
|
|
632
632
|
/**
|
|
633
633
|
* Do not edit directly
|
|
634
|
-
* Generated on Thu,
|
|
634
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
635
635
|
*/
|
|
636
636
|
|
|
637
637
|
:root {
|
|
@@ -656,7 +656,7 @@ select {
|
|
|
656
656
|
|
|
657
657
|
/**
|
|
658
658
|
* Do not edit directly
|
|
659
|
-
* Generated on Thu,
|
|
659
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
660
660
|
*/
|
|
661
661
|
|
|
662
662
|
:root {
|
|
@@ -671,7 +671,7 @@ select {
|
|
|
671
671
|
|
|
672
672
|
/**
|
|
673
673
|
* Do not edit directly
|
|
674
|
-
* Generated on Thu,
|
|
674
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
675
675
|
*/
|
|
676
676
|
|
|
677
677
|
:root {
|
|
@@ -850,7 +850,7 @@ select {
|
|
|
850
850
|
|
|
851
851
|
/**
|
|
852
852
|
* Do not edit directly
|
|
853
|
-
* Generated on Thu,
|
|
853
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
854
854
|
*/
|
|
855
855
|
|
|
856
856
|
:root {
|
|
@@ -864,7 +864,7 @@ select {
|
|
|
864
864
|
|
|
865
865
|
/**
|
|
866
866
|
* Do not edit directly
|
|
867
|
-
* Generated on Thu,
|
|
867
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
868
868
|
*/
|
|
869
869
|
|
|
870
870
|
:root {
|
|
@@ -882,7 +882,7 @@ select {
|
|
|
882
882
|
|
|
883
883
|
/**
|
|
884
884
|
* Do not edit directly
|
|
885
|
-
* Generated on Thu,
|
|
885
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
886
886
|
*/
|
|
887
887
|
|
|
888
888
|
:root,
|
|
@@ -1078,7 +1078,7 @@ select {
|
|
|
1078
1078
|
|
|
1079
1079
|
/**
|
|
1080
1080
|
* Do not edit directly
|
|
1081
|
-
* Generated on Thu,
|
|
1081
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
1082
1082
|
*/
|
|
1083
1083
|
|
|
1084
1084
|
:root,
|
|
@@ -1217,7 +1217,7 @@ select {
|
|
|
1217
1217
|
|
|
1218
1218
|
/**
|
|
1219
1219
|
* Do not edit directly
|
|
1220
|
-
* Generated on Thu,
|
|
1220
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
1221
1221
|
*/
|
|
1222
1222
|
|
|
1223
1223
|
:root {
|
|
@@ -1227,7 +1227,7 @@ select {
|
|
|
1227
1227
|
|
|
1228
1228
|
/**
|
|
1229
1229
|
* Do not edit directly
|
|
1230
|
-
* Generated on Thu,
|
|
1230
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
1231
1231
|
*/
|
|
1232
1232
|
|
|
1233
1233
|
:root {
|
|
@@ -1383,6 +1383,9 @@ select {
|
|
|
1383
1383
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container___kdy5Y {
|
|
1384
1384
|
display: flex;
|
|
1385
1385
|
padding: 4px 28px;
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-inner-container--centered___FXUTh {
|
|
1386
1389
|
max-width: 1280px;
|
|
1387
1390
|
margin: 0 auto;
|
|
1388
1391
|
}
|
|
@@ -1408,7 +1411,7 @@ select {
|
|
|
1408
1411
|
gap: 16px;
|
|
1409
1412
|
padding: 0;
|
|
1410
1413
|
margin: 0;
|
|
1411
|
-
max-width:
|
|
1414
|
+
max-width: 340px;
|
|
1412
1415
|
color: var(--brand-color-text-default);
|
|
1413
1416
|
padding: var(--base-size-16) 0;
|
|
1414
1417
|
}
|
|
@@ -1452,6 +1455,7 @@ select {
|
|
|
1452
1455
|
color: var(--brand-color-text-default);
|
|
1453
1456
|
text-decoration: none;
|
|
1454
1457
|
padding-right: var(--base-size-16);
|
|
1458
|
+
white-space: nowrap;
|
|
1455
1459
|
}
|
|
1456
1460
|
|
|
1457
1461
|
/*
|
|
@@ -1511,7 +1515,7 @@ select {
|
|
|
1511
1515
|
|
|
1512
1516
|
@media screen and (min-width: 1024px) {
|
|
1513
1517
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
|
|
1514
|
-
max-width:
|
|
1518
|
+
max-width: 340px;
|
|
1515
1519
|
}
|
|
1516
1520
|
}
|
|
1517
1521
|
|
|
@@ -1692,11 +1696,16 @@ select {
|
|
|
1692
1696
|
/*
|
|
1693
1697
|
* Toolbar actions area for search and mobile menu
|
|
1694
1698
|
*/
|
|
1695
|
-
|
|
1699
|
+
|
|
1700
|
+
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-secondary-nav___WHTTz {
|
|
1696
1701
|
display: flex;
|
|
1697
1702
|
align-items: center;
|
|
1698
1703
|
margin-left: auto;
|
|
1699
1704
|
}
|
|
1705
|
+
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___WyUIj {
|
|
1706
|
+
display: flex;
|
|
1707
|
+
align-items: center;
|
|
1708
|
+
}
|
|
1700
1709
|
|
|
1701
1710
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___Nzz4R,
|
|
1702
1711
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___hMy4J {
|
|
@@ -2067,7 +2076,7 @@ select {
|
|
|
2067
2076
|
|
|
2068
2077
|
/**
|
|
2069
2078
|
* Do not edit directly
|
|
2070
|
-
* Generated on Thu,
|
|
2079
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
2071
2080
|
*/
|
|
2072
2081
|
|
|
2073
2082
|
:root,
|
|
@@ -2095,7 +2104,7 @@ select {
|
|
|
2095
2104
|
|
|
2096
2105
|
/**
|
|
2097
2106
|
* Do not edit directly
|
|
2098
|
-
* Generated on Thu,
|
|
2107
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
2099
2108
|
*/
|
|
2100
2109
|
|
|
2101
2110
|
:root,
|
|
@@ -2200,7 +2209,7 @@ select {
|
|
|
2200
2209
|
|
|
2201
2210
|
/**
|
|
2202
2211
|
* Do not edit directly
|
|
2203
|
-
* Generated on Thu,
|
|
2212
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
2204
2213
|
*/
|
|
2205
2214
|
|
|
2206
2215
|
:root,
|
|
@@ -2352,7 +2361,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2352
2361
|
|
|
2353
2362
|
/**
|
|
2354
2363
|
* Do not edit directly
|
|
2355
|
-
* Generated on Thu,
|
|
2364
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
2356
2365
|
*/
|
|
2357
2366
|
|
|
2358
2367
|
:root {
|
|
@@ -2362,7 +2371,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2362
2371
|
|
|
2363
2372
|
/**
|
|
2364
2373
|
* Do not edit directly
|
|
2365
|
-
* Generated on Thu,
|
|
2374
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
2366
2375
|
*/
|
|
2367
2376
|
|
|
2368
2377
|
:root,
|
|
@@ -2432,7 +2441,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2432
2441
|
|
|
2433
2442
|
/**
|
|
2434
2443
|
* Do not edit directly
|
|
2435
|
-
* Generated on Thu,
|
|
2444
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
2436
2445
|
*/
|
|
2437
2446
|
|
|
2438
2447
|
:root {
|
|
@@ -2451,7 +2460,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2451
2460
|
|
|
2452
2461
|
/**
|
|
2453
2462
|
* Do not edit directly
|
|
2454
|
-
* Generated on Thu,
|
|
2463
|
+
* Generated on Thu, 06 Oct 2022 13:20:43 GMT
|
|
2455
2464
|
*/
|
|
2456
2465
|
|
|
2457
2466
|
:root,
|
|
@@ -3150,7 +3159,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
3150
3159
|
|
|
3151
3160
|
/**
|
|
3152
3161
|
* Do not edit directly
|
|
3153
|
-
* Generated on Thu,
|
|
3162
|
+
* Generated on Thu, 06 Oct 2022 13:20:42 GMT
|
|
3154
3163
|
*/
|
|
3155
3164
|
|
|
3156
3165
|
:root {
|
|
@@ -3404,7 +3413,6 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
3404
3413
|
font-size: var(--base-size-48);
|
|
3405
3414
|
line-height: var(--base-size-48);
|
|
3406
3415
|
font-weight: var(--base-text-weight-extrabold);
|
|
3407
|
-
height: 45px;
|
|
3408
3416
|
}
|
|
3409
3417
|
|
|
3410
3418
|
.Primer_Brand__Testimonial-module__Testimonial--center___NyPe5 {
|