From 98f98182669a53578da7ab3ba17365ab334ff08a Mon Sep 17 00:00:00 2001
From: thyhjwb6 <thyhjwb6@royalnavy.io>
Date: Tue, 27 Oct 2020 13:16:03 +0000
Subject: [PATCH] feat(Dropdown): Add label icon

Feature was in the original designs.
---
 .../src/library/pages/components/dropdown.md  |  7 +++
 .../components/Dropdown/Dropdown.stories.tsx  |  4 +-
 .../src/components/Dropdown/Dropdown.test.tsx | 44 ++++++++++++++++---
 .../src/components/Dropdown/Dropdown.tsx      |  6 ++-
 .../Dropdown/DropdownPlaceholder.tsx          | 34 ++++++++++++++
 5 files changed, 86 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-component-library/src/components/Dropdown/DropdownPlaceholder.tsx

diff --git a/packages/docs-site/src/library/pages/components/dropdown.md b/packages/docs-site/src/library/pages/components/dropdown.md
index 45ccf65303..d845c182c4 100644
--- a/packages/docs-site/src/library/pages/components/dropdown.md
+++ b/packages/docs-site/src/library/pages/components/dropdown.md
@@ -112,6 +112,13 @@ The `Dropdown` accepts a label, options and a handler which is called with the v
     Default: '',
     Description: 'The text to display in the component the user needs to click on to view options',
   },
