@mirai/core 0.4.648 → 0.4.650

package/build/components/__shared__/Payment/components/Card/__tests__/__snapshots__/Card.test.js.snap

@@ -0,0 +1,996 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<Paymnet> <Card> inherit:className 1`] = `
+<DocumentFragment>
+  <ui-form
+    autocomplete="off"
+    wide=""
+  >
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-card"
+            id="checkout-card-label"
+          >
+            core.label.card_number
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-card-label"
+            class="input input withLabel"
+            id="checkout-card"
+            inputmode="numeric"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-name"
+            id="checkout-name-label"
+          >
+            core.label.card_name
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-name-label"
+            class="input input withLabel"
+            id="checkout-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-expire"
+            id="checkout-expire-label"
+          >
+            core.label.expiration
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-expire-label"
+            class="input input withLabel"
+            id="checkout-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="core.label.month_format/core.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-CVV"
+            id="checkout-CVV-label"
+          >
+            core.label.cvv
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-CVV-label"
+            class="input input withLabel"
+            id="checkout-CVV"
+            inputmode="numeric"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </ui-form>
+</DocumentFragment>
+`;
+
+exports[`<Paymnet> <Card> prop:error 1`] = `
+<DocumentFragment>
+  <ui-form
+    autocomplete="off"
+    wide=""
+  >
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder error"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label error withValue"
+            htmlfor="checkout-card"
+            id="checkout-card-label"
+          >
+            core.label.card_number
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-card-label"
+            class="input input withLabel"
+            id="checkout-card"
+            inputmode="numeric"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+        <ui-icon
+          class="icon headline-3 icon error"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </ui-icon>
+      </ui-view>
+      <ui-text
+        class="text small text hint error"
+      >
+        Invalid card
+      </ui-text>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-name"
+            id="checkout-name-label"
+          >
+            core.label.card_name
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-name-label"
+            class="input input withLabel"
+            id="checkout-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-expire"
+            id="checkout-expire-label"
+          >
+            core.label.expiration
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-expire-label"
+            class="input input withLabel"
+            id="checkout-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="core.label.month_format/core.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-CVV"
+            id="checkout-CVV-label"
+          >
+            core.label.cvv
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-CVV-label"
+            class="input input withLabel"
+            id="checkout-CVV"
+            inputmode="numeric"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </ui-form>
+</DocumentFragment>
+`;
+
+exports[`<Paymnet> <Card> prop:showCVV 1`] = `
+<DocumentFragment>
+  <ui-form
+    autocomplete="off"
+    data-testid="showCVV"
+    wide=""
+  >
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-card"
+            id="checkout-card-label"
+          >
+            core.label.card_number
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-card-label"
+            class="input input withLabel"
+            data-testid="showCVV-card"
+            id="checkout-card"
+            inputmode="numeric"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-name"
+            id="checkout-name-label"
+          >
+            core.label.card_name
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-name-label"
+            class="input input withLabel"
+            data-testid="showCVV-name"
+            id="checkout-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-expire"
+            id="checkout-expire-label"
+          >
+            core.label.expiration
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-expire-label"
+            class="input input withLabel"
+            data-testid="showCVV-expire"
+            id="checkout-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="core.label.month_format/core.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </ui-form>
+</DocumentFragment>
+`;
+
+exports[`<Paymnet> <Card> prop:showErrors 1`] = `
+<DocumentFragment>
+  <ui-form
+    autocomplete="off"
+    wide=""
+  >
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder error"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label error withValue"
+            htmlfor="checkout-card"
+            id="checkout-card-label"
+          >
+            core.label.card_number
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-card-label"
+            class="input input withLabel"
+            id="checkout-card"
+            inputmode="numeric"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+        <ui-icon
+          class="icon headline-3 icon error"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder error"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label error withValue"
+            htmlfor="checkout-name"
+            id="checkout-name-label"
+          >
+            core.label.card_name
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-name-label"
+            class="input input withLabel"
+            id="checkout-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+        <ui-icon
+          class="icon headline-3 icon error"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder error"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label error withValue"
+            htmlfor="checkout-expire"
+            id="checkout-expire-label"
+          >
+            core.label.expiration
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-expire-label"
+            class="input input withLabel"
+            id="checkout-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="core.label.month_format/core.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </ui-view>
+        <ui-icon
+          class="icon headline-3 icon error"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder error"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label error withValue"
+            htmlfor="checkout-CVV"
+            id="checkout-CVV-label"
+          >
+            core.label.cvv
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-CVV-label"
+            class="input input withLabel"
+            id="checkout-CVV"
+            inputmode="numeric"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+        <ui-icon
+          class="icon headline-3 icon error"
+        >
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+        </ui-icon>
+      </ui-view>
+    </ui-input-text>
+  </ui-form>
+</DocumentFragment>
+`;
+
+exports[`<Paymnet> <Card> renders 1`] = `
+<DocumentFragment>
+  <ui-form
+    autocomplete="off"
+    wide=""
+  >
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-card"
+            id="checkout-card-label"
+          >
+            core.label.card_number
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-card-label"
+            class="input input withLabel"
+            id="checkout-card"
+            inputmode="numeric"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-name"
+            id="checkout-name-label"
+          >
+            core.label.card_name
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-name-label"
+            class="input input withLabel"
+            id="checkout-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-expire"
+            id="checkout-expire-label"
+          >
+            core.label.expiration
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-expire-label"
+            class="input input withLabel"
+            id="checkout-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="core.label.month_format/core.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-CVV"
+            id="checkout-CVV-label"
+          >
+            core.label.cvv
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-CVV-label"
+            class="input input withLabel"
+            id="checkout-CVV"
+            inputmode="numeric"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </ui-form>
+</DocumentFragment>
+`;
+
+exports[`<Paymnet> <Card> testID 1`] = `
+<DocumentFragment>
+  <ui-form
+    autocomplete="off"
+    data-testid="mirai"
+    wide=""
+  >
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-card"
+            id="checkout-card-label"
+          >
+            core.label.card_number
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-card-label"
+            class="input input withLabel"
+            data-testid="mirai-card"
+            id="checkout-card"
+            inputmode="numeric"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-name"
+            id="checkout-name-label"
+          >
+            core.label.card_name
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-name-label"
+            class="input input withLabel"
+            data-testid="mirai-name"
+            id="checkout-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-expire"
+            id="checkout-expire-label"
+          >
+            core.label.expiration
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-expire-label"
+            class="input input withLabel"
+            data-testid="mirai-expire"
+            id="checkout-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="core.label.month_format/core.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+    <ui-input-text
+      class="view inputContainer"
+    >
+      <ui-view
+        class="view row inputBorder"
+      >
+        <ui-view
+          class="view wide content"
+        >
+          <ui-label
+            class="text paragraph text label"
+            htmlfor="checkout-CVV"
+            id="checkout-CVV-label"
+          >
+            core.label.cvv
+            <span
+              class="required error"
+            >
+              ✱
+            </span>
+          </ui-label>
+          <input
+            aria-labelledby="checkout-CVV-label"
+            class="input input withLabel"
+            data-testid="mirai-CVV"
+            id="checkout-CVV"
+            inputmode="numeric"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </ui-view>
+      </ui-view>
+    </ui-input-text>
+  </ui-form>
+</DocumentFragment>
+`;