@primer/react-brand 0.69.1-rc.0a4e5ff5 → 0.70.0-rc.11ae3568

package/docs/components/SectionIntro/react.md

@@ -0,0 +1,107 @@
+---
+title: Section intro
+description: Use the section intro component to provide a title, optional description and link to a new section in the page.
+keywords: ['heading', 'intro', 'section']
+ready: true
+figma: https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=3891%3A17104&t=j6zvLXblgsO36Wmu-11
+source: https://github.com/primer/brand/blob/main/packages/react/src/SectionIntro/SectionIntro.tsx
+storybook: '/brand/storybook/?path=/story/components-sectionintro--playground'
+---
+
+```js
+import {SectionIntro} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<section>
+  <SectionIntro>
+    <SectionIntro.Label>Label</SectionIntro.Label>
+    <SectionIntro.Heading>Focus on solving bigger problems</SectionIntro.Heading>
+    <SectionIntro.Description>
+      Spend less time creating boilerplate and repetitive code patterns, and more time on what matters: building great
+      software. Write a comment describing the logic you want and GitHub Copilot will immediately suggest code to
+      implement the solution.
+    </SectionIntro.Description>
+    <SectionIntro.Link href="#">Explore docs</SectionIntro.Link>
+  </SectionIntro>
+</section>
+```
+
+### Alignment
+
+The content alignment can be changed using the `align` prop on the root `SectionIntro`. This can be configured to either `start` or `center`.
+
+```jsx
+<section>
+  <SectionIntro align="center">
+    <SectionIntro.Label>Label</SectionIntro.Label>
+    <SectionIntro.Heading>Focus on solving bigger problems</SectionIntro.Heading>
+    <SectionIntro.Description>
+      Spend less time creating boilerplate and repetitive code patterns, and more time on what matters: building great
+      software. Write a comment describing the logic you want and GitHub Copilot will immediately suggest code to
+      implement the solution.
+    </SectionIntro.Description>
+    <SectionIntro.Link href="#">Explore docs</SectionIntro.Link>
+  </SectionIntro>
+</section>
+```
+
+## Component props
+
+### SectionIntro `Required`
+
+| name        | type                       | default     | required | description                                                   |
+| ----------- | -------------------------- | ----------- | -------- | ------------------------------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to include within the section intro component         |
+| `align`     | `start`, `center`          | `start`     | `true`   | The layout applied to the content wihin the section component |
+| `className` | `string`                   |             | `false`  | SectionIntro custom class                                     |
+| `fullWidth` | `boolean`                  |             | `false`  | Fills available space                                         |
+
+### SectionIntro.Label
+
+Optional node that can be used to provide a label for the section.
+
+| name             | type                 | default   | required | description                                  |
+| ---------------- | -------------------- | --------- | -------- | -------------------------------------------- |
+| `children`       | `ReactNode`          |           | `true`   | Content to be displayed inside the label     |
+| `animate`        | `boolean`            | `false`   | `false`  | Enables the cursor animation                 |
+| `animationDelay` | `number`             | `1000`    | `false`  | Delay before the cursor animation starts     |
+| `variant`        | `'default', 'muted'` | `'muted'` | `false`  | Specify alternative text appearance          |
+| `className`      | `string`             |           | `false`  | Sets a custom class on the root of the label |
+| `id`             | `string`             |           | `false`  | Sets a custom id on the root of the label    |
+| `ref`            | `React.RefObject`    |           | `false`  | Forward a Ref to the underlying DOM node     |
+
+### SectionIntro.Heading `Required`
+
+Required node that is used to provide a heading for the section.
+
+| name        | type                       | default     | required | description                                           |
+| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
+| `className` | `string`                   |             | `false`  | Custom class name for the heading component           |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the heading component. |
+
+Forwards all props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.
+
+### SectionIntro.Description
+
+Optional node that can be used to provide a description for the section.
+
+| name       | type                       | default     | required | description                                                |
+| ---------- | -------------------------- | ----------- | -------- | ---------------------------------------------------------- |
+| `children` | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the section intro component |
+
+`id`, `className` and `ref` are forwarded by default to all children.
+
+### SectionIntro.Link
+
+Optional node that can be used to provide a link.
+
+| name        | type     | default     | required | description                             |
+| ----------- | -------- | ----------- | -------- | --------------------------------------- |
+| `className` | `string` | `undefined` | `false`  | Sets a custom class on the root element |
+
+`id`, `className` and `ref` are forwarded by default to all children.

