From 2abcf37c95d199b661a55920b8c8904acd84de96 Mon Sep 17 00:00:00 2001
From: Bence Markus <markus.bence@icloud.com>
Date: Sat, 11 Jan 2025 23:10:19 +0100
Subject: [PATCH] feat: new docs and refactor + divider component rework

---
 docs/.vitepress/config.ts                     |   1 +
 docs/components/divider/divider.md            |  85 +++++++
 src/components/bo_card/BoCard.vue             |   4 +-
 .../bo_card/__stories__/bo_card.mdx           |  90 -------
 .../bo_card/__stories__/bo_card.stories.ts    | 224 ------------------
 .../bo_card/{types.ts => bo_card.ts}          |   0
 src/components/bo_card/index.ts               |   4 +-
 src/components/bo_divider/BoDivider.vue       |  82 ++++---
 .../bo_divider/__stories__/bo_divider.mdx     |  54 -----
 .../__stories__/bo_divider.stories.ts         | 111 ---------
 src/components/bo_divider/bo_divider.ts       |  12 +
 src/components/bo_divider/constants.ts        |  14 --
 src/components/bo_divider/index.ts            |   5 +-
 src/components/bo_divider/types.ts            |   6 -
 src/components/bo_modal/BoSlotModal.vue       |   4 +-
 15 files changed, 150 insertions(+), 546 deletions(-)
 create mode 100644 docs/components/divider/divider.md
 delete mode 100644 src/components/bo_card/__stories__/bo_card.mdx
 delete mode 100644 src/components/bo_card/__stories__/bo_card.stories.ts
 rename src/components/bo_card/{types.ts => bo_card.ts} (100%)
 delete mode 100644 src/components/bo_divider/__stories__/bo_divider.mdx
 delete mode 100644 src/components/bo_divider/__stories__/bo_divider.stories.ts
 create mode 100644 src/components/bo_divider/bo_divider.ts
 delete mode 100644 src/components/bo_divider/constants.ts
 delete mode 100644 src/components/bo_divider/types.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index e4b2f02..364e368 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -22,6 +22,7 @@ function getComponents() {
 		{ text: 'Badge', link: '/components/badge/badge' },
 		{ text: 'Button', link: '/components/button/button' },
 		{ text: 'Card', link: '/components/card/card' },
+		{ text: 'Divider', link: '/components/divider/divider' },
 	];
 }
 
