From 3cf7bdf1a42f1ba6bac5fd792e2929aa017bd3be Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 7 Mar 2023 00:51:31 +0530 Subject: [PATCH 01/26] docs(PPDSC-2707): headline scenario updates --- src/typography/__tests__/heading.stories.tsx | 454 ++++++++++--------- 1 file changed, 233 insertions(+), 221 deletions(-) diff --git a/src/typography/__tests__/heading.stories.tsx b/src/typography/__tests__/heading.stories.tsx index 5792719b53..56ed1acef6 100644 --- a/src/typography/__tests__/heading.stories.tsx +++ b/src/typography/__tests__/heading.stories.tsx @@ -1,12 +1,13 @@ import * as React from 'react'; import {createTheme, ThemeProvider} from '../../theme'; -import { - StorybookHeading, - StorybookSubHeading, -} from '../../test/storybook-comps'; import {H6, H5, H4, H3, H2, H1} from '..'; -import {TextBlock} from '../../text-block'; -import {Grid, Cell} from '../../grid'; +import {getColorCssFromTheme, styled} from '../../utils/style'; +import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; +import {Headline} from '../../headline'; + +const BODY = 'The quick brown box'; + +const HeadlineText = 'Heading'; const myCustomTheme = createTheme({ name: 'my-custom-heading-theme', @@ -14,14 +15,17 @@ const myCustomTheme = createTheme({ stylePresets: { headingCustom: { base: { - color: '{{colors.blue060}}', + color: '{{colors.amber070}}', }, }, }, }, }); -const title = 'We tell the stories that matter.'; +const MarginOverridesWrapper = styled.div` + border: 1px dashed; + ${getColorCssFromTheme('borderColor', 'red060')} +`; export default { title: 'Components/typography/heading', @@ -29,227 +33,235 @@ export default { }; export const StoryHeadingDefault = () => ( - <> - Heading - default -
-

Default H1 - {title}

-
-

Default H2 - {title}

-
-

Default H3 - {title}

-
-

Default H4 - {title}

-
-
Default H5 - {title}
-
-
Default H6 - {title}
- -); -StoryHeadingDefault.storyName = 'heading-default'; - -export const StoryCropVsNoCrop = () => ( - <> - - - cropped - - editorialHeadline010 - - - editorialHeadline020 - - - editorialHeadline030 - - - editorialHeadline040 - - - editorialHeadline050 - - - editorialHeadline060 - - - editorialHeadline070 - - - editorialHeadline080 - - - - not cropped - - editorialHeadline010 - - - editorialHeadline020 - - - editorialHeadline030 - - - editorialHeadline040 - - - editorialHeadline050 - - - editorialHeadline060 - - - editorialHeadline070 - - - editorialHeadline080 - - - - + + +

Heading

+ + ); -StoryCropVsNoCrop.storyName = 'crop vs no crop'; +StoryHeadingDefault.storyName = 'Default'; -export const StoryHeadingOverrides = () => ( - <> - Heading with overrides - -

- H1 with override -

-
-

- H2 with override -

-
-

- H3 with override -

-
-

- H4 with override -

-
-
- H5 with override -
-
-
- H6 with override -
- - +export const StoryHeadingVariations = () => ( + + +

{HeadlineText}

+ + +

{HeadlineText}

+ + +

{HeadlineText}

+ + +

{HeadlineText}

+ + +
{HeadlineText}
+ + +
{HeadlineText}
+ + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + ); -StoryHeadingOverrides.storyName = 'heading-overrides'; +StoryHeadingVariations.storyName = 'Variations'; -export const StoryHeadingLogicalProps = () => { +export const StoryHeadingLogicalPropstest = () => { const logicalPropsOverrides = { marginBlock: 'space030', - marginInline: 'space050', + marginInline: 'space030', paddingBlock: 'space030', - paddingInline: 'space050', + paddingInline: 'space030', }; - return ( - <> - Heading with logical props -

H1 with logical props

-
-

H2 with logical props

-
-

H3 with logical props

-
-

H4 with logical props

-
-
H5 with logical props
-
-
H6 with logical props
- + return ( + + + +

{BODY}

+ + + + +

{BODY}

+ + + + +

{BODY}

+ + + + +

{BODY}

+ + + + +
{BODY}
+ + + + +
{BODY}
+ + + ); }; -StoryHeadingLogicalProps.storyName = 'heading-logical-props'; +StoryHeadingLogicalPropstest.storyName = 'Logical Props'; + +export const StoryHeadingOverrides = () => ( + + + +
+ {BODY} +
+ + +
+ {BODY} +
+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + + + // <> + // Heading with overrides + // + //

+ // H1 with override + //

+ //
+ //

+ // H2 with override + //

+ //
+ //

+ // H3 with override + //

+ //
+ //

+ // H4 with override + //

+ //
+ //
+ // H5 with override + //
+ //
+ //
+ // H6 with override + //
+ // + // +); +StoryHeadingOverrides.storyName = 'Styling Overrides'; From b1a6c50e95d92764746c3c4cbd5dbe1eacd8bc45 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 7 Mar 2023 01:00:07 +0530 Subject: [PATCH 02/26] docs(PPDSC-2707): headline scenario updates --- src/typography/__tests__/heading.stories.tsx | 32 +++++++++++++++----- 1 file changed, 24 insertions(+), 8 deletions(-) diff --git a/src/typography/__tests__/heading.stories.tsx b/src/typography/__tests__/heading.stories.tsx index 56ed1acef6..a9d4e96b8f 100644 --- a/src/typography/__tests__/heading.stories.tsx +++ b/src/typography/__tests__/heading.stories.tsx @@ -140,14 +140,14 @@ export const StoryHeadingLogicalPropstest = () => { }; StoryHeadingLogicalPropstest.storyName = 'Logical Props'; -export const StoryHeadingOverrides = () => ( +export const StoryHeadingStylingOverrides = () => (
{BODY} @@ -157,7 +157,7 @@ export const StoryHeadingOverrides = () => (
{BODY} @@ -167,7 +167,7 @@ export const StoryHeadingOverrides = () => (

{BODY} @@ -177,7 +177,7 @@ export const StoryHeadingOverrides = () => (

{BODY} @@ -187,7 +187,7 @@ export const StoryHeadingOverrides = () => (

{BODY} @@ -197,7 +197,7 @@ export const StoryHeadingOverrides = () => (

{BODY} @@ -264,4 +264,20 @@ export const StoryHeadingOverrides = () => ( // // ); -StoryHeadingOverrides.storyName = 'Styling Overrides'; +StoryHeadingStylingOverrides.storyName = 'Styling Overrides'; + +export const StoryHeadingOverrides = () => ( + + +

+ {BODY} +

+ + +); +StoryHeadingOverrides.storyName = 'Overrides'; From 5079d913b8ca258994aa3060898866e46decb371 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 7 Mar 2023 13:46:59 +0530 Subject: [PATCH 03/26] docs(PPDSC-2707): headline fix --- src/headline/__tests__/headline.stories.tsx | 277 +++++++++++++++----- 1 file changed, 216 insertions(+), 61 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 9882bb0fe8..669ba826c6 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -1,8 +1,11 @@ import * as React from 'react'; import {Story as StoryType} from '@storybook/react'; import {Headline} from '..'; -import {ThemeProvider, CreateThemeArgs} from '../../theme'; +import {ThemeProvider, CreateThemeArgs, createTheme} from '../../theme'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; +import {H6, H5, H4, H3, H2, H1} from '../..'; +import {getColorCssFromTheme, styled} from '../../utils/style'; +import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; const headlineCustomThemeObject: CreateThemeArgs = { name: 'headline-custom-theme', @@ -30,70 +33,222 @@ const headlineCustomThemeObject: CreateThemeArgs = { }, }; -export const StoryHeadline = () => ( - <> - Headline text with no kicker -
-
- Headline text -
- - Headline as h3 - -
- - Headline overwritten preset - -
- - Heading Headline - -
- - For Padding - -
- - For Margin - - + }, + }, + }, +}); + +const MarginOverridesWrapper = styled.div` + border: 1px dashed; + ${getColorCssFromTheme('borderColor', 'red060')} +`; + +export const StoryHeadingDefault = () => ( + + +

Heading

+ + +); +StoryHeadingDefault.storyName = 'Default'; + +export const StoryHeadingVariations = () => ( + + +

{HeadlineText}

+ + +

{HeadlineText}

+ + +

{HeadlineText}

+ + +

{HeadlineText}

+ + +
{HeadlineText}
+ + +
{HeadlineText}
+ + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + + + {HeadlineText} + + + +); +StoryHeadingVariations.storyName = 'Variations'; + +export const StoryHeadingLogicalPropstest = () => { + const logicalPropsOverrides = { + marginBlock: 'space030', + marginInline: 'space030', + paddingBlock: 'space030', + paddingInline: 'space030', + }; + + return ( + + + +

{BODY}

+ + + + +

{BODY}

+ + + + +

{BODY}

+ + + + +

{BODY}

+ + + + +
{BODY}
+ + + + +
{BODY}
+ + + + ); +}; +StoryHeadingLogicalPropstest.storyName = 'Logical Props'; + +export const StoryHeadingStylingOverrides = () => ( + + + +
+ {BODY} +
+ + +
+ {BODY} +
+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + + +); +StoryHeadingStylingOverrides.storyName = 'Styling Overrides'; + +export const StoryHeadingOverrides = () => ( + + +

+ {BODY} +

+ + ); -StoryHeadline.storyName = 'headline'; +StoryHeadingOverrides.storyName = 'Overrides'; export default { - title: 'Components/headline', + title: 'Components/Headline', component: () => 'None', decorators: [ (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => ( From 2cbf8cf6d1113820fbe27e84d3ec8949e72f39b9 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 7 Mar 2023 13:49:28 +0530 Subject: [PATCH 04/26] docs(PPDSC-2707): heading component reset --- src/typography/__tests__/heading.stories.tsx | 456 +++++++++---------- 1 file changed, 214 insertions(+), 242 deletions(-) diff --git a/src/typography/__tests__/heading.stories.tsx b/src/typography/__tests__/heading.stories.tsx index a9d4e96b8f..5792719b53 100644 --- a/src/typography/__tests__/heading.stories.tsx +++ b/src/typography/__tests__/heading.stories.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; import {createTheme, ThemeProvider} from '../../theme'; +import { + StorybookHeading, + StorybookSubHeading, +} from '../../test/storybook-comps'; import {H6, H5, H4, H3, H2, H1} from '..'; -import {getColorCssFromTheme, styled} from '../../utils/style'; -import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; -import {Headline} from '../../headline'; - -const BODY = 'The quick brown box'; - -const HeadlineText = 'Heading'; +import {TextBlock} from '../../text-block'; +import {Grid, Cell} from '../../grid'; const myCustomTheme = createTheme({ name: 'my-custom-heading-theme', @@ -15,17 +14,14 @@ const myCustomTheme = createTheme({ stylePresets: { headingCustom: { base: { - color: '{{colors.amber070}}', + color: '{{colors.blue060}}', }, }, }, }, }); -const MarginOverridesWrapper = styled.div` - border: 1px dashed; - ${getColorCssFromTheme('borderColor', 'red060')} -`; +const title = 'We tell the stories that matter.'; export default { title: 'Components/typography/heading', @@ -33,251 +29,227 @@ export default { }; export const StoryHeadingDefault = () => ( - - -

Heading

- - -); -StoryHeadingDefault.storyName = 'Default'; - -export const StoryHeadingVariations = () => ( - - -

{HeadlineText}

- - -

{HeadlineText}

- - -

{HeadlineText}

- - -

{HeadlineText}

- - -
{HeadlineText}
- - -
{HeadlineText}
- - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - + <> + Heading - default +
+

Default H1 - {title}

+
+

Default H2 - {title}

+
+

Default H3 - {title}

+
+

Default H4 - {title}

+
+
Default H5 - {title}
+
+
Default H6 - {title}
+ ); -StoryHeadingVariations.storyName = 'Variations'; - -export const StoryHeadingLogicalPropstest = () => { - const logicalPropsOverrides = { - marginBlock: 'space030', - marginInline: 'space030', - paddingBlock: 'space030', - paddingInline: 'space030', - }; +StoryHeadingDefault.storyName = 'heading-default'; - return ( - - - -

{BODY}

- - - - -

{BODY}

- - - - -

{BODY}

- - - - -

{BODY}

- - - - -
{BODY}
- - - - -
{BODY}
- - - - ); -}; -StoryHeadingLogicalPropstest.storyName = 'Logical Props'; - -export const StoryHeadingStylingOverrides = () => ( - - - -
( + <> + + + cropped + - {BODY} -
- - -
+ - {BODY} -
- - -

+ - {BODY} -

- - -

+ - {BODY} -

- - -

+ - {BODY} -

- - -

+ - {BODY} -

- - - - // <> - // Heading with overrides - // - //

- // H1 with override - //

- //
- //

- // H2 with override - //

- //
- //

- // H3 with override - //

- //
- //

- // H4 with override - //

- //
- //
- // H5 with override - //
- //
- //
- // H6 with override - //
- // - // + editorialHeadline060 + + + editorialHeadline070 + + + editorialHeadline080 + + + + not cropped + + editorialHeadline010 + + + editorialHeadline020 + + + editorialHeadline030 + + + editorialHeadline040 + + + editorialHeadline050 + + + editorialHeadline060 + + + editorialHeadline070 + + + editorialHeadline080 + + + + ); -StoryHeadingStylingOverrides.storyName = 'Styling Overrides'; +StoryCropVsNoCrop.storyName = 'crop vs no crop'; export const StoryHeadingOverrides = () => ( - - + <> + Heading with overrides +

- {BODY} + H1 with override

- - +
+

+ H2 with override +

+
+

+ H3 with override +

+
+

+ H4 with override +

+
+
+ H5 with override +
+
+
+ H6 with override +
+ + ); -StoryHeadingOverrides.storyName = 'Overrides'; +StoryHeadingOverrides.storyName = 'heading-overrides'; + +export const StoryHeadingLogicalProps = () => { + const logicalPropsOverrides = { + marginBlock: 'space030', + marginInline: 'space050', + paddingBlock: 'space030', + paddingInline: 'space050', + }; + return ( + <> + Heading with logical props + +

H1 with logical props

+
+

H2 with logical props

+
+

H3 with logical props

+
+

H4 with logical props

+
+
H5 with logical props
+
+
H6 with logical props
+ + ); +}; +StoryHeadingLogicalProps.storyName = 'heading-logical-props'; From f8e37d72c80d003967de6d2318849a9bd7a0f70c Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 7 Mar 2023 15:40:46 +0530 Subject: [PATCH 05/26] docs(PPDSC-2707): added typography for the kicker headline --- src/headline/__tests__/headline.stories.tsx | 70 ++++++++++++++++----- 1 file changed, 55 insertions(+), 15 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 669ba826c6..e2a892b3be 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -85,32 +85,72 @@ export const StoryHeadingVariations = () => (
{HeadlineText}
- + {HeadlineText} - + {HeadlineText} - + {HeadlineText} - + {HeadlineText} - + {HeadlineText} - + {HeadlineText} @@ -118,7 +158,7 @@ export const StoryHeadingVariations = () => ( ); StoryHeadingVariations.storyName = 'Variations'; -export const StoryHeadingLogicalPropstest = () => { +export const StoryHeadingLogicalProps = () => { const logicalPropsOverrides = { marginBlock: 'space030', marginInline: 'space030', @@ -161,7 +201,7 @@ export const StoryHeadingLogicalPropstest = () => { ); }; -StoryHeadingLogicalPropstest.storyName = 'Logical Props'; +StoryHeadingLogicalProps.storyName = 'Logical Props'; export const StoryHeadingStylingOverrides = () => ( @@ -170,7 +210,7 @@ export const StoryHeadingStylingOverrides = () => (
{BODY} @@ -180,7 +220,7 @@ export const StoryHeadingStylingOverrides = () => (
{BODY} @@ -190,7 +230,7 @@ export const StoryHeadingStylingOverrides = () => (

{BODY} @@ -200,7 +240,7 @@ export const StoryHeadingStylingOverrides = () => (

{BODY} @@ -210,7 +250,7 @@ export const StoryHeadingStylingOverrides = () => (

{BODY} @@ -220,7 +260,7 @@ export const StoryHeadingStylingOverrides = () => (

{BODY} @@ -237,7 +277,7 @@ export const StoryHeadingOverrides = () => (

{BODY} From 8a594d96137b9ffdda7be8c2a00fbbc1e42552e4 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Wed, 8 Mar 2023 14:40:53 +0530 Subject: [PATCH 06/26] docs(PPDSC-2707): styling overrides fix --- src/headline/__tests__/headline.stories.tsx | 186 +++++++++++++------- 1 file changed, 123 insertions(+), 63 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index e2a892b3be..f74c63fef8 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -33,7 +33,7 @@ const headlineCustomThemeObject: CreateThemeArgs = { }, }; -const BODY = 'The quick brown box'; +const BODY = 'The quick brown fox'; const HeadlineText = 'Heading'; @@ -52,6 +52,10 @@ const myCustomTheme = createTheme({ const MarginOverridesWrapper = styled.div` border: 1px dashed; + marginblock: 'space030'; + margininline: 'space030'; + paddingblock: 'space030'; + paddinginline: 'space030'; ${getColorCssFromTheme('borderColor', 'red060')} `; @@ -158,113 +162,169 @@ export const StoryHeadingVariations = () => ( ); StoryHeadingVariations.storyName = 'Variations'; -export const StoryHeadingLogicalProps = () => { - const logicalPropsOverrides = { - marginBlock: 'space030', - marginInline: 'space030', - paddingBlock: 'space030', - paddingInline: 'space030', - }; - - return ( - - - -

{BODY}

- - - - -

{BODY}

- - - - -

{BODY}

- - - - -

{BODY}

- - - - -
{BODY}
- - - - -
{BODY}
- - - - ); -}; -StoryHeadingLogicalProps.storyName = 'Logical Props'; - -export const StoryHeadingStylingOverrides = () => ( - - - +export const StoryHeadingLogicalProps = () => ( + + + +

+ {BODY} +

+ + + + +

+ {BODY} +

+ + + + +

+ {BODY} +

+ + + + +

+ {BODY} +

+ + + + +

+ {BODY} +

+ + + + +
+ {BODY} +
+ + + +
{BODY}
- + + + +); +StoryHeadingLogicalProps.storyName = 'Logical Props'; + +export const StoryHeadingStylingOverrides = () => ( + + -
{BODY} -
+

-

{BODY} -

+

-

{BODY} -

+ -

{BODY} -

+ -

{BODY} -

+ From e2baa8e94f9e219b2e0ae37279d3d14a4760d600 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 10 Mar 2023 17:15:31 +0530 Subject: [PATCH 07/26] docs(PPDSC-2707): design feedbacks fix --- src/headline/__tests__/headline.stories.tsx | 43 ++++++++++----------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index f74c63fef8..fb9ae03f2e 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -61,7 +61,7 @@ const MarginOverridesWrapper = styled.div` export const StoryHeadingDefault = () => ( - +

Heading

 @@ -88,7 +88,7 @@ export const StoryHeadingVariations = () => (
{HeadlineText}
 - + ( {HeadlineText} - + ( {HeadlineText} - + ( {HeadlineText} - + ( {HeadlineText} - + ( {HeadlineText} - + ( - +

(

- +

(

- +

(

- +

(

- +

(

- +
(
- +
( ); -StoryHeadingLogicalProps.storyName = 'Logical Props'; +StoryHeadingLogicalProps.storyName = 'Logical props'; export const StoryHeadingStylingOverrides = () => ( - +

( {BODY}

- +

( {BODY}

- +

( {BODY}

- +
( {BODY}
- +
( ); -StoryHeadingStylingOverrides.storyName = 'Styling Overrides'; +StoryHeadingStylingOverrides.storyName = 'Styling overrides'; export const StoryHeadingOverrides = () => (

From f619396911530911c8697ad4f49c7b237c623f94 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 14 Mar 2023 00:22:34 +0530 Subject: [PATCH 08/26] docs(PPDSC-2707): design feedback changes --- src/headline/__tests__/headline.stories.tsx | 126 +++++++++----------- 1 file changed, 58 insertions(+), 68 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index fb9ae03f2e..afa0f6f476 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {Story as StoryType} from '@storybook/react'; import {Headline} from '..'; -import {ThemeProvider, CreateThemeArgs, createTheme} from '../../theme'; +import {ThemeProvider, CreateThemeArgs} from '../../theme'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; import {H6, H5, H4, H3, H2, H1} from '../..'; import {getColorCssFromTheme, styled} from '../../utils/style'; @@ -22,6 +22,7 @@ const headlineCustomThemeObject: CreateThemeArgs = { borderRadius: '{{borders.borderRadiusSharp}}', }, }, + headingCustom: {base: {color: '{{colors.inkBrand010}}'}}, linkInline: { base: { color: '{{colors.interactivePrimary030}}', @@ -37,19 +38,6 @@ const BODY = 'The quick brown fox'; const HeadlineText = 'Heading'; -const myCustomTheme = createTheme({ - name: 'my-custom-heading-theme', - overrides: { - stylePresets: { - headingCustom: { - base: { - color: '{{colors.amber070}}', - }, - }, - }, - }, -}); - const MarginOverridesWrapper = styled.div` border: 1px dashed; marginblock: 'space030'; @@ -86,7 +74,7 @@ export const StoryHeadingVariations = () => (
{HeadlineText}
-
{HeadlineText}
+ {HeadlineText} ( - - -

- {BODY} -

- - -

- {BODY} -

- - -

- {BODY} -

- - -
- {BODY} -
- - -
- {BODY} -
- - + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +
+ {BODY} +
+ + +
+ {BODY} +
+ ); StoryHeadingStylingOverrides.storyName = 'Styling overrides'; @@ -350,11 +336,15 @@ export default { title: 'Components/Headline', component: () => 'None', decorators: [ - (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => ( + ( + Story: StoryType, + context: {name: string; globals: {backgrounds: {value: string}}}, + ) => ( From b213bd3454bc0da631dc57d1a16f73d6c3e92ede Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 14 Mar 2023 12:49:42 +0530 Subject: [PATCH 09/26] docs(PPDSC-2707): design feedback changes --- src/headline/__tests__/headline.stories.tsx | 310 ++++++++++++-------- 1 file changed, 186 insertions(+), 124 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index afa0f6f476..8b7c3c11e6 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import {Story as StoryType} from '@storybook/react'; +import {GridLayout} from '../../grid-layout'; import {Headline} from '..'; +import {TextBlock} from '../../text-block'; import {ThemeProvider, CreateThemeArgs} from '../../theme'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; import {H6, H5, H4, H3, H2, H1} from '../..'; @@ -152,166 +154,226 @@ StoryHeadingVariations.storyName = 'Variations'; export const StoryHeadingLogicalProps = () => ( - - -

- {BODY} -

- + + + + editorialHeadline070 + + +

+ {BODY} +

+ + - - -

- {BODY} -

- + + + + editorialHeadline060 + + +

+ {BODY} +

+ + + + + + + editorialHeadline050 + + +

+ {BODY} +

+ + + + + + + editorialHeadline040 + + +

+ {BODY} +

+ + + + + + + editorialHeadline030 + + +

+ {BODY} +

+ + + + + + + editorialHeadline020 + + +
+ {BODY} +
+ + + + + + + editorialHeadline010 + + +
+ {BODY} +
+ + - - + +); +StoryHeadingLogicalProps.storyName = 'Logical props'; + +export const StoryHeadingStylingOverrides = () => ( + + + + + utilityHeading050 +

{BODY}

- + - - + + + + utilityHeading040 +

{BODY}

- + - - + + + + utilityHeading030 +

{BODY}

- + - - + + + + utilityHeading040 +
{BODY}
- + - - + + + + utilityHeading040 +
{BODY}
- - - -); -StoryHeadingLogicalProps.storyName = 'Logical props'; - -export const StoryHeadingStylingOverrides = () => ( - - -

- {BODY} -

- - -

- {BODY} -

- - -

- {BODY} -

- - -
- {BODY} -
- - -
- {BODY} -
+ ); From 86155a28697eeeb1ff7120c400dfeefc66ca724c Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 14 Mar 2023 20:57:45 +0530 Subject: [PATCH 10/26] docs(PPDSC-2707): design feedback --- src/headline/__tests__/headline.stories.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 8b7c3c11e6..3fe36727f9 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -348,7 +348,7 @@ export const StoryHeadingStylingOverrides = () => ( - utilityHeading040 + utilityHeading020
( - utilityHeading040 + utilityHeading010
'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, From e4a1348cb20980cab387a4f3121820bb37d8020b Mon Sep 17 00:00:00 2001 From: Ravindren Date: Wed, 15 Mar 2023 13:45:59 +0530 Subject: [PATCH 11/26] docs(PPDSC-2707): deisgn feedback --- src/headline/__tests__/headline.stories.tsx | 310 ++++++++------------ 1 file changed, 124 insertions(+), 186 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 3fe36727f9..9b584cdca5 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; import {Story as StoryType} from '@storybook/react'; -import {GridLayout} from '../../grid-layout'; import {Headline} from '..'; -import {TextBlock} from '../../text-block'; import {ThemeProvider, CreateThemeArgs} from '../../theme'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; import {H6, H5, H4, H3, H2, H1} from '../..'; @@ -154,226 +152,166 @@ StoryHeadingVariations.storyName = 'Variations'; export const StoryHeadingLogicalProps = () => ( - - - - editorialHeadline070 - - -

- {BODY} -

- - - - - - - editorialHeadline060 - - -

- {BODY} -

- - - - - - - editorialHeadline050 - - -

- {BODY} -

- - - - - - - editorialHeadline040 - - -

- {BODY} -

- - - - - - - editorialHeadline030 - - -

- {BODY} -

- - - - - - - editorialHeadline020 - - -
- {BODY} -
- - + + +

+ {BODY} +

+ - - - - editorialHeadline010 - - -
- {BODY} -
- - + + +

+ {BODY} +

+ - -); -StoryHeadingLogicalProps.storyName = 'Logical props'; - -export const StoryHeadingStylingOverrides = () => ( - - - - - utilityHeading050 - + +

{BODY}

- + - - - - utilityHeading040 - + +

{BODY}

- + - - - - utilityHeading030 - + +

{BODY}

- + - - - - utilityHeading020 - + +
{BODY}
- + - - - - utilityHeading010 - + +
{BODY}
- + + + +); +StoryHeadingLogicalProps.storyName = 'Logical props'; + +export const StoryHeadingStylingOverrides = () => ( + + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +

+ {BODY} +

+ + +
+ {BODY} +
+ + +
+ {BODY} +
); From e4f0a6d5c3aa723e609193baa4f09536f8d0a878 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Wed, 15 Mar 2023 16:50:01 +0530 Subject: [PATCH 12/26] docs(PPDSC-2707): deisgn feedback From 11857c1b21f44a7a6750f40087016fe48edbeb69 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 00:09:41 +0530 Subject: [PATCH 13/26] docs(PPDSC-2707): storybook ID fix --- site/pages/components/headline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/headline.tsx b/site/pages/components/headline.tsx index 6b22639a33..bac79ddbdb 100644 --- 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-heading', }} interactiveDemo={{ introduction: From 077af42570637edce9b7e6db298aea2db3d5bdf0 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 01:13:36 +0530 Subject: [PATCH 14/26] docs(PPDSC-2707): storybookid fix --- site/pages/components/headline.tsx | 2 +- src/headline/__tests__/headline.stories.tsx | 32 ++++++++++----------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/site/pages/components/headline.tsx b/site/pages/components/headline.tsx index bac79ddbdb..6b22639a33 100644 --- 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-heading', + storybookId: 'components-headline--story-headline', }} interactiveDemo={{ introduction: diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 9b584cdca5..a3c9aa6295 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -22,7 +22,7 @@ const headlineCustomThemeObject: CreateThemeArgs = { borderRadius: '{{borders.borderRadiusSharp}}', }, }, - headingCustom: {base: {color: '{{colors.inkBrand010}}'}}, + headlineCustom: {base: {color: '{{colors.inkBrand010}}'}}, linkInline: { base: { color: '{{colors.interactivePrimary030}}', @@ -47,16 +47,16 @@ const MarginOverridesWrapper = styled.div` ${getColorCssFromTheme('borderColor', 'red060')} `; -export const StoryHeadingDefault = () => ( +export const StoryHeadlineDefault = () => (

Heading

 ); -StoryHeadingDefault.storyName = 'Default'; +StoryHeadlineDefault.storyName = 'Default'; -export const StoryHeadingVariations = () => ( +export const StoryHeadlineVariations = () => (

{HeadlineText}

@@ -148,9 +148,9 @@ export const StoryHeadingVariations = () => ( ); -StoryHeadingVariations.storyName = 'Variations'; +StoryHeadlineVariations.storyName = 'Variations'; -export const StoryHeadingLogicalProps = () => ( +export const StoryHeadlineLogicalProps = () => ( @@ -259,14 +259,14 @@ export const StoryHeadingLogicalProps = () => ( ); -StoryHeadingLogicalProps.storyName = 'Logical props'; +StoryHeadlineLogicalProps.storyName = 'Logical props'; -export const StoryHeadingStylingOverrides = () => ( +export const StoryHeadlineStylingOverrides = () => (

@@ -276,7 +276,7 @@ export const StoryHeadingStylingOverrides = () => (

@@ -286,7 +286,7 @@ export const StoryHeadingStylingOverrides = () => (

@@ -296,7 +296,7 @@ export const StoryHeadingStylingOverrides = () => (
@@ -306,7 +306,7 @@ export const StoryHeadingStylingOverrides = () => (
@@ -315,9 +315,9 @@ export const StoryHeadingStylingOverrides = () => ( ); -StoryHeadingStylingOverrides.storyName = 'Styling overrides'; +StoryHeadlineStylingOverrides.storyName = 'Styling overrides'; -export const StoryHeadingOverrides = () => ( +export const StoryHeadlineOverrides = () => (

( ); -StoryHeadingOverrides.storyName = 'Overrides'; +StoryHeadlineOverrides.storyName = 'Overrides'; export default { title: 'Components/Headline', From c54822e134f2a15b6baa974f44020442cc9847b9 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 01:45:15 +0530 Subject: [PATCH 15/26] docs(PPDSC-2707): storybookid fix --- site/pages/components/headline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/headline.tsx b/site/pages/components/headline.tsx index 6b22639a33..c8699c8287 100644 --- 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: From e70389223f1a5480f7bd390d9248973b9883d423 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 02:25:41 +0530 Subject: [PATCH 16/26] docs(PPDSC-2707): storybookid fix --- src/headline/__tests__/headline.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index a3c9aa6295..2f1dba6d20 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -3,8 +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 {H6, H5, H4, H3, H2, H1} from '../..'; import {getColorCssFromTheme, styled} from '../../utils/style'; +import {H6, H5, H4, H3, H2, H1} from '../..'; import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; const headlineCustomThemeObject: CreateThemeArgs = { From 8a1e96bc4da14fafb0419744c071c66b7d1ef762 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 02:43:11 +0530 Subject: [PATCH 17/26] docs(PPDSC-2707): storybookid fix --- site/pages/components/headline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/headline.tsx b/site/pages/components/headline.tsx index c8699c8287..6b22639a33 100644 --- 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-default', + storybookId: 'components-headline--story-headline', }} interactiveDemo={{ introduction: From 73f843e4c8915f2778751e856edcb381c005e725 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 03:19:59 +0530 Subject: [PATCH 18/26] docs(PPDSC-2707): storybookid fix --- site/pages/components/headline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/pages/components/headline.tsx b/site/pages/components/headline.tsx index 6b22639a33..c8699c8287 100644 --- 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: From 17c17a687de10eb71756826860919f2095a56e0a Mon Sep 17 00:00:00 2001 From: Ravindren Date: Fri, 17 Mar 2023 03:56:21 +0530 Subject: [PATCH 19/26] docs(PPDSC-2707): storybookid fix --- src/headline/__tests__/headline.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 2f1dba6d20..a3c9aa6295 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -3,8 +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 {H6, H5, H4, H3, H2, H1} from '../..'; +import {getColorCssFromTheme, styled} from '../../utils/style'; import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; const headlineCustomThemeObject: CreateThemeArgs = { From ec2f0bfff1e7100780065352dde478f1cab900f4 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Mon, 20 Mar 2023 19:31:24 +0530 Subject: [PATCH 20/26] docs(PPDSC-2707): removed H tag variations --- src/headline/__tests__/headline.stories.tsx | 171 +++++--------------- 1 file changed, 42 insertions(+), 129 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index a3c9aa6295..e9c031484f 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -3,7 +3,6 @@ import {Story as StoryType} from '@storybook/react'; import {Headline} from '..'; import {ThemeProvider, CreateThemeArgs} from '../../theme'; import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object'; -import {H6, H5, H4, H3, H2, H1} from '../..'; import {getColorCssFromTheme, styled} from '../../utils/style'; import {StorybookCase, StorybookPage} from '../../test/storybook-comps'; @@ -36,8 +35,6 @@ const headlineCustomThemeObject: CreateThemeArgs = { const BODY = 'The quick brown fox'; -const HeadlineText = 'Heading'; - const MarginOverridesWrapper = styled.div` border: 1px dashed; marginblock: 'space030'; @@ -50,111 +47,17 @@ const MarginOverridesWrapper = styled.div` export const StoryHeadlineDefault = () => ( -

Heading

+ Heading ); StoryHeadlineDefault.storyName = 'Default'; -export const StoryHeadlineVariations = () => ( - - -

{HeadlineText}

- - -

{HeadlineText}

- - -

{HeadlineText}

- - -

{HeadlineText}

- - -
{HeadlineText}
- - - {HeadlineText} - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - - - {HeadlineText} - - - -); -StoryHeadlineVariations.storyName = 'Variations'; - export const StoryHeadlineLogicalProps = () => ( -

( }} > {BODY} -

+ -

( }} > {BODY} -

+ -

( }} > {BODY} -

+ -

( }} > {BODY} -

+ -

( }} > {BODY} -

+ -
( }} > {BODY} -
+ -
( }} > {BODY} -
+ @@ -264,54 +167,64 @@ StoryHeadlineLogicalProps.storyName = 'Logical props'; export const StoryHeadlineStylingOverrides = () => ( -

{BODY} -

+ -

{BODY} -

+ -

{BODY} -

+ -
{BODY} -
+ -
{BODY} -
+ ); @@ -320,13 +233,13 @@ StoryHeadlineStylingOverrides.storyName = 'Styling overrides'; export const StoryHeadlineOverrides = () => ( -

{BODY} -

+ ); From e7885eeb7d0994978a3bec1819537c5ecbda1521 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Mon, 20 Mar 2023 20:10:34 +0530 Subject: [PATCH 21/26] docs(PPDSC-2707): added headingAs --- src/headline/__tests__/headline.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index e9c031484f..f103a93696 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -47,7 +47,7 @@ const MarginOverridesWrapper = styled.div` export const StoryHeadlineDefault = () => ( - Heading + Heading ); @@ -234,6 +234,7 @@ export const StoryHeadlineOverrides = () => ( Date: Tue, 21 Mar 2023 14:55:40 +0530 Subject: [PATCH 22/26] docs(PPDSC-2707): added kicker props in headline component --- src/headline/__tests__/headline.stories.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index f103a93696..76f79f76e6 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -35,6 +35,8 @@ const headlineCustomThemeObject: CreateThemeArgs = { const BODY = 'The quick brown fox'; +const HeadlineText = 'Headline'; + const MarginOverridesWrapper = styled.div` border: 1px dashed; marginblock: 'space030'; @@ -53,6 +55,24 @@ export const StoryHeadlineDefault = () => ( ); StoryHeadlineDefault.storyName = 'Default'; +export const StoryHeadlineKicker = () => ( + + + + {HeadlineText} + + + +); +StoryHeadlineKicker.storyName = 'Kicker'; + export const StoryHeadlineLogicalProps = () => ( From d3b1e8b1ea74f07ed8df373094c7f92efcefc9aa Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 21 Mar 2023 15:25:39 +0530 Subject: [PATCH 23/26] docs(PPDSC-2707): added kicker props in headline component --- src/headline/__tests__/headline.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 76f79f76e6..2defd708a3 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -35,7 +35,7 @@ const headlineCustomThemeObject: CreateThemeArgs = { const BODY = 'The quick brown fox'; -const HeadlineText = 'Headline'; +const HeadlineText = 'Heading'; const MarginOverridesWrapper = styled.div` border: 1px dashed; From e487023a0ef409378b270b161d9d87c68bcc6964 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 21 Mar 2023 18:35:42 +0530 Subject: [PATCH 24/26] docs(PPDSC-2707): removed unwanted styles --- src/headline/__tests__/headline.stories.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 2defd708a3..9ba882cfed 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -39,10 +39,6 @@ const HeadlineText = 'Heading'; const MarginOverridesWrapper = styled.div` border: 1px dashed; - marginblock: 'space030'; - margininline: 'space030'; - paddingblock: 'space030'; - paddinginline: 'space030'; ${getColorCssFromTheme('borderColor', 'red060')} `; From aae19e4b3613242b12dc0fd4034983f4f6e2c42b Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 21 Mar 2023 18:52:15 +0530 Subject: [PATCH 25/26] docs(PPDSC-2707): removed unwanted styles --- src/headline/__tests__/headline.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 9ba882cfed..196f2744a0 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -35,7 +35,7 @@ const headlineCustomThemeObject: CreateThemeArgs = { const BODY = 'The quick brown fox'; -const HeadlineText = 'Heading'; +const HeadlineText = 'Heading '; const MarginOverridesWrapper = styled.div` border: 1px dashed; From 065f2b0584e751570e1fd4d04b14a70c6c557ce1 Mon Sep 17 00:00:00 2001 From: Ravindren Date: Tue, 21 Mar 2023 18:53:40 +0530 Subject: [PATCH 26/26] docs(PPDSC-2707): removed unwanted styles --- src/headline/__tests__/headline.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/headline/__tests__/headline.stories.tsx b/src/headline/__tests__/headline.stories.tsx index 196f2744a0..9ba882cfed 100644 --- a/src/headline/__tests__/headline.stories.tsx +++ b/src/headline/__tests__/headline.stories.tsx @@ -35,7 +35,7 @@ const headlineCustomThemeObject: CreateThemeArgs = { const BODY = 'The quick brown fox'; -const HeadlineText = 'Heading '; +const HeadlineText = 'Heading'; const MarginOverridesWrapper = styled.div` border: 1px dashed;