0.2.5

.storybook/preview.tsx

@@ -1,8 +1,12 @@
 import type { Preview } from "@storybook/react";
 import "./preview.scss";
+import DocsLinks from "./preview/DocsLinks";
 
 const preview: Preview = {
 	parameters: {
+		docs: {
+			container: DocsLinks,
+		},
 		layout: "padded",
 	},
 	tags: ["autodocs"],

.storybook/preview/DocsLinks.scss

@@ -0,0 +1,15 @@
+@use "@/index.module.scss" as *;
+
+.docs-links {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  background-color: $grey-1;
+
+  a {
+    padding: $space-4 $space-8;
+    color: $white;
+  }
+}

.storybook/preview/DocsLinks.tsx

@@ -0,0 +1,40 @@
+import type { DocsContainerProps } from "@storybook/blocks";
+import type { StoryMetaParameters } from "../../src/types";
+
+import { DocsContainer } from "@storybook/blocks";
+import type { PropsWithChildren } from "react";
+import "./DocsLinks.scss";
+
+type Props = PropsWithChildren<DocsContainerProps> & {
+	context: { primaryStory: { parameters: StoryMetaParameters } };
+};
+
+const DocsLinks = ({ children, ...props }: Props) => {
+	const links = props.context.primaryStory.parameters.links;
+
+	return (
+		<DocsContainer {...props}>
+			{links && (
+				<div className="docs-links">
+					<a
+						href={`https://blue-tomato.atlassian.net/wiki/x/${links.confluence}`}
+						target="_blank"
+						rel="noreferrer"
+					>
+						Confluence
+					</a>
+					<a
+						href={`https://www.figma.com/design/${links.figma}`}
+						target="_blank"
+						rel="noreferrer"
+					>
+						Figma
+					</a>
+				</div>
+			)}
+			{children}
+		</DocsContainer>
+	);
+};
+
+export default DocsLinks;

README.md

@@ -3,3 +3,9 @@
 > the design system of Blue Tomato
 
 ![Logo](logo.png)
+
+## Development
+
+1. Clone the repository via `git clone [email protected]:blue-tomato/blueto.git`
+2. Run `npm install` inside of the repository
+3. Run `npm run dev`

biome.json

@@ -4,7 +4,7 @@
 		"enabled": true
 	},
 	"javascript": {
-		"globals": ["React"]
+		"globals": ["React", "StoryMeta"]
 	},
 	"linter": {
 		"enabled": true,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@blue-tomato/blueto",
-	"version": "0.2.4",
+	"version": "0.2.5",
 	"license": "EUPL-1.2",
 	"description": "🪐 BLUETO - the design system of Blue Tomato",
 	"homepage": "https://blueto.blue-tomato.com",

src/components/Icon.module.scss

@@ -1,5 +1,5 @@
 @use "@/index.module.scss" as *;
 
 .icon {
-  display: flex;
+  display: block;
 }

src/stories/components/Button.stories.module.scss

@@ -0,0 +1,5 @@
+@use "@/index.module.scss" as *;
+
+.long-text {
+  max-width: 128px;
+}

src/stories/components/Button.stories.tsx

@@ -0,0 +1,46 @@
+import { Button } from "@/components";
+import type { StoryMeta } from "@/types";
+import styles from "./Button.stories.module.scss";
+
+const Docs: StoryMeta<typeof Button> = {
+	title: "BLUETO/components/Button",
+	component: Button,
+	args: {
+		children: "Button",
+		disabled: false,
+		icon: undefined,
+		loading: false,
+		variant: "primary",
+	},
+	argTypes: {
+		icon: { control: "text" },
+	},
+	parameters: {
+		links: {
+			confluence: "3ArPKQ",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=19-2",
+		},
+	},
+};
+
+const Default: StoryMeta<typeof Button> = {};
+
+const WithIcon: StoryMeta<typeof Button> = {
+	args: {
+		icon: "flag.at",
+	},
+};
+
+const WithLongText: StoryMeta<typeof Button> = {
+	render: (props) => (
+		<div className={styles.longText}>
+			<Button {...props} />
+		</div>
+	),
+	args: {
+		children: "Button long text",
+	},
+};
+
+export default Docs;
+export { Default, WithIcon, WithLongText };

src/stories/components/Buttongroup/CategoryButton.stories.module.scss

@@ -0,0 +1,6 @@
+@use "@/index.module.scss" as *;
+
+.wrapper {
+  display: flex;
+  gap: $space-16;
+}

src/stories/components/Buttongroup/CategoryButton.stories.tsx

@@ -0,0 +1,30 @@
+import { CategoryButton } from "@/components";
+import type { Meta } from "@storybook/react";
+import styles from "./CategoryButton.stories.module.scss";
+
+const Docs: Meta<typeof CategoryButton> = {
+	title: "BLUETO/components/Buttongroup/CategoryButton",
+	render: (props) => (
+		<div className={styles.wrapper}>
+			<CategoryButton {...props} />
+			<CategoryButton {...props} />
+		</div>
+	),
+	args: {
+		active: false,
+		children: "CategoryButton",
+		color: "white",
+		size: "large",
+	},
+	parameters: {
+		links: {
+			confluence: "B4B6L",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=420-52",
+		},
+	},
+};
+
+const Default: Meta<typeof CategoryButton> = {};
+
+export default Docs;
+export { Default };

src/stories/components/Buttongroup/SizeButton.stories.module.scss

@@ -0,0 +1,6 @@
+@use "@/index.module.scss" as *;
+
+.wrapper {
+  display: flex;
+  gap: $space-16;
+}

src/stories/components/Buttongroup/SizeButton.stories.tsx

@@ -0,0 +1,29 @@
+import { SizeButton } from "@/components";
+import type { Meta } from "@storybook/react";
+import styles from "./SizeButton.stories.module.scss";
+
+const Docs: Meta<typeof SizeButton> = {
+	title: "BLUETO/components/Buttongroup/SizeButton",
+	render: (props) => (
+		<div className={styles.wrapper}>
+			<SizeButton {...props} />
+			<SizeButton {...props} />
+		</div>
+	),
+	args: {
+		active: false,
+		children: "46",
+		disabled: false,
+	},
+	parameters: {
+		links: {
+			confluence: "CACDL",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=420-52",
+		},
+	},
+};
+
+const Default: Meta<typeof SizeButton> = {};
+
+export default Docs;
+export { Default };

src/stories/components/Checkbox.stories.ts

@@ -1,8 +1,8 @@
 import { Checkbox } from "@/components";
 import type { Meta } from "@storybook/react";
 
-export default {
-	title: "components/Checkbox",
+const Docs: Meta<typeof Checkbox> = {
+	title: "BLUETO/components/Checkbox",
 	component: Checkbox,
 	args: {
 		children: "Checkbox",
@@ -11,12 +11,21 @@ export default {
 	argTypes: {
 		error: { control: "text" },
 	},
+	parameters: {
+		links: {
+			confluence: "NwA0L",
+			figma: "rUIq4O2W7nCzofq3nFoURP/BLUETO-Components?node-id=167-125",
+		},
+	},
 };
 
-export const Default: Meta<typeof Checkbox> = {};
+const Default: Meta<typeof Checkbox> = {};
 
-export const WithError: Meta<typeof Checkbox> = {
+const WithError: Meta<typeof Checkbox> = {
 	args: {
 		error: "Error",
 	},
 };
+
+export default Docs;
+export { Default, WithError };

src/stories/components/Icon.stories.ts

@@ -1,15 +1,24 @@
 import { Icon } from "@/components";
 import type { Meta } from "@storybook/react";
 
-export default {
-	title: "components/Icon",
+const Docs: Meta<typeof Icon> = {
+	title: "BLUETO/components/Icon",
 	component: Icon,
 	args: {
 		icon: "flag.at",
 	},
 	argTypes: {
 		icon: { control: "text" },
 	},
+	parameters: {
+		links: {
+			confluence: "AQBCHg",
+			figma: "4BjT8a6YN5icL5bpEfsszx/Foundation?node-id=3-6",
+		},
+	},
 };
 
-export const Default: Meta<typeof Icon> = {};
+const Default: Meta<typeof Icon> = {};
+
+export default Docs;
+export { Default };

src/stories/components/RadioButton.stories.module.scss

@@ -0,0 +1,7 @@
+@use "@/index.module.scss" as *;
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-16;
+}