fix: ensure that #skeleton animation actually runs

dnbexperience · Oct 5, 2020 · 9839f7b · 9839f7b
1 parent 38929ea
commit 9839f7b
Show file tree

Hide file tree

Showing 9 changed files with 12 additions and 9 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/skeleton/demos.md
@@ -83,7 +83,7 @@ You may import a given figure, or create your own.
 import { Article } from 'dnb-ui-lib/components/skeleton/figures'
 ```
 
-<ComponentBox scope={{Article}}>
+<ComponentBox scope={{Article}} data-dnb-test="skeleton-shine">
 {`
 <Skeleton
 	show

diff --git a/packages/dnb-ui-lib/src/components/skeleton/__tests__/Skeleton.screenshot.test.js b/packages/dnb-ui-lib/src/components/skeleton/__tests__/Skeleton.screenshot.test.js
@@ -1,6 +1,6 @@
 /**
  * Screenshot Test
- * This file will not run on "test:staged" because we dont require any related files
+ * This file will not run on "test:staged" because we don't require any related files
  */
 
 import {
@@ -10,6 +10,13 @@ import {
 
 describe('Skeleton screenshot', () => {
   setupPageScreenshot({ url: '/uilib/components/skeleton/demos' })
+  it('have to match shine effect', async () => {
+    const screenshot = await testPageScreenshot({
+      style: { width: '20rem', height: '20rem' },
+      selector: '[data-dnb-test="skeleton-shine"]'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
   it('have to match excluded components', async () => {
     const screenshot = await testPageScreenshot({
       style: { width: '20rem', height: '20rem' },

diff --git a/packages/dnb-ui-lib/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap b/packages/dnb-ui-lib/src/components/skeleton/__tests__/__snapshots__/Skeleton.test.js.snap
@@ -341,8 +341,7 @@ exports[`Skeleton scss have to match snapshot 1`] = `
 html[data-dnb-test] .dnb-skeleton,
 html[data-dnb-test] .dnb-skeleton::after,
 html[data-dnb-test] .dnb-skeleton--shine .dnb-skeleton::after {
-  animation: none !important;
-  background-image: none !important; }
+  animation: none !important; }
 
 @keyframes skeletonFontAnimation {
   0% {

diff --git a/...js-skeleton-screenshot-have-to-match-all-components-horizontal-1-e648b.snap.png b/...js-skeleton-screenshot-have-to-match-all-components-horizontal-1-e648b.snap.png
diff --git a/...t-js-skeleton-screenshot-have-to-match-all-components-vertical-1-7ac34.snap.png b/...t-js-skeleton-screenshot-have-to-match-all-components-vertical-1-7ac34.snap.png
diff --git a/...-test-js-skeleton-screenshot-have-to-match-excluded-components-1-940df.snap.png b/...-test-js-skeleton-screenshot-have-to-match-excluded-components-1-940df.snap.png
diff --git a/...eenshot-test-js-skeleton-screenshot-have-to-match-shine-effect-1-0ab08.snap.png b/...eenshot-test-js-skeleton-screenshot-have-to-match-shine-effect-1-0ab08.snap.png
diff --git a/packages/dnb-ui-lib/src/components/skeleton/style/_skeleton.scss b/packages/dnb-ui-lib/src/components/skeleton/style/_skeleton.scss
@@ -119,9 +119,6 @@
   html[data-dnb-test] &::after,
   html[data-dnb-test] &--shine &::after {
     animation: none !important;
-
-    // Looks like on CI (Linux) the lines do not work? Skip then for now
-    background-image: none !important;
   }
 
   // Not used right now!

diff --git a/packages/dnb-ui-lib/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss b/packages/dnb-ui-lib/src/components/skeleton/style/themes/dnb-skeleton-theme-ui.scss
@@ -33,7 +33,7 @@
   &--lines#{&}--shape#{&}::after {
     background-image: repeating-linear-gradient(
       -45deg,
-      var(--skeleton-color--contrast) 0 1px,
+      var(--skeleton-color--contrast) 1px 2px,
       transparent 0 6px
     ) !important;
     background-repeat: repeat !important;
@@ -80,7 +80,7 @@
   &--font {
     background-image: repeating-linear-gradient(
       -45deg,
-      var(--skeleton-color--contrast) 0 1px,
+      var(--skeleton-color--contrast) 1px 2px,
       transparent 0 6px
     ) !important;