From 91e663bba6f0042a9fcd130358fd4950ce5b18d5 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 | 21 ++++++++++++++++
 src/ui/atoms/separator/usage.mdx | 43 ++++++++++++++++++++++++++++++++
 3 files changed, 65 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..0c509939
--- /dev/null
+++ b/src/ui/atoms/separator/index.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import styled, { StyledComponent } from 'styled-components';
+import { Variant } from 'lib/types';
+
+const SeparatorBase: React.FC<{ className: string } & Variant> = ({ className, variant }) => (
+  <div className={className} data-variant={variant}>
+    <div data-line></div>
+  </div>
+);
+
+export const Separator = styled(SeparatorBase)`
+  --local-padding: 3px;
+
+  width: 100%;
+  padding: calc(var(--local-padding) - (var(--woly-border-width) / 2)) 0;
+
+  [data-line] {
+    height: var(--woly-border-width);
+    background: var(--woly-canvas-disabled);
+  }
+` as StyledComponent<'div', Record<string, unknown>, Variant>;
diff --git a/src/ui/atoms/separator/usage.mdx b/src/ui/atoms/separator/usage.mdx
new file mode 100644
index 00000000..affcb90e
--- /dev/null
+++ b/src/ui/atoms/separator/usage.mdx
@@ -0,0 +1,43 @@
+---
+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" />
+    <div style={{ margin: '18px 0' }}>
+      <Input
+        type="text"
+        name="name"
+        placeholder="Search"
+        onChange={() => console.info('On input change')}
+        variant="primary"
+        style={{ margin: '10px 0' }}
+      />
+    </div>
+  </div>
+</Playground>
+
+### Kinds
+
+| Name        | Description    |
+| ----------- | -------------- |
+| `Separator` | Base separator |
+
+### Props
+
+| Name      | Type     | Default     | Description                               |
+| --------- | -------- | ----------- | ----------------------------------------- |
+| `variant` | `string` | `'default'` | Variant prop to style Separator component |