@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/components/molecules/surveyQuestionCard/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,743 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`it renders 1`] = `
+.c1 {
+  --text-color: var( --custom-color, #262626 );
+  color: var(--text-color);
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.c4 {
+  --text-color: var( --custom-color, #262626 );
+  color: var(--text-color);
+  -webkit-letter-spacing: 0px;
+  -moz-letter-spacing: 0px;
+  -ms-letter-spacing: 0px;
+  letter-spacing: 0px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.c7 {
+  width: auto;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 700;
+  -webkit-transition: background-color 0.3s,border-color 0.3s;
+  transition: background-color 0.3s,border-color 0.3s;
+  border: solid 2px #2d87f3;
+  background-color: #fff;
+  color: #2d87f3;
+  padding: 12px 24px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.c7 > span {
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c7 svg {
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.c7 .button-icon {
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.c7:hover {
+  border-color: #2c74df;
+  background-color: #2c74df;
+  color: #fff;
+}
+
+.c7:not(:is([disabled],[data-is-loading='true'])):active {
+  border-color: #2b62cd;
+  background-color: #2b62cd;
+  color: #fff;
+}
+
+.c7[data-theme='marryBaby']:disabled,
+.c7:disabled {
+  border-color: #bfbfbf;
+  background-color: #bfbfbf;
+  color: #fff;
+  cursor: not-allowed;
+}
+
+.c7[data-event-category] > * {
+  pointer-events: none;
+}
+
+.c7:focus-visible {
+  outline: 2px solid black;
+}
+
+.c8 {
+  width: auto;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 700;
+  -webkit-transition: background-color 0.3s,border-color 0.3s;
+  transition: background-color 0.3s,border-color 0.3s;
+  background-color: #2d87f3;
+  border: 1px solid #2d87f3;
+  color: #fff;
+  padding: 12px 24px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.c8:hover:not(:disabled) {
+  background-color: #2c74df;
+}
+
+.c8:not(:is([disabled],[data-is-loading='true'])):active {
+  background-color: #2b62cd;
+}
+
+.c8[data-theme='marryBaby']:disabled,
+.c8:disabled {
+  border-color: #bfbfbf;
+  background-color: #bfbfbf;
+  color: #fff;
+  cursor: not-allowed;
+}
+
+.c8[data-event-category] > * {
+  pointer-events: none;
+}
+
+.c8:focus-visible {
+  outline: 2px solid black;
+}
+
+.c3 {
+  color: #262626;
+  font-size: 18px;
+  -webkit-letter-spacing: -0.6px;
+  -moz-letter-spacing: -0.6px;
+  -ms-letter-spacing: -0.6px;
+  letter-spacing: -0.6px;
+  line-height: 26px;
+  font-weight: 700;
+}
+
+.c3[data-tag] {
+  color: var(--custom-heading-color,#262626);
+}
+
+.c5[data-type='circle'] {
+  position: relative;
+  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;
+  cursor: pointer;
+}
+
+.c5[data-type='circle'] input {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  border: solid 1px #737373;
+  margin-right: 8px;
+  border-radius: 100%;
+  cursor: inherit;
+  -webkit-transition: background 0.4s,border-color 0.4s,box-shadow 0.4s;
+  transition: background 0.4s,border-color 0.4s,box-shadow 0.4s;
+}
+
+.c5[data-type='circle'] input:hover,
+.c5[data-type='circle'] input:active {
+  border-color: #2d87f3;
+  box-shadow: 0 0 2px 2px #2d87f3;
+}
+
+.c5[data-type='circle'] input:checked {
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  border-color: #2d87f3;
+}
+
+.c5[data-type='circle'] input:checked:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 14px;
+  height: 14px;
+  background-color: #2d87f3;
+  border-radius: 50%;
+  content: '';
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.c5[data-type='circle'] label {
+  width: calc(100% - 24px);
+  cursor: inherit;
+  font-weight: 400;
+}
+
+.c5[data-type='circle'][data-disabled='true'] {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.c5[data-type='circle'][data-disabled='true'] input {
+  border-color: #bfbfbf;
+}
+
+.c5[data-type='circle'][data-disabled='true'] input:hover {
+  border-color: #bfbfbf;
+  box-shadow: none;
+}
+
+.c5[data-type='rectangle'] input {
+  display: none;
+}
+
+.c5[data-type='rectangle'] input:checked ~ label {
+  border-color: #2d87f3;
+  background-color: #2d87f3;
+  color: #fff;
+  font-weight: 700;
+}
+
+.c5[data-type='rectangle'] label {
+  display: inline-block;
+  width: auto;
+  box-sizing: border-box;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  border: solid 1px #bfbfbf;
+  border-radius: 6px;
+  color: #262626;
+  cursor: pointer;
+  font-weight: 400;
+  text-align: center;
+}
+
+.c5[data-type='rectangle'] label:hover,
+.c5[data-type='rectangle'] label:active {
+  border-color: #2d87f3;
+}
+
+.c5[data-type='rectangle'][data-disabled='true'] input {
+  cursor: not-allowed;
+}
+
+.c5[data-type='rectangle'][data-disabled='true'] label {
+  color: #bfbfbf;
+  cursor: not-allowed;
+}
+
+.c5[data-type='rectangle'][data-disabled='true'] label:hover {
+  border-color: #bfbfbf;
+}
+
+.c5[data-type='rectangle'][data-size='small'] label {
+  height: 32px;
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.c5[data-type='rectangle'][data-size='large'] label {
+  height: 48px;
+  padding: 13px 16px;
+  font-size: 14px;
+}
+
+.c0 {
+  padding: 1rem;
+  background: #e4e8ec;
+}
+
+.c0 .survey-inner-wrapper {
+  padding: 1.25rem 1rem 1.5rem;
+  background: #fff;
+  border-radius: 6px;
+}
+
+.c0 .survey-inner-wrapper .survey-header {
+  border-bottom: 1px solid #dbdfe5;
+  margin-bottom: 12px;
+}
+
+.c0 .survey-inner-wrapper .survey-header .survey-header-text {
+  color: #737373;
+}
+
+.c0 .survey-inner-wrapper .survey-contact-submit {
+  width: 100%;
+  margin-bottom: 1.5rem;
+}
+
+.c0 .survey-inner-wrapper .term-policy-container {
+  width: 70%;
+  min-width: 210px;
+  max-width: 100%;
+  margin: 0 auto 1.5rem;
+  text-align: center;
+}
+
+.c0 .survey-inner-wrapper .survey-progress-wrapper {
+  width: calc(100% + 2rem);
+  height: 4px;
+  margin-bottom: 1rem;
+  margin-left: -1rem;
+  background: #e4e8ec;
+}
+
+.c0 .survey-inner-wrapper .survey-progress-wrapper .survey-progress {
+  width: 100%;
+  height: 100%;
+  background: #00b16a;
+  -webkit-transform: scaleX(0);
+  -ms-transform: scaleX(0);
+  transform: scaleX(0);
+  -webkit-transform-origin: left;
+  -ms-transform-origin: left;
+  transform-origin: left;
+  -webkit-transition: -webkit-transform ease-in-out 0.3s;
+  -webkit-transition: transform ease-in-out 0.3s;
+  transition: transform ease-in-out 0.3s;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -webkit-justify-content: flex-end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper button {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper button[data-has-icon='true'] svg {
+  width: 10px;
+  height: 10px;
+  margin-right: 10px;
+  vertical-align: unset;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper button.survey-next-button[data-has-icon='true'] svg {
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper[data-center='true'] {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper[data-center='true'] button:only-child {
+  width: 200px;
+  max-width: 80%;
+}
+
+.c0 .survey-inner-wrapper .survey-button-wrapper .survey-prev-button {
+  margin-right: 0.5rem;
+}
+
+.c6[data-type='circle'] {
+  padding: 16px 20px;
+  border: 0.5px solid transparent;
+  background: #fafafa;
+  border-radius: 6px;
+}
+
+.c6[data-type='circle'][data-checked='true'] {
+  border: 0.5px solid #2d87f3;
+  background: #f7f9fc;
+}
+
+.c6[data-type='circle'] input {
+  border: solid 2px #737373;
+  margin-right: 0;
+  background: white;
+}
+
+.c6[data-type='circle'] input[type='checkbox']:checked {
+  border: 0;
+  background: #2d87f3 url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z' fill='%232D87F3' stroke='%232D87F3' stroke-width='2'/%3E%3Cpath d='M15.5714 8L9.67857 14L7 11.2727' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center;
+}
+
+.c6[data-type='circle'] input[type='checkbox']:checked:after {
+  display: none;
+}
+
+.c6[data-type='circle'][data-has-image='true'] {
+  position: relative;
+  display: block;
+  padding: 12px;
+}
+
+.c6[data-type='circle'][data-has-image='true'] input {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}
+
+.c6[data-type='circle'][data-has-image='true'] .choice-image-wrapper {
+  position: relative;
+  padding-top: 56.25%;
+  margin-bottom: 0.75rem;
+}
+
+.c6[data-type='circle'][data-has-image='true'] .choice-image-wrapper img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  object-fit: cover;
+}
+
+.c2 .survey-question-text-wrapper {
+  margin-bottom: 24px;
+}
+
+.c2 .survey-question-text-wrapper .survey-question-title {
+  margin-bottom: 4px;
+}
+
+.c2 .survey-question-text-wrapper .survey-question-subtitle,
+.c2 .survey-question-text-wrapper .survey-question-description {
+  color: #737373;
+}
+
+.c2 .survey-question-image {
+  width: 100%;
+  margin-bottom: 12px;
+  border-radius: 6px;
+}
+
+.c2 .survey-question-answer-wrapper {
+  margin-bottom: 1.5rem;
+}
+
+.c2 .survey-question-answer-wrapper .survey-question-options-wrapper {
+  display: grid;
+  grid-gap: 0.5rem;
+  grid-template-columns: 1fr;
+}
+
+.c2 .survey-question-answer-wrapper .survey-question-options-wrapper[data-has-image='true'] {
+  grid-gap: 0.8rem;
+  grid-template-columns: 1fr 1fr;
+}
+
+.c2 .survey-question-answer-wrapper .survey-question-options-wrapper .survey-question-option-item label {
+  color: #262626;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 24px;
+}
+
+.c2 .survey-question-answer-wrapper .survey-contact-input {
+  margin-bottom: 1rem;
+}
+
+.c2 .survey-question-answer-wrapper .survey-contact-input:first-child {
+  margin-top: 1rem;
+}
+
+.c2 .survey-question-answer-wrapper .survey-contact-input label {
+  font-weight: 700;
+}
+
+.c2 .survey-question-answer-wrapper .survey-contact-input input {
+  margin-top: 6px;
+}
+
+@media (min-width:1024px) {
+  .c1 {
+    font-size: 14px;
+    line-height: 24px;
+  }
+}
+
+@media (min-width:1024px) {
+  .c4 {
+    font-size: 16px;
+    line-height: 26px;
+  }
+}
+
+@media (min-width:1024px) {
+  .c3 {
+    font-size: 22px;
+    line-height: 32px;
+    -webkit-letter-spacing: -0.6px;
+    -moz-letter-spacing: -0.6px;
+    -ms-letter-spacing: -0.6px;
+    letter-spacing: -0.6px;
+  }
+}
+
+<div
+  class="c0 test"
+>
+  <div
+    class="survey-inner-wrapper"
+  >
+    <div
+      class="survey-header"
+    >
+      <p
+        class="c1 survey-header-text"
+        data-size="c2"
+        data-type="regular"
+      >
+        HAVE TIME FOR A QUICK SURVEY ?
+      </p>
+    </div>
+    <form>
+      <div
+        class="c2"
+      >
+        <div
+          class="survey-question-text-wrapper"
+        >
+          <h4
+            class="c3 survey-question-title"
+            data-tag="h4"
+          >
+            What’s your age group?
+          </h4>
+          <p
+            class="c4 survey-question-subtitle"
+            data-size="p2"
+            data-type="regular"
+          >
+            Select an option
+          </p>
+          <p
+            class="c4 survey-question-description"
+            data-size="p2"
+            data-type="regular"
+          >
+            You must choose one options
+          </p>
+        </div>
+        <div
+          class="survey-question-answer-wrapper"
+        >
+          <div
+            class="survey-question-options-wrapper"
+            data-has-image="false"
+          >
+            <div
+              class="c5 c6 survey-question-option-item"
+              data-checked="false"
+              data-disabled="false"
+              data-has-image="false"
+              data-size="small"
+              data-type="circle"
+            >
+              <label
+                for="undefined-1"
+              >
+                18 - 25
+              </label>
+              <input
+                id="undefined-1"
+                readonly=""
+                type="radio"
+                value="1"
+              />
+            </div>
+            <div
+              class="c5 c6 survey-question-option-item"
+              data-checked="false"
+              data-disabled="false"
+              data-has-image="false"
+              data-size="small"
+              data-type="circle"
+            >
+              <label
+                for="undefined-2"
+              >
+                26 - 45
+              </label>
+              <input
+                id="undefined-2"
+                readonly=""
+                type="radio"
+                value="2"
+              />
+            </div>
+            <div
+              class="c5 c6 survey-question-option-item"
+              data-checked="false"
+              data-disabled="false"
+              data-has-image="false"
+              data-size="small"
+              data-type="circle"
+            >
+              <label
+                for="undefined-3"
+              >
+                46 - 65
+              </label>
+              <input
+                id="undefined-3"
+                readonly=""
+                type="radio"
+                value="3"
+              />
+            </div>
+            <div
+              class="c5 c6 survey-question-option-item"
+              data-checked="false"
+              data-disabled="false"
+              data-has-image="false"
+              data-size="small"
+              data-type="circle"
+            >
+              <label
+                for="undefined-4"
+              >
+                65+
+              </label>
+              <input
+                id="undefined-4"
+                readonly=""
+                type="radio"
+                value="4"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+    <div
+      class="survey-button-wrapper"
+    >
+      <button
+        class="c7 survey-prev-button"
+        data-color="secondary"
+        data-has-icon="true"
+        data-size="lg"
+        data-theme="helloSites"
+      >
+        <span>
+          <span
+            class="button-icon"
+          >
+            <svg
+              fill="none"
+              height="10"
+              viewBox="0 0 6 10"
+              width="6"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.44677 4.99999L5.31252 2.13424C5.62302 1.82374 5.62302 1.31974 5.31252 1.00924C5.00202 0.698742 4.49802 0.698742 4.18752 1.00924L0.727018 4.46974C0.433768 4.76299 0.433768 5.23774 0.727018 5.53024L4.18752 8.99074C4.49802 9.30124 5.00202 9.30124 5.31252 8.99074C5.62302 8.68024 5.62302 8.17624 5.31252 7.86574L2.44677 4.99999Z"
+                fill="#2D87F3"
+              />
+            </svg>
+          </span>
+           
+          Back
+        </span>
+      </button>
+      <button
+        class="c8 survey-next-button"
+        data-color="primary"
+        data-size="lg"
+        data-theme="helloSites"
+        disabled=""
+      >
+        <span>
+          <span
+            class="button-icon"
+          />
+           
+          Next
+           
+          <svg
+            fill="none"
+            height="10"
+            viewBox="0 0 6 10"
+            width="6"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M3.80322 5.19994L0.937465 2.33419C0.626965 2.02369 0.626965 1.51969 0.937465 1.20919C1.24796 0.898693 1.75196 0.898693 2.06246 1.20919L5.52297 4.66969C5.81622 4.96294 5.81622 5.43769 5.52297 5.73019L2.06246 9.19069C1.75196 9.50119 1.24796 9.50119 0.937465 9.19069C0.626965 8.88019 0.626965 8.37619 0.937465 8.06569L3.80322 5.19994Z"
+              fill="#ffffff"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;