Skip to content

Commit

Permalink
docs(PPDSC-2816)update-stack-child-component-storybook-scenarios (#666)
Browse files Browse the repository at this point in the history 
* docs(PPDSC-2816): chore/ppdse-2816-added new stack c scenes

* docs(PPDSC-2816): chore/ppdse-2816-tidy up

* docs(PPDSC-2816): chore/ppdse-2816-addressed comments

* docs(PPDSC-2816): chore/ppdse-2816-test

* docs(PPDSC-2816): chore/ppdse-2816-removed space
  • Loading branch information
@baburay23
baburay23 authored Mar 2, 2023
1 parent 0f0d956 commit 1c2d26e
Showing 1 changed file with 122 additions and 56 deletions.
178 changes: 122 additions & 56 deletions src/stack-child/__tests__/stack-child.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,150 @@
import * as React from 'react';
import {Stack} from '../../stack';
import {
getColorCssFromTheme,
styled,
getTypographyPresetFromTheme,
} from '../../utils/style';
import {StorybookCase, StorybookPage} from '../../test/storybook-comps';

import {styled} from '../../utils/style';
import {StorybookHeading} from '../../test/storybook-comps';
import {Tag} from '../../tag/tag';
import {StackChild} from '..';
import {LinkInline} from '../../link';

const TagHeight = 32;
const TagWidth = 68;
const TagBorderWidth = 1;

const MainContainer = styled.div`
margin: 0 auto;
max-width: 800px;
max-height: 768px;
`;

const Tag = styled.div`
box-sizing: border-box;
min-height: ${TagHeight}px;
min-width: ${TagWidth}px;
padding: 5px 12px;
border: ${TagBorderWidth}px solid;
${getColorCssFromTheme('borderColor', 'interfaceBrand010')};
${getColorCssFromTheme('color', 'inkBase')};
${getTypographyPresetFromTheme('utilityLabel020')}
`;

const Container = styled.div<{
hasHeight?: boolean;
hasWidth?: boolean;
hasBorder?: boolean;
hasBackgroundColor?: boolean;
}>`
border: solid 1px red;
height: ${({hasHeight}) => (hasHeight ? '200px' : 'auto')};
width: ${({hasWidth}) => (hasWidth ? '400px' : 'auto')};
border: ${({hasBorder}) => (hasBorder ? 'dotted 1px red' : 'undefined')};
${({hasBackgroundColor}) =>
hasBackgroundColor
? getColorCssFromTheme('backgroundColor', 'interactivePrimary010')
: undefined};
`;

export default {
title: 'Components/stack-child',
component: () => 'None',
title: 'Components/Stack child',
component: StackChild,
parameters: {
nkDocs: {
title: 'Stack child',
url: 'https://newskit.co.uk/components/stack',
description: (
<>
A stack is a layout component that abstracts the implementation of{' '}
<LinkInline
href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
target="_blank"
>
flexbox.
</LinkInline>
</>
),
},
},
};

export const StoryDefault = () => (
<StorybookPage columns={{md: 'auto'}}>
<StorybookCase>
<Container hasBackgroundColor>
<Stack spaceInline="space050" flow="horizontal-top">
<StackChild order={1}>
<Tag>Child 1</Tag>
</StackChild>
<StackChild order={2}>
<Tag>Child 2</Tag>
</StackChild>
<StackChild order={3}>
<Tag>Child 3</Tag>
</StackChild>
</Stack>
</Container>
</StorybookCase>
</StorybookPage>
);
StoryDefault.storyName = 'Default';

export const StoryStackChildCustomOrder = () => (
<MainContainer>
<StorybookHeading>StackChild with custom order</StorybookHeading>
<Container>
<Stack spaceInline="space050" flow="horizontal-top">
<StackChild order={3}>
<Tag>Child 1</Tag>
</StackChild>
<StackChild order={1}>
<Tag>Child 2</Tag>
</StackChild>
<StackChild order={1}>
<Tag>Child 3</Tag>
</StackChild>
</Stack>
</Container>
</MainContainer>
<StorybookPage columns={{md: 'auto'}}>
<StorybookCase>
<Container hasBackgroundColor>
<Stack spaceInline="space050" flow="horizontal-top">
<StackChild order={1}>
<Tag>Child 2</Tag>
</StackChild>
<StackChild order={2}>
<Tag>Child 3</Tag>
</StackChild>
<StackChild order={3}>
<Tag>Child 1</Tag>
</StackChild>
</Stack>
</Container>
</StorybookCase>
</StorybookPage>
);
StoryStackChildCustomOrder.storyName = 'stack-child-custom-order';
StoryStackChildCustomOrder.storyName = 'Custom order';

export const StoryStackChildWithStackList = () => (
<MainContainer>
<StorybookHeading>StackChild with stack list</StorybookHeading>
<Container>
<Stack spaceInline="space050" flow="horizontal-top" list>
<StackChild order={3}>
<Tag>Child 1</Tag>
</StackChild>
<StackChild order={1}>
<Tag>Child 2</Tag>
</StackChild>
<StackChild order={1}>
<Tag>Child 3</Tag>
</StackChild>
</Stack>
</Container>
</MainContainer>
<StorybookPage columns={{md: 'auto'}}>
<StorybookCase>
<Container hasBackgroundColor>
<Stack spaceInline="space050" flow="horizontal-top" list>
<StackChild order={1}>
<Tag>Child 2</Tag>
</StackChild>
<StackChild order={2}>
<Tag>Child 3</Tag>
</StackChild>
<StackChild order={3}>
<Tag>Child 1</Tag>
</StackChild>
</Stack>
</Container>
</StorybookCase>
</StorybookPage>
);
StoryStackChildWithStackList.storyName = 'stack-child-with-stack-list';
StoryStackChildWithStackList.storyName = 'Stack list';

export const StoryStackChildWithLogicalProps = () => (
<MainContainer>
<StorybookHeading>StackChild with logical props</StorybookHeading>
<Container>
<Stack spaceInline="space050" flow="horizontal-top">
<StackChild order={1} paddingInline="30px" paddingBlock="20px">
<Tag>With padding props</Tag>
</StackChild>
<StackChild order={2} marginInline="30px" marginBlock="20px">
<Tag>With margin props</Tag>
</StackChild>
</Stack>
</Container>
</MainContainer>
<StorybookPage columns={{md: 'auto'}}>
<StorybookCase>
<MainContainer>
<Container hasBorder>
<Stack spaceInline="space050" flow="horizontal-top">
<StackChild order={1} paddingInline="30px" paddingBlock="20px">
<Tag>With padding props</Tag>
</StackChild>
<StackChild order={2} marginInline="30px" marginBlock="20px">
<Tag>With margin props</Tag>
</StackChild>
</Stack>
</Container>
</MainContainer>
</StorybookCase>
</StorybookPage>
);
StoryStackChildWithLogicalProps.storyName = 'stack-child-with-logical-props';
StoryStackChildWithLogicalProps.storyName = 'Logical props';

0 comments on commit 1c2d26e

Please sign in to comment.