newscorp-ghfb / newskit

The NewsKit Design system

NewsKit

NewsKit is News UK’s design system. It provides interactive building blocks and guidelines for crafting cohesive digital product interfaces and accelerating development. Build better products faster.

Environment	Link
Develop	https://www.newskit.dev-news.co.uk/
Develop	https://storybook.newskit.dev-news.co.uk/
Prod	https://www.newskit.co.uk/
Prod	https://storybook.newskit.co.uk/

🙌 Browser support

Chrome	Firefox	Safari
last 2 versions	last 2 versions	last 2 versions

✅ Pre-requisites

You will need to install the following as pre-requisites to getting started:

• Node.js We use two versions of node. You need to be on version: >=16.10.0 to run the application. In your terminal run the command nvm use to install the required version.

• Yarn to install the project dependencies

• (Windows Only) Linux Subsystem

• Additional setup required for WSL is documented here

📦 Getting Started

Once you have the above installed, run the following commands: Note that if you are on Windows machine, you need to run the wsl command first to run which ever linux environment you've installed on your machine.

git clone [email protected]:newscorp-ghfb/newskit.git
cd newskit
yarn && yarn dev

A few pages on the site use Google Sheets as a simple CMS, if you are contributing to the product you can request these variables from the team.

Testing

We use the following libraries for our automated tests:

• Jest and React Testing Library for unit testing
• Cypress for component and E2E testing
• cypress-axe for automated accessibility testing
• Percy for cross browser visual testing

For detailed information on how to run the automated tests, please visit Testing

👉 What’s next

• To start engineering with NewsKit, follow the steps in the quickstart guide.
• Have a question? Contact the NewsKit team via the contact form.

Styleguides

Commit Messages

Please follow this format for commit messages and PR titles:

[fix|feat|docs|chore|ci]([github issue number]): [description]

eg fix(999): menu z-order affects focus

Branch Names

The branch naming convention is

[fix|feat|docs|chore|ci]/[github issue number]-[short desscription]

eg git checkout -b fix/999-menu-z-order

🔗 Key Links

• Contributing to NewsKit
• NewsKit Documentation
• View NewsKit Design System npm package
• Github repository
• Medium
• Storybook

newskit's Issues

Add Progress indicator component scenarios - Storybook

Description

Add Progress indicator component scenarios- Storybook

Tasks/Steps

Using the designs create the storybook pages for the Progress indicator component.

The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

Not currently in Storybook, new story

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Progress indicator component pages

Then the pages will be as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Progress indicator component examples for consumers, aligning to the NK branding.

(A11y) - Accordion component investigation

Purpose

Feed a11y requirements into specification

Requirements

How the screen reader is supposed to read the component

The keyboard flow, using both TAB and SCAN (in more breakpoints if needed)

What type of information should be read out to the user on each step (each TAB press or SCAN move)

WCAG guidelines

How this can be achieved with Semantic HTML + Aria attributes.

https://baseweb.design/components/accordion/

Outcome/s

Feed into/update component specification

Run team through findings

Time box

2-3 Day

Supporting Documentation

(Bug) - Menu component documentation - sandbox

Describe the bug

Sandbox for menu is broken.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.newskit.co.uk/components/menu/
2. Click on "Edit on CodeSandbox" button

Actual behavior

Sandbox opens in new window and error appears "DependencyNotFoundError
Could not find dependency: '@emotion/react' relative to '/node_modules/newskit/esm/theme/emotion.js'"

Expected behavior

I'm expecting to see a working menu component with no javascript errors in console

Screenshots / Video / Test Environment

Desktop (please complete the following information):

• OS: macOS Monterey 12.6
• Browser Chrome
• Version 106.0.5249.103 (Official Build) (arm64)

Additional context

Add any other context about the problem here.

Test - Catherine Zenhub

Stuff

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behaviour
A clear and concise description of what you expected to happen.

Screenshots / Video / Test Environment
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Update Title bar component scenarios - Storybook

Description

Updates to the Title bar component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Title bar component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Remove title-bar, added variations to other stories
• Default - new story
• Variations - new story
• Overrides - new story

Acceptance/Testing Criteria

Given I am in Storybook
When I view the Title bar component pages
Then the pages will be updated as per the designs
And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Title bar component examples for consumers, aligning to the NK branding.

(Bug) - Custom Figma plugins links broken

Describe the bug

I can't see the plugin examples for Figma, I think the permissions on those files might not be allowing outsiders? :D

To Reproduce

Steps to reproduce the behavior:

1. Go to https://newskit.co.uk/getting-started/design/design-overview/#plugins
2. Click on View Theme Swapper Figma plugin OR View Theme Exporter Figma plugin
3. See error

Expected behavior

I should be able to see the examples

Screenshots / Video / Test Environment

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Edge
• Version 100.0.1185.39

Additional context

Add any other context about the problem here.

Composable Card

Introduction

This document proposes a new Card component built using composition.
The Card component is one of the most used in news titles. In order to be versatile and flexible, we decided to take the composability approach. NewsKit will provide the following sub-components: Card, CardLink, CardContent, CardMedia and CardActions which can be used together to create different cards.

