@coorpacademy/components 10.1.4 → 10.1.8

package/lib/atom/button-link-icon-only/index.js

@@ -0,0 +1,94 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
+
+var _getOr2 = _interopRequireDefault(require("lodash/fp/getOr"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _buttonIcons = require("../../util/button-icons");
+
+var _link = _interopRequireDefault(require("../link"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const getButtonContent = icon => {
+  const Icon = (0, _getOr2.default)(null, icon, _buttonIcons.ICONS);
+
+  if (!Icon) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.default.buttonContent
+    });
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonContent
+  }, /*#__PURE__*/_react.default.createElement(Icon, {
+    className: _style.default.icon
+  }));
+};
+
+const ButtonLinkIconOnly = props => {
+  const {
+    size = 'default',
+    disabled,
+    icon,
+    'data-name': dataName,
+    'aria-label': ariaLabel,
+    link,
+    onClick
+  } = props;
+  const contentView = getButtonContent(icon);
+  const styleButton = (0, _classnames.default)(size === 'default' ? _style.default.default : _style.default.small, link && _style.default.link, disabled && _style.default.disabled);
+
+  if (link) {
+    return /*#__PURE__*/_react.default.createElement(_link.default, _extends({}, link, {
+      className: styleButton,
+      "data-name": dataName,
+      "aria-label": ariaLabel,
+      title: ariaLabel
+    }), contentView);
+  }
+
+  const handleOnClick = (0, _react.useMemo)(() => () => onClick(), [onClick]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": ariaLabel,
+    "data-name": dataName,
+    title: ariaLabel,
+    className: styleButton,
+    onClick: handleOnClick
+  }, contentView);
+};
+
+ButtonLinkIconOnly.propTypes = process.env.NODE_ENV !== "production" ? {
+  size: _propTypes.default.oneOf(['default', 'small']),
+  'aria-label': _propTypes.default.string,
+  'data-name': _propTypes.default.string,
+  icon: _propTypes.default.oneOf((0, _keys2.default)(_buttonIcons.ICONS)),
+  onClick: _propTypes.default.func,
+  link: _propTypes.default.shape({
+    href: _propTypes.default.string,
+    download: _propTypes.default.bool,
+    target: _propTypes.default.oneOf(['_self', '_blank', '_parent', '_top'])
+  }),
+  disabled: _propTypes.default.bool
+} : {};
+var _default = ButtonLinkIconOnly;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/button-link-icon-only/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/button-link-icon-only/index.js"],"names":["getButtonContent","icon","Icon","ICONS","style","buttonContent","ButtonLinkIconOnly","props","size","disabled","dataName","ariaLabel","link","onClick","contentView","styleButton","default","small","handleOnClick","propTypes","PropTypes","oneOf","string","func","shape","href","download","bool","target"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,gBAAgB,GAAGC,IAAI,IAAI;AAC/B,QAAMC,IAAI,GAAG,qBAAM,IAAN,EAAYD,IAAZ,EAAkBE,kBAAlB,CAAb;;AAEA,MAAI,CAACD,IAAL,EAAW;AACT,wBAAO;AAAK,MAAA,SAAS,EAAEE,eAAMC;AAAtB,MAAP;AACD;;AAED,sBACE;AAAK,IAAA,SAAS,EAAED,eAAMC;AAAtB,kBACE,6BAAC,IAAD;AAAM,IAAA,SAAS,EAAED,eAAMH;AAAvB,IADF,CADF;AAKD,CAZD;;AAcA,MAAMK,kBAAkB,GAAGC,KAAK,IAAI;AAClC,QAAM;AACJC,IAAAA,IAAI,GAAG,SADH;AAEJC,IAAAA,QAFI;AAGJR,IAAAA,IAHI;AAIJ,iBAAaS,QAJT;AAKJ,kBAAcC,SALV;AAMJC,IAAAA,IANI;AAOJC,IAAAA;AAPI,MAQFN,KARJ;AASA,QAAMO,WAAW,GAAGd,gBAAgB,CAACC,IAAD,CAApC;AACA,QAAMc,WAAW,GAAG,yBAClBP,IAAI,KAAK,SAAT,GAAqBJ,eAAMY,OAA3B,GAAqCZ,eAAMa,KADzB,EAElBL,IAAI,IAAIR,eAAMQ,IAFI,EAGlBH,QAAQ,IAAIL,eAAMK,QAHA,CAApB;;AAMA,MAAIG,IAAJ,EAAU;AACR,wBACE,6BAAC,aAAD,eACMA,IADN;AAEE,MAAA,SAAS,EAAEG,WAFb;AAGE,mBAAWL,QAHb;AAIE,oBAAYC,SAJd;AAKE,MAAA,KAAK,EAAEA;AALT,QAOGG,WAPH,CADF;AAWD;;AAED,QAAMI,aAAa,GAAG,oBAAQ,MAAM,MAAML,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAAtB;AACA,sBACE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,kBAAYF,SAFd;AAGE,iBAAWD,QAHb;AAIE,IAAA,KAAK,EAAEC,SAJT;AAKE,IAAA,SAAS,EAAEI,WALb;AAME,IAAA,OAAO,EAAEG;AANX,KAQGJ,WARH,CADF;AAYD,CA5CD;;AA8CAR,kBAAkB,CAACa,SAAnB,2CAA+B;AAC7BX,EAAAA,IAAI,EAAEY,mBAAUC,KAAV,CAAgB,CAAC,SAAD,EAAY,OAAZ,CAAhB,CADuB;AAE7B,gBAAcD,mBAAUE,MAFK;AAG7B,eAAaF,mBAAUE,MAHM;AAI7BrB,EAAAA,IAAI,EAAEmB,mBAAUC,KAAV,CAAgB,oBAAKlB,kBAAL,CAAhB,CAJuB;AAK7BU,EAAAA,OAAO,EAAEO,mBAAUG,IALU;AAM7BX,EAAAA,IAAI,EAAEQ,mBAAUI,KAAV,CAAgB;AACpBC,IAAAA,IAAI,EAAEL,mBAAUE,MADI;AAEpBI,IAAAA,QAAQ,EAAEN,mBAAUO,IAFA;AAGpBC,IAAAA,MAAM,EAAER,mBAAUC,KAAV,CAAgB,CAAC,OAAD,EAAU,QAAV,EAAoB,SAApB,EAA+B,MAA/B,CAAhB;AAHY,GAAhB,CANuB;AAW7BZ,EAAAA,QAAQ,EAAEW,mBAAUO;AAXS,CAA/B;eAcerB,kB","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {getOr, keys} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {ICONS} from '../../util/button-icons';\nimport Link from '../link';\nimport style from './style.css';\n\nconst getButtonContent = icon => {\n  const Icon = getOr(null, icon, ICONS);\n\n  if (!Icon) {\n    return <div className={style.buttonContent} />;\n  }\n\n  return (\n    <div className={style.buttonContent}>\n      <Icon className={style.icon} />\n    </div>\n  );\n};\n\nconst ButtonLinkIconOnly = props => {\n  const {\n    size = 'default',\n    disabled,\n    icon,\n    'data-name': dataName,\n    'aria-label': ariaLabel,\n    link,\n    onClick\n  } = props;\n  const contentView = getButtonContent(icon);\n  const styleButton = classnames(\n    size === 'default' ? style.default : style.small,\n    link && style.link,\n    disabled && style.disabled\n  );\n\n  if (link) {\n    return (\n      <Link\n        {...link}\n        className={styleButton}\n        data-name={dataName}\n        aria-label={ariaLabel}\n        title={ariaLabel}\n      >\n        {contentView}\n      </Link>\n    );\n  }\n\n  const handleOnClick = useMemo(() => () => onClick(), [onClick]);\n  return (\n    <button\n      type=\"button\"\n      aria-label={ariaLabel}\n      data-name={dataName}\n      title={ariaLabel}\n      className={styleButton}\n      onClick={handleOnClick}\n    >\n      {contentView}\n    </button>\n  );\n};\n\nButtonLinkIconOnly.propTypes = {\n  size: PropTypes.oneOf(['default', 'small']),\n  'aria-label': PropTypes.string,\n  'data-name': PropTypes.string,\n  icon: PropTypes.oneOf(keys(ICONS)),\n  onClick: PropTypes.func,\n  link: PropTypes.shape({\n    href: PropTypes.string,\n    download: PropTypes.bool,\n    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top'])\n  }),\n  disabled: PropTypes.bool\n};\n\nexport default ButtonLinkIconOnly;\n"],"file":"index.js"}

