aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/grid/grid.stories.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/grid/grid.stories.tsx')
-rw-r--r--src/components/molecules/grid/grid.stories.tsx224
1 files changed, 157 insertions, 67 deletions
diff --git a/src/components/molecules/grid/grid.stories.tsx b/src/components/molecules/grid/grid.stories.tsx
index ce3ee2b..4e12af4 100644
--- a/src/components/molecules/grid/grid.stories.tsx
+++ b/src/components/molecules/grid/grid.stories.tsx
@@ -1,6 +1,6 @@
import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { FC, ReactNode } from 'react';
import { Grid } from './grid';
+import { GridItem } from './grid-item';
export default {
title: 'Molecules/Grid',
@@ -19,107 +19,185 @@ export default {
const Template: ComponentStory<typeof Grid> = (args) => <Grid {...args} />;
-type ItemProps = {
- children: ReactNode;
-};
-
-const Item: FC<ItemProps> = ({ children }) => (
- <div style={{ border: '1px solid #000', padding: '1rem' }}>{children}</div>
-);
-
export const Default = Template.bind({});
Default.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- { id: 'item-5', item: <Item>Item 5</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 5
+ </GridItem>
+ </>
+ ),
};
export const OneColumn = Template.bind({});
OneColumn.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ </>
+ ),
col: 1,
gap: 'sm',
};
export const TwoColumns = Template.bind({});
TwoColumns.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ </>
+ ),
col: 2,
gap: 'sm',
};
export const ThreeColumns = Template.bind({});
ThreeColumns.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ </>
+ ),
col: 3,
gap: 'sm',
};
export const FixedSize = Template.bind({});
FixedSize.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- { id: 'item-5', item: <Item>Item 5</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 5
+ </GridItem>
+ </>
+ ),
size: '300px',
gap: 'sm',
};
export const MaxSize = Template.bind({});
MaxSize.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- { id: 'item-5', item: <Item>Item 5</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 5
+ </GridItem>
+ </>
+ ),
sizeMax: '300px',
gap: 'sm',
};
export const MinSize = Template.bind({});
MinSize.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- { id: 'item-5', item: <Item>Item 5</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 5
+ </GridItem>
+ </>
+ ),
sizeMin: '100px',
gap: 'sm',
};
export const MinAndMaxSize = Template.bind({});
MinAndMaxSize.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- { id: 'item-5', item: <Item>Item 5</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 5
+ </GridItem>
+ </>
+ ),
sizeMax: '300px',
sizeMin: '100px',
gap: 'sm',
@@ -127,13 +205,25 @@ MinAndMaxSize.args = {
export const Fill = Template.bind({});
Fill.args = {
- items: [
- { id: 'item-1', item: <Item>Item 1</Item> },
- { id: 'item-2', item: <Item>Item 2</Item> },
- { id: 'item-3', item: <Item>Item 3</Item> },
- { id: 'item-4', item: <Item>Item 4</Item> },
- { id: 'item-5', item: <Item>Item 5</Item> },
- ],
+ children: (
+ <>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 1
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 2
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 3
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 4
+ </GridItem>
+ <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+ Item 5
+ </GridItem>
+ </>
+ ),
col: 'auto-fill',
sizeMin: '100px',
gap: 'sm',
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:28:38 +0000