Item	Name	Description
1	Card	Wrapper for the areas of the card
2	CardLink	Wrapper for links passed to the card, such as a headline. This can be used multiple times to create multiple links inside the card.
3	CardContent	Area for content, such as a headline, paragraph text, or flags
4	CardMedia	Area for media, such as image
5	CardActions	Area for additional interactive components, such as links or tags

What

We know that two titles and two cards are never the same. Our goal is to provide complete flexibility in how the card is displayed and built, making it easy to create and maintain.

Sample code

Card can be composed in different ways, and none of the sub-components are mandatory.

<Card>

  <CardMedia src="images/paht.jpg" />
	
  <CardContent>
    <H2>Title of the Card</H2>
	<P>Short text or news introduction</P>
  </CardContent>
	
  <CardActions>
    <Tag href="/sport">Sport</Tag>
    <Tag href="/football">Football</Tag>
  </CardActions>
  
</Card>

Proposed API

Card component

Card component extends GridLayout as such it has all props and overrides from it.

Props table

Item	Type	Description
rowGap	MQ<string>	If provided, applies rowGap to the grid
columnGap	MQ<string>	If provided, applies columnGap to the grid
rows	MQ<string>	Defines the line names and track sizing functions of the grid rows, using the grid-template-rows css property.
columns	MQ<string>	Defines the line names and track sizing functions of the grid columns, using the grid-template-columns css property.
autoFlow	MQ<string>	Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid, using the grid-auto-flow css property.
autoRows	MQ<string>	Specifies the size of an implicitly-created grid row track or pattern of tracks, using the grid-auto-rows css property.
autoColumns	MQ<string>	Specifies the size of an implicitly-created grid column track or pattern of tracks, using the grid-auto-columns css property.
justifyContent	MQ<string>	If parent container has remaining space, aligns the grid along the inline axis
alignContent	MQ<string>	If parent container has remaining space, aligns the grid along the block axis
justifyItems	MQ<string>	Aligns the grid items along the inline axis
alignItems	MQ<string>	Aligns the grid items along the block axis
areas	MQ<string>	Specifies named grid areas, establishing the cells in the grid and assigning them names. Visually represents the layout of the grid
inline	MQ< boolean >	Specifies whether the grid should be displayed inline

Overrides table

Attribute	Type	Description
width	MQ<string>	If provided, overrides the width of the grid
minWidth	MQ<string>	If provided, overrides the minWidth of the grid
maxWidth	MQ<string>	If provided, overrides the maxWidth of the grid
height	MQ<string>	If provided, overrides the height of the grid
minHeight	MQ<string>	If provided, overrides the minHeight of the grid
maxHeight	MQ<string>	If provided, overrides the maxHeight of the grid
marginInline	MQ<string>	Takes one space token to specify the logical inline start and end margin of the container. Can be used on breakpoints
marginInlineStart	MQ<string>	Takes one space token to specify the logical inline start margin of the container. Can be used on breakpoints
marginInlineEnd	MQ<string>	Takes one space token to specify the logical inline end margin of the container. Can be used on breakpoints
marginBlock	MQ<string>	Takes one space token to specify the logical block start and end margin of the container. Can be used on breakpoints
marginBlockStart	MQ<string>	Takes one space token to specify the logical block start margin of the container. Can be used on breakpoints
marginBlockEnd	MQ<string>	Takes one space token to specify the logical block end margin of the container. Can be used on breakpoints
paddingInline	MQ<string>	Takes one space token to specify the logical inline start and end padding of the container. Can be used on breakpoints
paddingInlineStart	MQ<string>	Takes one space token to specify the logical inline start padding of the container. Can be used on breakpoints
paddingInlineEnd	MQ<string>	Takes one space token to specify the logical inline end padding of the container. Can be used on breakpoints
paddingBlock	MQ<string>	Takes one space token to specify the logical block start and end padding of the container. Can be used on breakpoints
paddingBlockStart	MQ<string>	Takes one space token to specify the logical block start padding of the container. Can be used on breakpoints
paddingBlockEnd	MQ<string>	Takes one space token to specify the logical block end padding of the container. Can be used on breakpoints

CardMedia

Props table

Item	Type	Description
media	ImageProps | ReactNode	If this parameter is provided as ImageProps object (see Image documentation ), it will render the media as an image. If this is provided as a custom React component, it will render the React component directly.

CardContent

extends GridLayout, so all props and overrides are the same Card’s table

CardActions

extends GridLayout, so all props and overrides are the same Card’s table

More examples

Horizontal Card

<Card columns="1fr 1fr" columnGap="space040">
  <CardMedia src="image.jpg" />
  <CardContent>
    <H2 />
    <P />
  </CardContent>
</Card>

• columns prop defines the size and the number of columns, in this case the columns have the same size.
• columnGap prop defines the space between columns

Responsive Card

In order to change the visual position of components you can use the areas prop and define their position for different breakpoints. In the example below when the screen is small ( xs ) the card will be rendered as horizontal, on larger screens ( md ) the card will be displayed as vertical.

const xsArea = `media content`;
const mdArea = `
	media
	content
`;

<Card areas={{xs: xsArea, md: mdArea}} columnGap="space040" rowGap="space040">
  <CardMedia src="image.jpg" />
    <CardContent>
      <H2 />
      <P />
    </CardContent>
