From cdc906d654ef92841624fdb3f8e9bd4359aa63a1 Mon Sep 17 00:00:00 2001
From: ilana barbosa <ilanavirginiab@gmail.com>
Date: Tue, 27 Feb 2024 12:46:45 -0300
Subject: [PATCH] feat(multi-select): add color prop

---
 src/components/MultiSelect/MultiSelect.test.tsx     | 13 ++++++++++++-
 src/components/MultiSelect/MultiSelect.tsx          |  1 +
 src/components/MultiSelect/MultiSelectFetchable.tsx |  3 ++-
 src/components/MultiSelect/MultiSelectStatic.tsx    |  8 ++++++--
 yarn.lock                                           |  2 +-
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/MultiSelect/MultiSelect.test.tsx b/src/components/MultiSelect/MultiSelect.test.tsx
index 926db2a4..0eb6ceaf 100644
--- a/src/components/MultiSelect/MultiSelect.test.tsx
+++ b/src/components/MultiSelect/MultiSelect.test.tsx
@@ -4,8 +4,10 @@ import { fireEvent } from '@testing-library/react'
 import { MultiSelect } from '../MultiSelect'
 import { render } from '../utils/test/render'
 
+const greenColor = '#6EC531'
+
 const items = [
-  { id: 0, name: 'Maringá' },
+  { id: 0, name: 'Maringá', color: greenColor },
   { id: 1, name: 'Guarapuava' },
   { id: 2, name: 'São Paulo' },
   { id: 3, name: 'Curitiba' },
@@ -138,4 +140,13 @@ describe('MultiSelect', () => {
 
     expect(select).toBeDisabled()
   })
+
+  it('should have custom color when have color prop', () => {
+    const { getByTestId } = render(
+      <MultiSelect items={items} value={[items[0]]} />
+    )
+
+    const BadgeItem = getByTestId('select-selected-item')
+    expect(BadgeItem).toHaveStyle({ backgroundColor: greenColor })
+  })
 })
diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx
index 03ab56e5..865f5b4f 100644
--- a/src/components/MultiSelect/MultiSelect.tsx
+++ b/src/components/MultiSelect/MultiSelect.tsx
@@ -6,6 +6,7 @@ import { MultiSelectStatic } from './MultiSelectStatic'
 type Item = {
   id: any
   name: string
+  color?: string
 }
 
 export interface Props {
diff --git a/src/components/MultiSelect/MultiSelectFetchable.tsx b/src/components/MultiSelect/MultiSelectFetchable.tsx
index 121f3208..47dde7f5 100644
--- a/src/components/MultiSelect/MultiSelectFetchable.tsx
+++ b/src/components/MultiSelect/MultiSelectFetchable.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 import { MdClose } from 'react-icons/md'
 import { useCombobox, useMultipleSelection } from 'downshift'
+import { isEmpty } from 'lodash'
 
 import { Flex } from '../Flex'
 import { Box } from '../Box'
@@ -403,7 +404,7 @@ export const MultiSelectFetchable: React.FC<Props> = ({
           border='1px solid #dedede'
           {...getMenuProps()}
         >
-          {!isDependent && (
+          {!isDependent && !isEmpty(filters) && (
             <>
               <ul>
                 {filters.map((filter, index) => (
diff --git a/src/components/MultiSelect/MultiSelectStatic.tsx b/src/components/MultiSelect/MultiSelectStatic.tsx
index d9463bd5..7f61166b 100644
--- a/src/components/MultiSelect/MultiSelectStatic.tsx
+++ b/src/components/MultiSelect/MultiSelectStatic.tsx
@@ -10,11 +10,13 @@ import { Text } from '../Text'
 import { Divider } from '../Divider'
 import { Button } from '../Button'
 import { InputErrorMessage } from '../InputErrorMessage'
+import { isEmpty } from 'lodash'
 
 type Item = {
   id: any
   name: string
   select?: string
+  color?: string
 }
 
 export interface Props {
@@ -349,7 +351,9 @@ export const MultiSelectStatic: React.FC<Props> = ({
                 display='flex'
                 flexDirection='row'
                 alignItems='center'
-                backgroundColor={disabled ? 'darkGrey' : 'primary'}
+                backgroundColor={
+                  disabled ? 'darkGrey' : selectedItem?.color || 'primary'
+                }
                 borderRadius='3px'
                 data-testid='select-selected-item'
               >
@@ -429,7 +433,7 @@ export const MultiSelectStatic: React.FC<Props> = ({
           border='1px solid #dedede'
           {...getMenuProps()}
         >
-          {!isDependent && !disabled && (
+          {!isDependent && !disabled && !isEmpty(filters) && (
             <>
               <ul>
                 {filters.map((filter, index) => (
diff --git a/yarn.lock b/yarn.lock
index 9db26f42..19bd6ffc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11538,7 +11538,7 @@ react-select@^3.2.0:
     react-input-autosize "^3.0.0"
     react-transition-group "^4.3.0"
 
-react-spring@^9.6.1:
+react-spring@9.6.1:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.6.1.tgz#e715b2fa523c1a3acfdcf1aaa93e081620b8cc8e"
   integrity sha512-BeP80R4SLb1bZHW/Q62nECoScHw/fH+jzGkD7dc892HNGa+lbGIJXURc6U7N8JfZ8peEO46nPxR57aUMuYzquQ==