From de6416efbda722a07d3316cbb5d723d777c475cc Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 28 Apr 2022 16:01:50 -0400
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20non-interactive=20?=
 =?UTF-8?q?rose=20toolbar=20info=20component=20(#1075)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/rose/toolbar/info/index.hbs    |  3 +++
 .../rose/toolbar/info/index.stories.mdx       | 25 ++++++++++++++++++
 .../rose/components/toolbar/_index.scss       |  1 +
 .../styles/rose/components/toolbar/_info.scss | 17 ++++++++++++
 .../rose/app/components/rose/toolbar/info.js  |  1 +
 addons/rose/package.json                      |  3 ++-
 .../components/rose/toolbar/info-test.js      | 26 +++++++++++++++++++
 7 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 addons/rose/addon/components/rose/toolbar/info/index.hbs
 create mode 100644 addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/toolbar/_info.scss
 create mode 100644 addons/rose/app/components/rose/toolbar/info.js
 create mode 100644 addons/rose/tests/integration/components/rose/toolbar/info-test.js

diff --git a/addons/rose/addon/components/rose/toolbar/info/index.hbs b/addons/rose/addon/components/rose/toolbar/info/index.hbs
new file mode 100644
index 000000000..dc6c7f517
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/info/index.hbs
@@ -0,0 +1,3 @@
+<span class='rose-toolbar-info'>
+  {{yield}}
+</span>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
new file mode 100644
index 000000000..e12b7c5cf
--- /dev/null
+++ b/addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
@@ -0,0 +1,25 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Toolbar|Info" component="Toolbar Info" />
+
+# Toolbar Info
+
+Used to display non-interactive information in a toolbar.
+
+```htmlbars
+<Rose::Toolbar>
+  <Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
+</Rose::Toolbar>
+```
+
+<Preview>
+  <Story name="Toolbar Info">{{
+    template: hbs`
+    <Rose::Toolbar>
+      <Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
+    </Rose::Toolbar>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_index.scss b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
index c72d1654c..49ae314e2 100644
--- a/addons/rose/addon/styles/rose/components/toolbar/_index.scss
+++ b/addons/rose/addon/styles/rose/components/toolbar/_index.scss
@@ -1 +1,2 @@
+@import 'info';
 @import 'toolbar';
diff --git a/addons/rose/addon/styles/rose/components/toolbar/_info.scss b/addons/rose/addon/styles/rose/components/toolbar/_info.scss
new file mode 100644
index 000000000..7565bdd86
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/toolbar/_info.scss
@@ -0,0 +1,17 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+@use '../../utilities/type';
+
+.rose-toolbar {
+  .rose-toolbar-info {
+    @include type.type(button);
+    color: var(--ui-gray);
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+    white-space: nowrap;
+    overflow: hidden;
+    $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
+    padding: $yPadding sizing.rems(m) $yPadding sizing.rems(l);
+  }
+}
diff --git a/addons/rose/app/components/rose/toolbar/info.js b/addons/rose/app/components/rose/toolbar/info.js
new file mode 100644
index 000000000..18fc673e1
--- /dev/null
+++ b/addons/rose/app/components/rose/toolbar/info.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar/info';
diff --git a/addons/rose/package.json b/addons/rose/package.json
index 43a537553..dfed2ed32 100644
--- a/addons/rose/package.json
+++ b/addons/rose/package.json
@@ -16,7 +16,8 @@
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint .",
     "lint:sass": "sass-lint -v -q",
-    "format": "npm run format:js && npm run format:sass",
+    "format": "npm-run-all format:*",
+    "format:hbs": "prettier --write 'addon/**/*.hbs'",
     "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
     "format:sass": "prettier --write addon/**/*.scss",
     "lint:js:fix": "eslint . --fix",
diff --git a/addons/rose/tests/integration/components/rose/toolbar/info-test.js b/addons/rose/tests/integration/components/rose/toolbar/info-test.js
new file mode 100644
index 000000000..90837d5ee
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/toolbar/info-test.js
@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/toolbar/info', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Rose::Toolbar::Info />`);
+
+    assert.dom(this.element).hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <Rose::Toolbar::Info>
+        template block text
+      </Rose::Toolbar::Info>
+    `);
+
+    assert.dom(this.element).hasText('template block text');
+  });
+});