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

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

@@ -1,743 +0,0 @@
-// 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>
-`;