@dhis2-ui/chip 9.11.0 → 9.11.1-beta.1

package/build/cjs/chip.e2e.stories.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnRemove = exports.WithOnClick = exports.WithIcon = exports.WithChildren = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _chip = require("./chip.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onClick = window.Cypress && window.Cypress.cy.stub();
+window.onRemove = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'Chip'
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_chip.Chip, null, "Message");
+exports.Default = Default;
+const WithOnClick = () => /*#__PURE__*/_react.default.createElement(_chip.Chip, {
+  onClick: window.onClick
+}, "Chippy");
+exports.WithOnClick = WithOnClick;
+const WithOnRemove = () => /*#__PURE__*/_react.default.createElement(_chip.Chip, {
+  onRemove: window.onRemove
+}, "Chipmunk");
+exports.WithOnRemove = WithOnRemove;
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_chip.Chip, null, "I am a child");
+exports.WithChildren = WithChildren;
+const WithIcon = () => /*#__PURE__*/_react.default.createElement(_chip.Chip, {
+  icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
+}, "Message");
+exports.WithIcon = WithIcon;

package/build/cjs/chip.js

@@ -4,30 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Chip = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _content = require("./content.js");
-
 var _icon = require("./icon.js");
-
 var _remove = require("./remove.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_INLINE_MARGIN = '4';
-
 const Chip = _ref => {
   var _ref2, _ref3, _ref4, _ref5;
-
   let {
     selected,
     dense,
@@ -54,7 +42,7 @@ const Chip = _ref => {
       }
     },
     "data-test": dataTest,
-    className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["1687525377", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + ((0, _classnames.default)(className, {
+    className: _style.default.dynamic([["3780556490", [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]], ["1687525377", [marginBottom && `margin-bottom: ${marginBottom}px;`, (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && `margin-top: ${marginTop}px`]]]) + " " + ((0, _classnames.default)(className, {
       selected,
       dense,
       disabled,
@@ -62,21 +50,20 @@ const Chip = _ref => {
     }) || "")
   }, /*#__PURE__*/_react.default.createElement(_icon.Icon, {
     icon: icon,
-    dataTest: "".concat(dataTest, "-icon")
+    dataTest: `${dataTest}-icon`
   }), /*#__PURE__*/_react.default.createElement(_content.Content, {
     overflow: overflow
   }, children), /*#__PURE__*/_react.default.createElement(_remove.Remove, {
     onRemove: onRemove,
-    dataTest: "".concat(dataTest, "-remove")
+    dataTest: `${dataTest}-remove`
   }), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3780556490",
     dynamic: [_uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey300, _uiConstants.theme.secondary600, _uiConstants.colors.white]
-  }, ["span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:".concat(_uiConstants.colors.grey200, ";font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(_uiConstants.colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.theme.secondary600, ";font-weight:500;}"), ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", ".selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.white, ";}"), ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
+  }, [`span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:${_uiConstants.colors.grey200};font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${_uiConstants.colors.grey900};}`, ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", `span.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey300};}`, `.selected.__jsx-style-dynamic-selector{background-color:${_uiConstants.theme.secondary600};font-weight:500;}`, ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", `.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:${_uiConstants.colors.white};}`, ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1687525377",
-    dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]
-  }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " margin-inline-start:").concat((_ref4 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref4 !== void 0 ? _ref4 : DEFAULT_INLINE_MARGIN, "px;margin-inline-end:").concat((_ref5 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref5 !== void 0 ? _ref5 : DEFAULT_INLINE_MARGIN, "px;").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
+    dynamic: [marginBottom && `margin-bottom: ${marginBottom}px;`, (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && `margin-top: ${marginTop}px`]
+  }, [`span.__jsx-style-dynamic-selector{${marginBottom && `margin-bottom: ${marginBottom}px;`} margin-inline-start:${(_ref4 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref4 !== void 0 ? _ref4 : DEFAULT_INLINE_MARGIN}px;margin-inline-end:${(_ref5 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref5 !== void 0 ? _ref5 : DEFAULT_INLINE_MARGIN}px;${marginTop && `margin-top: ${marginTop}px`};}`]));
 };
-
 exports.Chip = Chip;
 Chip.defaultProps = {
   dataTest: 'dhis2-uicore-chip',
@@ -91,22 +78,16 @@ Chip.propTypes = {
   disabled: _propTypes.default.bool,
   dragging: _propTypes.default.bool,
   icon: _propTypes.default.element,
-
   /** `margin-bottom` value, applied in `px`  */
   marginBottom: _propTypes.default.number,
-
   /** `margin-inline-end` value, applied in `px`  */
   marginInlineEnd: _propTypes.default.number,
-
   /** `margin-inline-start` value, applied in `px`  */
   marginInlineStart: _propTypes.default.number,
-
   /** `margin-inline-start` value, applied in `px`  */
   marginLeft: _propTypes.default.number,
-
   /** `margin-inline-end` value, applied in `px`  */
   marginRight: _propTypes.default.number,
-
   /** `margin-top` value, applied in `px`  */
   marginTop: _propTypes.default.number,
   overflow: _propTypes.default.bool,

package/build/cjs/{chip.stories.js → chip.prod.stories.js}

@@ -4,37 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Selected = exports.Removable = exports.RTLRemovable = exports.Overflow = exports.IconContent = exports.Icon = exports.DenseRemoveable = exports.Dense = exports.Default = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _chip = require("./chip.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const subtitle = `Chips are useful for displaying a selection of defined choices and filters to the user.`;
+const description = `
+Chips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.
+See an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).
+
+#### Chip vs. Button
+
+Chips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+#### Displaying chips
 
-const subtitle = "Chips are useful for displaying a selection of defined choices and filters to the user.";
-const description = "\nChips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.\nSee an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).\n\n#### Chip vs. Button\n\nChips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.\n\n#### Displaying chips\n\n- Chips should be displayed in a horizontal list, where space permits.\n- Do not stack single chips on top of one another if there is space to display them inline.\n- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.\n\n```js\nimport { Chip } from '@dhis2/ui'\n```\n";
+- Chips should be displayed in a horizontal list, where space permits.
+- Do not stack single chips on top of one another if there is space to display them inline.
+- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.
 
+\`\`\`js
+import { Chip } from '@dhis2/ui'
+\`\`\`
+`;
 window.onClick = (payload, event) => {
   console.log('onClick payload', payload);
   console.log('onClick event', event);
 };
-
 window.onRemove = (payload, event) => {
   console.log('onRemove payload', payload);
   console.log('onRemove event', event);
 };
-
 const onClick = function () {
   return window.onClick(...arguments);
 };
-
 const onRemove = function () {
   return window.onRemove(...arguments);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Chip',
   component: _chip.Chip,
   parameters: {
@@ -49,34 +56,27 @@ var _default = {
     onClick
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_chip.Chip, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
+const Default = exports.Default = Template.bind({});
 Default.args = {
   children: 'Chippy'
 };
-const Selected = Template.bind({});
-exports.Selected = Selected;
+const Selected = exports.Selected = Template.bind({});
 Selected.args = {
   selected: true,
   children: 'Chipmunk'
 };
-const Overflow = Template.bind({});
-exports.Overflow = Overflow;
+const Overflow = exports.Overflow = Template.bind({});
 Overflow.args = {
   overflow: true,
   selected: true,
   children: 'A super long chip which should definitely truncate'
 };
-const Removable = Template.bind({});
-exports.Removable = Removable;
-Removable.args = { ...Default.args,
+const Removable = exports.Removable = Template.bind({});
+Removable.args = {
+  ...Default.args,
   onRemove
 };
-
 const Globe = () => /*#__PURE__*/_react.default.createElement("svg", {
   role: "img",
   viewBox: "0 0 24 24",
@@ -85,14 +85,11 @@ const Globe = () => /*#__PURE__*/_react.default.createElement("svg", {
 }, /*#__PURE__*/_react.default.createElement("title", null, "LGTM icon"), /*#__PURE__*/_react.default.createElement("path", {
   d: "M12.008 4.866c-2.914 0-5.377.679-6.995 2.11-.05-.088-.085-.163-.141-.253-.17-.273-.328-.583-.828-.89a2.699 2.699 0 0 0-1.014-.387 2.14 2.14 0 0 0-.47-.001l.099-.013c-.91 0-1.442.546-1.788 1.016-.344.47-.566.999-.71 1.577-.285 1.155-.289 2.651.81 3.767.575.588 1.251.863 1.863 1.027.118.032.223.04.336.063.399 1.892 1.58 3.492 3.158 4.381v.001h.002c.929.522 1.81.761 2.472 1.014.924.357 1.9.751 3.036.85l.06.006h.15c1.306 0 2.296-.527 3.152-.855.655-.25 1.54-.482 2.477-1.008a6.156 6.156 0 0 0 1.196-.88 6.759 6.759 0 0 0 1.967-3.45 3.913 3.913 0 0 0 2.19-1.15c1.098-1.115 1.094-2.611.809-3.766-.144-.578-.366-1.106-.71-1.577-.345-.47-.879-1.016-1.788-1.016l.1.013a2.14 2.14 0 0 0-.472.002 2.695 2.695 0 0 0-1.01.385c-.499.307-.658.616-.827.888-.055.089-.09.163-.139.249-1.617-1.426-4.076-2.103-6.985-2.103zm.023 1.37c3.557 0 6.013 1.065 7.057 2.97.63-.243 1.093-1.89 1.612-2.209.42-.26.665-.195.665-.195.95 0 1.93 2.797.712 4.032-.644.657-1.83.842-2.422.795-.045 1.906-1.155 3.626-2.624 4.45-.748.42-1.552.64-2.296.924-.921.352-1.786.763-2.662.763h-.092c-.872-.076-1.74-.407-2.662-.763-.744-.285-1.548-.51-2.296-.93-1.46-.824-2.571-2.54-2.616-4.445-.587.05-1.788-.132-2.436-.794-1.217-1.235-.238-4.032.712-4.032 0 0 .246-.064.666.195.521.321.987 1.984 1.62 2.214C6.013 7.3 8.47 6.236 12.032 6.236zm-3.876 2.33a3.053 3.053 0 1 0 0 6.105 3.053 3.053 0 0 0 0-6.105zm7.751 0a3.052 3.052 0 1 0 0 6.105 3.052 3.052 0 0 0 0-6.105zM8.591 10.28a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.313-1.694.57.57 0 0 0 1.098-.216.57.57 0 0 0-.547-.57 1.35 1.35 0 0 1 .762-.233zm6.888 0a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.314-1.694.57.57 0 1 0 .552-.785 1.35 1.35 0 0 1 .762-.234zM11.52 14.93c-.239.02-.377.146-.377.476 0 .21.138.365.378.365a.143.143 0 0 0 .033-.282c-.022-.005-.13-.044-.13-.136 0-.093 0-.125.183-.15.078-.012.116-.105.092-.18-.024-.075-.094-.1-.18-.093zm1.023 0c-.085-.006-.156.018-.18.093-.024.075.015.168.093.18.182.025.182.057.182.15 0 .092-.107.131-.13.136a.143.143 0 0 0 .033.282c.24 0 .379-.155.379-.365 0-.33-.139-.456-.377-.476z"
 }));
-
-const Icon = Template.bind({});
-exports.Icon = Icon;
+const Icon = exports.Icon = Template.bind({});
 Icon.args = {
   icon: /*#__PURE__*/_react.default.createElement(Globe, null),
   children: 'With an icon'
 };
-
 const GlobeResizable = () => /*#__PURE__*/_react.default.createElement("svg", {
   role: "img",
   viewBox: "0 0 24 24",
@@ -103,9 +100,7 @@ const GlobeResizable = () => /*#__PURE__*/_react.default.createElement("svg", {
 }, /*#__PURE__*/_react.default.createElement("title", null, "LGTM icon"), /*#__PURE__*/_react.default.createElement("path", {
   d: "M12.008 4.866c-2.914 0-5.377.679-6.995 2.11-.05-.088-.085-.163-.141-.253-.17-.273-.328-.583-.828-.89a2.699 2.699 0 0 0-1.014-.387 2.14 2.14 0 0 0-.47-.001l.099-.013c-.91 0-1.442.546-1.788 1.016-.344.47-.566.999-.71 1.577-.285 1.155-.289 2.651.81 3.767.575.588 1.251.863 1.863 1.027.118.032.223.04.336.063.399 1.892 1.58 3.492 3.158 4.381v.001h.002c.929.522 1.81.761 2.472 1.014.924.357 1.9.751 3.036.85l.06.006h.15c1.306 0 2.296-.527 3.152-.855.655-.25 1.54-.482 2.477-1.008a6.156 6.156 0 0 0 1.196-.88 6.759 6.759 0 0 0 1.967-3.45 3.913 3.913 0 0 0 2.19-1.15c1.098-1.115 1.094-2.611.809-3.766-.144-.578-.366-1.106-.71-1.577-.345-.47-.879-1.016-1.788-1.016l.1.013a2.14 2.14 0 0 0-.472.002 2.695 2.695 0 0 0-1.01.385c-.499.307-.658.616-.827.888-.055.089-.09.163-.139.249-1.617-1.426-4.076-2.103-6.985-2.103zm.023 1.37c3.557 0 6.013 1.065 7.057 2.97.63-.243 1.093-1.89 1.612-2.209.42-.26.665-.195.665-.195.95 0 1.93 2.797.712 4.032-.644.657-1.83.842-2.422.795-.045 1.906-1.155 3.626-2.624 4.45-.748.42-1.552.64-2.296.924-.921.352-1.786.763-2.662.763h-.092c-.872-.076-1.74-.407-2.662-.763-.744-.285-1.548-.51-2.296-.93-1.46-.824-2.571-2.54-2.616-4.445-.587.05-1.788-.132-2.436-.794-1.217-1.235-.238-4.032.712-4.032 0 0 .246-.064.666.195.521.321.987 1.984 1.62 2.214C6.013 7.3 8.47 6.236 12.032 6.236zm-3.876 2.33a3.053 3.053 0 1 0 0 6.105 3.053 3.053 0 0 0 0-6.105zm7.751 0a3.052 3.052 0 1 0 0 6.105 3.052 3.052 0 0 0 0-6.105zM8.591 10.28a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.313-1.694.57.57 0 0 0 1.098-.216.57.57 0 0 0-.547-.57 1.35 1.35 0 0 1 .762-.233zm6.888 0a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.314-1.694.57.57 0 1 0 .552-.785 1.35 1.35 0 0 1 .762-.234zM11.52 14.93c-.239.02-.377.146-.377.476 0 .21.138.365.378.365a.143.143 0 0 0 .033-.282c-.022-.005-.13-.044-.13-.136 0-.093 0-.125.183-.15.078-.012.116-.105.092-.18-.024-.075-.094-.1-.18-.093zm1.023 0c-.085-.006-.156.018-.18.093-.024.075.015.168.093.18.182.025.182.057.182.15 0 .092-.107.131-.13.136a.143.143 0 0 0 .033.282c.24 0 .379-.155.379-.365 0-.33-.139-.456-.377-.476z"
 }));
-
-const IconContent = Template.bind({});
-exports.IconContent = IconContent;
+const IconContent = exports.IconContent = Template.bind({});
 IconContent.args = {
   children: /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-4024600781" + " " + "container"
@@ -119,27 +114,24 @@ IconContent.args = {
     id: "4024600781"
   }, [".container.jsx-4024600781{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", ".text.jsx-4024600781{margin-right:4px;}", ".icon.jsx-4024600781{display:inline-block;height:16px;}"]))
 };
-
 const Dense = () => /*#__PURE__*/_react.default.createElement(_chip.Chip, {
   dense: true
 }, "I am dense");
-
 exports.Dense = Dense;
 Dense.args = {
   dense: true,
   children: 'I am dense'
 };
-const DenseRemoveable = Template.bind({});
-exports.DenseRemoveable = DenseRemoveable;
-DenseRemoveable.args = { ...Dense.args,
+const DenseRemoveable = exports.DenseRemoveable = Template.bind({});
+DenseRemoveable.args = {
+  ...Dense.args,
   ...Removable.args,
   children: 'Removable and dense'
 };
-
 const RTLRemovable = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_chip.Chip, args, "RTL removable"));
-
 exports.RTLRemovable = RTLRemovable;
-RTLRemovable.args = { ...Removable.args
+RTLRemovable.args = {
+  ...Removable.args
 };

package/build/cjs/content.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Content = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Content = _ref => {
   let {
     children,
@@ -29,9 +22,8 @@ const Content = _ref => {
   }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "765109298",
     dynamic: [_uiConstants.spacers.dp12]
-  }, ["span.__jsx-style-dynamic-selector{margin:0 ".concat(_uiConstants.spacers.dp12, ";color:inherit;white-space:nowrap;}"), ".overflow.__jsx-style-dynamic-selector{max-width:150px;overflow:hidden;text-overflow:ellipsis;}"]));
+  }, [`span.__jsx-style-dynamic-selector{margin:0 ${_uiConstants.spacers.dp12};color:inherit;white-space:nowrap;}`, ".overflow.__jsx-style-dynamic-selector{max-width:150px;overflow:hidden;text-overflow:ellipsis;}"]));
 };
-
 exports.Content = Content;
 Content.propTypes = {
   children: _propTypes.default.any,

package/build/cjs/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Chip with children is rendered', () => {
   cy.visitStory('Chip', 'With children');
   cy.get('[data-test="dhis2-uicore-chip"]').should('be.visible');

package/build/cjs/features/accepts_icon/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a default Chip is rendered', () => {
   cy.visitStory('Chip', 'Default');
   cy.get('[data-test="dhis2-uicore-chip"]').should('be.visible');

package/build/cjs/features/is_clickable/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Chip with onClick handler is rendered', () => {
-  cy.visitStory('Chip', 'With onClick');
+  cy.visitStory('Chip', 'With on click');
 });
 (0, _cypressCucumberPreprocessor.When)('the Chip is clicked', () => {
   cy.get('[data-test="dhis2-uicore-chip"]').click();

package/build/cjs/features/is_removable/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Chip with onRemove handler is rendered', () => {
-  cy.visitStory('Chip', 'With onRemove');
+  cy.visitStory('Chip', 'With on remove');
 });
 (0, _cypressCucumberPreprocessor.When)('the remove icon is clicked', () => {
   cy.get('[data-test="dhis2-uicore-chip-remove"]').click();

package/build/cjs/icon.js

@@ -4,40 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Icon = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Icon = _ref => {
   let {
     icon,
     dataTest
   } = _ref;
-
   if (!icon) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement("span", {
     "data-test": dataTest,
     className: _style.default.dynamic([["1889825154", [_uiConstants.spacers.dp4]]])
   }, icon, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "1889825154",
     dynamic: [_uiConstants.spacers.dp4]
-  }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:".concat(_uiConstants.spacers.dp4, ";margin-inline-end:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
+  }, [`span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:${_uiConstants.spacers.dp4};margin-inline-end:-6px;border-radius:50%;overflow:hidden;}`, "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
 };
-
 exports.Icon = Icon;
 Icon.propTypes = {
   dataTest: _propTypes.default.string.isRequired,
-
   /** the slot for an icon is 24x24px, bigger elements will be clipped */
   icon: _propTypes.default.element
 };

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Chip", {
     return _chip.Chip;
   }
 });
-
 var _chip = require("./chip.js");

package/build/cjs/remove.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Remove = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function CancelOutline(_ref) {
   let {
     className
@@ -30,44 +24,38 @@ function CancelOutline(_ref) {
     id: "2898942518"
   }, ["svg.jsx-2898942518{fill:inherit;height:16px;width:16px;vertical-align:middle;pointer-events:none;}"]));
 }
-
 CancelOutline.propTypes = {
   className: _propTypes.default.string
 };
-const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", "span.jsx-2824632002:hover{background:".concat(_uiConstants.colors.grey400, ";}")];
+const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", `span.jsx-2824632002:hover{background:${_uiConstants.colors.grey400};}`];
 containerStyle.__hash = "2824632002";
 const removeIcon = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2658726446"
-  }, ["svg.jsx-2658726446{fill:".concat(_uiConstants.colors.grey600, ";height:16px;width:16px;cursor:pointer;opacity:1;pointer-events:all;}")]),
+  }, [`svg.jsx-2658726446{fill:${_uiConstants.colors.grey600};height:16px;width:16px;cursor:pointer;opacity:1;pointer-events:all;}`]),
   className: "jsx-2658726446"
 };