</Card>

---

Storybook demos

Storybook code examples

Remove AWS/EKS env vars from Circle

Description

NB K8S/EKS and DNS resources should be destroyed first (see related tickets PPDSC-2863 and PPDSC-2864).

Cleanup Circle only when the above AWS cleanup is complete in case the existing env vars are needed by Terraform as part of the resource destruction process. ie

1. Remove secrets-related AWS_* env vars from contexts (EXCEPT for AWS_DEFAULT_REGION and S3_AWS_ASSUME_ROLE_ARN)
2. Remove ECR_* env vars from contexts.
3. Remove also any variables that are not needed anymore from Newskit project env variables (is not a context)

Acceptance Criteria

Pipeline still works (should do as Xin has already removed k8s and eks steps)

Circle secrets Confluence page updated: https://nidigitalsolutions.jira.com/wiki/spaces/NPP/pages/4267081936/DS+Circle+CI+-+Secrets+Overview

Update axe-core package

Description

Our axe-core package has been outdated compared to the one used as a Chrome extension.
The Chrome one shows much more errors now.

NB The upgrade will require structural changes to components like tabs. Latest axe rules are more fussy about roles and subroles.

Tasks/Steps

• Update axe-core
• Update all issues that will come with the update

Acceptance Criteria

• new failing accessibility test on docs and comps

Supporting Information

Process/sequence flows, wireframes, third party documentation, tech feasibility, architecture overview/documentation, high level design, data specs etc...

Dependencies

Any known business dependencies or reasons to engage with another team and input into their roadmap/timings

Update Tabs component scenarios - Storybook

Description

Updates to the Tabs component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Tabs component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• tabs-distribution-start - is this needed? Any difference to default?
• tabs-horizontal - now Size - horizontal
• tabs-vertical - now Size - vertical
• omit tabs-horizontal-icon-labeltabs-horizontal-icon-labeltabs-horizontal-icon-and-labeltabs-vertical-variants-label-or-icon
• Label only and icon only
these variations are covered in Labels and Icon, and Label only and icon only
• tabs-content - omitted. Any difference to default?
• tabs-with-presets-overrides - omitted. Is this different to custom colours?
• tabs-with-presets-shadows - omitted. Do want to encourage people to use this styling? It’s way off brand

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Tabs component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Tabs component examples for consumers, aligning to the NK branding.

(Spike) - Layer manager

Purpose of the spike

The idea of ​​having a component to cater for adding and removing a new layer when needed is something we have discussed before. With the addition of new components like the Select Panel that need to lay on top of another piece of content the question of layer manager arises again.

We need to figure out how the following concepts work in combination:

• react portals
• stacking context/stacking order
• z-indexing: a component to create new layers and eventually take care of the last z-index value added to a layer

Clear up the concept of a layer

