From 96ca3765738a18bbf1f8caed7a142b5deaba8556 Mon Sep 17 00:00:00 2001 From: Evgeni Nikolov Date: Tue, 16 Aug 2022 10:43:14 +0300 Subject: [PATCH] docs(PPDSC-2299): newskit new homepage hero section (#329) * docs(PPDSC-2299): newskit new homepage hero section * docs(PPDSC-2299): update background image rules * docs(PPDSC-2299): revert typography presets changes * docs(PPDSC-2299): fixed background and reorganise files * docs(PPDSC-2299): improve CTA buttons * docs(PPDSC-2299): hero background updates * docs(PPDSC-2299): update grid illustration * docs(PPDSC-2299): address comments * docs(PPDSC-2299): update grid structure * docs(PPDSC-2299): update maxWidth * docs(PPDSC-2299): update grid containers * docs(PPDSC-2299): remove unused `themeMode` --- site/components/homepage/hero/hero.tsx | 113 ++++++++++++++++++ site/components/homepage/hero/index.ts | 1 + site/components/homepage/hero/styled.ts | 23 ++++ site/components/homepage/hero/types.ts | 5 + site/components/homepage/index.ts | 1 + .../illustrations/landing-page/hero-grid.tsx | 30 +++++ site/pages/index-new.tsx | 61 ++++------ 7 files changed, 199 insertions(+), 35 deletions(-) create mode 100644 site/components/homepage/hero/hero.tsx create mode 100644 site/components/homepage/hero/index.ts create mode 100644 site/components/homepage/hero/styled.ts create mode 100644 site/components/homepage/hero/types.ts create mode 100644 site/components/homepage/index.ts create mode 100644 site/components/illustrations/landing-page/hero-grid.tsx diff --git a/site/components/homepage/hero/hero.tsx b/site/components/homepage/hero/hero.tsx new file mode 100644 index 0000000000..18f5fe80a1 --- /dev/null +++ b/site/components/homepage/hero/hero.tsx @@ -0,0 +1,113 @@ +import * as React from 'react'; +import {GridLayoutItem, TextBlock, GridLayout, Visible, Button} from 'newskit'; +import LinkNext from 'next/link'; +import HeroGrid from '../../illustrations/landing-page/hero-grid'; +import {HeroProps} from './types'; +import {HeroContainer} from './styled'; + +const DESIGN_BUTTON_PROPS = { + href: '/getting-started/design/design-overview', + overrides: {stylePreset: 'buttonSolidPrimary'}, +}; +const DEVELOPING_BUTTON_PROPS = { + href: '/getting-started/code/engineering-quickstart', + overrides: {stylePreset: 'buttonOutlinedPrimary'}, +}; + +export const Hero = ({contentContainerOverrides}: HeroProps) => ( + + + + + + Say hello to NewsKit + + + An open source design system built by News UK, for everyone + + + + + <> + + + + + + + + + + + + <> + + + + + + + + + + + + + + + + + + + +); diff --git a/site/components/homepage/hero/index.ts b/site/components/homepage/hero/index.ts new file mode 100644 index 0000000000..5efc7348f3 --- /dev/null +++ b/site/components/homepage/hero/index.ts @@ -0,0 +1 @@ +export * from './hero'; diff --git a/site/components/homepage/hero/styled.ts b/site/components/homepage/hero/styled.ts new file mode 100644 index 0000000000..1848df9f51 --- /dev/null +++ b/site/components/homepage/hero/styled.ts @@ -0,0 +1,23 @@ +import {getMediaQueryFromTheme, styled, Block} from 'newskit*'; + +export const HeroContainer = styled(Block)` + background-size: cover; + background-repeat: no-repeat; + + ${getMediaQueryFromTheme('md')} { + ${({theme}) => { + const heroGradientBackground = theme.colors.interfaceSkeleton010; + const heroGradientColor = theme.colors.interfaceBrand030; + return `background-image: radial-gradient( + circle at -120% 160%, + ${heroGradientColor} 0%, + ${heroGradientBackground}00 70% + ), + radial-gradient( + circle at 180% -70%, + ${heroGradientColor} 0%, + ${heroGradientBackground} 60% + );`; + }}; + } +`; diff --git a/site/components/homepage/hero/types.ts b/site/components/homepage/hero/types.ts new file mode 100644 index 0000000000..f94942e414 --- /dev/null +++ b/site/components/homepage/hero/types.ts @@ -0,0 +1,5 @@ +import {GridLayoutProps} from '../../../../src/grid-layout/types'; + +export interface HeroProps { + contentContainerOverrides: GridLayoutProps['overrides']; +} diff --git a/site/components/homepage/index.ts b/site/components/homepage/index.ts new file mode 100644 index 0000000000..5efc7348f3 --- /dev/null +++ b/site/components/homepage/index.ts @@ -0,0 +1 @@ +export * from './hero'; diff --git a/site/components/illustrations/landing-page/hero-grid.tsx b/site/components/illustrations/landing-page/hero-grid.tsx new file mode 100644 index 0000000000..88c1451f8a --- /dev/null +++ b/site/components/illustrations/landing-page/hero-grid.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import {Svg} from '../svg'; +import {Path} from '../path'; + +const HeroGrid: React.FC = () => ( + + + + + + +); + +export default HeroGrid; diff --git a/site/pages/index-new.tsx b/site/pages/index-new.tsx index 079f806146..1b99cb0f19 100644 --- a/site/pages/index-new.tsx +++ b/site/pages/index-new.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; -import {GridLayout, GridLayoutItem, styled, TextBlock, Visible} from 'newskit'; +import {GridLayout, styled, TextBlock} from 'newskit'; import Layout, {LayoutProps} from '../components/layout'; -import {GridLayoutItemProps} from '../../src/grid-layout/types'; +import {Hero} from '../components/homepage'; +import {GridLayoutProps} from '../../src/grid-layout/types'; const Placeholder: React.FC = ({children}) => ( ( - - - - - Hero Text - - - - - - Hero Image - - - - - - + + Banner - - + + Explore - - + + Whats New - - + + Contribute - - + + Keep in touch - - + + Supported brands - + );