@mirai/ui 1.0.66 → 1.0.67

package/README.md

@@ -316,6 +316,43 @@ const MyComponent = ({ headerText }) => (
 
 React components assembled with primitives.
 
+### Action
+
+A hyperlink component that receives the following props:
+
+- `children:node|string`
+- `disabled:boolean` applying 'disabled' attribute
+- `large:boolean` modifying the button size
+- `small:boolean` modifying the button size
+- `tag:string` html tag of resulting element ('button' by default)
+- `wide:bool` modifying the button to full-width
+- `onEnter:function` executed when the user hovers over
+- `onLeave:function` executed when the user hovers away
+- `onPress:function` executed on mouse click on the element
+
+```jsx
+import { Action } from '@mirai/ui';
+
+const MyComponent = (props) => {
+  const handleActionClick = () => console.log('click');
+
+  return (
+    <>
+      <Action large onPress={handleActionClick} />
+    </>
+  );
+};
+```
+
+**Theming variables**
+
+```css
+--mirai-ui-action-color: var(--mirai-ui-accent);
+--mirai-ui-action-color-active: var(--mirai-ui-content);
+--mirai-ui-action-color-disabled: var(--mirai-ui-content-light);
+--mirai-ui-action-font-weight: var(--mirai-ui-font-weight);
+```
+
 ### Button
 
 A button component that receives the following props:
@@ -359,7 +396,6 @@ const MyComponent = (props) => {
 --mirai-ui-button-color-hover: var(--mirai-ui-content);
 --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
 --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
---mirai-ui-button-font: var(--mirai-ui-font);
 --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
 --mirai-ui-button-secondary-background: var(--mirai-ui-base);
 --mirai-ui-button-padding-y: var(--mirai-ui-space-S);

package/build/components/Action/Action.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Action = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _helpers = require("../../helpers");
+var _primitives = require("../../primitives");
+var _ActionModule = _interopRequireDefault(require("./Action.module.css"));
+var _excluded = ["children", "disabled", "large", "small", "tag", "wide", "onPress"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Action = function Action(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    large = _ref.large,
+    small = _ref.small,
+    _ref$tag = _ref.tag,
+    tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+    wide = _ref.wide,
+    onPress = _ref.onPress,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
+    disabled: disabled,
+    tag: tag,
+    className: (0, _helpers.styles)(_ActionModule.default.action, large && _ActionModule.default.large, small && _ActionModule.default.small, wide && _ActionModule.default.wide, others.className),
+    onPress: !disabled ? onPress : undefined
+  }), children);
+};
+exports.Action = Action;
+Action.displayName = 'Component:Action';
+Action.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  disabled: _propTypes.default.bool,
+  large: _propTypes.default.bool,
+  small: _propTypes.default.bool,
+  tag: _propTypes.default.string,
+  wide: _propTypes.default.bool,
+  onEnter: _propTypes.default.func,
+  onLeave: _propTypes.default.func,
+  onPress: _propTypes.default.func
+};
+//# sourceMappingURL=Action.js.map

