Merge pull request #1366 from City-of-Helsinki/HDS-2272-fix-koros

Release-4.0.0 HDS-2272 fix koros examples, remova old and add new visual tests
City-of-Helsinki · Sep 20, 2024 · 6c540cc · 6c540cc
2 parents e5ad4da + 67273dd
commit 6c540cc
Show file tree

Hide file tree

Showing 83 changed files with 139 additions and 133 deletions.
diff --git a/e2e/tests/core/components/core-koros-spec.ts b/e2e/tests/core/components/core-koros-spec.ts
@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { takeAllStorySnapshots } from '../../../helpers';
+
+const componentName = 'koros';
+const storybook = 'core';
+const takeStateSnapshots = false;
+
+test.describe(`Testing ${storybook} component "${componentName}"`, () => {
+  test('Take snapshots of all stories', async ({ page, isMobile }) => {
+    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  });
+});
diff --git a/...omponents/core-koros-spec.ts-snapshots/core-components-koros--basic-desktop.png b/...omponents/core-koros-spec.ts-snapshots/core-components-koros--basic-desktop.png
diff --git a/...components/core-koros-spec.ts-snapshots/core-components-koros--basic-mobile.png b/...components/core-koros-spec.ts-snapshots/core-components-koros--basic-mobile.png
diff --git a/...components/core-koros-spec.ts-snapshots/core-components-koros--beat-desktop.png b/...components/core-koros-spec.ts-snapshots/core-components-koros--beat-desktop.png
diff --git a/.../components/core-koros-spec.ts-snapshots/core-components-koros--beat-mobile.png b/.../components/core-koros-spec.ts-snapshots/core-components-koros--beat-mobile.png
diff --git a/...components/core-koros-spec.ts-snapshots/core-components-koros--calm-desktop.png b/...components/core-koros-spec.ts-snapshots/core-components-koros--calm-desktop.png
diff --git a/.../components/core-koros-spec.ts-snapshots/core-components-koros--calm-mobile.png b/.../components/core-koros-spec.ts-snapshots/core-components-koros--calm-mobile.png
diff --git a/...ts/core-koros-spec.ts-snapshots/core-components-koros--custom-color-desktop.png b/...ts/core-koros-spec.ts-snapshots/core-components-koros--custom-color-desktop.png
diff --git a/...nts/core-koros-spec.ts-snapshots/core-components-koros--custom-color-mobile.png b/...nts/core-koros-spec.ts-snapshots/core-components-koros--custom-color-mobile.png
diff --git a/...omponents/core-koros-spec.ts-snapshots/core-components-koros--dense-desktop.png b/...omponents/core-koros-spec.ts-snapshots/core-components-koros--dense-desktop.png
diff --git a/...components/core-koros-spec.ts-snapshots/core-components-koros--dense-mobile.png b/...components/core-koros-spec.ts-snapshots/core-components-koros--dense-mobile.png
diff --git a/...ponents/core-koros-spec.ts-snapshots/core-components-koros--flipped-desktop.png b/...ponents/core-koros-spec.ts-snapshots/core-components-koros--flipped-desktop.png
diff --git a/...mponents/core-koros-spec.ts-snapshots/core-components-koros--flipped-mobile.png b/...mponents/core-koros-spec.ts-snapshots/core-components-koros--flipped-mobile.png
diff --git a/...omponents/core-koros-spec.ts-snapshots/core-components-koros--pulse-desktop.png b/...omponents/core-koros-spec.ts-snapshots/core-components-koros--pulse-desktop.png
diff --git a/...components/core-koros-spec.ts-snapshots/core-components-koros--pulse-mobile.png b/...components/core-koros-spec.ts-snapshots/core-components-koros--pulse-mobile.png
diff --git a/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-135-deg-desktop.png b/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-135-deg-desktop.png
diff --git a/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-135-deg-mobile.png b/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-135-deg-mobile.png
diff --git a/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-225-deg-desktop.png b/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-225-deg-desktop.png
diff --git a/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-225-deg-mobile.png b/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-225-deg-mobile.png
diff --git a/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-270-deg-desktop.png b/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-270-deg-desktop.png
diff --git a/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-270-deg-mobile.png b/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-270-deg-mobile.png
diff --git a/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-315-deg-desktop.png b/...oros-spec.ts-snapshots/core-components-koros--rotated-basic-315-deg-desktop.png
diff --git a/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-315-deg-mobile.png b/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-315-deg-mobile.png
diff --git a/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-45-deg-desktop.png b/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-45-deg-desktop.png
diff --git a/...-koros-spec.ts-snapshots/core-components-koros--rotated-basic-45-deg-mobile.png b/...-koros-spec.ts-snapshots/core-components-koros--rotated-basic-45-deg-mobile.png
diff --git a/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-90-deg-desktop.png b/...koros-spec.ts-snapshots/core-components-koros--rotated-basic-90-deg-desktop.png
diff --git a/...-koros-spec.ts-snapshots/core-components-koros--rotated-basic-90-deg-mobile.png b/...-koros-spec.ts-snapshots/core-components-koros--rotated-basic-90-deg-mobile.png
diff --git a/...nents/core-koros-spec.ts-snapshots/core-components-koros--vibration-desktop.png b/...nents/core-koros-spec.ts-snapshots/core-components-koros--vibration-desktop.png
diff --git a/...onents/core-koros-spec.ts-snapshots/core-components-koros--vibration-mobile.png b/...onents/core-koros-spec.ts-snapshots/core-components-koros--vibration-mobile.png
diff --git a/e2e/tests/react/components/react-koros-spec.ts b/e2e/tests/react/components/react-koros-spec.ts
@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { takeAllStorySnapshots } from '../../../helpers';
+
+const componentName = 'koros';
+const storybook = 'react';
+const takeStateSnapshots = false;
+
+test.describe(`Testing ${storybook} component "${componentName}"`, () => {
+  test('Take snapshots of all stories', async ({ page, isMobile }) => {
+    await takeAllStorySnapshots({ page, isMobile, takeStateSnapshots, storybook, componentName });
+  });
+});
diff --git a/...ponents/react-koros-spec.ts-snapshots/react-components-koros--basic-desktop.png b/...ponents/react-koros-spec.ts-snapshots/react-components-koros--basic-desktop.png
diff --git a/...mponents/react-koros-spec.ts-snapshots/react-components-koros--basic-mobile.png b/...mponents/react-koros-spec.ts-snapshots/react-components-koros--basic-mobile.png
diff --git a/...mponents/react-koros-spec.ts-snapshots/react-components-koros--beat-desktop.png b/...mponents/react-koros-spec.ts-snapshots/react-components-koros--beat-desktop.png
diff --git a/...omponents/react-koros-spec.ts-snapshots/react-components-koros--beat-mobile.png b/...omponents/react-koros-spec.ts-snapshots/react-components-koros--beat-mobile.png
diff --git a/...mponents/react-koros-spec.ts-snapshots/react-components-koros--calm-desktop.png b/...mponents/react-koros-spec.ts-snapshots/react-components-koros--calm-desktop.png
diff --git a/...omponents/react-koros-spec.ts-snapshots/react-components-koros--calm-mobile.png b/...omponents/react-koros-spec.ts-snapshots/react-components-koros--calm-mobile.png
diff --git a/.../react-koros-spec.ts-snapshots/react-components-koros--custom-color-desktop.png b/.../react-koros-spec.ts-snapshots/react-components-koros--custom-color-desktop.png
diff --git a/...s/react-koros-spec.ts-snapshots/react-components-koros--custom-color-mobile.png b/...s/react-koros-spec.ts-snapshots/react-components-koros--custom-color-mobile.png
diff --git a/...ponents/react-koros-spec.ts-snapshots/react-components-koros--dense-desktop.png b/...ponents/react-koros-spec.ts-snapshots/react-components-koros--dense-desktop.png
diff --git a/...mponents/react-koros-spec.ts-snapshots/react-components-koros--dense-mobile.png b/...mponents/react-koros-spec.ts-snapshots/react-components-koros--dense-mobile.png
diff --git a/...nts/react-koros-spec.ts-snapshots/react-components-koros--exact-fit-desktop.png b/...nts/react-koros-spec.ts-snapshots/react-components-koros--exact-fit-desktop.png
diff --git a/...ents/react-koros-spec.ts-snapshots/react-components-koros--exact-fit-mobile.png b/...ents/react-koros-spec.ts-snapshots/react-components-koros--exact-fit-mobile.png
diff --git a/...nents/react-koros-spec.ts-snapshots/react-components-koros--flipped-desktop.png b/...nents/react-koros-spec.ts-snapshots/react-components-koros--flipped-desktop.png
diff --git a/...onents/react-koros-spec.ts-snapshots/react-components-koros--flipped-mobile.png b/...onents/react-koros-spec.ts-snapshots/react-components-koros--flipped-mobile.png
diff --git a/...ponents/react-koros-spec.ts-snapshots/react-components-koros--pulse-desktop.png b/...ponents/react-koros-spec.ts-snapshots/react-components-koros--pulse-desktop.png
diff --git a/...mponents/react-koros-spec.ts-snapshots/react-components-koros--pulse-mobile.png b/...mponents/react-koros-spec.ts-snapshots/react-components-koros--pulse-mobile.png
diff --git a/...nents/react-koros-spec.ts-snapshots/react-components-koros--rotated-desktop.png b/...nents/react-koros-spec.ts-snapshots/react-components-koros--rotated-desktop.png
diff --git a/...oros-spec.ts-snapshots/react-components-koros--rotated-in-container-desktop.png b/...oros-spec.ts-snapshots/react-components-koros--rotated-in-container-desktop.png
diff --git a/...koros-spec.ts-snapshots/react-components-koros--rotated-in-container-mobile.png b/...koros-spec.ts-snapshots/react-components-koros--rotated-in-container-mobile.png
diff --git a/...onents/react-koros-spec.ts-snapshots/react-components-koros--rotated-mobile.png b/...onents/react-koros-spec.ts-snapshots/react-components-koros--rotated-mobile.png
diff --git a/...nts/react-koros-spec.ts-snapshots/react-components-koros--vibration-desktop.png b/...nts/react-koros-spec.ts-snapshots/react-components-koros--vibration-desktop.png
diff --git a/...ents/react-koros-spec.ts-snapshots/react-components-koros--vibration-mobile.png b/...ents/react-koros-spec.ts-snapshots/react-components-koros--vibration-mobile.png
diff --git a/...mponents/react-koros-spec.ts-snapshots/react-components-koros--wave-desktop.png b/...mponents/react-koros-spec.ts-snapshots/react-components-koros--wave-desktop.png
diff --git a/...omponents/react-koros-spec.ts-snapshots/react-components-koros--wave-mobile.png b/...omponents/react-koros-spec.ts-snapshots/react-components-koros--wave-mobile.png
diff --git a/packages/core/src/components/koros/koros.stories.js b/packages/core/src/components/koros/koros.stories.js
@@ -99,11 +99,11 @@ export const Dense = () => `
   <div class="hds-koros">
     <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
       <defs>
-        <pattern id="korosPulseDense" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
-          <path transform="scale(3)" d="m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z" />
+        <pattern id="korosPulseDense" x="0" y="0" width="32" height="85" patternUnits="userSpaceOnUse">
+          <path transform="scale(1)" d="m0 10v75h32v-75c-8 0-8-10-16-10s-8 10-16 10z" />
         </pattern>
       </defs>
-      <rect fill="url(#korosPulseDense)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      <rect fill="url(#korosPulseDense)" width="100%" height="85" style="shape-rendering: crispedges;" />
     </svg>
   </div>
 
@@ -200,80 +200,92 @@ export const Flipped = () => `
 `;
 
 export const RotatedBasic45deg = () => `
