@mirai/core 0.2.18 → 0.3.1

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

@@ -0,0 +1,887 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Card> inherit:className 1`] = `
+<DocumentFragment>
+  <fieldset
+    autocomplete="off"
+  >
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_number
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_name
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.expiration
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="5"
+            name="expire"
+            placeholder="payments.label.month_format/payments.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.cvv
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`component:<Card> prop:error 1`] = `
+<DocumentFragment>
+  <fieldset
+    autocomplete="off"
+  >
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder error"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label error withValue"
+          >
+            payments.label.card_number
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+        <span
+          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>
+        </span>
+      </div>
+      <span
+        class="text small text hint error"
+      >
+        Invalid card
+      </span>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_name
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.expiration
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="5"
+            name="expire"
+            placeholder="payments.label.month_format/payments.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.cvv
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`component:<Card> prop:showCVV 1`] = `
+<DocumentFragment>
+  <fieldset
+    autocomplete="off"
+    data-testid="showCVV"
+  >
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_number
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="showCVV-card"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_name
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="showCVV-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.expiration
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="showCVV-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="payments.label.month_format/payments.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`component:<Card> prop:showErrors 1`] = `
+<DocumentFragment>
+  <fieldset
+    autocomplete="off"
+  >
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder error"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label error withValue"
+          >
+            payments.label.card_number
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+        <span
+          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>
+        </span>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder error"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label error withValue"
+          >
+            payments.label.card_name
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+        <span
+          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>
+        </span>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder error"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label error withValue"
+          >
+            payments.label.expiration
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="5"
+            name="expire"
+            placeholder="payments.label.month_format/payments.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </div>
+        <span
+          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>
+        </span>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder error"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label error withValue"
+          >
+            payments.label.cvv
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+        <span
+          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>
+        </span>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`component:<Card> renders 1`] = `
+<DocumentFragment>
+  <fieldset
+    autocomplete="off"
+  >
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_number
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_name
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.expiration
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="5"
+            name="expire"
+            placeholder="payments.label.month_format/payments.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.cvv
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;
+
+exports[`component:<Card> testID 1`] = `
+<DocumentFragment>
+  <fieldset
+    autocomplete="off"
+    data-testid="mirai"
+  >
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_number
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="mirai-card"
+            maxlength="19"
+            name="card"
+            placeholder="0000 0000 0000 0000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.card_name
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="mirai-name"
+            maxlength="100"
+            minlength="3"
+            name="name"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.expiration
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="mirai-expire"
+            maxlength="5"
+            name="expire"
+            placeholder="payments.label.month_format/payments.label.year_format"
+            required=""
+            type="inputDate"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="view inputContainer"
+    >
+      <div
+        class="view row inputBorder"
+      >
+        <div
+          class="view wide content"
+        >
+          <span
+            class="text paragraph text label"
+          >
+            payments.label.cvv
+            <span
+              class="required"
+            >
+               *
+            </span>
+          </span>
+          <input
+            class="input input withLabel"
+            data-testid="mirai-CVV"
+            maxlength="3"
+            name="CVV"
+            placeholder="000"
+            required=""
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </fieldset>
+</DocumentFragment>
+`;