package/lib/atom/button-link-icon-only/style.css

@@ -0,0 +1,64 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+
+.button {
+  font-family: Gilroy;
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  background-color: cm_grey_100;
+}
+
+.button:hover {
+  background-color: cm_grey_200;
+}
+
+.disabled {
+  opacity: 0.3;
+  cursor: default;
+  pointer-events: none;
+}
+
+.disabled:hover {
+  background-color: cm_grey_100;
+}
+
+.buttonContent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.default {
+  composes: button;
+  width: 44px;
+  height: 44px;
+  border-radius: 7px;
+}
+
+.small {
+  composes: button;
+  width: 32px;
+  height: 32px;
+  border-radius: 5px;
+}
+
+.default .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.small .icon {
+  width: 12px;
+  height: 12px;
+}

package/lib/atom/button-link-icon-only/test/button-link-icon-only.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _identity2 = _interopRequireDefault(require("lodash/fp/identity"));
+
+var _browserEnv = _interopRequireDefault(require("browser-env"));
+
+var _ava = _interopRequireDefault(require("ava"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _enzyme = require("enzyme");
+
+var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
+
+var _ = _interopRequireDefault(require(".."));
+
+var _buttonIconBullet = _interopRequireDefault(require("./fixtures/button-icon-bullet"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _browserEnv.default)();
+(0, _enzyme.configure)({
+  adapter: new _enzymeAdapterReact.default()
+});
+const translate = _identity2.default;
+(0, _ava.default)('should launch onClick on click event for ButtonLinkIconOnly', t => {
+  const wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_.default, _buttonIconBullet.default.props), {
+    context: {
+      translate
+    }
+  });
+  const button = wrapper.find('[data-name="bullet-button"]');
+  t.true(button.exists());
+  button.first().simulate('click', {});
+  t.pass();
+});
+//# sourceMappingURL=button-link-icon-only.js.map

package/lib/atom/button-link-icon-only/test/button-link-icon-only.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/atom/button-link-icon-only/test/button-link-icon-only.js"],"names":["adapter","Adapter","translate","t","wrapper","defaultFixture","props","context","button","find","true","exists","first","simulate","pass"],"mappings":";;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;AAEA;AACA,uBAAU;AAACA,EAAAA,OAAO,EAAE,IAAIC,2BAAJ;AAAV,CAAV;AACA,MAAMC,SAAS,qBAAf;AAEA,kBAAK,6DAAL,EAAoEC,CAAC,IAAI;AACvE,QAAMC,OAAO,GAAG,mCAAQ,6BAAC,SAAD,EAAwBC,0BAAeC,KAAvC,CAAR,EAA0D;AACxEC,IAAAA,OAAO,EAAE;AAACL,MAAAA;AAAD;AAD+D,GAA1D,CAAhB;AAGA,QAAMM,MAAM,GAAGJ,OAAO,CAACK,IAAR,CAAa,6BAAb,CAAf;AACAN,EAAAA,CAAC,CAACO,IAAF,CAAOF,MAAM,CAACG,MAAP,EAAP;AACAH,EAAAA,MAAM,CAACI,KAAP,GAAeC,QAAf,CAAwB,OAAxB,EAAiC,EAAjC;AACAV,EAAAA,CAAC,CAACW,IAAF;AACD,CARD","sourcesContent":["import browserEnv from 'browser-env';\nimport test from 'ava';\nimport React from 'react';\nimport {shallow, configure} from 'enzyme';\nimport {identity} from 'lodash/fp';\nimport Adapter from 'enzyme-adapter-react-16';\nimport ButtonLinkIconOnly from '..';\nimport defaultFixture from './fixtures/button-icon-bullet';\n\nbrowserEnv();\nconfigure({adapter: new Adapter()});\nconst translate = identity;\n\ntest('should launch onClick on click event for ButtonLinkIconOnly', t => {\n  const wrapper = shallow(<ButtonLinkIconOnly {...defaultFixture.props} />, {\n    context: {translate}\n  });\n  const button = wrapper.find('[data-name=\"bullet-button\"]');\n  t.true(button.exists());\n  button.first().simulate('click', {});\n  t.pass();\n});\n"],"file":"button-link-icon-only.js"}

package/lib/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    size: 'default',
+    'aria-label': 'aria button',
+    'data-name': 'bullet-button',
+    icon: 'bullet-point',
+    onClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=button-icon-bullet.js.map

package/lib/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/button-icon-bullet.js"],"names":["props","size","icon","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAEL,kBAAc,aAFT;AAGL,iBAAa,eAHR;AAILC,IAAAA,IAAI,EAAE,cAJD;AAKLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AALV;AADM,C","sourcesContent":["export default {\n  props: {\n    size: 'default',\n    'aria-label': 'aria button',\n    'data-name': 'bullet-button',\n    icon: 'bullet-point',\n    onClick: () => console.log('click')\n  }\n};\n"],"file":"button-icon-bullet.js"}

package/lib/atom/{button-link/test/fixtures/icon-button.js → button-link-icon-only/test/fixtures/default.js}

@@ -4,15 +4,12 @@ exports.__esModule = true;
 exports.default = void 0;
 var _default = {
   props: {
-    type: 'secondary',
+    size: 'default',
     'data-name': 'default-button',
     'aria-label': 'aria button',
-    icon: {
-      position: 'center',
-      type: 'close'
-    },
+    icon: 'close',
     onClick: () => console.log('click')
   }
 };
 exports.default = _default;
-//# sourceMappingURL=icon-button.js.map
+//# sourceMappingURL=default.js.map

package/lib/atom/button-link-icon-only/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/default.js"],"names":["props","size","icon","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,SADD;AAEL,iBAAa,gBAFR;AAGL,kBAAc,aAHT;AAILC,IAAAA,IAAI,EAAE,OAJD;AAKLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AALV;AADM,C","sourcesContent":["export default {\n  props: {\n    size: 'default',\n    'data-name': 'default-button',\n    'aria-label': 'aria button',\n    icon: 'close',\n    onClick: () => console.log('click')\n  }\n};\n"],"file":"default.js"}

package/lib/atom/button-link-icon-only/test/fixtures/no-icon.js

@@ -0,0 +1,12 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    'data-name': 'default-button',
+    onClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=no-icon.js.map

package/lib/atom/button-link-icon-only/test/fixtures/no-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/no-icon.js"],"names":["props","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACL,iBAAa,gBADR;AAELC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AAFV;AADM,C","sourcesContent":["export default {\n  props: {\n    'data-name': 'default-button',\n    onClick: () => console.log('click')\n  }\n};\n"],"file":"no-icon.js"}

package/lib/atom/button-link-icon-only/test/fixtures/small-button-disabled.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    size: 'small',
+    'data-name': 'default-button',
+    'aria-label': 'aria button',
+    icon: 'close',
+    disabled: true,
+    onClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=small-button-disabled.js.map

package/lib/atom/button-link-icon-only/test/fixtures/small-button-disabled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/small-button-disabled.js"],"names":["props","size","icon","disabled","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAEL,iBAAa,gBAFR;AAGL,kBAAc,aAHT;AAILC,IAAAA,IAAI,EAAE,OAJD;AAKLC,IAAAA,QAAQ,EAAE,IALL;AAMLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AANV;AADM,C","sourcesContent":["export default {\n  props: {\n    size: 'small',\n    'data-name': 'default-button',\n    'aria-label': 'aria button',\n    icon: 'close',\n    disabled: true,\n    onClick: () => console.log('click')\n  }\n};\n"],"file":"small-button-disabled.js"}

package/lib/atom/button-link-icon-only/test/fixtures/small-link-download.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    size: 'small',
+    icon: 'see',
+    'data-name': 'default-button',
+    'aria-label': 'aria button',
+    link: {
+      href: 'https://setup.coorpacademy.com/assets/templates/import-users-template.xlsx',
+      download: true
+    }
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=small-link-download.js.map

package/lib/atom/button-link-icon-only/test/fixtures/small-link-download.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-link-icon-only/test/fixtures/small-link-download.js"],"names":["props","size","icon","link","href","download"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EAAE,OADD;AAELC,IAAAA,IAAI,EAAE,KAFD;AAGL,iBAAa,gBAHR;AAIL,kBAAc,aAJT;AAKLC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,EAAE,4EADF;AAEJC,MAAAA,QAAQ,EAAE;AAFN;AALD;AADM,C","sourcesContent":["export default {\n  props: {\n    size: 'small',\n    icon: 'see',\n    'data-name': 'default-button',\n    'aria-label': 'aria button',\n    link: {\n      href: 'https://setup.coorpacademy.com/assets/templates/import-users-template.xlsx',\n      download: true\n    }\n  }\n};\n"],"file":"small-link-download.js"}

