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/assistive-text/assistive-text.tsx b/src/assistive-text/assistive-text.tsx
index 3223cf4553..0d4058ed46 100644
--- a/src/assistive-text/assistive-text.tsx
+++ b/src/assistive-text/assistive-text.tsx
@@ -47,7 +47,7 @@ const ThemelessAssistiveText = React.forwardRef<
state={state}
role={state === 'invalid' ? 'alert' : undefined}
aria-live={state === 'invalid' ? 'polite' : undefined}
- {...textBlockOverrides}
+ overrides={textBlockOverrides}
{...props}
>
{children}
diff --git a/src/fieldset/__tests__/fieldset.stories.tsx b/src/fieldset/__tests__/fieldset.stories.tsx
index 48b2237b72..9baa1e59df 100644
--- a/src/fieldset/__tests__/fieldset.stories.tsx
+++ b/src/fieldset/__tests__/fieldset.stories.tsx
@@ -1,24 +1,87 @@
import * as React from 'react';
+import {Story as StoryType} from '@storybook/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 {CreateThemeArgs, ThemeProvider} from '../../theme';
import {styled} from '../../utils';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
+import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
+
+const myCustomTheme: CreateThemeArgs = {
+ name: 'my-custom-fieldset-theme',
+ overrides: {
+ stylePresets: {
+ legendCustom: {
+ base: {
+ color: '{{colors.inkContrast}}',
+ backgroundColor: '{{colors.interfaceBackground}}',
+ },
+ },
+ fieldsetCustom: {
+ base: {
+ backgroundColor: '{{colors.interfaceInformative020}}',
+ borderColor: '{{colors.inkBrand010}}',
+ borderWidth: '1px',
+ borderStyle: 'solid',
+ },
+ },
+ checkboxInputCustom: {
+ base: {
+ backgroundColor: '{{colors.interfaceInformative020}}',
+ borderColor: '{{colors.inkBrand010}}',
+ borderWidth: '{{borders.borderWidth020}}',
+ borderRadius: '{{borders.borderRadiusRounded010}}',
+ borderStyle: 'solid',
+ iconColor: '{{colors.inkInverse}}',
+ },
+ },
+ checkboxLabelCustom: {
+ base: {
+ color: '{{colors.inkBrand010}}',
+ },
+ },
+ assistiveTextCustom: {
+ base: {
+ color: '{{colors.inkBrand010}}',
+ },
+ },
+ },
+ },
+};
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.',
+ },
+ },
+ decorators: [
+ (
+ Story: StoryType,
+ context: {name: string; globals: {backgrounds: {value: string}}},
+ ) => (
+
+
+
+ ),
+ ],
};
const StyledDiv = styled.div`
@@ -26,111 +89,98 @@ const StyledDiv = styled.div`
`;
export const StoryFieldsetDefault = () => (
- <>
- Fieldset default
-
-
+
);
-StoryFieldsetDefault.storyName = 'fieldset-default';
+StoryFieldsetDefault.storyName = 'Default';
export const LegendSizing = () => (
- <>
- Legend sizes
-
-
- Small
-
-
-
- Medium
-
-
-
- Large
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
);
-LegendSizing.storyName = 'fieldset-legend-sizing';
+LegendSizing.storyName = 'Size';
export const LegendVariations = () => (
- <>
- Legend variations
-
-
- with legend as heading
-
-
-
- with legend as button
-
-
-
- with legend as image
-
- }
- >
-
+
+
+
+
+
+
+
+
- Assistive Text
-
-
-
-
+ }
+ >
+
+ Assistive Text
+
+
+
);
-LegendVariations.storyName = 'fieldset-different-legends';
+LegendVariations.storyName = 'Different legends';
export const FieldsetGrouping = () => (
<>
- Fieldset grouping
-
);
-FieldsetGrouping.storyName = 'fieldset-grouping';
-
-const myCustomTheme = createTheme({
- name: 'my-custom-select-theme',
- overrides: {
- stylePresets: {
- fieldsetCustom: {
- base: {
- backgroundColor: '{{colors.amber010}}',
- borderColor: '{{colors.purple060}}',
- borderWidth: '1px',
- borderStyle: 'solid',
- },
- },
- legendCustom: {
- base: {
- backgroundColor: '{{colors.green040}}',
- },
- },
- },
- },
-});
-
-const StyledFieldsetWithClippedBG = styled(Fieldset)`
- background-clip: content-box;
-`;
-
-export const FieldsetWithOverrides = () => (
- <>
- Fieldset with overrides
-
-
-
- Assistive Text
-
-
-
-);
-FieldsetWithOverrides.storyName = 'fieldset-with-overrides';
+FieldsetGrouping.storyName = 'Fieldset grouping';
export const FieldsetWithCustomLegend = () => (
<>
- Fieldset with custom legend
);
-FieldsetWithCustomLegend.storyName = 'fieldset-with-custom-legend';
+FieldsetWithCustomLegend.storyName = 'Custom legend';
+
+const StyledFieldsetWithClippedBG = styled(Fieldset)`
+ background-clip: content-box;
+`;
+
+export const FieldsetWithOverrides = () => (
+
+
+
+ Assistive Text
+
+
+);
+FieldsetWithOverrides.storyName = 'Styling overrides';
export const FieldsetWithLogicalPropsOverrides = () => (
- <>
- Fieldset with logical props overrides
-
+
+
+
+
+
-
+
+
-
-
+
+
);
-FieldsetWithLogicalPropsOverrides.storyName =
- 'fieldset-with-logical-props-overrides';
+FieldsetWithLogicalPropsOverrides.storyName = 'Overrides';
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',