-
 const Remove = _ref2 => {
   let {
     onRemove,
     dataTest
   } = _ref2;
-
   if (!onRemove) {
     return null;
   }
-
   return /*#__PURE__*/_react.default.createElement("span", {
     onClick: e => {
       e.stopPropagation(); // stop onRemove from triggering onClick on container
-
       onRemove({}, e);
     },
     "data-test": dataTest,
-    className: "jsx-".concat(containerStyle.__hash)
+    className: `jsx-${containerStyle.__hash}`
   }, /*#__PURE__*/_react.default.createElement(CancelOutline, {
     className: removeIcon.className
   }), removeIcon.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: containerStyle.__hash
   }, containerStyle));
 };
-
 exports.Remove = Remove;
 Remove.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/es/chip.e2e.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Chip } from './chip.js';
+window.onClick = window.Cypress && window.Cypress.cy.stub();
+window.onRemove = window.Cypress && window.Cypress.cy.stub();
+export default {
+  title: 'Chip'
+};
+export const Default = () => /*#__PURE__*/React.createElement(Chip, null, "Message");
+export const WithOnClick = () => /*#__PURE__*/React.createElement(Chip, {
+  onClick: window.onClick
+}, "Chippy");
+export const WithOnRemove = () => /*#__PURE__*/React.createElement(Chip, {
+  onRemove: window.onRemove
+}, "Chipmunk");
+export const WithChildren = () => /*#__PURE__*/React.createElement(Chip, null, "I am a child");
+export const WithIcon = () => /*#__PURE__*/React.createElement(Chip, {
+  icon: /*#__PURE__*/React.createElement("div", null, "Icon")
+}, "Message");

