feat: make #icon sizing more robust

packages/dnb-design-system-portal/src/pages/uilib/getting-started.md

@@ -19,7 +19,7 @@ Do you want to...
 - make changes to the overall `ui-lib`?
 - change texts and content of the Eufemia Design System Portal (website)?
 
-## Is there more?
+## So, how do I getting started?
 
 Check out all the articles in [the usage section](/uilib/usage/)
 

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

@@ -77,7 +77,6 @@ exports[`Button component have to match default button snapshot 1`] = `
         <span
           alt="This is a button title"
           aria-hidden={true}
-          aria-label="This is a button title"
           className="dnb-icon dnb-button__icon"
           role="img"
         >
@@ -181,7 +180,6 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         <span
           alt="This is a button title"
           aria-hidden={true}
-          aria-label="This is a button title"
           className="dnb-icon dnb-button__icon"
           role="img"
         >

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

@@ -50,7 +50,7 @@ import Bell from 'dnb-ui-lib/icons/bell'
   icon={Bell}
   width="24"
   height="24"
-  title="custom size: width=24 and height=24"
+  title="not responsive"
 />
           `}
         </ComponentBox>

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

@@ -137,6 +137,7 @@ export const calcSize = props => {
     const name = getIconNameFromComponent(icon)
 
     const nameParts = String(name || '').split('_')
+
     if (nameParts.length > 1) {
       const lastPartOfIconName = nameParts.reverse()[0]
       const potentialSize = ListDefaultIconSizes.filter(
@@ -150,6 +151,24 @@ export const calcSize = props => {
       if (ValidIconSizes.includes(lastPartOfIconName)) {
         sizeAsString = lastPartOfIconName
       }
+    } else {
+      if (typeof icon === 'function') {
+        const elem = icon()
+        if (elem.props) {
+          let potentialSize = -1
+          if (elem.props.width) {
+            potentialSize = elem.props.width
+          }
+          if (!potentialSize && elem.props.viewBox) {
+            potentialSize = /[0-9]+ [0-9]+ ([0-9]+)/.exec(
+              elem.props.viewBox
+            )[1] // get the width
+          }
+          if (potentialSize) {
+            sizeAsInt = potentialSize
+          }
+        }
+      }
     }
   }
 
@@ -293,9 +312,9 @@ export const prepareIcon = props => {
   // also used for code markup simulation
   const wrapperParams = validateDOMAttributes(props, {
     role: 'img',
-    alt,
-    ['aria-label']: alt,
-    title,
+    alt, // in case the image don't shows up (because we define the role to be img)
+    ['aria-label']: !attributes['aria-hidden'] ? alt : null, // for screen readers only
+    title, // to show on hover, if defined
     ...attributes
   })
 

packages/dnb-ui-lib/src/core/jest/jestPuppeteerEnvironment.js

@@ -9,7 +9,7 @@ const fs = require('fs')
 const isCi = require('is-ci')
 const path = require('path')
 const puppeteer = require('puppeteer')
-const { DIR } = require('./jestSetupScreenshots')
+const { DIR } = require('./jestSetupScreenshots').config
 
 class PuppeteerEnvironment extends NodeEnvironment {
   constructor(config) {

packages/dnb-ui-lib/src/core/jest/jestPuppeteerSetup.js

@@ -15,9 +15,10 @@ const detectPort = require('detect-port')
 const packpath = require('packpath')
 const {
   DIR,
+  headless,
   testScreenshotOnHost,
   testScreenshotOnPort
-} = require('./jestSetupScreenshots')
+} = require('./jestSetupScreenshots').config
 
 const startStaticServer = () =>
   new Promise(async resolve => {
@@ -32,8 +33,8 @@ const startStaticServer = () =>
         // serve({
         //   directory: root,
         //   open: false,
-        //   host: testScreenshotOnHost,
-        //   port: testScreenshotOnPort
+        //   host: config.testScreenshotOnHost,
+        //   port: config.testScreenshotOnPort
         // })
         const params = {
           host: testScreenshotOnHost,
@@ -60,7 +61,6 @@ module.exports = async function() {
   console.log(chalk.green('Setup Puppeteer'))
   await startStaticServer()
 
-  const headless = true
   const browser = await puppeteer.launch({
     headless,
     devtools: !headless,

packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js

@@ -12,7 +12,7 @@ const rimraf = require('rimraf')
 const isCi = require('is-ci')
 const liveServer = require('live-server')
 import { commitToBranch } from '../../../scripts/prepub/commitToBranch'
-const { DIR } = require('./jestSetupScreenshots')
+const { DIR } = require('./jestSetupScreenshots').config
 
 module.exports = async function() {
   if (isCi) {

packages/dnb-ui-lib/src/core/jest/jestSetupScreenshots.js

@@ -8,21 +8,22 @@ const path = require('path')
 const os = require('os')
 const { setupJestScreenshot } = require('jest-screenshot')
 
-const testScreenshotOnHost = '127.0.0.1'
-// use same port as the local dev setup, this way we can test from the dev setup as well
-const testScreenshotOnPort = 8000
-module.exports.testScreenshotOnHost = testScreenshotOnHost
-module.exports.testScreenshotOnPort = testScreenshotOnPort
-module.exports.DIR = path.join(os.tmpdir(), 'jest_puppeteer_global_setup')
-
-const pageSettings = {
-  width: 1280,
-  height: 1024,
-  isMobile: false,
-  hasTouch: false,
-  isLandscape: false,
-  deviceScaleFactor: 1
+const config = {
+  DIR: path.join(os.tmpdir(), 'jest_puppeteer_global_setup'),
+  // use same port as the local dev setup, this way we can test from the dev setup as well
+  testScreenshotOnHost: '127.0.0.1',
+  testScreenshotOnPort: 8000,
+  headless: true,
+  pageSettings: {
+    width: 1280,
+    height: 1024,
+    isMobile: false,
+    hasTouch: false,
+    isLandscape: false,
+    deviceScaleFactor: 1
+  }
 }
+module.exports.config = config
 
 module.exports.testPageScreenshot = ({
   url = null,
@@ -83,7 +84,6 @@ module.exports.testPageScreenshot = ({
 
               background: 'white',
 
-              // width: `${width}px`,// only go for the "inline-block"
               height: `${height + 32}px` // because we use "inline-block" - we have to make the height absolute
             })
           }
@@ -150,7 +150,9 @@ module.exports.testPageScreenshot = ({
         await page.waitFor(delay)
       }
 
-      // await page.waitFor(6e3)
+      if (!config.headless) {
+        await page.waitFor(1e3)
+      }
 
       resolve(screenshot)
     } catch (e) {
@@ -172,7 +174,7 @@ module.exports.setupPageScreenshot = ({ timeout, url, ...rest } = {}) => {
     const context = await global.__BROWSER__.createIncognitoBrowserContext()
     const page = await context.newPage()
 
-    await page.setViewport(pageSettings)
+    await page.setViewport(config.pageSettings)
 
     await page.setRequestInterception(true) // is needed in order to use on "request"
     page.on('request', req => {
@@ -204,10 +206,9 @@ module.exports.loadImage = async imagePath =>
 
 // make sure "${url}/" has actually a slash on the end
 const createUrl = url =>
-  `http://${testScreenshotOnHost}:${testScreenshotOnPort}/${url}/?data-dnb-test&fullscreen`.replace(
-    /\/\//g,
-    '/'
-  )
+  `http://${config.testScreenshotOnHost}:${
+    config.testScreenshotOnPort
+  }/${url}/?data-dnb-test&fullscreen`.replace(/\/\//g, '/')
 
 const makeStyles = style =>
   Object.entries(style)