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(723): Title Bar Storybook Enhancement #889

Merged
merged 17 commits into from
May 18, 2023
Merged

docs(723): Title Bar Storybook Enhancement #889

Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
1d65eda
docs(725): title bar story enhancement
May 11, 2023
3a24fe9
docs(725): removed unused component
May 11, 2023
ac16b83
docs(725): star icon stright line alignment
May 12, 2023
f3e056e
docs(725): src/title-bar/__tests__/title-bar.stories.tsx
May 12, 2023
40a76b1
docs(725): logical props typo fix
May 15, 2023
9c8a9ad
docs(725): logical props typo fix
May 15, 2023
306c293
docs(723): removed typograpghy
May 15, 2023
b58af28
docs(725): added description
May 16, 2023
0f793e7
docs(725): removed typograpghyPreset
May 16, 2023
67b7cda
docs(725): function name change
May 16, 2023
961df93
docs(725): refinement
May 16, 2023
b3604c7
docs(725): title change
May 16, 2023
613b06e
docs(725): removed space
May 17, 2023
23d8b42
docs(725): removed extra space
May 17, 2023
2eef635
docs(822): content change for props row
May 18, 2023
2fef77f
docs(725): removed fragment
May 18, 2023
45d4d49
docs(822): grouping the props into const
May 18, 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
337 changes: 205 additions & 132 deletions src/title-bar/__tests__/title-bar.stories.tsx
View file
Open in desktop
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';