• how to create a new stacking context - element with a z-index set and the position is not 'static' OR element with one of the following properties set: `transform, filter, perspective, clip-path, mask, maskImage, maskBorder

The outcome of the Select Panel investigation:
#56 (comment)

Outcomes of the Spike

List down all components which need to be rendered in a new layer

Work closely with designers to investigate possible overlapping of widgets (components):

• a form with a select input inside a model/drawer
• tooltip/popover etc rendering on the page
• modal/drawer

Time box

3 days

Supporting Information

Previous spike:

https://nidigitalsolutions.jira.com/wiki/spaces/NPP/pages/2738552833/PPDSC-1463+-+Spike+z-index+manager

Sample Feature request

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Update Select component scenarios - Storybook

Description

Select component scenarios- Storybook

Tasks/Steps

Using the designs create the storybook pages for the Progress indicator component.

The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

Not currently in Storybook, new story

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Progress indicator component pages

Then the pages will be as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Progress indicator component examples for consumers, aligning to the NK branding.

(Task) - Layout Props (margin and padding) - 3/6

Description

Following the spike, we are implementing logical properties in our components.

Tasks/Steps

• Add logical margin and padding support to the following components:

Dialog
Divider
Drawer
Email Input – mark as deprecated
Fieldset
Form
Grid – does this make sense?

• Add storybook scenario to demonstrate.

• Make sure that the logical properties still work when applied from the defaults.
  Trickier components that need some rework could be handled in a separate ticket, example:
  #84 (comment)

Acceptance Criteria

The listed components need to support logical margin and padding properties

Update Switch component scenarios - Storybook

Description

Updates to the Switch component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Switch.

• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• ‘Size’ page showing the default switch are missing the track icons.
• ‘Thumb and track icon options’ page we need to update the thumb icons so they swap between checked and unchecked.
• Updated the ‘Label alignment’ page to match the same as Checkbox and Radio Button components.
• Updated the label copy on the ‘Label alignment’ page.
• Moved the narrow track example to the ‘Overrides’ page.
• Added icon override examples to the ‘Overrides’ page.
• Reduced the outline override example to one on the ‘Overrides’ page.
• Updated the label copy on the ‘Overrides’ page.
• Omitted the size / space overrides for the Switch.
• Logical props moved to the ‘Overrides’ page.

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Switch component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Switch examples for consumers, aligning to the NK branding.

Supporting Information

Designs: NewsKit - Storybook Project - Feedback and Status

Dependencies

N/A

Review with design when ready.

(Bug) - `StructuredList` with `Divider` has an a11y issue

Describe the bug

The StructuredList component when rendered with divider prop has an accessibility issue.
It renders <hr/> elements as direct children of <ul> next to <li>s which is not correct.

https://dequeuniversity.com/rules/axe/4.4/list

This gets triggered by the axe plugin only if we pass role="list" prop to the <StructuredList> and that's why is doesn't show as an issue on the newskit storybook. If you pass a role to any example with dividers it should start complaining.

To Reproduce

Steps to reproduce the behavior:

1. Render a StructuredList with divider and pass a role="list" to it.
2. Open and scan the whole page with axe DevTools extension
3. See "Certain ARIA roles must contain particular children" error

To solve this problem, you need to fix at least (1) of the following:
Element has children which are not allowed (see related nodes)
Element has no aria-busy="true" attribute

Here is a code snippet of how we use the StructuredList

          <StructuredList
            divider={showDivider}
            ariaLabel={ariaLabel || introductionProps?.title}
            {...{ role: 'list' }}
          >
            {children as any}
          </StructuredList>

Link to the source: https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/shared-components/src/ContentListView/ContentListView.tsx#L63-L69

Expected behaviour

An a11y error should not show. The ul can't have direct <hr> children.
A proposal to fix this could be to wrap the <hr> elements in <li> elements, hide them and move the aria-hidden from the hr to the wrapping li elements.

Screenshots / Video / Test Environment

Desktop (please complete the following information):

• OS: macOS Ventura
• Browser Chrome
• Version 110.0.5481.177

Additional context

Add any other context about the problem here.

Migrate NewsKit Demo into the main NewsKit Repo

Description

Currently, the NewsKit Demo is living in a separate repo outside of the organisation, this means that it is often overlooked when we want to make changes. We would like to migrate it to live within the NewsKit site so that it is available under the route https://newskit.co.uk/demo

The Demo site is used as a resource when presenting onboarding to new users for NewsKit

Links

https://newskit-demo.vercel.app/
https://github.com/lhaggar/newskit-demo

Tasks/Steps

• Migrate pages into the NewsKit Site
• Do any migrations required for NewsKit 7
• Ask Lewis to archive the old repo
• Use GridLayout instead of Stack for the layout
• Use Themes from Publisher in the demo
  • Remove Virgin? Add in Dow Jones
• Make notes for any additional improvements

Please make sure we are not adding fonts into the repo that we don’t have rights for!

Acceptance/Testing Criteria

As a user of the NewsKit site, I can access the demo on the same domain as the documentation.

Implement Card Composable

Description

We need to implement Card Composable component

Requirements

• Compoent to be named CardComposable
• CardMedia currently takes media={imageProps || React.Node },we should use children instead of React.Node for CardComposbale
• CardActions need to build on top of GridLayout instead of Block, in that way every Card-sub-component will have the same API
• Create a default areas prop on the CardComposable component
• Update some of the stories, eg Some of what's on the feature branch's "Overrides" story might need moving to a "Styling overrides" story if custom weskit storybook themes required for it.

Business Benefit/Value

Clear business reason stating why this piece of work is important to the business/technology. Any clear KPI's or goals it is attempting to meet. Any other known tangible or intangible benefits

Acceptance Criteria

All acceptance criteria must be met before task can be marked as 'done'

Design

Design handoff

Supporting Information

Process/sequence flows, wireframes, third party documentation, tech feasibility, architecture overview/documentation, high level design, data specs etc...

Dependencies

Any known business dependencies or reasons to engage with another team and input into their roadmap/timings

Update text cropping component scenarios - Storybook

Description

Updates to the text cropping component scenarios- Storybook

Tasks/Steps

Using the designs update the storybook pages for the text cropping component.

The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

Note the name of the pages also should be updated to match what we have in the designs.

Remove the limitSizeDecorator globally that we have in storybook, this was added due to a limitation in appliTools which we no longer have, we would possibly expect additional changed in the snapshots as a result of this.

Notes (main differences to what we have currently live versus the designs)

Can we use long page option in this case?

Acceptance/Testing Criteria

Given I am in Storybook

When I view the text cropping component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent text cropping component examples for consumers, aligning to the NK branding.

(Story) - Hannah test ticket

Description

Hannah test

Business Benefit/Value

Blah blah

Acceptance Criteria

All acceptance criteria must be met before task can be marked as 'done'

Design

Any relevant design information, including whether a design review will be needed and whether there will be visual changes

Supporting Information

Process/sequence flows, wireframes, third party documentation, tech feasibility, architecture overview/documentation, high level design, data specs etc...

Dependencies

Any known business dependencies or reasons to engage with another team and input into their roadmap/timings

(Task) Layout Props (margin and padding) - 2/6

Description

Following the spike, we are implementing logical properties in our components.

PRO TIP: if the component extends a component that already has layout props, like Block, Stack etc., you don’t need to implement it.

PRO TIP2: be wary of how the overrides are passed around. If component passes overrides as-is to children components and they also use logical props, you might unintentionally make the children use those logical props too. Tabs gives an example of how to get around it: Feat/ppdsc 1981 layout props 1 of 6 by MadMango · Pull Request #84 · newscorp-ghfb/newskit (github.com). Essentially, the omitLogicalPropsFromOverrides strips the logical props from overrides so that they can be passed down safely.

Tasks/Steps

1. Add logical margin and padding support to the following components:

• Aspect Ratio (Do not need logical properties)
• Audio Player
• Banner
• Byline
• Caption
• Card
• Checkbox
• Date Time

2. Make sure that the logical properties still work when applied from the defaults.
   Trickier components that need some rework could be handled in a separate ticket, example:
   #84 (comment)

Acceptance Criteria

The listed components need to support logical margin and padding properties

Supporting Information

Original spike: [PPDSC-1923 Relook at common layout props - NUK Tech JIRA](https://nidigitalsolutions.jira.com/browse/PPDSC-1923)

Proposed approach: spike(PPDSC-1923): testing logical layout props · newscorp-ghfb/newskit@91f8c38 (github.com)

Intro to logical properties:
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets | MDN (mozilla.org)

CSS Logical Properties and Values | CSS-Tricks - CSS-Tricks

Dependencies

Any known business dependencies or reasons to engage with another team and input into their roadmap/timings

Update Slider component scenarios - Storybook

Updates to the Slider component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Slider component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Added a ‘States’ page.
• Added a vertical sliders to all pages, and omitted the Vertical Slider examples page.
• Added a ‘Variations’ page that includes the 2 thumbs, and slider with labels examples.
• Added examples of the slider track size and the thumb border radius overridden.
• Slider with custom labels examples reduced and moved to the ‘Overrides’ page.
• Slider with custom style presets page omitted.
• Slider with custom renderers page omitted.
• Reduced the outline override example to one on the ‘Overrides’ page.
• Added Icon component override to the ‘Overrides’ page.
• Updated the label copy on the ‘Overrides’ page.
• Logical props example moved to the ‘Overrides’ page.

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Slider component pages

Then the pages will be updated as per the designs

Business Benefit/Value

Consistent Slider component examples for consumers, aligning to the NK branding.

Update Link component scenarios - Storybook

Description

Updates to the Link component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Link component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs

Notes (main differences to what we have currently live versus the designs)

• Change Link to Default: remove all variations
• Add inline, standalone, external stories: examples moved from default link story
• Add variations (examples from existing default story)
• Change link-within-text-paragraph to Inline in paragraph
• Change link-standalone-transition to Transitions

Acceptance/Testing Criteria

Given I am in Storybook
When I view the Link component pages
Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Review with design when ready.

Business Benefit/Value

Consistent Link examples for consumers, aligning to the NK branding.

Supporting Information

Designs: NewsKit - Storybook Project - Feedback and Status

Test Epic - a11y improvements

(Story) - Layout Props (margin and padding) - 1/6

Description

Following the spike, we are implementing logical properties in our components. We are not yet sure how to make it work with components that don’t support overrides, like Block, TextBlock, and Stack, that's why we're tackling them first.

Perhaps the new props should exist alongside the existing spaceStack, spaceInline, and spaceInset properties for now. Those existing properties could be deprecated for now and removed altogether in the next major release. If that’s what we do, the person picking up this ticket should create a ticket to remove the deprecated props in the next release.

Business Benefit/Value

This will enable our consumers to apply layout properties directly to components, instead of having to wrap them in a Block component every time they need to add a bit of margin or padding. This will make our components easier to use and reduce clutter.

Requirements

Add logical margin and padding support to the following components:

• Block
• TextBlock
• Stack
• Button
• Tabs - out of scope, should be handled in a separate ticket
• AssistiveText
• Label
• Link

Consider how we should handle existing spaceStack, spaceInline and spaceInset properties. Create a ticket to delete them in a future release if we decide to deprecate them now and remove them in the next major. That ticket would also need to include updating the docs to reflect the removal of those props.

A new doc page is needed to outline how these props are used since they are different from the usual top bottom left right approach. For now, its a good idea to take notes while doing this ticket then share with designers for the documentation page (which should be in a separate ticket)

Consider if this could be implemented in a way that allows us to add more logical props to components down the line without updating every single component file again. One approach would be to make the useLogicalProps function accept the name of the component calling the function as an argument and the function could refer to a directory of components with enabled properties listed for each component. That kind of breaks the composition pattern though so we should discuss this in the Pre-TA as well.

Acceptance Criteria

The listed components need to support logical margin and padding properties

Design

There should be no visual changes as a result of this work

Supporting Information

Original spike: [PPDSC-1923 Relook at common layout props - NUK Tech JIRA](https://nidigitalsolutions.jira.com/browse/PPDSC-1923)

Proposed approach: spike(PPDSC-1923): testing logical layout props · newscorp-ghfb/newskit@91f8c38 (github.com)

Intro to logical properties:Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets | MDN (mozilla.org)

CSS Logical Properties and Values | CSS-Tricks - CSS-Tricks

Dependencies

Any known business dependencies or reasons to engage with another team and input into their roadmap/timings

Inline Drawer pushes the content

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to Inline Drawer Storybook ( https://storybook.newskit.co.uk/?path=/story/components-drawer--story-inline )
2. Click on "Right" button
3. During the opening transition, the content outside the drawer its been pushed ( check the attached video )

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots / Video / Test Environment

Untitled.mov

Desktop (please complete the following information):

• OS: iOS
• Browser: Chrome, Safari, Firefox
• Version: latests

Additional context

Add any other context about the problem here.

newskitLightTheme

npm link shows newskitLightTheme as a prop value that we can pass into theme prop for NewsKitProvider component.

But when we search for more details for newskitLightTheme on the Newskit website, the search provide no details or results relating to it.

BaseSwitch: Move data-testid above ...restProps

Description

Gabriel Dimitrov from Render team noticed that their tests are failing after updating to the new NewsKit version (5.4.2).

This because we have introduced a data-testid, which sits below {…restProps} overriding their data-testid.
https://newsuktechnology.slack.com/archives/CTFGLAK9C/p1651070751292519

Tasks/Steps

In BaseSwitchm move data-testid up, before {…restProps}

Acceptance/Testing Criteria

data-testid should not be hardcoded and consumers should be able to change it

Flag component has data-testid above props as well.

Supporting Information

(Process/sequence flows, wireframes, third party documentation, tech feasibility, architecture overview/documentation, high level design, data specs etc...)

Dependencies

(Any known business dependencies or reasons to engage with another team and input into their roadmap/timings)

Layer manager -test

Purpose of the Spike

The idea of ​​having a component to cater for adding and removing a new layer when needed is something we have discussed before. With the addition of new components like the Select Panel that need to lay on top of another piece of content the question of layer manager arises again.

We need to figure out how the following concepts work in combination:

react portals

stacking context/stacking order

z-indexing: a component to create new layers and eventually take care of the last z-index value added to a layer

Clear up the concept of a layer

how to create a new stacking context - element with a z-index set and the position is not 'static' OR element with one of the following properties set: `transform, filter, perspective, clip-path, mask, maskImage, maskBorder

