fix: fix #skeleton usage with #number component

packages/dnb-design-system-portal/src/core/portalProviders.js

@@ -58,6 +58,12 @@ export function setLang(locale) {
   }
 }
 export function getSkeletonEnabled() {
+  if (
+    typeof window !== 'undefined' &&
+    window.location.search.includes('skeleton')
+  ) {
+    return true
+  }
   if (global.IS_TEST) {
     return false
   }

packages/dnb-ui-lib/src/components/number/__tests__/Number.screenshot.test.js

@@ -60,3 +60,26 @@ describe('Number screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe('Number with skeleton screenshot', () => {
+  setupPageScreenshot({ url: '/uilib/components/number/demos?skeleton' })
+
+  it('have to match default numbers', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="number-default"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match currency', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="number-currency"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match phone', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="number-phone"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-ui-lib/src/components/skeleton/Skeleton.js

@@ -23,7 +23,7 @@ export default class Skeleton extends React.PureComponent {
     show: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     no_animation: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     style_type: PropTypes.oneOfType([
-      PropTypes.oneOf(['lines', 'dots', 'shine']),
+      PropTypes.oneOf(['lines', 'shine']),
       PropTypes.string
     ]),
     figure: PropTypes.oneOfType([

packages/dnb-ui-lib/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap

@@ -294,12 +294,9 @@ exports[`Skeleton scss have to match snapshot 1`] = `
   pointer-events: none;
   --font-family-book: 'DNBSkeleton' !important;
   --font-family-demi: 'DNBSkeleton' !important;
-  --font-family-default: 'DNBSkeleton' !important; }
-  .dnb-skeleton--font,
-  .dnb-skeleton--font *, .dnb-skeleton--font-only,
-  .dnb-skeleton--font-only * {
-    font-family: var(--font-family-default) !important;
-    font-style: unset !important; }
+  --font-family-default: 'DNBSkeleton' !important;
+  font-family: var(--font-family-default) !important;
+  font-style: unset !important; }
 
 .dnb-skeleton--font {
   background-position-y: 50% !important;
@@ -336,12 +333,13 @@ exports[`Skeleton scss have to match snapshot 1`] = `
     margin-left: 1rem; }
 
 .dnb-skeleton--no-animation .dnb-skeleton,
-.dnb-skeleton--no-animation .dnb-skeleton::after {
-  animation: none !important; }
-
+.dnb-skeleton--no-animation .dnb-skeleton--font,
+.dnb-skeleton--no-animation .dnb-skeleton::after,
+.dnb-skeleton--no-animation * .dnb-skeleton::after,
 html[data-visual-test] .dnb-skeleton,
+html[data-visual-test] .dnb-skeleton--font,
 html[data-visual-test] .dnb-skeleton::after,
-html[data-visual-test] .dnb-skeleton--shine .dnb-skeleton::after {
+html[data-visual-test] * .dnb-skeleton::after {
   animation: none !important; }
 
 @keyframes skeletonFontAnimation {

packages/dnb-ui-lib/src/components/skeleton/style/_skeleton.scss

@@ -54,18 +54,13 @@
   &--font,
   &--font-only {
     pointer-events: none;
-    // ::selection {
-    // }
 
     --font-family-book: 'DNBSkeleton' !important; // Deprecated
     --font-family-demi: 'DNBSkeleton' !important; // Deprecated
     --font-family-default: 'DNBSkeleton' !important;
 
-    &,
-    * {
-      font-family: var(--font-family-default) !important;
-      font-style: unset !important;
-    }
+    font-family: var(--font-family-default) !important;
+    font-style: unset !important;
   }
   &--font {
     background-position-y: 50% !important;
@@ -113,13 +108,13 @@
   }
 
   &--no-animation &,
-  &--no-animation &::after {
-    animation: none !important;
-  }
-
+  &--no-animation &--font,
+  &--no-animation &::after,
+  &--no-animation * &::after,
   html[data-visual-test] &,
+  html[data-visual-test] &--font,
   html[data-visual-test] &::after,
-  html[data-visual-test] &--shine &::after {
+  html[data-visual-test] * &::after {
     animation: none !important;
   }
 

packages/dnb-ui-lib/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss

@@ -45,20 +45,20 @@
     // animation: skeletonShineAnimation 1.5s linear infinite;
   }
 
-  // Dots
-  &--dots &--shape#{&}::after,
-  &--dots#{&}--shape#{&}::after {
-    background-image: radial-gradient(
-      circle,
-      var(--skeleton-color--contrast) 1px,
-      transparent 1px /* Having 2px makes it add lookin in Safari */
-    ) !important; // to take presence
-    background-position-y: 50% !important;
-    background-repeat: repeat !important;
-    background-size: 5px 5px !important; // to take presence
+  // Dots – does not work well for now
+  // &--dots &--shape#{&}::after,
+  // &--dots#{&}--shape#{&}::after {
+  //   background-image: radial-gradient(
+  //     circle,
+  //     var(--skeleton-color--contrast) 1px,
+  //     transparent 1px /* Having 2px makes it add lookin in Safari */
+  //   ) !important; // to take presence
+  //   background-position-y: 50% !important;
+  //   background-repeat: repeat !important;
+  //   background-size: 5px 5px !important; // to take presence
 
-    animation: skeletonLinearAnimation 1.5s linear infinite;
-  }
+  //   animation: skeletonLinearAnimation 1.5s linear infinite;
+  // }
 
   // Shine
   &--shine &--shape#{&}::after,
@@ -79,7 +79,11 @@
   // Font
   &--font,
   &--font-only {
-    *:not(.dnb-skeleton) {
+    /**
+     * Because of paragraphs that contain a span (.dnb-number)
+     * Alternatively we would have to wrap the background-image also, but that does have negative side effects, like if a span has has block as display
+     */
+    > :not(.dnb-skeleton):not(.dnb-skeleton--skip) {
       -webkit-text-fill-color: var(--skeleton-color) !important;
     }
 
@@ -88,6 +92,7 @@
       color: var(--skeleton-color);
     }
   }
+  // Font with Lines
   &--font {
     background-image: repeating-linear-gradient(
       -45deg,

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

@@ -492,10 +492,9 @@ module.exports.loadImage = async (imagePath) =>
 const createUrl = (url, fullscreen = false) => {
   const path = `http://${config.testScreenshotOnHost}:${
     config.testScreenshotOnPort
-  }/${url}?data-visual-test${fullscreen ? '&fullscreen' : ''}`.replace(
-    /\/\//g,
-    '/'
-  )
+  }/${url}${url.includes('?') ? '&' : '?'}data-visual-test${
+    fullscreen ? '&fullscreen' : ''
+  }`.replace(/\/\//g, '/')
 
   return path
 }

packages/dnb-ui-lib/src/style/elements/__tests__/Lists.screenshot.test.js

@@ -12,12 +12,8 @@ import {
 describe('List screenshot', () => {
   setupPageScreenshot({
     url: '/uilib/elements/lists'
-    // screenshotConfig: {
-    //   // use 6% on CI because of the font rendering differences
-    //   pixelThresholdRelative: isCI ? 0.06 : 0
-    // }
   })
-  // the first one is on 5.54%
+
   it('have to match ul list', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="lists-ul"]'
@@ -48,10 +44,45 @@ describe('List screenshot', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
-  it('have to match lists rest', async () => {
+  it('have to match lists reset', async () => {
     const screenshot = await testPageScreenshot({
       selector: '[data-visual-test="lists-reset"]'
     })
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe('Lists with skeleton screenshot', () => {
+  setupPageScreenshot({ url: '/uilib/elements/lists?skeleton' })
+
+  it('have to match ul list', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="lists-ul"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match ol list', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="lists-ol"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match outside ol list', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="lists-ol-style-position"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match ol list with custom types', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="lists-ol-types"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match dl list', async () => {
+    const screenshot = await testPageScreenshot({
+      selector: '[data-visual-test="lists-dl"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-ui-lib/src/style/elements/__tests__/Table.screenshot.test.js

@@ -105,7 +105,6 @@ describe('Table screenshot', () => {
       '[data-visual-test="table-classes"] th.dnb-table--sortable.dnb-table--active'
     const screenshot = await testPageScreenshot({
       style: {
-        // display:'block',
         'background-color': 'white'
       },
       styleSelector,
@@ -116,3 +115,17 @@ describe('Table screenshot', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe('Table with skeleton screenshot', () => {
+  setupPageScreenshot({ url: '/uilib/elements/tables?skeleton' })
+
+  it('have to match default table', async () => {
+    const screenshot = await testPageScreenshot({
+      style: {
+        width: '40rem'
+      },
+      selector: '[data-visual-test="table-default"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-ui-lib/src/style/elements/table.scss

@@ -350,6 +350,12 @@
   }
 
   /* stylelint-enable */
+
+  &.dnb-skeleton {
+    * {
+      -webkit-text-fill-color: var(--skeleton-color);
+    }
+  }
 }
 
 @mixin resetTableSpacing() {