package/build/es/chip.js

@@ -7,10 +7,8 @@ import { Content } from './content.js';
 import { Icon } from './icon.js';
 import { Remove } from './remove.js';
 const DEFAULT_INLINE_MARGIN = '4';
-
 const Chip = _ref => {
   var _ref2, _ref3, _ref4, _ref5;
-
   let {
     selected,
     dense,
@@ -37,7 +35,7 @@ const Chip = _ref => {
       }
     },
     "data-test": dataTest,
-    className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["1687525377", [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]]]) + " " + (cx(className, {
+    className: _JSXStyle.dynamic([["3780556490", [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]], ["1687525377", [marginBottom && `margin-bottom: ${marginBottom}px;`, (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && `margin-top: ${marginTop}px`]]]) + " " + (cx(className, {
       selected,
       dense,
       disabled,
@@ -45,21 +43,20 @@ const Chip = _ref => {
     }) || "")
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
-    dataTest: "".concat(dataTest, "-icon")
+    dataTest: `${dataTest}-icon`
   }), /*#__PURE__*/React.createElement(Content, {
     overflow: overflow
   }, children), /*#__PURE__*/React.createElement(Remove, {
     onRemove: onRemove,
-    dataTest: "".concat(dataTest, "-remove")
+    dataTest: `${dataTest}-remove`
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "3780556490",
     dynamic: [colors.grey200, colors.grey900, colors.grey300, theme.secondary600, colors.white]
-  }, ["span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:".concat(colors.grey200, ";font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(colors.grey900, ";}"), ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", "span.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey300, ";}"), ".selected.__jsx-style-dynamic-selector{background-color:".concat(theme.secondary600, ";font-weight:500;}"), ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", ".selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:".concat(colors.white, ";}"), ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [`span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:32px;border-radius:16px;background-color:${colors.grey200};font-size:14px;line-height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:${colors.grey900};}`, ".dense.__jsx-style-dynamic-selector{height:24px;font-size:13px;line-height:15px;}", `span.__jsx-style-dynamic-selector:hover{background-color:${colors.grey300};}`, `.selected.__jsx-style-dynamic-selector{background-color:${theme.secondary600};font-weight:500;}`, ".selected.__jsx-style-dynamic-selector:hover{background-color:#00695c;}", `.selected.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector,.selected.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{color:${colors.white};}`, ".disabled.__jsx-style-dynamic-selector{cursor:not-allowed;opacity:0.3;}", ".disabled.__jsx-style-dynamic-selector .remove-icon.__jsx-style-dynamic-selector{pointer-events:none;}", ".dragging.__jsx-style-dynamic-selector{box-shadow:0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1687525377",
-    dynamic: [marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && "margin-top: ".concat(marginTop, "px")]
-  }, ["span.__jsx-style-dynamic-selector{".concat(marginBottom && "margin-bottom: ".concat(marginBottom, "px;"), " margin-inline-start:").concat((_ref4 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref4 !== void 0 ? _ref4 : DEFAULT_INLINE_MARGIN, "px;margin-inline-end:").concat((_ref5 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref5 !== void 0 ? _ref5 : DEFAULT_INLINE_MARGIN, "px;").concat(marginTop && "margin-top: ".concat(marginTop, "px"), ";}")]));
+    dynamic: [marginBottom && `margin-bottom: ${marginBottom}px;`, (_ref2 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_INLINE_MARGIN, (_ref3 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_INLINE_MARGIN, marginTop && `margin-top: ${marginTop}px`]
+  }, [`span.__jsx-style-dynamic-selector{${marginBottom && `margin-bottom: ${marginBottom}px;`} margin-inline-start:${(_ref4 = marginInlineStart !== null && marginInlineStart !== void 0 ? marginInlineStart : marginLeft) !== null && _ref4 !== void 0 ? _ref4 : DEFAULT_INLINE_MARGIN}px;margin-inline-end:${(_ref5 = marginInlineEnd !== null && marginInlineEnd !== void 0 ? marginInlineEnd : marginRight) !== null && _ref5 !== void 0 ? _ref5 : DEFAULT_INLINE_MARGIN}px;${marginTop && `margin-top: ${marginTop}px`};}`]));
 };
-
 Chip.defaultProps = {
   dataTest: 'dhis2-uicore-chip',
   marginBottom: 4,
@@ -73,22 +70,16 @@ Chip.propTypes = {
   disabled: PropTypes.bool,
   dragging: PropTypes.bool,
   icon: PropTypes.element,
-
   /** `margin-bottom` value, applied in `px`  */
   marginBottom: PropTypes.number,
-
   /** `margin-inline-end` value, applied in `px`  */
   marginInlineEnd: PropTypes.number,
-
   /** `margin-inline-start` value, applied in `px`  */
   marginInlineStart: PropTypes.number,
-
   /** `margin-inline-start` value, applied in `px`  */
   marginLeft: PropTypes.number,
-
   /** `margin-inline-end` value, applied in `px`  */
   marginRight: PropTypes.number,
-
   /** `margin-top` value, applied in `px`  */
   marginTop: PropTypes.number,
   overflow: PropTypes.bool,

package/build/es/{chip.stories.js → chip.prod.stories.js}

@@ -1,27 +1,39 @@
 import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import { Chip } from './chip.js';
-const subtitle = "Chips are useful for displaying a selection of defined choices and filters to the user.";
-const description = "\nChips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.\nSee an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).\n\n#### Chip vs. Button\n\nChips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.\n\n#### Displaying chips\n\n- Chips should be displayed in a horizontal list, where space permits.\n- Do not stack single chips on top of one another if there is space to display them inline.\n- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.\n\n```js\nimport { Chip } from '@dhis2/ui'\n```\n";
+const subtitle = `Chips are useful for displaying a selection of defined choices and filters to the user.`;
+const description = `
+Chips are used to display a list of defined options, filters or views for a related view. Chips are always a secondary content to a main element, for example a data table or a dashboard.
+See an example application of chips [here](https://github.com/dhis2/design-system/blob/master/atoms/chip.md#usage).
 
+#### Chip vs. Button
+
+Chips should only be used for filtering or selecting an option. Do not use filters to trigger actions such as 'Save', 'Exit' or 'Open'. Use a [button](../?path=/docs/actions-buttons-button--basic) to trigger actions.
+
+#### Displaying chips
+
+- Chips should be displayed in a horizontal list, where space permits.
+- Do not stack single chips on top of one another if there is space to display them inline.
+- Do not use horizontal scrolling to display a large number of chips. Always wrap chips onto a new line below.
+
+\`\`\`js
+import { Chip } from '@dhis2/ui'
+\`\`\`
+`;
 window.onClick = (payload, event) => {
   console.log('onClick payload', payload);
   console.log('onClick event', event);
 };
-
 window.onRemove = (payload, event) => {
   console.log('onRemove payload', payload);
   console.log('onRemove event', event);
 };
-
 const onClick = function () {
   return window.onClick(...arguments);
 };
-
 const onRemove = function () {
   return window.onRemove(...arguments);
 };
-
 export default {
   title: 'Chip',
   component: Chip,
@@ -37,9 +49,7 @@ export default {
     onClick
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Chip, args);
-
 export const Default = Template.bind({});
 Default.args = {
   children: 'Chippy'
@@ -56,10 +66,10 @@ Overflow.args = {
   children: 'A super long chip which should definitely truncate'
 };
 export const Removable = Template.bind({});
-Removable.args = { ...Default.args,
+Removable.args = {
+  ...Default.args,
   onRemove
 };
-
 const Globe = () => /*#__PURE__*/React.createElement("svg", {
   role: "img",
   viewBox: "0 0 24 24",
@@ -68,13 +78,11 @@ const Globe = () => /*#__PURE__*/React.createElement("svg", {
 }, /*#__PURE__*/React.createElement("title", null, "LGTM icon"), /*#__PURE__*/React.createElement("path", {
   d: "M12.008 4.866c-2.914 0-5.377.679-6.995 2.11-.05-.088-.085-.163-.141-.253-.17-.273-.328-.583-.828-.89a2.699 2.699 0 0 0-1.014-.387 2.14 2.14 0 0 0-.47-.001l.099-.013c-.91 0-1.442.546-1.788 1.016-.344.47-.566.999-.71 1.577-.285 1.155-.289 2.651.81 3.767.575.588 1.251.863 1.863 1.027.118.032.223.04.336.063.399 1.892 1.58 3.492 3.158 4.381v.001h.002c.929.522 1.81.761 2.472 1.014.924.357 1.9.751 3.036.85l.06.006h.15c1.306 0 2.296-.527 3.152-.855.655-.25 1.54-.482 2.477-1.008a6.156 6.156 0 0 0 1.196-.88 6.759 6.759 0 0 0 1.967-3.45 3.913 3.913 0 0 0 2.19-1.15c1.098-1.115 1.094-2.611.809-3.766-.144-.578-.366-1.106-.71-1.577-.345-.47-.879-1.016-1.788-1.016l.1.013a2.14 2.14 0 0 0-.472.002 2.695 2.695 0 0 0-1.01.385c-.499.307-.658.616-.827.888-.055.089-.09.163-.139.249-1.617-1.426-4.076-2.103-6.985-2.103zm.023 1.37c3.557 0 6.013 1.065 7.057 2.97.63-.243 1.093-1.89 1.612-2.209.42-.26.665-.195.665-.195.95 0 1.93 2.797.712 4.032-.644.657-1.83.842-2.422.795-.045 1.906-1.155 3.626-2.624 4.45-.748.42-1.552.64-2.296.924-.921.352-1.786.763-2.662.763h-.092c-.872-.076-1.74-.407-2.662-.763-.744-.285-1.548-.51-2.296-.93-1.46-.824-2.571-2.54-2.616-4.445-.587.05-1.788-.132-2.436-.794-1.217-1.235-.238-4.032.712-4.032 0 0 .246-.064.666.195.521.321.987 1.984 1.62 2.214C6.013 7.3 8.47 6.236 12.032 6.236zm-3.876 2.33a3.053 3.053 0 1 0 0 6.105 3.053 3.053 0 0 0 0-6.105zm7.751 0a3.052 3.052 0 1 0 0 6.105 3.052 3.052 0 0 0 0-6.105zM8.591 10.28a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.313-1.694.57.57 0 0 0 1.098-.216.57.57 0 0 0-.547-.57 1.35 1.35 0 0 1 .762-.233zm6.888 0a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.314-1.694.57.57 0 1 0 .552-.785 1.35 1.35 0 0 1 .762-.234zM11.52 14.93c-.239.02-.377.146-.377.476 0 .21.138.365.378.365a.143.143 0 0 0 .033-.282c-.022-.005-.13-.044-.13-.136 0-.093 0-.125.183-.15.078-.012.116-.105.092-.18-.024-.075-.094-.1-.18-.093zm1.023 0c-.085-.006-.156.018-.18.093-.024.075.015.168.093.18.182.025.182.057.182.15 0 .092-.107.131-.13.136a.143.143 0 0 0 .033.282c.24 0 .379-.155.379-.365 0-.33-.139-.456-.377-.476z"
 }));
-
 export const Icon = Template.bind({});
 Icon.args = {
   icon: /*#__PURE__*/React.createElement(Globe, null),
   children: 'With an icon'
 };
-
 const GlobeResizable = () => /*#__PURE__*/React.createElement("svg", {
   role: "img",
   viewBox: "0 0 24 24",
@@ -85,7 +93,6 @@ const GlobeResizable = () => /*#__PURE__*/React.createElement("svg", {
 }, /*#__PURE__*/React.createElement("title", null, "LGTM icon"), /*#__PURE__*/React.createElement("path", {
   d: "M12.008 4.866c-2.914 0-5.377.679-6.995 2.11-.05-.088-.085-.163-.141-.253-.17-.273-.328-.583-.828-.89a2.699 2.699 0 0 0-1.014-.387 2.14 2.14 0 0 0-.47-.001l.099-.013c-.91 0-1.442.546-1.788 1.016-.344.47-.566.999-.71 1.577-.285 1.155-.289 2.651.81 3.767.575.588 1.251.863 1.863 1.027.118.032.223.04.336.063.399 1.892 1.58 3.492 3.158 4.381v.001h.002c.929.522 1.81.761 2.472 1.014.924.357 1.9.751 3.036.85l.06.006h.15c1.306 0 2.296-.527 3.152-.855.655-.25 1.54-.482 2.477-1.008a6.156 6.156 0 0 0 1.196-.88 6.759 6.759 0 0 0 1.967-3.45 3.913 3.913 0 0 0 2.19-1.15c1.098-1.115 1.094-2.611.809-3.766-.144-.578-.366-1.106-.71-1.577-.345-.47-.879-1.016-1.788-1.016l.1.013a2.14 2.14 0 0 0-.472.002 2.695 2.695 0 0 0-1.01.385c-.499.307-.658.616-.827.888-.055.089-.09.163-.139.249-1.617-1.426-4.076-2.103-6.985-2.103zm.023 1.37c3.557 0 6.013 1.065 7.057 2.97.63-.243 1.093-1.89 1.612-2.209.42-.26.665-.195.665-.195.95 0 1.93 2.797.712 4.032-.644.657-1.83.842-2.422.795-.045 1.906-1.155 3.626-2.624 4.45-.748.42-1.552.64-2.296.924-.921.352-1.786.763-2.662.763h-.092c-.872-.076-1.74-.407-2.662-.763-.744-.285-1.548-.51-2.296-.93-1.46-.824-2.571-2.54-2.616-4.445-.587.05-1.788-.132-2.436-.794-1.217-1.235-.238-4.032.712-4.032 0 0 .246-.064.666.195.521.321.987 1.984 1.62 2.214C6.013 7.3 8.47 6.236 12.032 6.236zm-3.876 2.33a3.053 3.053 0 1 0 0 6.105 3.053 3.053 0 0 0 0-6.105zm7.751 0a3.052 3.052 0 1 0 0 6.105 3.052 3.052 0 0 0 0-6.105zM8.591 10.28a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.313-1.694.57.57 0 0 0 1.098-.216.57.57 0 0 0-.547-.57 1.35 1.35 0 0 1 .762-.233zm6.888 0a1.357 1.357 0 0 1 0 2.713 1.356 1.356 0 0 1-1.314-1.694.57.57 0 1 0 .552-.785 1.35 1.35 0 0 1 .762-.234zM11.52 14.93c-.239.02-.377.146-.377.476 0 .21.138.365.378.365a.143.143 0 0 0 .033-.282c-.022-.005-.13-.044-.13-.136 0-.093 0-.125.183-.15.078-.012.116-.105.092-.18-.024-.075-.094-.1-.18-.093zm1.023 0c-.085-.006-.156.018-.18.093-.024.075.015.168.093.18.182.025.182.057.182.15 0 .092-.107.131-.13.136a.143.143 0 0 0 .033.282c.24 0 .379-.155.379-.365 0-.33-.139-.456-.377-.476z"
 }));
-
 export const IconContent = Template.bind({});
 IconContent.args = {
   children: /*#__PURE__*/React.createElement("span", {
@@ -108,12 +115,14 @@ Dense.args = {
   children: 'I am dense'
 };
 export const DenseRemoveable = Template.bind({});
-DenseRemoveable.args = { ...Dense.args,
+DenseRemoveable.args = {
+  ...Dense.args,
   ...Removable.args,
   children: 'Removable and dense'
 };
 export const RTLRemovable = args => /*#__PURE__*/React.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/React.createElement(Chip, args, "RTL removable"));
-RTLRemovable.args = { ...Removable.args
+RTLRemovable.args = {
+  ...Removable.args
 };

package/build/es/content.js

@@ -15,7 +15,7 @@ export const Content = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "765109298",
     dynamic: [spacers.dp12]
-  }, ["span.__jsx-style-dynamic-selector{margin:0 ".concat(spacers.dp12, ";color:inherit;white-space:nowrap;}"), ".overflow.__jsx-style-dynamic-selector{max-width:150px;overflow:hidden;text-overflow:ellipsis;}"]));
+  }, [`span.__jsx-style-dynamic-selector{margin:0 ${spacers.dp12};color:inherit;white-space:nowrap;}`, ".overflow.__jsx-style-dynamic-selector{max-width:150px;overflow:hidden;text-overflow:ellipsis;}"]));
 };
 Content.propTypes = {
   children: PropTypes.any,

package/build/es/features/is_clickable/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Chip with onClick handler is rendered', () => {
-  cy.visitStory('Chip', 'With onClick');
+  cy.visitStory('Chip', 'With on click');
 });
 When('the Chip is clicked', () => {
   cy.get('[data-test="dhis2-uicore-chip"]').click();

package/build/es/features/is_removable/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a Chip with onRemove handler is rendered', () => {
-  cy.visitStory('Chip', 'With onRemove');
+  cy.visitStory('Chip', 'With on remove');
 });
 When('the remove icon is clicked', () => {
   cy.get('[data-test="dhis2-uicore-chip-remove"]').click();

package/build/es/icon.js

@@ -7,22 +7,19 @@ export const Icon = _ref => {
     icon,
     dataTest
   } = _ref;
-
   if (!icon) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("span", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["1889825154", [spacers.dp4]]])
   }, icon, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1889825154",
     dynamic: [spacers.dp4]
-  }, ["span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:".concat(spacers.dp4, ";margin-inline-end:-6px;border-radius:50%;overflow:hidden;}"), "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
+  }, [`span.__jsx-style-dynamic-selector{width:24px;height:24px;margin-inline-start:${spacers.dp4};margin-inline-end:-6px;border-radius:50%;overflow:hidden;}`, "span.__jsx-style-dynamic-selector>*{max-height:24px;max-width:24px;}"]));
 };
 Icon.propTypes = {
   dataTest: PropTypes.string.isRequired,
-
   /** the slot for an icon is 24x24px, bigger elements will be clipped */
   icon: PropTypes.element
 };

package/build/es/remove.js

@@ -2,7 +2,6 @@ import _JSXStyle from "styled-jsx/style";
 import { colors } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 function CancelOutline(_ref) {
   let {
     className
@@ -18,16 +17,15 @@ function CancelOutline(_ref) {
     id: "2898942518"
   }, ["svg.jsx-2898942518{fill:inherit;height:16px;width:16px;vertical-align:middle;pointer-events:none;}"]));
 }
-
 CancelOutline.propTypes = {
   className: PropTypes.string
 };
-const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", "span.jsx-2824632002:hover{background:".concat(colors.grey400, ";}")];
+const containerStyle = ["span.jsx-2824632002{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:20px;width:20px;margin-inline-end:4px;border-radius:12px;margin-inline-start:-8px;}", `span.jsx-2824632002:hover{background:${colors.grey400};}`];
 containerStyle.__hash = "2824632002";
 const removeIcon = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2658726446"
-  }, ["svg.jsx-2658726446{fill:".concat(colors.grey600, ";height:16px;width:16px;cursor:pointer;opacity:1;pointer-events:all;}")]),
+  }, [`svg.jsx-2658726446{fill:${colors.grey600};height:16px;width:16px;cursor:pointer;opacity:1;pointer-events:all;}`]),
   className: "jsx-2658726446"
 };
 export const Remove = _ref2 => {
@@ -35,19 +33,16 @@ export const Remove = _ref2 => {
     onRemove,
     dataTest
   } = _ref2;
-
   if (!onRemove) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("span", {
     onClick: e => {
       e.stopPropagation(); // stop onRemove from triggering onClick on container
-
       onRemove({}, e);
     },
     "data-test": dataTest,
-    className: "jsx-".concat(containerStyle.__hash)
+    className: `jsx-${containerStyle.__hash}`
   }, /*#__PURE__*/React.createElement(CancelOutline, {
     className: removeIcon.className
   }), removeIcon.styles, /*#__PURE__*/React.createElement(_JSXStyle, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/chip",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.1",
     "description": "UI Chip",
     "repository": {
         "type": "git",
@@ -22,18 +22,18 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/chip.stories.e2e.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _chip = require("./chip.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onClick = window.Cypress && window.Cypress.cy.stub();
-window.onRemove = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('Chip', module).add('Default', () => /*#__PURE__*/_react2.default.createElement(_chip.Chip, null, "Message")).add('With onClick', () => /*#__PURE__*/_react2.default.createElement(_chip.Chip, {
-  onClick: window.onClick
-}, "Chippy")).add('With onRemove', () => /*#__PURE__*/_react2.default.createElement(_chip.Chip, {
-  onRemove: window.onRemove
-}, "Chipmunk")).add('With children', () => /*#__PURE__*/_react2.default.createElement(_chip.Chip, null, "I am a child")).add('With icon', () => /*#__PURE__*/_react2.default.createElement(_chip.Chip, {
-  icon: /*#__PURE__*/_react2.default.createElement("div", null, "Icon")
-}, "Message"));

package/build/es/chip.stories.e2e.js

@@ -1,12 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { Chip } from './chip.js';
-window.onClick = window.Cypress && window.Cypress.cy.stub();
-window.onRemove = window.Cypress && window.Cypress.cy.stub();
-storiesOf('Chip', module).add('Default', () => /*#__PURE__*/React.createElement(Chip, null, "Message")).add('With onClick', () => /*#__PURE__*/React.createElement(Chip, {
-  onClick: window.onClick
-}, "Chippy")).add('With onRemove', () => /*#__PURE__*/React.createElement(Chip, {
-  onRemove: window.onRemove
-}, "Chipmunk")).add('With children', () => /*#__PURE__*/React.createElement(Chip, null, "I am a child")).add('With icon', () => /*#__PURE__*/React.createElement(Chip, {
-  icon: /*#__PURE__*/React.createElement("div", null, "Icon")
-}, "Message"));