-  <div class="hds-koros hds-koros--45deg" style="transform-origin: 43px">
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
-      <defs>
-        <pattern id="korosBasic45deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
-          <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
-        </pattern>
-      </defs>
-      <rect fill="url(#korosBasic45deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
-    </svg>
+  <div style="min-height: 200px;">
+    <div class="hds-koros hds-koros--45deg" style="transform-origin: 43px">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
+        <defs>
+          <pattern id="korosBasic45deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
+            <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
+          </pattern>
+        </defs>
+        <rect fill="url(#korosBasic45deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      </svg>
+    </div>
   </div>
 `;
 
 export const RotatedBasic90deg = () => `
-  <div class="hds-koros hds-koros--90deg" style="transform-origin: 43px">
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
-      <defs>
-        <pattern id="korosBasic90deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
-          <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
-        </pattern>
-      </defs>
-      <rect fill="url(#korosBasic90deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
-    </svg>
+  <div style="min-height: 200px;">
+    <div class="hds-koros hds-koros--90deg" style="transform-origin: 43px">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
+        <defs>
+          <pattern id="korosBasic90deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
+            <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
+          </pattern>
+        </defs>
+        <rect fill="url(#korosBasic90deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      </svg>
+    </div>
   </div>
 `;
 
 export const RotatedBasic135deg = () => `
