Merge pull request #1297 from daniel-ac-martin/custom-logo-on-pages

Page: Allow custom header logo
daniel-ac-martin · Feb 2, 2025 · 705ea8e · 705ea8e · github-actions · Feb 2, 2025
2 parents ab5e630 + 0ab42a9
commit 705ea8e
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 0 deletions.
diff --git a/components/page/spec/GovUKPage.ts b/components/page/spec/GovUKPage.ts
@@ -13,5 +13,6 @@ describe('GovUKPage', () => {
     it('renders a header', async () => expect(screen.getByRole('banner')).toBeInTheDocument());
     it('renders a footer', async () => expect(screen.getByRole('contentinfo')).toBeInTheDocument());
     it('is GOV.UK branded', async () => expect(screen.getByText('GOV.UK')).toBeInTheDocument());
+    it('contains the logo', async () => expect(screen.getByRole('img')).toHaveTextContent('GOV.UK'));
   });
 });
diff --git a/components/page/spec/Page.stories.mdx b/components/page/spec/Page.stories.mdx
@@ -195,6 +195,64 @@ A page suitable for dashboards. This is achieved by providing the `dark` classMo
 </Preview>
 
 
+### Custom logo
+
+A custom logo, for the page's header, can be provided, via the `logo` prop.
+
+<Preview>
+  <Story name="Custom logo">
+    <NotGovUKPage
+      logo={<span>Logo</span>}
+    >
+      <div className="govuk-grid-row">
+        <div className="govuk-grid-column-two-thirds">
+          <h1>
+            <span className="caption">Caption</span>
+            My page
+          </h1>
+          <p>My content</p>
+        </div>
+        <div className="govuk-grid-column-one-third">
+          <aside>
+            <h2>Did you know?</h2>
+            <p>NotGovUK can cater for both public and internal websites.</p>
+          </aside>
+        </div>
+      </div>
+    </NotGovUKPage>
+  </Story>
+</Preview>
+
+
+### No logo
+
+The logo can be removed from the page's header by passing `null` to the `logo` prop.
+
+<Preview>
+  <Story name="No logo">
+    <NotGovUKPage
+      logo={null}
+    >
+      <div className="govuk-grid-row">
+        <div className="govuk-grid-column-two-thirds">
+          <h1>
+            <span className="caption">Caption</span>
+            My page
+          </h1>
+          <p>My content</p>
+        </div>
+        <div className="govuk-grid-column-one-third">
+          <aside>
+            <h2>Did you know?</h2>
+            <p>NotGovUK can cater for both public and internal websites.</p>
+          </aside>
+        </div>
+      </div>
+    </NotGovUKPage>
+  </Story>
+</Preview>
+
+
 ### Department colours
 
 If you are building an internal application you can supply the name of

diff --git a/components/page/spec/Page.ts b/components/page/spec/Page.ts
@@ -30,6 +30,7 @@ describe('Page', () => {
     it('renders a header', async () => expect(screen.getByRole('banner')).toBeInTheDocument());
     it('renders a footer', async () => expect(screen.getByRole('contentinfo')).toBeInTheDocument());
     it('is GOV.UK branded', async () => expect(screen.queryByText('GOV.UK')).toBeInTheDocument());
+    it('contains the logo', async () => expect(screen.getByRole('img')).toHaveTextContent('GOV.UK'));
   });
 
   describe('when given all valid props', () => {
@@ -61,6 +62,7 @@ describe('Page', () => {
         }
       ],
       govUK: false,
+      logo: null,
       maxContentsWidth: 300,
       meta: [
         {
@@ -109,6 +111,7 @@ describe('Page', () => {
     it('renders a header', async () => expect(screen.getByRole('banner')).toBeInTheDocument());
     it('renders a footer', async () => expect(screen.getByRole('contentinfo')).toBeInTheDocument());
     it('is NOT GOV.UK branded', async () => expect(screen.queryByText('GOV.UK')).toBeNull());
+    it('does NOT contain a logo', async () => expect(screen.queryByRole('img')).not.toBeInTheDocument());
     it('contains the breadcrumbs', async () => expect(screen.getAllByRole('generic')[0]).toHaveTextContent('Breadcrumb 2'));
     it('contains the footer content', async () => expect(screen.getByRole('contentinfo')).toHaveTextContent('Footer content'));
     it('contains the footer navigation', async () => expect(screen.getByRole('contentinfo')).toHaveTextContent('Footer navigation'));

diff --git a/components/page/src/Page.tsx b/components/page/src/Page.tsx
@@ -52,6 +52,7 @@ export const Page: FC<PageProps> = ({
   footerContent,
   footerNavigation,
   govUK,
+  logo,
   maxContentsWidth,
   meta,
   metaTitle,
@@ -77,6 +78,7 @@ export const Page: FC<PageProps> = ({
   const headerProps = {
     department,
     govUK,
+    logo,
     maxContentsWidth,
     navigation,
     organisationHref,