Merge branch 'main' into breadcrumb-docs

.changeset/allow-kings-red.md

@@ -0,0 +1,13 @@
+---
+'@primer/react-brand': patch
+---
+
+Added new `fullWidth` prop to `Card` component for easier placement in narrow viewports. This elimates the requirement for end-users to author additional custom CSS to achieve the same effect.
+
+```jsx
+<Card fullWidth href="https://github.com">
+  <Card.Image />
+  <Card.Heading />
+  <Card.Description />
+</Card>
+```

.changeset/beige-kings-allow.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Improved keyboard navigation for tab lists in the `FAQ Groups` component. Now features focus trapping, and `up` and `down` keypress navigation as specified in the ARIA tab panel pattern.

.changeset/blue-tools-move.md

@@ -0,0 +1,9 @@
+---
+'@primer/react-brand': patch
+---
+
+In `Bento`, the `Bento.Visual` will now respect the aspect ratio of the original image instead of cropping it.
+
+Individual Bento sections will now expand beyond their initial size to fit the content within them.
+
+If you've previously used this component, please verify that this change doesn't alter the flow of your document.

.changeset/fast-rice-switch.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Resolved an issue with the `AnchorNav` component where focus would become trapped on mobile

.changeset/greet-hip-pumas.md

@@ -0,0 +1,8 @@
+---
+'@primer/react-brand': patch
+---
+
+Updated all instances of `<Text />` in River components to use `muted` color instead of `default` by default, for improved visual hierarchy.
+
+> **Warning**
+> This is a visual breaking change to the `River` component. This can lead to reduced contrast in some situations, so please review all usages to ensure minimum contrast requirements are met.

.changeset/hip-pumas-greet.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `idle` speed to LogoSuite marquee animation

.changeset/pink-wolves-sniff.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Added raster image support to `LogoSuite` component

.changeset/share-wild-queens.md