-  <div class="hds-koros hds-koros--135deg" style="transform-origin: left; position: absolute; left: calc((100% / 1.4) + 43px);">
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
-      <defs>
-        <pattern id="korosBasic135deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
-          <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
-        </pattern>
-      </defs>
-      <rect fill="url(#korosBasic135deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
-    </svg>
+  <div style="min-height: 200px;">
+    <div class="hds-koros hds-koros--135deg" style="transform-origin: left; position: absolute; left: calc((100% / 1.4) + 43px);">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
+        <defs>
+          <pattern id="korosBasic135deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
+            <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
+          </pattern>
+        </defs>
+        <rect fill="url(#korosBasic135deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      </svg>
+    </div>
   </div>
 `;
 
 export const RotatedBasic225deg = () => `
-  <div class="hds-koros hds-koros--225deg" style="transform-origin: left; position: absolute; bottom: 0; left: calc((100% / 1.4) + 43px);">
-  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
-    <defs>
-      <pattern id="korosBasic225deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
-        <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
-      </pattern>
-    </defs>
-    <rect fill="url(#korosBasic225deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
-  </svg>
-  </div>
-`;
-
-export const RotatedBasic270deg = () => `
-  <div class="hds-koros hds-koros--270deg" style="transform-origin: calc(100% - 85px) 100%">
+  <div style="min-height: 200px;">
+    <div class="hds-koros hds-koros--225deg" style="transform-origin: left; position: absolute; bottom: 0; left: calc((100% / 1.4) + 43px);">
     <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
       <defs>
