From 47b49aa7a978896ccd20ddc5b350ccfa9405d837 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Fri, 1 Oct 2021 13:06:00 +0530
Subject: [PATCH] feat: Add support for icons in Dropdown

---
 .../javascripts/components/Dropdown.tsx       | 24 ++++++++++++++++---
 app/assets/stylesheets/_sn.scss               | 11 ++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/components/Dropdown.tsx b/app/assets/javascripts/components/Dropdown.tsx
index 54b3b64b5..093914de7 100644
--- a/app/assets/javascripts/components/Dropdown.tsx
+++ b/app/assets/javascripts/components/Dropdown.tsx
@@ -27,6 +27,7 @@ type DropdownProps = {
 };
 
 type ListboxButtonProps = {
+  icon?: IconType;
   value: string | null;
   label: string;
   isExpanded: boolean;
@@ -35,12 +36,20 @@ type ListboxButtonProps = {
 const customDropdownButton: FunctionComponent<ListboxButtonProps> = ({
   label,
   isExpanded,
+  icon,
 }) => (
   <>
-    <div className="dropdown-selected-label">{label}</div>
+    <div className="sn-dropdown-button-label">
+      {icon ? (
+        <div className="flex mr-2">
+          <Icon type={icon} className="sn-icon--small" />
+        </div>
+      ) : null}
+      <div className="dropdown-selected-label">{label}</div>
+    </div>
     <ListboxArrow
       className={`sn-dropdown-arrow ${
-        isExpanded ? 'dropdown-arrow-rotated' : ''
+        isExpanded ? 'sn-dropdown-arrow-flipped' : ''
       }`}
     >
       <Icon type="menu-arrow-down" className="sn-icon--small color-grey-1" />
@@ -74,7 +83,16 @@ export const Dropdown: FunctionComponent<DropdownProps> = ({
       >
         <ListboxButton
           className="sn-dropdown-button"
-          children={customDropdownButton}
+          children={({ value, label, isExpanded }) => {
+            const current = items.find((item) => item.value === value);
+            const icon = current ? current?.icon : null;
+            return customDropdownButton({
+              value,
+              label,
+              isExpanded,
+              ...(icon ? { icon } : null),
+            });
+          }}
         />
         <ListboxPopover className="sn-dropdown sn-dropdown-popover">
           <div className="sn-component">
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index 39bdc30ca..a17f5fbf0 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -69,11 +69,20 @@
   @extend .border-solid;
   @extend .border-gray-300;
   @extend .border-1;
-  @extend .min-w-42;
+  @extend .min-w-55;
+}
+
+.sn-dropdown-button-label {
+  @extend .flex;
+  @extend .items-center;
 }
 
 .sn-dropdown-arrow {
   @extend .flex;
+
+  &.sn-dropdown-arrow-flipped {
+    transform: rotate(180deg);
+  }
 }
 
 /** Lesser specificity will give priority to reach's styles */