@dhis2-ui/tag 10.16.3-alpha.1 → 10.16.4

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

@@ -12,8 +12,7 @@ var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preproces
   cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible');
 });
 (0, _cypressCucumberPreprocessor.Then)('the width of the tag should be exactly the max width', () => {
-  cy.all(() => cy.get('@maxWidth'), () => cy.get('[data-test="dhis2-uicore-tag"]')).then(_ref => {
-    let [maxWidth, tag] = _ref;
+  cy.all(() => cy.get('@maxWidth'), () => cy.get('[data-test="dhis2-uicore-tag"]')).then(([maxWidth, tag]) => {
     expect(tag).to.have.css('width', maxWidth);
   });
 });

package/build/cjs/tag-icon.js

@@ -8,18 +8,15 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TagIcon = _ref => {
-  let {
-    children,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    className: "jsx-1638813748"
-  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1638813748"
-  }, [".jsx-1638813748{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-end:4px;max-height:16px;max-width:16px;}"]));
-};
+const TagIcon = ({
+  children,
+  dataTest
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest,
+  className: "jsx-1638813748"
+}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "1638813748"
+}, [".jsx-1638813748{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-end:4px;max-height:16px;max-width:16px;}"]));
 exports.TagIcon = TagIcon;
 TagIcon.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/tag-text.js

