docs(PPDSC-2474): add overrides storybook themes support

src/banner/__tests__/banner.stories.tsx

@@ -313,9 +313,9 @@ export const StoryLogicalProps = () => (
 );
 StoryLogicalProps.storyName = 'Logical props';
 
-export const StoryOverrides = () => (
+export const StoryStylingOverrides = () => (
   <StorybookPage columns={BANNER_GRID_COLS}>
-    <StorybookCase title="Overrides">
+    <StorybookCase title="Style">
       <div style={{maxWidth: 400}}>
         <StoryBanner
           aria-label="Banner with overrides"
@@ -373,7 +373,7 @@ export const StoryOverrides = () => (
     </StorybookCase>
   </StorybookPage>
 );
-StoryOverrides.storyName = 'Overrides';
+StoryStylingOverrides.storyName = 'Styling overrides';
 
 export default {
   title: 'Components/Banner',
@@ -387,11 +387,15 @@ export default {
     },
   },
   decorators: [
-    (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
       <ThemeProvider
         theme={createCustomThemeWithBaseThemeSwitch(
           context?.globals?.backgrounds?.value,
           bannerCustomThemeObject,
+          context?.name,
         )}
       >
         <Story />

src/block/__tests__/block.stories.tsx

@@ -141,7 +141,7 @@ export const StoryTransitions = () => (
 );
 StoryTransitions.storyName = 'Transitions';
 
-export const StoryOverrides = () => (
+export const StoryStylingOverrides = () => (
   <StorybookPage columns={blockGridCols}>
     <StorybookCase title="Style">
       <Block stylePreset="blockWrapper">
@@ -158,6 +158,12 @@ export const StoryOverrides = () => (
         </Block>
       </Block>
     </StorybookCase>
+  </StorybookPage>
+);
+StoryStylingOverrides.storyName = 'Styling overrides';
+
+export const StoryOverrides = () => (
+  <StorybookPage columns={blockGridCols}>
     <StorybookCase title="Logical props">
       <Block stylePreset="blockWrapper">
         <Block
@@ -186,11 +192,15 @@ export default {
     },
   },
   decorators: [
-    (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
       <ThemeProvider
         theme={createCustomThemeWithBaseThemeSwitch(
           context?.globals?.backgrounds?.value,
           blockCustomThemeObject,
+          context?.name,
         )}
       >
         <Story />

src/character-count/__tests__/character-count.stories.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useRef, useState} from 'react';
+import {Story as StoryType} from '@storybook/react';
 import {CharacterCount, CharacterCountProps} from '..';
 import {
   Form,
@@ -14,17 +15,29 @@ import {TextArea, TextAreaProps} from '../../text-area';
 import {Label} from '../../label';
 import {TextField, TextFieldSize} from '../../text-field';
 import {FormInputState} from '../../form/types';
-import {createTheme, newskitLightTheme, ThemeProvider} from '../../theme';
+import {CreateThemeArgs, newskitLightTheme, ThemeProvider} from '../../theme';
 import {deepMerge} from '../../utils';
 import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
 
-export default {
-  title: 'Components/Character count',
-  parameters: {
-    nkDocs: {
-      title: 'Character count',
-      description:
-        'The Character count lets users know how much text they can enter in an input field as they type.',
+const myCustomTheme: CreateThemeArgs = {
+  name: 'my-custom-theme',
+  overrides: {
+    stylePresets: {
+      characterCountCustom: {
+        base: {
+          color: '{{colors.inkBrand010}}',
+        },
+      },
+      textAreaCustom: deepMerge(newskitLightTheme.stylePresets.inputField, {
+        base: {
+          borderWidth: '{{borders.borderWidth020}}',
+          borderRadius: '{{borders.borderRadiusRounded030}}',
+          borderColor: '{{colors.teal060}}',
+          placeholderColor: '{{colors.teal060}}',
+          color: '{{colors.teal060}}',
+        },
+      }),
     },
   },
 };
@@ -286,93 +299,106 @@ export const CharacterCountForm = () => (
 );
 CharacterCountForm.storyName = 'Form with submit validation';
 
-const myCustomTheme = createTheme({
-  name: 'my-custom-theme',
-  overrides: {
-    stylePresets: {
-      characterCountCustom: {
-        base: {
-          color: '{{colors.teal060}}',
-        },
-      },
-      textAreaCustom: deepMerge(newskitLightTheme.stylePresets.inputField, {
-        base: {
-          borderWidth: '{{borders.borderWidth020}}',
-          borderRadius: '{{borders.borderRadiusRounded030}}',
-          borderColor: '{{colors.teal060}}',
-          placeholderColor: '{{colors.teal060}}',
-          color: '{{colors.teal060}}',
-        },
-      }),
-    },
-  },
-});
+export const CharacterCountStylingOverrides = () => {
+  const styleRef = useRef<HTMLTextAreaElement>(null);
+  return (
+    <StorybookPage>
+      <StorybookCase title="Style">
+        <Label htmlFor="style" overrides={{stylePreset: 'inkBrand010'}}>
+          Label
+        </Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="style"
+          ref={styleRef}
+          maxLength={200}
+          overrides={{stylePreset: 'textAreaCustom'}}
+        />
+        <CharacterCount
+          inputRef={styleRef}
+          overrides={{stylePreset: 'characterCountCustom'}}
+        />
+      </StorybookCase>
+    </StorybookPage>
+  );
+};
+CharacterCountStylingOverrides.storyName = 'Styling overrides';
 
 export const CharacterCountOverrides = () => {
-  const styleRef = useRef<HTMLTextAreaElement>(null);
   const logicalPropsRef = useRef<HTMLTextAreaElement>(null);
   const minHeightRef = useRef<HTMLTextAreaElement>(null);
   const formatRef = useRef<HTMLTextAreaElement>(null);
   return (
-    <ThemeProvider theme={myCustomTheme}>
-      <StorybookPage>
-        <StorybookCase title="Style">
-          <Label htmlFor="style">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="style"
-            ref={styleRef}
-            maxLength={200}
-            overrides={{stylePreset: 'textAreaCustom'}}
-          />
-          <CharacterCount
-            inputRef={styleRef}
-            overrides={{stylePreset: 'characterCountCustom'}}
-          />
-        </StorybookCase>
-        <StorybookCase title="Logical props">
-          <Label htmlFor="logicalProps">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="logicalProps"
-            ref={logicalPropsRef}
-            maxLength={20}
-          />
-          <CharacterCount
-            inputRef={logicalPropsRef}
-            overrides={{marginBlock: 'space040', paddingInline: 'space060'}}
-          />
-        </StorybookCase>
-        <StorybookCase title="Min height">
-          <Label htmlFor="minHeight">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="minHeight"
-            ref={minHeightRef}
-            maxLength={200}
-          />
-          <CharacterCount
-            inputRef={minHeightRef}
-            overrides={{minHeight: '80px'}}
-          />
-        </StorybookCase>
-        <StorybookCase title="Custom format">
-          <Label htmlFor="format">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="format"
-            ref={formatRef}
-            minLength={20}
-          />
-          <CharacterCount
-            inputRef={formatRef}
-            format={({minLength, currentLength}) =>
-              `You need to input at least ${minLength} characters but so far you've only entered ${currentLength}!`
-            }
-          />
-        </StorybookCase>
-      </StorybookPage>
-    </ThemeProvider>
+    <StorybookPage>
+      <StorybookCase title="Logical props">
+        <Label htmlFor="logicalProps">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="logicalProps"
+          ref={logicalPropsRef}
+          maxLength={20}
+        />
+        <CharacterCount
+          inputRef={logicalPropsRef}
+          overrides={{marginBlock: 'space040', paddingInline: 'space060'}}
+        />
+      </StorybookCase>
+      <StorybookCase title="Min height">
+        <Label htmlFor="minHeight">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="minHeight"
+          ref={minHeightRef}
+          maxLength={200}
+        />
+        <CharacterCount
+          inputRef={minHeightRef}
+          overrides={{minHeight: '80px'}}
+        />
+      </StorybookCase>
+      <StorybookCase title="Custom format">
+        <Label htmlFor="format">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="format"
+          ref={formatRef}
+          minLength={20}
+        />
+        <CharacterCount
+          inputRef={formatRef}
+          format={({minLength, currentLength}) =>
+            `You need to input at least ${minLength} characters but so far you've only entered ${currentLength}!`
+          }
+        />
+      </StorybookCase>
+    </StorybookPage>
   );
 };
 CharacterCountOverrides.storyName = 'Overrides';
+
+export default {
+  title: 'Components/Character count',
+  parameters: {
+    nkDocs: {
+      title: 'Character count',
+      description:
+        'The Character count lets users know how much text they can enter in an input field as they type.',
+    },
+  },
+  decorators: [
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
+      <ThemeProvider
+        theme={createCustomThemeWithBaseThemeSwitch(
+          context?.globals?.backgrounds?.value,
+          myCustomTheme,
+          context?.name,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};