From be866ecf0c37ec5a11cbcb8c8e56b45841a60052 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 12 Nov 2021 15:33:29 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20dropdown=20should=20supp?=
 =?UTF-8?q?ort=20@count=20to=20display=20a=20count=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/rose/addon/components/rose/dropdown/index.hbs         | 3 +++
 addons/rose/addon/components/rose/dropdown/index.stories.mdx | 5 +++--
 .../addon/styles/rose/components/dropdown/_dropdown.scss     | 5 +++++
 .../rose/tests/integration/components/rose/dropdown-test.js  | 5 +++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/addons/rose/addon/components/rose/dropdown/index.hbs b/addons/rose/addon/components/rose/dropdown/index.hbs
index 5d02e87e8..d3679b3a6 100644
--- a/addons/rose/addon/components/rose/dropdown/index.hbs
+++ b/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>
diff --git a/addons/rose/addon/components/rose/dropdown/index.stories.mdx b/addons/rose/addon/components/rose/dropdown/index.stories.mdx
index 1f3545707..129302461 100644
--- a/addons/rose/addon/components/rose/dropdown/index.stories.mdx
+++ b/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>
diff --git a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss b/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
index b8f3450f4..785708943 100644
--- a/addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss
+++ b/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 {
diff --git a/addons/rose/tests/integration/components/rose/dropdown-test.js b/addons/rose/tests/integration/components/rose/dropdown-test.js
index 56ed84ea8..2e1fd20cc 100644
--- a/addons/rose/tests/integration/components/rose/dropdown-test.js
+++ b/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" />`