From ab96e977cbe3fbf53374170731d73733bdb7181f Mon Sep 17 00:00:00 2001
From: Armagan Ersoz <broccolinisoup@github.com>
Date: Fri, 15 Dec 2023 11:32:37 +1000
Subject: [PATCH] add dev only story and VRT test

---
 e2e/components/PageHeader.test.ts         | 34 ++++++++++++++++++
 script/generate-e2e-tests.js              |  4 +++
 src/PageHeader/PageHeader.dev.stories.tsx | 43 +++++++++++++++++++++++
 3 files changed, 81 insertions(+)
 create mode 100644 src/PageHeader/PageHeader.dev.stories.tsx

diff --git a/e2e/components/PageHeader.test.ts b/e2e/components/PageHeader.test.ts
index e19dddf0b303..577e6a3e906b 100644
--- a/e2e/components/PageHeader.test.ts
+++ b/e2e/components/PageHeader.test.ts
@@ -673,4 +673,38 @@ test.describe('PageHeader', () => {
       })
     }
   })
+
+  test.describe('Large Variant with Multiline Title', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`PageHeader.Large Variant with Multiline Title.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-pageheader-devonly--large-variant-with-multiline-title',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
 })
diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js
index 2affa9b7b424..593f8401922c 100644
--- a/script/generate-e2e-tests.js
+++ b/script/generate-e2e-tests.js
@@ -871,6 +871,10 @@ const components = new Map([
           id: 'drafts-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',
+          name: 'Large Variant with Multiline Title',
+        },
       ],
     },
   ],
diff --git a/src/PageHeader/PageHeader.dev.stories.tsx b/src/PageHeader/PageHeader.dev.stories.tsx
new file mode 100644
index 000000000000..b25106694670
--- /dev/null
+++ b/src/PageHeader/PageHeader.dev.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import {Meta} from '@storybook/react'
+import {Button, IconButton, Box} from '..'
+import Label from '../Label'
+import {GitBranchIcon, PencilIcon, SidebarExpandIcon} from '@primer/octicons-react'
+
+import {PageHeader} from './PageHeader'
+
+export default {
+  title: 'Drafts/Components/PageHeader/DevOnly',
+  parameters: {
+    layout: 'fullscreen',
+    controls: {expanded: true},
+  },
+} as Meta
+
+export const LargeVariantWithMultilineTitle = () => (
+  <Box sx={{padding: 3}}>
+    <PageHeader>
+      <PageHeader.LeadingAction>
+        <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
+      </PageHeader.LeadingAction>
+      <PageHeader.TitleArea variant="large">
+        <PageHeader.LeadingVisual>
+          <GitBranchIcon />
+        </PageHeader.LeadingVisual>
+        <PageHeader.Title>
+          Title long title some extra loooong looong words here some extra loooong looong words here some extra loooong
+          looong words here some extra loooong looong words here some extra loooong looong words here
+        </PageHeader.Title>
+        <PageHeader.TrailingVisual>
+          <Label>Beta</Label>
+        </PageHeader.TrailingVisual>
+      </PageHeader.TitleArea>
+      <PageHeader.TrailingAction>
+        <IconButton aria-label="Expand sidebar" icon={SidebarExpandIcon} variant="invisible" />
+      </PageHeader.TrailingAction>
+      <PageHeader.Actions>
+        <Button variant="primary">Add Item</Button>
+      </PageHeader.Actions>
+    </PageHeader>
+  </Box>
+)