@@ -0,0 +1,19 @@
+---
+'@primer/react-brand': patch
+---
+
+Added `pageAttributesBuilder` prop to `Pagination` component to enable forwarding of custom data attributes to paged items.
+
+```jsx live
+<Pagination
+  pageCount={3}
+  currentPage={1}
+  pageAttributesBuilder={n => {
+    return {
+      'data-custom-attribute': `custom-attribute-${n}`,
+    }
+  }}
+/>
+```
+
+:link: [See documentation for more details](https://primer.style/brand/components/Pagination#custom-data-attributes)

.changeset/wild-queens-share.md

@@ -0,0 +1,5 @@
+---
+"@primer/react-brand": patch
+---
+
+Fixed line wrapping in `SubNav.Heading`

.github/workflows/ci.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/deploy_docs.yml

@@ -29,7 +29,7 @@ jobs:
     # SHA for security hardening. Points at last verified HEAD of main branch.
     uses: primer/.github/.github/workflows/deploy.yml@rezrah/fix-prod-deployment
     with:
-      node_version: 16
+      node_version: 18
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..
       build: npm run build:lib && npm run build:docs
       output_dir: apps/docs/public/

.github/workflows/deploy_docs_preview.yml

@@ -17,7 +17,7 @@ jobs:
     # SHA for security hardening. Points at last verified HEAD of main branch.
     uses: primer/.github/.github/workflows/deploy_preview.yml@cd223835608ca5e9401e0ffe6081f6d2fcc912f3
     with:
-      node_version: 16
+      node_version: 18
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..
       build: npm run build && npm run build:docs:preview && npm run build:storybook:preview
       output_dir: apps/docs/public/

.github/workflows/deploy_docs_preview_forks.yml

@@ -17,7 +17,7 @@ jobs:
     # SHA for security hardening. Points at last verified HEAD of main branch.
     uses: primer/.github/.github/workflows/deploy_preview.yml@cd223835608ca5e9401e0ffe6081f6d2fcc912f3
     with:
-      node_version: 16
+      node_version: 18
       install: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps && cd ..
       build: npm run build && npm run build:docs:preview && npm run build:storybook:preview
       output_dir: apps/docs/public/

.github/workflows/integration_test_astro.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: 18
 
       - name: Caching dependencies
         uses: actions/cache@v2
@@ -83,7 +83,7 @@ jobs:
 
       - name: Installing local build
         run: |
-          cd ${{env.ASTRO_FOLDER}} 
+          cd ${{env.ASTRO_FOLDER}}
           cp ../packages/react/primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz ./
           npm install primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz
 

.github/workflows/integration_test_cra.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Caching dependencies
         uses: actions/cache@v2
@@ -81,7 +81,7 @@ jobs:
 
       - name: Installing local build
         run: |
-          cd ${{env.CRA_FOLDER}} 
+          cd ${{env.CRA_FOLDER}}
           cp ../packages/react/primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz ./
           npm install primer-react-brand-${{ steps.package-version.outputs.current-version}}.tgz
 

.github/workflows/integration_test_nextjs.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '18'
+          node-version: 18
 
       - name: Caching dependencies
         uses: actions/cache@v2

.github/workflows/release_canary.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies
         run: npm ci

.github/workflows/release_candidate.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies
         run: npm ci
@@ -75,7 +75,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies
         run: npm ci

.github/workflows/ui_test_accessibility.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/ui_test_primitives_diff.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -31,18 +31,18 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
 
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps
-
       - name: Install dependencies (reference)
-        run: pushd temp-main; npm ci --legacy-peer-deps && cd apps/docs && npm ci --legacy-peer-deps; popd
+        run: pushd temp-main; npm ci --legacy-peer-deps; popd
 
-      - name: Build
-        run: npm run build --workspace=packages/design-tokens
+      - name: Install dependencies
+        run: npm ci --legacy-peer-deps
 
       - name: Build (reference)
         run: pushd temp-main; npm run build --workspace=packages/design-tokens; popd
 
+      - name: Build
+        run: npm run build --workspace=packages/design-tokens
+
       - name: Export diff
         run: |
           diff -r -y --width=300 -B -I '*' -I 'Generated' --suppress-common-lines temp-main/packages/design-tokens/lib/design-tokens/css packages/design-tokens/lib/design-tokens/css  | tail -n +2 > diff.txt

.github/workflows/update_visual_snapshots.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Cache dependencies
         uses: actions/cache@v2

.github/workflows/visual_test_storybook.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: '16'
+          node-version: 18
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -66,15 +66,15 @@ jobs:
 
             Please review the differences by using the test artifacts to ensure that the changes were intentional.
 
-            Artifacts can be downloaded and reviewed locally. 
+            Artifacts can be downloaded and reviewed locally.
 
             Download links are available at the bottom of the workflow summary screen.
 
             ##### Example:
             ![artifacts section of workflow run](https://user-images.githubusercontent.com/13340707/181026915-2bda8a90-58e3-40ef-a2f6-c9c4af6e9c4a.png)
 
             If the changes are expected, please run `npm run test:visual:update-snapshots` to replace the previous fixtures.
-            </details> 
+            </details>
 
             [Review visual differences](https://github.com/primer/brand/actions/runs/${{ github.run_id }})
 

apps/docs/content/components/Card/react.mdx

@@ -34,6 +34,19 @@ The default card displays a heading and description. The link text defaults to `
 </Card>
 ```
 
+### Minimal
+
+The `minimal` card variant applies alternative presentation to the default card.
+
+```jsx live
+<Card href="https://github.com" variant="minimal">
+  <Card.Heading>Collaboration is the key to DevOps success</Card.Heading>
+  <Card.Description>
+    Everything you need to know about getting started with GitHub Actions.
+  </Card.Description>
+</Card>
+```
+
 ### Cta text
 
 The cta text defaults to `Learn more` and can be customized using the `ctaText` component.
@@ -225,6 +238,7 @@ Use the `Stack` component to stack multiple cards horizontally or vertically.
 | ------------------ | --------- | ----------- | -------- | ---------------------------------------------------------------- |
 | `ctaText`          | `string`  | `Read more` | `false`  | Label of the link at the bottom of the card                      |
 | `disableAnimation` | `boolean` | `false`     | `false`  | A flag to disable the default hover animation effect of the card |
+| `fullWidth`        | `boolean` | `false`     | `false`  | A flag to optionally fill the width of the parent container      |
 | `hasBorder`        | `boolean` | `false`     | `false`  | A flag used to provide a border to the card                      |
 | `href`             | `string`  |             | `true`   | URL to the card content                                          |
 

apps/docs/content/components/Image/react.mdx

@@ -7,6 +7,7 @@ description: Use the image component to display a graphical representation.
 ---
 
 import ComponentLayout from '../../../src/layouts/component-layout'
+import {ImageBorderRadiusOptions} from '@primer/react-brand'
 export default ComponentLayout
 
 import {Label} from '@primer/react'
@@ -99,6 +100,50 @@ The `height` prop can be used to set the height of the image. This can be used a
 />
 ```
 
+### Border radius
+
+The `borderRadius` prop can be used to apply rounded corners to images using preset values.
+
+```jsx live
+<Stack direction="horizontal">
+  <Image
+    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    alt="placeholder, blank area with an off-white background color"
+    height={100}
+    width={100}
+    borderRadius="small"
+  />
+  <Image
+    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    alt="placeholder, blank area with an off-white background color"
+    height={100}
+    width={100}
+    borderRadius="medium"
+  />
+  <Image
+    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    alt="placeholder, blank area with an off-white background color"
+    height={100}
+    width={100}
+    borderRadius="large"
+  />
+  <Image
+    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    alt="placeholder, blank area with an off-white background color"
+    height={100}
+    width={100}
+    borderRadius="xlarge"
+  />
+  <Image
+    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    alt="placeholder, blank area with an off-white background color"
+    height={100}
+    width={100}
+    borderRadius="full"
+  />
+</Stack>
+```
+
 ### Width
 
 The `width` prop can be used to set the width of the image. This can be used along side the `aspectRatio` prop to create a responsive image the same size as other images.
@@ -116,15 +161,16 @@ The `width` prop can be used to set the width of the image. This can be used alo
 
 ### Image <Label>Required</Label>
 
-| name          | type                                              | default     | required | description                                                                                                                                                               |
-| ------------- | ------------------------------------------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `src`         | `string`                                          |             | `true`   | Specifies the path to the image                                                                                                                                           |
-| `alt`         | `string`                                          |             | `true`   | Specifies a text value explaining the nature of the image for users of assistive technology                                                                               |
-| `as`          | `img`, `picture`                                  | `img`       | `false`  | Specification to create a picture component                                                                                                                               |
-| `sources`     | `{srcset: string, media: string}[]`               |             | `false`  | When picture is specified in the `as` prop sources allows you to set the source elements.                                                                                 |
-| `aspectRatio` | `'1:1'`, `'16:9'`, `'16:10'`, `'4:3'`, `'custom'` | `undefined` | `false`  | Sets the image aspect ratio. A custom ratio can be provided in the design tokens.                                                                                         |
-| `height`      | `number`                                          |             | `false`  | The height of the image element or its container if it has an aspect ratio                                                                                                |
-| `width`       | `number`                                          |             | `false`  | The width of the image element or its container if it has an aspect ratio                                                                                                 |
-| `loading`     | `eager`, `lazy`                                   | `eager`     | `false`  | The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them. |
-| `decoding`    | `sync`, `async`, `auto`                           | `sync`      | `false`  | Sets the image decoding strategy. Representing a hint given to the browser on how it should decode the image.                                                             |
-| `className`   | `string`                                          |             | `false`  | Sets a custom CSS class                                                                                                                                                   |
+| name           | type                                                                       | default     | required | description                                                                                                                                                               |
+| -------------- | -------------------------------------------------------------------------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `src`          | `string`                                                                   |             | `true`   | Specifies the path to the image                                                                                                                                           |
+| `alt`          | `string`                                                                   |             | `true`   | Specifies a text value explaining the nature of the image for users of assistive technology                                                                               |
+| `as`           | `img`, `picture`                                                           | `img`       | `false`  | Specification to create a picture component                                                                                                                               |
+| `sources`      | `{srcset: string, media: string}[]`                                        |             | `false`  | When picture is specified in the `as` prop sources allows you to set the source elements.                                                                                 |
+| `aspectRatio`  | `'1:1'`, `'16:9'`, `'16:10'`, `'4:3'`, `'custom'`                          | `undefined` | `false`  | Sets the image aspect ratio. A custom ratio can be provided in the design tokens.                                                                                         |
+| `borderRadius` | <PropTableValues values={[...ImageBorderRadiusOptions]} commaSeparated  /> | `undefined` | `false`  | Applies a system-level border radius value to the Image.                                                                                                                  |
+| `height`       | `number`                                                                   |             | `false`  | The height of the image element or its container if it has an aspect ratio                                                                                                |
+| `width`        | `number`                                                                   |             | `false`  | The width of the image element or its container if it has an aspect ratio                                                                                                 |
+| `loading`      | `eager`, `lazy`                                                            | `eager`     | `false`  | The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them. |
+| `decoding`     | `sync`, `async`, `auto`                                                    | `sync`      | `false`  | Sets the image decoding strategy. Representing a hint given to the browser on how it should decode the image.                                                             |
+| `className`    | `string`                                                                   |             | `false`  | Sets a custom CSS class                                                                                                                                                   |