@mirai/ui 1.0.113 → 1.0.114-alpha

package/README.md

@@ -325,10 +325,12 @@ A hyperlink component that receives the following props:
 
 - `children:node|string`
 - `disabled:boolean` applying 'disabled' attribute
+- `href:string` applying 'href' attribute & force `a` tag
 - `inline:boolean` modifying the button padding size
 - `large:boolean` modifying the button size
 - `small:boolean` modifying the button size
 - `tag:string` html tag of resulting element ('button' by default)
+- `target:boolean` applying 'target' attribute (in combination with `href:string`)
 - `underline:boolean` use an underline text decoration
 - `wide:bool` modifying the button to full-width
 - `onEnter:function` executed when the user hovers over

package/build/components/Action/Action.js

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _ActionModule = _interopRequireDefault(require("./Action.module.css"));
-var _excluded = ["children", "disabled", "inline", "large", "small", "tag", "underline", "wide", "onPress"];
+var _excluded = ["children", "disabled", "href", "inline", "large", "small", "tag", "target", "underline", "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; }
@@ -22,20 +22,26 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Action = function Action(_ref) {
   var children = _ref.children,
     disabled = _ref.disabled,
+    href = _ref.href,
     inline = _ref.inline,
     large = _ref.large,
     small = _ref.small,
     _ref$tag = _ref.tag,
     tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+    target = _ref.target,
     underline = _ref.underline,
     wide = _ref.wide,
-    onPress = _ref.onPress,
+    _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, inline && _ActionModule.default.inline, large && _ActionModule.default.large, small && _ActionModule.default.small, underline && _ActionModule.default.underline, wide && _ActionModule.default.wide, others.className),
-    onPress: onPress
+    href: href,
+    tag: href ? 'a' : tag,
+    className: (0, _helpers.styles)(_ActionModule.default.action, disabled && _ActionModule.default.disabled, inline && _ActionModule.default.inline, large && _ActionModule.default.large, small && _ActionModule.default.small, underline && _ActionModule.default.underline, wide && _ActionModule.default.wide, others.className),
+    onPress: function onPress(event) {
+      _onPress && _onPress(event);
+      if (href && target) window.open(href, target);else if (href) window.location = href;
+    }
   }), children);
 };
 exports.Action = Action;
@@ -43,10 +49,12 @@ Action.displayName = 'Component:Action';
 Action.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
+  href: _propTypes.default.string,
   inline: _propTypes.default.bool,
   large: _propTypes.default.bool,
   small: _propTypes.default.bool,
   tag: _propTypes.default.string,
+  target: _propTypes.default.string,
   underline: _propTypes.default.bool,
   wide: _propTypes.default.bool,
   onEnter: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"file":"Action.js","names":["Action","children","disabled","inline","large","small","tag","underline","wide","onPress","others","React","createElement","Pressable","className","styles","style","action","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, inline, large, small, tag = 'button', underline, wide, onPress, ...others }) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      tag,\n      className: styles(\n        style.action,\n        inline && style.inline,\n        large && style.large,\n        small && style.small,\n        underline && style.underline,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress,\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  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  underline: PropTypes.bool,\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,MAAM,QAANA,MAAM;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBAC7GC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTR,QAAQ,EAARA,QAAQ;IACRI,GAAG,EAAHA,GAAG;IACHQ,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZd,MAAM,IAAIa,qBAAK,CAACb,MAAM,EACtBC,KAAK,IAAIY,qBAAK,CAACZ,KAAK,EACpBC,KAAK,IAAIW,qBAAK,CAACX,KAAK,EACpBE,SAAS,IAAIS,qBAAK,CAACT,SAAS,EAC5BC,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAClBE,MAAM,CAACI,SAAS,CACjB;IACDL,OAAO,EAAPA;EAAO,IAETR,QAAQ,CACT;AAAA;AAAC;AAEJD,MAAM,CAACkB,WAAW,GAAG,kBAAkB;AAEvClB,MAAM,CAACmB,SAAS,GAAG;EACjBlB,QAAQ,EAAEmB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjErB,QAAQ,EAAEkB,kBAAS,CAACI,IAAI;EACxBrB,MAAM,EAAEiB,kBAAS,CAACI,IAAI;EACtBpB,KAAK,EAAEgB,kBAAS,CAACI,IAAI;EACrBnB,KAAK,EAAEe,kBAAS,CAACI,IAAI;EACrBlB,GAAG,EAAEc,kBAAS,CAACE,MAAM;EACrBf,SAAS,EAAEa,kBAAS,CAACI,IAAI;EACzBhB,IAAI,EAAEY,kBAAS,CAACI,IAAI;EACpBC,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBjB,OAAO,EAAEW,kBAAS,CAACM;AACrB,CAAC"}
