Added separate story for container.item

src/components/container/container-item.stories.jsx

@@ -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>
+	),
+};

src/components/container/container.stories.jsx

@@ -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.',
@@ -94,10 +83,8 @@ export default {
 	},
 };
 
-// Basic Flexbox Container Story
 export const BasicFlexbox = {
 	args: {
-		containerType: 'flex',
 		gap: 'sm',
 		direction: 'row',
 		justify: 'start',
@@ -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>
-	),
-};