Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs/ppdsc 2562 content updates miscellaneous #633

Merged
merged 14 commits into from
Mar 2, 2023
Merged

Docs/ppdsc 2562 content updates miscellaneous #633

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a63802a
docs(PPDSC-2562): colours content updates
Feb 7, 2023
d4316d5
docs(PPDSC-2551): snapshots update
Feb 9, 2023
8196fa7
docs(PPDSC-2562): miscellaneous - website content updates
Feb 13, 2023
b4d7cf8
docs(PPDSC-2562): mobile device fonts fix
Feb 15, 2023
5f790dc
docs(PPDSC-2562): components overview structure change
Feb 20, 2023
e35d951
docs(PPDSC-2562): utilties session subNav fix
Feb 27, 2023
6d43872
docs(PPDSC-2562): update theme/overview page
Feb 27, 2023
5d3ee82
docs(PPDSC-2562): components overview page
Feb 27, 2023
8fe1068
docs(PPDSC-2562): utilites session implementation
Feb 28, 2023
1addfec
docs(PPDSC-2562): components overview page
Feb 28, 2023
5058e5c
docs(PPDSC-2562): components overview page
Feb 28, 2023
9794f14
docs(PPDSC-2562): arialabelby fix
Feb 28, 2023
e8941e8
docs(PPDSC-2562): arialabelby fix
Mar 1, 2023
660e38b
docs(PPDSC-2562): arialabelby fix
Mar 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
209 changes: 70 additions & 139 deletions site/pages/components/overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,44 +2,80 @@
import React from 'react';
import {
Block,
Cell,
Grid,
StructuredList,
StructuredListCell,
StructuredListItem,
TextBlock,
} from 'newskit';
import {
ContentPrimary,
ContentSection,
} from '../../components/content-structure';
import Layout, {LayoutProps} from '../../components/layout';
import {MediaItem, MediaList} from '../../components/media-list';
import {HeaderIndex} from '../../components/header-index';
import {ComponentPageCell} from '../../components/layout-cells';
import {Separator} from '../../components/separator';
import {routes} from '../../routes';
import {
getIllustrationComponent,
Illustration,
} from '../../components/illustrations/illustration-loader';
import Layout, {LayoutProps} from '../../components/layout';
import {SectionIntroduction} from '../../components/section-introduction';
import {MediaList} from '../../components/media-list';
import {HeaderIndex} from '../../components/header-index';
import {routes} from '../../routes';
import {Item} from '../../components/sidebar/types';
import {HeadNextSeo} from '../../components/head-next-seo';

const HeaderImage = () => (
<Illustration path="components/header-image" viewBox="0 0 1572 997" />
);

const componentsSubNav: any[] | undefined = routes.find(
r => r.title === 'Components',
)?.subNav;
const componentCategories =
componentsSubNav
?.slice(1)
.filter(e => e.id !== '/utils' && e.id !== '/deprecated') || [];
const componentsRouteList: Item[] =
routes.filter(route => route.title === 'Components')[0].subNav || [];

const utilities = componentsSubNav?.find(e => e.id === '/utils');
const deprecated = componentsSubNav?.find(e => e.id === '/deprecated');
const componentCategories = componentsRouteList?.slice(1);
const UtilityCategories =
componentsRouteList.filter(route => route.id === '/utils')[0].subNav || [];

const UtilitiesList = () => (
<Block stylePreset="componentsUtilitiesStructuredList">
<StructuredList divider>
{UtilityCategories.map(({title, id, description}: any) => (
<StructuredListItem key={id} href={id} ariaLabel={title}>
<StructuredListCell>
<TextBlock
stylePreset="inkContrast"
typographyPreset="utilityHeading010"
>
{title}
</TextBlock>
<TextBlock
marginBlockStart="space030"
stylePreset="inkContrast"
typographyPreset="utilityBody020"
>
{description}
</TextBlock>
</StructuredListCell>
</StructuredListItem>
))}
</StructuredList>
</Block>
);
const getCardList = (routeList: Item[]) =>
routeList
.filter(route => route.page && route?.illustration)
.map(({title, description, id, illustration}) => ({
media: illustration?.endsWith('.svg')
? {src: illustration, alt: ''}
: getIllustrationComponent(illustration as string),

title,
href: id,
description,
})) as MediaItem[];

const pageDescription = `Components are key building blocks of the NewsKit design system.`;