The outcome of the Select Panel investigation:

#56 (comment)

Outcomes of the Spike

List down all components which need to be rendered in a new layer

Work closely with designers to investigate possible overlapping of widgets (components)

A form with a select input inside a model/drawer

tooltip/popover etc rendering on the page

modal/drawer

Time box

3 days

Supporting Information

Previous spike:

Update Radio button component scenarios - Storybook

Description

Updates to the Radio button component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Radio.

• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Updated the no label example on the ‘Label alignment’ page, removing the label at the start position.
• Updated the label copy on the ‘Label alignment’ page.
• Updated the label copy on the ‘Radio group’ page.
• Reduced the outline override example to one on the ‘Overrides’ page.
• Updated the label copy on the ‘Overrides’ page.
• Logical props example moved to the ‘Overrides’ page.

Acceptance/Testing Criteria

Given I am in Storybook
When I view the Radio button component pages
Then the pages will be updated as per the designs
And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Radio button examples for consumers, aligning to the NK branding.

Supporting Information

Designs: NewsKit - Storybook Project - Feedback and Status

Dependencies

N/A

Review with design when ready.

Option to have `full-width` cell in structuredListItem when there is only one child

Is your feature request related to a problem? Please describe.

When there is only one child, the user would like to remove the padding around the cell. Currently this is not doable in structuredListCell because it's using xs={12}.