diff --git a/docs/components/divider/divider.md b/docs/components/divider/divider.md
new file mode 100644
index 0000000..99adada
--- /dev/null
+++ b/docs/components/divider/divider.md
@@ -0,0 +1,85 @@
+<script setup>
+import { BoDivider, BoDividerVariant } from '@/components/bo_divider';
+</script>
+
+# bo-divider
+
+A divider is a thin line that groups content in a list or separates sections.
+
+<bo-divider />
+
+## Basic usage
+
+The component to use is called `bo-divider`.
+
+```vue
+<bo-divider />
+```
+
+## Props
+
+| Prop name        | Type               | Default value              |
+| ---------------- | ------------------ | -------------------------- |
+| `id`             | `string`           | `undefined`                |
+| `variant`        | `BoDividerVariant` | `BoDividerVariant.primary` |
+| `color-hex`      | `string`           | `undefined`                |
+| `tailwind-color` | `string`           | `undefined`                |
+
+## Variants
+
+To change the style of the divider, you can use the `variant` prop.
+
+The available values for the `variant` prop are:
+
+- `default`
+- `dotted`
+- `dashed`
+
+<div class="flex flex-col gap-2">
+    <bo-divider :variant="BoDividerVariant.default" />
+    <bo-divider :variant="BoDividerVariant.dotted" />
+    <bo-divider :variant="BoDividerVariant.dashed" />
+</div>
+
+```vue
+<bo-divider variant="default" />
+```
+
+## Colors
+
+There are two ways to change the color of the divider.
+
+- By using the `color-hex` prop
+- By using the `tailwind-color` prop
+
+### Color by hex
+
+To change the color of the divider, you can use the `color-hex` prop.
+
+<div class="flex flex-col gap-2">
+    <bo-divider :color-hex="'#41b883'" />
+    <bo-divider :color-hex="'#ff0000'" />
+    <bo-divider :color-hex="'#000000'" />
+</div>
+
+```vue
+<bo-divider :color-hex="'#41b883'" />
+<bo-divider :color-hex="'#ff0000'" />
+<bo-divider :color-hex="'#000000'" />
+```
+
+### Color by tailwind
+
+To change the color of the divider, you can also use the `tailwind-color` prop. This accepts any valid border color from the [Tailwind CSS documentation](https://tailwindcss.com/docs/border-color).
+
+<div class="flex flex-col gap-2">
+    <bo-divider :tailwind-color="'border-blue-600'" />
+    <bo-divider :tailwind-color="'border-red-600'" />
+    <bo-divider :tailwind-color="'border-black'" />
+</div>
+
+```vue
+<bo-divider :tailwind-color="'border-blue-600'" />
+<bo-divider :tailwind-color="'border-red-600'" />
+<bo-divider :tailwind-color="'border-black'" />
+```
diff --git a/src/components/bo_card/BoCard.vue b/src/components/bo_card/BoCard.vue
index 2a1be94..8e415a5 100644
--- a/src/components/bo_card/BoCard.vue
+++ b/src/components/bo_card/BoCard.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		:style="slotCardWidth.style"
-		:class="[cardContainerClasses, 'bo-card rounded-lg border border-gray-300 bg-white shadow']"
+		:class="[cardContainerClasses, 'bo-card rounded-lg border border-gray-300 bg-white shadow-lg']"
 	>
 		<div v-if="$slots['content'] != null" :class="contentClasses">
 			<slot name="content"></slot>
@@ -33,7 +33,7 @@ import { BoFontFamily, BoFontSize, BoFontWeight, BoText, BoTextColor } from '@/c
 import type { StyleConstruct } from '@/types';
 import { TailwindUtils } from '@/utils';
 import { computed, toRefs } from 'vue';
-import type { BoCardProps } from './types';
+import type { BoCardProps } from './bo_card';
 
 const props = withDefaults(defineProps<BoCardProps>(), {
 	padding: () => ({
diff --git a/src/components/bo_card/__stories__/bo_card.mdx b/src/components/bo_card/__stories__/bo_card.mdx
deleted file mode 100644
index 7280159..0000000
--- a/src/components/bo_card/__stories__/bo_card.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks'
-import * as BoCardStories from './bo_card.stories'
-
-<Meta
-  title="Components/bo-card"
-  component={BoCardStories.BoCard}
-/>
-
-# bo-card
-
-A card is a container that holds related content and actions. The `bo-card` component is a component that can be used to display a card in various ways.
-
-## Basic usage
-
-The component to use is called `bo-card`.
-
-```html
-<bo-card>
-  <template #content>
-    <div class="flex items-center gap-2">// some content</div>
-  </template>
-</bo-card>
-```
-
-## Props
-
-- `title` - The title of the card (optional)
-  - default: `undefined`
-- `description` - The description of the card (optional)
-  - default: `undefined`
-- `clickable` - Whether the card is clickable (optional)
-  - default: `false`
-- `widthInPx` - The width of the card in pixels (optional)
-  - default: `undefined`
-- `widthInPercent` - The width of the card in percent (optional)
-  - default: `undefined`
-- `widthAsTailwindClass` - The width of the card as a tailwind class (optional)
-  - default: `undefined`
-
-## Examples
-
-<Canvas of={BoCardStories.Example} />
-<Controls of={BoCardStories.Example} />
-
-## Title and description
-
-In case you don't want to use the `content` slot, you can use the `title` and `description` props to display a title and description.
-
-<Canvas of={BoCardStories.TitleAndDescription} />
-
-## Clickable
-
-To make the card clickable, you can use the `clickable` prop.
-This will add a cursor pointer and a hover effect to the card.
-
-<Canvas of={BoCardStories.Clickable} />
-
-## No padding
-
-To remove the padding from the card, you can use the `padding` prop.
-The `padding` prop should be an object with the following properties:
-
-- `top` - Whether to add padding to the top (optional)
-  - default: `true`
-- `right` - Whether to add padding to the right (optional)
-  - default: `true`
-- `bottom` - Whether to add padding to the bottom (optional)
-  - default: `true`
-- `left` - Whether to add padding to the left (optional)
-  - default: `true`
-
-<Canvas of={BoCardStories.NoPadding} />
-
-## Width in px
-
-To set the width of the card in pixels, you can use the `widthInPx` prop.
-
-<Canvas of={BoCardStories.WidthInPx} />
-
-## Width in percent
-
-To set the width of the card in percent, you can use the `widthInPercent` prop.
-
-<Canvas of={BoCardStories.WidthInPercent} />
-
-## Width as tailwind class
-
-To set the width of the card as a tailwind class, you can use the `widthAsTailwindClass` prop.
-
-<Canvas of={BoCardStories.WidthAsTailwindClass} />
diff --git a/src/components/bo_card/__stories__/bo_card.stories.ts b/src/components/bo_card/__stories__/bo_card.stories.ts
deleted file mode 100644
index 188b3b6..0000000
--- a/src/components/bo_card/__stories__/bo_card.stories.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-import { BoBadge, BoBadgeVariant } from '@/components/bo_badge'
-import { BoCard } from '@/components/bo_card'
-import {
-	BoFontFamily,
-	BoFontSize,
-	BoText,
-	BoTextColor,
-} from '@/components/bo_text'
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-const meta = {
-	title: 'Components/bo-card',
-	component: BoCard,
-	argTypes: {
-		content: {
-			description: 'The main slot of the card',
-			table: {
-				category: 'slots',
-				subcategory: 'optional',
-			},
-		},
-		title: {
-			description: 'The title of the card',
-			control: { type: 'text' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-		},
-		description: {
-			description: 'The description of the card',
-			control: { type: 'text' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-		},
-		clickable: {
-			description: 'Whether the card is clickable',
-			control: { type: 'boolean' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-			defaultValue: false,
-		},
-		widthInPx: {
-			description: 'The width of the card in pixels',
-			control: { type: 'number' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-		},
-		widthInPercent: {
-			description: 'The width of the card in percent',
-			control: { type: 'number' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-		},
-		widthAsTailwindClass: {
-			description: 'The width of the card as a tailwind class',
-			control: { type: 'text' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-		},
-		padding: {
-			description: 'The padding of the card',
-			control: { type: 'object' },
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-			},
-			defaultValue: {
-				top: true,
-				right: true,
-				bottom: true,
-				left: true,
-			},
-		},
-	},
-} satisfies Meta<typeof BoCard>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Example: Story = {
-	render: () => ({
-		components: { BoCard, BoBadge },
-		template: `
-			<bo-card>
-				<template #content>
-					<div class="flex gap-2 items-center">
-						<div class="flex gap-2">
-							<img
-								src="https://cataas.com/cat"
-								alt="cat"
-								class="w-20 h-20 rounded-lg"
-							/>
-						</div>
-						<div class="flex gap-2">
-							<img
-								src="https://cataas.com/cat"
-								alt="cat"
-								class="w-20 h-20 rounded-lg"
-							/>
-						</div>
-						<div class="flex gap-2">
-							<img
-								src="https://cataas.com/cat"
-								alt="cat"
-								class="w-20 h-20 rounded-lg"
-							/>
-						</div>
-					</div>
-					<div class="flex gap-4 pt-4 items-center justify-center">
-						<bo-badge label="Badge 1" variant="${BoBadgeVariant.danger}" />
-						<bo-badge label="Badge 2" variant="${BoBadgeVariant.warning}" />
-						<bo-badge label="Badge 3" variant="${BoBadgeVariant.success}" />
-					</div>
-				</template>
-			</bo-card>
-		`,
-	}),
-}
-
-export const TitleAndDescription: Story = {
-	render: () => ({
-		components: { BoCard },
-		template: `
-			<bo-card
-				title="Title"
-				description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
-			/>
-		`,
-	}),
-}
-
-export const Clickable: Story = {
-	render: () => ({
-		components: { BoCard },
-		template: `
-			<bo-card
-				title="Title"
-				description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
-				clickable
-			/>
-		`,
-	}),
-}
-
-export const NoPadding: Story = {
-	render: () => ({
-		components: { BoCard, BoText },
-		template: `
-			<bo-card
-				:padding="{ top: false, right: false, bottom: false, left: false }"
-			>
-				<template #content>
-					<div class="flex items-center">
-						<div class="flex gap-2 items-center h-[100px] w-[400px] pr-4">
-							<img
-								src="https://cataas.com/cat"
-								alt="cat"
-								class="w-full h-full rounded-l-lg"
-							/>
-						</div>
-						<div class="flex gap-2 items-center pr-4">
-							<bo-text
-								text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
-								size="${BoFontSize.sm}"
-								color="${BoTextColor.secondary}"
-								font-family="${BoFontFamily.sans}"
-							/>
-						</div>
-					</div>
-				</template>
-			</bo-card>
-		`,
-	}),
-}
-
-export const WidthInPx: Story = {
-	render: () => ({
-		components: { BoCard },
-		template: `
-			<bo-card
-				title="Title"
-				description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
-				:width-in-px="300"
-			/>
-		`,
-	}),
-}
-
-export const WidthInPercent: Story = {
-	render: () => ({
-		components: { BoCard },
-		template: `
-			<bo-card
-				title="Title"
-				description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
-				:width-in-percent="50"
-			/>
-		`,
-	}),
-}
-
-export const WidthAsTailwindClass: Story = {
-	render: () => ({
-		components: { BoCard },
-		template: `
-			<bo-card
-				title="Title"
-				description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
-				width-as-tailwind-class="w-1/2"
-			/>
-		`,
-	}),
-}
diff --git a/src/components/bo_card/types.ts b/src/components/bo_card/bo_card.ts
similarity index 100%
rename from src/components/bo_card/types.ts
rename to src/components/bo_card/bo_card.ts
diff --git a/src/components/bo_card/index.ts b/src/components/bo_card/index.ts
index 3e763ba..491fa72 100644
--- a/src/components/bo_card/index.ts
+++ b/src/components/bo_card/index.ts
@@ -1,2 +1,2 @@
-export { default as BoCard } from './BoCard.vue'
-export * from './types'
+export { default as BoCard } from './BoCard.vue';
+export * from './bo_card';
diff --git a/src/components/bo_divider/BoDivider.vue b/src/components/bo_divider/BoDivider.vue
index 33082aa..6338e99 100644
--- a/src/components/bo_divider/BoDivider.vue
+++ b/src/components/bo_divider/BoDivider.vue
@@ -1,58 +1,64 @@
 <template>
-	<hr :class="dividerClasses" />
+	<span :id="dividerId" :class="dividerClasses" :style="color.style" />
 </template>
 
 <script setup lang="ts">
-import { TailwindUtils } from '@/utils'
-import { computed, toRefs } from 'vue'
-import { BoDividerType, BoDividerVariant } from './constants'
-import type { BoDividerProps } from './types'
+import { IdentityUtils, TailwindUtils } from '@/utils';
+import { computed, toRefs } from 'vue';
+import { type BoDividerProps, BoDividerVariant } from './bo_divider';
+import type { StyleConstruct } from '@/types';
 
 const props = withDefaults(defineProps<BoDividerProps>(), {
-	variant: () => BoDividerVariant.primary,
-	type: () => BoDividerType.default,
-})
+	variant: () => BoDividerVariant.default,
+});
 
-const { variant, type } = toRefs(props)
+const { id, variant, colorHex, tailwindColor } = toRefs(props);
 
-const defaultDividerClasses = /*tw*/ 'my-2 w-full'
+const defaultDividerClasses = /*tw*/ 'bo_divider my-2 w-full';
 
-const tailwindCssColorClasses = computed<string>(() => {
+const dividerId = computed<string>(() => {
+	return id.value ?? IdentityUtils.generateRandomIdWithPrefix('bo-divider');
+});
+
+const tailwindCssTypeClasses = computed<string>(() => {
 	switch (variant.value) {
-		case BoDividerVariant.primary:
-			return /*tw*/ 'border-blue-600'
-		case BoDividerVariant.secondary:
-			return /*tw*/ 'border-gray-200'
-		case BoDividerVariant.danger:
-			return /*tw*/ 'border-red-600'
-		case BoDividerVariant.warning:
-			return /*tw*/ 'border-yellow-600'
-		case BoDividerVariant.success:
-			return /*tw*/ 'border-green-600'
-		case BoDividerVariant.dark:
-			return /*tw*/ 'border-black'
+		case BoDividerVariant.dotted:
+			return /*tw*/ 'border-t border-dotted';
+		case BoDividerVariant.dashed:
+			return /*tw*/ 'border-t border-dashed';
+		case BoDividerVariant.default:
 		default:
-			return /*tw*/ 'border-gray-300'
+			return /*tw*/ 'border-t';
 	}
-})
+});
 
-const tailwindCssTypeClasses = computed<string>(() => {
-	switch (type.value) {
-		case BoDividerType.dotted:
-			return /*tw*/ 'border-t border-dotted'
-		case BoDividerType.dashed:
-			return /*tw*/ 'border-t border-dashed'
-		case BoDividerType.default:
-		default:
-			return /*tw*/ 'border-t'
+const color = computed<StyleConstruct>(() => {
+	const styles: StyleConstruct = {
+		class: '',
+		style: {},
+	};
+
+	if (colorHex.value !== undefined && tailwindColor.value === undefined) {
+		styles.style = {
+			borderColor: colorHex.value,
+		};
+		return styles;
+	}
+
+	if (tailwindColor.value !== undefined) {
+		styles.class = tailwindColor.value;
+		return styles;
 	}
-})
+
+	styles.class = 'border-gray-300';
+	return styles;
+});
 
 const dividerClasses = computed<string>(() => {
 	return TailwindUtils.merge(
 		defaultDividerClasses,
-		tailwindCssColorClasses.value,
 		tailwindCssTypeClasses.value,
-	)
-})
+		color.value.class,
+	);
+});
 </script>
diff --git a/src/components/bo_divider/__stories__/bo_divider.mdx b/src/components/bo_divider/__stories__/bo_divider.mdx
deleted file mode 100644
index b8d5a9b..0000000
--- a/src/components/bo_divider/__stories__/bo_divider.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks'
-import * as BoDividerStories from './bo_divider.stories'
-
-<Meta
-  title="Components/bo-divider"
-  component={BoDividerStories.BoDivider}
-/>
-
-# bo-divider
-
-A divider is a thin line that groups content in a list or separates sections.
-
-## Basic usage
-
-The component to use is called `bo-divider`.
-
-```html
-<bo-divider />
-```
-
-## Props
-
-- `variant` - The variant of the divider (optional)
-  - default: `BoDividerVariant.primary`
-- `type` - The type of the divider (optional)
-  - default: `BoDividerType.default`
-
-## Examples
-
-<Canvas of={BoDividerStories.Example} />
-<Controls of={BoDividerStories.Example} />
-
-## Variants
-
-To change the color of the component, you can use the predifened `BoDividerVariant` enum. The `BoDividerVariant` enum includes the following variants:
-
-- `primary`
-- `secondary`
-- `danger`
-- `warning`
-- `success`
-- `dark`
-
-<Canvas of={BoDividerStories.Variants} />
-
-## Types
-
-The `type` prop can be used to change the type of the divider. The `type` prop should be a member of the `BoDividerType` enum.
-
-- `default`
-- `dotted`
-- `dashed`
-
-<Canvas of={BoDividerStories.Types} />
diff --git a/src/components/bo_divider/__stories__/bo_divider.stories.ts b/src/components/bo_divider/__stories__/bo_divider.stories.ts
deleted file mode 100644
index b56b981..0000000
--- a/src/components/bo_divider/__stories__/bo_divider.stories.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { BoDivider, BoDividerType, BoDividerVariant } from '@/components/bo_divider'
-import BoText from '@/components/bo_text/BoText.vue'
-import { StorybookUtils } from '@/utils'
-import type { Meta, StoryObj } from '@storybook/vue3'
-
-const meta = {
-	title: 'Components/bo-divider',
-	component: BoDivider,
-	argTypes: {
-		variant: {
-			description: 'The variant of the divider',
-			control: { type: 'select' },
-			options: Object.values(BoDividerVariant),
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-				type: {
-					summary: 'BoDividerVariant',
-					detail: StorybookUtils.stringEnumFormatter(BoDividerVariant, 'BoDividerVariant'),
-				},
-			},
-			defaultValue: BoDividerVariant.primary,
-		},
-		type: {
-			description: 'The type of the divider',
-			control: { type: 'select' },
-			options: Object.values(BoDividerType),
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-				type: {
-					summary: 'BoDividerType',
-					detail: StorybookUtils.stringEnumFormatter(BoDividerType, 'BoDividerType'),
-				},
-			},
-			defaultValue: BoDividerType.default,
-		},
-	},
-} satisfies Meta<typeof BoDivider>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Example: Story = {
-	render: (args) => ({
-		components: { BoDivider },
-		setup() {
-			return { args }
-		},
-		template: `
-			<div class="flex flex-col gap-4 bg-white p-4">
-				<bo-divider v-bind="args" />
-			</div>
-		`,
-	}),
-	args: {
-		variant: BoDividerVariant.primary,
-		type: BoDividerType.default,
-	},
-}
-
-export const Variants: Story = {
-	render: (args) => ({
-		components: { BoDivider },
-		setup() {
-			const variants = Object.values(BoDividerVariant)
-			return { variants, args }
-		},
-		template: `
-			<div class="flex flex-col gap-4 bg-white p-4">
-				<bo-divider v-bind="args" />
-				<span class="text-sm text-gray-500 font-medium">default</span>
-
-				<bo-divider v-bind="args" :variant="variants[1]" />
-				<span class="text-sm text-gray-500 font-medium">{{ variants[1] }}</span>
-
-				<bo-divider v-bind="args" :variant="variants[2]" />
-				<span class="text-sm text-gray-500 font-medium">{{ variants[2] }}</span>
-
-				<bo-divider v-bind="args" :variant="variants[3]" />
-				<span class="text-sm text-gray-500 font-medium">{{ variants[3] }}</span>
-
-				<bo-divider v-bind="args" :variant="variants[4]" />
-				<span class="text-sm text-gray-500 font-medium">{{ variants[4] }}</span>
-			</div>
-		`,
-	}),
-	args: {
-		variant: BoDividerVariant.primary,
-		type: BoDividerType.default,
-	},
-}
-
-export const Types: Story = {
-	render: (args) => ({
-		components: { BoDivider, BoText },
-		setup() {
-			const types = Object.values(BoDividerType)
-			return { types, ...args }
-		},
-		template: `
-			<div class="flex flex-col gap-4 bg-white p-4">
-				<span v-for="type in types" :key="type">
-					<bo-divider :type="type" />
-					<span class="text-sm text-gray-500 font-medium">{{ type }}</span>
-				</span>
-			</div>
-		`,
-	}),
-	args: {},
-}
diff --git a/src/components/bo_divider/bo_divider.ts b/src/components/bo_divider/bo_divider.ts
new file mode 100644
index 0000000..5912106
--- /dev/null
+++ b/src/components/bo_divider/bo_divider.ts
@@ -0,0 +1,12 @@
+export type BoDividerProps = {
+	id?: string;
+	variant?: BoDividerVariant;
+	colorHex?: string;
+	tailwindColor?: string;
+};
+
+export enum BoDividerVariant {
+	default = 'default',
+	dotted = 'dotted',
+	dashed = 'dashed',
+}
diff --git a/src/components/bo_divider/constants.ts b/src/components/bo_divider/constants.ts
deleted file mode 100644
index f2a713c..0000000
--- a/src/components/bo_divider/constants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export enum BoDividerVariant {
-	primary = 'primary',
-	secondary = 'secondary',
-	danger = 'danger',
-	warning = 'warning',
-	success = 'success',
-	dark = 'dark',
-}
-
-export enum BoDividerType {
-	default = 'default',
-	dotted = 'dotted',
-	dashed = 'dashed',
-}
diff --git a/src/components/bo_divider/index.ts b/src/components/bo_divider/index.ts
index 12b80ab..a8f5ebe 100644
--- a/src/components/bo_divider/index.ts
+++ b/src/components/bo_divider/index.ts
@@ -1,3 +1,2 @@
-export { default as BoDivider } from './BoDivider.vue'
-export * from './constants'
-export * from './types'
+export { default as BoDivider } from './BoDivider.vue';
+export * from './bo_divider';
diff --git a/src/components/bo_divider/types.ts b/src/components/bo_divider/types.ts
deleted file mode 100644
index 6e794d0..0000000
--- a/src/components/bo_divider/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { BoDividerType, BoDividerVariant } from './constants'
-
-export type BoDividerProps = {
-	variant?: BoDividerVariant
-	type?: BoDividerType
-}
diff --git a/src/components/bo_modal/BoSlotModal.vue b/src/components/bo_modal/BoSlotModal.vue
index 2f4683a..0b65179 100644
--- a/src/components/bo_modal/BoSlotModal.vue
+++ b/src/components/bo_modal/BoSlotModal.vue
@@ -41,13 +41,13 @@
 				</div>
 				<!-- Modal body -->
 				<div class="bo-slot-modal__body-slot w-full">
-					<bo-divider v-if="borderedHeader" :variant="BoDividerVariant.secondary" />
+					<bo-divider v-if="borderedHeader" />
 					<slot name="body" />
 				</div>
 				<!-- Modal footer -->
 				<div :class="footerContainerClasses">
 					<span class="bo-slot-modal__footer-slot w-full">
-						<bo-divider v-if="borderedFooter" :variant="BoDividerVariant.secondary" />
+						<bo-divider v-if="borderedFooter" />
 						<slot name="footer" />
 					</span>
 				</div>