package/lib/atom/button-menu/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _map = _interopRequireDefault(require("lodash/fp/map"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Button = props => {
+  const {
+    'data-name': dataName,
+    disabled,
+    label,
+    onClick,
+    type = 'default'
+  } = props;
+  const styleButton = (0, _classnames.default)(_style.default.button, type === 'default' && _style.default.default, type === 'dangerous' && _style.default.dangerous, disabled && _style.default.disabled);
+  const handleOnClick = (0, _react.useCallback)(() => onClick(), [onClick]);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-label": label,
+    title: label,
+    "data-name": dataName,
+    className: styleButton,
+    onClick: handleOnClick
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonContent
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.label
+  }, label)));
+};
+
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  'data-name': _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  label: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  type: _propTypes.default.oneOf(['default', 'dangerous'])
+} : {};
+
+const ButtonMenu = props => {
+  const {
+    buttons,
+    'data-name': dataName
+  } = props;
+
+  const buildButton = (button, index) => {
+    return /*#__PURE__*/_react.default.createElement(Button, _extends({}, button, {
+      key: button.label + index
+    }));
+  };
+
+  const buttonList = (0, _react.useMemo)(() => _map.default.convert({
+    cap: false
+  })(buildButton, buttons), [buttons, buildButton]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-name": dataName
+  }, buttonList);
+};
+
+ButtonMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  buttons: _propTypes.default.arrayOf(_propTypes.default.shape(Button.propTypes)).isRequired,
+  'data-name': _propTypes.default.string
+} : {};
+var _default = ButtonMenu;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/atom/button-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/atom/button-menu/index.js"],"names":["Button","props","dataName","disabled","label","onClick","type","styleButton","style","button","default","dangerous","handleOnClick","buttonContent","propTypes","PropTypes","string","bool","isRequired","func","oneOf","ButtonMenu","buttons","buildButton","index","buttonList","map","convert","cap","arrayOf","shape"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,MAAM,GAAGC,KAAK,IAAI;AACtB,QAAM;AAAC,iBAAaC,QAAd;AAAwBC,IAAAA,QAAxB;AAAkCC,IAAAA,KAAlC;AAAyCC,IAAAA,OAAzC;AAAkDC,IAAAA,IAAI,GAAG;AAAzD,MAAsEL,KAA5E;AACA,QAAMM,WAAW,GAAG,yBAClBC,eAAMC,MADY,EAElBH,IAAI,KAAK,SAAT,IAAsBE,eAAME,OAFV,EAGlBJ,IAAI,KAAK,WAAT,IAAwBE,eAAMG,SAHZ,EAIlBR,QAAQ,IAAIK,eAAML,QAJA,CAApB;AAOA,QAAMS,aAAa,GAAG,wBAAY,MAAMP,OAAO,EAAzB,EAA6B,CAACA,OAAD,CAA7B,CAAtB;AACA,sBACE;AACE,IAAA,IAAI,EAAC,QADP;AAEE,kBAAYD,KAFd;AAGE,IAAA,KAAK,EAAEA,KAHT;AAIE,iBAAWF,QAJb;AAKE,IAAA,SAAS,EAAEK,WALb;AAME,IAAA,OAAO,EAAEK;AANX,kBAQE;AAAK,IAAA,SAAS,EAAEJ,eAAMK;AAAtB,kBACE;AAAM,IAAA,SAAS,EAAEL,eAAMJ;AAAvB,KAA+BA,KAA/B,CADF,CARF,CADF;AAcD,CAxBD;;AA0BAJ,MAAM,CAACc,SAAP,2CAAmB;AACjB,eAAaC,mBAAUC,MADN;AAEjBb,EAAAA,QAAQ,EAAEY,mBAAUE,IAFH;AAGjBb,EAAAA,KAAK,EAAEW,mBAAUC,MAAV,CAAiBE,UAHP;AAIjBb,EAAAA,OAAO,EAAEU,mBAAUI,IAAV,CAAeD,UAJP;AAKjBZ,EAAAA,IAAI,EAAES,mBAAUK,KAAV,CAAgB,CAAC,SAAD,EAAY,WAAZ,CAAhB;AALW,CAAnB;;AAQA,MAAMC,UAAU,GAAGpB,KAAK,IAAI;AAC1B,QAAM;AAACqB,IAAAA,OAAD;AAAU,iBAAapB;AAAvB,MAAmCD,KAAzC;;AACA,QAAMsB,WAAW,GAAG,CAACd,MAAD,EAASe,KAAT,KAAmB;AACrC,wBAAO,6BAAC,MAAD,eAAYf,MAAZ;AAAoB,MAAA,GAAG,EAAEA,MAAM,CAACL,KAAP,GAAeoB;AAAxC,OAAP;AACD,GAFD;;AAGA,QAAMC,UAAU,GAAG,oBAAQ,MAAMC,aAAIC,OAAJ,CAAY;AAACC,IAAAA,GAAG,EAAE;AAAN,GAAZ,EAA0BL,WAA1B,EAAuCD,OAAvC,CAAd,EAA+D,CAChFA,OADgF,EAEhFC,WAFgF,CAA/D,CAAnB;AAIA,sBAAO;AAAK,iBAAWrB;AAAhB,KAA2BuB,UAA3B,CAAP;AACD,CAVD;;AAYAJ,UAAU,CAACP,SAAX,2CAAuB;AACrBQ,EAAAA,OAAO,EAAEP,mBAAUc,OAAV,CAAkBd,mBAAUe,KAAV,CAAgB9B,MAAM,CAACc,SAAvB,CAAlB,EAAqDI,UADzC;AAErB,eAAaH,mBAAUC;AAFF,CAAvB;eAKeK,U","sourcesContent":["import React, {useMemo, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport map from 'lodash/fp/map';\nimport classnames from 'classnames';\nimport style from './style.css';\n\nconst Button = props => {\n  const {'data-name': dataName, disabled, label, onClick, type = 'default'} = props;\n  const styleButton = classnames(\n    style.button,\n    type === 'default' && style.default,\n    type === 'dangerous' && style.dangerous,\n    disabled && style.disabled\n  );\n\n  const handleOnClick = useCallback(() => onClick(), [onClick]);\n  return (\n    <button\n      type=\"button\"\n      aria-label={label}\n      title={label}\n      data-name={dataName}\n      className={styleButton}\n      onClick={handleOnClick}\n    >\n      <div className={style.buttonContent}>\n        <span className={style.label}>{label}</span>\n      </div>\n    </button>\n  );\n};\n\nButton.propTypes = {\n  'data-name': PropTypes.string,\n  disabled: PropTypes.bool,\n  label: PropTypes.string.isRequired,\n  onClick: PropTypes.func.isRequired,\n  type: PropTypes.oneOf(['default', 'dangerous'])\n};\n\nconst ButtonMenu = props => {\n  const {buttons, 'data-name': dataName} = props;\n  const buildButton = (button, index) => {\n    return <Button {...button} key={button.label + index} />;\n  };\n  const buttonList = useMemo(() => map.convert({cap: false})(buildButton, buttons), [\n    buttons,\n    buildButton\n  ]);\n  return <div data-name={dataName}>{buttonList}</div>;\n};\n\nButtonMenu.propTypes = {\n  buttons: PropTypes.arrayOf(PropTypes.shape(Button.propTypes)).isRequired,\n  'data-name': PropTypes.string\n};\n\nexport default ButtonMenu;\n"],"file":"index.js"}

