✨ icon / add title

unirakun · May 31, 2017 · ee929df · ee929df
1 parent 7058881
commit ee929df
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 5 deletions.
diff --git a/lib/icon/icon.js b/lib/icon/icon.js
@@ -48,6 +48,7 @@ var Icon = function Icon(_ref) {
       secondary = _ref.secondary,
       disabled = _ref.disabled,
       prefix = _ref.prefix,
+      title = _ref.title,
       noColor = _ref.noColor;
 
   var classes = (0, _classnames3.default)(_iconStyles2.default.icon, className, (_classnames = {}, _defineProperty(_classnames, _iconStyles2.default.primary, primary), _defineProperty(_classnames, _iconStyles2.default.secondary, secondary), _defineProperty(_classnames, _iconStyles2.default.disabled, disabled), _defineProperty(_classnames, _iconStyles2.default.colored, !noColor), _classnames));
@@ -58,7 +59,7 @@ var Icon = function Icon(_ref) {
   // We inject all of them
   var iconComponent = _react2.default.createElement(
     'i',
-    { name: iconCode, className: iconCode },
+    { name: iconCode, className: iconCode, title: title },
     Array.from(new Array(13), function (x, i) {
       return i + 1;
     }).map(function (i) {
@@ -89,7 +90,8 @@ Icon.propTypes = {
   primary: _propTypes2.default.bool,
   secondary: _propTypes2.default.bool,
   disabled: _propTypes2.default.bool,
-  noColor: _propTypes2.default.bool
+  noColor: _propTypes2.default.bool,
+  title: _propTypes2.default.string
 };
 
 Icon.defaultProps = {
@@ -100,7 +102,8 @@ Icon.defaultProps = {
   primary: false,
   secondary: false,
   disabled: false,
-  noColor: false
+  noColor: false,
+  title: undefined
 };
 
 exports.default = (0, _recompose.onlyUpdateForPropTypes)(Icon);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kriya",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "main": "index.js",
   "description": "Kriya is a react/redux components library",
   "license": "MIT",

diff --git a/src/icon/__snapshots__/icon.spec.js.snap b/src/icon/__snapshots__/icon.spec.js.snap
@@ -8,6 +8,7 @@ exports[`common/Icon container should looking for prefix in redux 1`] = `
   <i
     className="redux-prefixicon"
     name="redux-prefixicon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -60,6 +61,60 @@ exports[`common/Icon container should use a default prefix (empty one) 1`] = `
   <i
     className="icon"
     name="icon"
+    title={undefined}
+  >
+    <span
+      className="path1"
+    />
+    <span
+      className="path2"
+    />
+    <span
+      className="path3"
+    />
+    <span
+      className="path4"
+    />
+    <span
+      className="path5"
+    />
+    <span
+      className="path6"
+    />
+    <span
+      className="path7"
+    />
+    <span
+      className="path8"
+    />
+    <span
+      className="path9"
+    />
+    <span
+      className="path10"
+    />
+    <span
+      className="path11"
+    />
+    <span
+      className="path12"
+    />
+    <span
+      className="path13"
+    />
+  </i>
+</div>
+`;
+
+exports[`common/Icon graphical (JSX) should add a title 1`] = `
+<div
+  className="icon colored"
+  style={Object {}}
+>
+  <i
+    className="aprefix-icon"
+    name="aprefix-icon"
+    title="a title"
   >
     <span
       className="path1"
@@ -112,6 +167,7 @@ exports[`common/Icon graphical (JSX) should add custom className 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -168,6 +224,7 @@ exports[`common/Icon graphical (JSX) should add custom style 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -220,6 +277,7 @@ exports[`common/Icon graphical (JSX) should create a disabled icon 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -272,6 +330,7 @@ exports[`common/Icon graphical (JSX) should create a primary icon 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -324,6 +383,7 @@ exports[`common/Icon graphical (JSX) should create a secondary icon 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -381,6 +441,7 @@ exports[`common/Icon graphical (JSX) should create an icon with label to left 1`
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -433,6 +494,7 @@ exports[`common/Icon graphical (JSX) should create an icon with label to right 1
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -490,6 +552,7 @@ exports[`common/Icon graphical (JSX) should create an icon without color 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -542,6 +605,7 @@ exports[`common/Icon graphical (JSX) should have a default behaviour 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -599,6 +663,7 @@ exports[`common/Icon graphical (JSX) should print labels to both sides 1`] = `
   <i
     className="aprefix-icon"
     name="aprefix-icon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -656,6 +721,7 @@ exports[`common/Icon graphical (JSX) should take a prefix 1`] = `
   <i
     className="myPrefix-myIcon"
     name="myPrefix-myIcon"
+    title={undefined}
   >
     <span
       className="path1"
@@ -708,6 +774,7 @@ exports[`common/Icon graphical (JSX) should take an icon name as children 1`] =
   <i
     className="aprefix-different-icon"
     name="aprefix-different-icon"
+    title={undefined}
   >
     <span
       className="path1"

diff --git a/src/icon/icon.jsx b/src/icon/icon.jsx
@@ -11,6 +11,7 @@ const Icon = ({
   labelLeft, labelRight,
   primary, secondary, disabled,
   prefix,
+  title,
   noColor /* set to true to print the native icon color */,
 }) => {
   const classes = classnames(
@@ -29,7 +30,7 @@ const Icon = ({
   // Icon from icomoon have different path (up to 13) to handle colors
   // We inject all of them
   const iconComponent = (
-    <i name={iconCode} className={iconCode}>
+    <i name={iconCode} className={iconCode} title={title}>
       {
         Array.from(new Array(13), (x, i) => i + 1)
           .map(i => <span key={i} className={`path${i}`} />)
@@ -61,6 +62,7 @@ Icon.propTypes = {
   secondary: PropTypes.bool,
   disabled: PropTypes.bool,
   noColor: PropTypes.bool,
+  title: PropTypes.string,
 }
 
 Icon.defaultProps = {
@@ -72,6 +74,7 @@ Icon.defaultProps = {
   secondary: false,
   disabled: false,
   noColor: false,
+  title: undefined,
 }
 
 export default onlyUpdateForPropTypes(Icon)
diff --git a/src/icon/icon.spec.js b/src/icon/icon.spec.js
@@ -25,6 +25,7 @@ describe('common/Icon', () => {
     it('should take an icon name as children', snapshot({ children: 'different-icon' }))
     it('should take a prefix', snapshot({ children: 'myIcon', prefix: 'myPrefix-' }))
     it('should have a default behaviour', snapshot({}))
+    it('should add a title', snapshot({ title: 'a title' }))
   })
 
   describe('container', () => {