+{"version":3,"file":"Action.js","names":["Action","children","disabled","href","inline","large","small","tag","target","underline","wide","onPress","others","React","createElement","Pressable","className","styles","style","action","event","window","open","location","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 = ({\n  children,\n  disabled,\n  href,\n  inline,\n  large,\n  small,\n  tag = 'button',\n  target,\n  underline,\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled,\n      href,\n      tag: href ? 'a' : tag,\n      className: styles(\n        style.action,\n        disabled && style.disabled,\n        inline && style.inline,\n        large && style.large,\n        small && style.small,\n        underline && style.underline,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress: (event) => {\n        onPress && onPress(event);\n        if (href && target) window.open(href, target);\n        else if (href) window.location = href;\n      },\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  href: PropTypes.string,\n  inline: PropTypes.bool,\n  large: PropTypes.bool,\n  small: PropTypes.bool,\n  tag: PropTypes.string,\n  target: PropTypes.string,\n  underline: PropTypes.bool,\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,IACVC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,KAAK,QAALA,KAAK;IAAA,gBACLC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,IAAI,QAAJA,IAAI;IACJC,QAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTV,QAAQ,EAARA,QAAQ;IACRC,IAAI,EAAJA,IAAI;IACJI,GAAG,EAAEJ,IAAI,GAAG,GAAG,GAAGI,GAAG;IACrBS,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZjB,QAAQ,IAAIgB,qBAAK,CAAChB,QAAQ,EAC1BE,MAAM,IAAIc,qBAAK,CAACd,MAAM,EACtBC,KAAK,IAAIa,qBAAK,CAACb,KAAK,EACpBC,KAAK,IAAIY,qBAAK,CAACZ,KAAK,EACpBG,SAAS,IAAIS,qBAAK,CAACT,SAAS,EAC5BC,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAClBE,MAAM,CAACI,SAAS,CACjB;IACDL,OAAO,EAAE,iBAACS,KAAK,EAAK;MAClBT,QAAO,IAAIA,QAAO,CAACS,KAAK,CAAC;MACzB,IAAIjB,IAAI,IAAIK,MAAM,EAAEa,MAAM,CAACC,IAAI,CAACnB,IAAI,EAAEK,MAAM,CAAC,CAAC,KACzC,IAAIL,IAAI,EAAEkB,MAAM,CAACE,QAAQ,GAAGpB,IAAI;IACvC;EAAC,IAEHF,QAAQ,CACT;AAAA;AAAC;AAEJD,MAAM,CAACwB,WAAW,GAAG,kBAAkB;AAEvCxB,MAAM,CAACyB,SAAS,GAAG;EACjBxB,QAAQ,EAAEyB,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjE3B,QAAQ,EAAEwB,kBAAS,CAACI,IAAI;EACxB3B,IAAI,EAAEuB,kBAAS,CAACE,MAAM;EACtBxB,MAAM,EAAEsB,kBAAS,CAACI,IAAI;EACtBzB,KAAK,EAAEqB,kBAAS,CAACI,IAAI;EACrBxB,KAAK,EAAEoB,kBAAS,CAACI,IAAI;EACrBvB,GAAG,EAAEmB,kBAAS,CAACE,MAAM;EACrBpB,MAAM,EAAEkB,kBAAS,CAACE,MAAM;EACxBnB,SAAS,EAAEiB,kBAAS,CAACI,IAAI;EACzBpB,IAAI,EAAEgB,kBAAS,CAACI,IAAI;EACpBC,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBrB,OAAO,EAAEe,kBAAS,CAACM;AACrB,CAAC"}

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

@@ -10,11 +10,16 @@
   width: fit-content;
 }
 