package/lib/atom/button-menu/style.css

@@ -0,0 +1,51 @@
+@value colors: "../../variables/colors.css";
+@value cm_grey_100 from colors;
+@value cm_grey_200 from colors;
+@value cm_grey_900 from colors;
+@value cm_negative_100 from colors;
+
+.button {
+  width: 100%;
+  height: 40px;
+  font-family: Gilroy;
+  font-size: 14px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+  pointer-events: auto;
+  /* prevents text selection when dragging 
+  the mouse over the button */
+  user-select: none;
+}
+
+.disabled {
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+.buttonContent {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.label {
+  margin: 0 8px 0 8px;
+  display: block;
+}
+
+.default {
+  background-color: cm_grey_100;
+  color: cm_grey_900;
+}
+
+.default:hover {
+  background-color: cm_grey_200;
+}
+
+.dangerous {
+  composes: default;
+  color: cm_negative_100;
+}

package/lib/atom/button-menu/test/fixtures/default.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.deleteButtonProps = exports.actionButtonProps = void 0;
+const actionButtonProps = {
+  'data-name': 'menu-publish-button',
+  label: 'Publish',
+  onClick: () => console.log('Publish'),
+  type: 'default'
+};
+exports.actionButtonProps = actionButtonProps;
+const deleteButtonProps = {
+  'data-name': 'menu-delete-button',
+  label: 'Delete',
+  onClick: () => console.log('Delete'),
+  type: 'dangerous'
+};
+exports.deleteButtonProps = deleteButtonProps;
+var _default = {
+  props: {
+    buttons: [actionButtonProps, deleteButtonProps],
+    'aria-label': 'aria button',
+    'data-name': 'default-menu'
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=default.js.map

package/lib/atom/button-menu/test/fixtures/default.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-menu/test/fixtures/default.js"],"names":["actionButtonProps","label","onClick","console","log","type","deleteButtonProps","props","buttons"],"mappings":";;;;AAAO,MAAMA,iBAAiB,GAAG;AAC/B,eAAa,qBADkB;AAE/BC,EAAAA,KAAK,EAAE,SAFwB;AAG/BC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,SAAZ,CAHgB;AAI/BC,EAAAA,IAAI,EAAE;AAJyB,CAA1B;;AAOA,MAAMC,iBAAiB,GAAG;AAC/B,eAAa,oBADkB;AAE/BL,EAAAA,KAAK,EAAE,QAFwB;AAG/BC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,QAAZ,CAHgB;AAI/BC,EAAAA,IAAI,EAAE;AAJyB,CAA1B;;eAOQ;AACbE,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CAACR,iBAAD,EAAoBM,iBAApB,CADJ;AAEL,kBAAc,aAFT;AAGL,iBAAa;AAHR;AADM,C","sourcesContent":["export const actionButtonProps = {\n  'data-name': 'menu-publish-button',\n  label: 'Publish',\n  onClick: () => console.log('Publish'),\n  type: 'default'\n};\n\nexport const deleteButtonProps = {\n  'data-name': 'menu-delete-button',\n  label: 'Delete',\n  onClick: () => console.log('Delete'),\n  type: 'dangerous'\n};\n\nexport default {\n  props: {\n    buttons: [actionButtonProps, deleteButtonProps],\n    'aria-label': 'aria button',\n    'data-name': 'default-menu'\n  }\n};\n"],"file":"default.js"}

package/lib/atom/button-menu/test/fixtures/multiple-buttons.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.disabledButtonProps = void 0;
+
+var _default2 = require("./default");
+
+const disabledButtonProps = {
+  'data-name': 'menu-disabled-button',
+  label: 'Disabled',
+  onClick: () => console.log('Disabled'),
+  disabled: true
+};
+exports.disabledButtonProps = disabledButtonProps;
+var _default = {
+  props: {
+    buttons: [_default2.actionButtonProps, disabledButtonProps, _default2.deleteButtonProps],
+    'aria-label': 'aria button 2',
+    'data-name': 'default-menu-2'
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=multiple-buttons.js.map

package/lib/atom/button-menu/test/fixtures/multiple-buttons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/button-menu/test/fixtures/multiple-buttons.js"],"names":["disabledButtonProps","label","onClick","console","log","disabled","props","buttons","actionButtonProps","deleteButtonProps"],"mappings":";;;;;AAAA;;AAEO,MAAMA,mBAAmB,GAAG;AACjC,eAAa,sBADoB;AAEjCC,EAAAA,KAAK,EAAE,UAF0B;AAGjCC,EAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,UAAZ,CAHkB;AAIjCC,EAAAA,QAAQ,EAAE;AAJuB,CAA5B;;eAOQ;AACbC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE,CAACC,2BAAD,EAAoBR,mBAApB,EAAyCS,2BAAzC,CADJ;AAEL,kBAAc,eAFT;AAGL,iBAAa;AAHR;AADM,C","sourcesContent":["import {actionButtonProps, deleteButtonProps} from './default';\n\nexport const disabledButtonProps = {\n  'data-name': 'menu-disabled-button',\n  label: 'Disabled',\n  onClick: () => console.log('Disabled'),\n  disabled: true\n};\n\nexport default {\n  props: {\n    buttons: [actionButtonProps, disabledButtonProps, deleteButtonProps],\n    'aria-label': 'aria button 2',\n    'data-name': 'default-menu-2'\n  }\n};\n"],"file":"multiple-buttons.js"}

package/lib/atom/chips/index.js

@@ -23,18 +23,22 @@ const Chips = props => {
   const {
     text,
     information,
-    selected,
+    selected = false,
     onClick
   } = props;
   const handleClick = (0, _react.useMemo)(() => () => onClick(), [onClick]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_style.default.container, selected ? _style.default.selected : _style.default.unselected),
-    onClick: handleClick
+    onClick: handleClick,
+    "aria-label": `${text} ${information}`
   }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.textZone,
+    title: text
+  }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.text
-  }, text), /*#__PURE__*/_react.default.createElement("div", {
+  }, text), /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.information
-  }, information), selected ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusCheckCircle2, {
+  }, information)), selected ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusCheckCircle2, {
     className: _style.default.selectedIconWrapper
   }) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidRemoveAddAddCircle1, {
     className: _style.default.unselectedIconWrapper

package/lib/atom/chips/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/atom/chips/index.js"],"names":["Chips","props","text","information","selected","onClick","handleClick","style","container","unselected","selectedIconWrapper","unselectedIconWrapper","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;;;;;;;AAEA,MAAMA,KAAK,GAAGC,KAAK,IAAI;AACrB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,WAAP;AAAoBC,IAAAA,QAApB;AAA8BC,IAAAA;AAA9B,MAAyCJ,KAA/C;AAEA,QAAMK,WAAW,GAAG,oBAAQ,MAAM,MAAMD,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAApB;AAEA,sBACE;AACE,IAAA,SAAS,EAAE,yBAAWE,eAAMC,SAAjB,EAA4BJ,QAAQ,GAAGG,eAAMH,QAAT,GAAoBG,eAAME,UAA9D,CADb;AAEE,IAAA,OAAO,EAAEH;AAFX,kBAIE;AAAK,IAAA,SAAS,EAAEC,eAAML;AAAtB,KAA6BA,IAA7B,CAJF,eAKE;AAAK,IAAA,SAAS,EAAEK,eAAMJ;AAAtB,KAAoCA,WAApC,CALF,EAMGC,QAAQ,gBACP,6BAAC,sCAAD;AAAc,IAAA,SAAS,EAAEG,eAAMG;AAA/B,IADO,gBAGP,6BAAC,uCAAD;AAAS,IAAA,SAAS,EAAEH,eAAMI;AAA1B,IATJ,CADF;AAcD,CAnBD;;AAqBAX,KAAK,CAACY,SAAN,2CAAkB;AAChBV,EAAAA,IAAI,EAAEW,mBAAUC,MADA;AAEhBX,EAAAA,WAAW,EAAEU,mBAAUC,MAFP;AAGhBV,EAAAA,QAAQ,EAAES,mBAAUE,IAHJ;AAIhBV,EAAAA,OAAO,EAAEQ,mBAAUG;AAJH,CAAlB;eAOehB,K","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaSolidStatusCheckCircle2 as SelectedIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst Chips = props => {\n  const {text, information, selected, onClick} = props;\n\n  const handleClick = useMemo(() => () => onClick(), [onClick]);\n\n  return (\n    <div\n      className={classnames(style.container, selected ? style.selected : style.unselected)}\n      onClick={handleClick}\n    >\n      <div className={style.text}>{text}</div>\n      <div className={style.information}>{information}</div>\n      {selected ? (\n        <SelectedIcon className={style.selectedIconWrapper} />\n      ) : (\n        <AddIcon className={style.unselectedIconWrapper} />\n      )}\n    </div>\n  );\n};\n\nChips.propTypes = {\n  text: PropTypes.string,\n  information: PropTypes.string,\n  selected: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nexport default Chips;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/atom/chips/index.js"],"names":["Chips","props","text","information","selected","onClick","handleClick","style","container","unselected","textZone","selectedIconWrapper","unselectedIconWrapper","propTypes","PropTypes","string","bool","func"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AAIA;;;;;;;;AAEA,MAAMA,KAAK,GAAGC,KAAK,IAAI;AACrB,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,WAAP;AAAoBC,IAAAA,QAAQ,GAAG,KAA/B;AAAsCC,IAAAA;AAAtC,MAAiDJ,KAAvD;AAEA,QAAMK,WAAW,GAAG,oBAAQ,MAAM,MAAMD,OAAO,EAA3B,EAA+B,CAACA,OAAD,CAA/B,CAApB;AAEA,sBACE;AACE,IAAA,SAAS,EAAE,yBAAWE,eAAMC,SAAjB,EAA4BJ,QAAQ,GAAGG,eAAMH,QAAT,GAAoBG,eAAME,UAA9D,CADb;AAEE,IAAA,OAAO,EAAEH,WAFX;AAGE,kBAAa,GAAEJ,IAAK,IAAGC,WAAY;AAHrC,kBAKE;AAAK,IAAA,SAAS,EAAEI,eAAMG,QAAtB;AAAgC,IAAA,KAAK,EAAER;AAAvC,kBACE;AAAM,IAAA,SAAS,EAAEK,eAAML;AAAvB,KAA8BA,IAA9B,CADF,eAEE;AAAM,IAAA,SAAS,EAAEK,eAAMJ;AAAvB,KAAqCA,WAArC,CAFF,CALF,EASGC,QAAQ,gBACP,6BAAC,sCAAD;AAAc,IAAA,SAAS,EAAEG,eAAMI;AAA/B,IADO,gBAGP,6BAAC,uCAAD;AAAS,IAAA,SAAS,EAAEJ,eAAMK;AAA1B,IAZJ,CADF;AAiBD,CAtBD;;AAwBAZ,KAAK,CAACa,SAAN,2CAAkB;AAChBX,EAAAA,IAAI,EAAEY,mBAAUC,MADA;AAEhBZ,EAAAA,WAAW,EAAEW,mBAAUC,MAFP;AAGhBX,EAAAA,QAAQ,EAAEU,mBAAUE,IAHJ;AAIhBX,EAAAA,OAAO,EAAES,mBAAUG;AAJH,CAAlB;eAOejB,K","sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n  NovaSolidRemoveAddAddCircle1 as AddIcon,\n  NovaSolidStatusCheckCircle2 as SelectedIcon\n} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst Chips = props => {\n  const {text, information, selected = false, onClick} = props;\n\n  const handleClick = useMemo(() => () => onClick(), [onClick]);\n\n  return (\n    <div\n      className={classnames(style.container, selected ? style.selected : style.unselected)}\n      onClick={handleClick}\n      aria-label={`${text} ${information}`}\n    >\n      <div className={style.textZone} title={text}>\n        <span className={style.text}>{text}</span>\n        <span className={style.information}>{information}</span>\n      </div>\n      {selected ? (\n        <SelectedIcon className={style.selectedIconWrapper} />\n      ) : (\n        <AddIcon className={style.unselectedIconWrapper} />\n      )}\n    </div>\n  );\n};\n\nChips.propTypes = {\n  text: PropTypes.string,\n  information: PropTypes.string,\n  selected: PropTypes.bool,\n  onClick: PropTypes.func\n};\n\nexport default Chips;\n"],"file":"index.js"}

