Merge branch 'main' into rezrah/antialiased-components

primer · Jan 10, 2025 · 0a59583 · 0a59583
2 parents 665330b + 75f0413
commit 0a59583
Show file tree

Hide file tree

Showing 20 changed files with 87 additions and 76 deletions.
diff --git a/.changeset/cold-ears-breathe.md b/.changeset/cold-ears-breathe.md
diff --git a/.changeset/early-roses-pump.md b/.changeset/early-roses-pump.md
diff --git a/.changeset/gorgeous-frogs-buy.md b/.changeset/gorgeous-frogs-buy.md
diff --git a/.changeset/hot-laws-hug.md b/.changeset/hot-laws-hug.md
diff --git a/.changeset/proud-students-collect.md b/.changeset/proud-students-collect.md
diff --git a/.github/workflows/integration_test_remix.yml b/.github/workflows/integration_test_remix.yml
@@ -19,7 +19,7 @@ jobs:
       labels: ubuntu-latest-16-cores
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up Node
         uses: actions/setup-node@v4
@@ -44,7 +44,7 @@ jobs:
         run: cd ./packages/react && npm pack
 
       - name: Configuring Remix.run
-        run: npx create-remix@latest ./${{env.TEST_FOLDER}} --yes
+        run: npx create-remix@latest ./${{env.TEST_FOLDER}} --yes --debug --no-git-init
 
       - name: Retrieving package version
         id: package-version

diff --git a/apps/docs/content/components/VideoPlayer.mdx b/apps/docs/content/components/VideoPlayer.mdx
@@ -17,7 +17,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer title="GitHub media player">
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -29,7 +29,7 @@ import {VideoPlayer} from '@primer/react-brand'
   poster="/brand/assets/example-poster.png"
   title="GitHub media player"
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -38,7 +38,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer showBranding={false} title="GitHub media player">
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -47,7 +47,7 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer visuallyHiddenTitle title="GitHub media player">
-  <VideoPlayer.Source src="/brand/assets/example.mp4" />
+  <VideoPlayer.Source src="https://primer.github.io/brand/assets/example.mp4" />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -64,7 +64,10 @@ import {VideoPlayer} from '@primer/react-brand'
   showVolumeControl={false}
   showFullScreenButton={false}
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://primer.github.io/brand/assets/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -73,7 +76,10 @@ import {VideoPlayer} from '@primer/react-brand'
 
 ```jsx live
 <VideoPlayer title="GitHub media player" showControlsWhenPaused={false}>
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://primer.github.io/brand/assets/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -87,7 +93,10 @@ import {VideoPlayer} from '@primer/react-brand'
   showBranding={false}
   showControlsWhenPaused={false}
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://primer.github.io/brand/assets/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -99,7 +108,10 @@ import {VideoPlayer} from '@primer/react-brand'
   title="GitHub media player"
   playIcon={() => <PlayIcon size={96} />}
 >
-  <VideoPlayer.Source src="/brand/assets/example.mp4" type="video/mp4" />
+  <VideoPlayer.Source
+    src="https://primer.github.io/brand/assets/example.mp4"
+    type="video/mp4"
+  />
   <VideoPlayer.Track src="/brand/assets/example.vtt" default />
 </VideoPlayer>
 ```
