feat: 🎸 dropdown should support @count to display a count badge

addons/rose/addon/components/rose/dropdown/index.hbs

@@ -18,6 +18,9 @@
 
     <span class="rose-dropdown-trigger-text">
       {{@text}}
+      {{#if @count}}
+        <Rose::Badge>{{@count}}</Rose::Badge>
+      {{/if}}
     </span>
 
   </summary>

addons/rose/addon/components/rose/dropdown/index.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { boolean } from '@storybook/addon-knobs';
+import { number, boolean } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Dropdown" component="Dropdown" />
 
@@ -11,7 +11,7 @@ A simple dropdown component with support for links and buttons.
 <Preview>
   <Story name="Basic Dropdown" height="7rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="flight-icons/svg/org-16" @showCaret={{showCaret}} as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @count={{count}} @icon="flight-icons/svg/org-16" @showCaret={{showCaret}} as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.separator />
@@ -23,6 +23,7 @@ A simple dropdown component with support for links and buttons.
       </Rose::Dropdown>
     `,
     context: {
+      count: number('count', 0),
       showCaret: boolean('showCaret', true),
     },
   }}</Story>

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -39,6 +39,11 @@ $chevronGrey: url("data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%2362
     border-radius: sizing.rems(xxxs);
     white-space: nowrap;
 
+    .rose-badge {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
     // Hide default twistie triangle
     // Webkit / Chromium
     &::-webkit-details-marker {

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

@@ -23,6 +23,11 @@ module('Integration | Component | rose/dropdown', function (hooks) {
     assert.equal(find('.rose-dropdown-trigger').textContent.trim(), 'Click me');
   });
 
+  test('it supports a count', async function (assert) {
+    await render(hbs`<Rose::Dropdown @text="Click me" @count="2" />`);
+    assert.equal(find('.rose-badge').textContent.trim(), '2');
+  });
+
   test('it supports an icon', async function (assert) {
     await render(
       hbs`<Rose::Dropdown @icon="flight-icons/svg/user-circle-16" />`