feat(input): Use the StandaloneIcon component for the icons in the fe…

…edback states
telus · Sep 28, 2017 · 6a1205c · 6a1205c
1 parent 9a55ebe
commit 6a1205c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import Icon from '../../old-components/Icon/Icon'
+import StandaloneIcon from '../Icons/StandaloneIcon/StandaloneIcon'
 import Text from '../Typography/Text/Text'
 import Paragraph from '../Typography/Paragraph/Paragraph'
 import WithSpacing from '../Spacing/WithSpacing/WithSpacing'
@@ -30,10 +30,6 @@ const getWrapperClassName = (feedback, focused, disabled) => {
   return styles.default
 }
 
-const iconByFeedbackState = {
-  success: 'checkmark',
-  error: 'exclamation-point-circle'
-}
 const showFeedbackIcon = (feedback, focused) => (feedback === 'success' || feedback === 'error') && !focused
 
 /**
@@ -113,6 +109,14 @@ class Input extends React.Component {
     )
   }
 
+  renderIcon(feedback) {
+    if (feedback === 'success') {
+      return <StandaloneIcon symbol="checkmark" variant="primary" size={16} a11yText="The value of this input field is valid." />
+    }
+
+    return <StandaloneIcon symbol="exclamationPointCircle" variant="error" size={16} a11yText="The value of this input field is invalid." />
+  }
+
   render() {
     const { type, label, feedback, error, helper, ...rest } = this.props
 
@@ -144,7 +148,7 @@ class Input extends React.Component {
           </WithSpacing>
         }
 
-        <div className={wrapperClassName} data-testID="inputWrapper">
+        <div className={wrapperClassName} data-testid="inputWrapper">
           <input
             {...safeRest(rest)}
             id={inputId.identity()} type={type} className={styles.input}
@@ -157,7 +161,7 @@ class Input extends React.Component {
           <Fade timeout={100} in={showIcon} mountOnEnter={true} unmountOnExit={true}>
             { () => (
               <WithSpacing location="left" amount={3}>
-                <Icon glyph={iconByFeedbackState[feedback]} aria-hidden="true" />
+                {this.renderIcon(feedback)}
               </WithSpacing>
             )}
           </Fade>

diff --git a/src/components/Input/__tests__/Input.spec.jsx b/src/components/Input/__tests__/Input.spec.jsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { shallow, render } from 'enzyme'
 import toJson from 'enzyme-to-json'
 
-import Icon from '../../../old-components/Icon/Icon'
+import StandaloneIcon from '../../Icons/StandaloneIcon/StandaloneIcon'
 import Text from '../../Typography/Text/Text'
 import Paragraph from '../../Typography/Paragraph/Paragraph'
 import Fade from '../Fade'
@@ -17,7 +17,7 @@ describe('Input', () => {
   const doRender = (overrides = {}) => render(<Input {...defaultProps} {...overrides} />)
 
   const findInputElement = input => input.find('input')
-  const findWrapperElement = input => input.find('[data-testID="inputWrapper"]')
+  const findWrapperElement = input => input.find('[data-testid="inputWrapper"]')
 
   it('renders', () => {
     const input = doRender()
@@ -161,14 +161,18 @@ describe('Input', () => {
       const input = doShallow({ feedback: 'success' })
 
       expect(findWrapperElement(input)).toHaveClassName('success')
-      expect(input.find(Fade).dive().dive()).toContainReact(<Icon glyph="checkmark" aria-hidden="true" />)
+      expect(input.find(Fade).dive().dive()).toContainReact(
+        <StandaloneIcon symbol="checkmark" variant="primary" size={16} a11yText="The value of this input field is valid." />
+      )
     })
 
     it('can have an error feedback state', () => {
       const input = doShallow({ feedback: 'error' })
 
       expect(findWrapperElement(input)).toHaveClassName('error')
-      expect(input.find(Fade).dive().dive()).toContainReact(<Icon glyph="exclamation-point-circle" aria-hidden="true" />)
+      expect(input.find(Fade).dive().dive()).toContainReact(
+        <StandaloneIcon symbol="exclamationPointCircle" variant="error" size={16} a11yText="The value of this input field is invalid." />
+      )
     })
 
     it('hides the feedback state while focused', () => {

diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -69,8 +69,8 @@ exports[`Input renders with a feedback state and icon 1`] = `
         class="marginLeft-3"
       >
         <i
-          aria-hidden="true"
-          class="icon icon-core-exclamation-point-circle"
+          aria-label="The value of this input field is invalid."
+          class="iconExclamationPointCircle error size16"
         />
       </div>
     </div>