@@ -111,7 +123,7 @@ The `VideoPlayer` component exposes a `useVideo` hook that can be used to contro
 Full documentation for the `useVideo` hook can be found [below](#usevideo-context).
 
 ```tsx live
-() => {
+;() => {
   const MyVideoPlayer = () => {
     const {isPlaying, togglePlaying, seek} = useVideo()
 
@@ -127,7 +139,7 @@ Full documentation for the `useVideo` hook can be found [below](#usevideo-contex
           showFullScreenButton={false}
         >
           <VideoPlayer.Source
-            src="/brand/assets/example.mp4"
+            src="https://primer.github.io/brand/assets/example.mp4"
             type="video/mp4"
           />
           <VideoPlayer.Track src="/brand/assets/example.vtt" default />

diff --git a/apps/storybook/CHANGELOG.md b/apps/storybook/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @primer/brand-storybook
 
+## 0.45.1
+
 ## 0.45.0
 
 ## 0.44.1

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-storybook",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "private": true,
   "description": "Primer Brand Storybook",
   "keywords": [

diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @primer/brand-primitives
 
+## 0.45.1
+
 ## 0.45.0
 
 ### Patch Changes

diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-primitives",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "description": "Color, spacing, and typography primitives for the Primer Brand Design System  ",
   "keywords": [
     "primer",

diff --git a/packages/e2e/CHANGELOG.md b/packages/e2e/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @primer/brand-e2e
 
+## 0.45.1
+
 ## 0.45.0
 
 ## 0.44.1

diff --git a/packages/e2e/package.json b/packages/e2e/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-e2e",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "private": true,
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [

diff --git a/packages/fonts/CHANGELOG.md b/packages/fonts/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @primer/brand-fonts
 
+## 0.45.1
+
 ## 0.45.0
 
 ## 0.44.1

diff --git a/packages/fonts/package.json b/packages/fonts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-fonts",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "private": true,
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,50 @@
 # @primer/react-brand
 
+## 0.45.1
+
+### Patch Changes
+
+- [#880](https://github.com/primer/brand/pull/880) [`bfe40610`](https://github.com/primer/brand/commit/bfe4061068a8149fe8b6b7ec498fe61328729d05) Thanks [@rezrah](https://github.com/rezrah)! - Increased border radius of `Card` from `large` (`16px`) to `xlarge` (`24px`)
+
+- [#878](https://github.com/primer/brand/pull/878) [`d9183796`](https://github.com/primer/brand/commit/d918379698bacaeb856067107d9ac59615f146a2) Thanks [@rezrah](https://github.com/rezrah)! - Added `leadingComponent` slot to `SectionIntro` for inserting arbitrary visuals and JSX above the heading.
+
+  ```jsx
+  <SectionIntro leadingComponent={() => <img src="leading-visual.png" alt="description of your leading visual" />}>
+    <SectionIntro.Heading>...</SectionIntro.Heading>
+    <SectionIntro.Description>...</SectionIntro.Description>
+    <SectionIntro.Link>...</SectionIntro.Link>
+  </SectionIntro>
+  ```
+
+  🔗 [See Storybook example](https://primer.style/brand/storybook?path=/story/components-sectionintro-features--leading-component)
+
+- [#880](https://github.com/primer/brand/pull/880) [`bfe40610`](https://github.com/primer/brand/commit/bfe4061068a8149fe8b6b7ec498fe61328729d05) Thanks [@rezrah](https://github.com/rezrah)! - Added `hasBorder` prop to `Pillar` for alternative presentation
+
+  🔗 [See Storybook for an example](https://primer.style/brand/storybook/?path=/story/components-pillar-features--with-border)
+
+- [#703](https://github.com/primer/brand/pull/703) [`621d8ee2`](https://github.com/primer/brand/commit/621d8ee25e15a4a67281be5e4ec6116fa89a6fa0) Thanks [@joshfarrant](https://github.com/joshfarrant)! - `VideoPlayer` accessibility improvements
+
+  - Improved contrast of play overlay focus styles.
+  - Improved contrast of controls and title.
+  - The title bar now hides while the video is playing.
+  - The controls bar now hides when the cursor or keyboard focus leaves the video player, or after a few seconds of inactivity, and reappears when the cursor or keyboard focus returns.
+
+- [#862](https://github.com/primer/brand/pull/862) [`eba0c530`](https://github.com/primer/brand/commit/eba0c53043133239006807a2694b05e9852da169) Thanks [@danielguillan](https://github.com/danielguillan)! - Added image support to `Pillar` component
+
+  Usage example:
+
+  ```jsx
+  <Pillar>
+    <Pillar.Image src="/path/to/your/image.jpg" alt="Required alternative text" />
+    <Pillar.Heading>Code search & code view</Pillar.Heading>
+    <Pillar.Description>
+      Enables you to rapidly search, navigate, and understand code, right from GitHub.com.
+    </Pillar.Description>
+  </Pillar>
+  ```
+
+  🔗 [See Storybook for an example](https://primer.style/brand/storybook/?path=/story/components-pillar-features--with-image)
+
 ## 0.45.0
 
 ### Minor Changes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/react-brand",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "description": "Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.",
   "keywords": [
     "primer",

diff --git a/packages/react/src/Card/Card.module.css b/packages/react/src/Card/Card.module.css
@@ -144,7 +144,7 @@
 
 .Card--skew {
   height: 100%;
-  border-radius: var(--brand-borderRadius-large);
+  border-radius: var(--brand-borderRadius-xlarge);
   overflow: hidden;
 }
 
@@ -157,7 +157,7 @@
 }
 
 .Card__skew-bounding {
-  border-radius: var(--brand-borderRadius-large);
+  border-radius: var(--brand-borderRadius-xlarge);
   position: relative;
   overflow: hidden;
   z-index: 1;

diff --git a/packages/repo-configs/CHANGELOG.md b/packages/repo-configs/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @primer/brand-config
 
+## 0.45.1
+
 ## 0.45.0
 
 ## 0.44.1

diff --git a/packages/repo-configs/package.json b/packages/repo-configs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-config",
-  "version": "0.45.0",
+  "version": "0.45.1",
   "private": true,
   "description": "General-purpose configurations for maintaining Primer Brand",
   "homepage": "https://primer.style/brand",