@dhis2-ui/tag 9.10.3 → 9.11.1-beta.1

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 Tag is rendered', () => {
   cy.visitStory('Tag', 'Without icon');
   cy.get('[data-test="dhis2-uicore-tag"]').should('be.visible');

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a tag with the default max width and enough content to fill it completely is rendered', () => {
   cy.wrap('240px').as('maxWidth');
   cy.visitStory('Tag', 'With default max width');

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

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

package/build/cjs/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Tag", {
     return _tag.Tag;
   }
 });
-
 var _tag = require("./tag.js");

package/build/cjs/tag-icon.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TagIcon = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 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 TagIcon = _ref => {
   let {
     children,
@@ -25,7 +20,6 @@ const TagIcon = _ref => {
     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

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TagText = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 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 TagText = _ref => {
   let {
     children,
@@ -25,7 +20,6 @@ const TagText = _ref => {
     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.e2e.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutIcon = exports.WithText = exports.WithIcon = exports.WithDefaultMaxWidth = exports.WithCustomMaxWidth = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tag = require("./tag.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Tag'
+};
+const WithoutIcon = () => /*#__PURE__*/_react.default.createElement(_tag.Tag, null, "Default");
+exports.WithoutIcon = WithoutIcon;
+const WithIcon = () => /*#__PURE__*/_react.default.createElement(_tag.Tag, {
+  icon: /*#__PURE__*/_react.default.createElement("span", null, "Icon")
+}, "Default");
+exports.WithIcon = WithIcon;
+const WithText = () => /*#__PURE__*/_react.default.createElement(_tag.Tag, null, "Text content");
+exports.WithText = WithText;
+const WithDefaultMaxWidth = () => /*#__PURE__*/_react.default.createElement(_tag.Tag, null, "This is a lot of content that should exceed the default max width of the tag component quite significantly so testing is still works when the default value of the max width is changed");
+exports.WithDefaultMaxWidth = WithDefaultMaxWidth;
+const WithCustomMaxWidth = () => /*#__PURE__*/_react.default.createElement(_tag.Tag, {
+  maxWidth: "30px"
+}, "Text content");
+exports.WithCustomMaxWidth = WithCustomMaxWidth;

package/build/cjs/tag.js

@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tag = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = require("@dhis2/prop-types");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _tagIcon = require("./tag-icon.js");
-
 var _tagText = require("./tag-text.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Tag = _ref => {
   let {
     maxWidth,
@@ -44,15 +34,14 @@ const Tag = _ref => {
       bold
     }) || "")
   }, icon && /*#__PURE__*/_react.default.createElement(_tagIcon.TagIcon, {
-    dataTest: "".concat(dataTest, "-icon")
+    dataTest: `${dataTest}-icon`
   }, icon), /*#__PURE__*/_react.default.createElement(_tagText.TagText, {
-    dataTest: "".concat(dataTest, "-text")
+    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:".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, ";}")]));
+  }, [`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.defaultProps = {
@@ -65,17 +54,13 @@ Tag.propTypes = {
   children: _propTypes2.default.node,
   className: _propTypes2.default.string,
   dataTest: _propTypes2.default.string,
-
   /** Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon. */
   icon: _propTypes2.default.node,
   maxWidth: _propTypes2.default.string,
-
   /** Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props */
   negative: tagVariantPropType,
-
   /** Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props */
   neutral: tagVariantPropType,
-
   /** Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props */
   positive: tagVariantPropType
 };

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

@@ -4,15 +4,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithLargeIcon = exports.WithIcon = exports.WithClippedTextAndMaxWidth = exports.WithClippedLongText = exports.RTL = exports.Positive = exports.Neutral = exports.Negative = exports.Default = exports.Bold = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _tag = require("./tag.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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.
 
-const subtitle = 'Used to display categorizing labels or information for other elements in a collection.';
-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";
+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 tagArgType = {
   table: {
     type: {
@@ -23,7 +30,7 @@ const tagArgType = {
     type: 'boolean'
   }
 };
-var _default = {
+var _default = exports.default = {
   title: 'Tag',
   component: _tag.Tag,
   parameters: {
@@ -35,19 +42,20 @@ var _default = {
     }
   },
   argTypes: {
-    negative: { ...tagArgType
+    negative: {
+      ...tagArgType
     },
-    neutral: { ...tagArgType
+    neutral: {
+      ...tagArgType
     },
-    positive: { ...tagArgType
+    positive: {
+      ...tagArgType
     }
   },
   args: {
     children: 'Dog'
   }
 };
-exports.default = _default;
-
 const ExampleIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
   height: "12",
   viewBox: "0 0 12 12",
@@ -68,7 +76,6 @@ const ExampleIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
   cy: "9.5",
   r: "1"
 })));
-
 const ExampleLargeIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
   height: "24",
   viewBox: "0 0 24 24",
@@ -78,58 +85,45 @@ const ExampleLargeIcon = () => /*#__PURE__*/_react.default.createElement("svg",
   d: "m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z",
   fill: "inherit"
 }));
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_tag.Tag, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const WithIcon = Template.bind({});
-exports.WithIcon = WithIcon;
+const Default = exports.Default = Template.bind({});
+const WithIcon = exports.WithIcon = Template.bind({});
 WithIcon.args = {
   icon: /*#__PURE__*/_react.default.createElement(ExampleIcon, null)
 };
-const Neutral = Template.bind({});
-exports.Neutral = Neutral;
+const Neutral = exports.Neutral = Template.bind({});
 Neutral.args = {
   neutral: true
 };
-const Positive = Template.bind({});
-exports.Positive = Positive;
+const Positive = exports.Positive = Template.bind({});
 Positive.args = {
   positive: true
 };
-const Negative = Template.bind({});
-exports.Negative = Negative;
+const Negative = exports.Negative = Template.bind({});
 Negative.args = {
   negative: true
 };
-const Bold = Template.bind({});
-exports.Bold = Bold;
+const Bold = exports.Bold = Template.bind({});
 Bold.args = {
   bold: true
 };
-const WithLargeIcon = Template.bind({});
-exports.WithLargeIcon = WithLargeIcon;
+const WithLargeIcon = exports.WithLargeIcon = Template.bind({});
 WithLargeIcon.args = {
   icon: /*#__PURE__*/_react.default.createElement(ExampleLargeIcon, null)
 };
-const WithClippedLongText = Template.bind({});
-exports.WithClippedLongText = WithClippedLongText;
+const WithClippedLongText = exports.WithClippedLongText = Template.bind({});
 WithClippedLongText.args = {
   icon: /*#__PURE__*/_react.default.createElement(ExampleIcon, null),
   children: 'I am long text, therefore I get clipped before I finish'
 };
-const WithClippedTextAndMaxWidth = Template.bind({});
-exports.WithClippedTextAndMaxWidth = WithClippedTextAndMaxWidth;
+const WithClippedTextAndMaxWidth = exports.WithClippedTextAndMaxWidth = Template.bind({});
 WithClippedTextAndMaxWidth.args = {
   children: 'I am long text',
   maxWidth: '50px'
 };
-
 const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(Template, args));
-
 exports.RTL = RTL;
 RTL.args = {
   icon: /*#__PURE__*/_react.default.createElement(ExampleIcon, null)

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Tag } from './tag.js';
+export default {
+  title: 'Tag'
+};
+export const WithoutIcon = () => /*#__PURE__*/React.createElement(Tag, null, "Default");
+export const WithIcon = () => /*#__PURE__*/React.createElement(Tag, {
+  icon: /*#__PURE__*/React.createElement("span", null, "Icon")
+}, "Default");
+export const WithText = () => /*#__PURE__*/React.createElement(Tag, null, "Text content");
+export const WithDefaultMaxWidth = () => /*#__PURE__*/React.createElement(Tag, null, "This is a lot of content that should exceed the default max width of the tag component quite significantly so testing is still works when the default value of the max width is changed");
+export const WithCustomMaxWidth = () => /*#__PURE__*/React.createElement(Tag, {
+  maxWidth: "30px"
+}, "Text content");

package/build/es/tag.js

@@ -27,13 +27,13 @@ export const Tag = _ref => {
       bold
     }) || "")
   }, icon && /*#__PURE__*/React.createElement(TagIcon, {
-    dataTest: "".concat(dataTest, "-icon")
+    dataTest: `${dataTest}-icon`
   }, icon), /*#__PURE__*/React.createElement(TagText, {
-    dataTest: "".concat(dataTest, "-text")
+    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:".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, ";}")]));
+  }, [`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.defaultProps = {
@@ -46,17 +46,13 @@ Tag.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Tags can contain icons. Use icons where they will help users easily identify the content of the tag. Tags must have a text label and cannot display only an icon. */
   icon: PropTypes.node,
   maxWidth: PropTypes.string,
-
   /** Red 'negative' tags imply an error or a problem. `neutral`, `positive`, and `negative` are mutually exclusive props */
   negative: tagVariantPropType,
-
   /** Blue 'neutral' tags are used when a tag _could_ have valid or error status but is currently neutral. `neutral`, `positive`, and `negative` are mutually exclusive props */
   neutral: tagVariantPropType,
-
   /** Green 'valid' tags should be used to indicate validity or success. `neutral`, `positive`, and `negative` are mutually exclusive props */
   positive: tagVariantPropType
 };

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

@@ -1,7 +1,18 @@
 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 = "\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 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 tagArgType = {
   table: {
     type: {
@@ -24,18 +35,20 @@ export default {
     }
   },
   argTypes: {
-    negative: { ...tagArgType
+    negative: {
+      ...tagArgType
     },
-    neutral: { ...tagArgType
+    neutral: {
+      ...tagArgType
     },
-    positive: { ...tagArgType
+    positive: {
+      ...tagArgType
     }
   },
   args: {
     children: 'Dog'
   }
 };
-
 const ExampleIcon = () => /*#__PURE__*/React.createElement("svg", {
   height: "12",
   viewBox: "0 0 12 12",
@@ -56,7 +69,6 @@ const ExampleIcon = () => /*#__PURE__*/React.createElement("svg", {
   cy: "9.5",
   r: "1"
 })));
-
 const ExampleLargeIcon = () => /*#__PURE__*/React.createElement("svg", {
   height: "24",
   viewBox: "0 0 24 24",
@@ -66,9 +78,7 @@ const ExampleLargeIcon = () => /*#__PURE__*/React.createElement("svg", {
   d: "m12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z",
   fill: "inherit"
 }));
-
 const Template = args => /*#__PURE__*/React.createElement(Tag, args);
-
 export const Default = Template.bind({});
 export const WithIcon = Template.bind({});
 WithIcon.args = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tag",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI Tag",
     "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.10.3",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

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

@@ -1,15 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _tag = require("./tag.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('Tag', module).add('Without icon', () => /*#__PURE__*/_react2.default.createElement(_tag.Tag, null, "Default")).add('With icon', () => /*#__PURE__*/_react2.default.createElement(_tag.Tag, {
-  icon: /*#__PURE__*/_react2.default.createElement("span", null, "Icon")
-}, "Default")).add('With text', () => /*#__PURE__*/_react2.default.createElement(_tag.Tag, null, "Text content")).add('With default max width', () => /*#__PURE__*/_react2.default.createElement(_tag.Tag, null, "This is a lot of content that should exceed the default max width of the tag component quite significantly so testing is still works when the default value of the max width is changed")).add('With custom max width', () => /*#__PURE__*/_react2.default.createElement(_tag.Tag, {
-  maxWidth: "30px"
-}, "Text content"));

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

@@ -1,8 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { Tag } from './tag.js';
-storiesOf('Tag', module).add('Without icon', () => /*#__PURE__*/React.createElement(Tag, null, "Default")).add('With icon', () => /*#__PURE__*/React.createElement(Tag, {
-  icon: /*#__PURE__*/React.createElement("span", null, "Icon")
-}, "Default")).add('With text', () => /*#__PURE__*/React.createElement(Tag, null, "Text content")).add('With default max width', () => /*#__PURE__*/React.createElement(Tag, null, "This is a lot of content that should exceed the default max width of the tag component quite significantly so testing is still works when the default value of the max width is changed")).add('With custom max width', () => /*#__PURE__*/React.createElement(Tag, {
-  maxWidth: "30px"
-}, "Text content"));