From c490550dc6f2f2b9493a014147c0eda51ccd09b9 Mon Sep 17 00:00:00 2001 From: Tobias Date: Thu, 24 Jan 2019 07:24:40 +0100 Subject: [PATCH] feat: enhance #icon sizing. Also show primary icon under components --- .../scripts/uilib/makeDemosFactory.js | 7 ++- .../pages/uilib/components/icon-primary.md | 2 +- .../pages/uilib/components/input-masked.md | 2 +- .../src/components/button/Button.js | 2 +- .../src/components/dropdown/Dropdown.js | 2 +- .../src/components/icon-primary/Example.js | 22 +++++--- .../components/icon-primary/IconPrimary.js | 56 +++++++++++++++++-- .../__tests__/IconPrimary.test.js | 16 +++++- .../__snapshots__/IconPrimary.test.js.snap | 7 ++- .../src/components/icon-primary/index.js | 4 +- .../dnb-ui-lib/src/components/icon/Icon.js | 21 +++---- .../src/components/icon/IconPrimary.js | 56 ++----------------- .../__snapshots__/Modal.test.js.snap | 14 ++++- .../components/notification/Notification.js | 2 +- .../src/patterns/main-nav/MainNav.js | 2 +- 15 files changed, 124 insertions(+), 91 deletions(-) diff --git a/packages/dnb-design-system-portal/scripts/uilib/makeDemosFactory.js b/packages/dnb-design-system-portal/scripts/uilib/makeDemosFactory.js index 87bdec6c329..6110fc84168 100644 --- 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 index ce99e62e74a..55a4f739a37 100644 --- 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 index 6260bb06c57..4b25edcf5ec 100644 --- 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 index dac005bda53..2373dfcf11b 100644 --- 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 index ced3f448ec4..c1627c41e1a 100644 --- 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 index d61410d4551..ca3ef7d3d5b 100644 --- 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 ( - - - - + + + + ) } diff --git a/packages/dnb-ui-lib/src/components/icon-primary/IconPrimary.js b/packages/dnb-ui-lib/src/components/icon-primary/IconPrimary.js index eff2d8be936..10f98d8912c 100644 --- 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 ( + + + + ) + } +} 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 index 0ad4c86d153..30e8d539300 100644 --- 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( @@ -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( + + ) + 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() expect(await axeComponent(Comp)).toHaveNoViolations() diff --git a/packages/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap b/packages/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap index 00dc451b359..8602ff69ac8 100644 --- a/packages/dnb-ui-lib/src/components/icon-primary/__tests__/__snapshots__/IconPrimary.test.js.snap +++ b/packages/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} > - + 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 index 8476ac8e51d..3b7ac46fe39 100644 --- 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 ( - - - - ) - } -} +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 index 1a490639e2a..95a97934a03 100644 --- 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} > - + - +