package/build/components/Action/Action.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.js","names":["Action","children","disabled","large","small","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","action","undefined","displayName","propTypes","PropTypes","oneOfType","string","node","bool","onEnter","func","onLeave"],"sources":["../../../src/components/Action/Action.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable } from '../../primitives';\nimport style from './Action.module.css';\n\nconst Action = ({ children, disabled, large, small, tag = 'button', wide, onPress, ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(style.action, large && style.large, small && style.small, wide && style.wide, others.className),\n      onPress: !disabled ? onPress : undefined,\n    },\n    children,\n  );\n\nAction.displayName = 'Component:Action';\n\nAction.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Action };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBAC1FC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRG,GAAG,EAAHA,GAAG;IACHO,SAAS,EAAE,IAAAC,eAAM,EAACC,qBAAK,CAACC,MAAM,EAAEZ,KAAK,IAAIW,qBAAK,CAACX,KAAK,EAAEC,KAAK,IAAIU,qBAAK,CAACV,KAAK,EAAEE,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAAEE,MAAM,CAACI,SAAS,CAAC;IACjHL,OAAO,EAAE,CAACL,QAAQ,GAAGK,OAAO,GAAGS;EAAS,IAE1Cf,QAAQ,CACT;AAAA;AAAC;AAEJD,MAAM,CAACiB,WAAW,GAAG,kBAAkB;AAEvCjB,MAAM,CAACkB,SAAS,GAAG;EACjBjB,QAAQ,EAAEkB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjEpB,QAAQ,EAAEiB,kBAAS,CAACI,IAAI;EACxBpB,KAAK,EAAEgB,kBAAS,CAACI,IAAI;EACrBnB,KAAK,EAAEe,kBAAS,CAACI,IAAI;EACrBlB,GAAG,EAAEc,kBAAS,CAACE,MAAM;EACrBf,IAAI,EAAEa,kBAAS,CAACI,IAAI;EACpBC,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBlB,OAAO,EAAEY,kBAAS,CAACM;AACrB,CAAC"}

package/build/components/Action/Action.module.css

@@ -0,0 +1,35 @@
+.action {
+  align-items: center;
+  color: var(--mirai-ui-action-color);
+  display: flex;
+  font-family: var(--mirai-ui-font);
+  font-size: var(--mirai-ui-font-size-action);
+  font-weight: var(--mirai-ui-action-font-weight);
+  justify-content: center;
+  padding: var(--mirai-ui-button-padding-y) 0;
+  position: relative;
+  transition: color var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  width: fit-content;
+}
+
+.action:disabled {
+  color: var(--mirai-ui-action-color-disabled);
+}
+
+.action:not(:disabled):active {
+  color: var(--mirai-ui-action-color-active);
+}
+
+.large {
+  font-size: var(--mirai-ui-font-size-paragraph);
+  padding: var(--mirai-ui-button-padding-y) 0;
+}
+
+.small {
+  font-size: var(--mirai-ui-font-size-small);
+  padding: var(--mirai-ui-button-padding-y) 0;
+}
+
+.wide {
+  width: 100%;
+}

package/build/components/Action/Action.stories.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Story = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Action = require("./Action");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var _default = {
+  title: 'Components'
+};
+exports.default = _default;
+var Story = function Story(props) {
+  return /*#__PURE__*/React.createElement(_Action.Action, props);
+};
+exports.Story = Story;
+Story.storyName = 'Action';
+Story.args = _defineProperty({
+  children: 'children',
+  disabled: false,
+  large: false,
+  small: false,
+  tag: 'Button',
+  wide: false
+}, 'data-testid', 'test-story');
+Story.argTypes = {
+  onEnter: {
+    action: 'onEnter'
+  },
+  onLeave: {
+    action: 'onLeave'
+  },
+  onPress: {
+    action: 'onPress'
+  }
+};
+//# sourceMappingURL=Action.stories.js.map

package/build/components/Action/Action.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","large","small","tag","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Action } from './Action';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: 'children',\n  disabled: false,\n  large: false,\n  small: false,\n  tag: 'Button',\n  wide: false,\n  ['data-testid']: 'test-story',\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,oBAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,GACV,aAAa,EAAG,YAAY,CAC9B;AAEDT,KAAK,CAACU,QAAQ,GAAG;EACfC,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

