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 2445 updated divider stories #411

Merged
merged 13 commits into from
Oct 18, 2022
Merged

docs/ppdsc 2445 updated divider stories #411

Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9b8af9e
docs(PPDSC-2445): docs/PPDSE-2445 fixed horizontol divider
baburay23 Oct 11, 2022
b3a0f0b
docs(PPDSC-2445): docs/PPDSE-2445 tidied up stories
baburay23 Oct 12, 2022
8b37f80
docs(PPDSC-2445): docs/PPDSE-2445 tidied up comments
baburay23 Oct 12, 2022
f331387
Merge branch 'main' into docs/PPDSC-2445-updated-divider-stories
baburay23 Oct 12, 2022
eb7736a
docs(PPDSC-2445): docs/PPDSE-2445 added docs link
baburay23 Oct 12, 2022
d6b9f40
docs(PPDSC-2445): docs/PPDSE-2445 added docs link
baburay23 Oct 12, 2022
73ffce7
docs(PPDSC-2445): docs/PPDSE-2445 addressed design comments
baburay23 Oct 13, 2022
fdcd939
docs(PPDSC-2445): docs/PPDSE-2445 fixed columns
baburay23 Oct 14, 2022
71aeb51
docs(PPDSC-2445): docs/PPDSE-2445 addressed comments
baburay23 Oct 14, 2022
5dd5a76
Merge branch 'main' into docs/PPDSC-2445-updated-divider-stories
baburay23 Oct 14, 2022
37051cc
Merge branch 'main' into docs/PPDSC-2445-updated-divider-stories
baburay23 Oct 17, 2022
7be212f
Merge branch 'main' into docs/PPDSC-2445-updated-divider-stories
baburay23 Oct 18, 2022
217cfd3
Merge branch 'main' into docs/PPDSC-2445-updated-divider-stories
baburay23 Oct 18, 2022
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
312 changes: 147 additions & 165 deletions src/divider/__tests__/divider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,51 @@ import * as React from 'react';
import styled from '@emotion/styled';
import {ThemeProvider} from '@emotion/react';
import {Divider, DividerProps} from '..';
import {
StorybookHeading,
StorybookSubHeading,
} from '../../test/storybook-comps';
import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
import {Stack} from '../../stack';
import {Block} from '../../block';
import {StackChild} from '../../stack-child';
import {IconFilledFacebook, IconFilledWhatsApp} from '../../icons';
import {getSizingCssFromTheme} from '../../utils/style';
import {getSizingCssFromTheme, getColorCssFromTheme} from '../../utils/style';
import {compileTheme, createTheme} from '../../theme';

const Box = styled.div`
const Box = styled.div<{marginRight?: boolean; transparent?: boolean}>`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what about isMarginRight ? I think would make it easier to understand is a boolean

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thats much better thanks for the tip!

display: inline-block;
box-sizing: border-box;
width: 24px;
height: 24px;
margin: 12px;
padding-left: 11px;
border: 1px solid lime;
`;

const BlockWithBorder = styled(Block)`
display: inline-block;
border: 1px solid salmon;
width: 48px;
${getSizingCssFromTheme('height', 'sizing100')};
${({marginRight}) =>
marginRight ? ' margin-right:10px' : ' margin-right:0px'};
${({transparent}) =>
transparent
? getColorCssFromTheme('backgroundColor', 'transparent')
: getColorCssFromTheme('backgroundColor', 'blue010')};
`;

const BlockForDivider = styled(Block)<Pick<DividerProps, 'vertical'>>`
${({vertical}) =>
vertical
? getSizingCssFromTheme('height', 'iconSize050')
: getSizingCssFromTheme('width', 'iconSize040')};
border: 1px solid salmon;
`;

const IconContainer = styled(Block)`
${getSizingCssFromTheme('width', 'iconSize040')};
${getSizingCssFromTheme('height', 'iconSize040')};
${getSizingCssFromTheme('height', 'sizing080')};
${getColorCssFromTheme('backgroundColor', 'blue010')};
${getColorCssFromTheme('color', 'blue010')};
width: 100%;
`;

const IconContainerInline = styled(Block)`
const ContainerInline = styled(Block)`
display: inline-block;
${getSizingCssFromTheme('height', 'sizing100')};
`;

const StackForHorizontalDivider = styled(Stack)`
width: 50px;
`;

