From b1947c33fcf732f52ba7a84b7580db11ee2c7ded Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Tue, 9 Jun 2020 15:39:05 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20simple=20separato?=
 =?UTF-8?q?r=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/components/rose/separator.js   |  7 ++++++
 .../components/rose/separator.stories.mdx     | 23 +++++++++++++++++++
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/_separator.scss    |  8 +++++++
 .../templates/components/rose/separator.hbs   |  1 +
 addons/rose/app/components/rose/separator.js  |  1 +
 .../components/rose/separator-test.js         | 14 +++++++++++
 7 files changed, 55 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/separator.js
 create mode 100644 addons/rose/addon/components/rose/separator.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/_separator.scss
 create mode 100644 addons/rose/addon/templates/components/rose/separator.hbs
 create mode 100644 addons/rose/app/components/rose/separator.js
 create mode 100644 addons/rose/tests/integration/components/rose/separator-test.js

diff --git a/addons/rose/addon/components/rose/separator.js b/addons/rose/addon/components/rose/separator.js
new file mode 100644
index 000000000..e23c4f204
--- /dev/null
+++ b/addons/rose/addon/components/rose/separator.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/separator';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/separator.stories.mdx b/addons/rose/addon/components/rose/separator.stories.mdx
new file mode 100644
index 000000000..8849d71d7
--- /dev/null
+++ b/addons/rose/addon/components/rose/separator.stories.mdx
@@ -0,0 +1,23 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Separator" component="Separator" />
+
+# Separator
+
+A simple styled `<hr>` element.
+
+<Preview>
+  <Story name="Basic Separator">{{
+    template: hbs`
+      <Rose::Separator />
+    `,
+    context: {}
+  }}</Story>
+</Preview>
+
+```htmlbars
+<Rose::Separator />
+```
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index f8ba54fb1..bebf8b7de 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -5,4 +5,5 @@
 @import 'notification';
 @import 'card';
 @import 'page-header';
+@import 'separator';
 @import 'nav';
diff --git a/addons/rose/addon/styles/rose/components/_separator.scss b/addons/rose/addon/styles/rose/components/_separator.scss
new file mode 100644
index 000000000..90f665697
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/_separator.scss
@@ -0,0 +1,8 @@
+@use '../variables/sizing';
+
+.rose-separator {
+  background-color: var(--ui-gray-subtler-3);
+  border: 0;
+  height: sizing.rems(xxxxs);
+  margin: sizing.rems(l) 0;
+}
diff --git a/addons/rose/addon/templates/components/rose/separator.hbs b/addons/rose/addon/templates/components/rose/separator.hbs
new file mode 100644
index 000000000..9571ef081
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/separator.hbs
@@ -0,0 +1 @@
+<hr class="rose-separator" />
diff --git a/addons/rose/app/components/rose/separator.js b/addons/rose/app/components/rose/separator.js
new file mode 100644
index 000000000..2f9972ea3
--- /dev/null
+++ b/addons/rose/app/components/rose/separator.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/separator';
diff --git a/addons/rose/tests/integration/components/rose/separator-test.js b/addons/rose/tests/integration/components/rose/separator-test.js
new file mode 100644
index 000000000..3d786861c
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/separator-test.js
@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/separator', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Separator />`);
+    assert.ok(find('.rose-separator'));
+  });
+});