Skip to content

Commit

Permalink
feat(PPDSC-2786): Docs/ppdsc 2562 content updates miscellaneous (#633)
Browse files Browse the repository at this point in the history 
* docs(PPDSC-2562): colours content updates

* docs(PPDSC-2562): miscellaneous - website content updates

* docs(PPDSC-2562): mobile device fonts fix

* docs(PPDSC-2562): components overview structure change

* docs(PPDSC-2562): utilties session subNav fix

* docs(PPDSC-2562): update theme/overview page

* docs(PPDSC-2562): components overview page

* docs(PPDSC-2562): utilites session implementation

* docs(PPDSC-2562): components overview page

* docs(PPDSC-2562): arialabelby fix

---------

Co-authored-by: Ravindren <[email protected]>
Co-authored-by: Stoyan Delev <[email protected]>
  • Loading branch information
@jannuk59
3 people authored and JohnTParsons committed Mar 7, 2023
1 parent 62f7557 commit ee0bf2c
Show file tree
Hide file tree
Showing 5 changed files with 141 additions and 345 deletions.
209 changes: 70 additions & 139 deletions site/pages/components/overview.tsx
View file
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
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

0 comments on commit ee0bf2c

Please sign in to comment.