package/build/components/Action/__tests__/__snapshots__/Action.test.js.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`component:<Action> inherit:className 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action mirai"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:disabled 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action"
+    disabled=""
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:large 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action large"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:small 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action small"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:tag 1`] = `
+<DocumentFragment>
+  <a
+    class="pressable action"
+  >
+    children
+  </a>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:wide 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action wide"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> renders 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> testID 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable action"
+    data-testid="mirai"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;

package/build/components/Action/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Action = require("./Action");
+Object.keys(_Action).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Action[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Action[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/components/Action/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Action/index.js"],"sourcesContent":["export * from './Action';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/components/Button/Button.module.css

@@ -4,7 +4,7 @@
   border-radius: var(--mirai-ui-button-radius);
   color: var(--mirai-ui-button-color);
   display: flex;
-  font-family: var(--mirai-ui-button-font);
+  font-family: var(--mirai-ui-font);
   font-size: var(--mirai-ui-font-size-action);
   font-weight: var(--mirai-ui-button-font-weight);
   justify-content: center;

package/build/components/InputDate/InputDate.js

@@ -12,7 +12,7 @@ var _primitives = require("../../primitives");
 var _InputText = require("../InputText");
 var _InputTextModule = _interopRequireDefault(require("../InputText/InputText.module.css"));
 var _InputDateModule = _interopRequireDefault(require("./InputDate.module.css"));
-var _excluded = ["disabled", "error", "format", "hint", "label", "labels", "max", "min", "name", "placeholder", "required", "value", "onChange", "onError", "onEnter", "onLeave"],
+var _excluded = ["disabled", "error", "format", "hint", "label", "labels", "max", "min", "name", "placeholder", "required", "success", "value", "warning", "onChange", "onError", "onEnter", "onLeave"],
   _excluded2 = ["className", "data-testid"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -41,8 +41,10 @@ var InputDate = function InputDate(_ref) {
     _ref$placeholder = _ref.placeholder,
     placeholder = _ref$placeholder === void 0 ? true : _ref$placeholder,
     required = _ref.required,
+    success = _ref.success,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? '' : _ref$value,
+    warning = _ref.warning,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     _ref$onError = _ref.onError,
@@ -103,7 +105,7 @@ var InputDate = function InputDate(_ref) {
       maxLength: part.length,
       name: "".concat(name, ":").concat(part),
       placeholder: placeholder ? labels[index] || part : undefined,
-      showState: index === parts.length - 1,
+      showState: false,
       value: values[index],
       onChange: function onChange(value) {
         for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -116,6 +118,13 @@ var InputDate = function InputDate(_ref) {
       className: (0, _helpers.styles)(_InputDateModule.default.input, _InputDateModule.default[part.substring(0, 1)], index === parts.length - 1 && _InputDateModule.default.state),
       "data-testid": testId ? "".concat(testId, "-").concat(part) : undefined
     }));
+  }), (error || success || warning) && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: (0, _helpers.getIconState)({
+      error: error,
+      success: success,
+      warning: warning
+    }),
+    className: (0, _helpers.styles)(_InputTextModule.default.icon, error ? _InputTextModule.default.error : warning ? _InputTextModule.default.warning : success ? _InputTextModule.default.success : undefined, !placeholder && _InputDateModule.default.withHint)
   })), hint && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     small: true,
     className: (0, _helpers.styles)(_InputTextModule.default.text, _InputTextModule.default.hint, disabled && _InputTextModule.default.disabled, error && _InputTextModule.default.error)
@@ -135,7 +144,9 @@ InputDate.propTypes = {
   name: _propTypes.default.string.isRequired,
   placeholder: _propTypes.default.bool,
   required: _propTypes.default.bool,
+  success: _propTypes.default.bool,
   value: _propTypes.default.string,
+  warning: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   onError: _propTypes.default.func,
   onEnter: _propTypes.default.func,

package/build/components/InputDate/InputDate.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","hint","label","labels","max","min","name","placeholder","required","value","onChange","onError","onEnter","onLeave","others","useState","focus","setFocus","parts","splitDate","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","getInputDateErrors","Object","keys","length","handleEnter","handleLeave","className","testId","rest","styles","style","inputContainer","styleDate","text","undefined","input","substring","state","displayName","propTypes","PropTypes","bool","string","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getInputDateErrors, splitDate, styles } from '../../helpers';\nimport { Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from '../InputText/InputText.module.css';\nimport styleDate from './InputDate.module.css';\n\nconst InputDate = ({\n  disabled,\n  error,\n  format = 'DD/MM/YYYY',\n  hint,\n  label,\n  labels = [],\n  max,\n  min,\n  name,\n  placeholder = true,\n  required,\n  value = '',\n  onChange = () => {},\n  onError = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const parts = splitDate(format);\n  const values = splitDate(value);\n\n  const handleChange = (partValue = '', partKey, event) => {\n    const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n    onChange(nextValue, event);\n\n    const errors = getInputDateErrors({ format, max, min, value, required });\n    if (Object.keys(errors || {}).length > 0) onError(errors);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const { className, ['data-testid']: testId, ...rest } = others;\n\n  return (\n    <View className={styles(style.inputContainer, className)} data-testid={testId}>\n      <Text\n        small\n        className={styles(\n          styleDate.label,\n          style.text,\n          style.hint,\n          disabled && style.disabled,\n          focus && style.focus,\n          error && style.error,\n        )}\n      >\n        {label}\n      </Text>\n\n      <View row>\n        {parts.map((part, index) => (\n          <InputText\n            {...rest}\n            disabled={disabled}\n            error={error}\n            hint={!placeholder ? labels[index] || part : undefined}\n            key={index}\n            maxLength={part.length}\n            name={`${name}:${part}`}\n            placeholder={placeholder ? labels[index] || part : undefined}\n            showState={index === parts.length - 1}\n            value={values[index]}\n            onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n            className={styles(\n              styleDate.input,\n              styleDate[part.substring(0, 1)],\n              index === parts.length - 1 && styleDate.state,\n            )}\n            data-testid={testId ? `${testId}-${part}` : undefined}\n          />\n        ))}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  format: PropTypes.string,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  labels: PropTypes.arrayOf(PropTypes.string),\n  max: PropTypes.string,\n  min: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  placeholder: PropTypes.bool,\n  required: PropTypes.bool,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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"}
+{"version":3,"file":"InputDate.js","names":["InputDate","disabled","error","format","hint","label","labels","max","min","name","placeholder","required","success","value","warning","onChange","onError","onEnter","onLeave","others","useState","focus","setFocus","parts","splitDate","values","handleChange","partValue","partKey","event","nextValue","map","part","index","join","errors","getInputDateErrors","Object","keys","length","handleEnter","handleLeave","className","testId","rest","styles","style","inputContainer","styleDate","text","undefined","input","substring","state","getIconState","icon","withHint","displayName","propTypes","PropTypes","bool","string","arrayOf","isRequired","func"],"sources":["../../../src/components/InputDate/InputDate.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { getIconState, getInputDateErrors, splitDate, styles } from '../../helpers';\nimport { Icon, Text, View } from '../../primitives';\nimport { InputText } from '../InputText';\nimport style from '../InputText/InputText.module.css';\nimport styleDate from './InputDate.module.css';\n\nconst InputDate = ({\n  disabled,\n  error,\n  format = 'DD/MM/YYYY',\n  hint,\n  label,\n  labels = [],\n  max,\n  min,\n  name,\n  placeholder = true,\n  required,\n  success,\n  value = '',\n  warning,\n  onChange = () => {},\n  onError = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const parts = splitDate(format);\n  const values = splitDate(value);\n\n  const handleChange = (partValue = '', partKey, event) => {\n    const nextValue = parts.map((part, index) => (part !== partKey ? values[index] || '' : partValue)).join('/');\n    onChange(nextValue, event);\n\n    const errors = getInputDateErrors({ format, max, min, value, required });\n    if (Object.keys(errors || {}).length > 0) onError(errors);\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const { className, ['data-testid']: testId, ...rest } = others;\n\n  return (\n    <View className={styles(style.inputContainer, className)} data-testid={testId}>\n      <Text\n        small\n        className={styles(\n          styleDate.label,\n          style.text,\n          style.hint,\n          disabled && style.disabled,\n          focus && style.focus,\n          error && style.error,\n        )}\n      >\n        {label}\n      </Text>\n\n      <View row>\n        {parts.map((part, index) => (\n          <InputText\n            {...rest}\n            disabled={disabled}\n            error={error}\n            hint={!placeholder ? labels[index] || part : undefined}\n            key={index}\n            maxLength={part.length}\n            name={`${name}:${part}`}\n            placeholder={placeholder ? labels[index] || part : undefined}\n            showState={false}\n            value={values[index]}\n            onChange={(value, ...rest) => handleChange(value, part, ...rest)}\n            onEnter={handleEnter}\n            onLeave={handleLeave}\n            className={styles(\n              styleDate.input,\n              styleDate[part.substring(0, 1)],\n              index === parts.length - 1 && styleDate.state,\n            )}\n            data-testid={testId ? `${testId}-${part}` : undefined}\n          />\n        ))}\n\n        {(error || success || warning) && (\n          <Icon\n            value={getIconState({ error, success, warning })}\n            className={styles(\n              style.icon,\n              error ? style.error : warning ? style.warning : success ? style.success : undefined,\n              !placeholder && styleDate.withHint,\n            )}\n          />\n        )}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputDate.displayName = 'Component:InputDate';\n\nInputDate.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  format: PropTypes.string,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  labels: PropTypes.arrayOf(PropTypes.string),\n  max: PropTypes.string,\n  min: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  placeholder: PropTypes.bool,\n  required: PropTypes.bool,\n  success: PropTypes.bool,\n  value: PropTypes.string,\n  warning: PropTypes.bool,\n  onChange: PropTypes.func,\n  onError: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputDate };\n"],"mappings":"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"}

package/build/components/InputDate/InputDate.module.css

@@ -20,3 +20,7 @@
 .label {
   margin-top: calc(var(--mirai-ui-font-size-small) * -0.5);
 }
+
+.withHint {
+  margin-bottom: calc(var(--mirai-ui-input-text-padding-y) * 2);
+}

package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap

@@ -188,33 +188,29 @@ exports[`component:<InputDate> prop:error 1`] = `
             type="text"
             value=""
           />
