From 4a6311a6d519b9a51a86893b1e99415b7f89fe82 Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Wed, 22 Mar 2023 16:00:35 +0000 Subject: [PATCH 1/9] docs(PPDSC-2702): updated stories --- src/assistive-text/assistive-text.tsx | 4 +- src/fieldset/__tests__/fieldset.stories.tsx | 300 +++++++++++--------- 2 files changed, 162 insertions(+), 142 deletions(-) diff --git a/src/assistive-text/assistive-text.tsx b/src/assistive-text/assistive-text.tsx index 3223cf4553..c8afe5754c 100644 --- a/src/assistive-text/assistive-text.tsx +++ b/src/assistive-text/assistive-text.tsx @@ -28,6 +28,8 @@ const ThemelessAssistiveText = React.forwardRef< ) => { const enhancersOverrides = omitLogicalPaddingPropsFromOverrides(overrides); const textBlockOverrides = omitLogicalMarginPropsFromOverrides(overrides); + console.log(textBlockOverrides); + console.log(props); return ( {children} diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index 48b2237b72..32e6ec8fbc 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -1,19 +1,15 @@ import * as React from 'react'; import {Fieldset} from '..'; -import {Stack} from '../../stack'; import {Block} from '../../block'; import {Image} from '../../image'; -import { - StorybookHeading, - StorybookSubHeading, -} from '../../test/storybook-comps'; import {Checkbox} from '../../checkbox'; import {AssistiveText} from '../../assistive-text'; import {Button} from '../../button'; -import {IconFilledAddCircleOutline} from '../../icons'; import {Heading3} from '../../typography'; import {createTheme, ThemeProvider} from '../../theme'; import {styled} from '../../utils'; +import {TextBlock} from '../../text-block'; +import {GridLayout} from '../../grid-layout'; export default { title: 'Components/fieldset', @@ -25,112 +21,96 @@ const StyledDiv = styled.div` border: 1px red dotted; `; +const Header = ({children}: {children: React.ReactNode}) => ( + + {children} + +); + export const StoryFieldsetDefault = () => ( - <> - Fieldset default -
- - Assistive Text -
- +
+ + Assistive Text +
); -StoryFieldsetDefault.storyName = 'fieldset-default'; +StoryFieldsetDefault.storyName = 'Default'; export const LegendSizing = () => ( - <> - Legend sizes - - - Small -
- - Assistive Text -
- - - Medium -
- - Assistive Text -
- - - Large -
- - Assistive Text -
- - - + + +
Small
+
+ + Assistive Text +
+ + +
Medium
+
+ + Assistive Text +
+ + +
Large
+
+ + Assistive Text +
+ + ); -LegendSizing.storyName = 'fieldset-legend-sizing'; +LegendSizing.storyName = 'Size'; export const LegendVariations = () => ( - <> - Legend variations - - - with legend as heading -
Legend}> - - Assistive Text -
- - - with legend as button -
- - Legend - - - } - > - - Assistive Text -
- - - with legend as image -
- } - > - + +
Heading
+
Legend}> + + Assistive Text +
+ + +
Button
+
Legend}> + + Assistive Text +
+ + +
Image
+
- Assistive Text -
- - - + } + > + + Assistive Text +
+ + ); -LegendVariations.storyName = 'fieldset-different-legends'; +LegendVariations.storyName = 'Different legends'; export const FieldsetGrouping = () => ( <> - Fieldset grouping -
- - - - - +
+ + + + + Assistive Text

@@ -146,15 +126,28 @@ export const FieldsetGrouping = () => ( /> } > - + + Assistive Text +
+ +); +FieldsetGrouping.storyName = 'Fieldset grouping'; + +export const FieldsetWithCustomLegend = () => ( + <> +
+ + + This h3 element is the custom legend and is fully nested inside the + fieldset + + + Assistive Text
); -FieldsetGrouping.storyName = 'fieldset-grouping'; +FieldsetWithCustomLegend.storyName = 'Custom legend'; const myCustomTheme = createTheme({ name: 'my-custom-select-theme', @@ -162,15 +155,30 @@ const myCustomTheme = createTheme({ stylePresets: { fieldsetCustom: { base: { - backgroundColor: '{{colors.amber010}}', - borderColor: '{{colors.purple060}}', + backgroundColor: '{{colors.amber020}}', + borderColor: '{{colors.amber070}}', borderWidth: '1px', borderStyle: 'solid', }, }, - legendCustom: { + checkboxInputCustom: { + base: { + backgroundColor: '{{colors.amber020}}', + borderColor: '{{colors.amber070}}', + borderWidth: '{{borders.borderWidth020}}', + borderRadius: '{{borders.borderRadiusRounded010}}', + borderStyle: 'solid', + iconColor: '{{colors.inkInverse}}', + }, + }, + checkboxLabelCustom: { + base: { + color: '{{colors.amber070}}', + }, + }, + assistiveTextCustom: { base: { - backgroundColor: '{{colors.green040}}', + color: '{{colors.amber070}}', }, }, }, @@ -183,7 +191,6 @@ const StyledFieldsetWithClippedBG = styled(Fieldset)` export const FieldsetWithOverrides = () => ( <> - Fieldset with overrides ( paddingBlock: 'space040', paddingInline: 'space040', legend: { - stylePreset: 'legendCustom', typographyPreset: 'utilityBody030', spaceStack: 'space000', }, }} > - - Assistive Text + + + Assistive Text + ); -FieldsetWithOverrides.storyName = 'fieldset-with-overrides'; - -export const FieldsetWithCustomLegend = () => ( - <> - Fieldset with custom legend -
- - - This h3 element is the custom legend and is fully nested inside the - fieldset - - - - Assistive Text -
- -); -FieldsetWithCustomLegend.storyName = 'fieldset-with-custom-legend'; +FieldsetWithOverrides.storyName = 'Styling overrides'; export const FieldsetWithLogicalPropsOverrides = () => ( - <> - Fieldset with logical props overrides - + +
+
Padding overrides
( Assistive Text
-
+
+
+
Margin overrides
+
+ + Assistive Text +
+
+
+
Custom outline
( Assistive Text
- - +
+ ); -FieldsetWithLogicalPropsOverrides.storyName = - 'fieldset-with-logical-props-overrides'; +FieldsetWithLogicalPropsOverrides.storyName = 'Overrides'; From 9bbb02b19d211dcc672a5cbea3957c9c50663f86 Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Thu, 23 Mar 2023 11:21:09 +0000 Subject: [PATCH 2/9] docs(PPDSC-2702): meta --- src/fieldset/__tests__/fieldset.stories.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index 32e6ec8fbc..ac664d7468 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -12,9 +12,17 @@ import {TextBlock} from '../../text-block'; import {GridLayout} from '../../grid-layout'; export default { - title: 'Components/fieldset', + title: 'Components/Fieldset', component: () => 'None', disabledRules: ['heading-order'], + parameters: { + nkDocs: { + title: 'Fieldset', + url: 'https://newskit.co.uk/components/fieldset/', + description: + 'The fieldset is used to provide contextual information around a group of form controls in a web form.', + }, + }, }; const StyledDiv = styled.div` From 260f62c524cdd7029ecac8ae173096858beab2b9 Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Fri, 24 Mar 2023 09:24:48 +0000 Subject: [PATCH 3/9] docs(PPDSC-2702): a11y debugging --- src/assistive-text/assistive-text.tsx | 2 - src/fieldset/__tests__/fieldset.stories.tsx | 167 ++++++++++---------- 2 files changed, 84 insertions(+), 85 deletions(-) diff --git a/src/assistive-text/assistive-text.tsx b/src/assistive-text/assistive-text.tsx index c8afe5754c..0d4058ed46 100644 --- a/src/assistive-text/assistive-text.tsx +++ b/src/assistive-text/assistive-text.tsx @@ -28,8 +28,6 @@ const ThemelessAssistiveText = React.forwardRef< ) => { const enhancersOverrides = omitLogicalPaddingPropsFromOverrides(overrides); const textBlockOverrides = omitLogicalMarginPropsFromOverrides(overrides); - console.log(textBlockOverrides); - console.log(props); return ( ( + + + + ), + ], }; const StyledDiv = styled.div` @@ -157,76 +213,37 @@ export const FieldsetWithCustomLegend = () => ( ); FieldsetWithCustomLegend.storyName = 'Custom legend'; -const myCustomTheme = createTheme({ - name: 'my-custom-select-theme', - overrides: { - stylePresets: { - fieldsetCustom: { - base: { - backgroundColor: '{{colors.amber020}}', - borderColor: '{{colors.amber070}}', - borderWidth: '1px', - borderStyle: 'solid', - }, - }, - checkboxInputCustom: { - base: { - backgroundColor: '{{colors.amber020}}', - borderColor: '{{colors.amber070}}', - borderWidth: '{{borders.borderWidth020}}', - borderRadius: '{{borders.borderRadiusRounded010}}', - borderStyle: 'solid', - iconColor: '{{colors.inkInverse}}', - }, - }, - checkboxLabelCustom: { - base: { - color: '{{colors.amber070}}', - }, - }, - assistiveTextCustom: { - base: { - color: '{{colors.amber070}}', - }, - }, - }, - }, -}); - const StyledFieldsetWithClippedBG = styled(Fieldset)` background-clip: content-box; `; export const FieldsetWithOverrides = () => ( - <> - - - - - Assistive Text - - - - + + + + Assistive Text + + ); FieldsetWithOverrides.storyName = 'Styling overrides'; @@ -237,14 +254,8 @@ export const FieldsetWithLogicalPropsOverrides = () => (
@@ -256,13 +267,8 @@ export const FieldsetWithLogicalPropsOverrides = () => (
@@ -275,13 +281,8 @@ export const FieldsetWithLogicalPropsOverrides = () => (
From 874c6a8deed98233315600c1241c536529db97e2 Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Fri, 24 Mar 2023 13:43:28 +0000 Subject: [PATCH 4/9] docs(PPDSC-2702): design feedback --- src/fieldset/__tests__/fieldset.stories.tsx | 28 +++++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index ff1a5bed68..292eaade91 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -105,26 +105,38 @@ export const StoryFieldsetDefault = () => ( StoryFieldsetDefault.storyName = 'Default'; export const LegendSizing = () => ( - +
Small
- - Assistive Text + + Assistive Text
Medium
- - Assistive Text + + Assistive Text
Large
- - Assistive Text + + Assistive Text
@@ -132,7 +144,7 @@ export const LegendSizing = () => ( LegendSizing.storyName = 'Size'; export const LegendVariations = () => ( - +
Heading
Legend}> From 653e56f3ddf1dcf67b87ae0e83d43f653a2443b1 Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Fri, 24 Mar 2023 13:56:44 +0000 Subject: [PATCH 5/9] docs(PPDSC-2702): add row gaps --- src/fieldset/__tests__/fieldset.stories.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index 292eaade91..072eddd71b 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -105,7 +105,11 @@ export const StoryFieldsetDefault = () => ( StoryFieldsetDefault.storyName = 'Default'; export const LegendSizing = () => ( - +
Small
@@ -144,7 +148,11 @@ export const LegendSizing = () => ( LegendSizing.storyName = 'Size'; export const LegendVariations = () => ( - +
Heading
Legend}> From 87a68cd87702baacd7dd5089bc96a01cf1ae1bcb Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Mon, 27 Mar 2023 09:16:44 +0100 Subject: [PATCH 6/9] docs(PPDSC-2702): correct colour tokens --- src/fieldset/__tests__/fieldset.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index 072eddd71b..837a2019a5 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -25,16 +25,16 @@ const myCustomTheme: CreateThemeArgs = { }, fieldsetCustom: { base: { - backgroundColor: '{{colors.amber020}}', - borderColor: '{{colors.amber070}}', + backgroundColor: '{{colors.interfaceInformative020}}', + borderColor: '{{colors.inkBrand010}}', borderWidth: '1px', borderStyle: 'solid', }, }, checkboxInputCustom: { base: { - backgroundColor: '{{colors.amber020}}', - borderColor: '{{colors.amber070}}', + backgroundColor: '{{colors.interfaceInformative020}}', + borderColor: '{{colors.inkBrand010}}', borderWidth: '{{borders.borderWidth020}}', borderRadius: '{{borders.borderRadiusRounded010}}', borderStyle: 'solid', @@ -43,12 +43,12 @@ const myCustomTheme: CreateThemeArgs = { }, checkboxLabelCustom: { base: { - color: '{{colors.amber070}}', + color: '{{colors.inkBrand010}}', }, }, assistiveTextCustom: { base: { - color: '{{colors.amber070}}', + color: '{{colors.inkBrand010}}', }, }, }, From 0bc39e201dcd86563edd56aa65b2a778557eac19 Mon Sep 17 00:00:00 2001 From: mikef Date: Mon, 27 Mar 2023 14:57:20 +0100 Subject: [PATCH 7/9] docs(PPDSC-2702): use custom theme --- src/fieldset/__tests__/fieldset.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index 837a2019a5..c8e9d882ab 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -68,11 +68,15 @@ export default { }, }, decorators: [ - (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => ( + ( + Story: StoryType, + context: {name: string; globals: {backgrounds: {value: string}}}, + ) => ( From ae549eb84b83dbd466c709d7141bf06d3b65f596 Mon Sep 17 00:00:00 2001 From: mikef Date: Tue, 28 Mar 2023 13:48:18 +0100 Subject: [PATCH 8/9] docs(PPDSC-2702): apply custom themes in a11y tests --- e2e/tests.tsx | 9 +++++++-- src/test/theme-select-object.ts | 2 +- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/e2e/tests.tsx b/e2e/tests.tsx index a110ec9a62..eca8cf4b77 100644 --- a/e2e/tests.tsx +++ b/e2e/tests.tsx @@ -2,6 +2,7 @@ /* eslint-env browser */ import React from 'react'; +import {THEME_KEYS} from '../src/test/theme-select-object'; interface StoryType { default: { @@ -9,7 +10,7 @@ interface StoryType { decorators: Array< ( Story: StoryType, - context: {globals: {backgrounds: {value: string}}}, + context: {globals: {backgrounds: {value: string}}; name: string}, ) => JSX.Element >; }; @@ -76,9 +77,13 @@ export default function showTestcase(theme: string | null) { .map(Story => ( <> {story.default.decorators[0](Story, { + name: Story.storyName, globals: { backgrounds: { - value: theme === 'dark' ? '#2E2E2E' : '#FFFFFF', + value: + theme === 'dark' + ? THEME_KEYS.newskitDark + : THEME_KEYS.newskitLight, }, }, })} diff --git a/src/test/theme-select-object.ts b/src/test/theme-select-object.ts index 8bcd103d9a..ced5ef9cb0 100644 --- a/src/test/theme-select-object.ts +++ b/src/test/theme-select-object.ts @@ -14,7 +14,7 @@ import {marketWatchTheme} from '../theme-checker/themes/market-watch-theme/marke import {wsjTheme} from '../theme-checker/themes/wsj-theme/wsj-theme'; const STYLING_OVERRIDES = 'Styling overrides'; -const THEME_KEYS = { +export const THEME_KEYS = { transparent: 'transparent', storybookLight: 'storybookOverridesLight', storybookDark: 'storybookOverridesDark', From 472b6ad22859ed5d67f9bd76b55fab3b9fd01364 Mon Sep 17 00:00:00 2001 From: Mike Flood Date: Wed, 29 Mar 2023 14:13:14 +0100 Subject: [PATCH 9/9] docs(PPDSC-2702): use sb components --- src/fieldset/__tests__/fieldset.stories.tsx | 71 ++++++++------------- 1 file changed, 25 insertions(+), 46 deletions(-) diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx index c8e9d882ab..9baa1e59df 100644 --- a/src/fieldset/__tests__/fieldset.stories.tsx +++ b/src/fieldset/__tests__/fieldset.stories.tsx @@ -9,9 +9,8 @@ import {Button} from '../../button'; import {Heading3} from '../../typography'; import {CreateThemeArgs, ThemeProvider} from '../../theme'; import {styled} from '../../utils'; -import {TextBlock} from '../../text-block'; -import {GridLayout} from '../../grid-layout'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; +import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; const myCustomTheme: CreateThemeArgs = { name: 'my-custom-fieldset-theme', @@ -89,17 +88,6 @@ const StyledDiv = styled.div` border: 1px red dotted; `; -const Header = ({children}: {children: React.ReactNode}) => ( - - {children} - -); - export const StoryFieldsetDefault = () => (
@@ -109,13 +97,12 @@ export const StoryFieldsetDefault = () => ( StoryFieldsetDefault.storyName = 'Default'; export const LegendSizing = () => ( - - -
Small
+
( /> Assistive Text
- - -
Medium
+ +
( /> Assistive Text
- - -
Large
+ +
( /> Assistive Text
- - + + ); LegendSizing.storyName = 'Size'; export const LegendVariations = () => ( - - -
Heading
+
Legend}> Assistive Text
- - -
Button
+ +
Legend}> Assistive Text
- - -
Image
+ +
( Assistive Text
- - + + ); LegendVariations.storyName = 'Different legends'; @@ -272,9 +254,8 @@ export const FieldsetWithOverrides = () => ( FieldsetWithOverrides.storyName = 'Styling overrides'; export const FieldsetWithLogicalPropsOverrides = () => ( - -
-
Padding overrides
+ +
( Assistive Text
-
-
-
Margin overrides
+ +
( Assistive Text
-
-
-
Custom outline
+ +
( Assistive Text
-
- + + ); FieldsetWithLogicalPropsOverrides.storyName = 'Overrides';