@zohodesk/components 1.0.0-temp-202.1 → 1.0.0-temp-203

package/lib/Stencils/Stencils.module.css

@@ -1,96 +1,96 @@
-.varClass {
-  /* stencils default variables */
-  --stencil_height: var(--zd_size9);
-  --stencil_width: 100%;
-  --stencil_border_radius: 5px;
-}
-.container {
-  composes: varClass;
-  height: var(--stencil_height);
-  width: var(--stencil_width);
-  border-radius: var(--stencil_border_radius);
-}
-.stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
-  animation-name:  placeHolderShimmer-rtl ;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-duration: var(--zd_transition10);
-  animation-timing-function: linear;
-}
-@keyframes placeHolderShimmer-ltr {
-  0% {
-    background-position: calc(var(--zd_size468) * -1) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 0;
-  }
-}
-@keyframes placeHolderShimmer-rtl {
-  0% {
-    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
-  }
-
-  100% {
-    background-position: var(--zd_size468) 100%;
-  }
-}
-
-.rectangular {
-  composes: stencil;
-  --stencil_height: var(--zd_size9);
-  --stencil_border_radius: 5px;
-}
-.primary {
-  background-color: var(--zdt_stencil_primary_bg);
-  background-image: var(--zdt_stencil_primary_gradient_bg);
-}
-.secondary {
-  background-color: var(--zdt_stencil_secondary_bg);
-  background-image: var(--zdt_stencil_secondary_gradient_bg);
-}
-.dark {
-  background-color: var(--zdt_stencil_dark_bg);
-  background-image: var(--zdt_stencil_dark_gradient_bg);
-}
-
-.small {
-  --stencil_width: var(--zd_size110);
-}
-.default {
-  --stencil_width: 100%;
-}
-.medium {
-  --stencil_width: var(--zd_size170);
-}
-.large {
-  --stencil_width: var(--zd_size220);
-}
-
-.circle {
-  composes: stencil;
-  --stencil_border_radius: 50%;
-}
-.clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
-}
-.cmedium,
-.cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
-}
-.csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
-}
+.varClass {
+  /* stencils default variables */
+  --stencil_height: var(--zd_size9);
+  --stencil_width: 100%;
+  --stencil_border_radius: 5px;
+}
+.container {
+  composes: varClass;
+  height: var(--stencil_height);
+  width: var(--stencil_width);
+  border-radius: var(--stencil_border_radius);
+}
+.stencil {
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+@keyframes placeHolderShimmer-ltr {
+  0% {
+    background-position: calc(var(--zd_size468) * -1) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 0;
+  }
+}
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
+
+.rectangular {
+  composes: stencil;
+  --stencil_height: var(--zd_size9);
+  --stencil_border_radius: 5px;
+}
+.primary {
+  background-color: var(--zdt_stencil_primary_bg);
+  background-image: var(--zdt_stencil_primary_gradient_bg);
+}
+.secondary {
+  background-color: var(--zdt_stencil_secondary_bg);
+  background-image: var(--zdt_stencil_secondary_gradient_bg);
+}
+.dark {
+  background-color: var(--zdt_stencil_dark_bg);
+  background-image: var(--zdt_stencil_dark_gradient_bg);
+}
+
+.small {
+  --stencil_width: var(--zd_size110);
+}
+.default {
+  --stencil_width: 100%;
+}
+.medium {
+  --stencil_width: var(--zd_size170);
+}
+.large {
+  --stencil_width: var(--zd_size220);
+}
+
+.circle {
+  composes: stencil;
+  --stencil_border_radius: 50%;
+}
+.clarge {
+  --stencil_width: var(--zd_size42);
+  --stencil_height: var(--zd_size42);
+}
+.cmedium,
+.cdefault {
+  --stencil_width: var(--zd_size30);
+  --stencil_height: var(--zd_size30);
+}
+.csmall {
+  --stencil_width: var(--zd_size20);
+  --stencil_height: var(--zd_size20);
+}

package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap

@@ -1,89 +1,89 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Stencils rendering the customClass 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium primary StencilsCustomClass"
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the palette of- dark 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium dark "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the palette of- primary 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the palette of- secondary 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium secondary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the shape of- circle 1`] = `
-<DocumentFragment>
-  <div
-    class="container circle cmedium primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the shape of- rect 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the size of- default 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular default primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the size of- large 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular large primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the size of- medium 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular medium primary "
-  />
-</DocumentFragment>
-`;
-
-exports[`Stencils rendering the size of- small 1`] = `
-<DocumentFragment>
-  <div
-    class="container rectangular small primary "
-  />
-</DocumentFragment>
-`;
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stencils rendering the customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary StencilsCustomClass"
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the palette of- dark 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium dark "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the palette of- primary 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the palette of- secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium secondary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the shape of- circle 1`] = `
+<DocumentFragment>
+  <div
+    class="container circle cmedium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the shape of- rect 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- default 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular default primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- large 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular large primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- medium 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular medium primary "
+  />
+</DocumentFragment>
+`;
+
+exports[`Stencils rendering the size of- small 1`] = `
+<DocumentFragment>
+  <div
+    class="container rectangular small primary "
+  />
+</DocumentFragment>
+`;