From e769759cf8db7fdc936a094c26304f1f9bf36c65 Mon Sep 17 00:00:00 2001
From: Tatiana Cherednichenko <tatinacher@gmail.com>
Date: Wed, 21 Apr 2021 10:20:16 +0300
Subject: [PATCH] feat: implement Separator atom

---
 src/ui/atoms/index.ts            |  1 +
 src/ui/atoms/separator/index.tsx | 12 ++++++++++
 src/ui/atoms/separator/usage.mdx | 41 ++++++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 src/ui/atoms/separator/index.tsx
 create mode 100644 src/ui/atoms/separator/usage.mdx

diff --git a/src/ui/atoms/index.ts b/src/ui/atoms/index.ts
index a57d6c67..274fcf68 100644
--- a/src/ui/atoms/index.ts
+++ b/src/ui/atoms/index.ts
@@ -9,6 +9,7 @@ export { Input } from './input';
 export { Label } from './label';
 export { List } from './list';
 export { Notification } from './notification';
+export { Separator } from './separator';
 export { Surface } from './surface';
 export { Text } from './text';
 export { TextArea } from './text-area';
diff --git a/src/ui/atoms/separator/index.tsx b/src/ui/atoms/separator/index.tsx
new file mode 100644
index 00000000..5ac58ca4
--- /dev/null
+++ b/src/ui/atoms/separator/index.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { Variant } from 'lib/types';
+
+const map = (properties: Variant) => ({
+  'data-variant': properties.variant || 'default',
+});
+
+export const Separator = styled.div.attrs(map)`
+  width: 100%;
+  border-top: var(--woly-border-width) solid var(--woly-canvas-disabled);
+  margin: calc(3px - (var(--woly-border-width) / 2)) 0;
+`;
diff --git a/src/ui/atoms/separator/usage.mdx b/src/ui/atoms/separator/usage.mdx
new file mode 100644
index 00000000..7046b6a3
--- /dev/null
+++ b/src/ui/atoms/separator/usage.mdx
@@ -0,0 +1,41 @@
+---
+name: separator
+category: atoms
+package: 'woly'
+---
+
+import { Playground, block } from 'box-styles'
+import { Heading, Input, Separator } from 'ui'
+
+`Sepatator` is a line that divides blocks or content.
+
+### Example
+
+<Playground direction="vertical">
+  <div style={{ width: '300px' }}>
+    <div style={{ margin: '18px 0' }}>
+      <Heading size={2}>User List</Heading>
+    </div>
+    <Separator variant="primary" />
+    <Input
+      type="text"
+      name="name"
+      placeholder="Search"
+      onChange={() => console.info('On input change')}
+      variant="primary"
+      style={{ margin: '10px 0' }}
+    />
+  </div>
+</Playground>
+
+### Kinds
+
+| Name        | Description    |
+| ----------- | -------------- |
+| `Separator` | Base separator |
+
+### Props
+
+| Name      | Type     | Default     | Description                               |
+| --------- | -------- | ----------- | ----------------------------------------- |
+| `variant` | `string` | `'default'` | Variant prop to style Separator component |