package/docs/components/SectionIntroStacked/index.md

@@ -0,0 +1,226 @@
+---
+title: Section intro stacked
+description: Use this section intro component to provide a heading, link and itemized content in a stacked layout.
+keywords: ['heading', 'intro', 'section']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/SectionIntroStacked/SectionIntroStacked.tsx
+storybook: '/brand/storybook/?path=/story/components-sectionintrostacked--playground'
+---
+
+```js
+import {SectionIntroStacked} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<section>
+  <SectionIntroStacked>
+    <SectionIntroStacked.Heading>
+      <b>Over 90% of Fortune 100 companies and more than 150 million developers rely on GitHub</b> to deliver scalable,
+      reliable, and secure solutions for teams of all sizes.
+    </SectionIntroStacked.Heading>
+    <SectionIntroStacked.Link href="#">Explore GitHub</SectionIntroStacked.Link>
+    <SectionIntroStacked.Items>
+      <SectionIntroStacked.Item>
+        <b>Designed for developers</b>, GitHub offers seamless collaboration tools that make teamwork smarter, faster,
+        and more secure.
+      </SectionIntroStacked.Item>
+      <SectionIntroStacked.Item>
+        <b>Leverage GitHub Copilot to automate tasks</b>, and enhance productivity with smart, context-aware code
+        suggestions.
+      </SectionIntroStacked.Item>
+      <SectionIntroStacked.Item>
+        <b>GitHub Enterprise scales with your organization</b>, delivering the performance and security needed for teams
+        of any size.
+      </SectionIntroStacked.Item>
+    </SectionIntroStacked.Items>
+  </SectionIntroStacked>
+</section>
+```
+
+### With icon items
+
+```jsx
+<section>
+  <SectionIntroStacked>
+    <SectionIntroStacked.Heading>Unlock a passion for learning with GitHub.</SectionIntroStacked.Heading>
+    <SectionIntroStacked.Description>
+      Elevate your lessons with GitHub&#39;s advanced tools and provide students access to current industry practices.
+    </SectionIntroStacked.Description>
+    <SectionIntroStacked.Link href="#">Sign up now</SectionIntroStacked.Link>
+    <SectionIntroStacked.Items>
+      <SectionIntroStacked.Item>
+        <SectionIntroStacked.ItemIcon icon={CpuIcon} />
+        <SectionIntroStacked.ItemHeading>Enhance your technical curriculum</SectionIntroStacked.ItemHeading>
+        <SectionIntroStacked.ItemDescription>
+          Elevate your lessons with GitHub's advanced tools and provide students access to current industry practices.
+        </SectionIntroStacked.ItemDescription>
+      </SectionIntroStacked.Item>
+      <SectionIntroStacked.Item>
+        <SectionIntroStacked.ItemIcon icon={LightBulbIcon} />
+        <SectionIntroStacked.ItemHeading>Reinvigorate your teaching methods</SectionIntroStacked.ItemHeading>
+        <SectionIntroStacked.ItemDescription>
+          Use GitHub Classroom to automate feedback and manage coursework, which can make your sessions more dynamic and
+          interactive.
+        </SectionIntroStacked.ItemDescription>
+      </SectionIntroStacked.Item>
+      <SectionIntroStacked.Item>
+        <SectionIntroStacked.ItemIcon icon={HeartIcon} />
+        <SectionIntroStacked.ItemHeading>Boost collaboration across campus</SectionIntroStacked.ItemHeading>
+        <SectionIntroStacked.ItemDescription>
+          Make it easier for students and educators to collaborate on projects and assignments.
+        </SectionIntroStacked.ItemDescription>
+      </SectionIntroStacked.Item>
+    </SectionIntroStacked.Items>
+  </SectionIntroStacked>
+</section>
+```
+
+### GridLine variant
+
+Use `variant="gridline"` to apply an alternative visual style with horizontal and vertical borders.
+
+```jsx
+<section>
+  <SectionIntroStacked variant="gridline">
+    <SectionIntroStacked.Heading>Unlock a passion for learning with GitHub.</SectionIntroStacked.Heading>
+    <SectionIntroStacked.Description>
+      Elevate your lessons with GitHub&#39;s advanced tools and provide students access to current industry practices.
+    </SectionIntroStacked.Description>
+    <SectionIntroStacked.Link href="#">Sign up now</SectionIntroStacked.Link>
+    <SectionIntroStacked.Items>
+      <SectionIntroStacked.Item>
+        <SectionIntroStacked.ItemIcon icon={CpuIcon} />
+        <SectionIntroStacked.ItemHeading>Enhance your technical curriculum</SectionIntroStacked.ItemHeading>
+        <SectionIntroStacked.ItemDescription>
+          Elevate your lessons with GitHub's advanced tools and provide students access to current industry practices.
+        </SectionIntroStacked.ItemDescription>
+      </SectionIntroStacked.Item>
+      <SectionIntroStacked.Item>
+        <SectionIntroStacked.ItemIcon icon={LightBulbIcon} />
+        <SectionIntroStacked.ItemHeading>Reinvigorate your teaching methods</SectionIntroStacked.ItemHeading>
+        <SectionIntroStacked.ItemDescription>
+          Use GitHub Classroom to automate feedback and manage coursework, which can make your sessions more dynamic and
+          interactive.
+        </SectionIntroStacked.ItemDescription>
+      </SectionIntroStacked.Item>
+      <SectionIntroStacked.Item>
+        <SectionIntroStacked.ItemIcon icon={HeartIcon} />
+        <SectionIntroStacked.ItemHeading>Boost collaboration across campus</SectionIntroStacked.ItemHeading>
+        <SectionIntroStacked.ItemDescription>
+          Make it easier for students and educators to collaborate on projects and assignments.
+        </SectionIntroStacked.ItemDescription>
+      </SectionIntroStacked.Item>
+    </SectionIntroStacked.Items>
+  </SectionIntroStacked>
+</section>
+```
+
+## Component props
+
+### SectionIntroStacked `Required`
+
+| name        | type                       | default     | required | description                                           |
+| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to include within the section intro component |
+| `variant`   | `'default'`, `'gridline'`  | `'default'` | `false`  | Sets the visual variant of the component.             |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element               |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                  |
+| `animate`   | `AnimateProps`             |             | `false`  | Animation configuration for the component             |
+
+Forwards all standard HTML attributes for `<header>` elements.
+
+### SectionIntroStacked.Heading `Required`
+
+Required node that is used to provide a heading for the section.
+
+| name        | type                       | default     | required | description                                           |
+| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the heading component. |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element               |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                  |
+| `animate`   | `AnimateProps`             |             | `false`  | Animation configuration for the component             |
+
+Forwards all props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.
+
+### SectionIntroStacked.Link
+
+Optional node that can be used to provide a link.
+
+| name        | type                       | default     | required | description                             |
+| ----------- | -------------------------- | ----------- | -------- | --------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the link |
+| `href`      | `string`                   | `undefined` | `true`   | The URL that the link points to         |
+| `variant`   | `default`, `accent`        | `accent`    | `false`  | Visual style variant for the link       |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element    |
+
+Forwards most props from the Link component, but with a default `size` of `medium`.
+
+### SectionIntroStacked.Description
+
+Optional node that can be used to provide a short description.
+
+| name        | type                       | default     | required | description                                    |
+| ----------- | -------------------------- | ----------- | -------- | ---------------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the description |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element        |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element           |
+
+### SectionIntroStacked.Items `Required`
+
+Container for a list of items.
+
+| name        | type                       | default     | required | description                               |
+| ----------- | -------------------------- | ----------- | -------- | ----------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | `SectionIntroStacked.Item` components     |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element   |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element      |
+| `animate`   | `AnimateProps`             |             | `false`  | Animation configuration for the component |
+
+### SectionIntroStacked.Item `Required`
+
+Individual item within the items list.
+
+| name        | type                       | default     | required | description                                                                                                                                                                                                                            |
+| ----------- | -------------------------- | ----------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the item. Accepts plain text with optional `<b>` or `<em>` for emphasis, or `SectionIntroStacked.ItemIcon`, `SectionIntroStacked.ItemHeading`, and `SectionIntroStacked.ItemDescription` sub-components |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element                                                                                                                                                                                                |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                                                                                                                                                                                                   |
+
+### SectionIntroStacked.ItemIcon
+
+Optional icon displayed alongside item content.
+
+| name        | type     | default     | required | description                             |
+| ----------- | -------- | ----------- | -------- | --------------------------------------- |
+| `icon`      | `Icon`   | `undefined` | `true`   | The Octicon icon component to display   |
+| `color`     | `string` | `green`     | `false`  | Color variant for the icon background   |
+| `className` | `string` |             | `false`  | Sets a custom class on the root element |
+
+Forwards all props from the [Icon component](../Icon/index.md).
+
+### SectionIntroStacked.ItemHeading
+
+Optional heading for an item when using sub-components.
+
+| name        | type                       | default     | required | description                                |
+| ----------- | -------------------------- | ----------- | -------- | ------------------------------------------ |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the heading |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element    |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element       |
+
+Forwards all props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`. Defaults to `as="h3"`.
+
+### SectionIntroStacked.ItemDescription
+
+Optional description for an item when using sub-components.
+
+| name        | type                       | default     | required | description                                         |
+| ----------- | -------------------------- | ----------- | -------- | --------------------------------------------------- |
+| `children`  | `ReactNode`, `ReactNode[]` | `undefined` | `true`   | Content to be displayed inside the item description |
+| `className` | `string`                   |             | `false`  | Sets a custom class on the root element             |
+| `id`        | `string`                   |             | `false`  | Sets a custom id on the root element                |

package/docs/components/Statistic/index.md

@@ -0,0 +1,111 @@
+---
+title: Statistic
+description: Use the statistic component display concise numerical information
+keywords: ['number', 'percentage', 'value', 'metric']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/Statistic/Statistic.tsx
+storybook: '/brand/storybook/?path=/story/components-statistic--default'
+a11yReviewed: false
+---
+
+```js
+import {Statistic} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<Statistic>
+  <Statistic.Heading>+25%</Statistic.Heading>
+  <Statistic.Description>increase in developer speed</Statistic.Description>
+</Statistic>
+```
+
+### Boxed variant
+
+```jsx
+<Statistic variant="boxed">
+  <Statistic.Heading>+25%</Statistic.Heading>
+  <Statistic.Description>increase in developer speed</Statistic.Description>
+</Statistic>
+```
+
+### Sizes
+
+```jsx
+<Stack direction={{narrow: 'vertical', wide: 'horizontal'}}>
+  <Statistic size="small">
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+  <Statistic size="medium">
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+  <Statistic size="large">
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+</Stack>
+```
+
+### Padding
+
+```jsx
+<Stack direction={{narrow: 'vertical', wide: 'horizontal'}}>
+  <Statistic padding="condensed">
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+  <Statistic padding="normal">
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+  <Statistic padding="spacious">
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+  <Statistic
+    padding={{
+      narrow: 'condensed',
+      regular: 'normal',
+      wide: 'spacious',
+    }}
+  >
+    <Statistic.Heading>+25%</Statistic.Heading>
+    <Statistic.Description>increase in developer speed</Statistic.Description>
+  </Statistic>
+</Stack>
+```
+
+### Accent descriptions
+
+```jsx
+<Statistic>
+  <Statistic.Heading>+25%</Statistic.Heading>
+  <Statistic.Description variant="accent">increase in developer speed</Statistic.Description>
+</Statistic>
+```
+
+### Statistic
+
+| Name        | Type                                         |  Default  | Description                                           |
+| :---------- | :------------------------------------------- | :-------: | :---------------------------------------------------- |
+| `className` | `string`                                     |           | Sets a custom class on the root element               |
+| `children`  | `Statistic.Heading`, `Statistic.Description` |           | Content to be displayed within the component          |
+| `size`      | `StatisticSizes`                             | `'large'` | The size of the Statistic                             |
+| `padding`   | `StatisticSpacingValues`                     |  `'none'` | Adding padding to all internal sides of the component |
+
+### Statistic.Heading
+
+Forwards all the props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.
+
+### Statistic.Description
+
+| Name      | Type                               |   Default   | Description                          |
+| :-------- | :--------------------------------- | :---------: | :----------------------------------- |
+| `variant` | `'default' \| 'muted' \| 'accent'` | `'default'` | Visual presentation of the component |
+
+Forwards most props from the [Text component](../../typography/Text/index.md), including `size`.

package/docs/components/SubNav/index.md

@@ -0,0 +1,156 @@
+---
+title: Sub nav
+description: A sub nav is a secondary navigation element, typically positioned beneath a primary navigation.
+keywords: ['navigation', 'secondary', 'second level']
+ready: true
+source: https://github.com/primer/brand/blob/main/packages/react/src/SubNav/SubNav.tsx
+storybook: '/brand/storybook/?path=/story/components-subnav--default'
+---
+
+```js
+import {SubNav} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx
+<div style={{position: 'relative', height: 100, width: '100%'}}>
+  <SubNav>
+    <SubNav.Heading href="#">Features</SubNav.Heading>
+    <SubNav.Link href="#">Actions</SubNav.Link>
+    <SubNav.Link href="#">Packages</SubNav.Link>
+    <SubNav.Link href="#" aria-current="page">
+      Copilot
+    </SubNav.Link>
+    <SubNav.Link href="#">Code review</SubNav.Link>
+  </SubNav>
+</div>
+```
+
+### Subheading
+
+```jsx
+<div style={{position: 'relative', height: 100, width: '100%'}}>
+  <SubNav>
+    <SubNav.Heading href="#">AI</SubNav.Heading>
+    <SubNav.SubHeading href="#" aria-current="page">
+      Copilot
+    </SubNav.SubHeading>
+    <SubNav.Link href="#">What&apos;s new</SubNav.Link>
+    <SubNav.Link href="#">Plans &amp; pricing</SubNav.Link>
+    <SubNav.Link href="#">For business</SubNav.Link>
+  </SubNav>
+</div>
+```
+
+### Optional CTA
+
+```jsx
+<div style={{position: 'relative', height: 100, width: '100%'}}>
+  <SubNav hasShadow>
+    <SubNav.Heading href="#">Features</SubNav.Heading>
+    <SubNav.Link href="#">Actions</SubNav.Link>
+    <SubNav.Link href="#">Packages</SubNav.Link>
+    <SubNav.Link href="#" aria-current="page">
+      Copilot
+    </SubNav.Link>
+    <SubNav.Link href="#">Code review</SubNav.Link>
+    <SubNav.Action href="#">CTA</SubNav.Action>
+  </SubNav>
+</div>
+```
+
+### Optional submenu
+
+Submenus appear as a dropdown by default.
+
+```jsx
+<div style={{position: 'relative', height: 300, width: '100%'}}>
+  <SubNav hasShadow>
+    <SubNav.Heading href="#">Features</SubNav.Heading>
+    <SubNav.Link href="#" aria-current="page">
+      Actions
+      <SubNav.SubMenu>
+        <SubNav.Link href="#">Actions feature one</SubNav.Link>
+        <SubNav.Link href="#">Actions feature two</SubNav.Link>
+        <SubNav.Link href="#">Actions feature three</SubNav.Link>
+        <SubNav.Link href="#">Actions feature four</SubNav.Link>
+      </SubNav.SubMenu>
+    </SubNav.Link>
+    <SubNav.Link href="#">Packages</SubNav.Link>
+    <SubNav.Link href="#">Copilot</SubNav.Link>
+    <SubNav.Link href="#">Code review</SubNav.Link>
+  </SubNav>
+</div>
+```
+
+### Optional anchor-based submenu
+
+Ensure that the text of each `SubNav.Link` within the anchor-based submenu fits entirely within a 320px-wide viewport. Failure to do this violates [WCAG 1.4.10 Reflow](https://github.com/github/accessibility-audit-guide/blob/main/web/WCAG/1.4.10%20Reflow.md).
+
+```jsx
+<div style={{position: 'relative', height: 300, width: '100%', overflowY: 'scroll'}}>
+  <Box style={{height: 1000}}>
+    <SubNav>
+      <SubNav.Heading href="#">Features</SubNav.Heading>
+      <SubNav.Link href="#" aria-current="page">
+        Actions
+        <SubNav.SubMenu variant="anchor">
+          <SubNav.Link href="#">Actions feature one</SubNav.Link>
+          <SubNav.Link href="#">Actions feature two</SubNav.Link>
+          <SubNav.Link href="#">Actions feature three</SubNav.Link>
+          <SubNav.Link href="#">Actions feature four</SubNav.Link>
+        </SubNav.SubMenu>
+      </SubNav.Link>
+      <SubNav.Link href="#">Packages</SubNav.Link>
+      <SubNav.Link href="#">Copilot</SubNav.Link>
+      <SubNav.Link href="#">Code review</SubNav.Link>
+    </SubNav>
+  </Box>
+</div>
+```
+
+## Component props
+
+### SubNav `Required`
+
+| name        | type      | default | required | description                                                                   |
+| ----------- | --------- | ------- | -------- | ----------------------------------------------------------------------------- |
+| `fullWidth` | `boolean` | `false` | `false`  | Allows the SubNav to be used at full width, removing default internal padding |
+
+### SubNav.Heading `Required`
+
+`SubNav.Heading` is a styled `a` tag which describes the overarching category of the other links within the SubNav. The `SubNav.Heading` is structurally identical to a `SubNav.Link` and differs only in visual styling.
+
+| name   | type     | default | required | description                      |
+| ------ | -------- | ------- | -------- | -------------------------------- |
+| `href` | `string` |         |          | URL of the page the link goes to |
+
+### SubNav.SubHeading
+
+| name   | type     | default | required | description                      |
+| ------ | -------- | ------- | -------- | -------------------------------- |
+| `href` | `string` |         |          | URL of the page the link goes to |
+
+### SubNav.Link `Required`
+
+| name           | type                   | default | required | description                                     |
+| -------------- | ---------------------- | ------- | -------- | ----------------------------------------------- |
+| `aria-current` | `string`               |         | `true`   | Required for indicating the current active link |
+| `href`         | `string`               |         | `true`   | URL of the page the link goes to                |
+| `variant`      | `'default' \| 'muted'` | `muted` | `false`  | Alternative idle text appearance                |
+
+### SubNav.Action
+
+| name   | type     | default | required | description                        |
+| ------ | -------- | ------- | -------- | ---------------------------------- |
+| `href` | `string` |         | `false`  | URL of the page the action goes to |
+
+### SubNav.SubMenu
+
+| name       | type                    | default     | required | description                           |
+| ---------- | ----------------------- | ----------- | -------- | ------------------------------------- |
+| `children` | `SubNav.Link`           |             | `false`  | Container for submenu links           |
+| `variant`  | `SubNavSubMenuVariants` | `'default'` | `false`  | Alternative presentation for submenus |