From 919e2f083b7286fb38d894fd79c54fa77604002d Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 11 Aug 2020 19:22:44 -0400
Subject: [PATCH] chore: Remove dropdown utilities sass file

Move utilities sass file chevron definitions into dropdown styles in
favour of a single dropdown style
---
 .../components/rose/dropdown.stories.mdx      | 17 ++-----------
 .../styles/rose/components/_dropdown.scss     | 25 ++++++-------------
 .../rose/components/header/_dropdown.scss     | 10 +++++++-
 .../styles/rose/utilities/_dropdown.scss      | 19 --------------
 .../templates/components/rose/dropdown.hbs    |  2 +-
 .../components/rose/header/utilities.hbs      |  2 +-
 6 files changed, 21 insertions(+), 54 deletions(-)
 delete mode 100644 addons/rose/addon/styles/rose/utilities/_dropdown.scss

diff --git a/addons/rose/addon/components/rose/dropdown.stories.mdx b/addons/rose/addon/components/rose/dropdown.stories.mdx
index a89813392..e77c8a73d 100644
--- a/addons/rose/addon/components/rose/dropdown.stories.mdx
+++ b/addons/rose/addon/components/rose/dropdown.stories.mdx
@@ -1,33 +1,21 @@
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 import { hbs } from 'ember-cli-htmlbars';
-import { action } from '@storybook/addon-actions';
-import { text, boolean, select } from '@storybook/addon-knobs';
 
 <Meta title="Rose|Dropdown" component="Dropdown" />
 
 # Dropdown
 
-A simple dropdown component with support for links and buttons. Supports `light` and `dark` styles, with latter being a default style.
+A simple dropdown component with support for links and buttons.
 
 <Preview>
   <Story name="Basic Dropdown" height="5rem">{{
     template: hbs`
-      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" @style={{style}} as |dropdown|>
+      <Rose::Dropdown @text="Choose One&hellip;" @icon="user-organization" as |dropdown|>
         <dropdown.link @route="index">Menu item</dropdown.link>
         <dropdown.link @route="about">Menu item</dropdown.link>
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
-    context: {
-      style: select(
-        'style',
-        {
-          'light': 'light',
-          'dark': 'dark',
-        },
-        'dark'
-      ),
-    }
   }}</Story>
 </Preview>
 
@@ -40,7 +28,6 @@ A simple dropdown component with support for links and buttons. Supports `light`
         <dropdown.button>Button menu item</dropdown.button>
       </Rose::Dropdown>
     `,
-    context: {}
   }}</Story>
 </Preview>
 
diff --git a/addons/rose/addon/styles/rose/components/_dropdown.scss b/addons/rose/addon/styles/rose/components/_dropdown.scss
index 8d083567d..7a1bf9e53 100644
--- a/addons/rose/addon/styles/rose/components/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/_dropdown.scss
@@ -1,22 +1,7 @@
 @use '../variables/sizing';
 @use '../utilities/type';
-@use '../utilities/dropdown';
 
-@include dropdown.dropdown-style(
-  'light',
-  (
-    color: var(--white),
-    chevron: 'light',
-  )
-);
-
-@include dropdown.dropdown-style(
-  'dark',
-  (
-    color: var(--black),
-    chevron: 'dark',
-  )
-);
+$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
 .rose-dropdown {
   position: relative;
@@ -31,6 +16,8 @@
     padding: 0 sizing.rems(xl) 0 sizing.rems(l);
     $lineHeight: 36 / 13;
     line-height: $lineHeight;
+    color: var(--black);
+    background: url($chevron) no-repeat right sizing.rems(s) center;
 
     // Hide default twistie triangle
     // Webkit / Chromium
@@ -136,7 +123,11 @@
     width: 100%;
 
     &.rose-button-warning {
-      color: unset;
+      color: var(--failure);
+
+      &:hover {
+        color: var(--white);
+      }
     }
   }
 }
diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
index 0cfdaccdf..c30f1371a 100644
--- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss
+++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss
@@ -1,14 +1,18 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+$chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
+
 .rose-header-utilities,
 .rose-header-nav {
   margin-right: sizing.rems(s);
 
   .rose-dropdown-trigger {
-    background-size: sizing.rems(m);
     $lineHeight: 48 / 16;
     line-height: $lineHeight;
+    color: var(--white);
+    background: url($chevron) no-repeat right center;
+    background-size: sizing.rems(m);
 
     .rose-icon {
       --size: #{sizing.rems(l)};
@@ -28,3 +32,7 @@
     }
   }
 }
+
+.rose-header-nav .rose-dropdown-trigger{
+  padding-right: sizing.rems(l);
+}
diff --git a/addons/rose/addon/styles/rose/utilities/_dropdown.scss b/addons/rose/addon/styles/rose/utilities/_dropdown.scss
deleted file mode 100644
index b7e2a5358..000000000
--- a/addons/rose/addon/styles/rose/utilities/_dropdown.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use 'sass:map';
-@use '../variables/sizing';
-
-$dropdown-chevron: (
-  'light':
-    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
-  'dark':
-    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
-);
-
-@mixin dropdown-style($name, $default) {
-  .rose-dropdown-#{$name} {
-    .rose-dropdown-trigger {
-      color: map.get($default, color);
-      background: url(map.get($dropdown-chevron, map.get($default, chevron)))
-        no-repeat right sizing.rems(s) center;
-    }
-  }
-}
diff --git a/addons/rose/addon/templates/components/rose/dropdown.hbs b/addons/rose/addon/templates/components/rose/dropdown.hbs
index c2be96f2d..9386431d2 100644
--- a/addons/rose/addon/templates/components/rose/dropdown.hbs
+++ b/addons/rose/addon/templates/components/rose/dropdown.hbs
@@ -1,6 +1,6 @@
 <details
   ...attributes
-  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}} {{if  @style (concat "rose-dropdown-" @style)}} {{unless @style (concat "rose-dropdown-dark")}}"
+  class="rose-dropdown {{if @alignRight " rose-dropdown-right"}}"
   {{on-click-outside this.close}}
 >
 
diff --git a/addons/rose/addon/templates/components/rose/header/utilities.hbs b/addons/rose/addon/templates/components/rose/header/utilities.hbs
index cd0705a52..8c178538c 100644
--- a/addons/rose/addon/templates/components/rose/header/utilities.hbs
+++ b/addons/rose/addon/templates/components/rose/header/utilities.hbs
@@ -1,5 +1,5 @@
 <div class="rose-header-utilities">
   {{yield (hash
-    dropdown=(component 'rose/dropdown' alignRight=true style="light")
+    dropdown=(component 'rose/dropdown' alignRight=true)
   )}}
 </div>