Docs/ppdsc 2707 update headline component storybook scenarios (#692)

* docs(PPDSC-2707): headline scenario updates * docs(PPDSC-2707): headline scenario updates * docs(PPDSC-2707): headline fix * docs(PPDSC-2707): heading component reset * docs(PPDSC-2707): added typography for the kicker headline * docs(PPDSC-2707): styling overrides fix * docs(PPDSC-2707): design feedbacks fix * docs(PPDSC-2707): design feedback changes * docs(PPDSC-2707): design feedback changes * docs(PPDSC-2707): design feedback * docs(PPDSC-2707): deisgn feedback * docs(PPDSC-2707): deisgn feedback * docs(PPDSC-2707): storybook ID fix * docs(PPDSC-2707): storybookid fix * docs(PPDSC-2707): storybookid fix * docs(PPDSC-2707): storybookid fix * docs(PPDSC-2707): storybookid fix * docs(PPDSC-2707): storybookid fix * docs(PPDSC-2707): storybookid fix * docs(PPDSC-2707): removed H tag variations * docs(PPDSC-2707): added headingAs * docs(PPDSC-2707): added kicker props in headline component * docs(PPDSC-2707): added kicker props in headline component * docs(PPDSC-2707): removed unwanted styles * docs(PPDSC-2707): removed unwanted styles * docs(PPDSC-2707): removed unwanted styles --------- Co-authored-by: Ravindren <[email protected]>
newscorp-ghfb · Mar 21, 2023 · 22b32d4 · 22b32d4
1 parent 2ae2e92
commit 22b32d4
Show file tree

Hide file tree

Showing 2 changed files with 244 additions and 62 deletions.
diff --git a/site/pages/components/headline.tsx b/site/pages/components/headline.tsx
@@ -43,7 +43,7 @@ const HeadlineComponent = (layoutProps: LayoutProps) => (
       introduced: 'v0.19.0',
       codeUrl:
         'https://github.com/newscorp-ghfb/newskit/tree/main/src/headline',
-      storybookId: 'components-headline--story-headline',
+      storybookId: 'components-headline--story-headline-default',
     }}
     interactiveDemo={{
       introduction:

diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx
@@ -3,6 +3,8 @@ import {Story as StoryType} from '@storybook/react';
 import {Headline} from '..';
 import {ThemeProvider, CreateThemeArgs} from '../../theme';
 import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
+import {getColorCssFromTheme, styled} from '../../utils/style';
+import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
 
 const headlineCustomThemeObject: CreateThemeArgs = {
   name: 'headline-custom-theme',
@@ -19,6 +21,7 @@ const headlineCustomThemeObject: CreateThemeArgs = {
           borderRadius: '{{borders.borderRadiusSharp}}',
         },
       },
+      headlineCustom: {base: {color: '{{colors.inkBrand010}}'}},
       linkInline: {
         base: {
           color: '{{colors.interactivePrimary030}}',
@@ -30,77 +33,256 @@ const headlineCustomThemeObject: CreateThemeArgs = {
   },
 };
 
-export const StoryHeadline = () => (
-  <>
-    <Headline>Headline text with no kicker</Headline>
-    <br />
-    <br />
-    <Headline kickerText="Kicker">Headline text</Headline>
-    <br />
-    <Headline kickerText="Kicker as h2" headingAs="h3" kickerAs="h2">
-      Headline as h3
-    </Headline>
-    <br />
-    <Headline
-      kickerText="Kicker overwritten preset"
-      overrides={{
-        kicker: {
-          stylePreset: 'tagPrimary',
-        },
-        heading: {
-          stylePreset: 'linkInline',
-        },
-      }}
-    >
-      Headline overwritten preset
-    </Headline>
-    <br />
-    <Headline
-      kickerText="Kicker custom mq margin preset"
-      overrides={{
-        kicker: {
-          spaceInline: {
-            xs: 'space080',
-            md: 'space040',
+const BODY = 'The quick brown fox';
+
+const HeadlineText = 'Heading';
+
+const MarginOverridesWrapper = styled.div`
+  border: 1px dashed;
+  ${getColorCssFromTheme('borderColor', 'red060')}
+`;
+
+export const StoryHeadlineDefault = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase title="Render as h1 (default)">
+      <Headline headingAs="h1">Heading</Headline>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryHeadlineDefault.storyName = 'Default';
+
+export const StoryHeadlineKicker = () => (
+  <StorybookPage>
+    <StorybookCase title="With Kicker">
+      <Headline
+        kickerText="Kicker"
+        headingAs="h1"
+        kickerAs="h1"
+        overrides={{
+          typographyPreset: 'editorialHeadline070',
+        }}
+      >
+        {HeadlineText}
+      </Headline>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryHeadlineKicker.storyName = 'Kicker';
+
+export const StoryHeadlineLogicalProps = () => (
+  <StorybookPage columns="1fr 1fr">
+    <StorybookCase title=" editorialHeadline050">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline070',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+    <StorybookCase title=" editorialHeadline050">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline060',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+    <StorybookCase title=" editorialHeadline050">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline050',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+    <StorybookCase title=" editorialHeadline040">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline040',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+    <StorybookCase title=" editorialHeadline030">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline030',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+    <StorybookCase title=" editorialHeadline020">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline020',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+    <StorybookCase title=" editorialHeadline010">
+      <MarginOverridesWrapper>
+        <Headline
+          overrides={{
+            typographyPreset: 'editorialHeadline010',
+            marginBlock: 'space030',
+            marginInline: 'space030',
+            paddingBlock: 'space030',
+            paddingInline: 'space030',
+          }}
+        >
+          {BODY}
+        </Headline>
+      </MarginOverridesWrapper>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryHeadlineLogicalProps.storyName = 'Logical props';
+
+export const StoryHeadlineStylingOverrides = () => (
+  <StorybookPage columns="1fr 1fr 1fr">
+    <StorybookCase title=" utilityHeading050">
+      <Headline
+        overrides={{
+          heading: {
+            stylePreset: 'headlineCustom',
           },
-        },
-      }}
-    >
-      Heading Headline
-    </Headline>
-    <br />
-    <Headline
-      kickerText="Using logical props"
-      overrides={{
-        paddingInline: '30px',
-        paddingBlock: '15px',
-      }}
-    >
-      For Padding
-    </Headline>
-    <br />
-    <Headline
-      kickerText="Using logical props"
-      overrides={{
-        marginInline: '30px',
-        marginBlock: '15px',
-      }}
-    >
-      For Margin
-    </Headline>
-  </>
+          typographyPreset: 'utilityHeading050',
+        }}
+      >
+        {BODY}
+      </Headline>
+    </StorybookCase>
+    <StorybookCase title=" utilityHeading040">
+      <Headline
+        overrides={{
+          heading: {
+            stylePreset: 'headlineCustom',
+          },
+          typographyPreset: 'utilityHeading040',
+        }}
+      >
+        {BODY}
+      </Headline>
+    </StorybookCase>
+    <StorybookCase title=" utilityHeading030">
+      <Headline
+        overrides={{
+          heading: {
+            stylePreset: 'headlineCustom',
+          },
+          typographyPreset: 'utilityHeading030',
+        }}
+      >
+        {BODY}
+      </Headline>
+    </StorybookCase>
+    <StorybookCase title=" utilityHeading020">
+      <Headline
+        overrides={{
+          heading: {
+            stylePreset: 'headlineCustom',
+          },
+          typographyPreset: 'utilityHeading020',
+        }}
+      >
+        {BODY}
+      </Headline>
+    </StorybookCase>
+    <StorybookCase title=" utilityHeading010">
+      <Headline
+        overrides={{
+          heading: {
+            stylePreset: 'headlineCustom',
+          },
+          typographyPreset: 'utilityHeading010',
+        }}
+      >
+        {BODY}
+      </Headline>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryHeadlineStylingOverrides.storyName = 'Styling overrides';
+
+export const StoryHeadlineOverrides = () => (
+  <StorybookPage columns="1fr">
+    <StorybookCase title="H-tag override (to h2)">
+      <Headline
+        headingAs="h2"
+        overrides={{
+          typographyPreset: 'editorialHeadline070',
+        }}
+      >
+        {BODY}
+      </Headline>
+    </StorybookCase>
+  </StorybookPage>
 );
-StoryHeadline.storyName = 'headline';
+StoryHeadlineOverrides.storyName = 'Overrides';
 
 export default {
-  title: 'Components/headline',
+  title: 'Components/Headline',
   component: () => 'None',
+  parameters: {
+    nkDocs: {
+      title: 'Headline',
+      url: 'https://newskit.co.uk/components/headline/',
+      description:
+        'Headline is used to highlight the main point or category of the following text.',
+    },
+  },
   decorators: [
-    (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
       <ThemeProvider
         theme={createCustomThemeWithBaseThemeSwitch(
           context?.globals?.backgrounds?.value,
           headlineCustomThemeObject,
+          context?.name,
         )}
       >
         <Story />