const InlineDividerContainer = styled(Block)`
display: inline-block;
${getSizingCssFromTheme('height', 'iconSize040')};
`;
const dividerCols = {
xs: 'repeat(1, minmax(150px, max-content))',
sm: 'repeat(2, minmax(150px, max-content))',
md: 'auto',
};
const verticalCols = {
xs: 'repeat(1, minmax(150px, max-content))',
sm: 'repeat(2, minmax(150px, max-content))',
md: '1fr 1fr',
};

const myCustomTheme = compileTheme(
createTheme({
Expand All @@ -62,7 +56,7 @@ const myCustomTheme = compileTheme(
customDivider: {
base: {
borderStyle: 'solid',
borderColor: '{{colors.interface060}}',
borderColor: '{{colors.amber060}}',
borderWidth: '{{borders.borderWidth030}}',
},
},
Expand All @@ -71,159 +65,147 @@ const myCustomTheme = compileTheme(
}),
);

export default {
title: 'Components/divider',
component: () => 'None',
};
export const StoryDefault = () => (
<StorybookPage columns={{md: 'auto'}}>
<StorybookCase>
<Divider />
</StorybookCase>
</StorybookPage>
);
StoryDefault.storyName = 'Default';

export const StoryHorizontal = () => (
<>
<StorybookHeading>Divider - Horizontal</StorybookHeading>
<StorybookSubHeading>default</StorybookSubHeading>
<Divider />
<br />
<StorybookSubHeading>in vertical block</StorybookSubHeading>
<BlockForDivider>
<IconContainer spaceStack="space020">
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
</IconContainer>
<Block spaceStack="space020">
<StorybookPage columns={dividerCols}>
<StorybookCase title="Default">
<Divider />
</Block>
<IconContainer>
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</IconContainer>
</BlockForDivider>
<br />
<StorybookSubHeading>in vertical stack without spacing</StorybookSubHeading>
<BlockWithBorder>
<StackForHorizontalDivider
stackDistribution="center"
flow="vertical-center"
>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
</StorybookCase>
<StorybookCase title="In vertical block">
<BlockForDivider />
<Block paddingBlock="space010" />
<Divider />
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</StackForHorizontalDivider>
</BlockWithBorder>
<br />
<StorybookSubHeading>
Divider - Horizontal in vertical stack with spacing
</StorybookSubHeading>
<BlockWithBorder>
<StackForHorizontalDivider
spaceInline="space040"
stackDistribution="center"
flow="vertical-center"
>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<StackChild alignSelf="stretch">
<Block paddingBlock="space010" />
<BlockForDivider />
</StorybookCase>

<StorybookCase title="In vertical stack without spacing">
<Stack stackDistribution="center" flow="vertical-center">
<BlockForDivider />
<Divider />
</StackChild>
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</StackForHorizontalDivider>
</BlockWithBorder>
<BlockForDivider />
</Stack>
</StorybookCase>
<StorybookCase title="In vertical stack with spacing">
<StackForHorizontalDivider
stackDistribution="center"
flow="vertical-center"
spaceInline="space030"
>
<BlockForDivider>Block 1</BlockForDivider>

<StackChild alignSelf="stretch">
<Divider />
</StackChild>
<BlockForDivider>Block 2</BlockForDivider>
</StackForHorizontalDivider>
</StorybookCase>
</StorybookPage>
</>
);
StoryHorizontal.storyName = 'horizontal';
StoryHorizontal.storyName = 'Horizontal';

export const StoryVertical = () => (
<>
<StorybookHeading>Divider - Vertical</StorybookHeading>
<StorybookSubHeading>default</StorybookSubHeading>
<Box>
<Divider vertical />
</Box>
<br />
<StorybookSubHeading>in horizontal Inline Block</StorybookSubHeading>
<Block>
<IconContainerInline spaceInline="space020">
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
</IconContainerInline>
<InlineDividerContainer spaceInline="space020">
<Divider vertical />
</InlineDividerContainer>
<IconContainerInline>
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</IconContainerInline>
</Block>
<br />
<StorybookSubHeading>
in horizontal Stack without spacing
</StorybookSubHeading>
<BlockWithBorder>
<Stack flow="horizontal-center" stackDistribution="center">
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<StackChild alignSelf="stretch">
<StorybookPage columns={verticalCols}>
<StorybookCase title="Default">
<Box transparent>
<Divider vertical />
</Box>
</StorybookCase>
<StorybookCase title="In horizontal block">
<Box marginRight />
<ContainerInline spaceInline="space020">
<Divider vertical />
</StackChild>
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</Stack>
</BlockWithBorder>
<br />
<StorybookSubHeading>in horizontal Stack with spacing</StorybookSubHeading>
<BlockWithBorder>
<Stack
flow="horizontal-center"
stackDistribution="center"
spaceInline="space030"
>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<StackChild alignSelf="stretch">
</ContainerInline>
<Box />
</StorybookCase>
<StorybookCase title="In horizontal Stack without spacing">
<Stack flow="horizontal-center" stackDistribution="flex-start">
<Box />
<Divider vertical />
</StackChild>
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</Stack>
</BlockWithBorder>
<br />
<StorybookSubHeading>with overrides</StorybookSubHeading>
<ThemeProvider theme={myCustomTheme}>
<Box>
<Divider vertical overrides={{stylePreset: 'customDivider'}} />
</Box>
</ThemeProvider>
<Box />
</Stack>
</StorybookCase>

<StorybookCase title="In horizontal Stack with spacing">
<Stack
flow="horizontal-center"
stackDistribution="flex-start"
spaceInline="space020"
>
<Box />
<StackChild alignSelf="stretch">
<Divider vertical />
</StackChild>
<Box />
</Stack>
</StorybookCase>
</StorybookPage>
</>
);
StoryVertical.storyName = 'vertical';
StoryVertical.storyName = 'Vertical';

export const StoryResponsive = () => (
<>
<StorybookHeading>Divider - Responsive</StorybookHeading>
<StorybookSubHeading>
xs: default | sm: vertical | md: horizontal | xs: vertical
</StorybookSubHeading>
<div style={{height: 50}}>
<Divider vertical={{sm: true, md: false, xl: true}} />
</div>
<StorybookPage>
<StorybookCase title="Horizontal XS - Vertical MD - Vertical XL">
<div style={{height: 50}}>
<Divider vertical={{xs: false, sm: true, md: false, xl: true}} />
</div>
</StorybookCase>
</StorybookPage>
</>
);
StoryResponsive.storyName = 'responsive';
StoryResponsive.storyName = 'Breakpoint';

export const StoryLogicalPropsOverrides = () => (
<>
<StorybookHeading>Divider - Logical Props</StorybookHeading>
<StorybookSubHeading>Logical padding</StorybookSubHeading>
<BlockForDivider vertical>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<Divider vertical overrides={{paddingInline: 'space030'}} />
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</BlockForDivider>
<BlockForDivider>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<Divider overrides={{paddingBlock: 'space030'}} />
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</BlockForDivider>
<StorybookSubHeading>Logical margin</StorybookSubHeading>
<BlockForDivider vertical>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<Divider vertical overrides={{marginInline: 'space030'}} />
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</BlockForDivider>
<BlockForDivider>
<IconFilledFacebook overrides={{size: 'iconSize040'}} />
<Divider overrides={{marginBlock: 'space030'}} />
<IconFilledWhatsApp overrides={{size: 'iconSize040'}} />
</BlockForDivider>
<StorybookPage columns={dividerCols}>
<StorybookCase title="Padding overrides">
<BlockForDivider paddingInline="space030" />
<Divider
overrides={{paddingBlock: 'space030', paddingInline: 'space030'}}
/>
<BlockForDivider paddingInline="space030" />
</StorybookCase>
<StorybookCase title="Margin overrides">
<BlockForDivider marginInline="space030" />
<Divider
overrides={{marginBlock: 'space030', marginInline: 'space030'}}
/>
<BlockForDivider marginInline="space030" />
</StorybookCase>
<StorybookCase title="Styling">
<ThemeProvider theme={myCustomTheme}>
<Box transparent>
<Divider vertical overrides={{stylePreset: 'customDivider'}} />
</Box>
</ThemeProvider>
</StorybookCase>
</StorybookPage>
</>
);
StoryLogicalPropsOverrides.storyName = 'logical-props-overrides';
StoryLogicalPropsOverrides.storyName = 'Overrides';

export default {
title: 'Components/Divider',
component: 'Divider',
parameters: {
nkDocs: {
title: 'Divider',
url: 'https://newskit.co.uk/components/divider',
description:
'A divider is used to provide visual separation of different content. Dividers can be applied vertically or horizontally.',
},
},
};