Describe the solution you'd like

Ideally we should have an option to pass xs='full-width'so the padding will be removed.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.
Add a prop like below

      if (childrenArray.length === 1) {
        return (
          <StyledGrid
            xsRowGutter="space000"
            xsMargin="space020"
            lgMargin="space030"
            overrides={overrides}
            hasHref={hasHref}
          >
            <StyledCell xs={fullWidthCell? 'full-width': 12} align={alignCell1}>
              {childrenArray[0]}
            </StyledCell>
          </StyledGrid>
        );
      }

Additional context

Copy the below scenario in storybook to view the issue

        <StructuredList
          ariaLabel="list"
          overrides={{
            paddingInline: 'space000',
            paddingBlock: 'space000',
            width: 'unset',
          }}
        >
          <StructuredListItem
            ariaLabel="list item"
            overrides={{
              paddingInline: 'space000',
              paddingBlock: 'space000',
            }}
          >
            <StructuredListCell>
              <HeadingTextBlock>[Cell 1]</HeadingTextBlock>
            </StructuredListCell>
          </StructuredListItem>
        </StructuredList>

Update Tooltip component scenarios - Storybook

Description

Updates to the Tooltip component scenarios- Storybook

Tasks/Steps

Using the designs update the storybook pages for the Tooltip component.

The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Default: removed variations - moved to own story
• Placements and placements visual test - use what currently stands (screenshots below)
• Variations: new story
• Overrides: change colours and styles

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Tooltip component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Tooltip component examples for consumers, aligning to the NK branding.

Catherine - Test

Accessibility fixes for docs site: Add skip to main content link

Description

Including a skip link gives users the option to bypass the top-level navigation links and jump to the main content on a page. This helps users who navigate using the keyboard get to the content quickly.

https://webaim.org/techniques/skipnav/

Tasks/Steps

• Create a “Skip to content” button component in site/. From HTML point of view should be an tag, pointing to the main content of the page through a #link.For TADo we want the button to appear in every page? if yes how do we know where to point take the use every time? do we always have a main element? or something to take the user to? or it needs to change per page, using a config file with info?