@@ -8,18 +8,15 @@ var _style = _interopRequireDefault(require("styled-jsx/style"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const TagText = _ref => {
-  let {
-    children,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", {
-    "data-test": dataTest,
-    className: "jsx-1110058759"
-  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "1110058759"
-  }, [".jsx-1110058759{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]));
-};
+const TagText = ({
+  children,
+  dataTest
+}) => /*#__PURE__*/_react.default.createElement("span", {
+  "data-test": dataTest,
+  className: "jsx-1110058759"
+}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "1110058759"
+}, [".jsx-1110058759{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]));
 exports.TagText = TagText;
 TagText.propTypes = {
   dataTest: _propTypes.default.string.isRequired,

package/build/cjs/tag.js

@@ -13,35 +13,32 @@ var _react = _interopRequireDefault(require("react"));
 var _tagIcon = require("./tag-icon.js");
 var _tagText = require("./tag-text.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Tag = _ref => {
-  let {
-    maxWidth = '240px',
+const Tag = ({
+  maxWidth = '240px',
+  neutral,
+  negative,
+  positive,
+  icon,
+  bold,
+  className,
+  dataTest = 'dhis2-uicore-tag',
+  children
+}) => /*#__PURE__*/_react.default.createElement("div", {
+  "data-test": dataTest,
+  className: _style.default.dynamic([["2409336266", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.colors.grey900, maxWidth, _uiConstants.colors.red100, _uiConstants.colors.red800, _uiConstants.colors.red900, _uiConstants.colors.blue100, _uiConstants.colors.blue800, _uiConstants.colors.blue900, _uiConstants.colors.green100, _uiConstants.colors.green800, _uiConstants.colors.green900, _uiConstants.colors.grey700, _uiConstants.colors.white, _uiConstants.colors.white, _uiConstants.colors.blue800, _uiConstants.colors.blue050, _uiConstants.colors.white, _uiConstants.colors.green700, _uiConstants.colors.green050, _uiConstants.colors.white, _uiConstants.colors.red700, _uiConstants.colors.red050, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
     neutral,
-    negative,
     positive,
-    icon,
-    bold,
-    className,
-    dataTest = 'dhis2-uicore-tag',
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-test": dataTest,
-    className: _style.default.dynamic([["2409336266", [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.colors.grey900, maxWidth, _uiConstants.colors.red100, _uiConstants.colors.red800, _uiConstants.colors.red900, _uiConstants.colors.blue100, _uiConstants.colors.blue800, _uiConstants.colors.blue900, _uiConstants.colors.green100, _uiConstants.colors.green800, _uiConstants.colors.green900, _uiConstants.colors.grey700, _uiConstants.colors.white, _uiConstants.colors.white, _uiConstants.colors.blue800, _uiConstants.colors.blue050, _uiConstants.colors.white, _uiConstants.colors.green700, _uiConstants.colors.green050, _uiConstants.colors.white, _uiConstants.colors.red700, _uiConstants.colors.red050, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)(className, {
-      neutral,
-      positive,
-      negative,
-      bold
-    }) || "")
-  }, icon && /*#__PURE__*/_react.default.createElement(_tagIcon.TagIcon, {
-    dataTest: `${dataTest}-icon`
-  }, icon), /*#__PURE__*/_react.default.createElement(_tagText.TagText, {
-    dataTest: `${dataTest}-text`
-  }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "2409336266",
-    dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.colors.grey900, maxWidth, _uiConstants.colors.red100, _uiConstants.colors.red800, _uiConstants.colors.red900, _uiConstants.colors.blue100, _uiConstants.colors.blue800, _uiConstants.colors.blue900, _uiConstants.colors.green100, _uiConstants.colors.green800, _uiConstants.colors.green900, _uiConstants.colors.grey700, _uiConstants.colors.white, _uiConstants.colors.white, _uiConstants.colors.blue800, _uiConstants.colors.blue050, _uiConstants.colors.white, _uiConstants.colors.green700, _uiConstants.colors.green050, _uiConstants.colors.white, _uiConstants.colors.red700, _uiConstants.colors.red050, _uiConstants.colors.white]
-  }, [`div.__jsx-style-dynamic-selector{padding:5px 6px;border-radius:3px;background-color:${_uiConstants.colors.grey300};fill:${_uiConstants.colors.grey700};color:${_uiConstants.colors.grey900};max-width:${maxWidth};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;font-size:13px;height:23px;}`, `.negative.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.red100};fill:${_uiConstants.colors.red800};color:${_uiConstants.colors.red900};}`, `.neutral.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.blue100};fill:${_uiConstants.colors.blue800};color:${_uiConstants.colors.blue900};}`, `.positive.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.green100};fill:${_uiConstants.colors.green800};color:${_uiConstants.colors.green900};}`, `.bold.__jsx-style-dynamic-selector{font-weight:700;background-color:${_uiConstants.colors.grey700};color:${_uiConstants.colors.white};fill:${_uiConstants.colors.white};}`, `.bold.neutral.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.blue800};color:${_uiConstants.colors.blue050};fill:${_uiConstants.colors.white};}`, `.bold.positive.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.green700};color:${_uiConstants.colors.green050};fill:${_uiConstants.colors.white};}`, `.bold.negative.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.red700};color:${_uiConstants.colors.red050};fill:${_uiConstants.colors.white};}`]));
-};
+    negative,
+    bold
+  }) || "")
+}, icon && /*#__PURE__*/_react.default.createElement(_tagIcon.TagIcon, {
+  dataTest: `${dataTest}-icon`
+}, icon), /*#__PURE__*/_react.default.createElement(_tagText.TagText, {
+  dataTest: `${dataTest}-text`
+}, children), /*#__PURE__*/_react.default.createElement(_style.default, {
+  id: "2409336266",
+  dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey700, _uiConstants.colors.grey900, maxWidth, _uiConstants.colors.red100, _uiConstants.colors.red800, _uiConstants.colors.red900, _uiConstants.colors.blue100, _uiConstants.colors.blue800, _uiConstants.colors.blue900, _uiConstants.colors.green100, _uiConstants.colors.green800, _uiConstants.colors.green900, _uiConstants.colors.grey700, _uiConstants.colors.white, _uiConstants.colors.white, _uiConstants.colors.blue800, _uiConstants.colors.blue050, _uiConstants.colors.white, _uiConstants.colors.green700, _uiConstants.colors.green050, _uiConstants.colors.white, _uiConstants.colors.red700, _uiConstants.colors.red050, _uiConstants.colors.white]
+}, [`div.__jsx-style-dynamic-selector{padding:5px 6px;border-radius:3px;background-color:${_uiConstants.colors.grey300};fill:${_uiConstants.colors.grey700};color:${_uiConstants.colors.grey900};max-width:${maxWidth};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;font-size:13px;height:23px;}`, `.negative.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.red100};fill:${_uiConstants.colors.red800};color:${_uiConstants.colors.red900};}`, `.neutral.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.blue100};fill:${_uiConstants.colors.blue800};color:${_uiConstants.colors.blue900};}`, `.positive.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.green100};fill:${_uiConstants.colors.green800};color:${_uiConstants.colors.green900};}`, `.bold.__jsx-style-dynamic-selector{font-weight:700;background-color:${_uiConstants.colors.grey700};color:${_uiConstants.colors.white};fill:${_uiConstants.colors.white};}`, `.bold.neutral.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.blue800};color:${_uiConstants.colors.blue050};fill:${_uiConstants.colors.white};}`, `.bold.positive.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.green700};color:${_uiConstants.colors.green050};fill:${_uiConstants.colors.white};}`, `.bold.negative.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.red700};color:${_uiConstants.colors.red050};fill:${_uiConstants.colors.white};}`]));
 exports.Tag = Tag;
 const tagVariantPropType = (0, _propTypes.mutuallyExclusive)(['neutral', 'positive', 'negative'], _propTypes2.default.bool);
 Tag.propTypes = {

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

@@ -10,8 +10,7 @@ Given('a tag with a max width and enough content to fill it completely is render
   cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible');
 });
 Then('the width of the tag should be exactly the max width', () => {
-  cy.all(() => cy.get('@maxWidth'), () => cy.get('[data-test="dhis2-uicore-tag"]')).then(_ref => {
-    let [maxWidth, tag] = _ref;
+  cy.all(() => cy.get('@maxWidth'), () => cy.get('[data-test="dhis2-uicore-tag"]')).then(([maxWidth, tag]) => {
     expect(tag).to.have.css('width', maxWidth);
   });
 });

package/build/es/tag-icon.js

@@ -1,18 +1,15 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-export const TagIcon = _ref => {
-  let {
-    children,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: "jsx-1638813748"
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1638813748"
-  }, [".jsx-1638813748{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-end:4px;max-height:16px;max-width:16px;}"]));
-};
+export const TagIcon = ({
+  children,
+  dataTest
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: "jsx-1638813748"
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1638813748"
+}, [".jsx-1638813748{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-end:4px;max-height:16px;max-width:16px;}"]));
 TagIcon.propTypes = {
   dataTest: PropTypes.string.isRequired,
   children: PropTypes.node

package/build/es/tag-text.js

@@ -1,18 +1,15 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-export const TagText = _ref => {
-  let {
-    children,
-    dataTest
-  } = _ref;
-  return /*#__PURE__*/React.createElement("span", {
-    "data-test": dataTest,
-    className: "jsx-1110058759"
-  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1110058759"
-  }, [".jsx-1110058759{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]));
-};
+export const TagText = ({
+  children,
+  dataTest
+}) => /*#__PURE__*/React.createElement("span", {
+  "data-test": dataTest,
+  className: "jsx-1110058759"
+}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "1110058759"
+}, [".jsx-1110058759{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"]));
 TagText.propTypes = {
   dataTest: PropTypes.string.isRequired,
   children: PropTypes.node

package/build/es/tag.js

@@ -6,35 +6,32 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { TagIcon } from './tag-icon.js';
 import { TagText } from './tag-text.js';
-export const Tag = _ref => {
-  let {
-    maxWidth = '240px',
+export const Tag = ({
+  maxWidth = '240px',
+  neutral,
+  negative,
+  positive,
+  icon,
+  bold,
+  className,
+  dataTest = 'dhis2-uicore-tag',
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: _JSXStyle.dynamic([["2409336266", [colors.grey300, colors.grey700, colors.grey900, maxWidth, colors.red100, colors.red800, colors.red900, colors.blue100, colors.blue800, colors.blue900, colors.green100, colors.green800, colors.green900, colors.grey700, colors.white, colors.white, colors.blue800, colors.blue050, colors.white, colors.green700, colors.green050, colors.white, colors.red700, colors.red050, colors.white]]]) + " " + (cx(className, {
     neutral,
-    negative,
     positive,
-    icon,
-    bold,
-    className,
-    dataTest = 'dhis2-uicore-tag',
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: _JSXStyle.dynamic([["2409336266", [colors.grey300, colors.grey700, colors.grey900, maxWidth, colors.red100, colors.red800, colors.red900, colors.blue100, colors.blue800, colors.blue900, colors.green100, colors.green800, colors.green900, colors.grey700, colors.white, colors.white, colors.blue800, colors.blue050, colors.white, colors.green700, colors.green050, colors.white, colors.red700, colors.red050, colors.white]]]) + " " + (cx(className, {
-      neutral,
-      positive,
-      negative,
-      bold
-    }) || "")
-  }, icon && /*#__PURE__*/React.createElement(TagIcon, {
-    dataTest: `${dataTest}-icon`
-  }, icon), /*#__PURE__*/React.createElement(TagText, {
-    dataTest: `${dataTest}-text`
-  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2409336266",
-    dynamic: [colors.grey300, colors.grey700, colors.grey900, maxWidth, colors.red100, colors.red800, colors.red900, colors.blue100, colors.blue800, colors.blue900, colors.green100, colors.green800, colors.green900, colors.grey700, colors.white, colors.white, colors.blue800, colors.blue050, colors.white, colors.green700, colors.green050, colors.white, colors.red700, colors.red050, colors.white]
-  }, [`div.__jsx-style-dynamic-selector{padding:5px 6px;border-radius:3px;background-color:${colors.grey300};fill:${colors.grey700};color:${colors.grey900};max-width:${maxWidth};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;font-size:13px;height:23px;}`, `.negative.__jsx-style-dynamic-selector{background-color:${colors.red100};fill:${colors.red800};color:${colors.red900};}`, `.neutral.__jsx-style-dynamic-selector{background-color:${colors.blue100};fill:${colors.blue800};color:${colors.blue900};}`, `.positive.__jsx-style-dynamic-selector{background-color:${colors.green100};fill:${colors.green800};color:${colors.green900};}`, `.bold.__jsx-style-dynamic-selector{font-weight:700;background-color:${colors.grey700};color:${colors.white};fill:${colors.white};}`, `.bold.neutral.__jsx-style-dynamic-selector{background-color:${colors.blue800};color:${colors.blue050};fill:${colors.white};}`, `.bold.positive.__jsx-style-dynamic-selector{background-color:${colors.green700};color:${colors.green050};fill:${colors.white};}`, `.bold.negative.__jsx-style-dynamic-selector{background-color:${colors.red700};color:${colors.red050};fill:${colors.white};}`]));
-};
+    negative,
+    bold
+  }) || "")
+}, icon && /*#__PURE__*/React.createElement(TagIcon, {
+  dataTest: `${dataTest}-icon`
+}, icon), /*#__PURE__*/React.createElement(TagText, {
+  dataTest: `${dataTest}-text`
+}, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2409336266",
+  dynamic: [colors.grey300, colors.grey700, colors.grey900, maxWidth, colors.red100, colors.red800, colors.red900, colors.blue100, colors.blue800, colors.blue900, colors.green100, colors.green800, colors.green900, colors.grey700, colors.white, colors.white, colors.blue800, colors.blue050, colors.white, colors.green700, colors.green050, colors.white, colors.red700, colors.red050, colors.white]
+}, [`div.__jsx-style-dynamic-selector{padding:5px 6px;border-radius:3px;background-color:${colors.grey300};fill:${colors.grey700};color:${colors.grey900};max-width:${maxWidth};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;font-size:13px;height:23px;}`, `.negative.__jsx-style-dynamic-selector{background-color:${colors.red100};fill:${colors.red800};color:${colors.red900};}`, `.neutral.__jsx-style-dynamic-selector{background-color:${colors.blue100};fill:${colors.blue800};color:${colors.blue900};}`, `.positive.__jsx-style-dynamic-selector{background-color:${colors.green100};fill:${colors.green800};color:${colors.green900};}`, `.bold.__jsx-style-dynamic-selector{font-weight:700;background-color:${colors.grey700};color:${colors.white};fill:${colors.white};}`, `.bold.neutral.__jsx-style-dynamic-selector{background-color:${colors.blue800};color:${colors.blue050};fill:${colors.white};}`, `.bold.positive.__jsx-style-dynamic-selector{background-color:${colors.green700};color:${colors.green050};fill:${colors.white};}`, `.bold.negative.__jsx-style-dynamic-selector{background-color:${colors.red700};color:${colors.red050};fill:${colors.white};}`]));
 const tagVariantPropType = mutuallyExclusive(['neutral', 'positive', 'negative'], PropTypes.bool);
 Tag.propTypes = {
   /** Use bold tags where it is important that the tag is seen by the user in an information dense interface. Bold tags should be reserved for edge cases and not overused. */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tag",
-    "version": "10.16.3-alpha.1",
+    "version": "10.16.4",
     "description": "UI Tag",
     "repository": {
         "type": "git",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.4",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },