@mirai/core 0.3.255 → 0.3.257

package/build/components/__shared__/ButtonPayment/components/FormPaycomet/__tests__/__snapshots__/FormPaycomet.test.js.snap

@@ -36,14 +36,18 @@ exports[`component:<FormCheckout> renders 1`] = `
         <div
           class="view"
         >
-          <span
-            class="text small"
+          <div
+            class="view wide"
           >
-            payments.label.card_name
-          </span>
-          <input
-            data-paycomet="cardHolderName"
-          />
+            <span
+              class="text small"
+            >
+              payments.label.card_name
+            </span>
+            <input
+              data-paycomet="cardHolderName"
+            />
+          </div>
         </div>
       </div>
       <div
@@ -52,19 +56,23 @@ exports[`component:<FormCheckout> renders 1`] = `
         <div
           class="view"
         >
-          <span
-            class="text small"
-          >
-            payments.label.card_number
-          </span>
           <div
-            id="paycomet-pan"
-          />
-          <input
-            paycomet-name="pan"
-            paycomet-placeholder="payments.label.card_number_placeholder"
-            paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;outline: 0;padding:0!important;"
-          />
+            class="view wide"
+          >
+            <span
+              class="text small"
+            >
+              payments.label.card_number
+            </span>
+            <div
+              id="paycomet-pan"
+            />
+            <input
+              paycomet-name="pan"
+              paycomet-placeholder="payments.label.card_number_placeholder"
+              paycomet-style="border:0px;background-image:none;color:undefined;font-family:undefined;font-size:undefined;outline: 0;padding:0!important;"
+            />
+          </div>
         </div>
       </div>
       <div
@@ -76,27 +84,31 @@ exports[`component:<FormCheckout> renders 1`] = `
           <div
             class="view"
           >
-            <span
-              class="text small"
-            >
-              payments.label.expiration
-            </span>
             <div
-              class="view row"
+              class="view wide"
             >
-              <input
-                data-paycomet="dateMonth"
-                maxlength="2"
-                name="month"
-                value=""
-              />
-              /
-              <input
-                data-paycomet="dateYear"
-                maxlength="2"
-                name="year"
-                value=""
-              />
+              <span
+                class="text small"
+              >
+                payments.label.expiration
+              </span>
+              <div
+                class="view row"
+              >
+                <input
+                  data-paycomet="dateMonth"
+                  maxlength="2"
+                  name="month"
+                  value=""
+                />
+                /
+                <input
+                  data-paycomet="dateYear"
+                  maxlength="2"
+                  name="year"
+                  value=""
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -106,19 +118,23 @@ exports[`component:<FormCheckout> renders 1`] = `
           <div
             class="view"
           >
-            <span
-              class="text small"
-            >
-              payments.label.cvv
-            </span>
             <div
-              data-paycomet="cvc2"
-              id="paycomet-cvc2"
-            />
-            <input
-              paycomet-name="cvc2"
-              paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;padding:0!important;"
-            />
+              class="view wide"
+            >
+              <span
+                class="text small"
+              >
+                payments.label.cvv
+              </span>
+              <div
+                data-paycomet="cvc2"
+                id="paycomet-cvc2"
+              />
+              <input
+                paycomet-name="cvc2"
+                paycomet-style="border:0px;color:undefined;font-family:undefined;font-size:undefined;padding:0!important;"
+              />
+            </div>
           </div>
         </div>
       </div>

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js

@@ -28,6 +28,9 @@ const InputField = _ref => {
     className: (0, _ui.styles)(style.container, others.className)
   }), /*#__PURE__*/_react.default.createElement(_ui.View, {
     className: (0, _ui.styles)(style.border, error && style.error, focus && style.focus)
+  }, /*#__PURE__*/_react.default.createElement(_ui.View, {
+    wide: true,
+    className: style.content
   }, label && /*#__PURE__*/_react.default.createElement(_ui.Text, {
     small: true,
     className: (0, _ui.styles)(style.label, (focus || error || value !== undefined && ((value === null || value === void 0 ? void 0 : value.length) > 0 || typeof value === 'number')) && style.withValue)
@@ -36,7 +39,7 @@ const InputField = _ref => {
   }, " *")), children, (error || success) && /*#__PURE__*/_react.default.createElement(_ui.Icon, {
     value: error ? _ui.ICON.ERROR : _ui.ICON.SUCCESS,
     className: (0, _ui.styles)(style.icon, error && style.error, success && style.success)
-  })), hint && /*#__PURE__*/_react.default.createElement(_ui.Text, {
+  }))), hint && /*#__PURE__*/_react.default.createElement(_ui.Text, {
     small: true,
     className: style.hint
   }, hint));

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","InputField","_ref","children","error","focus","hint","label","showRequired","success","value","others","createElement","View","className","styles","container","border","Text","small","undefined","withValue","required","Icon","ICON","ERROR","SUCCESS","icon","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, focus, hint, label, showRequired = false, success, value, ...others }) => (\n  <View {...others} className={styles(style.container, others.className)}>\n    <View className={styles(style.border, error && style.error, focus && style.focus)}>\n      {label && (\n        <Text\n          small\n          className={styles(\n            style.label,\n            (focus || error || (value !== undefined && (value?.length > 0 || typeof value === 'number'))) &&\n              style.withValue,\n          )}\n        >\n          {label}\n          {showRequired && <span className={style.required}> *</span>}\n        </Text>\n      )}\n      {children}\n      {(error || success) && (\n        <Icon\n          value={error ? ICON.ERROR : ICON.SUCCESS}\n          className={styles(style.icon, error && style.error, success && style.success)}\n        />\n      )}\n    </View>\n    {hint && (\n      <Text small className={style.hint}>\n        {hint}\n      </Text>\n    )}\n  </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n  children: PropTypes.node.isRequired,\n  error: PropTypes.bool,\n  focus: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n};\n\nexport { InputField };\n"],"mappings":"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"}
+{"version":3,"file":"InputField.js","names":["_ui","require","_propTypes","_interopRequireDefault","_react","style","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","_extends","assign","bind","target","arguments","length","source","key","apply","InputField","_ref","children","error","focus","hint","label","showRequired","success","value","others","createElement","View","className","styles","container","border","wide","content","Text","small","undefined","withValue","required","Icon","ICON","ERROR","SUCCESS","icon","exports","displayName","propTypes","PropTypes","node","isRequired","bool","string"],"sources":["../../../../../../src/components/__shared__/ButtonPayment/components/InputField/InputField.jsx"],"sourcesContent":["import { Icon, ICON, styles, Text, View } from '@mirai/ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport * as style from './InputField.module.css';\n\nconst InputField = ({ children, error, focus, hint, label, showRequired = false, success, value, ...others }) => (\n  <View {...others} className={styles(style.container, others.className)}>\n    <View className={styles(style.border, error && style.error, focus && style.focus)}>\n      <View wide className={style.content}>\n        {label && (\n          <Text\n            small\n            className={styles(\n              style.label,\n              (focus || error || (value !== undefined && (value?.length > 0 || typeof value === 'number'))) &&\n                style.withValue,\n            )}\n          >\n            {label}\n            {showRequired && <span className={style.required}> *</span>}\n          </Text>\n        )}\n        {children}\n        {(error || success) && (\n          <Icon\n            value={error ? ICON.ERROR : ICON.SUCCESS}\n            className={styles(style.icon, error && style.error, success && style.success)}\n          />\n        )}\n      </View>\n    </View>\n    {hint && (\n      <Text small className={style.hint}>\n        {hint}\n      </Text>\n    )}\n  </View>\n);\n\nInputField.displayName = 'Mirai:Payments:InputField';\n\nInputField.propTypes = {\n  children: PropTypes.node.isRequired,\n  error: PropTypes.bool,\n  focus: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string.isRequired,\n  showRequired: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n};\n\nexport { InputField };\n"],"mappings":"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"}

package/build/components/__shared__/ButtonPayment/components/InputField/InputField.module.css

@@ -1,7 +1,7 @@
 .container {
-  margin-bottom: var(--mirai-ui-space-M);
-  width: 100%;
-  min-height: var(--mirai-ui-input-min-height);
+  margin-bottom: var(--mirai-ui-input-text-gap);
+  flex: 1;
+  position: relative;
 }
 
 .border {
@@ -10,7 +10,6 @@
   padding-left: calc(var(--mirai-ui-input-text-padding-x) / 2);
   padding-right: calc(var(--mirai-ui-input-text-padding-x) / 2);
   transition: box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
-  position: relative;
 }
 
 .border.error {
@@ -26,7 +25,11 @@
   box-shadow: var(--mirai-ui-focus-shadow-error);
 }
 
-.border > *:not(.label):not(.icon) {
+.content {
+  min-height: var(--mirai-ui-input-min-height);
+}
+
+.content > *:not(.label):not(.icon) {
   padding: calc(var(--mirai-ui-input-text-padding-y) + var(--mirai-ui-space-S))
     calc(var(--mirai-ui-input-text-padding-x) / 2) calc(var(--mirai-ui-input-text-padding-x) / 2)
     calc(var(--mirai-ui-input-text-padding-x) / 2);
@@ -92,4 +95,4 @@
 
 .label .required {
   color: var(--mirai-ui-error);
-}
+}

package/build/components/__shared__/ButtonPayment/components/InputField/__tests__/__snapshots__/InputField.test.js.snap

@@ -7,7 +7,11 @@ exports[`component:<InputField> inherit:className 1`] = `
   >
     <div
       class="view"
-    />
+    >
+      <div
+        class="view wide"
+      />
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -20,35 +24,39 @@ exports[`component:<InputField> property error 1`] = `
     <div
       class="view"
     >
-      <span
-        class="text small"
-      >
-        label
-      </span>
-      <span>
-        children
-      </span>
-      <span
-        class="icon headline-3"
+      <div
+        class="view wide"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          class="text small"
         >
-          <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>
+          label
+        </span>
+        <span>
+          children
+        </span>
+        <span
+          class="icon headline-3"
+        >
+          <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>
 </DocumentFragment>
@@ -62,14 +70,18 @@ exports[`component:<InputField> property hint 1`] = `
     <div
       class="view"
     >
-      <span
-        class="text small"
+      <div
+        class="view wide"
       >
-        label
-      </span>
-      <span>
-        children
-      </span>
+        <span
+          class="text small"
+        >
+          label
+        </span>
+        <span>
+          children
+        </span>
+      </div>
     </div>
     <span
       class="text small"
@@ -88,35 +100,39 @@ exports[`component:<InputField> property success 1`] = `
     <div
       class="view"
     >
-      <span
-        class="text small"
+      <div
+        class="view wide"
       >
-        label
-      </span>
-      <span>
-        children
-      </span>
-      <span
-        class="icon headline-3"
-      >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          class="text small"
+        >
+          label
+        </span>
+        <span>
+          children
+        </span>
+        <span
+          class="icon headline-3"
         >
-          <path
-            d="M0 0h24v24H0V0zm0 0h24v24H0V0z"
-            fill="none"
-          />
-          <path
-            d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
-          />
-        </svg>
-      </span>
+          <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 0h24v24H0V0zm0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M16.59 7.58 10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-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>
 </DocumentFragment>
@@ -130,14 +146,18 @@ exports[`component:<InputField> renders 1`] = `
     <div
       class="view"
     >
-      <span
-        class="text small"
+      <div
+        class="view wide"
       >
-        label
-      </span>
-      <span>
-        children
-      </span>
+        <span
+          class="text small"
+        >
+          label
+        </span>
+        <span>
+          children
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -152,14 +172,18 @@ exports[`component:<InputField> testID 1`] = `
     <div
       class="view"
     >
-      <span
-        class="text small"
+      <div
+        class="view wide"
       >
-        label
-      </span>
-      <span>
-        children
-      </span>
+        <span
+          class="text small"
+        >
+          label
+        </span>
+        <span>
+          children
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/build/components/__shared__/Payment/components/PCI/PCI.module.css

@@ -6,5 +6,5 @@
 
 .input {
   box-sizing: border-box;
-  height: calc(var(--mirai-ui-space-XXS) + var(--mirai-ui-space-XL));
+  height: var(--mirai-ui-space-XL);
 }