docs: add segmented control stories

riccardoperra · Nov 12, 2023 · 2c875c8 · 2c875c8
1 parent 9b37057
commit 2c875c8
Show file tree

Hide file tree

Showing 7 changed files with 246 additions and 23 deletions.
diff --git a/packages/storybook/src/stories/Button.stories.tsx b/packages/storybook/src/stories/Button.stories.tsx
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 import { Button } from "@codeui/kit";
 import { For } from "solid-js";
 import { ShareIcon } from "./components/ShareIcon.jsx";
+import { DocsItemsContainer, DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const buttonThemes = ["primary", "secondary", "tertiary", "negative", "caution"] as const;
 
@@ -137,20 +138,20 @@ export const Ghost: Story = {
 
 export const Loading: Story = {
 	render: () => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={buttonThemes}>
 				{theme => (
-					<div class={"itemsContainer"}>
+					<DocsItemsContainer>
 						<For each={buttonSizes}>
 							{size => (
 								<Button size={size} theme={theme} loading>
 									Button
 								</Button>
 							)}
 						</For>
-					</div>
+					</DocsItemsContainer>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/Checkbox.stories.tsx b/packages/storybook/src/stories/Checkbox.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { Checkbox, CheckBoxProps } from "@codeui/kit";
 import { For } from "solid-js";
+import { DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const checkboxSizes = ["xs", "sm", "md", "lg", "xl"] as const;
 
@@ -43,7 +44,7 @@ export const CheckboxDefault: Story = {
 
 export const Sizes: Story = {
 	render: props => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={checkboxSizes}>
 				{size => (
 					<Checkbox
@@ -54,13 +55,13 @@ export const Sizes: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
 
 export const Validation: Story = {
 	render: props => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={checkboxSizes}>
 				{size => (
 					<Checkbox
@@ -72,6 +73,6 @@ export const Validation: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/Dialog.stories.tsx b/packages/storybook/src/stories/Dialog.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { Button, Dialog, DialogPanelContent, DialogPanelFooter } from "@codeui/kit";
 import { createSignal, For } from "solid-js";
+import { DocsItemsContainer } from "./components/Section.jsx";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
 const meta = {
@@ -12,11 +13,12 @@ const meta = {
 } satisfies Meta<typeof Dialog>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Sizes: Story = {
 	render: () => (
-		<div class={"itemsContainer"}>
+		<DocsItemsContainer>
 			<For each={["xs", "sm", "md", "lg", "xl", "full"] as const}>
 				{size => {
 					const [open, setOpen] = createSignal(false);
@@ -42,15 +44,15 @@ export const Sizes: Story = {
 					);
 				}}
 			</For>
-		</div>
+		</DocsItemsContainer>
 	),
 };
 
 export const OverflowContent: Story = {
 	render: () => {
 		const [open, setOpen] = createSignal(false);
 		return (
-			<div class={"itemsContainer"}>
+			<DocsItemsContainer>
 				<Button theme={"secondary"} onClick={() => setOpen(true)}>
 					Open Dialog
 				</Button>
@@ -94,7 +96,7 @@ export const OverflowContent: Story = {
 						<Button theme={"primary"}>Confirm</Button>
 					</DialogPanelFooter>
 				</Dialog>
-			</div>
+			</DocsItemsContainer>
 		);
 	},
 };
diff --git a/packages/storybook/src/stories/IconButton.stories.tsx b/packages/storybook/src/stories/IconButton.stories.tsx
@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "storybook-solidjs";
 
-import { Button, IconButton } from "@codeui/kit";
+import { IconButton } from "@codeui/kit";
 import { For } from "solid-js";
 import { ShareIcon } from "./components/ShareIcon.jsx";
+import { DocsItemsContainer, DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const buttonThemes = ["primary", "secondary", "tertiary", "negative", "caution"] as const;
 
@@ -12,7 +13,7 @@ const buttonSizes = ["xs", "sm", "md", "lg", "xl"] as const;
 const meta = {
 	title: "DesignSystem/IconButton",
 	component: props => (
-		<IconButton aria-label={"Icon"} {...props}>
+		<IconButton {...props}>
 			<ShareIcon />
 		</IconButton>
 	),
@@ -37,7 +38,7 @@ const meta = {
 	// argTypes: {
 	// 	backgroundColor: { control: "color" },
 	// },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof IconButton>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -122,20 +123,20 @@ export const Pill: Story = {
 
 export const Loading: Story = {
 	render: () => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={buttonThemes}>
 				{theme => (
-					<div class={"itemsContainer"}>
+					<DocsItemsContainer>
 						<For each={buttonSizes}>
 							{size => (
 								<IconButton aria-label={"Icon"} size={size} theme={theme} loading>
 									<ShareIcon />
 								</IconButton>
 							)}
 						</For>
-					</div>
+					</DocsItemsContainer>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
diff --git a/packages/storybook/src/stories/RadioList.stories.tsx b/packages/storybook/src/stories/RadioList.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "storybook-solidjs";
 
 import { RadioList, RadioListItem, RadioListProps } from "@codeui/kit";
 import { For } from "solid-js";
+import { DocsMultipleItemsContainer } from "./components/Section.jsx";
 
 const radioSizes = ["xs", "sm", "md", "lg", "xl"] as const;
 
@@ -63,7 +64,7 @@ export const RadioListVertical: Story = {
 
 export const Sizes: Story = {
 	render: (props: RadioListProps) => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={radioSizes}>
 				{size => (
 					<meta.component
@@ -74,13 +75,13 @@ export const Sizes: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };
 
 export const Validation: Story = {
 	render: (props: RadioListProps) => (
-		<div class={"multipleItemsContainer"}>
+		<DocsMultipleItemsContainer>
 			<For each={radioSizes}>
 				{size => (
 					<meta.component
@@ -92,6 +93,6 @@ export const Validation: Story = {
 					/>
 				)}
 			</For>
-		</div>
+		</DocsMultipleItemsContainer>
 	),
 };