const OverviewComponent = (layoutProps: LayoutProps) => (
const Overview = (layoutProps: LayoutProps) => (
<Layout {...layoutProps} newPage>
<HeadNextSeo
title="Components overview"
Expand All @@ -49,135 +85,30 @@ const OverviewComponent = (layoutProps: LayoutProps) => (
alt: 'Components overview',
}}
/>

<HeaderIndex title="Components" media={HeaderImage}>
{pageDescription}
</HeaderIndex>
<Grid lgMargin="sizing000" xsRowGutter="sizing000">
{componentCategories.map(
({title, description, subNav}: any, i: number) => (
<React.Fragment key={title}>
{i === 0 ? (
<Cell xs={12}>
<SectionIntroduction
title={title}
cellProps={{lg: 8, mdOffset: i === 0 ? 1 : undefined}}
subHeadingSpaceStack="space000"
>
{description}
</SectionIntroduction>
</Cell>
) : (
<Cell xs={12}>
<SectionIntroduction
subHeadingSpaceStack="space080"
title={title}
cellProps={{lg: 8}}
>
{description}
</SectionIntroduction>
</Cell>
)}
<ComponentPageCell>
<MediaList
cards={subNav.map((comp: any) => ({
media: comp.illustration
? getIllustrationComponent(comp.illustration)
: {
src: comp.media,
alt: '',
},
title: comp.title,
href: comp.id,
description: comp.description,
}))}
gridProps={{xsRowGutter: 'space050'}}
/>
</ComponentPageCell>
<ComponentPageCell>
<Separator />
</ComponentPageCell>
</React.Fragment>
),
)}
<Cell xs={12}>
<SectionIntroduction
subHeadingSpaceStack="space080"
title={utilities.title}
cellProps={{lg: 8}}
>
{utilities.description}
</SectionIntroduction>
<ComponentPageCell>
<Block stylePreset="componentsUtilitiesStructuredList">
<StructuredList divider>
{utilities?.subNav?.map(
(util: {
title: string;
page: boolean;
id: string;
description: string;
}) => (
<StructuredListItem
key={util.id}
href={util.id}
ariaLabel={util.title}
>
<StructuredListCell>
<TextBlock
stylePreset="inkContrast"
typographyPreset="utilityHeading010"
>
{util.title}
</TextBlock>
<TextBlock
marginBlockStart="space030"
stylePreset="inkContrast"
typographyPreset="utilityBody020"
>
{util.description}
</TextBlock>
</StructuredListCell>
</StructuredListItem>
),
)}
</StructuredList>
</Block>
</ComponentPageCell>
</Cell>
<ComponentPageCell>
<Separator />
{componentCategories.map(({title, description, subNav = []}) => (
<ContentSection sectionName={title as string}>
<ContentPrimary
headline={title as string}
description={description}
>
{(title === 'Utilities' && <UtilitiesList />) || (
<MediaList
cards={getCardList(subNav)}
gridProps={{xsRowGutter: 'space050'}}
/>
)}
</ContentPrimary>
</ContentSection>
))}
</ComponentPageCell>
<React.Fragment key={deprecated.title}>
<Cell xs={12}>
<SectionIntroduction
subHeadingSpaceStack="space080"
title={deprecated.title}
cellProps={{lg: 8}}
>
{deprecated.description}
</SectionIntroduction>
</Cell>
<ComponentPageCell>
<MediaList
cards={deprecated?.subNav?.map((comp: any) => ({
media: comp.illustration
? getIllustrationComponent(comp.illustration)
: {
src: comp.media,
alt: '',
},
title: comp.title,
href: comp.id,
description: comp.description,
}))}
gridProps={{xsRowGutter: 'space050'}}
/>
</ComponentPageCell>
</React.Fragment>
</Grid>

<Block spaceStack="space070" />
</Layout>
);

export default OverviewComponent;
export default Overview;
28 changes: 15 additions & 13 deletions site/pages/theme/foundation/colours.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,12 @@ const coloursTable = [
header: 'Common',
columnHeader: COLUMN_HEADER,
rows: themeColorRows('ink', INK_DESCRIPTION, [
'inkBase',
'inkContrast',
'inkBase',
'inkSubtle',
'inkNonEssential',
'inkLight010',
'inkDark010',
'inkInverse',
]),
description:
Expand Down Expand Up @@ -156,14 +158,14 @@ const coloursTable = [
'interfaceBrand020',
]),
description:
'‘Brand‘ Interface tokens are used in areas where expression and brand identity is required. This can include components such as title bars, header and footer navigation.',
'Use ‘brand‘ interface tokens to express brand identity. This includes components such as title bars, headers and footer navigation.',
},
],
},
{
title: 'Interactive',
summary:
'Interactive colours are used to indicate and display interactions of certain components such as buttons, links and switches. Each set of interactive colours covers the various states needed. The base state uses the 030, the hover 040 and the active 050. The 010 and 020 are used for loading/progress states.',
'Apply interactive colours to indicate and display interactions of components. This includes components such as buttons, links and switches.',
tabs: [
{
header: 'Primary',
Expand Down Expand Up @@ -252,7 +254,7 @@ const coloursTable = [
'interactiveVisited010',
]),
description:
'‘Other’ interactive colours are used for focus tabbing, ‘disabled’, & ‘visited states.',
'Use ‘common’ interactive tokens to indicate and display interactions of components that are links, or components in disabled, visited, and focus states.',
},
],
},
Expand All @@ -263,7 +265,7 @@ const Colours = (layoutProps: LayoutProps) => (
headTags={{
title: 'Colours',
description:
'Colours express brand identity and convey meaning to users.',
'Colours help express brand identity and convey meaning to users.',
}}
layoutProps={layoutProps}
pageIntroduction={{
Expand All @@ -272,7 +274,7 @@ const Colours = (layoutProps: LayoutProps) => (
hero: {
illustration: 'theme/colours/hero',
},
introduction: `Colours express brand identity and convey meaning to users.`,
introduction: `Colours help express brand identity and convey meaning to users.`,
}}
>
<ComponentPageCell>
Expand Down Expand Up @@ -345,18 +347,18 @@ const Colours = (layoutProps: LayoutProps) => (

<ContentSecondary childrenColSpan={ContentColSpan.TEXT}>
<InlineMessage role="region" title="" aria-label="Palettecolours">
The WCAG AA standards define normal and large text sizes as: <br />
The WCAG AA standards define regular and large text sizes as:
<br />
<br />
<b>Normal sized text</b>
<b>Regular</b>
<br />
The font size is at least 16px with a regular font weight or
heavier.
Font size is at least 19px with a regular font weight or heavier.
<br />
<br />
<b>Large sized text</b>
<b>Large</b>
<br />
The font size is at least 18.66px with a bold font weight or 24px
with regular font weight.
Font size is at least 19px with a bold font weight or 24px with
regular font weight.
</InlineMessage>
</ContentSecondary>

Expand Down
Loading