From 5531254f3b1df62ddccbc176a7b3f63601abbe40 Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Mon, 8 May 2023 20:21:25 +0530
Subject: [PATCH 1/7] docs(723): standfirst enhancements

---
 .../__tests__/standfirst.stories.tsx          | 191 +++++++++++-------
 1 file changed, 120 insertions(+), 71 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index fa4d3fddaf..6f6d55eb1a 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -1,105 +1,154 @@
 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 {getColorCssFromTheme, styled} from '../../utils/style';
 
-const myCustomTheme = createTheme({
+const standfirstCustomThemeObject: CreateThemeArgs = {
   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}}',
-      },
+      standfirstCustom: {base: {color: '{{colors.inkBrand010}}'}},
     },
   },
-});
+};
 
 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',
-};
+  '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>
-  </>
-);
-StoryDefault.storyName = 'default';
-
-export const StoryWithAsProp = () => (
-  <>
-    <StorybookSubHeading>Standfirst - as h3</StorybookSubHeading>
-    <Standfirst as="h3">{bodyString}</Standfirst>
-
-    <StorybookSubHeading>Standfirst - as span</StorybookSubHeading>
-    <Standfirst as="span">{bodyString}</Standfirst>
-  </>
-);
-StoryWithAsProp.storyName = 'with-as-prop';
-
-export const StoryWithOverrides = () => (
-  <>
-    <ThemeProvider theme={myCustomTheme}>
-      <StorybookSubHeading>
-        Standfirst - with style-preset override
-      </StorybookSubHeading>
+  <StorybookPage columns="1fr">
+    <StorybookCase>
       <Standfirst
+        as="h2"
         overrides={{
           styledText: {
-            stylePreset: 'standfirstCustom',
+            typographyPreset: 'utilitySubheading020',
           },
         }}
       >
         {bodyString}
       </Standfirst>
-      <StorybookSubHeading>
-        Standfirst - with typography-preset override
-      </StorybookSubHeading>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryDefault.storyName = 'Default';
+
+export const StoryWithAsSpan = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase>
       <Standfirst
+        as="span"
         overrides={{
           styledText: {
-            typographyPreset: 'editorialSubheadline020',
+            typographyPreset: 'utilitySubheading020',
           },
         }}
       >
         {bodyString}
       </Standfirst>
-    </ThemeProvider>
-  </>
+    </StorybookCase>
+  </StorybookPage>
 );
-StoryWithOverrides.storyName = 'with-overrides';
+StoryWithAsSpan.storyName = 'Standfirst as span';
 
 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>
+    <StorybookPage columns="1fr">
+      <StorybookCase>
+        <MarginOverridesWrapper>
+          <Standfirst
+            as="span"
+            overrides={{
+              styledText: {
+                typographyPreset: 'utilitySubheading020',
+                paddingInline: '20px',
+                paddingBlock: '10px',
+              },
+            }}
+          >
+            {bodyString}
+          </Standfirst>
+        </MarginOverridesWrapper>
+      </StorybookCase>
+    </StorybookPage>
+  </>
+);
+StoryLogicalProps.storyName = 'Logical props';
+
+export const StoryWithStylingOverrides = () => (
+  <>
+    <StorybookPage columns="1fr">
+      <StorybookCase>
+        <Standfirst
+          as="span"
+          overrides={{
+            styledText: {
+              typographyPreset: 'utilitySubheading020',
+              stylePreset: 'standfirstCustom',
+            },
+          }}
+        >
+          {bodyString}
+        </Standfirst>
+      </StorybookCase>
+    </StorybookPage>
+  </>
+);
+StoryWithStylingOverrides.storyName = 'Styling overrides';
+
+export const StoryWithOverrides = () => (
+  <>
+    <StorybookPage columns="1fr">
+      <StorybookCase title="Typography preset override">
+        <Standfirst
+          as="span"
+          overrides={{
+            styledText: {
+              typographyPreset: 'utilitySubheading050',
+            },
+          }}
+        >
+          {bodyString}
+        </Standfirst>
+      </StorybookCase>
+    </StorybookPage>
   </>
 );
-StoryLogicalProps.storyName = 'logical-props';
+StoryWithOverrides.storyName = 'Overrides';
+
+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,
+          standfirstCustomThemeObject,
+          context?.name,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};

From c66132d93359f73174579e92f17abc5ac529b118 Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Thu, 11 May 2023 00:11:14 +0530
Subject: [PATCH 2/7] docs(723): refined theme and typograpghy presets

---
 .../__tests__/standfirst.stories.tsx          | 59 +++++++++----------
 1 file changed, 27 insertions(+), 32 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index 6f6d55eb1a..06790b18f9 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -4,8 +4,25 @@ 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 {getColorCssFromTheme, styled} from '../../utils/style';
