From 9b5809a1d51d1eb90d7334b76f280aabcaa6eeb4 Mon Sep 17 00:00:00 2001
From: Jerko Steiner <jerko.steiner@gmail.com>
Date: Mon, 25 Mar 2019 17:32:12 +0800
Subject: [PATCH] Add Breadcrumbs

---
 .../src/breadcrumbs/Breadcrumbs.test.tsx      | 32 +++++++++++++++++++
 .../client/src/breadcrumbs/Breadcrumbs.tsx    | 28 ++++++++++++++++
 packages/client/src/breadcrumbs/index.ts      |  1 +
 3 files changed, 61 insertions(+)
 create mode 100644 packages/client/src/breadcrumbs/Breadcrumbs.test.tsx
 create mode 100644 packages/client/src/breadcrumbs/Breadcrumbs.tsx
 create mode 100644 packages/client/src/breadcrumbs/index.ts

diff --git a/packages/client/src/breadcrumbs/Breadcrumbs.test.tsx b/packages/client/src/breadcrumbs/Breadcrumbs.test.tsx
new file mode 100644
index 0000000..3f36513
--- /dev/null
+++ b/packages/client/src/breadcrumbs/Breadcrumbs.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import {Breadcrumbs} from './Breadcrumbs'
+import {TestUtils} from '../test-utils'
+import {MemoryRouter} from 'react-router-dom'
+
+const t = new TestUtils()
+
+describe('Breadcrumbs', () => {
+
+  describe('render', () => {
+    it('renders', () => {
+      const {node} = t.render(
+        <MemoryRouter>
+          <Breadcrumbs
+            links={[{
+              name: 'one',
+              to: '/one',
+            }, {
+              name: 'two',
+              to: '/two',
+            }]}
+            current='three'
+          />
+        </MemoryRouter>,
+      )
+      expect(node.innerHTML).toMatch(/href="\/one"/)
+      expect(node.innerHTML).toMatch(/href="\/two"/)
+      expect(node.innerHTML).toMatch(/three/)
+    })
+  })
+
+})
diff --git a/packages/client/src/breadcrumbs/Breadcrumbs.tsx b/packages/client/src/breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 0000000..01d9afe
--- /dev/null
+++ b/packages/client/src/breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import {Breadcrumb, BreadcrumbItem} from 'bloomer'
+import {Link} from 'react-router-dom'
+
+export interface IBreadcrumbsProps {
+  links: Array<{
+    name: string
+    to: string
+  }>
+  current: string
+}
+
+export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
+  render() {
+    return (
+      <Breadcrumb>
+        <ul>
+          {this.props.links.map((link, i) => (
+            <BreadcrumbItem key={i}>
+              <Link to={link.to}>{link.name}</Link>
+            </BreadcrumbItem>
+          ))}
+          <BreadcrumbItem>{this.props.current}</BreadcrumbItem>
+        </ul>
+      </Breadcrumb>
+    )
+  }
+}
diff --git a/packages/client/src/breadcrumbs/index.ts b/packages/client/src/breadcrumbs/index.ts
new file mode 100644
index 0000000..f35988d
--- /dev/null
+++ b/packages/client/src/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from './Breadcrumbs'