Skip to content

Commit c0051f0

Browse files
rezrahrezrah
committed
merge conflict
2 parents cf52ebb + e9d130c commit c0051f0

24 files changed

+147
-58
lines changed

‎.changeset/banishing-red-shrimps.md

-5
This file was deleted.

‎.changeset/famous-trains-hide.md

-5
This file was deleted.

‎.changeset/friendly-suns-tease.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react-brand': patch
3+
---
4+
5+
Adds `Blockquote`, `Code`, `Figure` and `Figcaption` to the `Prose` component.

‎.changeset/green-shrimps-vanish.md

-13
This file was deleted.

‎.changeset/hide-famous-trains.md

-5
This file was deleted.

‎apps/docs/content/components/Card/index.mdx

+19-13
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import CustomVideoPlayer from '../../../src/components/custom-video-player'
77
import ComponentLayout from '../../../src/layouts/component-layout'
88
export default ComponentLayout
99

10-
![An image showing a card with a Copilot Octicon.](https://github.com/primer/brand/assets/912236/494d440c-98d2-4634-beec-8a80caca8926)
10+
![An image showing a card with a Copilot Octicon.](https://github.com/primer/brand/assets/6951037/5bb4e3dd-8f53-44c5-a5ed-987c732eaf8f)
1111

1212
## Usage
1313

@@ -17,11 +17,11 @@ Cards should always be used in groups of two or more related concepts.
1717

1818
<DoDontContainer>
1919
<Do>
20-
<img src="https://github.com/primer/brand/assets/912236/d0da491e-8895-4ba2-9840-17eef7f2dd75" />
20+
<img src="https://github.com/primer/brand/assets/6951037/139deb0e-0143-4051-a8c8-49b854b58727" />
2121
<Caption>Use cards in groups to display related information.</Caption>
2222
</Do>
2323
<Dont>
24-
<img src="https://github.com/primer/brand/assets/912236/9f17706e-dfb1-4ef9-a87d-df6c8a1d3825" />
24+
<img src="https://github.com/primer/brand/assets/6951037/1f009b98-01b8-4cb3-af30-83ccac31c8c9" />
2525
<Caption>
2626
Don't use isolated cards. Consider using a CTABanner instead.
2727
</Caption>
@@ -36,14 +36,14 @@ For a better visual experience, we recommend using similar length size for the h
3636

3737
<DoDontContainer>
3838
<Do>
39-
<img src="https://github.com/primer/brand/assets/912236/fced572e-c296-4a97-aaa8-3d4b357f2f6e" />
39+
<img src="https://github.com/primer/brand/assets/6951037/28b8dbfa-9ed5-40ba-b1a3-d501ac3be4b8" />
4040
<Caption>
4141
Use the same type of visual asset for all cards and a similar length size
4242
for the content.
4343
</Caption>
4444
</Do>
4545
<Dont>
46-
<img src="https://github.com/primer/brand/assets/912236/c612ccf8-7c98-4213-92b9-2fdf6f0f1398" />
46+
<img src="https://github.com/primer/brand/assets/6951037/6d494165-312e-4e84-94df-199d1d82fd50" />
4747
<Caption>
4848
Don't use different length sizes for the title or the description.
4949
</Caption>
@@ -54,13 +54,13 @@ When using an image as the visual asset, we recommend using the same aspect rati
5454

5555
<DoDontContainer>
5656
<Do>
57-
<img src="https://github.com/primer/brand/assets/912236/0ec93c16-7091-4ebb-a1a0-b0626de7833f" />
57+
<img src="https://github.com/primer/brand/assets/6951037/1a6decfc-a840-440b-8ec7-bf25b7716711" />
5858
<Caption>
5959
Use the same image ratio and a similar length sizes for the content.
6060
</Caption>
6161
</Do>
6262
<Dont>
63-
<img src="https://github.com/primer/brand/assets/912236/0b8ffb2d-0753-4bdd-9165-0f30ec28a8c8" />
63+
<img src="https://github.com/primer/brand/assets/6951037/cffafadf-2e9d-47f0-a6db-6f89fb48fabe" />
6464
<Caption>
6565
Don't use different image ratios and a different length size for the
6666
content.
@@ -73,7 +73,7 @@ Cards typically appear in groups of three or four in desktop viewports. For smal
7373
<div>
7474
<CustomVideoPlayer
7575
width="100%"
76-
src="https://github.com/primer/brand/assets/912236/d8e76477-1b27-4be1-9bf5-d22186af8376"
76+
src="https://github.com/primer/brand/assets/6951037/a9ceec00-59c9-4471-a274-f516790f43c9"
7777
/>
7878
<Caption>
7979
Stack cards vertically so that the content has enough line length.
@@ -82,21 +82,21 @@ Cards typically appear in groups of three or four in desktop viewports. For smal
8282

8383
## Anatomy
8484

85-
![An image showing the card anatomy with an icon as a visual asset, a heading, a description and a CTA text in a vertical order.](https://github.com/primer/brand/assets/912236/633b83d8-4ea8-49bd-9d6c-45a1989060d9)
85+
![An image showing the card anatomy with an icon as a visual asset, a heading, a description and a CTA text in a vertical order.](https://github.com/primer/brand/assets/6951037/2ae395d0-227d-4794-8e0b-f709a431e636)
8686

8787
### Visual asset
8888

8989
The visual asset is optional and can be an image or an icon. It can be used to provide a visual cue to the user about the content of the card. To avoid visual noise, we recommend using only one icon or image, but not both in the same card.
9090

91-
![An image showing two cards, one with an Icon and another with an Image as the visual assets options.](https://github.com/primer/brand/assets/912236/be65583b-f6f0-438a-8d2c-6b7a0a9fd3de)
91+
![An image showing two cards, one with an Icon and another with an Image as the visual assets options.](https://github.com/primer/brand/assets/6951037/21623e82-2ea5-499a-a78f-82b09915af16)
9292

9393
<DoDontContainer>
9494
<Do>
95-
<img src="https://github.com/primer/brand/assets/912236/863de864-5216-44bf-8b35-430821da8853" />
95+
<img src="https://github.com/primer/brand/assets/6951037/e5494fd3-76b1-45fd-8aa7-4acfe834b159" />
9696
<Caption>Use only one visual asset per card.</Caption>
9797
</Do>
9898
<Dont>
99-
<img src="https://github.com/primer/brand/assets/912236/9acdde97-42e3-4a7a-8102-b9be5e3c05fc" />
99+
<img src="https://github.com/primer/brand/assets/6951037/bc29b10b-ee0b-421d-8bc4-0a95fad3791b" />
100100
<Caption>Don't use both icon and image as the visual asset.</Caption>
101101
</Dont>
102102
</DoDontContainer>
@@ -105,7 +105,7 @@ The visual asset is optional and can be an image or an icon. It can be used to p
105105

106106
The label can be used to indicate the type of content or its status. For example, use it to indicate that the content is `new` or that it is a `beta` feature. The label is optional and can be used along with a visual asset.
107107

108-
![An image showing two cards, one with a Label and another one with Label and Icon.](https://github.com/primer/brand/assets/912236/2d84fe89-2735-451e-9d1f-9a2f0297e7b5)
108+
![An image showing two cards, one with a Label and another one with Label and Icon.](https://github.com/primer/brand/assets/6951037/3e16bb51-9e19-4a98-a9c2-e289d4bf540c)
109109

110110
### Heading
111111

@@ -119,6 +119,12 @@ The description is an optional short text that extends the information provided
119119

120120
The call to action label indicates the action or resource the card links to. It defaults to "Learn more".
121121

122+
## Options
123+
124+
### Border
125+
126+
Card offers a variation with a border. Border is disabled by default.
127+
122128
## Related components
123129

124130
- [Pillar](/components/Pillar): To display related content with less visual emphasis.

‎apps/docs/content/components/Prose.mdx

+8-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {Prose} from '@primer/react-brand'
1616

1717
The `Prose` component renders native HTML elements with Primer Brand styling. `Prose` doesn't sanitize the input data. We recommend sanitizing the data before passing it into `Prose`.
1818

19-
`Prose` currently supports styling the following HTML elements: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<p>`, `<strong>`, `<em>`, `<a>`, `<ul>`, `<ol>`, `<li>`, `<img>`, and `<div>`.
19+
`Prose` currently supports styling the following HTML elements: `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<p>`, `<strong>`, `<em>`, `<a>`, `<ul>`, `<ol>`, `<li>`, `<img>`, `<blockquote>`, `<code>`, `<figure>`, `<figcaption>` and `<div>`.
2020

2121
</Note>
2222

@@ -27,7 +27,12 @@ The `Prose` component renders native HTML elements with Primer Brand styling. `P
2727
html={`
2828
<h2>Heading level 2</h2>
2929
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus ipsum, consectetur convallis diam pretium quis. Proin ut felis ut eros tristique tincidunt.</p>
30-
<blockquote>Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam, sit amet auctor leo. Aliquam erat volutpat.</blockquote>
30+
<figure>
31+
<blockquote>
32+
<p>Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam, sit amet auctor leo. Aliquam erat volutpat.</p>
33+
<figcaption>Lisa Vanderschuit, Engineering Program Manager, Shopify</figcaption>
34+
</blockquote>
35+
</figure>
3136
<p>Integer pellentesque pretium nulla viverra molestie. Praesent quis pretium sapien. Sed convallis eget lectus et pulvinar:</p>
3237
<ul>
3338
<li>
@@ -57,6 +62,7 @@ The `Prose` component renders native HTML elements with Primer Brand styling. `P
5762
</li>
5863
<li>Quisque eu tortor suscipit, congue quam in, bibendum tellus.</li>
5964
</ol>
65+
<p><code>for-each-ref</code> is extremely useful for listing references, finding which references point at a given object (with <code>--points-at</code>), which references have been merged into a given branch (with <code>--merged</code>), or which references contain a given commit (with <code>--contains</code>).</p>
6066
<h6>Heading level 6</h6>
6167
<p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
6268
<p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>

‎apps/docs/scripts/components-with-animation.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ export const supportedComponents = [
66
'ComparisonTable',
77
'FAQ',
88
'Heading',
9-
'Image',
109
'Label',
10+
'Image',
1111
'Pillar',
1212
'SectionIntro',
1313
'Stack',
1414
'Testimonial',
1515
'Text',
1616
'Timeline',
1717
'Animate',
18-
'River',
1918
'RiverBreakout',
19+
'River',
2020
]

‎apps/storybook/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @primer/brand-storybook
22

3+
## 0.27.1
4+
35
## 0.27.0
46

57
## 0.26.0

‎apps/storybook/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@primer/brand-storybook",
3-
"version": "0.27.0",
3+
"version": "0.27.1",
44
"private": true,
55
"description": "Primer Brand Storybook",
66
"keywords": [

‎packages/design-tokens/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @primer/brand-primitives
22

3+
## 0.27.1
4+
35
## 0.27.0
46

57
### Minor Changes

‎packages/design-tokens/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@primer/brand-primitives",
3-
"version": "0.27.0",
3+
"version": "0.27.1",
44
"description": "Color, spacing, and typography primitives for the Primer Brand Design System ",
55
"keywords": [
66
"primer",

‎packages/design-tokens/src/tokens/functional/components/prose/base.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@
66
},
77
"img": {
88
"spacing": {
9-
"value": "var(--brand-size-48)"
9+
"value": "var(--base-size-48)"
10+
}
11+
},
12+
"blockquote": {
13+
"spacing": {
14+
"value": "var(--base-size-24)"
1015
}
1116
}
1217
}

‎packages/e2e/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @primer/brand-e2e
22

3+
## 0.27.1
4+
35
## 0.27.0
46

57
## 0.26.0

‎packages/e2e/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@primer/brand-e2e",
3-
"version": "0.27.0",
3+
"version": "0.27.1",
44
"private": true,
55
"description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
66
"keywords": [

‎packages/fonts/CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# @primer/brand-fonts
22

3+
## 0.27.1
4+
35
## 0.27.0
46

57
## 0.26.0

‎packages/fonts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@primer/brand-fonts",
3-
"version": "0.27.0",
3+
"version": "0.27.1",
44
"private": true,
55
"description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
66
"keywords": [

‎packages/react/CHANGELOG.md

+20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
# @primer/react-brand
22

3+
## 0.27.1
4+
5+
### Patch Changes
6+
7+
- [#449](https://github.com/primer/brand/pull/449) [`d009559`](https://github.com/primer/brand/commit/d0095592854bab08dd2fd04dfb54b67ce12b0444) Thanks [@rezrah](https://github.com/rezrah)! - Fixed bug in `AnchorNav` whereby the active link would not be highlighted when the page first loads.
8+
9+
- [#443](https://github.com/primer/brand/pull/443) [`6a7dc95`](https://github.com/primer/brand/commit/6a7dc9577fccd6e74169916497938a4f9e302911) Thanks [@josepmartins](https://github.com/josepmartins)! - Fixes bug in the `Testimonial` component that prevents avatar get squished
10+
11+
- [#440](https://github.com/primer/brand/pull/440) [`4c0bd32`](https://github.com/primer/brand/commit/4c0bd32cc10a9e9f4b6d1845188da0052314c5fa) Thanks [@rezrah](https://github.com/rezrah)! - Added `hideUntilSticky` option to AnchorNav component. This will visibly hide the `AnchorNav` until it becomes sticky.
12+
13+
```jsx
14+
<AnchorNav hideUntilSticky>
15+
<AnchorNav.Link href="#section">...</AnchorNav.Link>
16+
</AnchorNav>
17+
```
18+
19+
For any additional client-side customization, a `data-sticky` attribute is available and will be set to `true` when the `AnchorNav` is sticky.
20+
21+
- [#447](https://github.com/primer/brand/pull/447) [`4803d21`](https://github.com/primer/brand/commit/4803d2129ab4d0b5bb0b0d957010c203ffeb7c96) Thanks [@rezrah](https://github.com/rezrah)! - Reduced `large` button text size to `20px`.
22+
323
## 0.27.0
424

525
### Minor Changes

‎packages/react/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@primer/react-brand",
3-
"version": "0.27.0",
3+
"version": "0.27.1",
44
"description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
55
"keywords": [
66
"primer",

‎packages/react/src/Prose/Prose.features.stories.tsx

+7-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@ export default {
1818
const ExampleHtmlMarkup = `
1919
<h2>Heading level 2</h2>
2020
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor lectus ipsum, consectetur convallis diam pretium quis. Proin ut felis ut eros tristique tincidunt.</p>
21-
<blockquote>Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam, sit amet auctor leo. Aliquam erat volutpat.</blockquote>
21+
<figure>
22+
<blockquote>
23+
<p>Nulla ac odio eu magna hendrerit porta. Donec nec eros quis tortor tincidunt vulputate. Aenean id pharetra diam, sit amet auctor leo. Aliquam erat volutpat.</p>
24+
<figcaption>Lisa Vanderschuit, Engineering Program Manager, Shopify</figcaption>
25+
</blockquote>
26+
</figure>
2227
<p>Integer pellentesque pretium nulla viverra molestie. Praesent quis pretium sapien. Sed convallis eget lectus et pulvinar:</p>
2328
<ul>
2429
<li>
@@ -50,6 +55,7 @@ const ExampleHtmlMarkup = `
5055
</ol>
5156
<h6>Heading level 6</h6>
5257
<p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue.</p>
58+
<p><code>for-each-ref</code> is extremely useful for listing references, finding which references point at a given object (with <code>--points-at</code>), which references have been merged into a given branch (with <code>--merged</code>), or which references contain a given commit (with <code>--contains</code>).</p>
5359
<p>Nunc velit odio, posuere eu felis eget, consectetur fermentum nisi. Aenean tempor odio id ornare ultrices. Quisque blandit condimentum tellus, semper efficitur sapien dapibus nec. </p>
5460
`
5561

0 commit comments

Comments
 (0)