revert(icon): Last revert for old-components/Icon component

telus · Sep 21, 2017 · feaad99 · feaad99
1 parent d52a190
commit feaad99
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 128 deletions.
diff --git a/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap b/src/components/Input/__tests__/__snapshots__/Input.spec.jsx.snap
@@ -78,14 +78,7 @@ exports[`Input renders with a feedback state and icon 1`] = `
       >
         <i
           aria-hidden="true"
-          class="
-            icon
-            icon-core-exclamation-point-circle
-            icon-color--inherit
-            
-            icon--medium
-            
-          "
+          class="icon icon-core-exclamation-point-circle"
         />
       </div>
     </div>

diff --git a/src/old-components/Icon/Icon.jsx b/src/old-components/Icon/Icon.jsx
@@ -1,16 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styles from './Icon.modules.scss'
+import classNames from 'classnames'
 
 const Icon = ({ glyph, variant, fixedWidth, size, className, children, ...rest }) => {
-  const classes = `
-    ${styles.icon}
-    ${styles[`icon-core-${glyph}`]}
-    ${variant ? styles[`icon-color--${variant}`] : styles['icon-color--inherit']}
-    ${fixedWidth ? styles['icon--fw'] : ''}
-    ${size ? styles[`icon--${size}`] : ''}
-    ${className}
-  `
+  const classes = classNames(
+    'icon',
+    `icon-core-${glyph}`,
+    className,
+    {
+      'icon--fw': fixedWidth,
+      [`icon--${variant}`]: variant,
+      'icon--large': size
+    }
+  )
 
   return (
     <i {...rest} className={classes}>
@@ -42,26 +44,21 @@ Icon.propTypes = {
   ]).isRequired,
   /**
    * The appearance of the Icon.
-   *
-   * **Note**: when no variant is specified, the icon's colour is inherited from parent element.
    */
   variant: PropTypes.oneOf([
     'primary',
     'secondary',
-    'inverted',
+    'disabled',
     'error'
   ]),
   /**
    * Whether or not to give the icon a fixed width.
-   *
-   * @deprecated please use [Unordered Lists](#unorderedlist) to
-   * display icons uniformly within a column.
    */
   fixedWidth: PropTypes.bool,
   /**
-   *
+   * @ignore
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  size: PropTypes.oneOf(['large']),
   /**
    * One or more CSS class names separated by spaces to append onto the icon.
    * Don't advertise as we plan on removing this feature soon.
@@ -78,9 +75,9 @@ Icon.propTypes = {
   children: PropTypes.node
 }
 Icon.defaultProps = {
-  variant: undefined,
+  variant: null,
   fixedWidth: false,
-  size: 'medium',
+  size: null,
   className: '',
   children: null
 }

diff --git a/src/old-components/Icon/Icon.modules.scss b/src/old-components/Icon/Icon.modules.scss
diff --git a/src/old-components/Icon/__tests__/Icon.spec.jsx b/src/old-components/Icon/__tests__/Icon.spec.jsx
@@ -25,7 +25,7 @@ describe('<Icon />', () => {
   it('supports variants', () => {
     const icon = doShallow({ variant: 'secondary' })
 
-    expect(icon).toHaveClassName('icon-color--secondary')
+    expect(icon).toHaveClassName('icon--secondary')
   })
 
   it('can be fixed width', () => {
@@ -35,9 +35,9 @@ describe('<Icon />', () => {
   })
 
   it('can be sized', () => {
-    const icon = doShallow({ size: 'small' })
+    const icon = doShallow({ size: 'large' })
 
-    expect(icon).toHaveClassName('icon--small')
+    expect(icon).toHaveClassName('icon--large')
   })
 
   it('supports custom CSS classes', () => {

diff --git a/src/old-components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap b/src/old-components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap
@@ -2,13 +2,6 @@
 
 exports[`<Icon /> renders 1`] = `
 <i
-  className="
-    icon
-    icon-core-checkmark
-    icon-color--inherit
-    
-    icon--medium
-    
-  "
+  className="icon icon-core-checkmark"
 />
 `;