fix(progress): non visual alternative

added new snaps #721
ZopaPublic · Aug 26, 2021 · 8b03370 · 8b03370
1 parent 2eea70b
commit 8b03370
Show file tree

Hide file tree

Showing 2 changed files with 318 additions and 0 deletions.
diff --git a/...s/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap b/...s/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
+.c4 {
+  margin: 0;
+  -webkit-letter-spacing: 0;
+  -moz-letter-spacing: 0;
+  -ms-letter-spacing: 0;
+  letter-spacing: 0;
+  color: #4A545E;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+  font-family: "Open Sans",Roboto,Helvetica,Arial,sans-serif;
+  text-align: inherit;
+}
+
+.c2 {
+  background-color: transparent;
+  font-size: inherit;
+  font-family: "Open Sans",Roboto,Helvetica,Arial,sans-serif;
+  font-weight: 600;
+  line-height: inherit;
+  color: #3B46C4;
+  cursor: pointer;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  -webkit-user-select: auto;
+  -moz-user-select: auto;
+  -ms-user-select: auto;
+  user-select: auto;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0;
+  border: none;
+}
+
+.c2:hover,
+.c2:active {
+  color: #21247F;
+}
+
+.c2:hover svg path,
+.c2:active svg path {
+  fill: #21247F;
+}
+
+.c3 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c5 {
+  line-height: 0;
+}
+
+.c7 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.c8 {
+  position: relative;
+  width: 100%;
+  border-radius: 100px;
+  background: #EFEFEF;
+  height: 4px;
+}
+
+.c11 {
+  width: 50%;
+  position: relative;
+  border-radius: 100px;
+  height: 4px;
+  display: block;
+  background: #00D9C5;
+  -webkit-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+}
+
+.c11 > span {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
+  color: #2C3236;
+}
+
+.c9 {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: #00D9C5;
+  border-radius: 100%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c10 {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: #EFEFEF;
+  border-radius: 100%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c6 {
+  max-width: 525px;
+}
+
+.c0 {
+  position: relative;
+  min-height: 30px;
+}
+
+@media (min-width:768px) {
+  .c1 {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+}
+
+@media (min-width:992px) {
+  .c6 {
+    max-width: 612px;
+  }
+}
+
+<div>
+  <section
+    class="c0 mx-4 m:mx-0 mb-6"
+    data-automation="ZA.ProductTemplateHeader"
+  >
+    <div
+      class="c1 my-4 m:mt-0"
+      data-automation="ZA.ProductTemplateNavigation"
+    >
+      <a
+        aria-label="Back"
+        class="c2 c3"
+        color="#3B46C4"
+        href="/"
+      >
+        <svg
+          aria-hidden="true"
+          class="svg-inline--fa fa-chevron-left fa-w-10 fa-xs mr-2"
+          color="#4A545E"
+          data-icon="chevron-left"
+          data-prefix="fas"
+          focusable="false"
+          role="img"
+          viewBox="0 0 320 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          class="c4 c5"
+          color="#4A545E"
+        >
+          Back
+        </span>
+      </a>
+    </div>
+    <div
+      class="c6 mx-auto pt-1"
+    >
+      <div
+        class="c7"
+      >
+        <div
+          aria-label="Progress Bar showing step 1 of 2"
+          class="c8"
+          tabindex="-1"
+        >
+          <span
+            class="c9"
+          />
+          <span
+            class="c10"
+          />
+          <div
+            class="c11"
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;
diff --git a/...oductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap b/...oductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
+.c1 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+
+.c2 {
+  position: relative;
+  width: 100%;
+  border-radius: 100px;
+  background: #EFEFEF;
+  height: 4px;
+}
+
+.c5 {
+  width: 50%;
+  position: relative;
+  border-radius: 100px;
+  height: 4px;
+  display: block;
+  background: #00D9C5;
+  -webkit-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+}
+
+.c5 > span {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 600;
+  color: #2C3236;
+}
+
+.c3 {
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: #00D9C5;
+  border-radius: 100%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c4 {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: #EFEFEF;
+  border-radius: 100%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c0 {
+  max-width: 525px;
+}
+
+@media (min-width:992px) {
+  .c0 {
+    max-width: 612px;
+  }
+}
+
+<div>
+  <div
+    class="c0 mx-auto pt-1"
+  >
+    <div
+      class="c1"
+    >
+      <div
+        aria-label="Progress Bar showing step 1 of 2"
+        class="c2"
+        tabindex="-1"
+      >
+        <span
+          class="c3"
+        />
+        <span
+          class="c4"
+        />
+        <div
+          class="c5"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;