+  {
+    Name: 'labelIcon',
+    Type: 'React.ReactNode',
+    Required: 'False',
+    Default: '',
+    Description: 'Optionally display an icon before the label text',
+  },
   {
     Name: 'onSelect',
     Type: '(value:string) => void',
diff --git a/packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx b/packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx
index f747bf5e38..c9c1a557f5 100644
--- a/packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx
+++ b/packages/react-component-library/src/components/Dropdown/Dropdown.stories.tsx
@@ -1,6 +1,7 @@
+import React from 'react'
 import { action } from '@storybook/addon-actions'
+import { IconLayers } from '@royalnavy/icon-library'
 import { storiesOf } from '@storybook/react'
-import React from 'react'
 
 import { Bell, Tools } from '../../icons'
 import { Dropdown } from './Dropdown'
@@ -47,6 +48,7 @@ examples.add('Icons', () => (
   <Dropdown
     options={iconOptions}
     label="Layers"
+    labelIcon={<IconLayers />}
     onSelect={action('onSelect')}
   />
 ))
diff --git a/packages/react-component-library/src/components/Dropdown/Dropdown.test.tsx b/packages/react-component-library/src/components/Dropdown/Dropdown.test.tsx
index 85df7c9462..c2b6f3d5f9 100644
--- a/packages/react-component-library/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/react-component-library/src/components/Dropdown/Dropdown.test.tsx
@@ -1,9 +1,16 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
+import { IconLayers } from '@royalnavy/icon-library'
 import { render, RenderResult, fireEvent } from '@testing-library/react'
 
 import { Dropdown } from './Dropdown'
 
+const options = [
+  { label: 'Option 1', value: '1' },
+  { label: 'Option 2', value: '2' },
+  { label: 'Option 3', value: '3' },
+]
+
 describe('Dropdown', () => {
   let wrapper: RenderResult
   let onSelectSpy: (value: string) => void
@@ -12,23 +19,24 @@ describe('Dropdown', () => {
     beforeEach(() => {
       onSelectSpy = jest.fn()
 
-      const options = [
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-        { label: 'Option 3', value: '3' },
-      ]
-
       wrapper = render(
         <Dropdown
           onSelect={onSelectSpy}
           options={options}
           label="Dropdown label"
+          labelIcon={<IconLayers />}
         />
       )
     })
 
+    it('should render the label icon', () => {
+      expect(wrapper.getByTestId('placeholder-icon')).toBeInTheDocument()
+    })
+
     it('should render the label', () => {
-      expect(wrapper.getByText('Dropdown label')).toBeInTheDocument()
+      expect(wrapper.getByTestId('placeholder-label')).toHaveTextContent(
+        'Dropdown label'
+      )
     })
 
     it('should set the ARIA attributes on the input', () => {
@@ -65,4 +73,26 @@ describe('Dropdown', () => {
       })
     })
   })
+
+  describe('minimal props', () => {
+    beforeEach(() => {
+      onSelectSpy = jest.fn()
+
+      wrapper = render(
+        <Dropdown
+          onSelect={onSelectSpy}
+          options={options}
+          label="Dropdown label"
+        />
+      )
+    })
+
+    it('should render the label', () => {
+      expect(wrapper.getByTestId('placeholder-label')).toBeInTheDocument()
+    })
+
+    it('should not render the label icon', () => {
+      expect(wrapper.queryAllByTestId('placeholder-icon')).toHaveLength(0)
+    })
+  })
 })
diff --git a/packages/react-component-library/src/components/Dropdown/Dropdown.tsx b/packages/react-component-library/src/components/Dropdown/Dropdown.tsx
index 30ab0573ec..5919bab58a 100644
--- a/packages/react-component-library/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react-component-library/src/components/Dropdown/Dropdown.tsx
@@ -7,6 +7,7 @@ import styled from 'styled-components'
 import { DropdownIndicator } from './DropdownIndicator'
 import { DropdownLabel } from './DropdownLabel'
 import { DropdownOption } from './DropdownOption'
+import { DropdownPlaceholder } from './DropdownPlaceholder'
 
 const { color, spacing } = selectors
 
@@ -14,6 +15,7 @@ export interface DropdownProps {
   onSelect: (value: string) => void
   options: DropdownOption[]
   label: string
+  labelIcon?: React.ReactNode
 }
 
 const StyledSelect = styled(Select)`
@@ -120,6 +122,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
   onSelect,
   options,
   label,
+  ...rest
 }) => {
   const onChange = (option: ValueType<DropdownOption>) => {
     const dropdownOption = option as DropdownOption
@@ -130,13 +133,14 @@ export const Dropdown: React.FC<DropdownProps> = ({
     <StyledSelect
       aria-label={label}
       classNamePrefix="rn-dropdown"
-      components={{ DropdownIndicator }}
+      components={{ DropdownIndicator, Placeholder: DropdownPlaceholder }}
       controlShouldRenderValue={false}
       formatOptionLabel={DropdownLabel}
       isSearchable={false}
       options={options}
       onChange={onChange}
       placeholder={label}
+      {...rest}
     />
   )
 }
diff --git a/packages/react-component-library/src/components/Dropdown/DropdownPlaceholder.tsx b/packages/react-component-library/src/components/Dropdown/DropdownPlaceholder.tsx
new file mode 100644
index 0000000000..ca57759dfa
--- /dev/null
+++ b/packages/react-component-library/src/components/Dropdown/DropdownPlaceholder.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { components } from 'react-select'
+import styled from 'styled-components'
+import { selectors } from '@royalnavy/design-tokens'
+
+const { spacing } = selectors
+
+const StyledIcon = styled.span`
+  position: relative;
+  top: ${spacing('px')};
+`
+
+const StyledLabel = styled.span`
+  ${StyledIcon} + & {
+    margin-left: ${spacing('3')};
+  }
+`
+
+export const DropdownPlaceholder: React.FC<any> = (props) => {
+  const {
+    selectProps: { labelIcon: icon },
+  } = props
+
+  return (
+    <components.Placeholder {...props}>
+      {icon && <StyledIcon data-testid="placeholder-icon">{icon}</StyledIcon>}
+      <StyledLabel data-testid="placeholder-label">
+        {props.children}
+      </StyledLabel>
+    </components.Placeholder>
+  )
+}
+
+DropdownPlaceholder.displayName = 'DropdownPlaceholder'