@dhis2-ui/tag 8.2.0 → 8.2.3

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

@@ -13,7 +13,8 @@ var _steps = require("cypress-cucumber-preprocessor/steps");
   cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible');
 });
 (0, _steps.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(([maxWidth, tag]) => {
+  cy.all(() => cy.get('@maxWidth'), () => cy.get('[data-test="dhis2-uicore-tag"]')).then(_ref => {
+    let [maxWidth, tag] = _ref;
     expect(tag).to.have.css('width', maxWidth);
   });
 });

package/build/cjs/tag-icon.js

@@ -13,15 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const TagIcon = ({
-  children,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: "jsx-1699986925"
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1699986925"
-}, [".jsx-1699986925{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-right:4px;max-height:16px;max-width:16px;}"]));
+const TagIcon = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: "jsx-1699986925"
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1699986925"
+  }, [".jsx-1699986925{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-right:4px;max-height:16px;max-width:16px;}"]));
+};
 
 exports.TagIcon = TagIcon;
 TagIcon.propTypes = {

package/build/cjs/tag-text.js

@@ -13,15 +13,18 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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;}"]));
+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;}"]));
+};
 
 exports.TagText = TagText;
 TagText.propTypes = {

package/build/cjs/tag.js

@@ -23,32 +23,35 @@ var _tagText = require("./tag-text.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Tag = ({
-  maxWidth,
-  neutral,
-  negative,
-  positive,
-  icon,
-  bold,
-  className,
-  dataTest,
-  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, {
+const Tag = _ref => {
+  let {
+    maxWidth,
     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};}`]));
+    positive,
+    icon,
+    bold,
+    className,
+    dataTest,
+    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: "".concat(dataTest, "-icon")
+  }, icon), /*#__PURE__*/_react.default.createElement(_tagText.TagText, {
+    dataTest: "".concat(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:".concat(_uiConstants.colors.grey300, ";fill:").concat(_uiConstants.colors.grey700, ";color:").concat(_uiConstants.colors.grey900, ";max-width:").concat(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:".concat(_uiConstants.colors.red100, ";fill:").concat(_uiConstants.colors.red800, ";color:").concat(_uiConstants.colors.red900, ";}"), ".neutral.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.blue100, ";fill:").concat(_uiConstants.colors.blue800, ";color:").concat(_uiConstants.colors.blue900, ";}"), ".positive.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.green100, ";fill:").concat(_uiConstants.colors.green800, ";color:").concat(_uiConstants.colors.green900, ";}"), ".bold.__jsx-style-dynamic-selector{font-weight:700;background-color:".concat(_uiConstants.colors.grey700, ";color:").concat(_uiConstants.colors.white, ";fill:").concat(_uiConstants.colors.white, ";}"), ".bold.neutral.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.blue800, ";color:").concat(_uiConstants.colors.blue050, ";fill:").concat(_uiConstants.colors.white, ";}"), ".bold.positive.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.green700, ";color:").concat(_uiConstants.colors.green050, ";fill:").concat(_uiConstants.colors.white, ";}"), ".bold.negative.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.red700, ";color:").concat(_uiConstants.colors.red050, ";fill:").concat(_uiConstants.colors.white, ";}")]));
+};
 
 exports.Tag = Tag;
 const tagVariantPropType = (0, _propTypes.mutuallyExclusive)(['neutral', 'positive', 'negative'], _propTypes2.default.bool);

package/build/cjs/tag.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WithClippedTextAndMaxWidth = exports.WithClippedLongText = exports.WithLargeIcon = exports.Bold = exports.Negative = exports.Positive = exports.Neutral = exports.WithIcon = exports.Default = exports.default = void 0;
+exports.default = exports.WithLargeIcon = exports.WithIcon = exports.WithClippedTextAndMaxWidth = exports.WithClippedLongText = exports.Positive = exports.Neutral = exports.Negative = exports.Default = exports.Bold = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -12,18 +12,7 @@ var _tag = require("./tag.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const subtitle = 'Used to display categorizing labels or information for other elements in a collection.';
-const description = `
-Tags are used whenever an element in a collection needs to display its category or status. Tags should not be used for one-off, unique information. Tags can be displayed in any kind of component.
-
-Tags are useful when displaying multiple elements in a collection that have the same basic attributes but belong to different categories or have different statuses. Do not use tags for elements that will always be the same, instead use a heading or other grouping method.
-
-Tags are never used for primary interaction and should not be used as buttons. Clicking a tag could sort a collection by that tag, or open a page to display all elements that have that tag type. Tags should not be used as navigation elements.
-
-\`\`\`js
-import { Tag } from '@dhis2/ui'
-\`\`\`
-
-`;
+const description = "\nTags are used whenever an element in a collection needs to display its category or status. Tags should not be used for one-off, unique information. Tags can be displayed in any kind of component.\n\nTags are useful when displaying multiple elements in a collection that have the same basic attributes but belong to different categories or have different statuses. Do not use tags for elements that will always be the same, instead use a heading or other grouping method.\n\nTags are never used for primary interaction and should not be used as buttons. Clicking a tag could sort a collection by that tag, or open a page to display all elements that have that tag type. Tags should not be used as navigation elements.\n\n```js\nimport { Tag } from '@dhis2/ui'\n```\n\n";
 const tagArgType = {
   table: {
     type: {
@@ -35,7 +24,7 @@ const tagArgType = {
   }
 };
 var _default = {
-  title: 'Data Display/Tag',
+  title: 'Tag',
   component: _tag.Tag,
   parameters: {
     componentSubtitle: subtitle,

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

@@ -10,7 +10,8 @@ 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(([maxWidth, tag]) => {
+  cy.all(() => cy.get('@maxWidth'), () => cy.get('[data-test="dhis2-uicore-tag"]')).then(_ref => {
+    let [maxWidth, tag] = _ref;
     expect(tag).to.have.css('width', maxWidth);
   });
 });

package/build/es/tag-icon.js

@@ -1,15 +1,18 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-export const TagIcon = ({
-  children,
-  dataTest
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": dataTest,
-  className: "jsx-1699986925"
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1699986925"
-}, [".jsx-1699986925{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-right:4px;max-height:16px;max-width:16px;}"]));
+export const TagIcon = _ref => {
+  let {
+    children,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: "jsx-1699986925"
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1699986925"
+  }, [".jsx-1699986925{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-right:4px;max-height:16px;max-width:16px;}"]));
+};
 TagIcon.propTypes = {
   dataTest: PropTypes.string.isRequired,
   children: PropTypes.node

package/build/es/tag-text.js

@@ -1,15 +1,18 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-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;}"]));
+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;}"]));
+};
 TagText.propTypes = {
   dataTest: PropTypes.string.isRequired,
   children: PropTypes.node

package/build/es/tag.js

@@ -6,32 +6,35 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { TagIcon } from './tag-icon.js';
 import { TagText } from './tag-text.js';
-export const Tag = ({
-  maxWidth,
-  neutral,
-  negative,
-  positive,
-  icon,
-  bold,
-  className,
-  dataTest,
-  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, {
+export const Tag = _ref => {
+  let {
+    maxWidth,
     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};}`]));
+    positive,
+    icon,
+    bold,
+    className,
+    dataTest,
+    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: "".concat(dataTest, "-icon")
+  }, icon), /*#__PURE__*/React.createElement(TagText, {
+    dataTest: "".concat(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:".concat(colors.grey300, ";fill:").concat(colors.grey700, ";color:").concat(colors.grey900, ";max-width:").concat(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:".concat(colors.red100, ";fill:").concat(colors.red800, ";color:").concat(colors.red900, ";}"), ".neutral.__jsx-style-dynamic-selector{background-color:".concat(colors.blue100, ";fill:").concat(colors.blue800, ";color:").concat(colors.blue900, ";}"), ".positive.__jsx-style-dynamic-selector{background-color:".concat(colors.green100, ";fill:").concat(colors.green800, ";color:").concat(colors.green900, ";}"), ".bold.__jsx-style-dynamic-selector{font-weight:700;background-color:".concat(colors.grey700, ";color:").concat(colors.white, ";fill:").concat(colors.white, ";}"), ".bold.neutral.__jsx-style-dynamic-selector{background-color:".concat(colors.blue800, ";color:").concat(colors.blue050, ";fill:").concat(colors.white, ";}"), ".bold.positive.__jsx-style-dynamic-selector{background-color:".concat(colors.green700, ";color:").concat(colors.green050, ";fill:").concat(colors.white, ";}"), ".bold.negative.__jsx-style-dynamic-selector{background-color:".concat(colors.red700, ";color:").concat(colors.red050, ";fill:").concat(colors.white, ";}")]));
+};
 const tagVariantPropType = mutuallyExclusive(['neutral', 'positive', 'negative'], PropTypes.bool);
 Tag.defaultProps = {
   dataTest: 'dhis2-uicore-tag',

package/build/es/tag.stories.js

@@ -1,18 +1,7 @@
 import React from 'react';
 import { Tag } from './tag.js';
 const subtitle = 'Used to display categorizing labels or information for other elements in a collection.';
-const description = `
-Tags are used whenever an element in a collection needs to display its category or status. Tags should not be used for one-off, unique information. Tags can be displayed in any kind of component.
-
-Tags are useful when displaying multiple elements in a collection that have the same basic attributes but belong to different categories or have different statuses. Do not use tags for elements that will always be the same, instead use a heading or other grouping method.
-
-Tags are never used for primary interaction and should not be used as buttons. Clicking a tag could sort a collection by that tag, or open a page to display all elements that have that tag type. Tags should not be used as navigation elements.
-
-\`\`\`js
-import { Tag } from '@dhis2/ui'
-\`\`\`
-
-`;
+const description = "\nTags are used whenever an element in a collection needs to display its category or status. Tags should not be used for one-off, unique information. Tags can be displayed in any kind of component.\n\nTags are useful when displaying multiple elements in a collection that have the same basic attributes but belong to different categories or have different statuses. Do not use tags for elements that will always be the same, instead use a heading or other grouping method.\n\nTags are never used for primary interaction and should not be used as buttons. Clicking a tag could sort a collection by that tag, or open a page to display all elements that have that tag type. Tags should not be used as navigation elements.\n\n```js\nimport { Tag } from '@dhis2/ui'\n```\n\n";
 const tagArgType = {
   table: {
     type: {
@@ -24,7 +13,7 @@ const tagArgType = {
   }
 };
 export default {
-  title: 'Data Display/Tag',
+  title: 'Tag',
   component: Tag,
   parameters: {
     componentSubtitle: subtitle,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tag",
-    "version": "8.2.0",
+    "version": "8.2.3",
     "description": "UI Tag",
     "repository": {
         "type": "git",
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2/ui-constants": "8.2.0",
+        "@dhis2/ui-constants": "8.2.3",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },