docs(PPDSC-2559): build 404 page (#534)

* docs(PPDSC-2559): build 404 page * docs(PPDSC-2559): update e2e tests * docs(PPDSC-2559): remove whitespace
newscorp-ghfb · Jan 5, 2023 · deb955f · deb955f
1 parent 3264534
commit deb955f
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 53 deletions.
diff --git a/cypress/site/functional/404.spec.js b/cypress/site/functional/404.spec.js
@@ -5,13 +5,13 @@ describe('404 page', () => {
       .should('equal', 404);
     cy.request({url: '/abcde', failOnStatusCode: false})
       .its('body')
-      .should('include', 'Go back to the homepage');
+      .should('include', 'Back to the homepage');
   });
   it('should return to homepage when back link is clicked', () => {
     cy.visit('/abcde', {failOnStatusCode: false});
     cy.get('[data-testid="back-link"]')
       .should('have.attr', 'href', '/')
-      .should('have.text', 'Go back to the homepage');
+      .should('have.text', 'Back to the homepage');
     cy.get('[data-testid="back-link"]').click({force: true});
     // Go back to the homepage
     cy.url().should('eq', 'http://localhost:8081/');

diff --git a/site/components/homepage/hero/styled.ts b/site/components/homepage/hero/styled.ts
@@ -3,6 +3,8 @@ import {getMediaQueryFromTheme, styled, Block} from 'newskit';
 export const HeroContainer = styled(Block)`
   background-size: cover;
   background-repeat: no-repeat;
+  margin-block-start: -12px;
+  min-height: calc(100% + 12px);
 
   ${getMediaQueryFromTheme('md')} {
     ${({theme}) => {

diff --git a/site/components/layout.tsx b/site/components/layout.tsx
@@ -53,6 +53,7 @@ export interface LayoutProps {
   toggleTheme: () => void;
   themeMode: string;
   hideSidebar?: boolean;
+  hideFooter?: boolean;
   children: React.ReactNode | ((props: {themeMode: string}) => React.ReactNode);
 }
 interface LayoutState {
@@ -168,6 +169,7 @@ class Layout extends React.Component<LayoutProps, LayoutState> {
     const {sidebarOpen, debugDropdownVisible} = this.state;
     const {
       hideSidebar,
+      hideFooter,
       path,
       newPage,
       toggleTheme,
@@ -227,16 +229,20 @@ class Layout extends React.Component<LayoutProps, LayoutState> {
                 )}
               </BodyWrapper>
             </InstrumentationProvider>
-            {path === '/index' ? (
-              <SiteFooter
-                cellProps={{
-                  xs: 12,
-                  xl: 10,
-                  xlOffset: 1,
-                }}
-              />
-            ) : (
-              <SiteFooter />
+            {!hideFooter && (
+              <>
+                {path === '/index' ? (
+                  <SiteFooter
+                    cellProps={{
+                      xs: 12,
+                      xl: 10,
+                      xlOffset: 1,
+                    }}
+                  />
+                ) : (
+                  <SiteFooter />
+                )}
+              </>
             )}
           </Container>
         </ThemeModeContext.Provider>

diff --git a/site/pages/404.tsx b/site/pages/404.tsx
@@ -1,59 +1,110 @@
 import React from 'react';
-import {Block, Cell, Image, toNewsKitIcon} from 'newskit';
+import {
+  Button,
+  GridLayout,
+  GridLayoutItem,
+  Hidden,
+  TextBlock,
+  toNewsKitIcon,
+} from 'newskit';
 import {KeyboardArrowLeft as FilledKeyboardArrowLeft} from '@emotion-icons/material/KeyboardArrowLeft';
-import {ContentPrimary, ContentSection} from '../components/content-structure';
 import Layout, {LayoutProps} from '../components/layout';
 import {HeadNextSeo} from '../components/head-next-seo';
-import {Link} from '../components/link';
+import {HeroContainer} from '../components/homepage/hero/styled';
+import {Illustration} from '../components/illustrations/illustration-loader';
 
 const IconFilledKeyboardArrowLeft = toNewsKitIcon(FilledKeyboardArrowLeft);
 
-const Custom404 = ({path, ...props}: LayoutProps) => (
-  <Layout {...props} hideSidebar path={`${path}-new`}>
+const Custom404 = ({path, ...layoutProps}: LayoutProps) => (
+  <Layout {...layoutProps} newPage hideFooter hideSidebar path={`${path}-new`}>
     <HeadNextSeo
       title="404 page"
-      description="Have a question about our design system? 
+      description="Have a question about our design system?
         The NewsKit team is here to help you."
       image={{
         url: 'social/landing.png',
         alt: '404 page',
       }}
     />
-    <Cell xs={12} md={10} mdOffset={1} lg={8} lgOffset={2} xl={6} xlOffset={3}>
-      <Block spaceStack={{xs: 'space045', sm: 'space050', md: 'space070'}}>
-        <Image
-          loadingAspectRatio="16:9"
-          alt="404page"
-          src="static/placeholder-16x9.png"
-        />
-      </Block>
-      <ContentSection sectionName="page not found">
-        <ContentPrimary
-          headline="Page not found"
-          description={
-            <>
-              <Block spaceStack={{xs: 'space050', md: 'space060'}}>
-                We can&apos;t seem to find what you&apos;re looking for. If you
-                typed in the website address, please check it and try again.
-              </Block>
-              <Link
-                data-testid="back-link"
-                href="/"
-                aria-label="back"
-                type="standalone"
-              >
-                <IconFilledKeyboardArrowLeft
-                  overrides={{
-                    size: 'iconSize020',
-                  }}
-                />
-                Go back to the homepage
-              </Link>
-            </>
-          }
-        />
-      </ContentSection>
-    </Cell>
+
+    <HeroContainer>
+      <GridLayout
+        overrides={{
+          maxWidth: '1150px',
+          marginInline: 'auto',
+          width: '100%',
+          paddingInline: {
+            xs: 'space050',
+            sm: 'space070',
+            md: 'space100',
+            lg: 'space080',
+          },
+        }}
+      >
+        <GridLayout
+          columns="1fr minmax(min-content, 530px)"
+          overrides={{marginBlock: {xs: 'space070', lg: 'space000'}}}
+          alignItems="center"
+        >
+          <GridLayoutItem
+            paddingBlock={{
+              xs: 'space000',
+              md: 'space110',
+            }}
+            column={{
+              xs: `1 / span 2`,
+              lg: `1 / span 1`,
+            }}
+          >
+            <TextBlock
+              as="h1"
+              stylePreset="inkBase"
+              paddingInlineEnd={{
+                xs: 'space100',
+              }}
+              typographyPreset={{
+                xs: 'editorialHeadline070',
+                md: 'editorialHeadline080',
+                lg: 'editorialDisplay020',
+              }}
+            >
+              Page not found
+            </TextBlock>
+            <TextBlock
+              marginBlockStart={{xs: 'space060', lg: 'space080'}}
+              stylePreset="inkBase"
+              typographyPreset="editorialSubheadline020"
+              marginInlineEnd={{
+                xs: 'space020',
+                md: 'space120',
+                lg: 'space000',
+              }}
+              paddingInlineEnd={{
+                xs: 'space090',
+                md: 'space100',
+                lg: 'space100',
+              }}
+            >
+              We can&apos;t seem to find what you&apos;re looking for. If you
+              typed in the website address, please check it and try again.
+            </TextBlock>
+            <Button
+              overrides={{marginBlockStart: 'space080'}}
+              href="/"
+              data-testid="back-link"
+            >
+              <IconFilledKeyboardArrowLeft />
+              Back to the homepage
+            </Button>
+          </GridLayoutItem>
+          <Hidden xs sm md>
+            <GridLayoutItem>
+              <Illustration viewBox="0 0 590 879" path="404-hero" />
+            </GridLayoutItem>
+          </Hidden>
+        </GridLayout>
+      </GridLayout>
+    </HeroContainer>
   </Layout>
 );