From 46ef56d93b37d81dc0431271311ca4b354a5973f Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 15:15:10 -0400
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20breadcrumbs?=
 =?UTF-8?q?=20component=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Breadcrumbs rose component provides stylized links as breadcrumbs.
---
 .../addon/components/rose/nav/breadcrumbs.js  | 10 +++++++
 .../rose/nav/breadcrumbs.stories.mdx          | 27 +++++++++++++++++
 .../rose/components/nav/_breadcrumbs.scss     | 26 ++++++++++++++++
 .../styles/rose/components/nav/_index.scss    |  1 +
 .../components/rose/nav/breadcrumbs.hbs       |  5 ++++
 .../app/components/rose/nav/breadcrumbs.js    |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 30 +++++--------------
 .../tests/dummy/app/templates/playground.hbs  | 24 +++++++++++++++
 .../components/rose/nav/breadcrumbs-test.js   | 26 ++++++++++++++++
 9 files changed, 127 insertions(+), 23 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/nav/breadcrumbs.js
 create mode 100644 addons/rose/addon/components/rose/nav/breadcrumbs.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
 create mode 100644 addons/rose/addon/templates/components/rose/nav/breadcrumbs.hbs
 create mode 100644 addons/rose/app/components/rose/nav/breadcrumbs.js
 create mode 100644 addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js

diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs.js b/addons/rose/addon/components/rose/nav/breadcrumbs.js
new file mode 100644
index 000000000..0f915d890
--- /dev/null
+++ b/addons/rose/addon/components/rose/nav/breadcrumbs.js
@@ -0,0 +1,10 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/nav/breadcrumbs';
+
+/**
+ * A navigation component with links.
+ */
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/nav/breadcrumbs.stories.mdx b/addons/rose/addon/components/rose/nav/breadcrumbs.stories.mdx
new file mode 100644
index 000000000..5d1d00f4c
--- /dev/null
+++ b/addons/rose/addon/components/rose/nav/breadcrumbs.stories.mdx
@@ -0,0 +1,27 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Nav|Breadcrumbs" component="Nav/Breadcrumbs" />
+
+# Breadcrumbs Navigation
+
+A breadcrumbs component with links as crumbs.
+
+```html
+<Rose::Nav::Breadcrumbs as |breadcrumbs|>
+  <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
+  <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
+</Rose::Nav::Breadcrumbs>
+```
+
+<Preview>
+  <Story name="Basic Breadcrumbs">{{
+    template: hbs`
+      <Rose::Nav::Breadcrumbs as |breadcrumbs|>
+        <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
+        <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
+      </Rose::Nav::Breadcrumbs>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
new file mode 100644
index 000000000..661b1fa0f
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
@@ -0,0 +1,26 @@
+@use '../../variables/sizing';
+@use '../../utilities/type';
+
+.rose-nav-breadcrumbs {
+  @include type.type(s, normal);
+
+  .rose-nav-breadcrumbs-link {
+    --color: var(--ui-gray);
+    color: var(--color);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      --color: var(--action);
+    }
+
+    &:after {
+      content: '\002F'; // "/"
+      margin-left: sizing.rems(xxs);
+    }
+
+    &:last-child:after {
+      content: '';
+    }
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/nav/_index.scss b/addons/rose/addon/styles/rose/components/nav/_index.scss
index 4a208cbee..a9d88d3cc 100644
--- a/addons/rose/addon/styles/rose/components/nav/_index.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_index.scss
@@ -1,2 +1,3 @@
 @import 'sidebar';
 @import 'tabs';
+@import 'breadcrumbs';
diff --git a/addons/rose/addon/templates/components/rose/nav/breadcrumbs.hbs b/addons/rose/addon/templates/components/rose/nav/breadcrumbs.hbs
new file mode 100644
index 000000000..287e2cba3
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/nav/breadcrumbs.hbs
@@ -0,0 +1,5 @@
+<nav ...attributes class="rose-nav-breadcrumbs" aria-label="breadcrumbs">
+  {{yield (hash
+    link=(component "link-to" class="rose-nav-breadcrumbs-link")
+  )}}
+</nav>
diff --git a/addons/rose/app/components/rose/nav/breadcrumbs.js b/addons/rose/app/components/rose/nav/breadcrumbs.js
new file mode 100644
index 000000000..bd57614dc
--- /dev/null
+++ b/addons/rose/app/components/rose/nav/breadcrumbs.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/nav/breadcrumbs';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 3554ea5f2..bb8ae24db 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,23 +1,7 @@
-<Rose::Table as |table|>
-  <table.header as |header|>
-    <header.row as |row|>
-      <row.cell>Address</row.cell>
-      <row.cell>Host Set</row.cell>
-      <row.cell>Name</row.cell>
-      <row.cell>Description</row.cell>
-    </header.row>
-  </table.header>
-  <table.body as |body|>
-    <body.row as |row|>
-      <row.cell>1.1.1.1</row.cell>
-      <row.cell>host-set-1, host-set-2</row.cell>
-      <row.cell>optional name</row.cell>
-      <row.cell>description</row.cell>
-    </body.row>
-  </table.body>
-  <table.footer as |footer|>
-    <footer.row as |row|>
-      <row.cell>Footer</row.cell>
-    </footer.row>
-  </table.footer>
-</Rose::Table>
+<Rose::Nav::Breadcrumbs as |breadcrumbs|>
+  <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
+  <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
+  <breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
+  <breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
+  <breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
+</Rose::Nav::Breadcrumbs>
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
index 576a37395..d12d03f09 100644
--- a/addons/rose/tests/dummy/app/templates/playground.hbs
+++ b/addons/rose/tests/dummy/app/templates/playground.hbs
@@ -205,5 +205,29 @@
     <Rose::Card::Link @title="I'm a card" />
     <Rose::Card::Link @title="I'm a card" @description="I'm a description" />
     <Rose::Card::Link @title="I'm a card" @description="I'm a description" @subtitle="I'm a subtitle"/>
+
+    <Rose::Table as |table|>
+      <table.header as |header|>
+        <header.row as |row|>
+          <row.cell>Address</row.cell>
+          <row.cell>Host Set</row.cell>
+          <row.cell>Name</row.cell>
+          <row.cell>Description</row.cell>
+        </header.row>
+      </table.header>
+      <table.body as |body|>
+        <body.row as |row|>
+          <row.cell>1.1.1.1</row.cell>
+          <row.cell>host-set-1, host-set-2</row.cell>
+          <row.cell>optional name</row.cell>
+          <row.cell>description</row.cell>
+        </body.row>
+      </table.body>
+      <table.footer as |footer|>
+        <footer.row as |row|>
+          <row.cell>Footer</row.cell>
+        </footer.row>
+      </table.footer>
+    </Rose::Table>
   </global.body>
 </Rose::Layout::Global>
diff --git a/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js b/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js
new file mode 100644
index 000000000..1d8204eb4
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/nav/breadcrumbs-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/nav/breadcrumbs', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Nav::Breadcrumbs />`);
+    assert.ok(find('.rose-nav-breadcrumbs'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Nav::Breadcrumbs id="breadcrumbs"/>`);
+    assert.ok(find('#breadcrumbs'));
+  });
+
+  test('it renders with breadcrumb links', async function (assert) {
+    await render(hbs`<Rose::Nav::Breadcrumbs as |breadcrumbs|>
+      <breadcrumbs.link @route="index" />
+      <breadcrumbs.link @route="index" />
+    </Rose::Nav::Breadcrumbs>`);
+    assert.equal(findAll('.rose-nav-breadcrumbs-link').length, 2);
+  });
+});

From 447336a0cb4b5303505dc66bc37d7c1a1ecf15ed Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 16:25:59 -0400
Subject: [PATCH 2/3] =?UTF-8?q?style:=20=F0=9F=92=84=20Update=20breadcrumb?=
 =?UTF-8?q?=20separator=20margin=20to=20xs/8px/0.5rem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
index 661b1fa0f..7264673fd 100644
--- a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
@@ -16,7 +16,7 @@
 
     &:after {
       content: '\002F'; // "/"
-      margin-left: sizing.rems(xxs);
+      margin-left: sizing.rems(xs);
     }
 
     &:last-child:after {

From 0d7fcef97dbc854bbab2b47db7c4832b1ef80d97 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 9 Jun 2020 17:02:14 -0400
Subject: [PATCH 3/3] =?UTF-8?q?style:=20=F0=9F=92=84=20Update=20breadcrumb?=
 =?UTF-8?q?s=20separator=20margin=20and=20hover=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/rose/components/nav/_breadcrumbs.scss     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
index 7264673fd..c07156279 100644
--- a/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
+++ b/addons/rose/addon/styles/rose/components/nav/_breadcrumbs.scss
@@ -3,6 +3,8 @@
 
 .rose-nav-breadcrumbs {
   @include type.type(s, normal);
+  display: flex;
+  flex-wrap: wrap;
 
   .rose-nav-breadcrumbs-link {
     --color: var(--ui-gray);
@@ -12,14 +14,18 @@
 
     &:hover {
       --color: var(--action);
+
+      &::after {
+        color: var(--ui-gray);
+      }
     }
 
-    &:after {
+    &::after {
       content: '\002F'; // "/"
-      margin-left: sizing.rems(xs);
+      margin: 0 sizing.rems(xs);
     }
 
-    &:last-child:after {
+    &:last-child::after {
       content: '';
     }
   }