Skip to content

Commit

Permalink
docs(PPDSC-2827): update scenarios (#668)
Browse files Browse the repository at this point in the history 
* docs(PPDSC-2827): update scenarios

* Docs/ppdsc 2562 content updates miscellaneous (#633)

* 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]>

* Fix/ppdsc 2854 flaky tests (#680)

* fix(PPDSC-2854): don't set initial time until duration is set

* fix(PPDSC-2854): update baseline warning

* fix(PPDSC-2854): revert yarn lock changes

* Bumping to version v7.0.0 - [skip ci]

---------

Co-authored-by: jannuk59 <[email protected]>
Co-authored-by: Ravindren <[email protected]>
Co-authored-by: Stoyan Delev <[email protected]>
Co-authored-by: Product Platforms Service <[email protected]>
  • Loading branch information
@mstuartf @jannuk59
5 people authored Mar 2, 2023
1 parent 1c2d26e commit e381afa
Show file tree
Hide file tree
Showing 12 changed files with 249 additions and 481 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "newskit",
"version": "6.9.0",
"version": "7.0.0",
"description": "A React Component library implementing the News design language",
"keywords": [
"react",
Expand Down
6 changes: 4 additions & 2 deletions scripts/percy_local.sh
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@ if [[ $BRANCH_NAME == "main" ]]; then
exit 1
fi
echo "Running on main, so baseline images will be updated"
read -p "Are you sure you want to update the baselines? (y/n)" updateBaselinesRes
if [[ "$updateBaselinesRes" != "y" ]]; then
exit 1
fi
else
export PERCY_BRANCH="local run by ${USERNAME}"
fi

echo "PERCY_BRANCH=$PERCY_BRANCH"

# ask the user to input their API key
read -p "Enter the API key for the 'newskit-$1' project (you can find this in the Percy UI): " apiKey

Expand Down
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;
1 change: 1 addition & 0 deletions site/pages/components/visibility.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const VisibilityComponent = (layoutProps: LayoutProps) => (
introduced: 'v0.2.0',
codeUrl:
'https://github.com/newscorp-ghfb/newskit/blob/main/src/grid/visibility.tsx',
storybookId: 'components-visibility--story-visibility-component',
}}
>
<CommonSection
Expand Down
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 e381afa

Please sign in to comment.