Mark required dropdowns fields as required

Used the 'asterisk' symbol from the `TextInput` component to mark
`Dropdown` components as required.
Until now, there was no way to identify the required fields if the
required fields were an enumeration (ex. OCI wizard options).

src/components/atoms/DropdownButton/images/star.js

@@ -0,0 +1,20 @@
+// @flow
+
+const image = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+    <title>Icon-Star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="star" transform="translate(-173.000000, -12.000000)" stroke="#616870">
+            <g id="Icon/Asterisk/Grey" transform="translate(172.000000, 12.000000)">
+                <path d="M4,0.666666667 L4,7.33333333" id="Line"></path>
+                <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line"></path>
+                <path d="M1.11324865,2.33333333 L6.88675135,5.66666667" id="Line" transform="translate(4.000000, 4.000000) scale(-1, 1) translate(-4.000000, -4.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>`
+
+export default image

src/components/atoms/DropdownButton/index.jsx

@@ -18,6 +18,7 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 import arrowImage from './images/arrow.js'
+import starImage from './images/star.js'
 
 import Palette from '../../styleUtils/Palette'
 import StyleProps from '../../styleUtils/StyleProps'
@@ -35,7 +36,7 @@ const getLabelColor = props => {
 }
 const Label = styled.div`
   color: ${props => getLabelColor(props)};
-  margin: 0 32px 0 16px;
+  margin: 0 ${props => props.required ? 44 : 32}px 0 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -84,7 +85,12 @@ const borderColor = props => {
   }
   return Palette.grayscale[3]
 }
-
+const Required = styled.div`
+  position: absolute;
+  top: 7px;
+  right: 29px;
+  background: url('${starImage}') center no-repeat;
+`
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -112,6 +118,10 @@ const Wrapper = styled.div`
   &:hover ${Label} {
     color: ${props => props.disabled ? '' : props.embedded ? '' : 'white'};
   }
+
+  &:hover ${Required} #star {
+    stroke: white;
+  }
 `
 const Arrow = styled.div`
   position: absolute;
@@ -128,6 +138,7 @@ type Props = {
   disabled?: boolean,
   'data-test-id'?: string,
   embedded?: boolean,
+  required?: boolean,
 }
 class DropdownButton extends React.Component<Props> {
   render() {
@@ -150,7 +161,10 @@ class DropdownButton extends React.Component<Props> {
           innerRef={() => { }}
           data-test-id="dropdownButton-value"
           disabled={this.props.disabled}
-        >{this.props.value}</Label>
+        >
+          {this.props.value}
+        </Label>
+        {this.props.required ? <Required dangerouslySetInnerHTML={{ __html: starImage }} /> : null}
         <Arrow
           {...this.props}
           innerRef={() => { }}

src/components/atoms/DropdownButton/story.jsx

@@ -20,6 +20,9 @@ storiesOf('DropdownButton', module)
   .add('default', () => (
     <DropdownButton value="Dropdown Button" onClick={action('clicked')} />
   ))
+  .add('required', () => (
+    <DropdownButton required value="Dropdown Button Button Button" onClick={action('clicked')} />
+  ))
   .add('primary', () => (
     <DropdownButton primary value="Dropdown Button" onClick={action('clicked')} />
   ))

src/components/molecules/Dropdown/index.jsx

@@ -113,6 +113,7 @@ type Props = {
   width: number,
   'data-test-id'?: string,
   embedded?: boolean,
+  required?: boolean,
 }
 type State = {
   showDropdownList: boolean,

src/components/molecules/EndpointField/index.jsx

@@ -126,6 +126,7 @@ class Field extends React.Component<Props> {
         items={items}
         onChange={item => { if (this.props.onChange) this.props.onChange(item.value) }}
         disabled={this.props.disabled}
+        required={this.props.required}
       />
     )
   }

src/components/molecules/WizardOptionsField/index.jsx

@@ -132,6 +132,7 @@ class WizardOptionsField extends React.Component<Props> {
         selectedItem={selectedItem}
         items={items}
         onChange={item => this.props.onChange(item.value)}
+        required={this.props.required}
       />
     )
   }