From d91295a5f1b0771a6b6525c51ef5e7a73033fa14 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 18 Aug 2021 15:01:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20separators?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../separators/Separator.stories.jsx          | 37 +++++++++++++++++++
 src/components/separators/Separator.tsx       | 29 +++++++++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 src/components/separators/Separator.stories.jsx
 create mode 100644 src/components/separators/Separator.tsx

diff --git a/src/components/separators/Separator.stories.jsx b/src/components/separators/Separator.stories.jsx
new file mode 100644
index 0000000..73f4831
--- /dev/null
+++ b/src/components/separators/Separator.stories.jsx
@@ -0,0 +1,37 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Separator } from "./Separator"
+
+
+export default {
+    component: Separator,
+    title: "Separator/Separator",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        },
+    },
+}
+
+
+export const Regular = props => (
+    <Separator {...props}/>
+)
+Regular.args = {
+    weight: "regular",
+}
+
+
+export const Heavy = Regular.bind({})
+Heavy.args = {
+    weight: "heavy",
+}
+
+
+export const Light = Regular.bind({})
+Light.args = {
+    weight: "light",
+}
+
diff --git a/src/components/separators/Separator.tsx b/src/components/separators/Separator.tsx
new file mode 100644
index 0000000..fc5026c
--- /dev/null
+++ b/src/components/separators/Separator.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface SeparatorProps {
+    weight?: "light" | "regular" | "heavy",
+
+    [props: string]: any,
+}
+
+
+const WEIGHT_CLASSES = {
+    light: "separator-light",
+    regular: "",
+    heavy: "separator-heavy",
+}
+
+
+export function Separator({weight = "regular", ...props}: SeparatorProps): JSX.Element {
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "separator", WEIGHT_CLASSES[weight])
+
+    return (
+        <BaseElement kind={"hr"} {...props}/>
+    )
+}