-.action:disabled {
+.action:not(.disabled):hover {
+  color: var(--mirai-ui-content);
+}
+
+.action.disabled,
+.action.disabled * {
   color: var(--mirai-ui-action-color-disabled);
 }
 
-.action:not(:disabled):active {
+.action:not(.disabled):active {
   color: var(--mirai-ui-action-color-active);
 }
 
@@ -46,3 +51,7 @@
 .wide {
   width: 100%;
 }
+
+.action * {
+  margin-right: calc(var(--mirai-ui-space-XS) / 2);
+}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Story = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Action = require("./Action");
+var _Icon = require("../../primitives/Icon");
 var _Story$args;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -22,15 +23,20 @@ var Story = function Story(props) {
 exports.Story = Story;
 Story.storyName = 'Action';
 Story.args = (_Story$args = {
-  children: 'children',
+  children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    value: _Icon.ICON.INFO
+  }), "children"),
   disabled: false,
+  href: '',
+  icon: '',
   inline: false,
   large: false,
   small: false,
   tag: 'button',
+  target: '',
   underline: false,
   wide: false
-}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "href", undefined), _defineProperty(_Story$args, "style", {}), _Story$args);
+}, _defineProperty(_Story$args, 'data-testid', 'test-story'), _defineProperty(_Story$args, "style", {}), _Story$args);
 Story.argTypes = {
   onEnter: {
     action: 'onEnter'

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

@@ -1 +1 @@
-{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","disabled","inline","large","small","tag","underline","wide","undefined","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import 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  inline: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  underline: false,\n  wide: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  href: undefined,\n  style: {},\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,6BAAC,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,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,wCACvBC,SAAS,yCACR,CAAC,CAAC,eACV;AAEDZ,KAAK,CAACa,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"}
+{"version":3,"file":"Action.stories.js","names":["title","Story","props","storyName","args","children","ICON","INFO","disabled","href","icon","inline","large","small","tag","target","underline","wide","argTypes","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Action/Action.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from './Action';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => <Action {...props} />;\n\nStory.storyName = 'Action';\n\nStory.args = {\n  children: (\n    <>\n      <Icon value={ICON.INFO} />\n      children\n    </>\n  ),\n  disabled: false,\n  href: '',\n  icon: '',\n  inline: false,\n  large: false,\n  small: false,\n  tag: 'button',\n  target: '',\n  underline: false,\n  wide: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBAAK,6BAAC,cAAM,EAAKA,KAAK,CAAI;AAAA;AAAC;AAEtDD,KAAK,CAACE,SAAS,GAAG,QAAQ;AAE1BF,KAAK,CAACG,IAAI;EACRC,QAAQ,eACN,yEACE,6BAAC,UAAI;IAAC,KAAK,EAAEC,UAAI,CAACC;EAAK,EAAG,aAG7B;EACDC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,EAAE;EACRC,IAAI,EAAE,EAAE;EACRC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,QAAQ;EACbC,MAAM,EAAE,EAAE;EACVC,SAAS,EAAE,KAAK;EAChBC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB,CAAC,CAAC,eACV;AAEDhB,KAAK,CAACiB,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

@@ -13,7 +13,7 @@ exports[`component:<Action> inherit:className 1`] = `
 exports[`component:<Action> prop:disabled 1`] = `
 <DocumentFragment>
   <button
-    class="pressable disabled action"
+    class="pressable disabled action disabled"
     disabled=""
   >
     children
@@ -21,6 +21,28 @@ exports[`component:<Action> prop:disabled 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Action> prop:href + prop:target 1`] = `
+<DocumentFragment>
+  <a
+    class="pressable action"
+    href="soyjavi.com"
+  >
+    children
+  </a>
+</DocumentFragment>
+`;
+
+exports[`component:<Action> prop:href 1`] = `
+<DocumentFragment>
+  <a
+    class="pressable action"
+    href="soyjavi.com"
+  >
+    children
+  </a>
+</DocumentFragment>
+`;
+
 exports[`component:<Action> prop:inline & prop:large 1`] = `
 <DocumentFragment>
   <button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.113",
+  "version": "1.0.114-alpha",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",