From deb955fe2d6c50a945c3b5c5b8e3f19465d05e2e Mon Sep 17 00:00:00 2001 From: Evgeni Nikolov Date: Thu, 5 Jan 2023 14:55:21 +0200 Subject: [PATCH] docs(PPDSC-2559): build 404 page (#534) * docs(PPDSC-2559): build 404 page * docs(PPDSC-2559): update e2e tests * docs(PPDSC-2559): remove whitespace --- cypress/site/functional/404.spec.js | 4 +- site/components/homepage/hero/styled.ts | 2 + site/components/layout.tsx | 26 ++-- site/pages/404.tsx | 133 ++++++++++++------ site/public/static/illustrations/404-hero.svg | 18 +++ 5 files changed, 130 insertions(+), 53 deletions(-) create mode 100644 site/public/static/illustrations/404-hero.svg diff --git a/cypress/site/functional/404.spec.js b/cypress/site/functional/404.spec.js index 4d6f33aa06..7814a2a153 100644 --- 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 index 6cb64aa411..214ab1a5c8 100644 --- 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 index 97e46e8b6f..a0ec69d322 100644 --- 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 { const {sidebarOpen, debugDropdownVisible} = this.state; const { hideSidebar, + hideFooter, path, newPage, toggleTheme, @@ -227,16 +229,20 @@ class Layout extends React.Component { )} - {path === '/index' ? ( - - ) : ( - + {!hideFooter && ( + <> + {path === '/index' ? ( + + ) : ( + + )} + )} diff --git a/site/pages/404.tsx b/site/pages/404.tsx index 5f9461e949..a43661c089 100644 --- 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) => ( - +const Custom404 = ({path, ...layoutProps}: LayoutProps) => ( + - - - 404page - - - - - We can't seem to find what you're looking for. If you - typed in the website address, please check it and try again. - - - - Go back to the homepage - - - } - /> - - + + + + + + + Page not found + + + We can't seem to find what you're looking for. If you + typed in the website address, please check it and try again. + + + + + + + + + + + ); diff --git a/site/public/static/illustrations/404-hero.svg b/site/public/static/illustrations/404-hero.svg new file mode 100644 index 0000000000..529a92eaf0 --- /dev/null +++ b/site/public/static/illustrations/404-hero.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + +