@primer/react-brand 0.5.0 → 0.5.1-rc.3eb50cb
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 +300 -0
- package/lib/css/main.css +27 -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/forms/TextInput/TextInput.d.ts +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,300 @@
|
|
|
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
|
+
## 0.5.0
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- [#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.
|
|
24
|
+
|
|
25
|
+
Usage example:
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
<SubdomainNavBar title="Subdomain">
|
|
29
|
+
<SubdomainNavBar.Link href="#">Collections</SubdomainNavBar.Link>
|
|
30
|
+
<SubdomainNavBar.Link href="#">Topics</SubdomainNavBar.Link>
|
|
31
|
+
<SubdomainNavBar.Link href="#">Articles</SubdomainNavBar.Link>
|
|
32
|
+
<SubdomainNavBar.Link href="#">Events</SubdomainNavBar.Link>
|
|
33
|
+
<SubdomainNavBar.Link href="#">Video</SubdomainNavBar.Link>
|
|
34
|
+
<SubdomainNavBar.Link href="#">Social</SubdomainNavBar.Link>
|
|
35
|
+
<SubdomainNavBar.Search ref={inputRef} onSubmit={handleSubmit} />
|
|
36
|
+
<SubdomainNavBar.PrimaryAction href="#">Primary CTA</SubdomainNavBar.PrimaryAction>
|
|
37
|
+
<SubdomainNavBar.SecondaryAction href="#">Secondary CTA</SubdomainNavBar.SecondaryAction>
|
|
38
|
+
</SubdomainNavBar>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
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.
|
|
42
|
+
|
|
43
|
+
* [#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.
|
|
44
|
+
|
|
45
|
+
Usage example:
|
|
46
|
+
|
|
47
|
+
```jsx
|
|
48
|
+
<Testimonial>
|
|
49
|
+
<Testimonial.Quote>
|
|
50
|
+
GitHub helps us ensure that we have our security controls baked into our pipelines all the way from the first line
|
|
51
|
+
of code we're writing.
|
|
52
|
+
</Testimonial.Quote>
|
|
53
|
+
<Testimonial.Name position="Staff Security Engineer">David Ross</Testimonial.Name>
|
|
54
|
+
<Testimonial.Avatar
|
|
55
|
+
src="https://avatars.githubusercontent.com/u/92997159?v=4"
|
|
56
|
+
alt="Circular avatar from David Ross's GitHub profile"
|
|
57
|
+
/>
|
|
58
|
+
</Testimonial>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
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.
|
|
62
|
+
|
|
63
|
+
- [#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.
|
|
64
|
+
|
|
65
|
+
Usage example:
|
|
66
|
+
|
|
67
|
+
```jsx
|
|
68
|
+
<Stack direction="horizontal" gap="spacious" padding="spacious">
|
|
69
|
+
<div>
|
|
70
|
+
<img
|
|
71
|
+
src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
|
|
72
|
+
alt="placeholder with gray background and no foreground text"
|
|
73
|
+
/>
|
|
74
|
+
</div>
|
|
75
|
+
<div>
|
|
76
|
+
<img
|
|
77
|
+
src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
|
|
78
|
+
alt="placeholder with gray background and no foreground text"
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
<div>
|
|
82
|
+
<img
|
|
83
|
+
src="https://via.placeholder.com/300x150/f5f5f5/f5f5f5.png"
|
|
84
|
+
alt="placeholder with gray background and no foreground text"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
</Stack>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
See [Storybook](https://primer.style/brand/storybook/?path=/story/components-stack--playground) for more usage examples.
|
|
91
|
+
|
|
92
|
+
## 0.4.0
|
|
93
|
+
|
|
94
|
+
### Minor Changes
|
|
95
|
+
|
|
96
|
+
- [#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.
|
|
97
|
+
|
|
98
|
+
⚠️ This update should be considered a breaking change, despite being issued in a `minor` release.
|
|
99
|
+
|
|
100
|
+
Selectable values: `medium` (default) and `large`.
|
|
101
|
+
|
|
102
|
+
**Upgrade steps:**
|
|
103
|
+
|
|
104
|
+
```diff
|
|
105
|
+
- <Button>before</Button>
|
|
106
|
+
+ <Button size="large">after</Button>
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
* [#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.
|
|
110
|
+
|
|
111
|
+
**Read the Technical Previews for usage examples:**
|
|
112
|
+
|
|
113
|
+
[🔗 FormControl](https://primer.style/brand/components/FormControl)
|
|
114
|
+
|
|
115
|
+
[🔗 Checkbox](https://primer.style/brand/components/Checkbox)
|
|
116
|
+
|
|
117
|
+
[🔗 TextInput](https://primer.style/brand/components/TextInput)
|
|
118
|
+
|
|
119
|
+
[🔗 Select](https://primer.style/brand/components/Select)
|
|
120
|
+
|
|
121
|
+
## 0.3.1
|
|
122
|
+
|
|
123
|
+
### Patch Changes
|
|
124
|
+
|
|
125
|
+
- [#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
|
|
126
|
+
|
|
127
|
+
Previously, all image and video children were automatically styled to fit the parent elements dimensions.
|
|
128
|
+
|
|
129
|
+
This isn't ideal in all situations, so the ability to toggle-off this behaviour is now available through an `fillMedia` prop.
|
|
130
|
+
|
|
131
|
+
## 0.3.0
|
|
132
|
+
|
|
133
|
+
### Minor Changes
|
|
134
|
+
|
|
135
|
+
- [`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.
|
|
136
|
+
|
|
137
|
+
[See usage examples](https://primer.style/brand/components/FAQ)
|
|
138
|
+
|
|
139
|
+
* [#45](https://github.com/primer/brand/pull/45) [`2fb6924`](https://github.com/primer/brand/commit/2fb6924a834ddcbad34cfb97ecfc1659d54f4ed5) Thanks [@rezrah](https://github.com/rezrah)! - > **Warning**
|
|
140
|
+
|
|
141
|
+
> This is a breaking change, but as the library is a pre-v1 release we are publishing this update as a `minor` change.
|
|
142
|
+
> Please read the following instructions carefully before updating:
|
|
143
|
+
|
|
144
|
+
### Updated references for "left" and "right" to "start" and "end"
|
|
145
|
+
|
|
146
|
+
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.
|
|
147
|
+
|
|
148
|
+
```diff
|
|
149
|
+
- <River align="left">
|
|
150
|
+
- <River align="right">
|
|
151
|
+
+ <River align="start">
|
|
152
|
+
+ <River align="end">
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
## 0.2.1
|
|
156
|
+
|
|
157
|
+
### Patch Changes
|
|
158
|
+
|
|
159
|
+
- [#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
|
|
160
|
+
|
|
161
|
+
## 0.2.0
|
|
162
|
+
|
|
163
|
+
### Minor Changes
|
|
164
|
+
|
|
165
|
+
- [#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
|
|
166
|
+
|
|
167
|
+
- Renames `LinkButton` to `Button` :warning: (see below)
|
|
168
|
+
- Button supports polymorphism and can be used `as` either `a` or `button`
|
|
169
|
+
|
|
170
|
+
### `River`
|
|
171
|
+
|
|
172
|
+
**NEW** Component :sparkles:
|
|
173
|
+
|
|
174
|
+
<table>
|
|
175
|
+
<tr>
|
|
176
|
+
<th> Before</th> <th> After</th>
|
|
177
|
+
</tr>
|
|
178
|
+
<tr>
|
|
179
|
+
<td valign="top">❌</td>
|
|
180
|
+
<td valign="top">
|
|
181
|
+
|
|
182
|
+
```jsx
|
|
183
|
+
// import {River} from "@primer/react-brand";
|
|
184
|
+
|
|
185
|
+
<River>
|
|
186
|
+
<River.Visual>
|
|
187
|
+
<img
|
|
188
|
+
src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
|
|
189
|
+
alt="placeholder, blank area with an off-white background color"
|
|
190
|
+
/>
|
|
191
|
+
</River.Visual>
|
|
192
|
+
<River.Content>
|
|
193
|
+
<Heading>Heading</Heading>
|
|
194
|
+
<Text>
|
|
195
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit ullamcorper id. Aliquam luctus sed turpis
|
|
196
|
+
felis nam pulvinar risus elementum.
|
|
197
|
+
</Text>
|
|
198
|
+
<Link href="#">Call to action</Link>
|
|
199
|
+
</River.Content>
|
|
200
|
+
</River>
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
</td>
|
|
204
|
+
</tr>
|
|
205
|
+
</table>
|
|
206
|
+
|
|
207
|
+
See more examples in our documentation.
|
|
208
|
+
https://primer.style/brand/components/River
|
|
209
|
+
|
|
210
|
+
### `LinkButton`
|
|
211
|
+
|
|
212
|
+
> **Warning**
|
|
213
|
+
> 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.
|
|
214
|
+
|
|
215
|
+
<table>
|
|
216
|
+
<tr>
|
|
217
|
+
<th> Before</th> <th> After</th>
|
|
218
|
+
</tr>
|
|
219
|
+
<tr>
|
|
220
|
+
<td valign="top">
|
|
221
|
+
|
|
222
|
+
```jsx
|
|
223
|
+
//import { LinkButton } from '@primer/react-brand';
|
|
224
|
+
|
|
225
|
+
<LinkButton href="#">Sign up</LinkButton>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
</td>
|
|
229
|
+
<td valign="top">
|
|
230
|
+
|
|
231
|
+
```jsx
|
|
232
|
+
//import { Button } from '@primer/react-brand';
|
|
233
|
+
|
|
234
|
+
<Button as="a" href="#">
|
|
235
|
+
Sign up
|
|
236
|
+
</Button>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td valign="top">
|
|
243
|
+
|
|
244
|
+
❌
|
|
245
|
+
|
|
246
|
+
</td>
|
|
247
|
+
<td valign="top">
|
|
248
|
+
|
|
249
|
+
```jsx
|
|
250
|
+
//import { Button } from '@primer/react-brand';
|
|
251
|
+
|
|
252
|
+
<Button onClick={handler}>Sign Up</Button>
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
</td>
|
|
256
|
+
</tr>
|
|
257
|
+
|
|
258
|
+
</table>
|
|
259
|
+
|
|
260
|
+
## 0.1.0
|
|
261
|
+
|
|
262
|
+
### Minor Changes
|
|
263
|
+
|
|
264
|
+
- [#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
|
|
265
|
+
|
|
266
|
+
### Patch Changes
|
|
267
|
+
|
|
268
|
+
- [#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
|
|
269
|
+
|
|
270
|
+
* [#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
|
|
271
|
+
|
|
272
|
+
**To upgrade:**
|
|
273
|
+
|
|
274
|
+
- _Remove_ `import "@primer/react-brand/lib/css/gh-variables.css"`
|
|
275
|
+
|
|
276
|
+
- _Add_ `import "@primer/react-brand/lib/css/main.css"`
|
|
277
|
+
|
|
278
|
+
- [#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
|
|
279
|
+
|
|
280
|
+
* [#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
|
|
281
|
+
|
|
282
|
+
- [#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.
|
|
283
|
+
|
|
284
|
+
* [#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
|
|
285
|
+
|
|
286
|
+
- **updated** Hero description text size from `500` to `400`
|
|
287
|
+
- **updated** button alignment to not stretch on mobile viewports
|
|
288
|
+
- **removed** `size` prop. Now only one responsive size available.
|
|
289
|
+
|
|
290
|
+
## 0.0.3
|
|
291
|
+
|
|
292
|
+
### Patch Changes
|
|
293
|
+
|
|
294
|
+
- [#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
|
|
295
|
+
|
|
296
|
+
## 0.0.2
|
|
297
|
+
|
|
298
|
+
### Patch Changes
|
|
299
|
+
|
|
300
|
+
- [#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/lib/css/main.css
CHANGED
|
@@ -91,7 +91,7 @@ select {
|
|
|
91
91
|
|
|
92
92
|
/**
|
|
93
93
|
* Do not edit directly
|
|
94
|
-
* Generated on
|
|
94
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
634
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
659
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
674
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
853
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
867
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
885
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
1081
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
1220
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 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
|
|
1230
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
1231
1231
|
*/
|
|
1232
1232
|
|
|
1233
1233
|
:root {
|
|
@@ -1408,7 +1408,7 @@ select {
|
|
|
1408
1408
|
gap: 16px;
|
|
1409
1409
|
padding: 0;
|
|
1410
1410
|
margin: 0;
|
|
1411
|
-
max-width:
|
|
1411
|
+
max-width: 340px;
|
|
1412
1412
|
color: var(--brand-color-text-default);
|
|
1413
1413
|
padding: var(--base-size-16) 0;
|
|
1414
1414
|
}
|
|
@@ -1452,6 +1452,7 @@ select {
|
|
|
1452
1452
|
color: var(--brand-color-text-default);
|
|
1453
1453
|
text-decoration: none;
|
|
1454
1454
|
padding-right: var(--base-size-16);
|
|
1455
|
+
white-space: nowrap;
|
|
1455
1456
|
}
|
|
1456
1457
|
|
|
1457
1458
|
/*
|
|
@@ -1511,7 +1512,7 @@ select {
|
|
|
1511
1512
|
|
|
1512
1513
|
@media screen and (min-width: 1024px) {
|
|
1513
1514
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-primary-nav-list___iQd2r {
|
|
1514
|
-
max-width:
|
|
1515
|
+
max-width: 340px;
|
|
1515
1516
|
}
|
|
1516
1517
|
}
|
|
1517
1518
|
|
|
@@ -1692,11 +1693,16 @@ select {
|
|
|
1692
1693
|
/*
|
|
1693
1694
|
* Toolbar actions area for search and mobile menu
|
|
1694
1695
|
*/
|
|
1695
|
-
|
|
1696
|
+
|
|
1697
|
+
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-secondary-nav___WHTTz {
|
|
1696
1698
|
display: flex;
|
|
1697
1699
|
align-items: center;
|
|
1698
1700
|
margin-left: auto;
|
|
1699
1701
|
}
|
|
1702
|
+
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___WyUIj {
|
|
1703
|
+
display: flex;
|
|
1704
|
+
align-items: center;
|
|
1705
|
+
}
|
|
1700
1706
|
|
|
1701
1707
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-button___Nzz4R,
|
|
1702
1708
|
.Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-menu-button___hMy4J {
|
|
@@ -2067,7 +2073,7 @@ select {
|
|
|
2067
2073
|
|
|
2068
2074
|
/**
|
|
2069
2075
|
* Do not edit directly
|
|
2070
|
-
* Generated on
|
|
2076
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2071
2077
|
*/
|
|
2072
2078
|
|
|
2073
2079
|
:root,
|
|
@@ -2095,7 +2101,7 @@ select {
|
|
|
2095
2101
|
|
|
2096
2102
|
/**
|
|
2097
2103
|
* Do not edit directly
|
|
2098
|
-
* Generated on
|
|
2104
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2099
2105
|
*/
|
|
2100
2106
|
|
|
2101
2107
|
:root,
|
|
@@ -2200,7 +2206,7 @@ select {
|
|
|
2200
2206
|
|
|
2201
2207
|
/**
|
|
2202
2208
|
* Do not edit directly
|
|
2203
|
-
* Generated on
|
|
2209
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2204
2210
|
*/
|
|
2205
2211
|
|
|
2206
2212
|
:root,
|
|
@@ -2352,7 +2358,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2352
2358
|
|
|
2353
2359
|
/**
|
|
2354
2360
|
* Do not edit directly
|
|
2355
|
-
* Generated on
|
|
2361
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2356
2362
|
*/
|
|
2357
2363
|
|
|
2358
2364
|
:root {
|
|
@@ -2362,7 +2368,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2362
2368
|
|
|
2363
2369
|
/**
|
|
2364
2370
|
* Do not edit directly
|
|
2365
|
-
* Generated on
|
|
2371
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2366
2372
|
*/
|
|
2367
2373
|
|
|
2368
2374
|
:root,
|
|
@@ -2432,7 +2438,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2432
2438
|
|
|
2433
2439
|
/**
|
|
2434
2440
|
* Do not edit directly
|
|
2435
|
-
* Generated on
|
|
2441
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2436
2442
|
*/
|
|
2437
2443
|
|
|
2438
2444
|
:root {
|
|
@@ -2451,7 +2457,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
2451
2457
|
|
|
2452
2458
|
/**
|
|
2453
2459
|
* Do not edit directly
|
|
2454
|
-
* Generated on
|
|
2460
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
2455
2461
|
*/
|
|
2456
2462
|
|
|
2457
2463
|
:root,
|
|
@@ -3150,7 +3156,7 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
3150
3156
|
|
|
3151
3157
|
/**
|
|
3152
3158
|
* Do not edit directly
|
|
3153
|
-
* Generated on
|
|
3159
|
+
* Generated on Mon, 03 Oct 2022 08:39:13 GMT
|
|
3154
3160
|
*/
|
|
3155
3161
|
|
|
3156
3162
|
:root {
|
|
@@ -3404,7 +3410,6 @@ details[open] > .Primer_Brand__Accordion-module__Accordion__content___wMZGe {
|
|
|
3404
3410
|
font-size: var(--base-size-48);
|
|
3405
3411
|
line-height: var(--base-size-48);
|
|
3406
3412
|
font-weight: var(--base-text-weight-extrabold);
|
|
3407
|
-
height: 45px;
|
|
3408
3413
|
}
|
|
3409
3414
|
|
|
3410
3415
|
.Primer_Brand__Testimonial-module__Testimonial--center___NyPe5 {
|