feat: give the #icon component the possibility to use/force size so i…

…ts inherit size is used

packages/dnb-design-system-portal/src/pages/icons/secondary.md

@@ -13,7 +13,7 @@ The Secondary Icons are an addition to the [Primary Icons](/icons/primary). They
 
 The Secondary Icons can be extended infinitely.
 
-**Technically:** The consequence is that they have to be [imported](/uilib/components/icon#info) where ever they have to be used.
+**Technically:** The consequence is that they have to be [imported](/uilib/components/icon) where ever they have to be used.
 
 #### A list of all Secondary Icons
 

packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility.md

@@ -2,7 +2,7 @@
 title: 'Accessibility'
 status: 'wip'
 draft: false
-order: 3
+order: 4
 ---
 
 # Accessibility

packages/dnb-design-system-portal/src/pages/uilib/usage/accessibility/icons.md

@@ -8,10 +8,27 @@ import Beach from 'Pages/uilib/usage/accessibility/assets/beach'
 
 # Accessibility of Icons
 
+By using Inline SVG, we have today the possibility to make graphical assets both **responsive** and **interactive**. In order to do so, use the [Icon](/uilib/components/icon) or [IconPrimary](/uilib/components/icon-primary) component. These components provides the needed runtime processing, witch is needed to get there.
+
+## Decorative Icons
+
 If your icons are purely **decorative**, you’ll need to manually add an **aria-hidden** (results in `aria-hidden="true"`) attribute to each of your icons so Your app is "accessible".
 
 <ComponentBox scope={{Beach}}>
 {`
 <Icon icon={Beach} size="60" title="Beach" aria-hidden />
 `}
 </ComponentBox>
+
+## Responsive Icons
+
+Use `size="auto"` to force the icon to inherit the size of its parent element.
+
+<ComponentBox scope={{Beach}}>
+{`
+<>
+  <h1>My H1 with an Icon <Icon icon={Beach} title="Beach" size="auto" /></h1>
+  <h4>My H4 with the same Icon <Icon icon={Beach} title="Beach" size="auto" /></h4>
+</>
+`}
+</ComponentBox>

packages/dnb-design-system-portal/src/pages/uilib/usage/best-practices.md

@@ -3,6 +3,7 @@ title: 'Best Practices'
 menuTitle: 'Best Practices ...'
 status: 'wip'
 draft: false
+order: 5
 ---
 
 # Best Practices

packages/dnb-design-system-portal/src/pages/uilib/usage/best-practices/for-styling.md

@@ -58,3 +58,4 @@ Here is a list of what we should use as layout and styling units to embrace the
 - **`rem`**: Use _rem_ as a default sizing unit - when ever other units don't are favorited.
 - **`em`**: Use _em_ only on complex layouts, when ever You need the sizes to respond to constrains. But use _em_ for CSS `@media` queries for the best browser compatibility.
 - **`px`**: Use _pixels_ on visual helper lines and borders. Borders don't need necessarily to be responsive.
+- **`viewport units and percentage`**: Use these units to make layout and component withs responsive. Also placing and positioning layout wrappers, with these units, may give the user a good experience.

packages/dnb-design-system-portal/src/pages/uilib/usage/customisation.md

@@ -2,6 +2,7 @@
 title: 'Customisation'
 status: 'wip'
 draft: false
+order: 3
 ---
 
 # Customisation

packages/dnb-ui-lib/scripts/figma/tasks/iconsConverter.js

@@ -118,7 +118,7 @@ const runFrameIconsFactory = async ({
 
     // also skip if there are too many underlines
     // because too many underlines will probably indicate that it is not menat to have it inside
-    const iconName = prepareIconName(name, iconNameAdditions)
+    const iconName = prerenderIconName(name, iconNameAdditions)
     if (iconName.split(/_/g).length > 4) {
       log.fail(
         `${iconName} was skipped, cause it had more than 4 parts on name split by _`
@@ -182,7 +182,7 @@ const runFrameIconsFactory = async ({
     async ([id, url]) => {
       try {
         const { name } = frameDocChildren.find(({ id: i }) => i === id)
-        const iconName = prepareIconName(name, iconNameAdditions)
+        const iconName = prerenderIconName(name, iconNameAdditions)
 
         // deifine the filePath
         const file = path.resolve(iconsDest, iconName)
@@ -250,7 +250,7 @@ const runFrameIconsFactory = async ({
   return listOfProcessedIcons
 }
 
-const prepareIconName = (name, iconNameAdditions = []) => {
+const prerenderIconName = (name, iconNameAdditions = []) => {
   let iconName = name
 
   // in case Icons have "[NAME] ..." somewhere

packages/dnb-ui-lib/src/components/button/Button.js

@@ -58,7 +58,7 @@ export const propTypes = {
 export const defaultProps = {
   type: 'button',
   text: null,
-  variant: null,
+  variant: 'primary',
   size: null,
   title: null,
   icon: null,
@@ -174,7 +174,7 @@ export default class Button extends PureComponent {
 
     const classes = classnames(
       'dnb-button',
-      `dnb-button--${usedVariant}`,
+      usedVariant && `dnb-button--${usedVariant}`,
       usedSize && usedSize !== 'default'
         ? `dnb-button--size-${usedSize}`
         : null,

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

@@ -77,7 +77,7 @@ exports[`Button component have to match default button snapshot 1`] = `
         <span
           aria-hidden="true"
           aria-label="This is a button title"
-          className="dnb-icon dnb-icon--default dnb-button__icon"
+          className="dnb-icon dnb-button__icon"
           role="img"
         >
           <question>
@@ -178,7 +178,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         <span
           aria-hidden="true"
           aria-label="This is a button title"
-          className="dnb-icon dnb-icon--default dnb-button__icon"
+          className="dnb-icon dnb-button__icon"
           role="img"
         >
           <question>
@@ -387,7 +387,6 @@ exports[`Button scss have to match default theme snapshot 1`] = `
       box-shadow: 0 0 0 2px var(--color-emerald-green);
       border-color: transparent; }
   .dnb-button--tertiary[disabled] {
-    cursor: not-allowed;
     color: var(--color-sea-green-alt-30); }
 
 .dnb-button--signal {
@@ -580,6 +579,10 @@ exports[`Button scss have to match snapshot 1`] = `
   .dnb-icon img:not([width]):not([height]) {
     width: inherit;
     height: inherit; }
+  .dnb-icon svg[width='100%'] {
+    width: inherit; }
+  .dnb-icon svg[height='100%'] {
+    height: inherit; }
 
 .dnb-button {
   font-family: sans-serif;

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

@@ -35,7 +35,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
     >
       <span
         aria-label="exclamation"
-        className="dnb-icon dnb-icon--default"
+        className="dnb-icon"
         role="img"
       >
         <exclamation>

packages/dnb-ui-lib/src/components/icon-primary/IconPrimary.js

@@ -5,7 +5,11 @@
 
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import DefaultIcon, { DefaultIconSize, prepareIcon } from '../icon/Icon'
+import DefaultIcon, {
+  DefaultIconSize,
+  prerenderIcon,
+  prepareIcon
+} from '../icon/Icon'
 import * as primary_icons from '../../icons/primary_icons'
 import * as primary_icons_medium from '../../icons/primary_icons_medium'
 
@@ -39,17 +43,17 @@ export default class IconPrimary extends PureComponent {
   }
 
   render() {
-    const { icon, wrapperParams, svgParams, size } = DefaultIcon.prerender(
+    const { icon, wrapperParams, iconParams, size } = prepareIcon(
       this.props
     )
 
-    const IconContainer = prepareIcon({ icon, size, listOfIcons: icons })
+    const IconContainer = prerenderIcon({ icon, size, listOfIcons: icons })
 
     if (!IconContainer) return <></>
 
     return (
       <span {...wrapperParams}>
-        <IconContainer {...svgParams} />
+        <IconContainer {...iconParams} />
       </span>
     )
   }

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

@@ -17,7 +17,7 @@ exports[`IconPrimary component have to match snapshot 1`] = `
 >
   <span
     aria-label="question"
-    className="dnb-icon dnb-icon--default"
+    className="dnb-icon"
     role="img"
   >
     <question>

packages/dnb-ui-lib/src/components/icon-primary/description.md

@@ -1,3 +1,18 @@
+## Description
+
 The PrimaryIcon Component loads by default all [Primary Icons](/icons/primary) so they can easily be included and used without additionally importing every icon.
 
-There is also the "Secondary" [Icon Component](/uilib/components/icon/).
+There is also the basic [Icon](/uilib/components/icon/) component, You can use for all other kinds of graphical icons.
+
+### Icon Sizes
+
+_Exists in the [Icon Library](/icons)_
+
+- **default** `1rem` (16px)
+- **medium** `1.5rem` (24px)
+
+_Additional Sizes_
+
+- **small** `0.75rem` (12px)
+- **large** `2rem` (32px)
+- **custom-size** will not be responsive. Width and Height is set as `pixels`

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

@@ -14,10 +14,10 @@ class Example extends PureComponent {
         <h3>Importing Icons</h3>
         <CodeRenderer language="jsx">{`
 // Named import example
-import { bell } from './icons'
+import { bell as Bell } from 'dnb-ui-lib/icons'
 
 // In case your environment doesn't support tree-shaking, import the icons this way
-import bell from './icons/bell'
+import Bell from 'dnb-ui-lib/icons/bell'
         `}</CodeRenderer>
       </Fragment>
     )