From e6b6f6a7612f7723595fca43c83436c35972eb60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Tue, 6 Jun 2017 22:22:10 +0100
Subject: [PATCH] feat(joyent-ui-toolkit): implement Breadcrumb

---
 packages/ui-toolkit/src/breadcrumb/index.js | 13 +++++++++
 packages/ui-toolkit/src/breadcrumb/item.js  | 31 +++++++++++++++++++++
 packages/ui-toolkit/src/breadcrumb/usage.md | 11 ++++++++
 packages/ui-toolkit/src/index.js            |  1 +
 packages/ui-toolkit/styleguide.config.js    |  1 +
 5 files changed, 57 insertions(+)
 create mode 100644 packages/ui-toolkit/src/breadcrumb/index.js
 create mode 100644 packages/ui-toolkit/src/breadcrumb/item.js
 create mode 100644 packages/ui-toolkit/src/breadcrumb/usage.md

diff --git a/packages/ui-toolkit/src/breadcrumb/index.js b/packages/ui-toolkit/src/breadcrumb/index.js
new file mode 100644
index 00000000..ae4ce6d9
--- /dev/null
+++ b/packages/ui-toolkit/src/breadcrumb/index.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Row } from 'react-styled-flexboxgrid';
+
+/**
+ * @example ./usage.md
+ */
+export default ({ children, ...rest }) => (
+  <Row name="breadcrum" {...rest}>
+    {children}
+  </Row>
+);
+
+export { default as Item } from './item';
diff --git a/packages/ui-toolkit/src/breadcrumb/item.js b/packages/ui-toolkit/src/breadcrumb/item.js
new file mode 100644
index 00000000..3902fe42
--- /dev/null
+++ b/packages/ui-toolkit/src/breadcrumb/item.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+import remcalc from 'remcalc';
+
+import typography from '../typography';
+import { H2 } from '../text/headings';
+
+const Name = H2.extend`
+  ${typography.normal};
+  color: ${props => props.theme.primary};
+  margin: ${remcalc(20)} 0 ${remcalc(18)} 0;
+  display: inline-block;
+`;
+
+const Arrow = styled.div`
+  border: solid ${props => props.theme.text};
+  border-width: 0 ${remcalc(2)} ${remcalc(2)} 0;
+  display: inline-block;
+  padding: ${remcalc(2)};
+  transform: rotate(-45deg);
+  margin: ${remcalc(3)} ${remcalc(10)} ${remcalc(3)} ${remcalc(10)};
+`;
+
+export default ({ children, ...rest }) => (
+  <div>
+    <Name name="breadcrum-item" {...rest}>
+      {children}
+    </Name>
+    <Arrow />
+  </div>
+);
diff --git a/packages/ui-toolkit/src/breadcrumb/usage.md b/packages/ui-toolkit/src/breadcrumb/usage.md
new file mode 100644
index 00000000..3f28bcaf
--- /dev/null
+++ b/packages/ui-toolkit/src/breadcrumb/usage.md
@@ -0,0 +1,11 @@
+```
+const Breadcrumb = require('./index.js').default;
+const Item = require('./item.js').default;
+
+<Breadcrumb>
+  <Item>Home</Item>
+  <Item>Warp Records Blog</Item>
+  <Item>Services</Item>
+  <Item>Nginx</Item>
+</Breadcrumb>
+```
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 1761b0f6..5e7dcc86 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/packages/ui-toolkit/src/index.js
@@ -2,6 +2,7 @@ export { default as Anchor } from './anchor';
 export { default as Base, global } from './base';
 export { default as Baseline } from './baseline';
 export { default as Button } from './button';
+export { default as Breadcrumb, Item as BreadcrumbItem } from './breadcrumb';
 export { default as calc } from './calc';
 export { default as Label } from './label';
 export { Ul, Li } from './list';
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index 33c66f87..501115c3 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -54,6 +54,7 @@ module.exports = {
       components: () => [
         'src/anchor/index.js',
         'src/button/index.js',
+        'src/breadcrumb/index.js',
         'src/card/card.js',
         'src/form/input.js',
         'src/form/number-input.js',