+import {TextBlock} from '../../text-block';
+import {
+  getColorCssFromTheme,
+  styled,
+  getTypographyPresetFromTheme,
+} from '../../utils/style';
 
+const StyledContainer = styled.div`
+  ${getTypographyPresetFromTheme('utilitySubheading020')}
+`;
+
+const CONTENT = (
+  <TextBlock typographyPreset="utilitySubheading020">
+    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.
+  </TextBlock>
+);
 const standfirstCustomThemeObject: CreateThemeArgs = {
   name: 'my-custom-standfirst-theme',
   overrides: {
@@ -15,22 +32,10 @@ const standfirstCustomThemeObject: CreateThemeArgs = {
   },
 };
 
-const 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.';
-
 export const StoryDefault = () => (
   <StorybookPage columns="1fr">
     <StorybookCase>
-      <Standfirst
-        as="h2"
-        overrides={{
-          styledText: {
-            typographyPreset: 'utilitySubheading020',
-          },
-        }}
-      >
-        {bodyString}
-      </Standfirst>
+      <Standfirst as="h2">{CONTENT}</Standfirst>
     </StorybookCase>
   </StorybookPage>
 );
@@ -39,16 +44,7 @@ StoryDefault.storyName = 'Default';
 export const StoryWithAsSpan = () => (
   <StorybookPage columns="1fr">
     <StorybookCase>
-      <Standfirst
-        as="span"
-        overrides={{
-          styledText: {
-            typographyPreset: 'utilitySubheading020',
-          },
-        }}
-      >
-        {bodyString}
-      </Standfirst>
+      <Standfirst as="span">{CONTENT}</Standfirst>
     </StorybookCase>
   </StorybookPage>
 );
@@ -60,16 +56,14 @@ export const StoryLogicalProps = () => (
       <StorybookCase>
         <MarginOverridesWrapper>
           <Standfirst
-            as="span"
             overrides={{
               styledText: {
-                typographyPreset: 'utilitySubheading020',
                 paddingInline: '20px',
                 paddingBlock: '10px',
               },
             }}
           >
-            {bodyString}
+            {CONTENT}
           </Standfirst>
         </MarginOverridesWrapper>
       </StorybookCase>
@@ -83,15 +77,13 @@ export const StoryWithStylingOverrides = () => (
     <StorybookPage columns="1fr">
       <StorybookCase>
         <Standfirst
-          as="span"
           overrides={{
             styledText: {
-              typographyPreset: 'utilitySubheading020',
-              stylePreset: 'standfirstCustom',
+              stylePreset: 'inkBrand010',
             },
           }}
         >
-          {bodyString}
+          {CONTENT}
         </Standfirst>
       </StorybookCase>
     </StorybookPage>
@@ -111,7 +103,10 @@ export const StoryWithOverrides = () => (
             },
           }}
         >
-          {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>
       </StorybookCase>
     </StorybookPage>

From d0ee626a779c2682fe1332f09a73fc817c3840f2 Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Thu, 11 May 2023 00:22:18 +0530
Subject: [PATCH 3/7] docs(723): removed themeing typograoghy

---
 src/standfirst/__tests__/standfirst.stories.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index 06790b18f9..2e9066570a 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -5,15 +5,7 @@ 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,
-  getTypographyPresetFromTheme,
-} from '../../utils/style';
-
-const StyledContainer = styled.div`
-  ${getTypographyPresetFromTheme('utilitySubheading020')}
-`;
+import {getColorCssFromTheme, styled} from '../../utils/style';
 
 const CONTENT = (
   <TextBlock typographyPreset="utilitySubheading020">

From ab1540962102bf263772171ea1ee493b1d48129f Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Thu, 11 May 2023 00:26:04 +0530
Subject: [PATCH 4/7] docs(723): removed react fragements

---
 .../__tests__/standfirst.stories.tsx          | 90 +++++++++----------
 1 file changed, 42 insertions(+), 48 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index 2e9066570a..709bac2f6e 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -43,66 +43,60 @@ export const StoryWithAsSpan = () => (
 StoryWithAsSpan.storyName = 'Standfirst as span';
 
 export const StoryLogicalProps = () => (
-  <>
-    <StorybookPage columns="1fr">
-      <StorybookCase>
-        <MarginOverridesWrapper>
-          <Standfirst
-            overrides={{
-              styledText: {
-                paddingInline: '20px',
-                paddingBlock: '10px',
-              },
-            }}
-          >
-            {CONTENT}
-          </Standfirst>
-        </MarginOverridesWrapper>
-      </StorybookCase>
-    </StorybookPage>
-  </>
-);
-StoryLogicalProps.storyName = 'Logical props';
-
-export const StoryWithStylingOverrides = () => (
-  <>
-    <StorybookPage columns="1fr">
-      <StorybookCase>
+  <StorybookPage columns="1fr">
+    <StorybookCase>
+      <MarginOverridesWrapper>
         <Standfirst
           overrides={{
             styledText: {
-              stylePreset: 'inkBrand010',
+              paddingInline: '20px',
+              paddingBlock: '10px',
             },
           }}
         >
           {CONTENT}
         </Standfirst>
-      </StorybookCase>
-    </StorybookPage>
-  </>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryLogicalProps.storyName = 'Logical props';
+
+export const StoryWithStylingOverrides = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase>
+      <Standfirst
+        overrides={{
+          styledText: {
+            stylePreset: 'inkBrand010',
+          },
+        }}
+      >
+        {CONTENT}
+      </Standfirst>
+    </StorybookCase>
+  </StorybookPage>
 );
 StoryWithStylingOverrides.storyName = 'Styling overrides';
 
 export const StoryWithOverrides = () => (
-  <>
-    <StorybookPage columns="1fr">
-      <StorybookCase title="Typography preset override">
-        <Standfirst
-          as="span"
-          overrides={{
-            styledText: {
-              typographyPreset: 'utilitySubheading050',
-            },
-          }}
-        >
-          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>
-      </StorybookCase>
-    </StorybookPage>
-  </>
+  <StorybookPage columns="1fr">
+    <StorybookCase title="Typography preset override">
+      <Standfirst
+        as="span"
+        overrides={{
+          styledText: {
+            typographyPreset: 'utilitySubheading050',
+          },
+        }}
+      >
+        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>
+    </StorybookCase>
+  </StorybookPage>
 );
 StoryWithOverrides.storyName = 'Overrides';
 

From 05c44e9c797a6f0f8362fd4237d232b8c02fea0a Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Thu, 11 May 2023 00:31:33 +0530
Subject: [PATCH 5/7] docs(723): removed themeing

---
 src/standfirst/__tests__/standfirst.stories.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index 709bac2f6e..6a687c41e0 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -15,14 +15,6 @@ const CONTENT = (
     for design and development.
   </TextBlock>
 );
-const standfirstCustomThemeObject: CreateThemeArgs = {
-  name: 'my-custom-standfirst-theme',
-  overrides: {
-    stylePresets: {
-      standfirstCustom: {base: {color: '{{colors.inkBrand010}}'}},
-    },
-  },
-};
 
 export const StoryDefault = () => (
   <StorybookPage columns="1fr">
@@ -124,7 +116,7 @@ export default {
       <ThemeProvider
         theme={createCustomThemeWithBaseThemeSwitch(
           context?.globals?.backgrounds?.value,
-          standfirstCustomThemeObject,
+          {},
           context?.name,
         )}
       >

From bfe3ee89796d3d148641ef6cc3b33f1cf5368052 Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Fri, 12 May 2023 13:57:08 +0530
Subject: [PATCH 6/7] docs(723): default story update

---
 src/standfirst/__tests__/standfirst.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index 6a687c41e0..c3f043e94e 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -19,7 +19,7 @@ const CONTENT = (
 export const StoryDefault = () => (
   <StorybookPage columns="1fr">
     <StorybookCase>
-      <Standfirst as="h2">{CONTENT}</Standfirst>
+      <Standfirst>{CONTENT}</Standfirst>
     </StorybookCase>
   </StorybookPage>
 );

From 4fa8b374718d1251d5a19f85c79b61d68793b779 Mon Sep 17 00:00:00 2001
From: Ravindren <jravindren@NTS251819MC.local>
Date: Mon, 15 May 2023 18:06:24 +0530
Subject: [PATCH 7/7] docs(723): removed typograpghy

---
 src/standfirst/__tests__/standfirst.stories.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/standfirst/__tests__/standfirst.stories.tsx b/src/standfirst/__tests__/standfirst.stories.tsx
index c3f043e94e..60b9904db5 100644
--- a/src/standfirst/__tests__/standfirst.stories.tsx
+++ b/src/standfirst/__tests__/standfirst.stories.tsx
@@ -7,14 +7,8 @@ import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
 import {TextBlock} from '../../text-block';
 import {getColorCssFromTheme, styled} from '../../utils/style';
 
-const CONTENT = (
-  <TextBlock typographyPreset="utilitySubheading020">
-    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.
-  </TextBlock>
-);
+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 = () => (
   <StorybookPage columns="1fr">