-          <div
-            class="view row icons"
-          >
-            <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>
+      <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>
 </DocumentFragment>
@@ -492,6 +488,91 @@ exports[`component:<InputDate> prop:placeholder (false) 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<InputDate> prop:success 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <span
+      class="text small label text hint"
+    />
+    <div
+      class="view row"
+    >
+      <div
+        class="view inputContainer input D"
+      >
+        <div
+          class="view row inputBorder"
+        >
+          <input
+            class="input input"
+            maxlength="2"
+            name="name:DD"
+            placeholder="DD"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="view inputContainer input M"
+      >
+        <div
+          class="view row inputBorder"
+        >
+          <input
+            class="input input"
+            maxlength="2"
+            name="name:MM"
+            placeholder="MM"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="view inputContainer input Y state"
+      >
+        <div
+          class="view row inputBorder"
+        >
+          <input
+            class="input input"
+            maxlength="4"
+            name="name:YYYY"
+            placeholder="YYYY"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon success"
+      >
+        <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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<InputDate> prop:value & prop:format 1`] = `
 <DocumentFragment>
   <div
@@ -620,6 +701,87 @@ exports[`component:<InputDate> prop:value 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<InputDate> prop:warning 1`] = `
+<DocumentFragment>
+  <div
+    class="view inputContainer"
+  >
+    <span
+      class="text small label text hint"
+    />
+    <div
+      class="view row"
+    >
+      <div
+        class="view inputContainer input D"
+      >
+        <div
+          class="view row inputBorder"
+        >
+          <input
+            class="input input"
+            maxlength="2"
+            name="name:DD"
+            placeholder="DD"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="view inputContainer input M"
+      >
+        <div
+          class="view row inputBorder"
+        >
+          <input
+            class="input input"
+            maxlength="2"
+            name="name:MM"
+            placeholder="MM"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        class="view inputContainer input Y state"
+      >
+        <div
+          class="view row inputBorder"
+        >
+          <input
+            class="input input"
+            maxlength="4"
+            name="name:YYYY"
+            placeholder="YYYY"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <span
+        class="icon headline-3 icon warning"
+      >
+        <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="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`component:<InputDate> renders 1`] = `
 <DocumentFragment>
   <div