feat: add title prop to #icon, refactor and fix auto sizing

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -71,13 +71,15 @@ exports[`Button component have to match default button snapshot 1`] = `
         key="button-icon"
         modifier={null}
         size="icon_size"
+        title={null}
         width={null}
       >
         <span
           aria-hidden={true}
           aria-label="This is a button title"
           className="dnb-icon dnb-button__icon"
           role="img"
+          title={null}
         >
           <question>
             <svg
@@ -171,13 +173,15 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         key="button-icon"
         modifier={null}
         size="icon_size"
+        title={null}
         width={null}
       >
         <span
           aria-hidden={true}
           aria-label="This is a button title"
           className="dnb-icon dnb-button__icon"
           role="img"
+          title={null}
         >
           <question>
             <svg
@@ -550,17 +554,12 @@ exports[`Button scss have to match snapshot 1`] = `
 .dnb-icon {
   display: inline;
   vertical-align: baseline;
-  font-size: inherit;
-  width: 1em;
-  height: 1em; }
+  font-size: inherit; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
-  .dnb-icon svg:not([width]):not([height]) {
-    width: inherit;
-    height: inherit; }
   .dnb-icon--small {
     width: 0.8em;
     height: 0.8em; }
@@ -573,6 +572,12 @@ exports[`Button scss have to match snapshot 1`] = `
   .dnb-icon--large {
     width: 2em;
     height: 2em; }
+  .dnb-icon--custom-size {
+    width: auto;
+    height: auto; }
+  .dnb-icon svg:not([width]):not([height]) {
+    width: inherit;
+    height: inherit; }
 
 .dnb-button {
   font-family: sans-serif;

packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap

@@ -49,6 +49,7 @@ exports[`Dropdown component have to match snapshot 1`] = `
         icon_size="24"
         modifier={null}
         size={null}
+        title={null}
         width={null}
       />
       <span
@@ -323,17 +324,12 @@ exports[`Dropdown scss have to match snapshot 1`] = `
 .dnb-icon {
   display: inline;
   vertical-align: baseline;
-  font-size: inherit;
-  width: 1em;
-  height: 1em; }
+  font-size: inherit; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
-  .dnb-icon svg:not([width]):not([height]) {
-    width: inherit;
-    height: inherit; }
   .dnb-icon--small {
     width: 0.8em;
     height: 0.8em; }
@@ -346,6 +342,12 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-icon--large {
     width: 2em;
     height: 2em; }
+  .dnb-icon--custom-size {
+    width: auto;
+    height: auto; }
+  .dnb-icon svg:not([width]):not([height]) {
+    width: inherit;
+    height: inherit; }
 
 .dnb-button {
   font-family: sans-serif;

packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap

@@ -30,12 +30,14 @@ exports[`FormStatus component have to match snapshot 1`] = `
       icon="exclamation"
       modifier={null}
       size="icon_size"
+      title={null}
       width={null}
     >
       <span
-        aria-label="exclamation"
+        aria-label="nodejs"
         className="dnb-icon"
         role="img"
+        title={null}
       >
         <exclamation>
           <svg

packages/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap

