[FRNT-371] Implement Separator atom (#92)

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';

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>;

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 |