From 6db8b2fba72ac934db1481adc4a6f067032b5936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan?= <broccolinisoup@github.com>
Date: Fri, 19 Jul 2024 13:50:40 +1000
Subject: [PATCH] =?UTF-8?q?Promote=20PageHeader=20to=20Beta=20=F0=9F=8E=89?=
 =?UTF-8?q?=20(#4725)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Promote PageHeader to Beta

* circular deps fix

* Create nice-forks-joke.md

* fix e2e tests story name

* Update packages/react/src/PageHeader/PageHeader.docs.json

* Update .changeset/nice-forks-joke.md

* update test story names

* back to Beta again
---
 .changeset/nice-forks-joke.md                 |  5 ++
 e2e/components/PageHeader.test.ts             | 80 +++++++++----------
 .../src/PageHeader/PageHeader.dev.stories.tsx |  2 +-
 .../react/src/PageHeader/PageHeader.docs.json |  4 +-
 .../PageHeader.examples.stories.tsx           |  2 +-
 .../PageHeader.features.stories.tsx           |  2 +-
 .../src/PageHeader/PageHeader.stories.tsx     |  2 +-
 packages/react/src/PageHeader/PageHeader.tsx  |  2 +-
 .../__snapshots__/exports.test.ts.snap        |  2 +
 packages/react/src/index.ts                   |  3 +
 script/generate-e2e-tests.js                  | 40 +++++-----
 11 files changed, 77 insertions(+), 67 deletions(-)
 create mode 100644 .changeset/nice-forks-joke.md

diff --git a/.changeset/nice-forks-joke.md b/.changeset/nice-forks-joke.md
new file mode 100644
index 00000000000..c7a982f7b1a
--- /dev/null
+++ b/.changeset/nice-forks-joke.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+PageHeader: Promote the component to Beta status and now it is available to import from "@primer/react"
diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts
index 577e6a3e906..fd48b87053f 100644
--- a/e2e/components/PageHeader.test.ts
+++ b/e2e/components/PageHeader.test.ts
@@ -9,7 +9,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--files-page',
+            id: 'components-pageheader-examples--files-page',
             globals: {
               colorScheme: theme,
             },
@@ -21,7 +21,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--files-page',
+            id: 'components-pageheader-examples--files-page',
             globals: {
               colorScheme: theme,
             },
@@ -43,7 +43,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--files-page-on-narrow-viewport',
+            id: 'components-pageheader-examples--files-page-on-narrow-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -55,7 +55,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--files-page-on-narrow-viewport',
+            id: 'components-pageheader-examples--files-page-on-narrow-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -77,7 +77,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--pull-request-page',
+            id: 'components-pageheader-examples--pull-request-page',
             globals: {
               colorScheme: theme,
             },
@@ -89,7 +89,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--pull-request-page',
+            id: 'components-pageheader-examples--pull-request-page',
             globals: {
               colorScheme: theme,
             },
@@ -116,7 +116,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--pull-request-page-on-narrow-viewport',
+            id: 'components-pageheader-examples--pull-request-page-on-narrow-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -130,7 +130,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--pull-request-page-on-narrow-viewport',
+            id: 'components-pageheader-examples--pull-request-page-on-narrow-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -157,7 +157,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--webhooks',
+            id: 'components-pageheader-examples--webhooks',
             globals: {
               colorScheme: theme,
             },
@@ -169,7 +169,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--webhooks',
+            id: 'components-pageheader-examples--webhooks',
             globals: {
               colorScheme: theme,
             },
@@ -191,7 +191,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--webhooks-on-narrow-viewport',
+            id: 'components-pageheader-examples--webhooks-on-narrow-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -203,7 +203,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--webhooks-on-narrow-viewport',
+            id: 'components-pageheader-examples--webhooks-on-narrow-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -225,7 +225,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--with-page-layout',
+            id: 'components-pageheader-examples--with-page-layout',
             globals: {
               colorScheme: theme,
             },
@@ -237,7 +237,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-examples--with-page-layout',
+            id: 'components-pageheader-examples--with-page-layout',
             globals: {
               colorScheme: theme,
             },
@@ -263,7 +263,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--has-large-title',
+            id: 'components-pageheader-features--has-large-title',
             globals: {
               colorScheme: theme,
             },
@@ -275,7 +275,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--has-large-title',
+            id: 'components-pageheader-features--has-large-title',
             globals: {
               colorScheme: theme,
             },
@@ -297,7 +297,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--has-title-only',
+            id: 'components-pageheader-features--has-title-only',
             globals: {
               colorScheme: theme,
             },
@@ -309,7 +309,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--has-title-only',
+            id: 'components-pageheader-features--has-title-only',
             globals: {
               colorScheme: theme,
             },
@@ -331,7 +331,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-actions',
+            id: 'components-pageheader-features--with-actions',
             globals: {
               colorScheme: theme,
             },
@@ -343,7 +343,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-actions',
+            id: 'components-pageheader-features--with-actions',
             globals: {
               colorScheme: theme,
             },
@@ -365,7 +365,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-actions-that-have-responsive-content',
+            id: 'components-pageheader-features--with-actions-that-have-responsive-content',
             globals: {
               colorScheme: theme,
             },
@@ -379,7 +379,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-actions-that-have-responsive-content',
+            id: 'components-pageheader-features--with-actions-that-have-responsive-content',
             globals: {
               colorScheme: theme,
             },
@@ -401,7 +401,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-context-bar-and-actions-of-context-area',
+            id: 'components-pageheader-features--with-context-bar-and-actions-of-context-area',
             globals: {
               colorScheme: theme,
             },
@@ -415,7 +415,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-context-bar-and-actions-of-context-area',
+            id: 'components-pageheader-features--with-context-bar-and-actions-of-context-area',
             globals: {
               colorScheme: theme,
             },
@@ -437,7 +437,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-custom-navigation',
+            id: 'components-pageheader-features--with-custom-navigation',
             globals: {
               colorScheme: theme,
             },
@@ -449,7 +449,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-custom-navigation',
+            id: 'components-pageheader-features--with-custom-navigation',
             globals: {
               colorScheme: theme,
             },
@@ -471,7 +471,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-description-slot',
+            id: 'components-pageheader-features--with-description-slot',
             globals: {
               colorScheme: theme,
             },
@@ -483,7 +483,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-description-slot',
+            id: 'components-pageheader-features--with-description-slot',
             globals: {
               colorScheme: theme,
             },
@@ -505,7 +505,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-leading-and-trailing-actions',
+            id: 'components-pageheader-features--with-leading-and-trailing-actions',
             globals: {
               colorScheme: theme,
             },
@@ -517,7 +517,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-leading-and-trailing-actions',
+            id: 'components-pageheader-features--with-leading-and-trailing-actions',
             globals: {
               colorScheme: theme,
             },
@@ -539,7 +539,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-leading-and-trailing-visuals',
+            id: 'components-pageheader-features--with-leading-and-trailing-visuals',
             globals: {
               colorScheme: theme,
             },
@@ -551,7 +551,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-leading-and-trailing-visuals',
+            id: 'components-pageheader-features--with-leading-and-trailing-visuals',
             globals: {
               colorScheme: theme,
             },
@@ -573,7 +573,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-leading-visual-hidden-on-regular-viewport',
+            id: 'components-pageheader-features--with-leading-visual-hidden-on-regular-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -587,7 +587,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-leading-visual-hidden-on-regular-viewport',
+            id: 'components-pageheader-features--with-leading-visual-hidden-on-regular-viewport',
             globals: {
               colorScheme: theme,
             },
@@ -609,7 +609,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-navigation-slot',
+            id: 'components-pageheader-features--with-navigation-slot',
             globals: {
               colorScheme: theme,
             },
@@ -621,7 +621,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-navigation-slot',
+            id: 'components-pageheader-features--with-navigation-slot',
             globals: {
               colorScheme: theme,
             },
@@ -643,7 +643,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-parent-link-and-actions-of-context-area',
+            id: 'components-pageheader-features--with-parent-link-and-actions-of-context-area',
             globals: {
               colorScheme: theme,
             },
@@ -657,7 +657,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-features--with-parent-link-and-actions-of-context-area',
+            id: 'components-pageheader-features--with-parent-link-and-actions-of-context-area',
             globals: {
               colorScheme: theme,
             },
@@ -679,7 +679,7 @@ test.describe('PageHeader', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            id: 'components-pageheader-devonly--large-variant-with-multiline-title',
             globals: {
               colorScheme: theme,
             },
@@ -691,7 +691,7 @@ test.describe('PageHeader', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            id: 'components-pageheader-devonly--large-variant-with-multiline-title',
             globals: {
               colorScheme: theme,
             },
diff --git a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
index 453ca560411..4dd501791ca 100644
--- a/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.dev.stories.tsx
@@ -7,7 +7,7 @@ import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-rea
 import {PageHeader} from './PageHeader'
 
 const meta: Meta<typeof PageHeader> = {
-  title: 'Drafts/Components/PageHeader/DevOnly',
+  title: 'Components/PageHeader/DevOnly',
   parameters: {
     layout: 'fullscreen',
     controls: {expanded: true},
diff --git a/packages/react/src/PageHeader/PageHeader.docs.json b/packages/react/src/PageHeader/PageHeader.docs.json
index 9f3c743e30b..4ed998ab793 100644
--- a/packages/react/src/PageHeader/PageHeader.docs.json
+++ b/packages/react/src/PageHeader/PageHeader.docs.json
@@ -1,10 +1,10 @@
 {
   "id": "drafts_page_header",
   "name": "PageHeader",
-  "status": "draft",
+  "status": "beta",
   "a11yReviewed": true,
   "stories": [],
-  "importPath": "@primer/react/experimental",
+  "importPath": "@primer/react",
   "props": [
     {
       "name": "aria-label",
diff --git a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
index 07278d7249b..dbb256d9e9d 100644
--- a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
@@ -37,7 +37,7 @@ import {ActionMenu} from '../ActionMenu'
 import {ActionList} from '../ActionList'
 
 const meta: Meta = {
-  title: 'Drafts/Components/PageHeader/Examples',
+  title: 'Components/PageHeader/Examples',
   parameters: {
     layout: 'fullscreen',
     controls: {expanded: true},
diff --git a/packages/react/src/PageHeader/PageHeader.features.stories.tsx b/packages/react/src/PageHeader/PageHeader.features.stories.tsx
index d5f22fb5fa7..30966076a04 100644
--- a/packages/react/src/PageHeader/PageHeader.features.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.features.stories.tsx
@@ -21,7 +21,7 @@ import {PageHeader} from './PageHeader'
 import {Hidden} from '../Hidden'
 
 const meta: Meta = {
-  title: 'Drafts/Components/PageHeader/Features',
+  title: 'Components/PageHeader/Features',
   parameters: {
     layout: 'fullscreen',
     controls: {expanded: true},
diff --git a/packages/react/src/PageHeader/PageHeader.stories.tsx b/packages/react/src/PageHeader/PageHeader.stories.tsx
index 2bef8244070..8239eca6313 100644
--- a/packages/react/src/PageHeader/PageHeader.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.stories.tsx
@@ -23,7 +23,7 @@ import {PageHeader} from './PageHeader'
 import Hidden from '../Hidden'
 
 const meta: Meta<typeof PageHeader> = {
-  title: 'Drafts/Components/PageHeader',
+  title: 'Components/PageHeader',
   parameters: {
     layout: 'fullscreen',
     controls: {expanded: true},
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 5cb35a1fa72..b8722cc45d6 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import {Box} from '..'
+import Box from '../Box'
 import type {ResponsiveValue} from '../hooks/useResponsiveValue'
 import {useResponsiveValue} from '../hooks/useResponsiveValue'
 import type {SxProp, BetterSystemStyleObject, CSSCustomProperties} from '../sx'
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 015068cc21d..a48662d7968 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -101,6 +101,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
   "Overlay",
   "type OverlayProps",
   "Pagehead",
+  "PageHeader",
+  "type PageHeaderProps",
   "type PageheadProps",
   "PageLayout",
   "type PageLayoutContentProps",
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 30f2d09c796..e8ed2507751 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -196,6 +196,9 @@ export type {UnderlineNavProps, UnderlineNavItemProps} from './UnderlineNav'
 export {ActionBar} from './ActionBar'
 export type {ActionBarProps} from './ActionBar'
 
+export {PageHeader} from './PageHeader'
+export type {PageHeaderProps} from './PageHeader'
+
 // eslint-disable-next-line no-restricted-imports
 export {SSRProvider, useSSRSafeId} from './utils/ssr'
 export {default as sx, merge} from './sx'
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 4c8d1524b2a..c65e2e71587 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -843,83 +843,83 @@ const components = new Map([
     {
       stories: [
         {
-          id: 'drafts-components-pageheader-examples--files-page',
+          id: 'components-pageheader-examples--files-page',
           name: 'Files Page',
         },
         {
-          id: 'drafts-components-pageheader-examples--files-page-on-narrow-viewport',
+          id: 'components-pageheader-examples--files-page-on-narrow-viewport',
           name: 'Files Page on Narrow Viewport',
         },
         {
-          id: 'drafts-components-pageheader-examples--pull-request-page',
+          id: 'components-pageheader-examples--pull-request-page',
           name: 'Pull Request Page',
         },
         {
-          id: 'drafts-components-pageheader-examples--pull-request-page-on-narrow-viewport',
+          id: 'components-pageheader-examples--pull-request-page-on-narrow-viewport',
           name: 'Pull Request Page on Narrow Viewport',
         },
         {
-          id: 'drafts-components-pageheader-examples--webhooks',
+          id: 'components-pageheader-examples--webhooks',
           name: 'Webhooks',
         },
         {
-          id: 'drafts-components-pageheader-examples--webhooks-on-narrow-viewport',
+          id: 'components-pageheader-examples--webhooks-on-narrow-viewport',
           name: 'Webhooks on Narrow Viewport',
         },
         {
-          id: 'drafts-components-pageheader-examples--with-page-layout',
+          id: 'components-pageheader-examples--with-page-layout',
           name: 'With Page Layout',
         },
         {
-          id: 'drafts-components-pageheader-features--has-large-title',
+          id: 'components-pageheader-features--has-large-title',
           name: 'Has Large Title',
         },
         {
-          id: 'drafts-components-pageheader-features--has-title-only',
+          id: 'components-pageheader-features--has-title-only',
           name: 'Has Title Only',
         },
         {
-          id: 'drafts-components-pageheader-features--with-actions',
+          id: 'components-pageheader-features--with-actions',
           name: 'With Actions',
         },
         {
-          id: 'drafts-components-pageheader-features--with-actions-that-have-responsive-content',
+          id: 'components-pageheader-features--with-actions-that-have-responsive-content',
           name: 'With Actions that have Responsive Content',
         },
         {
-          id: 'drafts-components-pageheader-features--with-context-bar-and-actions-of-context-area',
+          id: 'components-pageheader-features--with-context-bar-and-actions-of-context-area',
           name: 'With Context Bar and Actions of Context Area',
         },
         {
-          id: 'drafts-components-pageheader-features--with-custom-navigation',
+          id: 'components-pageheader-features--with-custom-navigation',
           name: 'With Custom Navigation',
         },
         {
-          id: 'drafts-components-pageheader-features--with-description-slot',
+          id: 'components-pageheader-features--with-description-slot',
           name: 'With Description Slot',
         },
         {
-          id: 'drafts-components-pageheader-features--with-leading-and-trailing-actions',
+          id: 'components-pageheader-features--with-leading-and-trailing-actions',
           name: 'With Leading and Trailing Actions',
         },
         {
-          id: 'drafts-components-pageheader-features--with-leading-and-trailing-visuals',
+          id: 'components-pageheader-features--with-leading-and-trailing-visuals',
           name: 'With Leading and Trailing Visuals',
         },
         {
-          id: 'drafts-components-pageheader-features--with-leading-visual-hidden-on-regular-viewport',
+          id: 'components-pageheader-features--with-leading-visual-hidden-on-regular-viewport',
           name: 'With Leading Visual Hidden on Regular Viewport',
         },
         {
-          id: 'drafts-components-pageheader-features--with-navigation-slot',
+          id: 'components-pageheader-features--with-navigation-slot',
           name: 'With Navigation Slot',
         },
         {
-          id: 'drafts-components-pageheader-features--with-parent-link-and-actions-of-context-area',
+          id: 'components-pageheader-features--with-parent-link-and-actions-of-context-area',
           name: 'With Parent Link and Actions of Context Area',
         },
         {
-          id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+          id: 'components-pageheader-devonly--large-variant-with-multiline-title',
           name: 'Large Variant with Multiline Title',
         },
       ],