• Should be the first focusable element on the page (or after the logo) Designers to provide a design on where this button should appear on the page and content)

• Visually hidden until receives focus from tabbing

• Affects all pages

Acceptance Criteria

• Using only the keyboard, use the link to move focus to the main content of the page

• After moving focus to the main content, the next tab should move you to the first interactive element on the page

• Review with Design

Accessibility fixes for docs site: Mobile menu keyboard trap

Description

The close button on the mobile menu can’t be accessed by keyboard. When you expand the menu you cannot get back to the close button using just the keyboard. We’re relying on the user hitting escape.

video_640.mp4

Task

Include the close button in the menu focus order, after the user tabs through all the menu options.

A/Cs

The user can access the menu close button using keyboard alone

Review with Design

Mark `createTealiumHandler` as deprecated

Is your feature request related to a problem? Please describe.

Data team is now using window.tealiumTrack() as a replacement of utag. This means NewsKit users should use

createTealiumTrackHandler:
extendedWindow.tealiumTrack(e);

instead of

createTealiumHandler:
extendedWindow.utag.view(e)
extendedWindow.utag.link(e);

Currently NewsKit export both handlers and Render team is using the createTealiumHandler, this results in help-hub and my account also using createTealiumHandler

Describe the solution you'd like

I suggest that we mark createTealiumHandler as deprecated and update the docs to point user to use the createTealiumTrackHandler

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

(Bug) - Tabbing into a checkbox breaks form validation

Describe the bug

PPDSC-2025

Tabbing into a checkbox breaks Form validation.

It was originally reported by Antoaneta from Render team, they should be notified when this is fixed.

Xin Wang said that it also happens in form-input-checkbox scenario if you add the validationMode & revalidationMode.
That should be checked and fixed as well, hopefully, it’s the same bug.

To Reproduce

The steps to reproduce the bug are in a storybook example in the branch attached to this ticket:

1. Enter a valid value into the username field (5 characters or longer)
2. Tab into the next field (green validation tick still there)
3. Tab into the next field - checkbox (green validation tick still there)
4. Shift-Tab back to the previous field (green validation tick is gone now)

Expected behavior

Tabbing into a checkbox should not break the validation of an input filed

Screenshots / Video / Test Environment

I’ve also attached a video of the bug.

screencast-localhost_6006-2022.02.17-14_08_23.mp4

Desktop:

• OS: Big Sur
• Browser: Chrome, all
• Version: 98.0.4758.109

Smartphone (please complete the following information):

• Device: N/A
• OS: N/A
• Browser: N/A
• Version: N/A

Additional context

Add any other context about the problem here.

Update font-smoothing - Storybook

Description

We noticed when reviewing the latest from the solutions team that fonts are rendering lighter than on our Storybook.

Delivery instructions - https://newskit-render.ceng-dev.newsuk.tech/account/edit/delivery-instructions

Tasks/Steps

There is a CSS property -webkit-font-smoothing: antialiased; causing this.

Not sure what the default should be?

Should this also be an update to the NK Light theme in code?

Probably should be added to Storybook, as it is there on the docs site (left is storybook, right is from solutions):

We should add it globally to storybook

Review with design when ready.

Update Axe-core and fix any errors

Description

Dow Jones reported an A11Y error coming from the Tab component (having a quick check with Stoyan the response seems to actually be the scroll)Render reported also an issue where their select input for Country (on address form) was failing when running the axe-dev plugin.The select is receiving an aria-described by id for an element not present in the DOM

Notify render team if this gets fixed

We haven’t had any test failing with that error, even if we run Axe-core. This because our version is a bit old (29/10/2021) and they have added a new set of rules in the last months.

We should then update axe-core

Also update cypress-axe

Fix any issues (timebox to 3 days) if we don’t fix all the issue create a new ticket/s with next steps

Then notify DOW once fixed and on the next release

Notify Render team once fixed and on the next release

ACCEPTANCE CRITERIA

Axe-core should be updated to the latest version
We should not have any errorNotify DOW that their issue has been solved, hopefully should come up as an error once we update the package.

Timebox

3 days

Shrink all title and description containers for the docs site foundation pages

Description

For the following components

• ContentPrimary
• ContentSecondary
• ContentTertiary
• Inline message

Title and description should take up a maximum of 10 cells of the grid, and should overflow to another line if the maxWidth is exceeded - images, code blocks shouldn’t be impacted, only where we use text that spans the full 12 columns currently.Here is a good page to reference as an example: https://www.figma.com/file/IwXXJZzIuDogynCIBRBUHz/01---NK-Web---Guides---Instrumentation-setup?node-id=134%3A193386 (Reminder: Use ctrl + G to show grids on the page)

Tasks/Steps

(All known tasks/steps that need to be carried out)

Acceptance/Testing Criteria

(All testing criteria must be met before task can be marked as 'done')

Supporting Information

initial work

docs/PPDSC-0000-foundations-templates-paola

Dependencies

(Any known business dependencies or reasons to engage with another team and input into their roadmap/timings)

Image

Update Toast component scenarios - Storybook

Description

Updates to the Toast component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Toast component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Default: removed variations - moved to own story
• Title and action: removed, moved to variations
• Variations: new story
• Overrides: change colours and styles

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Toast component pages