@@ -12,12 +12,14 @@ exports[`IconPrimary component have to match snapshot 1`] = `
   icon="question"
   modifier={null}
   size={null}
+  title={null}
   width={null}
 >
   <span
-    aria-label="question"
+    aria-label="nodejs"
     className="dnb-icon dnb-icon--default"
     role="img"
+    title={null}
   >
     <question>
       <svg

packages/dnb-ui-lib/src/components/icon/Example.js

@@ -31,10 +31,20 @@ import bell from './icons/bell'
           <p className="example-caption">Default Sizes (Responsive)</p>
         </div>
         <div className="example-box">
-          <Icon icon={BellMedium} size="24" />
-          <Icon icon={BellMedium} height="24" />
-          <Icon icon={BellMedium} width="24" />
-          <p className="example-caption">Explicit defined sizes</p>
+          <Icon icon={BellMedium} title="auto size" />
+          <Icon icon={BellMedium} size="medium" title="size=medium" />
+          <Icon icon={BellMedium} size="24" title="custom size: size=24" />
+          <Icon
+            icon={BellMedium}
+            height="24"
+            title="custom size: height=24"
+          />
+          <Icon
+            icon={BellMedium}
+            width="24"
+            title="custom size: width=24"
+          />
+          <p className="example-caption">Explicit defined size: medium</p>
         </div>
       </Fragment>
     )

packages/dnb-ui-lib/src/components/icon/Icon.js

@@ -36,6 +36,7 @@ export const propTypes = {
   height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   color: PropTypes.string,
   alt: PropTypes.string,
+  title: PropTypes.string,
   area_hidden: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   class: PropTypes.string,
@@ -56,6 +57,7 @@ export const defaultProps = {
   height: null,
   color: null,
   alt: null,
+  title: null,
   area_hidden: false,
   attributes: null,
   class: null,
@@ -87,21 +89,9 @@ export default class Icon extends PureComponent {
     return processChildren(props)
   }
 
-  static prerender(props) {
-    const icon = Icon.getIcon(props)
+  static calcSize(props) {
+    const { size, height, width } = props
 
-    const {
-      color,
-      modifier,
-      size,
-      height,
-      width,
-      class: _className,
-      className,
-      area_hidden
-    } = props
-
-    let { alt } = props
     let sizeAsInt = -1
     let sizeAsString = null
 
@@ -135,14 +125,31 @@ export default class Icon extends PureComponent {
         ([key]) => key === size
       ).reduce((acc, [key, value]) => {
         return key && value
-      }, null)
+      }, -1)
 
       // of if the size is a default size defined as a string
       if (ListDefaultIconSizes.includes(([key]) => key === size)) {
         sizeAsString = size
       }
     }
 
+    // check if the size is given as a number, and if is a default size
+    else if (parseFloat(size) > 0) {
+      sizeAsInt = ListDefaultIconSizes.filter(
+        ([key, value]) => key && value === parseFloat(size)
+      ).reduce((acc, [key, value]) => {
+        if (key && value) return value
+        return acc
+      }, -1)
+
+      // has custom size
+      if (sizeAsInt === -1) {
+        sizeAsInt = parseFloat(size)
+        // size = parseFloat(size)
+        sizeAsString = 'custom-size'
+      }
+    }
+
     // check if the sizeAsInt is a default size
     if (sizeAsInt > 0) {
       const potentialSizeAsString = ListDefaultIconSizes.reduce(
@@ -160,35 +167,71 @@ export default class Icon extends PureComponent {
       }
     }
 
-    // define all the svg parameters
-    const svgParams = {}
+    const prepareSvgParams = () => {
+      const svgParams = {}
 
-    if (!sizeAsString && !(sizeAsInt > 0) && parseFloat(size) > -1) {
-      svgParams.width = svgParams.height = parseFloat(size)
-    }
-    if (parseFloat(width) > -1) {
-      svgParams.width = parseFloat(width)
-    }
-    if (parseFloat(height) > -1) {
-      svgParams.height = parseFloat(height)
-    }
+      if (!sizeAsString && !(sizeAsInt > 0) && parseFloat(size) > -1) {
+        svgParams.width = svgParams.height = parseFloat(size)
+      } else if (sizeAsString === 'custom-size') {
+        svgParams.width = svgParams.height = parseFloat(sizeAsInt)
+      }
+      if (parseFloat(width) > -1) {
+        svgParams.width = parseFloat(width)
+      }
+      if (parseFloat(height) > -1) {
+        svgParams.height = parseFloat(height)
+      }
 
-    // and the sizeAsInt is not a default size
-    const sizeAsIntIsValidDefault =
-      sizeAsInt > 0 &&
-      ListDefaultIconSizes.includes(
-        ([key, value]) => key && value === sizeAsInt
-      )
+      // and the sizeAsInt is not a default size
+      const sizeAsIntIsValidDefault =
+        sizeAsInt > 0 &&
+        ListDefaultIconSizes.includes(
+          ([key, value]) => key && value === sizeAsInt
+        )
+
+      // if the size is default, remove the widht/height
+      // but if the browser is IE11 - do not remove theese attributes
+      if (
+        !isIE11 &&
+        sizeAsIntIsValidDefault
+        // && sizeAsString !== 'custom-size'
+      ) {
+        svgParams.width = null
+        svgParams.height = null
+      }
+      if (isIE11 && sizeAsInt > 0) {
+        svgParams.width = svgParams.height = sizeAsInt
+      }
 
-    // if the size is default, remove the widht/height
-    // but if the browser is IE11 - do not remove theese attributes
-    if (!isIE11 && sizeAsIntIsValidDefault) {
-      svgParams.width = null
-      svgParams.height = null
+      validateDOMAttributes({}, svgParams)
+
+      return svgParams
     }
-    if (isIE11 && sizeAsInt > 0) {
-      svgParams.width = svgParams.height = sizeAsInt
+
+    // define all the svg parameters
+    const svgParams = prepareSvgParams()
+
+    return {
+      svgParams,
+      sizeAsInt,
+      sizeAsString
     }
+  }
+
+  static prerender(props) {
+    const icon = Icon.getIcon(props)
+
+    const {
+      color,
+      modifier,
+      alt,
+      title,
+      class: _className,
+      className,
+      area_hidden
+    } = props
+
+    const { sizeAsString, svgParams } = Icon.calcSize(props)
 
     if (color) {
       svgParams.color = color
@@ -197,10 +240,11 @@ export default class Icon extends PureComponent {
     // some wrapper params
     // also used for code markup simulation
     const wrapperParams = validateDOMAttributes(props, {
-      role: 'img'
+      role: 'img',
+      title
     })
     // get the alt
-    wrapperParams['aria-label'] = (alt || name).replace(/_/g, ' ')
+    wrapperParams['aria-label'] = (alt || title || name).replace(/_/g, ' ')
     if (area_hidden) {
       // wrapperParams['role'] = 'presentation' // almost the same as aria-hidden
       wrapperParams['aria-hidden'] = area_hidden

packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap

@@ -12,13 +12,15 @@ exports[`Icon component have to match snapshot 1`] = `
   icon={[Function]}
   modifier="modifier"
   size="size"
+  title="title"
   width="width"
 >
   <span
     aria-hidden={true}
     aria-label="alt"
     className="dnb-icon dnb-icon--modifier class className"
     role="img"
+    title="title"
   >
     <SvgComponent
       color="color"
@@ -185,17 +187,12 @@ exports[`Icon scss have to match snapshot 1`] = `
 .dnb-icon {
   display: inline;
   vertical-align: baseline;
-  font-size: inherit;
-  width: 1em;
-  height: 1em; }
+  font-size: inherit; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
-  .dnb-icon svg:not([width]):not([height]) {
-    width: inherit;
-    height: inherit; }
   .dnb-icon--small {
     width: 0.8em;
     height: 0.8em; }
@@ -208,5 +205,11 @@ exports[`Icon scss have to match snapshot 1`] = `
   .dnb-icon--large {
     width: 2em;
     height: 2em; }
+  .dnb-icon--custom-size {
+    width: auto;
+    height: auto; }
+  .dnb-icon svg:not([width]):not([height]) {
+    width: inherit;
+    height: inherit; }
 "
 `;