From 6bd5bd624d51a9678d2e938e2f6f7f34d2ce4823 Mon Sep 17 00:00:00 2001
From: jannuk59 <janani.ravindren@news.co.uk>
Date: Tue, 16 May 2023 14:07:38 +0530
Subject: [PATCH] docs(723): Standfirst Storybook Enhancement (#881)

* docs(723): standfirst enhancements

* docs(723): refined theme and typograpghy presets

* docs(723): removed themeing typograoghy

* docs(723): removed react fragements

* docs(723): removed themeing

* docs(723): default story update

* docs(723): removed typograpghy

---------

Co-authored-by: Ravindren <jravindren@NTS251819MC.local>
---
 .../__tests__/standfirst.stories.tsx          | 174 ++++++++++--------
 1 file changed, 95 insertions(+), 79 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index fa4d3fddaf..60b9904db5 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/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>
+    ),
+  ],
+};