Skip to content

Commit

Permalink
docs(723): Title Bar Storybook Enhancement (#889)
Browse files Browse the repository at this point in the history 
* docs(725): title bar story enhancement

* docs(725): removed unused component

* docs(725): star icon stright line alignment

* docs(725): src/title-bar/__tests__/title-bar.stories.tsx

* docs(725): logical props typo fix

* docs(725): added description

* docs(725): removed typograpghyPreset

* docs(725): function name change

* docs(725): refinement

* docs(725): title change

* docs(725): removed space

* docs(725): removed extra space

* docs(725): removed fragment

---------

Co-authored-by: Ravindren <[email protected]>
  • Loading branch information
@jannuk59
jannuk59 and Ravindren authored May 18, 2023
1 parent 339a672 commit 2cb8a37
Showing 1 changed file with 205 additions and 132 deletions.
337 changes: 205 additions & 132 deletions src/title-bar/__tests__/title-bar.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,166 +1,239 @@
import * as React from 'react';
import {createTheme, ThemeProvider} from '../../theme';
import {ThemeProvider} from '../../theme';
import {TitleBar} from '..';
import {Button} from '../../button';
import {LinkStandalone} from '../../link';
import {Divider} from '../../divider';
import {Stack} from '../../stack';

import {IconFilledFigma} from '../../icons/filled/custom/icon-filled-figma';
import {styled} from '../../utils/style';
import {
StorybookHeading,
StorybookSubHeading,
} from '../../test/storybook-comps';

const myCustomTheme = createTheme({
name: 'my-custom-title-bar-theme',
overrides: {
stylePresets: {
titleBarCustom: {
base: {
color: '{{colors.blue060}}',
},
},
linkInline: {
base: {
color: '{{colors.interactivePrimary030}}',
iconColor: '{{colors.interactivePrimary030}}',
textDecoration: 'underline',
},
},
},
},
});
import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
import {IconFilledStarOutline} from '../../icons';
import {getColorCssFromTheme, styled} from '../../utils/style';
import {Story as StoryType} from '@storybook/react';
import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
import {TextBlock} from '../../text-block';

const link = () => <LinkStandalone href="/">Link</LinkStandalone>;
const button = () => <Button>Default button</Button>;
const HeadlineContainer = styled.span`
min-width: fit-content;
const IconContainer = styled.div`
display: flex;
align-items: center;
`;

const STRING = 'Title content';

export default {
title: 'Components/title-bar',
title: 'Components/Title-bar',
component: () => 'None',
disabledRules: ['heading-order'],
parameters: {
nkDocs: {
title: 'Title bar',
url: 'https://www.newskit.co.uk/components/title-bar/#anatomy',
description:
'The title bar provides context and actions related to a particular section of content that follows below on the screen.',
},
},
decorators: [
(
Story: StoryType,
context: {name: string; globals: {backgrounds: {value: string}}},
) => (
<ThemeProvider
theme={createCustomThemeWithBaseThemeSwitch(
context?.globals?.backgrounds?.value,
{},
context?.name,
)}
>
<Story />
</ThemeProvider>
),
],
};

export const StoryTitleBar = () => (
<>
<TitleBar>Title bar default state</TitleBar>
<br />
<br />
<ThemeProvider theme={myCustomTheme}>
export const StoryTitleBar = () => <TitleBar>{STRING}</TitleBar>;
StoryTitleBar.storyName = 'Default';

export const StoryTitleBarLink = () => (
<StorybookPage columns=".5fr">
<StorybookCase title="Link">
<TitleBar actionItem={link}>{STRING}</TitleBar>
</StorybookCase>
<StorybookCase title="Button">
<TitleBar actionItem={button}>{STRING}</TitleBar>
</StorybookCase>
<StorybookCase title="Icon">
<TitleBar>
<IconContainer>
{STRING}
<IconFilledStarOutline
overrides={{size: 'iconSize020', marginInlineStart: 'space030'}}
/>
</IconContainer>
</TitleBar>
</StorybookCase>
<StorybookCase title="Action hidden in SM and MD">
<TitleBar hideActionItemOn={{sm: true, md: true}} actionItem={button}>
{STRING}
</TitleBar>
</StorybookCase>
</StorybookPage>
);
StoryTitleBarLink.storyName = 'Variations';

export const StoryTitleBarAsH1toh6 = () => (
<StorybookPage columns="1fr 1fr">
<StorybookCase title="H1">
<TitleBar
headingAs="h1"
overrides={{
heading: {
typographyPreset: 'editorialHeadline080',
},
}}
>
Title content
</TitleBar>
</StorybookCase>
<StorybookCase title="H2">
<TitleBar
headingAs="h2"
overrides={{
heading: {
typographyPreset: 'editorialHeadline070',
},
}}
>
Title content
</TitleBar>
</StorybookCase>
<StorybookCase title="H3">
<TitleBar
headingAs="h3"
overrides={{
heading: {
typographyPreset: {
xs: 'editorialHeadline010',
sm: 'editorialHeadline020',
md: 'editorialHeadline030',
lg: 'editorialHeadline040',
},
stylePreset: 'linkInline',
typographyPreset: 'editorialHeadline060',
},
}}
>
Title bar with overwritten heading typographyPreset
Title content
</TitleBar>
<br />
<br />
</StorybookCase>
<StorybookCase title="H4">
<TitleBar
headingAs="h4"
overrides={{
heading: {
typographyPreset: 'editorialHeadline050',
},
}}
>
Title content
</TitleBar>
</StorybookCase>
<StorybookCase title="H5">
<TitleBar
headingAs="h5"
overrides={{
heading: {
typographyPreset: 'editorialHeadline040',
},
}}
>
Title content
</TitleBar>
</StorybookCase>
<StorybookCase title="H6">
<TitleBar
headingAs="h6"
overrides={{
heading: {
stylePreset: 'titleBarCustom',
typographyPreset: 'editorialHeadline030',
},
}}
>
H6 with overwritten style preset
Title content
</TitleBar>
</ThemeProvider>
<br />
<br />
<TitleBar actionItem={link}>Title bar with link</TitleBar>
<br />
<br />
<TitleBar actionItem={button}>Title bar with button</TitleBar>
<br />
<TitleBar>
Title bar with Icon <IconFilledFigma height="30px" />
</TitleBar>
<br />
<TitleBar hideActionItemOn={{sm: true, md: true}} actionItem={button}>
Title bar with action hidden in sm and md
</TitleBar>
<br />
<TitleBar actionItem={button}>
<Stack flow="horizontal-center">
<HeadlineContainer>Title bar with divider and button</HeadlineContainer>
<Divider />
</Stack>
</TitleBar>
<br />
</>
</StorybookCase>
</StorybookPage>
);
StoryTitleBar.storyName = 'title-bar';
StoryTitleBarAsH1toh6.storyName = 'H1 to H6';

export const StoryTitleBarAsH1toh6 = () => (
<>
<TitleBar headingAs="h1">Title bar as h1</TitleBar>
<TitleBar headingAs="h2">Title bar as h2</TitleBar>
<TitleBar headingAs="h3">Title bar as h3</TitleBar>
<TitleBar headingAs="h4">Title bar as h4</TitleBar>
<TitleBar headingAs="h5">Title bar as h5</TitleBar>
<TitleBar headingAs="h6">Title bar as h6</TitleBar>
</>
);
StoryTitleBarAsH1toh6.storyName = 'title-bar-as-h1toh6';

export const StoryTagLogicalProps = () => (
<>
<StorybookHeading>TitleBar with Logical Props overrides</StorybookHeading>

<StorybookSubHeading>marginInline & marginBlock</StorybookSubHeading>
<TitleBar
headingAs="h6"
overrides={{
marginBlock: 'space060',
marginInline: 'space080',
}}
>
Title bar
</TitleBar>
const MarginOverridesWrapper = styled.div`
border: 1px dashed;
${getColorCssFromTheme('borderColor', 'red060')}
`;

<br />
<StorybookSubHeading>paddingInline & paddingBlock</StorybookSubHeading>
<TitleBar
headingAs="h6"
overrides={{
paddingBlock: 'space060',
paddingInline: 'space080',
}}
>
Title bar
</TitleBar>
export const StoryTitleBarLogicalProps = () => (
<StorybookPage columns="1fr">
<StorybookCase title="marginInline and marginBlock">
<MarginOverridesWrapper>
<TitleBar
headingAs="h6"
overrides={{
marginBlock: 'space010',
marginInline: 'space080',
}}
>
{STRING}
</TitleBar>
</MarginOverridesWrapper>
</StorybookCase>
<StorybookCase title="paddingInline and paddingBlock">
<MarginOverridesWrapper>
<TitleBar
headingAs="h6"
overrides={{
paddingBlock: 'space060',
paddingInline: 'space080',
}}
>
{STRING}
</TitleBar>
</MarginOverridesWrapper>
</StorybookCase>
<StorybookCase title="marginInline and marginBlock and paddingInline and paddingBlock">
<MarginOverridesWrapper>
<TitleBar
headingAs="h6"
overrides={{
marginBlock: 'space060',
marginInline: 'space080',
paddingBlock: 'space060',
paddingInline: 'space080',
}}
>
{STRING}
</TitleBar>
</MarginOverridesWrapper>
</StorybookCase>
</StorybookPage>
);
StoryTitleBarLogicalProps.storyName = 'Logical props';

<br />
<StorybookSubHeading>
marginInline & marginBlock & paddingInline & paddingBlock
</StorybookSubHeading>
<TitleBar
headingAs="h6"
overrides={{
marginBlock: 'space060',
marginInline: 'space080',
paddingBlock: 'space060',
paddingInline: 'space080',
}}
>
Title bar
</TitleBar>
export const StoryTitleBarStylingOverrides = () => (
<TitleBar
overrides={{
heading: {
stylePreset: 'inkBrand010',
},
}}
>
{STRING}
</TitleBar>
);
StoryTitleBarStylingOverrides.storyName = 'Styling overrides';

<br />
</>
export const StoryTitleBarOverrides = () => (
<StorybookPage columns="1fr">
<StorybookCase title="Typography preset override">
<TitleBar
overrides={{
heading: {
typographyPreset: 'utilityHeading050',
},
}}
>
Title Content
</TitleBar>
</StorybookCase>
</StorybookPage>
);
StoryTagLogicalProps.storyName = 'title-bar-logical-props';
StoryTitleBarOverrides.storyName = 'Styling overrides';

0 comments on commit 2cb8a37

Please sign in to comment.