-        <pattern id="korosBasic270deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
+        <pattern id="korosBasic225deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
           <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
         </pattern>
       </defs>
-      <rect fill="url(#korosBasic270deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      <rect fill="url(#korosBasic225deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
     </svg>
+    </div>
+  </div>
+`;
+
+export const RotatedBasic270deg = () => `
+  <div style="min-height: 200px;">
+    <div class="hds-koros hds-koros--270deg" style="transform-origin: calc(100% - 85px) 100%">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
+        <defs>
+          <pattern id="korosBasic270deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
+            <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
+          </pattern>
+        </defs>
+        <rect fill="url(#korosBasic270deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      </svg>
+    </div>
   </div>
 `;
 
 export const RotatedBasic315deg = () => `
-  <div class="hds-koros hds-koros--315deg" style="transform-origin: bottom right;">
-    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
-      <defs>
-        <pattern id="korosBasic315deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
-          <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
-        </pattern>
-      </defs>
-      <rect fill="url(#korosBasic315deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
-    </svg>
+  <div style="min-height: 200px;">
+    <div class="hds-koros hds-koros--315deg" style="transform-origin: bottom right;">
+      <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="100%" height="85">
+        <defs>
+          <pattern id="korosBasic315deg" x="0" y="0" width="96" height="85" patternUnits="userSpaceOnUse">
+            <path transform="scale(3)" d="m0 5v80h32v-80c-8 0-8-5-16-5s-8 5-16 5z" />
+          </pattern>
+        </defs>
+        <rect fill="url(#korosBasic315deg)" width="100%" height="85" style="shapeRendering:'crispEdges'" />
+      </svg>
+    </div>
   </div>
 `;
 

diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Basic.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Basic.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Beat.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Beat.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Calm.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Calm.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Custom_Color.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Custom_Color.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Dense.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Dense.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Exact_Fit.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Exact_Fit.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Flipped.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Flipped.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Playground.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Playground.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Pulse.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Pulse.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Rotated.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Rotated.png
diff --git a/.../react/.loki/reference/chrome_iphone7_Components_Koros_Rotated_In_Container.png b/.../react/.loki/reference/chrome_iphone7_Components_Koros_Rotated_In_Container.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Vibration.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Vibration.png
diff --git a/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Wave.png b/packages/react/.loki/reference/chrome_iphone7_Components_Koros_Wave.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Basic.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Basic.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Beat.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Beat.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Calm.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Calm.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Custom_Color.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Custom_Color.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Dense.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Dense.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Exact_Fit.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Exact_Fit.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Flipped.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Flipped.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Playground.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Playground.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Pulse.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Pulse.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Rotated.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Rotated.png
diff --git a/...s/react/.loki/reference/chrome_laptop_Components_Koros_Rotated_In_Container.png b/...s/react/.loki/reference/chrome_laptop_Components_Koros_Rotated_In_Container.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Vibration.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Vibration.png
diff --git a/packages/react/.loki/reference/chrome_laptop_Components_Koros_Wave.png b/packages/react/.loki/reference/chrome_laptop_Components_Koros_Wave.png
diff --git a/packages/react/.lokirc.json b/packages/react/.lokirc.json
@@ -12,7 +12,7 @@
       "preset": "iPhone 7"
     }
   },
-  "skipStories": "Icons/.*|Button/*|Tag/*|Hero/*",
+  "skipStories": "Icons/.*|Button/*|Tag/*|Hero/*|Koros/*",
   "pixelmatch": {
     "threshold": 0.2,
     "alpha": 1,