package/lib/atom/chips/style.css

@@ -7,11 +7,15 @@
 @value white from colors;
 
 .container {
-  width: 25%;
-  height: 32px;
+  width: 100%;
+  height: 52px;
   border-radius: 10px;
   padding: 10px 16px;
   position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
 }
 
 .selected {
@@ -30,12 +34,22 @@
   background-color: cm_grey_200;
 }
 
+.textZone {
+  flex: 1 1 100%;
+  padding-right: 32px;
+  width: calc(100% - 32px);
+}
+
 .text {
   font-family: 'Gilroy';
   font-style: normal;
   font-weight: 600;
   font-size: 14px;
   color: cm_grey_700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
 }
 
 .information {
@@ -45,6 +59,7 @@
   font-size: 10px;
   opacity: 0.4;
   color: cm_grey_700;
+  display: block;
 }
 
 .icon{

package/lib/atom/chips/test/fixtures/long-text.js

@@ -0,0 +1,14 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _default = {
+  props: {
+    text: 'Population Human resourses filiale Singapour and lots and lots of text that should be cut somewhere because the chip item it should not take all the width of the component and and ellipsis should be shown.',
+    information: '345 users',
+    select: false,
+    onClick: () => console.log('click')
+  }
+};
+exports.default = _default;
+//# sourceMappingURL=long-text.js.map

package/lib/atom/chips/test/fixtures/long-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/atom/chips/test/fixtures/long-text.js"],"names":["props","text","information","select","onClick","console","log"],"mappings":";;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,IAAI,EACF,+MAFG;AAGLC,IAAAA,WAAW,EAAE,WAHR;AAILC,IAAAA,MAAM,EAAE,KAJH;AAKLC,IAAAA,OAAO,EAAE,MAAMC,OAAO,CAACC,GAAR,CAAY,OAAZ;AALV;AADM,C","sourcesContent":["export default {\n  props: {\n    text:\n      'Population Human resourses filiale Singapour and lots and lots of text that should be cut somewhere because the chip item it should not take all the width of the component and and ellipsis should be shown.',\n    information: '345 users',\n    select: false,\n    onClick: () => console.log('click')\n  }\n};\n"],"file":"long-text.js"}