chore: 🤖 Add badge component

addons/rose/addon/components/rose/badge.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/badge';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/badge.stories.mdx

@@ -0,0 +1,77 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Badge" component="Badge" />
+
+# Badge
+
+A badge component that supports icons and predefined styles.
+When style definition isn't supplied, a default style will be supplied.
+
+Styles: outline, light, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline
+
+```html
+<Rose::Badge @style="outline" @icon="user-organization"/>
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`<Rose::Badge
+      @style={{style}}
+      @icon={{icon}}>
+      {{text}}
+      </Rose::Badge>`,
+    context: {
+      text: text('text', 'Badge'),
+      style: select('style', {
+          'none': 'none',
+          'outline': 'outline',
+          'light': 'light',
+          'dark': 'dark',
+          'informational': 'informational',
+          'informational-outline': 'informational-outline',
+          'success': 'success',
+          'success-outline': 'success-outline',
+          'alert': 'alert',
+          'alert-outline': 'alert-outline',
+          'error': 'error',
+          'error-outline': 'error-outline',
+          'warning': 'warning',
+          'warning-outline': 'warning-outline',
+        },
+        'none'
+      ),
+      icon: select('icon', {
+          'user-organization': 'user-organization',
+          'partner': 'partner',
+          'gift-fill': 'gift-fill',
+        },
+        'user-organization'
+      ),
+    }
+  }}</Story>
+</Preview>
+
+<Preview>
+  <Story name="Style legend">{{
+    template: hbs`
+    <Rose::Badge>default style</Rose::Badge>
+    <Rose::Badge @style="outline">outline</Rose::Badge>
+    <Rose::Badge @icon="user-organization">default style with icon</Rose::Badge>
+    <Rose::Badge @style="light">light</Rose::Badge>
+    <Rose::Badge @style="dark">dark</Rose::Badge>
+    <Rose::Badge @style="informational">informational</Rose::Badge>
+    <Rose::Badge @style="informational-outline">informational-outline</Rose::Badge>
+    <Rose::Badge @style="alert">alert</Rose::Badge>
+    <Rose::Badge @style="alert-outline">alert-outline</Rose::Badge>
+    <Rose::Badge @style="error">error</Rose::Badge>
+    <Rose::Badge @style="error-outline">error-outline</Rose::Badge>
+    <Rose::Badge @style="success">success</Rose::Badge>
+    <Rose::Badge @style="success-outline">success-outline</Rose::Badge>
+    <Rose::Badge @style="warning">warning</Rose::Badge>
+    <Rose::Badge @style="warning-outline">warning-outline</Rose::Badge>
+    `,
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/_badge.scss

@@ -0,0 +1,89 @@
+@use '../utilities/type';
+@use '../variables/sizing';
+
+.rose-badge {
+  @include type.type(s);
+  padding: sizing.rems(xxs);
+  border-radius: sizing.rems(xxxs);
+  border-width: thin;
+  border-style: solid;
+  display: inline-block;
+
+  --color: var(--ui-gray-starker-1);
+  --border-color: var(--ui-gray-subtler-5);
+  --background-color: none;
+
+  color: var(--color);
+  border-color: var(--border-color);
+  background-color: var(--background-color);
+
+  &.rose-badge-outline {
+    --border-color: var(--ui-gray-starker-1);
+  }
+
+  &.rose-badge-light {
+    --border-color: var(--ui-gray-subtler-5);
+    --background-color: var(--ui-gray-starker-5);
+  }
+
+  &.rose-badge-dark {
+    --color: var(--ui-gray-subtler-6);
+    --border-color: var(--ui-gray-starker-1);
+    --background-color: var(--ui-gray-starker-1);
+  }
+
+  &.rose-badge-active {
+    --color: var(--info);
+  }
+
+  &.rose-badge-informational {
+    --color: var(--info-starker-1);
+    --border-color: var(--info-subtler-2);
+    --background-color: var(--info-subtler-2);
+  }
+
+  &.rose-badge-informational-outline {
+    --color: var(--info-starker-1);
+    --border-color: var(--info-starker-1);
+  }
+
+  &.rose-badge-alert {
+    --color: var(--alert-starker-1);
+    --background-color: var(--alert-subtler-1);
+  }
+
+  &.rose-badge-alert-outline {
+    --color: var(--alert-starker-1);
+    --border-color: var(--alert-starker-1);
+  }
+
+  &.rose-badge-error {
+    --color: var(--failure-starker-1);
+    --background-color: var(--failure-subtler-1);
+  }
+
+  &.rose-badge-error-outline {
+    --color: var(--failure-starker-1);
+    --border-color: var(--failure-starker-1);
+  }
+
+  &.rose-badge-success {
+    --color: var(--success-starker-1);
+    --background-color: var(--success-subtler-1);
+  }
+
+  &.rose-badge-success-outline {
+    --color: var(--success-starker-1);
+    --border-color: var(--success-starker-1);
+  }
+
+  &.rose-badge-warning {
+    --color: var(--warning-starker-1);
+    --background-color: var(--warning-subtler-1);
+  }
+
+  &.rose-badge-warning-outline {
+    --color: var(--warning-starker-1);
+    --border-color: var(--warning-starker-1);
+  }
+}

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

@@ -13,3 +13,4 @@
 @import 'table';
 @import 'message';
 @import 'link-button';
+@import 'badge';

addons/rose/addon/templates/components/rose/badge.hbs

@@ -0,0 +1,14 @@
+<span ...attributes
+  class="rose-badge {{if  @style (concat "rose-badge-" @style)}}"
+>
+  {{#if @icon}}
+    <Rose::Icon
+      @name={{@icon}}
+      @size="medium"
+    />
+  {{/if}}
+
+  <span class="rose-badge-body">
+    {{yield}}
+  </span>
+</span>

addons/rose/app/components/rose/badge.js

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

addons/rose/tests/dummy/app/templates/index.hbs

@@ -1,9 +1,21 @@
-<Rose::LinkButton @route="index" @style="primary">Primary</Rose::LinkButton>
-<Rose::LinkButton @route="index" @style="secondary">Secondary</Rose::LinkButton>
-<Rose::LinkButton @route="index" @style="warning">Warning</Rose::LinkButton>
-<Rose::LinkButton @route="index" @style="ghost">Ghost</Rose::LinkButton>
-<br />
+<Rose::Badge>Default</Rose::Badge>
+<Rose::Badge @style="outline">Default Outline</Rose::Badge>
+<Rose::Badge @icon="user-organization">Default with Icon</Rose::Badge>
 
-<Rose::LinkButton @route="index" @style="primary" @iconLeft="help-circle-outline">Left Icon</Rose::LinkButton>
-<Rose::LinkButton @route="index" @style="primary" @iconRight="help-circle-outline">Right Icon</Rose::LinkButton>
-<Rose::LinkButton @route="index" @style="primary" @iconOnly="help-circle-outline" />
+<Rose::Badge @style="light">Light</Rose::Badge>
+<Rose::Badge @style="dark">Dark</Rose::Badge>
+
+<Rose::Badge @style="informational">Informational</Rose::Badge>
+<Rose::Badge @style="informational-outline">Informational Outline</Rose::Badge>
+
+<Rose::Badge @style="alert">Alert</Rose::Badge>
+<Rose::Badge @style="alert-outline">Alert Outline</Rose::Badge>
+
+<Rose::Badge @style="error">Error</Rose::Badge>
+<Rose::Badge @style="error-outline">Error Outline</Rose::Badge>
+
+<Rose::Badge @style="success">Success</Rose::Badge>
+<Rose::Badge @style="success-outline">Success Outline</Rose::Badge>
+
+<Rose::Badge @style="warning">Warning</Rose::Badge>
+<Rose::Badge @style="warning-outline">Warning Outline</Rose::Badge>

addons/rose/tests/integration/components/rose/badge-test.js

@@ -0,0 +1,50 @@
+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/badge', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`<Rose::Badge />`);
+    assert.ok(find('.rose-badge'));
+  });
+
+  test('it renders with content', async function(assert) {
+    await render(hbs`<Rose::Badge>host-catalog-1</Rose::Badge>`);
+    assert.equal(find('.rose-badge').textContent.trim(), 'host-catalog-1');
+  });
+
+  test('it renders an icon using @icon', async function(assert) {
+    await render(hbs`<Rose::Badge @icon="chevron-right" />`);
+    assert.ok(find('.rose-icon'));
+  });
+
+  test('it styles content using @style', async function(assert) {
+    let styles = [
+      'outline',
+      'light',
+      'dark',
+      'informational',
+      'informational-outline',
+      'alert',
+      'alert-outline',
+      'warning',
+      'warning-outline',
+      'error',
+      'error-outline',
+      'success',
+      'success-outline',
+      'warning',
+      'warning-outline'
+    ];
+
+    await render(hbs`<Rose::Badge @style={{this.style}} />`);
+
+    styles.forEach((style) => {
+      this.set('style', style);
+      assert.ok(find(`.rose-badge-${style}`), `defines style: ${style}`);
+    });
+  });
+});