Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs/ppdsc 2707 update headline component storybook scenarios #692

Merged
merged 32 commits into from
Mar 21, 2023
Merged

Docs/ppdsc 2707 update headline component storybook scenarios #692

Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
3cf7bdf
docs(PPDSC-2707): headline scenario updates
Mar 6, 2023
b1a6c50
docs(PPDSC-2707): headline scenario updates
Mar 6, 2023
5079d91
docs(PPDSC-2707): headline fix
Mar 7, 2023
2cbf8cf
docs(PPDSC-2707): heading component reset
Mar 7, 2023
f8e37d7
docs(PPDSC-2707): added typography for the kicker headline
Mar 7, 2023
8a594d9
docs(PPDSC-2707): styling overrides fix
Mar 8, 2023
e2baa8e
docs(PPDSC-2707): design feedbacks fix
Mar 10, 2023
f619396
docs(PPDSC-2707): design feedback changes
Mar 13, 2023
b213bd3
docs(PPDSC-2707): design feedback changes
Mar 14, 2023
6d54884
docs(PPDSC-2707): design feedback changes
Mar 14, 2023
86155a2
docs(PPDSC-2707): design feedback
Mar 14, 2023
792188c
docs(PPDSC-2707): design feedback
Mar 14, 2023
e4a1348
docs(PPDSC-2707): deisgn feedback
Mar 15, 2023
e4f0a6d
docs(PPDSC-2707): deisgn feedback
Mar 15, 2023
f41295a
docs(PPDSC-2707): deisgn feedback
Mar 16, 2023
11857c1
docs(PPDSC-2707): storybook ID fix
Mar 16, 2023
004bcea
docs(PPDSC-2707): storybook ID fix
Mar 16, 2023
077af42
docs(PPDSC-2707): storybookid fix
Mar 16, 2023
c54822e
docs(PPDSC-2707): storybookid fix
Mar 16, 2023
e703892
docs(PPDSC-2707): storybookid fix
Mar 16, 2023
8a1e96b
docs(PPDSC-2707): storybookid fix
Mar 16, 2023
73f843e
docs(PPDSC-2707): storybookid fix
Mar 16, 2023
17c17a6
docs(PPDSC-2707): storybookid fix
Mar 16, 2023
ec2f0bf
docs(PPDSC-2707): removed H tag variations
Mar 20, 2023
e7885ee
docs(PPDSC-2707): added headingAs
Mar 20, 2023
7f7c74d
docs(PPDSC-2707): added headingAs
Mar 20, 2023
b36ed47
docs(PPDSC-2707): added kicker props in headline component
Mar 21, 2023
d3b1e8b
docs(PPDSC-2707): added kicker props in headline component
Mar 21, 2023
e487023
docs(PPDSC-2707): removed unwanted styles
Mar 21, 2023
aae19e4
docs(PPDSC-2707): removed unwanted styles
Mar 21, 2023
065f2b0
docs(PPDSC-2707): removed unwanted styles
Mar 21, 2023
23d1222
docs(PPDSC-2707): removed unwanted styles
Mar 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion site/pages/components/headline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
304 changes: 243 additions & 61 deletions src/headline/__tests__/headline.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -19,6 +21,7 @@ const headlineCustomThemeObject: CreateThemeArgs = {
borderRadius: '{{borders.borderRadiusSharp}}',
},
},
headlineCustom: {base: {color: '{{colors.inkBrand010}}'}},
linkInline: {
base: {
color: '{{colors.interactivePrimary030}}',
Expand All @@ -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 />
Expand Down