docs(723): Standfirst Storybook Enhancement

src/standfirst/__tests__/standfirst.stories.tsx

@@ -1,105 +1,121 @@
 import * as React from 'react';
 import {Standfirst} from '..';
-import {createTheme, ThemeProvider} from '../../theme';
-import {StorybookSubHeading} from '../../test/storybook-comps';
+import {ThemeProvider, CreateThemeArgs} from '../../theme';
+import {Story as StoryType} from '@storybook/react';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
+import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
+import {TextBlock} from '../../text-block';
+import {getColorCssFromTheme, styled} from '../../utils/style';
 
-const myCustomTheme = createTheme({
-  name: 'my-custom-standfirst-theme',
-  overrides: {
-    stylePresets: {
-      standfirstCustom: {
-        base: {
-          color: '{{colors.blue060}}',
-        },
-      },
-    },
-    typographyPresets: {
-      standfirstCustom: {
-        fontFamily: '{{fonts.fontFamily1.fontFamily}}',
-        fontSize: '{{fonts.fontSize060}}',
-        lineHeight: '{{fonts.fontLineHeight030}}',
-        fontWeight: '{{fonts.fontWeight020}}',
-        letterSpacing: '{{fonts.fontLetterSpacing030}}',
-      },
-    },
-  },
-});
-
-const bodyString =
-  'Telling the stories that matter, seeding ideas and stirring emotion. Capturing moments, meaning and magic. Making sense of the world. On the shoulders of giants, in the thick of it, behind the scenes and fighting the good fight.';
-
-export default {
-  title: 'Components/standfirst',
-  component: () => 'None',
-};
+const CONTENT =
+  '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.';
 
 export const StoryDefault = () => (
-  <>
-    <StorybookSubHeading>Standfirst - default</StorybookSubHeading>
-    <Standfirst>{bodyString}</Standfirst>
-  </>
+  <StorybookPage columns="1fr">
+    <StorybookCase>
+      <Standfirst>{CONTENT}</Standfirst>
+    </StorybookCase>
+  </StorybookPage>
 );
-StoryDefault.storyName = 'default';
+StoryDefault.storyName = 'Default';
 
-export const StoryWithAsProp = () => (
-  <>
-    <StorybookSubHeading>Standfirst - as h3</StorybookSubHeading>
-    <Standfirst as="h3">{bodyString}</Standfirst>
+export const StoryWithAsSpan = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase>
+      <Standfirst as="span">{CONTENT}</Standfirst>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryWithAsSpan.storyName = 'Standfirst as span';
 
-    <StorybookSubHeading>Standfirst - as span</StorybookSubHeading>
-    <Standfirst as="span">{bodyString}</Standfirst>
-  </>
+export const StoryLogicalProps = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase>
+      <MarginOverridesWrapper>
+        <Standfirst
+          overrides={{
+            styledText: {
+              paddingInline: '20px',
+              paddingBlock: '10px',
+            },
+          }}
+        >
+          {CONTENT}
+        </Standfirst>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+  </StorybookPage>
 );
-StoryWithAsProp.storyName = 'with-as-prop';
+StoryLogicalProps.storyName = 'Logical props';
 
-export const StoryWithOverrides = () => (
-  <>
-    <ThemeProvider theme={myCustomTheme}>
-      <StorybookSubHeading>
-        Standfirst - with style-preset override
-      </StorybookSubHeading>
+export const StoryWithStylingOverrides = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase>
       <Standfirst
         overrides={{
           styledText: {
-            stylePreset: 'standfirstCustom',
+            stylePreset: 'inkBrand010',
           },
         }}
       >
-        {bodyString}
+        {CONTENT}
       </Standfirst>
-      <StorybookSubHeading>
-        Standfirst - with typography-preset override
-      </StorybookSubHeading>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryWithStylingOverrides.storyName = 'Styling overrides';
+
+export const StoryWithOverrides = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase title="Typography preset override">
       <Standfirst
+        as="span"
         overrides={{
           styledText: {
-            typographyPreset: 'editorialSubheadline020',
+            typographyPreset: 'utilitySubheading050',
           },
         }}
       >
-        {bodyString}
+        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.
       </Standfirst>
-    </ThemeProvider>
-  </>
+    </StorybookCase>
+  </StorybookPage>
 );
-StoryWithOverrides.storyName = 'with-overrides';
+StoryWithOverrides.storyName = 'Overrides';
 
-export const StoryLogicalProps = () => (
-  <>
-    <StorybookSubHeading>
-      Standfirst - logical padding props
-    </StorybookSubHeading>
-    <Standfirst
-      overrides={{styledText: {paddingInline: '20px', paddingBlock: '10px'}}}
-    >
-      {bodyString}
-    </Standfirst>
-    <StorybookSubHeading>Standfirst - logical margin props</StorybookSubHeading>
-    <Standfirst
-      overrides={{styledText: {marginInline: '20px', marginBlock: '10px'}}}
-    >
-      {bodyString}
-    </Standfirst>
-  </>
-);
-StoryLogicalProps.storyName = 'logical-props';
+const MarginOverridesWrapper = styled.div`
+  border: 1px dashed;
+  ${getColorCssFromTheme('borderColor', 'red060')}
+`;
+
+export default {
+  title: 'Components/Standfirst',
+  component: () => 'None',
+  parameters: {
+    nkDocs: {
+      title: 'Standfirst',
+      url: 'https://www.newskit.co.uk/components/standfirst/',
+      description:
+        'Standfirst is an introductory paragraph in an article, which summarises the articles content.',
+    },
+  },
+  decorators: [
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
+      <ThemeProvider
+        theme={createCustomThemeWithBaseThemeSwitch(
+          context?.globals?.backgrounds?.value,
+          {},
+          context?.name,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};