Then the pages will be updated as per the designs

Business Benefit/Value

Consistent Toast component examples for consumers, aligning to the NK branding.

(Bug) - Menu component documentation - interactive demo

Describe the bug

Interactive demo in documentation for menu component is broken.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://www.newskit.co.uk/components/menu/
2. Scroll down to "Interactive Demo"
3. Click on "Group 1-item 1" or any other item

Actual behavior

The site reloads and opens a homepage

Expected behavior

I'm expecting to see some menu appearing somewhere on the page

Screenshots / Video / Test Environment

Screen.Recording.2022-10-13.at.09.54.51.mov

Desktop (please complete the following information):

• OS: macOS Monterey 12.6
• Browser Chrome
• Version 106.0.5249.103 (Official Build) (arm64)

Additional context

Add any other context about the problem here.

Update Tag component scenarios - Storybook

Description

Updates to the Tag component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Tag.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Remove tag, added variations to other stories
• Sizes - new story
• State - new story

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Tag component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Tag examples for consumers, aligning to the NK branding.

Supporting Information

Designs: NewsKit - Storybook Project - Feedback and Status

Dependencies

N/A

Review with design when ready.

Add the feedback element & transitionPreset for feedback to Slider & seekBar thumb

After the spike #143 , we decided to go with the approach of adding a feedback element so it’s consistent with checkbox & radio button. An example can be found in the spike.In this ticket, we would like to achieve the below:

• Add the feedback element for the slider thumb- Align to this default styling for the feedback element across checkbox, radio button, switch, & slider (thumb - also for seekBar thumb & volume thumb)- Add transitionPreset to the feedback element of slider thumb. For detailed requirements, please see : https://nidigitalsolutions.jira.com/wiki/spaces/NPP/pages/3703605055/Checkbox+Radio+Button+-+Motion+Specification#Default-Transition-Presets---Feedback-element

-Add opacity to the style preset interface

-Investigate how we can use one style preset for all Form components

• Consider the intents for Checkbox & Radio Button, as they will require a different styling (uses a different colour token for the feedback background colour as the feedback should update to match the intent styling ie. red, green). This Figma file illustrates this and provides the information needed: https://www.figma.com/file/XVkafhOU0lZZ16zoblLYiu/%5BNewsKit-Design-System%5D-Default-component-styling-updates?node-id=1290%3A36529

-A new transition preset for opacity (backgroundOpacityChange (name tbc))

-Update BaseSwitch component and remove the hardcoded opacity values (might be out of scope for this ticket and will be handled in ) https://nidigitalsolutions.jira.com/browse/PPDSC-1965

Couple of things to note:

The feedback default styling will use opacity (CSS for now, and opacity tokens when we have them added to the system that is looking at with his ticket - sync as needed regarding this), which changes on hover and active states.

The Feedback element is for hover/active, and not to appear on focus states (tab through interactive elements on a page). The focus style will be using the outline as previously explored with this spike documentation, and there is another ticket to look at a POC for this also in the backlog: https://nidigitalsolutions.jira.com/browse/PPDSC-2076

Update issue templates

Description

We would like to trial using GitHub issues, update the templates so they align with what we have in Jira

Tasks/Steps

Update issue types we have in GitHub to more closely align to what we have in Jira - see templates

We have a board that reflects Jira

We have issues for the audio player in Github

Acceptance Criteria

The page is similar to our template existing templates

https://github.com/newscorp-ghfb/newskit/issues/new/choose

The board at this URL is similar to Jira

https://github.com/orgs/newscorp-ghfb/projects/15/views/4

Accessibility fixes for docs site: Multiple H1s on home page

Description

There are multiple

on the NewsKit home page. A page should typically have only one

and use headings in order.

Tasks/Steps

• Change 3 x banner headers to H2. Currently: Latest Blog, NewsKit v6.9.0, Contribute
• Change 6 x 3-column headings to H3. Currently: Theme, Components, Patterns and GitHub, Storybook, Blog

Acceptance Criteria

Review with Design

Supporting Information

Update Standfirst component scenarios - Storybook

Description

Updates to the Standfirst component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Standfirst component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Standfirst component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Standfirst component examples for consumers, aligning to the NK branding.

Update Video player component interface & Storybook scenarios

Description

Updates to the Video player component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Video Player component.
• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.
• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• Default: removed variations - moved to own story
• Placements and placements visual test - use what currently stands (screenshots below)
• Variations: new story
• Overrides: change colours and styles

Acceptance/Testing Criteria

• Given I am in Storybook
• When I view the Video Player component pages
• Then the pages will be updated as per the designs
• And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Video Player component examples for consumers, aligning to the NK branding.

Accessibility fixes for docs site: Focus order on secondary pages

Description

The focus order on the docs site secondary pages starts with the sidebar menu. The user has to tab through the sidebar menu before they reach the NewsKit logo and the main menu. Tab order should start with the logo and main menu, then move to the sidebar menu.

https://user-images.githubusercontent.com/350953/226955313-b0faebcb-1358-4a46-be31-ecc8633a5360.mov

Task

• Change focus order to start with the logo > then main menu > then side menu. Affects all secondary pages

A/Cs

• Review with design