From 7874268066ffbeb599740f83014102f632762900 Mon Sep 17 00:00:00 2001 From: Rashika Date: Wed, 9 Nov 2022 12:28:01 +0530 Subject: [PATCH 01/22] docs(PPDSC-2399): unordered-list documentation --- .../components/unordered-list/anatomy-2.tsx | 70 +++ .../components/unordered-list/hero.tsx | 57 ++ .../options/marker-alignment.tsx | 421 ++++++++++++++ .../unordered-list/options/marker.tsx | 55 ++ .../components/unordered-list/usage/do-01.tsx | 105 ++++ .../components/unordered-list/usage/do-02.tsx | 225 ++++++++ .../unordered-list/usage/dont-01.tsx | 253 +++++++++ ...rdered-list.mdx => unordered-list-old.mdx} | 0 site/pages/components/unordered-list.tsx | 526 ++++++++++++++++++ site/routes.ts | 3 +- 10 files changed, 1714 insertions(+), 1 deletion(-) create mode 100644 site/components/illustrations/components/unordered-list/anatomy-2.tsx create mode 100644 site/components/illustrations/components/unordered-list/hero.tsx create mode 100644 site/components/illustrations/components/unordered-list/options/marker-alignment.tsx create mode 100644 site/components/illustrations/components/unordered-list/options/marker.tsx create mode 100644 site/components/illustrations/components/unordered-list/usage/do-01.tsx create mode 100644 site/components/illustrations/components/unordered-list/usage/do-02.tsx create mode 100644 site/components/illustrations/components/unordered-list/usage/dont-01.tsx rename site/pages/components/{unordered-list.mdx => unordered-list-old.mdx} (100%) create mode 100644 site/pages/components/unordered-list.tsx diff --git a/site/components/illustrations/components/unordered-list/anatomy-2.tsx b/site/components/illustrations/components/unordered-list/anatomy-2.tsx new file mode 100644 index 0000000000..d5e1eea8ce --- /dev/null +++ b/site/components/illustrations/components/unordered-list/anatomy-2.tsx @@ -0,0 +1,70 @@ +import React from 'react'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const Anatomy: React.FC = () => ( + + + + + + + + + + + + + +); + +export default Anatomy; diff --git a/site/components/illustrations/components/unordered-list/hero.tsx b/site/components/illustrations/components/unordered-list/hero.tsx new file mode 100644 index 0000000000..6c7663968a --- /dev/null +++ b/site/components/illustrations/components/unordered-list/hero.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import {Svg} from '../../svg'; +import {Rect} from '../../rect'; +import {Circle} from '../../circle'; + +export const hero: React.FC = () => ( + + + + + + + + + +); + +export default hero; diff --git a/site/components/illustrations/components/unordered-list/options/marker-alignment.tsx b/site/components/illustrations/components/unordered-list/options/marker-alignment.tsx new file mode 100644 index 0000000000..60db1d5154 --- /dev/null +++ b/site/components/illustrations/components/unordered-list/options/marker-alignment.tsx @@ -0,0 +1,421 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const markerAlignment: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default markerAlignment; diff --git a/site/components/illustrations/components/unordered-list/options/marker.tsx b/site/components/illustrations/components/unordered-list/options/marker.tsx new file mode 100644 index 0000000000..4baf00bd6c --- /dev/null +++ b/site/components/illustrations/components/unordered-list/options/marker.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const marker: React.FC = () => ( + + + + + + + + + + + + +); + +export default marker; diff --git a/site/components/illustrations/components/unordered-list/usage/do-01.tsx b/site/components/illustrations/components/unordered-list/usage/do-01.tsx new file mode 100644 index 0000000000..e60487bb34 --- /dev/null +++ b/site/components/illustrations/components/unordered-list/usage/do-01.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const Do01: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Do01; diff --git a/site/components/illustrations/components/unordered-list/usage/do-02.tsx b/site/components/illustrations/components/unordered-list/usage/do-02.tsx new file mode 100644 index 0000000000..a96230e0e0 --- /dev/null +++ b/site/components/illustrations/components/unordered-list/usage/do-02.tsx @@ -0,0 +1,225 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const Do02: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Do02; diff --git a/site/components/illustrations/components/unordered-list/usage/dont-01.tsx b/site/components/illustrations/components/unordered-list/usage/dont-01.tsx new file mode 100644 index 0000000000..31ed4869bc --- /dev/null +++ b/site/components/illustrations/components/unordered-list/usage/dont-01.tsx @@ -0,0 +1,253 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const Dont01: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Dont01; diff --git a/site/pages/components/unordered-list.mdx b/site/pages/components/unordered-list-old.mdx similarity index 100% rename from site/pages/components/unordered-list.mdx rename to site/pages/components/unordered-list-old.mdx diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx new file mode 100644 index 0000000000..adb2cb6682 --- /dev/null +++ b/site/pages/components/unordered-list.tsx @@ -0,0 +1,526 @@ +import React from 'react'; +import { + InlineMessage, + toNewsKitIcon, + UnorderedList, + UnorderedListProps, +} from 'newskit'; +import {Info as FilledInfo} from '@emotion-icons/material/Info'; +import {LayoutProps} from '../../components/layout'; +import {ComponentPageTemplate} from '../../templates/component-page-template'; +import {MetaStatus} from '../../components/meta/types'; +import {getIllustrationComponent} from '../../components/illustrations/illustration-loader'; +import {UsageKind} from '../../components/usage-card'; +import {IconFilledCircle} from '../../components/icons'; +import {Link} from '../../components/link'; +import {InlineCode} from '../../components/markdown-elements'; + +const IconFilledInfo = toNewsKitIcon(FilledInfo); + +const infoIcon = ( + +); + +const commonPropsRows = [ + { + name: 'children', + type: 'Array', + description: ( + <> + An array of react nodes to populate the unordered list component. +
+
+ Note - if the node is a react element an unique key must be given to + each element within the array. + + ), + required: true, + }, + { + name: 'listItemMarker', + type: 'IconComponent', + description: 'Optional icon component to override the list style.', + }, + { + name: 'markerAlign', + type: ['start', 'center', 'end'], + default: 'center', + description: + 'Vertically aligns the listItemMarker when the list has more than one line.', + }, +]; +const commonOverridesRows = [ + { + attribute: 'spaceStack', + type: 'MQ', + default: 'space040', + description: + 'If provided, this overrides the space between the unordered list items.', + }, + { + attribute: 'content.stylePreset', + type: 'MQ', + default: 'inkBase', + description: + 'If provided, this overrides the style preset applied to the unordered list content.', + }, + { + attribute: 'content.typographyPreset', + type: 'MQ', + default: 'editorialParagraph010', + description: + 'If provided, this overrides the typography preset applied to the unordered list content.', + }, + { + attribute: 'marker.stylePreset', + type: 'MQ', + default: 'inkBase', + description: + 'If provided, this overrides the style preset applied to the unordered list marker.', + }, + { + attribute: 'marker.spaceInline', + type: 'MQ', + default: 'space020', + description: + 'If provided, this overrides the space between the unordered list marker and the content.', + }, + { + attribute: 'size', + type: 'string', + default: 'iconSize005', + description: ( + <> + If provided, overrides the size of the unordered list marker. +
+
+ Note - it is also possible to set the icon size by passing it directly + as a size prop to the marker. However, by doing + this you will override the iconSize passed from + overrides. + + ), + }, + { + attribute: 'marginInline', + type: 'MQ', + description: + 'It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'marginInlineStart', + type: 'MQ', + description: + 'It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'marginInlineEnd', + type: 'MQ', + description: + 'It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'marginBlock', + type: 'MQ', + description: + 'It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'marginBlockStart', + type: 'MQ', + description: + 'It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'marginBlockEnd', + type: 'MQ', + description: + 'It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'paddingInline', + type: 'MQ', + description: + 'It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'paddingInlineStart', + type: 'MQ', + description: + 'It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'paddingInlineEnd', + type: 'MQ', + description: + 'It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'paddingBlock', + type: 'MQ', + description: + 'It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'paddingBlockStart', + type: 'MQ', + description: + 'It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.', + }, + { + attribute: 'paddingBlockEnd', + type: 'MQ', + description: + 'It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.', + }, +]; + +const UnorderedListComponent = (layoutProps: LayoutProps) => ( + { + // const {...restProps} = state as UnorderedListProps; + // return ( + // + // + // ); + // }, + component: (props: UnorderedListProps) => ( + + ), + knobs: [ + { + name: 'List Data', + propName: 'children', + value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], + }, + { + name: 'Marker Align', + propName: 'markerAlign', + options: [ + { + label: 'center', + value: undefined, + isDefault: true, + }, + { + label: 'start', + value: 'start', + }, + { + label: 'end', + value: 'end', + }, + ], + }, + { + name: 'Marker Size', + propName: 'overrides', + options: [ + { + label: 'Default (iconSize005)', + value: {marker: {size: 'iconSize005'}}, + isDefault: true, + }, + { + label: 'iconSize010', + value: { + marker: { + size: 'iconSize010', + }, + }, + }, + { + label: 'iconSize020', + value: { + marker: { + size: 'iconSize020', + }, + }, + }, + ], + }, + { + name: 'Margin Preset Overrides', + propName: 'overrides', + options: [ + { + label: 'Default', + value: { + spaceStack: 'space040', + marker: { + spaceInline: 'space020', + }, + }, + isDefault: true, + }, + { + label: 'increaseSpacing', + value: { + spaceStack: 'space060', + marker: {spaceInline: 'space030'}, + }, + }, + ], + }, + { + name: 'Overrides', + propName: 'overrides', + options: [ + { + label: 'Default', + value: { + content: { + typographyPreset: 'editorialParagraph010', + }, + }, + isDefault: true, + }, + { + label: 'utilityButton020', + value: { + content: { + typographyPreset: 'utilityButton020', + }, + }, + }, + ], + }, + { + name: 'Style Preset Overrides', + propName: 'overrides', + options: [ + { + label: 'Default', + value: { + content: { + stylePreset: 'inkBase', + }, + marker: { + stylePreset: 'inkBase', + }, + }, + isDefault: true, + }, + { + label: 'buttonSolidPrimary', + value: { + content: { + stylePreset: 'buttonSolidPrimary', + }, + marker: { + stylePreset: 'buttonSolidPrimary', + }, + }, + }, + ], + }, + ], + }, + }} + anatomy={{ + introduction: + 'The unordered list contains one required element and one optional element.', + media: getIllustrationComponent('components/unordered-list/anatomy-2'), + rows: [ + { + name: 'Content', + description: 'The content of the unordered list', + component: ['Text Block'], + }, + { + name: 'Marker', + description: + 'The marker applied to the content of the unordered list', + component: ['Icon'], + optional: true, + }, + ], + }} + options={{ + introduction: + 'The unordered list has options that can be used to provide an appropriate experience for different use cases.', + cards: [ + { + title: 'Marker', + description: + 'The marker applied to the content of the unordered list can be overridden to use any icon.', + media: getIllustrationComponent( + 'components/unordered-list/options/marker', + ), + }, + { + title: 'Marker alignment', + description: + 'The marker can be aligned at the centre, start, or end of the unordered list content.', + media: getIllustrationComponent( + 'components/unordered-list/options/marker-alignment', + ), + }, + ], + }} + usage={{ + introduction: + 'The unordered list has options that can be used to provide an appropriate experience for different use cases.', + layout: '2-span', + cards: [ + { + description: + 'Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.', + kind: UsageKind.DO, + media: getIllustrationComponent( + 'components/unordered-list/usage/do-01', + ), + }, + { + description: + 'Avoid unordered lists in instances where items are required to appear in numerical order. Instead use an ordered list.', + kind: UsageKind.DONT, + media: getIllustrationComponent( + 'components/unordered-list/usage/dont-01', + ), + }, + { + description: + 'Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read.', + kind: UsageKind.DO, + media: getIllustrationComponent( + 'components/unordered-list/usage/do-02', + ), + }, + ], + }} + accessibility={{ + introduction: ( + <> + The unordered list has the following accessibility considerations: +
+
+ + <> + The ul element is for{' '} + + grouping a collection of items + {' '} + that don't need to be in a specific numerical order. + + <> + Unordered list are not keyboard operable unless the list items + themselves are operable e.g. with links. + + <> + + Using unordered lists purely as a means of indenting text is + discouraged. + {' '} + This is a stylistic issue and indenting of text can be achieved + using the{' '} + + text block component. + + + + + ), + }} + componentAPI={{ + components: [ + { + title: 'Unordered list', + summary: + 'The unordered list has a range of props that can be used to define an appropriate experience for different use cases.', + propsRows: commonPropsRows, + propsFooter: ( + <> + + Any prop valid on an{' '} + + ul The unordered list element + + , is also valid on the unordered list component. + + + ), + overridesRows: commonOverridesRows, + }, + ], + }} + related={{ + related: ['Ordered List', 'Text Block'], + }} + /> +); + +export default UnorderedListComponent; diff --git a/site/routes.ts b/site/routes.ts index 2893549e12..31715b08b4 100644 --- a/site/routes.ts +++ b/site/routes.ts @@ -720,7 +720,8 @@ export const routes = [ title: 'Unordered List', page: true, id: '/components/unordered-list', - description: 'Typically is a bulleted list of items.', + description: + 'Unordered lists make blocks of related text easier to read, structuring information of equal value into manageable bulleted items.', illustration: 'components/unordered-list-illustration', }, ], From 329d9e54e4e0f9102187d837504be8318eab84bf Mon Sep 17 00:00:00 2001 From: Rashika Date: Thu, 10 Nov 2022 11:56:41 +0530 Subject: [PATCH 02/22] docs(PPDSC-2399): unordered-list documentation demo section --- site/pages/components/unordered-list-old.mdx | 232 ------------------- site/pages/components/unordered-list.tsx | 45 ++-- 2 files changed, 22 insertions(+), 255 deletions(-) delete mode 100644 site/pages/components/unordered-list-old.mdx diff --git a/site/pages/components/unordered-list-old.mdx b/site/pages/components/unordered-list-old.mdx deleted file mode 100644 index 84e46cbe39..0000000000 --- a/site/pages/components/unordered-list-old.mdx +++ /dev/null @@ -1,232 +0,0 @@ -import Layout from '../../components/layout'; -import Playground from '../../components/playground'; -import Prop from '../../components/prop'; -import {LegacyBlock} from '../../components/legacy-block'; -import {CodeFromDefaultPresets} from '../../components/code'; -import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props'; - -import {UnorderedList} from 'newskit'; -import {IconFilledFacebook} from '../../components/icons/icon-filled-facebook.tsx'; -import {IconFilledTwitter} from '../../components/icons/icon-filled-twitter.tsx'; - -export default Layout; - -# Unordered List - -## Overview - -### Usage - -An unordered list can be used to produce a list of related content prefixed with no bullets as default, this can be optionally overridden with a custom icon. - -## Props - - - - An array of react nodes to populate the list components. - If the node is a react element an unique key must be given to each element within the array. - - - Optional icon component to override the list style. - - - Vertically align the listItemMarker when the list takes more than one line. - - - If provided, overrides the respective presets for the component and provided elements. - - If provided, this overrides the space between the list items. - - - - If provided, this overrides the style preset applied to content. - - - If provided, this overrides the typography preset applied to content. - - - - - If provided, this overrides the style preset applied to the marker. - - - If provided, this overrides the space between the marker and the content. - - - If provided, this overrides the marker icon size. -
-
- Note: You can also set the icon size by passing it directly as a size prop to the icon, - but by doing this you will override the iconSize passed from overrides. - We discourage this approach but we will keep the functionality - in case it is needed. - - - -Refer to the defaults below for the full object structure: - - - - - - -## Playground - - - -For more information on overriding component defaults, see the docs [here](/theme/theming/component-defaults/). diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index adb2cb6682..1f4c0546e8 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -14,6 +14,7 @@ import {UsageKind} from '../../components/usage-card'; import {IconFilledCircle} from '../../components/icons'; import {Link} from '../../components/link'; import {InlineCode} from '../../components/markdown-elements'; +import {IconFilledFacebook, IconFilledTwitter} from '../../../src/icons'; const IconFilledInfo = toNewsKitIcon(FilledInfo); @@ -210,34 +211,31 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - // component: state => { - // const {...restProps} = state as UnorderedListProps; - // return ( - // - // - // ); - // }, - component: (props: UnorderedListProps) => ( - - ), + component: (props: UnorderedListProps) => , knobs: [ { name: 'List Data', propName: 'children', value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], }, + { + name: 'List Item Marker', + propName: 'listItemMarker', + options: [ + { + label: 'Unset', + value: undefined, + }, + { + label: 'twitter', + value: IconFilledTwitter, + }, + { + label: 'facebook', + value: IconFilledFacebook, + }, + ], + }, { name: 'Marker Align', propName: 'markerAlign', @@ -359,7 +357,8 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( }, ], }, - ], + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ] as any, }, }} anatomy={{ From 572ec57cbc1fed3ffc6cfc0292e879b9bd973973 Mon Sep 17 00:00:00 2001 From: Rashika Date: Thu, 10 Nov 2022 12:23:12 +0530 Subject: [PATCH 03/22] docs(PPDSC-2399): unordered-list documentation demo section --- site/pages/components/unordered-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 1f4c0546e8..530cbadc4e 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -199,7 +199,7 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( }} componentDefaultsKey="unorderedlist" meta={{ - status: MetaStatus.Beta, + status: MetaStatus.Supported, introduced: 'v0.2.0', codeUrl: 'https://github.com/newscorp-ghfb/newskit/tree/main/src/unordered-list', From e8f7b7770de462d260d917a8f7ddc8274ca6d0ad Mon Sep 17 00:00:00 2001 From: Rashika Date: Fri, 11 Nov 2022 11:47:39 +0530 Subject: [PATCH 04/22] docs(PPDSC-2399): design review changes --- site/pages/components/unordered-list.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 530cbadc4e..b1b5339d0c 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -14,7 +14,7 @@ import {UsageKind} from '../../components/usage-card'; import {IconFilledCircle} from '../../components/icons'; import {Link} from '../../components/link'; import {InlineCode} from '../../components/markdown-elements'; -import {IconFilledFacebook, IconFilledTwitter} from '../../../src/icons'; +import {IconFilledFacebook, IconFilledStarOutline} from '../../../src/icons'; const IconFilledInfo = toNewsKitIcon(FilledInfo); @@ -203,6 +203,7 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( introduced: 'v0.2.0', codeUrl: 'https://github.com/newscorp-ghfb/newskit/tree/main/src/unordered-list', + storybookId: 'components-unordered-list--story-unordered-list-default', figmaUrl: 'https://www.figma.com/file/FSbCQa6SzVR3K48ZWLeD77/%F0%9F%9F%A2-NK-Web-Components?node-id=2058%3A880', }} @@ -227,8 +228,8 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( value: undefined, }, { - label: 'twitter', - value: IconFilledTwitter, + label: 'star', + value: IconFilledStarOutline, }, { label: 'facebook', @@ -464,12 +465,13 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( themselves are operable e.g. with links. <> + Using unordered lists purely as a means of indenting text is + discouraged. Refer to{' '} - Using unordered lists purely as a means of indenting text is - discouraged. + Lists in HTML documents 10.2 in WCAG 2.1 {' '} This is a stylistic issue and indenting of text can be achieved using the{' '} From 7949b8c7b679e7cba21f25e7ecb2d7d99808ef5a Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 14 Nov 2022 11:00:32 +0530 Subject: [PATCH 05/22] docs(PPDSC-2399): demo section changes --- site/pages/components/unordered-list.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index b1b5339d0c..0a193863ae 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -14,7 +14,7 @@ import {UsageKind} from '../../components/usage-card'; import {IconFilledCircle} from '../../components/icons'; import {Link} from '../../components/link'; import {InlineCode} from '../../components/markdown-elements'; -import {IconFilledFacebook, IconFilledStarOutline} from '../../../src/icons'; +import {IconFilledStarOutline} from '../../../src/icons'; const IconFilledInfo = toNewsKitIcon(FilledInfo); @@ -231,10 +231,6 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( label: 'star', value: IconFilledStarOutline, }, - { - label: 'facebook', - value: IconFilledFacebook, - }, ], }, { From 9eb65d187be50cff36ee1c82379308a21f38aa5c Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 14 Nov 2022 18:14:04 +0530 Subject: [PATCH 06/22] docs(PPDSC-2399): demo section changes --- site/pages/components/unordered-list.tsx | 28 +++++++++++++++++++----- 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 0a193863ae..27fe09757c 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -212,13 +212,29 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - component: (props: UnorderedListProps) => , + component: (props: UnorderedListProps) => ( + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent products + quickly. NewsKit is built on modular design principles and backed + by best practice guidance for design and development. + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent products + quickly. NewsKit is built on modular design principles and backed + by best practice guidance for design and development. + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent products + quickly. NewsKit is built on modular design principles and backed + by best practice guidance for design and development. + + + ), knobs: [ - { - name: 'List Data', - propName: 'children', - value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], - }, { name: 'List Item Marker', propName: 'listItemMarker', From 50a6054b3c813761e1755b7ca43107227eebbce6 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 14 Nov 2022 18:45:31 +0530 Subject: [PATCH 07/22] docs(PPDSC-2399): build issue --- site/pages/components/unordered-list.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 27fe09757c..9ccff258c6 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -221,16 +221,19 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( by best practice guidance for design and development. <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent products - quickly. NewsKit is built on modular design principles and backed - by best practice guidance for design and development. + Lorem Ipsum has been the standard dummy text ever since the 1500s, + when an unknown printer took a galley of type and scrambled it to + make a type specimen book. It has survived not only five + centuries, but also the leap into electronic typesetting, + remaining essentially unchanged. <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent products - quickly. NewsKit is built on modular design principles and backed - by best practice guidance for design and development. + There are many variations of passages of Lorem Ipsum available, + but the majority have suffered alteration in some form, by + injected humour, or randomised words which do look even slightly + believable.If you are going to use a passage of Lorem Ipsum, you + need to be sure there is anything embarrassing hidden in the + middle of text. ), From 8216c6188c9318b8f4ffe3ab061a148023c08875 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 14 Nov 2022 19:19:26 +0530 Subject: [PATCH 08/22] docs(PPDSC-2399): build issue fix --- site/pages/components/unordered-list.tsx | 31 +++++------------------- 1 file changed, 6 insertions(+), 25 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 9ccff258c6..0a193863ae 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -212,32 +212,13 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - component: (props: UnorderedListProps) => ( - - <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent products - quickly. NewsKit is built on modular design principles and backed - by best practice guidance for design and development. - - <> - Lorem Ipsum has been the standard dummy text ever since the 1500s, - when an unknown printer took a galley of type and scrambled it to - make a type specimen book. It has survived not only five - centuries, but also the leap into electronic typesetting, - remaining essentially unchanged. - - <> - There are many variations of passages of Lorem Ipsum available, - but the majority have suffered alteration in some form, by - injected humour, or randomised words which do look even slightly - believable.If you are going to use a passage of Lorem Ipsum, you - need to be sure there is anything embarrassing hidden in the - middle of text. - - - ), + component: (props: UnorderedListProps) => , knobs: [ + { + name: 'List Data', + propName: 'children', + value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], + }, { name: 'List Item Marker', propName: 'listItemMarker', From 9cf84e8c185e805fe73784f6b2592b84871f0ab2 Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 15 Nov 2022 12:07:13 +0530 Subject: [PATCH 09/22] docs(PPDSC-2399): demo section build error fix --- site/pages/components/unordered-list.tsx | 31 +++++++++++++++++++----- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 0a193863ae..a96b5fac05 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -212,13 +212,32 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - component: (props: UnorderedListProps) => , + component: (props: UnorderedListProps) => ( + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent products + quickly. NewsKit is built on modular design principles and backed + by best practice guidance for design and development. + + <> + Unordered list items are not numbered, so use them in instances + where ordering is not a factor. Where items are required to appear + in numerical order use an ordered list. + + <> + Use unordered lists to break up blocks of related content into + manageable bulleted items to make the information easier for users + to read. + + + ), knobs: [ - { - name: 'List Data', - propName: 'children', - value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], - }, + // { + // name: 'List Data', + // propName: 'children', + // value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], + // }, { name: 'List Item Marker', propName: 'listItemMarker', From 583e712c6b83e011bbe76e227220be130a4ded3a Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 15 Nov 2022 12:35:57 +0530 Subject: [PATCH 10/22] docs(PPDSC-2399): demo section build error fix From a847272e3861ae907e722eda0fbf180c25673f20 Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 15 Nov 2022 13:01:34 +0530 Subject: [PATCH 11/22] docs(PPDSC-2399): build error fix --- site/pages/components/unordered-list.tsx | 65 ++++++++++++++++-------- 1 file changed, 45 insertions(+), 20 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index a96b5fac05..8a7620fb7b 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -212,26 +212,51 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - component: (props: UnorderedListProps) => ( - - <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent products - quickly. NewsKit is built on modular design principles and backed - by best practice guidance for design and development. - - <> - Unordered list items are not numbered, so use them in instances - where ordering is not a factor. Where items are required to appear - in numerical order use an ordered list. - - <> - Use unordered lists to break up blocks of related content into - manageable bulleted items to make the information easier for users - to read. - - - ), + // component: (props: UnorderedListProps) => ( + // + //

+ // NewsKit provides components, guidelines and standards to enable + // digital product teams to create high-quality, consistent products + // quickly. NewsKit is built on modular design principles and backed + // by best practice guidance for design and development. + //

+ //

+ // Unordered list items are not numbered, so use them in instances + // where ordering is not a factor. Where items are required to appear + // in numerical order use an ordered list. + //

+ //

+ // Use unordered lists to break up blocks of related content into + // manageable bulleted items to make the information easier for users + // to read. + //

+ // + // ), + component: state => { + const {...props} = state as UnorderedListProps; + return ( + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent + products quickly. NewsKit is built on modular design principles + and backed by best practice guidance for design and development. + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent + products quickly. NewsKit is built on modular design principles + and backed by best practice guidance for design and development. + + <> + NewsKit provides components, guidelines and standards to enable + digital product teams to create high-quality, consistent + products quickly. NewsKit is built on modular design principles + and backed by best practice guidance for design and development. + + + ); + }, knobs: [ // { // name: 'List Data', From 785aeadfe7c34fcb1bfd43802d7cbf2bbb5a3d77 Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 15 Nov 2022 13:48:51 +0530 Subject: [PATCH 12/22] docs(PPDSC-2399): build error final fix --- site/pages/components/unordered-list.tsx | 79 ++++++++++-------------- 1 file changed, 34 insertions(+), 45 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 8a7620fb7b..0328c32958 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -4,6 +4,7 @@ import { toNewsKitIcon, UnorderedList, UnorderedListProps, + styled, } from 'newskit'; import {Info as FilledInfo} from '@emotion-icons/material/Info'; import {LayoutProps} from '../../components/layout'; @@ -26,6 +27,14 @@ const infoIcon = ( /> ); +const PlaygroundContainer = styled.div` + display: flex; + width: 100%; + height: 200px; + align-items: center; + justify-content: center; +`; + const commonPropsRows = [ { name: 'children', @@ -212,57 +221,37 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - // component: (props: UnorderedListProps) => ( - // - //

- // NewsKit provides components, guidelines and standards to enable - // digital product teams to create high-quality, consistent products - // quickly. NewsKit is built on modular design principles and backed - // by best practice guidance for design and development. - //

- //

- // Unordered list items are not numbered, so use them in instances - // where ordering is not a factor. Where items are required to appear - // in numerical order use an ordered list. - //

- //

- // Use unordered lists to break up blocks of related content into - // manageable bulleted items to make the information easier for users - // to read. - //

- // - // ), component: state => { const {...props} = state as UnorderedListProps; return ( - - <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent - products quickly. NewsKit is built on modular design principles - and backed by best practice guidance for design and development. - - <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent - products quickly. NewsKit is built on modular design principles - and backed by best practice guidance for design and development. - - <> - NewsKit provides components, guidelines and standards to enable - digital product teams to create high-quality, consistent - products quickly. NewsKit is built on modular design principles - and backed by best practice guidance for design and development. - - + + + <> + NewsKit provides components, guidelines and standards to + enable digital product teams to create high-quality, + consistent products quickly. NewsKit is built on modular + design principles and backed by best practice guidance for + design and development. + + <> + NewsKit provides components, guidelines and standards to + enable digital product teams to create high-quality, + consistent products quickly. NewsKit is built on modular + design principles and backed by best practice guidance for + design and development. + + <> + NewsKit provides components, guidelines and standards to + enable digital product teams to create high-quality, + consistent products quickly. NewsKit is built on modular + design principles and backed by best practice guidance for + design and development. + + + ); }, knobs: [ - // { - // name: 'List Data', - // propName: 'children', - // value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], - // }, { name: 'List Item Marker', propName: 'listItemMarker', From 77fdbab4cd82f9e7259ee68a6491a6de9b74b73b Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 15 Nov 2022 14:40:08 +0530 Subject: [PATCH 13/22] docs(PPDSC-2399): modified demo section --- site/pages/components/unordered-list.tsx | 26 +++++------------------- 1 file changed, 5 insertions(+), 21 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 0328c32958..db85eb1048 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -226,27 +226,11 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( return ( - <> - NewsKit provides components, guidelines and standards to - enable digital product teams to create high-quality, - consistent products quickly. NewsKit is built on modular - design principles and backed by best practice guidance for - design and development. - - <> - NewsKit provides components, guidelines and standards to - enable digital product teams to create high-quality, - consistent products quickly. NewsKit is built on modular - design principles and backed by best practice guidance for - design and development. - - <> - NewsKit provides components, guidelines and standards to - enable digital product teams to create high-quality, - consistent products quickly. NewsKit is built on modular - design principles and backed by best practice guidance for - design and development. - + {[ + 'Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.', + 'Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read.', + 'NewsKit provides components, guidelines and standards to enable digital product teams to create high-quality, consistent products quickly. NewsKit is built on modular design principles and backed by best practice guidance for design and development.', + ]} ); From bff7ad68cbc1ab7fc6648ae695892c7a4ca054d6 Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 15 Nov 2022 16:02:53 +0530 Subject: [PATCH 14/22] docs(PPDSC-2399): modified demo section --- site/pages/components/unordered-list.tsx | 33 +++++++----------------- 1 file changed, 10 insertions(+), 23 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index db85eb1048..6bd6295a28 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -4,7 +4,6 @@ import { toNewsKitIcon, UnorderedList, UnorderedListProps, - styled, } from 'newskit'; import {Info as FilledInfo} from '@emotion-icons/material/Info'; import {LayoutProps} from '../../components/layout'; @@ -27,14 +26,6 @@ const infoIcon = ( /> ); -const PlaygroundContainer = styled.div` - display: flex; - width: 100%; - height: 200px; - align-items: center; - justify-content: center; -`; - const commonPropsRows = [ { name: 'children', @@ -221,21 +212,17 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { componentName: 'Unorderedist', - component: state => { - const {...props} = state as UnorderedListProps; - return ( - - - {[ - 'Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.', - 'Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read.', - 'NewsKit provides components, guidelines and standards to enable digital product teams to create high-quality, consistent products quickly. NewsKit is built on modular design principles and backed by best practice guidance for design and development.', - ]} - - - ); - }, + component: (props: UnorderedListProps) => , knobs: [ + { + name: 'List Data', + propName: 'children', + value: [ + 'NewsKit provides components, guidelines and standards to enable digital product teams to create high-quality, consistent products quickly. NewsKit is built on modular design principles and backed by best practice guidance for design and development.', + 'Unordered list items are not numbered, so use them in instances where ordering is not a factor. Where items are required to appear in numerical order use an ordered list.', + 'Use unordered lists to break up blocks of related content into manageable bulleted items to make the information easier for users to read', + ], + }, { name: 'List Item Marker', propName: 'listItemMarker', From ffeb81809c271e3e95020aae61435caa9a4bcae8 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 21 Nov 2022 16:14:33 +0530 Subject: [PATCH 15/22] docs(PPDSC-2400): ordered-list-documentation --- .../components/ordered-list/anatomy-01.tsx | 130 ++++++++ .../components/ordered-list/hero.tsx | 51 ++++ .../ordered-list/options/counter.tsx | 153 ++++++++++ .../components/ordered-list/usage/do-01.tsx | 105 +++++++ .../components/ordered-list/usage/do-02.tsx | 257 ++++++++++++++++ site/pages/components/ordered-list.mdx | 68 ----- site/pages/components/ordered-list.tsx | 285 ++++++++++++++++++ site/routes.ts | 3 +- 8 files changed, 983 insertions(+), 69 deletions(-) create mode 100644 site/components/illustrations/components/ordered-list/anatomy-01.tsx create mode 100644 site/components/illustrations/components/ordered-list/hero.tsx create mode 100644 site/components/illustrations/components/ordered-list/options/counter.tsx create mode 100644 site/components/illustrations/components/ordered-list/usage/do-01.tsx create mode 100644 site/components/illustrations/components/ordered-list/usage/do-02.tsx delete mode 100644 site/pages/components/ordered-list.mdx create mode 100644 site/pages/components/ordered-list.tsx diff --git a/site/components/illustrations/components/ordered-list/anatomy-01.tsx b/site/components/illustrations/components/ordered-list/anatomy-01.tsx new file mode 100644 index 0000000000..50bf2114c7 --- /dev/null +++ b/site/components/illustrations/components/ordered-list/anatomy-01.tsx @@ -0,0 +1,130 @@ +import React from 'react'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const anatomy: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default anatomy; diff --git a/site/components/illustrations/components/ordered-list/hero.tsx b/site/components/illustrations/components/ordered-list/hero.tsx new file mode 100644 index 0000000000..4c28471770 --- /dev/null +++ b/site/components/illustrations/components/ordered-list/hero.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import {Svg} from '../../svg'; +import {Path} from '../../path'; +import {Rect} from '../../rect'; + +export const hero: React.FC = () => ( + + + + + + + + + +); + +export default hero; diff --git a/site/components/illustrations/components/ordered-list/options/counter.tsx b/site/components/illustrations/components/ordered-list/options/counter.tsx new file mode 100644 index 0000000000..3435e6d035 --- /dev/null +++ b/site/components/illustrations/components/ordered-list/options/counter.tsx @@ -0,0 +1,153 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const counter: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default counter; diff --git a/site/components/illustrations/components/ordered-list/usage/do-01.tsx b/site/components/illustrations/components/ordered-list/usage/do-01.tsx new file mode 100644 index 0000000000..cd622e9c63 --- /dev/null +++ b/site/components/illustrations/components/ordered-list/usage/do-01.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const do01: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default do01; diff --git a/site/components/illustrations/components/ordered-list/usage/do-02.tsx b/site/components/illustrations/components/ordered-list/usage/do-02.tsx new file mode 100644 index 0000000000..2eb28b9229 --- /dev/null +++ b/site/components/illustrations/components/ordered-list/usage/do-02.tsx @@ -0,0 +1,257 @@ +import React from 'react'; +import {Svg} from '../../../svg'; +import {Path} from '../../../path'; + +export const do02: React.FC = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default do02; diff --git a/site/pages/components/ordered-list.mdx b/site/pages/components/ordered-list.mdx deleted file mode 100644 index e95fa6bfde..0000000000 --- a/site/pages/components/ordered-list.mdx +++ /dev/null @@ -1,68 +0,0 @@ -import Layout from '../../components/layout'; -import Playground from '../../components/playground'; -import Prop from '../../components/prop'; -import {LegacyBlock} from '../../components/legacy-block'; -import {CommonLogicalPropsMDX} from '../../components/component-api/common-logical-props'; -import {OrderedList} from 'newskit'; - -export default Layout; - -# Ordered List - -## Overview - -### Usage - -An ordered list can be used to produce a list of related content prefixed with incrementing numbers. - -## Props - - - - An array of react nodes or strings to populate the list items with. - - - If provided, overrides the respective presets for the component and provided elements. - - If provided, overrides the "space" token which defines the vertical distance between each item list. - - - - If provided, this overrides the style preset applied to the list items. - - - If provided, this overrides the typography preset applied to the list items. - - - - - If provided, this overrides the style preset applied to the list counter. - - - If provided, this overrides the typography preset applied to the list counter. - - - If provided, overrides the "sizing" token which defines the distance between counter and list content. - - - - - - -## Playground - - diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx new file mode 100644 index 0000000000..16964d555b --- /dev/null +++ b/site/pages/components/ordered-list.tsx @@ -0,0 +1,285 @@ +import React from 'react'; +import {InlineMessage, toNewsKitIcon, UnorderedList} from 'newskit'; +import {Info as FilledInfo} from '@emotion-icons/material/Info'; +import {UsageKind} from '../../components/usage-card'; +import {ComponentPageTemplate} from '../../templates/component-page-template'; +import {LayoutProps} from '../../components/layout'; +import {MetaStatus} from '../../components/meta/types'; +import {OrderedList} from '../../../src/ordered-list'; +import {getIllustrationComponent} from '../../components/illustrations/illustration-loader'; +import {IconFilledCircle} from '../../components/icons'; +import {Link} from '../../components/link'; +import {commonLogicalProps} from '../../components/component-api/common-logical-props'; +import {OverridesRowsProps} from '../../components/component-api'; + +const IconFilledInfo = toNewsKitIcon(FilledInfo); + +const infoIcon = ( + +); + +const commonPropsRows = [ + { + name: 'children', + type: 'Array', + description: ( + <> + An array of react nodes or strings to populate the ordered list + component. +
+
+ Note - if the node is a react element, a unique key must be given to + each element within the array. + + ), + required: true, + }, +]; +const commonOverridesRows = [ + { + attribute: 'orderedList.spaceInline', + type: 'MQ', + default: 'space040', + description: + 'If provided, this overrides the space between the ordered list counter and the content.', + }, + { + attribute: 'orderedList.content.stylePreset', + type: 'MQ', + default: 'inkBase', + description: + 'If provided, this overrides the style preset applied to the ordered list content.', + }, + { + attribute: 'orderedList.content.typographyPreset', + type: 'MQ', + default: 'editorialParagraph010', + description: + 'If provided, this overrides the typography preset applied to the ordered list content.', + }, + { + attribute: 'unorderedList.counter.stylePreset', + type: 'MQ', + default: 'inkBase', + description: + 'If provided, this overrides the style preset applied to the unordered list counter.', + }, + { + attribute: 'unorderedList.counter.typographyPreset', + type: 'MQ', + default: 'editorialParagraph010', + description: + 'If provided, this overrides the typography preset applied to the unordered list counter.', + }, + { + attribute: 'unorderedList.counter.minWidth', + type: 'MQ', + default: 'sizing050', + description: + 'If provided, this overrides the min width between the ordered list counter and the content.', + }, + ...(commonLogicalProps() as OverridesRowsProps[]), +]; + +const OrderedListComponent = (layoutProps: LayoutProps) => ( + , + knobs: [ + { + name: 'List Data', + propName: 'children', + value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ] as any, + }, + }} + anatomy={{ + introduction: + 'The ordered list contains two required elements and no optional elements.', + media: getIllustrationComponent('components/ordered-list/anatomy-01'), + rows: [ + { + name: 'Content', + description: 'The content of the ordered list', + component: ['Text Block'], + }, + { + name: 'Counter', + description: 'The counter applied to the content of the ordered list', + component: 'CSS', + optional: true, + }, + ], + }} + options={{ + introduction: + 'The ordered list has options that can be used to provide an appropriate experience for different use cases.', + cards: [ + { + title: 'Counter', + description: + 'The counter applied to the content of the ordered list can be overridden to use any typography preset.', + media: getIllustrationComponent( + 'components/ordered-list/options/counter', + ), + }, + ], + }} + usage={{ + introduction: + 'The following guidance describes how and when to appropriately use the ordered list component.', + layout: '2-span', + cards: [ + { + description: + 'The following guidance describes how and when to appropriately use the ordered list component.', + kind: UsageKind.DO, + media: getIllustrationComponent( + 'components/ordered-list/usage/do-01', + ), + }, + { + description: + 'Use ordered lists to break up blocks of sequential information into manageable numbered items.', + kind: UsageKind.DO, + media: getIllustrationComponent( + 'components/ordered-list/usage/do-02', + ), + }, + ], + }} + accessibility={{ + introduction: ( + <> + The ordered list has the following accessibility considerations: +
+
+ + <> + The ol element is for{' '} + + grouping a collection of items + {' '} + that appear in sequential numerical order. + + <> + Ordered lists are not keyboard operable unless the list items + themselves are operable e.g. with{' '} + + links + + . + + <> + Using unordered lists purely as a means of indenting text is + discouraged. Refer to{' '} + + Lists in HTML documents 10.2 in WCAG 2.1 + {' '} + This is a stylistic issue and indenting of text can be achieved + using the{' '} + + text block component. + + + + + ), + }} + componentAPI={{ + components: [ + { + title: 'Ordered list', + summary: + 'The ordered list has a range of props that can be used to define an appropriate experience for different use cases.', + propsRows: commonPropsRows, + propsFooter: ( + <> + + Any prop valid on an{' '} + + ol The ordered list element + + , is also valid on the ordered list component. + + + ), + overridesSummary: + 'The ordered list has a range of predefined elements and attributes that can be overridden to define its appearance.', + overridesRows: commonOverridesRows, + }, + ], + }} + related={{ + related: ['Unordered List', 'Text Block'], + }} + /> +); + +export default OrderedListComponent; diff --git a/site/routes.ts b/site/routes.ts index 5d5a0d339c..bc5641de85 100644 --- a/site/routes.ts +++ b/site/routes.ts @@ -698,7 +698,8 @@ export const routes = [ title: 'Ordered List', page: true, id: '/components/ordered-list', - description: 'Typically is a numbered list of items.', + description: + 'Ordered lists make blocks of text easier to read, structuring sequential information into manageable, numbered items.', illustration: 'components/ordered-list-illustration', }, { From b8a1bc3bcca317a7668b7244cfc6e830c70065b3 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 21 Nov 2022 16:28:45 +0530 Subject: [PATCH 16/22] docs(PPDSC-2400): resolve conflicts --- site/pages/components/unordered-list.tsx | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/site/pages/components/unordered-list.tsx b/site/pages/components/unordered-list.tsx index 6bd6295a28..d762f7f197 100644 --- a/site/pages/components/unordered-list.tsx +++ b/site/pages/components/unordered-list.tsx @@ -91,7 +91,7 @@ const commonOverridesRows = [ 'If provided, this overrides the space between the unordered list marker and the content.', }, { - attribute: 'size', + attribute: 'marker.size', type: 'string', default: 'iconSize005', description: ( @@ -211,7 +211,7 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( introduction: 'This demo allows you to preview the unordered list component, its variations, and configuration options.', playground: { - componentName: 'Unorderedist', + componentName: 'UnorderedList', component: (props: UnorderedListProps) => , knobs: [ { @@ -346,13 +346,24 @@ const UnorderedListComponent = (layoutProps: LayoutProps) => ( isDefault: true, }, { - label: 'buttonSolidPrimary', + label: 'inkPositive', value: { content: { - stylePreset: 'buttonSolidPrimary', + stylePreset: 'inkPositive', }, marker: { - stylePreset: 'buttonSolidPrimary', + stylePreset: 'inkPositive', + }, + }, + }, + { + label: 'inkNegative', + value: { + content: { + stylePreset: 'inkNegative', + }, + marker: { + stylePreset: 'inkNegative', }, }, }, From 670b9e2c5d9ac225f50c4e119f93bcbb8390d8f9 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 21 Nov 2022 17:20:56 +0530 Subject: [PATCH 17/22] docs(PPDSC-2400): demo section --- site/pages/components/ordered-list.tsx | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx index 16964d555b..2f723b1ab6 100644 --- a/site/pages/components/ordered-list.tsx +++ b/site/pages/components/ordered-list.tsx @@ -117,15 +117,14 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( 'This demo allows you to preview the ordered list component, its variations, and configuration options.', playground: { componentName: 'OrderedList', - component: state => , - knobs: [ - { - name: 'List Data', - propName: 'children', - value: ['Prince Harry', 'Meghan Markle', 'Royal Family'], - }, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - ] as any, + component: state => ( + + <>Prince Harry + <>Meghan Markle + <>Royal Family + + ), + knobs: [], }, }} anatomy={{ From 25c7d62b3a8cfe583dda4baa28627675e672176e Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 21 Nov 2022 17:56:03 +0530 Subject: [PATCH 18/22] docs(PPDSC-2400): demo section --- site/pages/components/ordered-list.tsx | 67 +++++++++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx index 2f723b1ab6..1ea113ac72 100644 --- a/site/pages/components/ordered-list.tsx +++ b/site/pages/components/ordered-list.tsx @@ -124,7 +124,72 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( <>Royal Family ), - knobs: [], + knobs: [ + { + name: 'Overrides', + propName: 'overrides', + options: [ + { + label: 'Default', + value: { + content: { + typographyPreset: 'editorialParagraph010', + }, + }, + isDefault: true, + }, + { + label: 'utilityButton020', + value: { + content: { + typographyPreset: 'utilityButton020', + }, + }, + }, + ], + }, + { + name: 'Style Preset Overrides', + propName: 'overrides', + options: [ + { + label: 'Default', + value: { + content: { + stylePreset: 'inkBase', + }, + marker: { + stylePreset: 'inkBase', + }, + }, + isDefault: true, + }, + { + label: 'inkPositive', + value: { + content: { + stylePreset: 'inkPositive', + }, + marker: { + stylePreset: 'inkPositive', + }, + }, + }, + { + label: 'inkNegative', + value: { + content: { + stylePreset: 'inkNegative', + }, + marker: { + stylePreset: 'inkNegative', + }, + }, + }, + ], + }, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ] as any, }, }} anatomy={{ From cda84a038de0c24fa1fd49e2a7dd2123d103dfe9 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 21 Nov 2022 18:08:07 +0530 Subject: [PATCH 19/22] docs(PPDSC-2400): demo section issue --- site/pages/components/ordered-list.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx index 1ea113ac72..4fc988c22b 100644 --- a/site/pages/components/ordered-list.tsx +++ b/site/pages/components/ordered-list.tsx @@ -135,6 +135,9 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( content: { typographyPreset: 'editorialParagraph010', }, + counter: { + typographyPreset: 'editorialParagraph010', + }, }, isDefault: true, }, @@ -144,6 +147,9 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( content: { typographyPreset: 'utilityButton020', }, + counter: { + typographyPreset: 'editorialParagraph020', + }, }, }, ], @@ -158,7 +164,7 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( content: { stylePreset: 'inkBase', }, - marker: { + counter: { stylePreset: 'inkBase', }, }, @@ -170,7 +176,7 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( content: { stylePreset: 'inkPositive', }, - marker: { + counter: { stylePreset: 'inkPositive', }, }, @@ -181,7 +187,7 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( content: { stylePreset: 'inkNegative', }, - marker: { + counter: { stylePreset: 'inkNegative', }, }, From 7f8a5a701e5d7547d2cad195ca2ad1f1951a91f6 Mon Sep 17 00:00:00 2001 From: Rashika Date: Mon, 21 Nov 2022 18:13:41 +0530 Subject: [PATCH 20/22] docs(PPDSC-2400): demo section issue --- site/pages/components/ordered-list.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx index 4fc988c22b..bb2431e316 100644 --- a/site/pages/components/ordered-list.tsx +++ b/site/pages/components/ordered-list.tsx @@ -148,7 +148,7 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( typographyPreset: 'utilityButton020', }, counter: { - typographyPreset: 'editorialParagraph020', + typographyPreset: 'utilityButton020', }, }, }, From d9d421bca9e29cb35f083a75ea78280d3d4d3e99 Mon Sep 17 00:00:00 2001 From: Rashika Date: Tue, 22 Nov 2022 11:13:44 +0530 Subject: [PATCH 21/22] docs(PPDSC-2400): design review feedback issue --- site/pages/components/ordered-list.tsx | 40 +++++++++++++++++++------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx index bb2431e316..2dfffd0d33 100644 --- a/site/pages/components/ordered-list.tsx +++ b/site/pages/components/ordered-list.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {InlineMessage, toNewsKitIcon, UnorderedList} from 'newskit'; import {Info as FilledInfo} from '@emotion-icons/material/Info'; +import {InlineCode} from '../../components/markdown-elements'; import {UsageKind} from '../../components/usage-card'; import {ComponentPageTemplate} from '../../templates/component-page-template'; import {LayoutProps} from '../../components/layout'; @@ -62,21 +63,21 @@ const commonOverridesRows = [ 'If provided, this overrides the typography preset applied to the ordered list content.', }, { - attribute: 'unorderedList.counter.stylePreset', + attribute: 'orderedList.counter.stylePreset', type: 'MQ', default: 'inkBase', description: 'If provided, this overrides the style preset applied to the unordered list counter.', }, { - attribute: 'unorderedList.counter.typographyPreset', + attribute: 'orderedList.counter.typographyPreset', type: 'MQ', default: 'editorialParagraph010', description: 'If provided, this overrides the typography preset applied to the unordered list counter.', }, { - attribute: 'unorderedList.counter.minWidth', + attribute: 'orderedList.counter.minWidth', type: 'MQ', default: 'sizing050', description: @@ -194,13 +195,31 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( }, ], }, + { + name: 'Margin Preset Overrides', + propName: 'overrides', + options: [ + { + label: 'space010', + value: { + spaceInline: 'space010', + }, + isDefault: true, + }, + { + label: 'space020', + value: { + spaceInline: 'space030', + }, + }, + ], + }, // eslint-disable-next-line @typescript-eslint/no-explicit-any ] as any, }, }} anatomy={{ - introduction: - 'The ordered list contains two required elements and no optional elements.', + introduction: 'The ordered list contains two required elements.', media: getIllustrationComponent('components/ordered-list/anatomy-01'), rows: [ { @@ -212,7 +231,6 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( name: 'Counter', description: 'The counter applied to the content of the ordered list', component: 'CSS', - optional: true, }, ], }} @@ -237,7 +255,7 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( cards: [ { description: - 'The following guidance describes how and when to appropriately use the ordered list component.', + 'Ordered list items are numbered, so use them in instances where items need to appear in numerical order.', kind: UsageKind.DO, media: getIllustrationComponent( 'components/ordered-list/usage/do-01', @@ -270,7 +288,7 @@ const OrderedListComponent = (layoutProps: LayoutProps) => ( }} > <> - The ol element is for{' '} + The ol element is for{' '} ( marginBlockStart: 'space030', }} > - Any prop valid on an{' '} + Any prop valid on a{' '} ol The ordered list element - - , is also valid on the ordered list component. + {' '} + is also valid on the ordered list component. ), From 9bca6bac89e5335ba2365f5a4b413f14c8d02aa0 Mon Sep 17 00:00:00 2001 From: Rashika Date: Thu, 24 Nov 2022 12:27:02 +0530 Subject: [PATCH 22/22] docs(PPDSC-2400): docs(PPDSC-2400) review feedback changes --- site/pages/components/ordered-list.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/site/pages/components/ordered-list.tsx b/site/pages/components/ordered-list.tsx index 2dfffd0d33..a5495a1e43 100644 --- a/site/pages/components/ordered-list.tsx +++ b/site/pages/components/ordered-list.tsx @@ -42,42 +42,42 @@ const commonPropsRows = [ ]; const commonOverridesRows = [ { - attribute: 'orderedList.spaceInline', + attribute: 'spaceInline', type: 'MQ', default: 'space040', description: 'If provided, this overrides the space between the ordered list counter and the content.', }, { - attribute: 'orderedList.content.stylePreset', + attribute: 'content.stylePreset', type: 'MQ', default: 'inkBase', description: 'If provided, this overrides the style preset applied to the ordered list content.', }, { - attribute: 'orderedList.content.typographyPreset', + attribute: 'content.typographyPreset', type: 'MQ', default: 'editorialParagraph010', description: 'If provided, this overrides the typography preset applied to the ordered list content.', }, { - attribute: 'orderedList.counter.stylePreset', + attribute: 'counter.stylePreset', type: 'MQ', default: 'inkBase', description: 'If provided, this overrides the style preset applied to the unordered list counter.', }, { - attribute: 'orderedList.counter.typographyPreset', + attribute: 'counter.typographyPreset', type: 'MQ', default: 'editorialParagraph010', description: 'If provided, this overrides the typography preset applied to the unordered list counter.', }, { - attribute: 'orderedList.counter.minWidth', + attribute: 'counter.minWidth', type: 'MQ', default: 'sizing050', description: