Skip to content

Commit

Permalink
Merge pull request #89 from brainstormforce/stories_fixes
Browse files Browse the repository at this point in the history
SUR-288 - Added separate story for container.item
  • Loading branch information
vrundakansara authored Sep 26, 2024
2 parents 0060bf1 + 76083cf commit 80bc53d
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 30 deletions.
91 changes: 91 additions & 0 deletions src/components/container/container-item.stories.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import React from 'react';
import Container from './container.jsx';

export default {
title: 'Atoms/Container/Container.Item',
component: Container.Item, // We're controlling Container.Item but showing Container
parameters: {
layout: 'centered',
},
tags: [ 'autodocs' ],
argTypes: {
grow: {
name: 'Grow',
description: 'Specifies how much a flex item should grow relative to the rest of the flex items.',
control: 'select',
options: [ 0, 1 ],
defaultValue: 0,
table: {
type: { summary: 'number' },
defaultValue: { summary: 0 },
},
},
shrink: {
name: 'Shrink',
description: 'Specifies how much a flex item should shrink relative to the rest of the flex items.',
control: 'select',
options: [ 0, 1 ],
defaultValue: 1,
table: {
type: { summary: 'number' },
defaultValue: { summary: 1 },
},
},
order: {
name: 'Order',
description: 'Defines the order of the flex item in the container.',
control: 'select',
options: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 'first', 'last', 'none' ],
defaultValue: 'none',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'none' },
},
},
alignSelf: {
name: 'Align Self',
description: 'Allows the default alignment to be overridden for individual flex items.',
control: 'select',
options: [ 'auto', 'start', 'end', 'center', 'stretch', 'baseline' ],
defaultValue: 'auto',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'auto' },
},
},
className: {
name: 'Class Name',
description: 'Additional custom classes to be added to the container item.',
control: 'text',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
},
},
},
decorators: [
( Story ) => (
<div className="md:w-full lg:w-full">
<Story />
</div>
),
],
};

// Story that applies controls on Container.Item
export const ContainerWithItemControls = {
args: {
grow: 0,
shrink: 1,
order: 'none',
alignSelf: 'auto',
className: 'bg-red-500 p-4',
},
render: ( args ) => (
<Container gap="md" direction="row" className="bg-gray-200 p-4 md:w-full lg:w-full justify-start h-20">
<Container.Item { ...args } className="bg-red-500 p-4">Item 1</Container.Item>
<Container.Item className="bg-gray-500 p-4">Item 2</Container.Item>
<Container.Item className="bg-gray-500 p-4">Item 3</Container.Item>
</Container>
),
};
31 changes: 1 addition & 30 deletions src/components/container/container.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,13 @@ import React from 'react';
import Container from './container.jsx';

export default {
title: 'Atoms/Container',
title: 'Atoms/Container/Container',
component: Container,
parameters: {
layout: 'centered',
},
tags: [ 'autodocs' ],
argTypes: {
containerType: {
name: 'Container Type',
description: 'Specifies the type of container',
control: 'select',
options: [ 'flex', 'grid' ],
defaultValue: 'flex',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'flex' },
},
},
gap: {
name: 'Gap',
description: 'Defines the gap between items.',
Expand Down Expand Up @@ -94,10 +83,8 @@ export default {
},
};

// Basic Flexbox Container Story
export const BasicFlexbox = {
args: {
containerType: 'flex',
gap: 'sm',
direction: 'row',
justify: 'start',
Expand Down Expand Up @@ -132,19 +119,3 @@ export const ResponsiveColumns = {
</Container>
),
};

export const GridContainer = {
args: {
containerType: 'grid',
gap: 'lg',
cols: 3,
className: 'bg-gray-100 p-4',
},
render: ( args ) => (
<Container { ...args } className={ `grid grid-cols-${ args.cols } gap-6 ${ args.className }` }>
<Container.Item className="bg-red-500 p-4 md:w-full lg:w-full">Grid Item 1</Container.Item>
<Container.Item className="bg-green-500 p-4 md:w-full lg:w-full">Grid Item 2</Container.Item>
<Container.Item className="bg-blue-500 p-4 md:w-full lg:w-full">Grid Item 3</Container.Item>
</Container>
),
};

0 comments on commit 80bc53d

Please sign in to comment.