@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.
Files changed (102) hide show
  1. package/CHANGELOG.md +310 -0
  2. package/lib/SubdomainNavBar/SubdomainNavBar.d.ts +13 -1
  3. package/lib/css/main.css +30 -22
  4. package/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes.css +1 -1
  5. package/lib/design-tokens/css/tokens/base/colors/color-scales.css +1 -1
  6. package/lib/design-tokens/css/tokens/base/size/size.css +1 -1
  7. package/lib/design-tokens/css/tokens/base/typography/typography.css +1 -1
  8. package/lib/design-tokens/css/tokens/functional/colors/global-with-modes.css +1 -1
  9. package/lib/design-tokens/css/tokens/functional/colors/global.css +1 -1
  10. package/lib/design-tokens/css/tokens/functional/components/accordion/colors-with-modes.css +1 -1
  11. package/lib/design-tokens/css/tokens/functional/components/button/colors-with-modes.css +1 -1
  12. package/lib/design-tokens/css/tokens/functional/components/control/base.css +1 -1
  13. package/lib/design-tokens/css/tokens/functional/components/control/colors-with-modes.css +1 -1
  14. package/lib/design-tokens/css/tokens/functional/components/faq/base.css +1 -1
  15. package/lib/design-tokens/css/tokens/functional/components/faq/colors-with-modes.css +1 -1
  16. package/lib/design-tokens/css/tokens/functional/components/faq/colors.css +1 -1
  17. package/lib/design-tokens/css/tokens/functional/components/hero/base.css +1 -1
  18. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors-with-modes.css +1 -1
  19. package/lib/design-tokens/css/tokens/functional/components/inline-link/colors.css +1 -1
  20. package/lib/design-tokens/css/tokens/functional/components/river/base.css +1 -1
  21. package/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css +1 -1
  22. package/lib/design-tokens/css/tokens/functional/size/border.css +1 -1
  23. package/lib/design-tokens/css/tokens/functional/size/breakpoints.css +1 -1
  24. package/lib/design-tokens/css/tokens/functional/size/size-coarse.css +1 -1
  25. package/lib/design-tokens/css/tokens/functional/size/size-fine.css +1 -1
  26. package/lib/design-tokens/css/tokens/functional/size/size.css +1 -1
  27. package/lib/design-tokens/css/tokens/functional/typography/typography-responsive.css +1 -1
  28. package/lib/design-tokens/css/tokens/functional/typography/typography.css +1 -1
  29. package/lib/design-tokens/js/module/tokens/base/colors/color-scales.js +1 -1
  30. package/lib/design-tokens/js/module/tokens/base/size/size.js +1 -1
  31. package/lib/design-tokens/js/module/tokens/base/typography/typography.js +1 -1
  32. package/lib/design-tokens/js/module/tokens/functional/colors/global.js +1 -1
  33. package/lib/design-tokens/js/module/tokens/functional/components/control/base.js +1 -1
  34. package/lib/design-tokens/js/module/tokens/functional/components/faq/base.js +1 -1
  35. package/lib/design-tokens/js/module/tokens/functional/components/faq/colors.js +1 -1
  36. package/lib/design-tokens/js/module/tokens/functional/components/hero/base.js +1 -1
  37. package/lib/design-tokens/js/module/tokens/functional/components/inline-link/colors.js +1 -1
  38. package/lib/design-tokens/js/module/tokens/functional/components/river/base.js +1 -1
  39. package/lib/design-tokens/js/module/tokens/functional/size/border.js +1 -1
  40. package/lib/design-tokens/js/module/tokens/functional/size/breakpoints.js +1 -1
  41. package/lib/design-tokens/js/module/tokens/functional/size/size-coarse.js +1 -1
  42. package/lib/design-tokens/js/module/tokens/functional/size/size-fine.js +1 -1
  43. package/lib/design-tokens/js/module/tokens/functional/size/size.js +1 -1
  44. package/lib/design-tokens/js/module/tokens/functional/size/viewport.js +1 -1
  45. package/lib/design-tokens/js/module/tokens/functional/typography/typography-responsive.js +1 -1
  46. package/lib/design-tokens/js/module/tokens/functional/typography/typography.js +1 -1
  47. package/lib/design-tokens/js/tokens/base/colors/color-scales.js +1 -1
  48. package/lib/design-tokens/js/tokens/base/size/size.js +1 -1
  49. package/lib/design-tokens/js/tokens/base/typography/typography.js +1 -1
  50. package/lib/design-tokens/js/tokens/functional/colors/global.js +1 -1
  51. package/lib/design-tokens/js/tokens/functional/components/control/base.js +1 -1
  52. package/lib/design-tokens/js/tokens/functional/components/faq/base.js +1 -1
  53. package/lib/design-tokens/js/tokens/functional/components/faq/colors.js +1 -1
  54. package/lib/design-tokens/js/tokens/functional/components/hero/base.js +1 -1
  55. package/lib/design-tokens/js/tokens/functional/components/inline-link/colors.js +1 -1
  56. package/lib/design-tokens/js/tokens/functional/components/river/base.js +1 -1
  57. package/lib/design-tokens/js/tokens/functional/size/border.js +1 -1
  58. package/lib/design-tokens/js/tokens/functional/size/breakpoints.js +1 -1
  59. package/lib/design-tokens/js/tokens/functional/size/size-coarse.js +1 -1
  60. package/lib/design-tokens/js/tokens/functional/size/size-fine.js +1 -1
  61. package/lib/design-tokens/js/tokens/functional/size/size.js +1 -1
  62. package/lib/design-tokens/js/tokens/functional/size/viewport.js +1 -1
  63. package/lib/design-tokens/js/tokens/functional/typography/typography-responsive.js +1 -1
  64. package/lib/design-tokens/js/tokens/functional/typography/typography.js +1 -1
  65. package/lib/design-tokens/ts/tokens/base/colors/color-scales.d.ts +1 -1
  66. package/lib/design-tokens/ts/tokens/base/colors/color-scales.js +1 -1
  67. package/lib/design-tokens/ts/tokens/base/size/size.d.ts +1 -1
  68. package/lib/design-tokens/ts/tokens/base/size/size.js +1 -1
  69. package/lib/design-tokens/ts/tokens/base/typography/typography.d.ts +1 -1
  70. package/lib/design-tokens/ts/tokens/base/typography/typography.js +1 -1
  71. package/lib/design-tokens/ts/tokens/functional/colors/global.d.ts +1 -1
  72. package/lib/design-tokens/ts/tokens/functional/colors/global.js +1 -1
  73. package/lib/design-tokens/ts/tokens/functional/components/control/base.d.ts +1 -1
  74. package/lib/design-tokens/ts/tokens/functional/components/control/base.js +1 -1
  75. package/lib/design-tokens/ts/tokens/functional/components/faq/base.d.ts +1 -1
  76. package/lib/design-tokens/ts/tokens/functional/components/faq/base.js +1 -1
  77. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.d.ts +1 -1
  78. package/lib/design-tokens/ts/tokens/functional/components/faq/colors.js +1 -1
  79. package/lib/design-tokens/ts/tokens/functional/components/hero/base.d.ts +1 -1
  80. package/lib/design-tokens/ts/tokens/functional/components/hero/base.js +1 -1
  81. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.d.ts +1 -1
  82. package/lib/design-tokens/ts/tokens/functional/components/inline-link/colors.js +1 -1
  83. package/lib/design-tokens/ts/tokens/functional/components/river/base.d.ts +1 -1
  84. package/lib/design-tokens/ts/tokens/functional/components/river/base.js +1 -1
  85. package/lib/design-tokens/ts/tokens/functional/size/border.d.ts +1 -1
  86. package/lib/design-tokens/ts/tokens/functional/size/border.js +1 -1
  87. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.d.ts +1 -1
  88. package/lib/design-tokens/ts/tokens/functional/size/breakpoints.js +1 -1
  89. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.d.ts +1 -1
  90. package/lib/design-tokens/ts/tokens/functional/size/size-coarse.js +1 -1
  91. package/lib/design-tokens/ts/tokens/functional/size/size-fine.d.ts +1 -1
  92. package/lib/design-tokens/ts/tokens/functional/size/size-fine.js +1 -1
  93. package/lib/design-tokens/ts/tokens/functional/size/size.d.ts +1 -1
  94. package/lib/design-tokens/ts/tokens/functional/size/size.js +1 -1
  95. package/lib/design-tokens/ts/tokens/functional/size/viewport.d.ts +1 -1
  96. package/lib/design-tokens/ts/tokens/functional/size/viewport.js +1 -1
  97. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.d.ts +1 -1
  98. package/lib/design-tokens/ts/tokens/functional/typography/typography-responsive.js +1 -1
  99. package/lib/design-tokens/ts/tokens/functional/typography/typography.d.ts +1 -1
  100. package/lib/design-tokens/ts/tokens/functional/typography/typography.js +1 -1
  101. package/lib/index.js +1 -1
  102. 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&apos;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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:22 GMT
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: 230px;
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: 250px;
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
- .Primer_Brand__SubdomainNavBar-module__SubdomainNavBar-search-trigger___WyUIj {
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:22 GMT
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, 29 Sep 2022 18:20:23 GMT
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, 29 Sep 2022 18:20:22 GMT
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 {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:23 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:43 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:23 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:43 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:23 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:43 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:23 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:43 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:23 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:43 GMT
4
4
  */
5
5
 
6
6
  :root,
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 29 Sep 2022 18:20:22 GMT
3
+ * Generated on Thu, 06 Oct 2022 13:20:42 GMT
4
4
  */
5
5
 
6
6
  :root {