Merge pull request #251 from smiclea/unused-required

Remove required state from dropdown component

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

@@ -1,20 +0,0 @@
-// @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,7 +18,6 @@ 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'
@@ -36,7 +35,7 @@ const getLabelColor = props => {
 }
 const Label = styled.div`
   color: ${props => getLabelColor(props)};
-  margin: 0 ${props => props.required ? 44 : 32}px 0 16px;
+  margin: 0 32px 0 16px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -88,12 +87,6 @@ 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;
@@ -121,10 +114,6 @@ const Wrapper = styled.div`
   &:hover ${Label} {
     color: ${props => props.disabled ? '' : props.embedded ? '' : 'white'};
   }
-
-  &:hover ${Required} #star {
-    stroke: white;
-  }
 `
 const Arrow = styled.div`
   position: absolute;
@@ -141,7 +130,6 @@ type Props = {
   disabled?: boolean,
   'data-test-id'?: string,
   embedded?: boolean,
-  required?: boolean,
   highlight?: boolean,
 }
 class DropdownButton extends React.Component<Props> {
@@ -168,7 +156,6 @@ class DropdownButton extends React.Component<Props> {
         >
           {this.props.value}
         </Label>
-        {this.props.required ? <Required dangerouslySetInnerHTML={{ __html: starImage }} /> : null}
         <Arrow
           {...this.props}
           innerRef={() => { }}

src/components/atoms/DropdownButton/story.jsx

@@ -20,9 +20,6 @@ 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/story.jsx

@@ -94,9 +94,6 @@ storiesOf('Dropdown', module)
   .add('disabled', () => (
     <Wrapper disabled />
   ))
-  .add('required', () => (
-    <Wrapper required />
-  ))
   .add('long list', () => (
     <Wrapper
       items={[