feat: 🎸 add non-interactive rose toolbar info component (#1075)

addons/rose/addon/components/rose/toolbar/info/index.hbs

@@ -0,0 +1,3 @@
+<span class='rose-toolbar-info'>
+  {{yield}}
+</span>

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>

addons/rose/addon/styles/rose/components/toolbar/_index.scss

@@ -1 +1,2 @@
+@import 'info';
 @import 'toolbar';

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);
+  }
+}

addons/rose/app/components/rose/toolbar/info.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/toolbar/info';

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",

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');
+  });
+});