-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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 <[email protected]>
- Loading branch information
Showing
1 changed file
with
95 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ), | ||
| ], | ||
| }; |