diff --git a/packages/dnb-design-system-portal/src/pages/uilib/getting-started.md b/packages/dnb-design-system-portal/src/pages/uilib/getting-started.md index 81b01f12f2a..2d675ba6af7 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/getting-started.md +++ b/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/) diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap index f7e25734c28..d4bfbd442ef 100644 --- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap +++ b/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`] = ` @@ -181,7 +180,6 @@ exports[`Button component have to match href="..." snapshot 1`] = ` diff --git a/packages/dnb-ui-lib/src/components/icon/Example.js b/packages/dnb-ui-lib/src/components/icon/Example.js index 88bd24e0d0f..65cf9b40057 100644 --- a/packages/dnb-ui-lib/src/components/icon/Example.js +++ b/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" /> `} diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js index 2d9a63115d4..17098145332 100644 --- a/packages/dnb-ui-lib/src/components/icon/Icon.js +++ b/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 }) diff --git a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerEnvironment.js b/packages/dnb-ui-lib/src/core/jest/jestPuppeteerEnvironment.js index a3daf447915..a1a308936f5 100644 --- a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerEnvironment.js +++ b/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) { diff --git a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerSetup.js b/packages/dnb-ui-lib/src/core/jest/jestPuppeteerSetup.js index e4a17d2f9c9..20e6e24cb85 100644 --- a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerSetup.js +++ b/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, diff --git a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js b/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js index 601d352430e..e041da1ab48 100644 --- a/packages/dnb-ui-lib/src/core/jest/jestPuppeteerTeardown.js +++ b/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) { diff --git a/packages/dnb-ui-lib/src/core/jest/jestSetupScreenshots.js b/packages/dnb-ui-lib/src/core/jest/jestSetupScreenshots.js index dab8a47063b..82a095ed192 100644 --- a/packages/dnb-ui-lib/src/core/jest/jestSetupScreenshots.js +++ b/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) diff --git a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png index 4b9b48c52ff..7fb7ccc34b3 100644 Binary files a/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png and b/packages/dnb-ui-lib/src/style/elements/__tests__/__snapshots__/table-screenshot-test-js-table-screenshot-have-to-match-the-default-choice-of-table-styles-1-b0b7d.snap.png differ