From a355ae8d56e1e325002be7b80222416820ae647a Mon Sep 17 00:00:00 2001
From: Laura Cabrera <lzcabrera@gmail.com>
Date: Thu, 21 Sep 2017 11:43:43 -0700
Subject: [PATCH] feat(icon): Add fixes to render icons using new css classes

---
 src/components/Icon/Icon.jsx                  | 10 +++---
 src/components/Icon/Icon.modules.scss         | 32 +++++++++----------
 .../__snapshots__/Icon.spec.jsx.snap          |  2 +-
 .../Icon/__tests__/capitalize.spec.js         |  9 ++++++
 src/components/Icon/capitalize.js             |  5 +++
 5 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Icon/__tests__/capitalize.spec.js
 create mode 100644 src/components/Icon/capitalize.js

diff --git a/src/components/Icon/Icon.jsx b/src/components/Icon/Icon.jsx
index f71e285b9c..ff566abe91 100644
--- a/src/components/Icon/Icon.jsx
+++ b/src/components/Icon/Icon.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 import { deprecate } from '../../warn'
+import capitalize from './capitalize'
 
 import styles from './Icon.modules.scss'
 
@@ -22,11 +23,12 @@ const Icon = ({ glyph, variant, label, fixedWidth, size, className, children, ..
     deprecate('Icon', '\'fixedWidth\' prop is deprecated.')
   }
 
-  const classes = `${styles.icon} ${styles[`iconCore${glyph.charAt(0).toUpperCase()}${glyph.slice(1)}`]}`
+  const classes = `${styles.icon}`
+    + ` ${styles[`iconCore${capitalize(glyph)}`]}`
     + ` ${variant ? styles[variant] : ''}`
-    + `${fixedWidth ? ` ${styles.fw}` : ''}`
-    + `${size ? ` ${styles[size]}` : ''}`
-    + `${className ? ` ${className}` : ''}`
+    + ` ${fixedWidth ? `${styles.fw}` : ''}`
+    + ` ${size ? `${styles[size]}` : ''}`
+    + ` ${className ? `${className}` : ''}`
 
   return (
     <i
diff --git a/src/components/Icon/Icon.modules.scss b/src/components/Icon/Icon.modules.scss
index 87aa51a8d3..df29ddd76d 100644
--- a/src/components/Icon/Icon.modules.scss
+++ b/src/components/Icon/Icon.modules.scss
@@ -4,21 +4,21 @@
 
 // Unicode points of each icon's location within the font files.
 $core-icon-codepoints: (
-  caretDown: "\f105",
-  caretUp: "\f106",
-  checkmark: "\f101",
-  chevron: "\f107",
-  leftChevron: "\f107",
-  exclamationPointCircle: "\f103",
-  expander: "\f113",
-  hamburger: "\f112",
-  incomplete: "\f104",
-  location: "\f110",
-  minus: "\f109",
-  plus: "\f108",
-  questionMarkCircle: "\f102",
-  spyglass: "\f111",
-  times: "\f104"
+  CaretDown: "\f105",
+  CaretUp: "\f106",
+  Checkmark: "\f101",
+  Chevron: "\f107",
+  LeftChevron: "\f107",
+  ExclamationPointCircle: "\f103",
+  Expander: "\f113",
+  Hamburger: "\f112",
+  Incomplete: "\f104",
+  Location: "\f110",
+  Minus: "\f109",
+  Plus: "\f108",
+  QuestionMarkCircle: "\f102",
+  Spyglass: "\f111",
+  Times: "\f104"
 );
 
 .icon {
@@ -65,7 +65,7 @@ $core-icon-codepoints: (
 }
 
 @each $name, $codepoint in $core-icon-codepoints {
-  .iconCore#{to-upper-case($name)}::before {
+  .iconCore#{$name}::before {
     // composes: icon; TODO: can't use composes inside sass @each and
     // composes doesn't quite make sense on the color modifiers
     content: $codepoint;
diff --git a/src/components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap b/src/components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap
index 4928c55d51..e71e4f806c 100644
--- a/src/components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap
+++ b/src/components/Icon/__tests__/__snapshots__/Icon.spec.jsx.snap
@@ -3,6 +3,6 @@
 exports[`<Icon /> renders 1`] = `
 <i
   aria-hidden="true"
-  className="icon iconCoreCheckmark inherit medium"
+  className="icon iconCoreCheckmark inherit  medium "
 />
 `;
diff --git a/src/components/Icon/__tests__/capitalize.spec.js b/src/components/Icon/__tests__/capitalize.spec.js
new file mode 100644
index 0000000000..3446e78afd
--- /dev/null
+++ b/src/components/Icon/__tests__/capitalize.spec.js
@@ -0,0 +1,9 @@
+import capitalize from '../capitalize'
+
+describe.only('capitalize', () => {
+  it('capitalizes a string', () => {
+    const string = capitalize('test')
+
+    expect(string).toBe('Test')
+  })
+})
diff --git a/src/components/Icon/capitalize.js b/src/components/Icon/capitalize.js
new file mode 100644
index 0000000000..3901de9c7c
--- /dev/null
+++ b/src/components/Icon/capitalize.js
@@ -0,0 +1,5 @@
+const capitalize = (string) => {
+  return `${string.charAt(0).toUpperCase()}${string.slice(1)}`
+}
+
+export default capitalize