feat: enhance #icon sizing. Also show primary icon under components

dnbexperience · Jan 24, 2019 · c490550 · c490550
1 parent 6888b5c
commit c490550
Show file tree

Hide file tree

Showing 15 changed files with 124 additions and 91 deletions.
diff --git a/packages/dnb-design-system-portal/scripts/uilib/makeDemosFactory.js b/packages/dnb-design-system-portal/scripts/uilib/makeDemosFactory.js
@@ -12,7 +12,7 @@ import packpath from 'packpath'
 
 if (require.main === module && process.env.NODE_ENV !== 'test') {
   const ignoreUiLibList = ['web-components', 'style']
-  const filterOut = ['input-masked', 'icon-primary']
+  const filterOut = [] // before we had in here: 'input-masked', 'icon-primary'
   const keepFiles = [] //'!**/footer/*'
   const autoAdvice = `
   ATTENTION: This file is auto generated by using "makeDemosFactory".
@@ -74,7 +74,10 @@ if (require.main === module && process.env.NODE_ENV !== 'test') {
       './src/pages/uilib/components'
     ),
     preprocessContent: ({ file, content }) => {
-      if (new RegExp(filterOut.join('|')).test(file)) {
+      if (
+        filterOut.length > 0 &&
+        new RegExp(filterOut.join('|')).test(file)
+      ) {
         return content.replace('draft: false', 'draft: true')
       }
       return content

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/icon-primary.md b/packages/dnb-design-system-portal/src/pages/uilib/components/icon-primary.md
@@ -1,6 +1,6 @@
 ---
 title: 'IconPrimary'
-draft: true
+draft: false
 status: null
 order: 5
 ---

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked.md b/packages/dnb-design-system-portal/src/pages/uilib/components/input-masked.md
@@ -1,6 +1,6 @@
 ---
 title: 'InputMasked'
-draft: true
+draft: false
 status: null
 order: 7
 ---

diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Icon from '../icon/IconPrimary'
+import Icon from '../icon-primary/IconPrimary'
 import {
   registerElement,
   validateDOMAttributes,

diff --git a/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js b/packages/dnb-ui-lib/src/components/dropdown/Dropdown.js
@@ -14,7 +14,7 @@ import {
   dispatchCustomElementEvent
 } from '../../shared/component-helper'
 // import './style/dnb-dropdown.scss' // no good solution to import the style here
-import Icon from '../icon/IconPrimary'
+import Icon from '../icon-primary/IconPrimary'
 
 const renderProps = {
   on_show: null,

diff --git a/packages/dnb-ui-lib/src/components/icon-primary/Example.js b/packages/dnb-ui-lib/src/components/icon-primary/Example.js
@@ -5,18 +5,26 @@
 
 import React, { PureComponent, Fragment } from 'react'
 import IconPrimary from './IconPrimary'
-import Button from './../button'
 
 class Example extends PureComponent {
   render() {
     return (
       <Fragment>
-        <IconPrimary icon="question" />
-        <IconPrimary icon="question_medium" />
-        <IconPrimary icon="question" size="medium" />
-        <Button variant="secondary" size="large">
-          <IconPrimary icon="question_medium" size="large" />
-        </Button>
+        <IconPrimary icon="question" title="default size" />
+        <IconPrimary
+          icon="question_medium"
+          title="medium size in icon name"
+        />
+        <IconPrimary
+          icon="question"
+          size="medium"
+          title="medium size defined in size prop"
+        />
+        <IconPrimary
+          icon="question"
+          size="40"
+          title="default sized icon with custom size"
+        />
       </Fragment>
     )
   }

diff --git a/packages/dnb-ui-lib/src/components/icon-primary/IconPrimary.js b/packages/dnb-ui-lib/src/components/icon-primary/IconPrimary.js
@@ -1,8 +1,56 @@
 /**
- * Button Component
+ * Web Icon Component
  *
  */
 
-import IconPrimary from '../icon/IconPrimary'
-export default IconPrimary
-export * from '../icon/IconPrimary'
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import DefaultIcon, { DefaultIconSize, loadSVG } from '../icon/Icon'
+import * as primary_icons from '../../icons/primary_icons'
+import * as primary_icons_medium from '../../icons/primary_icons_medium'
+
+const icons = { ...primary_icons, ...primary_icons_medium }
+
+export { DefaultIconSize }
+export const propTypes = {
+  ...DefaultIcon.propTypes,
+  ...{
+    icon: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.node,
+      PropTypes.func
+    ])
+  }
+}
+
+export const defaultProps = { ...DefaultIcon.defaultProps }
+
+export default class IconPrimary extends PureComponent {
+  static tagName = 'dnb-icon-primary'
+  static propTypes = propTypes
+  static defaultProps = defaultProps
+
+  static enableWebComponent() {
+    DefaultIcon.enableWebComponent(IconPrimary.tagName, IconPrimary)
+  }
+
+  static getIcon(props) {
+    return DefaultIcon.getIcon(props)
+  }
+
+  render() {
+    const { icon, wrapperParams, svgParams, size } = DefaultIcon.prerender(
+      this.props
+    )
+
+    const Svg = loadSVG(icon, size, icons)
+
+    if (!Svg) return <></>
+
+    return (
+      <span {...wrapperParams}>
+        <Svg {...svgParams} />
+      </span>
+    )
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/icon-primary/__tests__/IconPrimary.test.js b/packages/dnb-ui-lib/src/components/icon-primary/__tests__/IconPrimary.test.js
@@ -12,7 +12,7 @@ import {
 } from '../../../core/jest/jestSetup'
 import Component from '../IconPrimary'
 
-const props = fakeProps(require.resolve('../../icon/IconPrimary'), {
+const props = fakeProps(require.resolve('../IconPrimary'), {
   optional: true
 })
 props.icon = 'question'
@@ -35,7 +35,7 @@ describe('IconPrimary component', () => {
     expect(elem.props().height).toBe(height)
   })
 
-  it('has valid medium size', () => {
+  it('has valid medium size as enum', () => {
     // here we explicit set size="medium" as well, cause we then test that the loadSVG makes a good job
     const Comp = mount(
       <Component {...props} icon="question_medium" size="medium" />
@@ -47,6 +47,18 @@ describe('IconPrimary component', () => {
     expect(svg.props().viewBox).toBe('0 0 24 24')
   })
 
+  it('has valid medium size as int', () => {
+    // here we explicit set size="medium" as well, cause we then test that the loadSVG makes a good job
+    const Comp = mount(
+      <Component {...props} icon="question_medium" size="24" />
+    )
+    const svg = Comp.find('svg')
+    const path = svg.find('path')
+    expect(svg.exists()).toBe(true)
+    expect(path.exists()).toBe(true)
+    expect(svg.props().viewBox).toBe('0 0 24 24')
+  })
+
   it('should validate with ARIA rules', async () => {
     const Comp = mount(<Component {...props} />)
     expect(await axeComponent(Comp)).toHaveNoViolations()

diff --git a/...s/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap b/...s/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap
@@ -21,10 +21,15 @@ exports[`IconPrimary component have to match snapshot 1`] = `
     role="img"
     title={null}
   >
-    <question>
+    <question
+      height={null}
+      width={null}
+    >
       <svg
         fill="none"
+        height={null}
         viewBox="0 0 16 16"
+        width={null}
       >
         <path
           clipRule="evenodd"

diff --git a/packages/dnb-ui-lib/src/components/icon-primary/index.js b/packages/dnb-ui-lib/src/components/icon-primary/index.js
@@ -3,6 +3,6 @@
  *
  */
 
-import IconPrimary from '../icon/IconPrimary'
+import IconPrimary from './IconPrimary'
 export default IconPrimary
-export * from '../icon/IconPrimary'
+export * from './IconPrimary'
diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js
@@ -15,11 +15,13 @@ import {
 
 export const DefaultIconSize = 16
 export const DefaultIconSizes = {
+  // small: 8,
   default: 16,
   medium: 24
   // large: 32 // currently not in use
 }
 export const ListDefaultIconSizes = Object.entries(DefaultIconSizes)
+export const ValidIconSizes = ['small', 'default', 'medium', 'large']
 
 export const propTypes = {
   icon: PropTypes.oneOfType([
@@ -133,7 +135,7 @@ export default class Icon extends PureComponent {
       }, -1)
 
       // of if the size is a default size defined as a string
-      if (ListDefaultIconSizes.includes(([key]) => key === size)) {
+      if (ValidIconSizes.includes(size)) {
         sizeAsString = size
       }
     }
@@ -150,7 +152,6 @@ export default class Icon extends PureComponent {
       // has custom size
       if (sizeAsInt === -1) {
         sizeAsInt = parseFloat(size)
-        // size = parseFloat(size)
         sizeAsString = 'custom-size'
       }
     }
@@ -181,26 +182,20 @@ export default class Icon extends PureComponent {
         svgParams.width = svgParams.height = parseFloat(sizeAsInt)
       }
       if (parseFloat(width) > -1) {
+        sizeAsString = 'custom-size'
         svgParams.width = parseFloat(width)
       }
       if (parseFloat(height) > -1) {
+        sizeAsString = 'custom-size'
         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 sizeAsString is not a default size
+      const sizeIsValid = ValidIconSizes.includes(sizeAsString)
 
       // 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'
-      ) {
+      if (!isIE11 && sizeIsValid) {
         svgParams.width = null
         svgParams.height = null
       }

diff --git a/packages/dnb-ui-lib/src/components/icon/IconPrimary.js b/packages/dnb-ui-lib/src/components/icon/IconPrimary.js
@@ -1,56 +1,8 @@
 /**
- * Web Icon Component
+ * Primary Icon (Symlinc) Web Component
  *
  */
 
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import DefaultIcon, { DefaultIconSize, loadSVG } from './Icon'
-import * as primary_icons from '../../icons/primary_icons'
-import * as primary_icons_medium from '../../icons/primary_icons_medium'
-
-const icons = { ...primary_icons, ...primary_icons_medium }
-
-export { DefaultIconSize }
-export const propTypes = {
-  ...DefaultIcon.propTypes,
-  ...{
-    icon: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.node,
-      PropTypes.func
-    ])
-  }
-}
-
-export const defaultProps = { ...DefaultIcon.defaultProps }
-
-export default class IconPrimary extends PureComponent {
-  static tagName = 'dnb-icon-primary'
-  static propTypes = propTypes
-  static defaultProps = defaultProps
-
-  static enableWebComponent() {
-    DefaultIcon.enableWebComponent(IconPrimary.tagName, IconPrimary)
-  }
-
-  static getIcon(props) {
-    return DefaultIcon.getIcon(props)
-  }
-
-  render() {
-    const { icon, wrapperParams, svgParams, size } = DefaultIcon.prerender(
-      this.props
-    )
-
-    const Svg = loadSVG(icon, size, icons)
-
-    if (!Svg) return <></>
-
-    return (
-      <span {...wrapperParams}>
-        <Svg {...svgParams} />
-      </span>
-    )
-  }
-}
+import IconPrimary from '../icon-primary/IconPrimary'
+export default IconPrimary
+export * from '../icon-primary/IconPrimary'
diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -140,10 +140,15 @@ exports[`Modal component have to match snapshot 1`] = `
                 role="img"
                 title={null}
               >
-                <question>
+                <question
+                  height={null}
+                  width={null}
+                >
                   <svg
                     fill="none"
+                    height={null}
                     viewBox="0 0 16 16"
+                    width={null}
                   >
                     <path
                       clipRule="evenodd"
@@ -380,10 +385,15 @@ exports[`Modal component have to match snapshot 1`] = `
                         role="img"
                         title={null}
                       >
-                        <close>
+                        <close
+                          height={null}
+                          width={null}
+                        >
                           <svg
                             fill="none"
+                            height={null}
                             viewBox="0 0 16 16"
+                            width={null}
                           >
                             <path
                               clipRule="evenodd"

diff --git a/packages/dnb-ui-lib/src/components/notification/Notification.js b/packages/dnb-ui-lib/src/components/notification/Notification.js
@@ -12,7 +12,7 @@ import {
   // processChildren
 } from '../../shared/component-helper'
 // import './style/dnb-notification.scss' // no good solution to import the style here
-import Icon from '../../components/icon/IconPrimary'
+import Icon from '../../components/icon-primary/IconPrimary'
 
 const renderProps = {
   // render_content: null

diff --git a/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js b/packages/dnb-ui-lib/src/patterns/main-nav/MainNav.js
@@ -13,7 +13,7 @@ import {
 } from '../../shared/component-helper'
 // import './style/dnb-main-nav.scss' // no good solution to import the style here
 import Input from '../../components/input/Input'
-import Icon from '../../components/icon/IconPrimary'
+import Icon from '../../components/icon-primary/IconPrimary'
 import Button from '../../components/button/Button'
 import Logo from '../../components/logo/Logo'
 import Notification from '../../components/notification/Notification'