@paprika/tag 0.0.18-next.3 → 0.0.19-next.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## 0.0.19-next.1
+
+### Patch Changes
+
+- Updated dependencies [32de383]
+  - @paprika/icon@2.1.5-next.0
+
+## 0.0.19-next.0
+
+### Patch Changes
+
+- eb42e40: tag icon should be fixed as 20px
+
+## 0.0.18
+
+### Patch Changes
+
+- 17ab30d: Tag Icon closing Icon (X icon) background color will be changed depending on the tag background
+- Updated dependencies [036fe83]
+- Updated dependencies [9e15465]
+- Updated dependencies [343d673]
+- Updated dependencies [80361b2]
+  - @paprika/tokens@1.1.3
+  - @paprika/helpers@2.2.0
+  - @paprika/icon@2.1.4
+  - @paprika/raw-button@1.0.10
+  - @paprika/stylers@1.1.4
+
+## 0.0.18-next.4
+
+### Patch Changes
+
+- 17ab30d: Tag Icon closing Icon (X icon) background color will be changed depending on the tag background
+
 ## 0.0.18-next.3
 
 ### Patch Changes

package/lib/Tag.js

@@ -28,6 +28,8 @@ var _rawButton = _interopRequireDefault(require("@paprika/raw-button"));
 
 var _useI18n = _interopRequireDefault(require("@paprika/l10n/lib/useI18n"));
 
+var _TimesCircle = _interopRequireDefault(require("@paprika/icon/lib/TimesCircle"));
+
 var sc = _interopRequireWildcard(require("./Tag.styles"));
 
 var types = _interopRequireWildcard(require("./types"));
@@ -70,11 +72,12 @@ function Tag(props) {
     a11yText: a11yText || a11yTagText,
     isDisabled: isDisabled,
     size: size,
+    theme: moreProps.theme,
     "data-pka-anchor": "tag.remove",
     "data-qa-anchor": "paprika.tag.remove",
     onClick: handleRemove,
     onKeyDown: handleDeleteKeyDown
-  }) : null);
+  }, /*#__PURE__*/_react["default"].createElement(_TimesCircle["default"], null)) : null);
 
   var tagProps = {
     size: size,

package/lib/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tag.js"],"names":["Tag","props","children","onRemove","size","onClick","a11yText","avatar","isDisabled","moreProps","I18n","handleRemove","e","stopPropagation","handleDeleteKeyDown","key","a11yTagText","t","value","content","tagProps","RawButton","types","sizes","theme","themes","severityTheme","severityThemes","propTypes","PropTypes","string","node","isRequired","bool","func","oneOf","MEDIUM","LARGE","BLACK","BLUE","GREEN","GREY","LIGHT_BLUE","LIGHT_ORANGE","ORANGE","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport RawButton from \"@paprika/raw-button\";\nimport useI18n from \"@paprika/l10n/lib/useI18n\";\nimport * as sc from \"./Tag.styles\";\nimport * as types from \"./types\";\n\nexport default function Tag(props) {\n  const { children, onRemove, size, onClick, a11yText, avatar, isDisabled, ...moreProps } = props;\n  const I18n = useI18n();\n\n  const handleRemove = e => {\n    onRemove();\n    e.stopPropagation();\n  };\n\n  const handleDeleteKeyDown = e => {\n    if (e.key === \"Enter\" || e.key === \"Backspace\" || e.key === \" \") {\n      handleRemove(e);\n    }\n  };\n\n  const a11yTagText = typeof children === \"string\" ? I18n.t(\"remove_a11y\", { value: children }) : I18n.t(\"remove\");\n\n  const content = (\n    <>\n      {avatar}\n      <sc.Ellipsis size={size}>{children}</sc.Ellipsis>\n      {onRemove ? (\n        <sc.Delete\n          a11yText={a11yText || a11yTagText}\n          isDisabled={isDisabled}\n          size={size}\n          data-pka-anchor=\"tag.remove\"\n          data-qa-anchor=\"paprika.tag.remove\"\n          onClick={handleRemove}\n          onKeyDown={handleDeleteKeyDown}\n        />\n      ) : null}\n    </>\n  );\n\n  const tagProps = {\n    size,\n    \"data-pka-anchor\": \"tag\",\n  };\n\n  if (onClick) {\n    tagProps.a11yText = a11yText;\n    tagProps.isDisabled = isDisabled;\n    tagProps.onClick = onClick;\n  }\n\n  return (\n    <sc.Tag as={onClick ? RawButton : \"div\"} {...tagProps} {...moreProps}>\n      {content}\n    </sc.Tag>\n  );\n}\n\nTag.types = {\n  size: types.sizes,\n  theme: types.themes,\n  severityTheme: types.severityThemes,\n};\n\nconst propTypes = {\n  /** used in aria-tag on the root element */\n  a11yText: PropTypes.string,\n  /** Can pass a avatar to be displayed to the left of the tag content */\n  avatar: PropTypes.node,\n  /** Content to show in the central area of the tag */\n  children: PropTypes.node.isRequired,\n  /** Disables tag onClick and remove button functionality */\n  isDisabled: PropTypes.bool,\n  /** Fires when clicking the root element. Should also pass value for a11yText when using this */\n  onClick: PropTypes.func,\n  /**  Pass a function to show a remove button */\n  onRemove: PropTypes.func,\n  /** Size of the tag(font size, min-height, padding, etc). */\n  size: PropTypes.oneOf([Tag.types.size.MEDIUM, Tag.types.size.LARGE]),\n  /** Visual theme of the tag */\n  theme: PropTypes.oneOf([\n    Tag.types.theme.BLACK,\n    Tag.types.theme.BLUE,\n    Tag.types.theme.GREEN,\n    Tag.types.theme.GREY,\n    Tag.types.theme.LIGHT_BLUE,\n    Tag.types.theme.LIGHT_ORANGE,\n    Tag.types.theme.ORANGE,\n    Tag.types.severityTheme.NO_RISK,\n    Tag.types.severityTheme.LOW_RISK,\n    Tag.types.severityTheme.MEDIUM_RISK,\n    Tag.types.severityTheme.HIGH_RISK,\n    Tag.types.severityTheme.ALERT,\n  ]),\n};\n\nconst defaultProps = {\n  a11yText: null,\n  avatar: null,\n  isDisabled: false,\n  onClick: null,\n  onRemove: null,\n  size: Tag.types.size.MEDIUM,\n  theme: Tag.types.theme.GREY,\n};\n\nTag.propTypes = propTypes;\nTag.defaultProps = defaultProps;\n"],"file":"Tag.js"}
+{"version":3,"sources":["../src/Tag.js"],"names":["Tag","props","children","onRemove","size","onClick","a11yText","avatar","isDisabled","moreProps","I18n","handleRemove","e","stopPropagation","handleDeleteKeyDown","key","a11yTagText","t","value","content","theme","tagProps","RawButton","types","sizes","themes","severityTheme","severityThemes","propTypes","PropTypes","string","node","isRequired","bool","func","oneOf","MEDIUM","LARGE","BLACK","BLUE","GREEN","GREY","LIGHT_BLUE","LIGHT_ORANGE","ORANGE","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;AAEe,SAASA,GAAT,CAAaC,KAAb,EAAoB;AACjC,MAAQC,QAAR,GAA0FD,KAA1F,CAAQC,QAAR;AAAA,MAAkBC,QAAlB,GAA0FF,KAA1F,CAAkBE,QAAlB;AAAA,MAA4BC,IAA5B,GAA0FH,KAA1F,CAA4BG,IAA5B;AAAA,MAAkCC,OAAlC,GAA0FJ,KAA1F,CAAkCI,OAAlC;AAAA,MAA2CC,QAA3C,GAA0FL,KAA1F,CAA2CK,QAA3C;AAAA,MAAqDC,MAArD,GAA0FN,KAA1F,CAAqDM,MAArD;AAAA,MAA6DC,UAA7D,GAA0FP,KAA1F,CAA6DO,UAA7D;AAAA,MAA4EC,SAA5E,6CAA0FR,KAA1F;AACA,MAAMS,IAAI,GAAG,0BAAb;;AAEA,MAAMC,YAAY,GAAG,SAAfA,YAAe,CAAAC,CAAC,EAAI;AACxBT,IAAAA,QAAQ;AACRS,IAAAA,CAAC,CAACC,eAAF;AACD,GAHD;;AAKA,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAAAF,CAAC,EAAI;AAC/B,QAAIA,CAAC,CAACG,GAAF,KAAU,OAAV,IAAqBH,CAAC,CAACG,GAAF,KAAU,WAA/B,IAA8CH,CAAC,CAACG,GAAF,KAAU,GAA5D,EAAiE;AAC/DJ,MAAAA,YAAY,CAACC,CAAD,CAAZ;AACD;AACF,GAJD;;AAMA,MAAMI,WAAW,GAAG,OAAOd,QAAP,KAAoB,QAApB,GAA+BQ,IAAI,CAACO,CAAL,CAAO,aAAP,EAAsB;AAAEC,IAAAA,KAAK,EAAEhB;AAAT,GAAtB,CAA/B,GAA4EQ,IAAI,CAACO,CAAL,CAAO,QAAP,CAAhG;;AAEA,MAAME,OAAO,gBACX,kEACGZ,MADH,eAEE,gCAAC,EAAD,CAAI,QAAJ;AAAa,IAAA,IAAI,EAAEH;AAAnB,KAA0BF,QAA1B,CAFF,EAGGC,QAAQ,gBACP,gCAAC,EAAD,CAAI,MAAJ;AACE,IAAA,QAAQ,EAAEG,QAAQ,IAAIU,WADxB;AAEE,IAAA,UAAU,EAAER,UAFd;AAGE,IAAA,IAAI,EAAEJ,IAHR;AAIE,IAAA,KAAK,EAAEK,SAAS,CAACW,KAJnB;AAKE,uBAAgB,YALlB;AAME,sBAAe,oBANjB;AAOE,IAAA,OAAO,EAAET,YAPX;AAQE,IAAA,SAAS,EAAEG;AARb,kBAUE,gCAAC,uBAAD,OAVF,CADO,GAaL,IAhBN,CADF;;AAqBA,MAAMO,QAAQ,GAAG;AACfjB,IAAAA,IAAI,EAAJA,IADe;AAEf,uBAAmB;AAFJ,GAAjB;;AAKA,MAAIC,OAAJ,EAAa;AACXgB,IAAAA,QAAQ,CAACf,QAAT,GAAoBA,QAApB;AACAe,IAAAA,QAAQ,CAACb,UAAT,GAAsBA,UAAtB;AACAa,IAAAA,QAAQ,CAAChB,OAAT,GAAmBA,OAAnB;AACD;;AAED,sBACE,gCAAC,EAAD,CAAI,GAAJ;AAAQ,IAAA,EAAE,EAAEA,OAAO,GAAGiB,qBAAH,GAAe;AAAlC,KAA6CD,QAA7C,EAA2DZ,SAA3D,GACGU,OADH,CADF;AAKD;;AAEDnB,GAAG,CAACuB,KAAJ,GAAY;AACVnB,EAAAA,IAAI,EAAEmB,KAAK,CAACC,KADF;AAEVJ,EAAAA,KAAK,EAAEG,KAAK,CAACE,MAFH;AAGVC,EAAAA,aAAa,EAAEH,KAAK,CAACI;AAHX,CAAZ;AAMA,IAAMC,SAAS,GAAG;AAChB;AACAtB,EAAAA,QAAQ,EAAEuB,sBAAUC,MAFJ;;AAGhB;AACAvB,EAAAA,MAAM,EAAEsB,sBAAUE,IAJF;;AAKhB;AACA7B,EAAAA,QAAQ,EAAE2B,sBAAUE,IAAV,CAAeC,UANT;;AAOhB;AACAxB,EAAAA,UAAU,EAAEqB,sBAAUI,IARN;;AAShB;AACA5B,EAAAA,OAAO,EAAEwB,sBAAUK,IAVH;;AAWhB;AACA/B,EAAAA,QAAQ,EAAE0B,sBAAUK,IAZJ;;AAahB;AACA9B,EAAAA,IAAI,EAAEyB,sBAAUM,KAAV,CAAgB,CAACnC,GAAG,CAACuB,KAAJ,CAAUnB,IAAV,CAAegC,MAAhB,EAAwBpC,GAAG,CAACuB,KAAJ,CAAUnB,IAAV,CAAeiC,KAAvC,CAAhB,CAdU;;AAehB;AACAjB,EAAAA,KAAK,EAAES,sBAAUM,KAAV,CAAgB,CACrBnC,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBkB,KADK,EAErBtC,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBmB,IAFK,EAGrBvC,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBoB,KAHK,EAIrBxC,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBqB,IAJK,EAKrBzC,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBsB,UALK,EAMrB1C,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBuB,YANK,EAOrB3C,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBwB,MAPK,EAQrB5C,GAAG,CAACuB,KAAJ,CAAUG,aAAV,CAAwBmB,OARH,EASrB7C,GAAG,CAACuB,KAAJ,CAAUG,aAAV,CAAwBoB,QATH,EAUrB9C,GAAG,CAACuB,KAAJ,CAAUG,aAAV,CAAwBqB,WAVH,EAWrB/C,GAAG,CAACuB,KAAJ,CAAUG,aAAV,CAAwBsB,SAXH,EAYrBhD,GAAG,CAACuB,KAAJ,CAAUG,aAAV,CAAwBuB,KAZH,CAAhB;AAhBS,CAAlB;AAgCA,IAAMC,YAAY,GAAG;AACnB5C,EAAAA,QAAQ,EAAE,IADS;AAEnBC,EAAAA,MAAM,EAAE,IAFW;AAGnBC,EAAAA,UAAU,EAAE,KAHO;AAInBH,EAAAA,OAAO,EAAE,IAJU;AAKnBF,EAAAA,QAAQ,EAAE,IALS;AAMnBC,EAAAA,IAAI,EAAEJ,GAAG,CAACuB,KAAJ,CAAUnB,IAAV,CAAegC,MANF;AAOnBhB,EAAAA,KAAK,EAAEpB,GAAG,CAACuB,KAAJ,CAAUH,KAAV,CAAgBqB;AAPJ,CAArB;AAUAzC,GAAG,CAAC4B,SAAJ,GAAgBA,SAAhB;AACA5B,GAAG,CAACkD,YAAJ,GAAmBA,YAAnB","sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport RawButton from \"@paprika/raw-button\";\nimport useI18n from \"@paprika/l10n/lib/useI18n\";\nimport TimesCircleIcon from \"@paprika/icon/lib/TimesCircle\";\nimport * as sc from \"./Tag.styles\";\nimport * as types from \"./types\";\n\nexport default function Tag(props) {\n  const { children, onRemove, size, onClick, a11yText, avatar, isDisabled, ...moreProps } = props;\n  const I18n = useI18n();\n\n  const handleRemove = e => {\n    onRemove();\n    e.stopPropagation();\n  };\n\n  const handleDeleteKeyDown = e => {\n    if (e.key === \"Enter\" || e.key === \"Backspace\" || e.key === \" \") {\n      handleRemove(e);\n    }\n  };\n\n  const a11yTagText = typeof children === \"string\" ? I18n.t(\"remove_a11y\", { value: children }) : I18n.t(\"remove\");\n\n  const content = (\n    <>\n      {avatar}\n      <sc.Ellipsis size={size}>{children}</sc.Ellipsis>\n      {onRemove ? (\n        <sc.Delete\n          a11yText={a11yText || a11yTagText}\n          isDisabled={isDisabled}\n          size={size}\n          theme={moreProps.theme}\n          data-pka-anchor=\"tag.remove\"\n          data-qa-anchor=\"paprika.tag.remove\"\n          onClick={handleRemove}\n          onKeyDown={handleDeleteKeyDown}\n        >\n          <TimesCircleIcon />\n        </sc.Delete>\n      ) : null}\n    </>\n  );\n\n  const tagProps = {\n    size,\n    \"data-pka-anchor\": \"tag\",\n  };\n\n  if (onClick) {\n    tagProps.a11yText = a11yText;\n    tagProps.isDisabled = isDisabled;\n    tagProps.onClick = onClick;\n  }\n\n  return (\n    <sc.Tag as={onClick ? RawButton : \"div\"} {...tagProps} {...moreProps}>\n      {content}\n    </sc.Tag>\n  );\n}\n\nTag.types = {\n  size: types.sizes,\n  theme: types.themes,\n  severityTheme: types.severityThemes,\n};\n\nconst propTypes = {\n  /** used in aria-tag on the root element */\n  a11yText: PropTypes.string,\n  /** Can pass a avatar to be displayed to the left of the tag content */\n  avatar: PropTypes.node,\n  /** Content to show in the central area of the tag */\n  children: PropTypes.node.isRequired,\n  /** Disables tag onClick and remove button functionality */\n  isDisabled: PropTypes.bool,\n  /** Fires when clicking the root element. Should also pass value for a11yText when using this */\n  onClick: PropTypes.func,\n  /**  Pass a function to show a remove button */\n  onRemove: PropTypes.func,\n  /** Size of the tag(font size, min-height, padding, etc). */\n  size: PropTypes.oneOf([Tag.types.size.MEDIUM, Tag.types.size.LARGE]),\n  /** Visual theme of the tag */\n  theme: PropTypes.oneOf([\n    Tag.types.theme.BLACK,\n    Tag.types.theme.BLUE,\n    Tag.types.theme.GREEN,\n    Tag.types.theme.GREY,\n    Tag.types.theme.LIGHT_BLUE,\n    Tag.types.theme.LIGHT_ORANGE,\n    Tag.types.theme.ORANGE,\n    Tag.types.severityTheme.NO_RISK,\n    Tag.types.severityTheme.LOW_RISK,\n    Tag.types.severityTheme.MEDIUM_RISK,\n    Tag.types.severityTheme.HIGH_RISK,\n    Tag.types.severityTheme.ALERT,\n  ]),\n};\n\nconst defaultProps = {\n  a11yText: null,\n  avatar: null,\n  isDisabled: false,\n  onClick: null,\n  onRemove: null,\n  size: Tag.types.size.MEDIUM,\n  theme: Tag.types.theme.GREY,\n};\n\nTag.propTypes = propTypes;\nTag.defaultProps = defaultProps;\n"],"file":"Tag.js"}

package/lib/Tag.styles.js

@@ -22,7 +22,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _tokens = _interopRequireDefault(require("@paprika/tokens"));
 
-var _button = _interopRequireDefault(require("@paprika/button"));
+var _rawButton = _interopRequireDefault(require("@paprika/raw-button"));
 
 var _helpers = require("@paprika/stylers/lib/helpers");
 
@@ -36,8 +36,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var themeStyles = (_themeStyles = {}, (0, _defineProperty2["default"])(_themeStyles, types.themes.BLACK, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.black)), (0, _defineProperty2["default"])(_themeStyles, types.themes.BLUE, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.blue)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREY, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.blackLighten70, _tokens["default"].color.black)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREEN, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.greenDarken10)), (0, _defineProperty2["default"])(_themeStyles, types.themes.ORANGE, (0, _styledComponents.css)(["background:", ";"], _tokens["default"].color.orangeDarken10)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_BLUE, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.blueLighten50, _tokens["default"].color.blueDarken20)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_ORANGE, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.orangeLighten40, _tokens["default"].color.orangeDarken20)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.NO_RISK, (0, _styledComponents.css)(["background:", ";color:", ";"], _tokens["default"].color.blackLighten70, _tokens["default"].color.black)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.LOW_RISK, (0, _styledComponents.css)(["background:#299a7a;"])), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.MEDIUM_RISK, (0, _styledComponents.css)(["background:#c9af28;"])), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.HIGH_RISK, (0, _styledComponents.css)(["background:#cd3c44;"])), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.ALERT, (0, _styledComponents.css)(["background:none;border:1px solid ", ";color:", ";"], _tokens["default"].color.orangeDarken10, _tokens["default"].color.orangeDarken10)), _themeStyles);
-
 var Tags = _styledComponents["default"].ul.withConfig({
   displayName: "Tagstyles__Tags",
   componentId: "sc-1ufm8km-0"
@@ -81,24 +79,12 @@ var Ellipsis = _styledComponents["default"].div.withConfig({
 });
 
 exports.Ellipsis = Ellipsis;
-var Delete = (0, _styledComponents["default"])(_button["default"].Close).withConfig({
+var Delete = (0, _styledComponents["default"])(_rawButton["default"]).withConfig({
   displayName: "Tagstyles__Delete",
   componentId: "sc-1ufm8km-3"
-})(function (_ref3) {
-  var size = _ref3.size;
-  var fontSize = {
-    medium: "10px",
-    large: "12px"
-  };
-  var padding = {
-    medium: "4px",
-    large: "5px"
-  };
-  var width = {
-    medium: "20px",
-    large: "24px"
-  };
-  return (0, _styledComponents.css)(["align-items:center;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;font-size:", ";height:", ";justify-content:center;min-height:auto;padding:", ";width:", ";&:hover{background:", ";}&:focus{background:", ";}"], fontSize[size], width[size], padding[size], width[size], _tokens["default"].color.blackLighten60, _tokens["default"].color.blackLighten60);
-});
+})(["align-items:center;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;font-size:", ";height:", ";justify-content:center;min-height:auto;width:", ";"], _tokens["default"].icon.sizeSm, _tokens["default"].icon.sizeSm, _tokens["default"].icon.sizeSm);
 exports.Delete = Delete;
+var DeleteButtonStylesForLightBackground = (0, _styledComponents.css)(["", "{color:", ";&:hover,&:focus{color:", ";}}"], Delete, _tokens["default"].color.blackLighten70, _tokens["default"].color.blackLighten60);
+var DeleteButtonStylesForDarkBackground = (0, _styledComponents.css)(["", "{color:", ";&:hover,&:focus{color:", ";}}"], Delete, _tokens["default"].color.blackLighten30, _tokens["default"].color.blackLighten20);
+var themeStyles = (_themeStyles = {}, (0, _defineProperty2["default"])(_themeStyles, types.themes.BLACK, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.black, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.BLUE, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.blue, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREY, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.blackLighten70, _tokens["default"].color.black, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.GREEN, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.greenDarken10, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.ORANGE, (0, _styledComponents.css)(["background:", ";", ""], _tokens["default"].color.orangeDarken10, DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_BLUE, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.blueLighten50, _tokens["default"].color.blueDarken20, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.themes.LIGHT_ORANGE, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.orangeLighten40, _tokens["default"].color.orangeDarken20, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.NO_RISK, (0, _styledComponents.css)(["background:", ";color:", ";", ""], _tokens["default"].color.blackLighten70, _tokens["default"].color.black, DeleteButtonStylesForDarkBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.LOW_RISK, (0, _styledComponents.css)(["background:#299a7a;", ""], DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.MEDIUM_RISK, (0, _styledComponents.css)(["background:#c9af28;", ""], DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.HIGH_RISK, (0, _styledComponents.css)(["background:#cd3c44;", ""], DeleteButtonStylesForLightBackground)), (0, _defineProperty2["default"])(_themeStyles, types.severityThemes.ALERT, (0, _styledComponents.css)(["background:none;border:1px solid ", ";color:", ";", ""], _tokens["default"].color.orangeDarken10, _tokens["default"].color.orangeDarken10, DeleteButtonStylesForDarkBackground)), _themeStyles);
 //# sourceMappingURL=Tag.styles.js.map

package/lib/Tag.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tag.styles.js"],"names":["themeStyles","types","themes","BLACK","css","tokens","color","black","BLUE","blue","GREY","blackLighten70","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT","Tags","styled","ul","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","white","spaceSm","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","Button","Close","fontSize","padding","width","blackLighten60"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport Button from \"@paprika/button\";\nimport { fontSize, spacer } from \"@paprika/stylers/lib/helpers\";\nimport { truncateText } from \"@paprika/stylers/lib/includes\";\nimport * as types from \"./types\";\n\nconst themeStyles = {\n  [types.themes.BLACK]: css`\n    background: ${tokens.color.black};\n  `,\n\n  [types.themes.BLUE]: css`\n    background: ${tokens.color.blue};\n  `,\n\n  [types.themes.GREY]: css`\n    background: ${tokens.color.blackLighten70};\n    color: ${tokens.color.black};\n  `,\n\n  [types.themes.GREEN]: css`\n    background: ${tokens.color.greenDarken10};\n  `,\n\n  [types.themes.ORANGE]: css`\n    background: ${tokens.color.orangeDarken10};\n  `,\n\n  [types.themes.LIGHT_BLUE]: css`\n    background: ${tokens.color.blueLighten50};\n    color: ${tokens.color.blueDarken20};\n  `,\n\n  [types.themes.LIGHT_ORANGE]: css`\n    background: ${tokens.color.orangeLighten40};\n    color: ${tokens.color.orangeDarken20};\n  `,\n\n  [types.severityThemes.NO_RISK]: css`\n    background: ${tokens.color.blackLighten70};\n    color: ${tokens.color.black};\n  `,\n\n  [types.severityThemes.LOW_RISK]: css`\n    background: #299a7a;\n  `,\n\n  [types.severityThemes.MEDIUM_RISK]: css`\n    background: #c9af28;\n  `,\n\n  [types.severityThemes.HIGH_RISK]: css`\n    background: #cd3c44;\n  `,\n\n  [types.severityThemes.ALERT]: css`\n    background: none;\n    border: 1px solid ${tokens.color.orangeDarken10};\n    color: ${tokens.color.orangeDarken10};\n  `,\n};\n\nexport const Tags = styled.ul(\n  () => css`\n    display: flex;\n    flex-wrap: wrap;\n    line-height: 1;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  `\n);\n\nconst widthAndHeight = {\n  medium: \"24px\",\n  large: \"28px\",\n};\n\nconst avatarWidthAndHeight = {\n  medium: \"20px\",\n  large: \"24px\",\n};\n\nconst tagStyles = ({ theme, size }) => css`\n  align-items: center;\n  background: ${tokens.color.blackLighten70};\n  border-radius: ${spacer(2)};\n  box-sizing: border-box;\n  color: ${tokens.color.white};\n  display: flex;\n  height: ${widthAndHeight[size]};\n  line-height: 1;\n  margin-bottom: 2px;\n  margin-right: ${tokens.spaceSm};\n  max-width: 100%;\n  padding: 2px;\n  ${themeStyles[theme]}\n\n  [data-pka-anchor=\"avatar\"] {\n    height: ${avatarWidthAndHeight[size]};\n    min-width: ${avatarWidthAndHeight[size]};\n  }\n`;\n\nexport const Tag = styled.div(tagStyles);\n\nexport const Ellipsis = styled.div(({ size }) => {\n  const getFontSize = {\n    medium: fontSize(-1),\n    large: fontSize(0),\n  };\n\n  return css`\n    align-items: center;\n    display: block;\n    ${getFontSize[size]};\n    padding: 0 ${tokens.space} 1px ${tokens.space};\n    ${truncateText};\n  `;\n});\n\nexport const Delete = styled(Button.Close)(({ size }) => {\n  const fontSize = {\n    medium: \"10px\",\n    large: \"12px\",\n  };\n\n  const padding = {\n    medium: \"4px\",\n    large: \"5px\",\n  };\n\n  const width = {\n    medium: \"20px\",\n    large: \"24px\",\n  };\n\n  return css`\n    align-items: center;\n    border-radius: 50%;\n    box-sizing: border-box;\n    display: flex;\n    flex-shrink: 0;\n    font-size: ${fontSize[size]};\n    height: ${width[size]};\n    justify-content: center;\n    min-height: auto;\n    padding: ${padding[size]};\n    width: ${width[size]};\n\n    &:hover {\n      background: ${tokens.color.blackLighten60};\n    }\n\n    &:focus {\n      background: ${tokens.color.blackLighten60};\n    }\n  `;\n});\n"],"file":"Tag.styles.js"}
+{"version":3,"sources":["../src/Tag.styles.js"],"names":["Tags","styled","ul","css","widthAndHeight","medium","large","avatarWidthAndHeight","tagStyles","theme","size","tokens","color","blackLighten70","white","spaceSm","themeStyles","Tag","div","Ellipsis","getFontSize","space","truncateText","Delete","RawButton","icon","sizeSm","DeleteButtonStylesForLightBackground","blackLighten60","DeleteButtonStylesForDarkBackground","blackLighten30","blackLighten20","types","themes","BLACK","black","BLUE","blue","GREY","GREEN","greenDarken10","ORANGE","orangeDarken10","LIGHT_BLUE","blueLighten50","blueDarken20","LIGHT_ORANGE","orangeLighten40","orangeDarken20","severityThemes","NO_RISK","LOW_RISK","MEDIUM_RISK","HIGH_RISK","ALERT"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tokens from \"@paprika/tokens\";\nimport RawButton from \"@paprika/raw-button\";\nimport { fontSize, spacer } from \"@paprika/stylers/lib/helpers\";\nimport { truncateText } from \"@paprika/stylers/lib/includes\";\nimport * as types from \"./types\";\n\nexport const Tags = styled.ul(\n  () => css`\n    display: flex;\n    flex-wrap: wrap;\n    line-height: 1;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n  `\n);\n\nconst widthAndHeight = {\n  medium: \"24px\",\n  large: \"28px\",\n};\n\nconst avatarWidthAndHeight = {\n  medium: \"20px\",\n  large: \"24px\",\n};\n\nconst tagStyles = ({ theme, size }) => css`\n  align-items: center;\n  background: ${tokens.color.blackLighten70};\n  border-radius: ${spacer(2)};\n  box-sizing: border-box;\n  color: ${tokens.color.white};\n  display: flex;\n  height: ${widthAndHeight[size]};\n  line-height: 1;\n  margin-bottom: 2px;\n  margin-right: ${tokens.spaceSm};\n  max-width: 100%;\n  padding: 2px;\n  ${themeStyles[theme]}\n\n  [data-pka-anchor=\"avatar\"] {\n    height: ${avatarWidthAndHeight[size]};\n    min-width: ${avatarWidthAndHeight[size]};\n  }\n`;\n\nexport const Tag = styled.div(tagStyles);\n\nexport const Ellipsis = styled.div(({ size }) => {\n  const getFontSize = {\n    medium: fontSize(-1),\n    large: fontSize(0),\n  };\n\n  return css`\n    align-items: center;\n    display: block;\n    ${getFontSize[size]};\n    padding: 0 ${tokens.space} 1px ${tokens.space};\n    ${truncateText};\n  `;\n});\n\nexport const Delete = styled(RawButton)`\n  align-items: center;\n  border-radius: 50%;\n  box-sizing: border-box;\n  display: flex;\n  flex-shrink: 0;\n  font-size: ${tokens.icon.sizeSm};\n  height: ${tokens.icon.sizeSm};\n  justify-content: center;\n  min-height: auto;\n  width: ${tokens.icon.sizeSm};\n`;\n\nconst DeleteButtonStylesForLightBackground = css`\n  ${Delete} {\n    color: ${tokens.color.blackLighten70};\n    &:hover,\n    &:focus {\n      color: ${tokens.color.blackLighten60};\n    }\n  }\n`;\n\nconst DeleteButtonStylesForDarkBackground = css`\n  ${Delete} {\n    color: ${tokens.color.blackLighten30};\n    &:hover,\n    &:focus {\n      color: ${tokens.color.blackLighten20};\n    }\n  }\n`;\n\nconst themeStyles = {\n  [types.themes.BLACK]: css`\n    background: ${tokens.color.black};\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.themes.BLUE]: css`\n    background: ${tokens.color.blue};\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.themes.GREY]: css`\n    background: ${tokens.color.blackLighten70};\n    color: ${tokens.color.black};\n    ${DeleteButtonStylesForDarkBackground}\n  `,\n\n  [types.themes.GREEN]: css`\n    background: ${tokens.color.greenDarken10};\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.themes.ORANGE]: css`\n    background: ${tokens.color.orangeDarken10};\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.themes.LIGHT_BLUE]: css`\n    background: ${tokens.color.blueLighten50};\n    color: ${tokens.color.blueDarken20};\n    ${DeleteButtonStylesForDarkBackground}\n  `,\n\n  [types.themes.LIGHT_ORANGE]: css`\n    background: ${tokens.color.orangeLighten40};\n    color: ${tokens.color.orangeDarken20};\n    ${DeleteButtonStylesForDarkBackground}\n  `,\n\n  [types.severityThemes.NO_RISK]: css`\n    background: ${tokens.color.blackLighten70};\n    color: ${tokens.color.black};\n    ${DeleteButtonStylesForDarkBackground}\n  `,\n\n  [types.severityThemes.LOW_RISK]: css`\n    background: #299a7a;\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.severityThemes.MEDIUM_RISK]: css`\n    background: #c9af28;\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.severityThemes.HIGH_RISK]: css`\n    background: #cd3c44;\n    ${DeleteButtonStylesForLightBackground}\n  `,\n\n  [types.severityThemes.ALERT]: css`\n    background: none;\n    border: 1px solid ${tokens.color.orangeDarken10};\n    color: ${tokens.color.orangeDarken10};\n    ${DeleteButtonStylesForDarkBackground}\n  `,\n};\n"],"file":"Tag.styles.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paprika/tag",
-  "version": "0.0.18-next.3",
+  "version": "0.0.19-next.1",
   "description": "Tag can be both static UI labels or removable components. Static Tag is mostly used to show an item’s status. A removable Tag should be used to add or group objects.",
   "author": "@paprika",
   "main": "lib/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime-corejs2": "^7.3.1",
-    "@paprika/button": "^1.1.9-next.3",
     "@paprika/constants": "^1.0.0",
-    "@paprika/helpers": "^2.2.0-next.1",
-    "@paprika/raw-button": "^1.0.10-next.0",
-    "@paprika/stylers": "^1.1.4-next.0",
-    "@paprika/tokens": "^1.1.3-next.0",
+    "@paprika/helpers": "^2.2.0",
+    "@paprika/raw-button": "^1.0.10",
+    "@paprika/stylers": "^1.1.4",
+    "@paprika/tokens": "^1.1.3",
+    "@paprika/icon": "^2.1.5-next.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/src/Tag.js

@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import RawButton from "@paprika/raw-button";
 import useI18n from "@paprika/l10n/lib/useI18n";
+import TimesCircleIcon from "@paprika/icon/lib/TimesCircle";
 import * as sc from "./Tag.styles";
 import * as types from "./types";
 
@@ -31,11 +32,14 @@ export default function Tag(props) {
           a11yText={a11yText || a11yTagText}
           isDisabled={isDisabled}
           size={size}
+          theme={moreProps.theme}
           data-pka-anchor="tag.remove"
           data-qa-anchor="paprika.tag.remove"
           onClick={handleRemove}
           onKeyDown={handleDeleteKeyDown}
-        />
+        >
+          <TimesCircleIcon />
+        </sc.Delete>
       ) : null}
     </>
   );

package/src/Tag.styles.js

@@ -1,66 +1,10 @@
 import styled, { css } from "styled-components";
 import tokens from "@paprika/tokens";
-import Button from "@paprika/button";
+import RawButton from "@paprika/raw-button";
 import { fontSize, spacer } from "@paprika/stylers/lib/helpers";
 import { truncateText } from "@paprika/stylers/lib/includes";
 import * as types from "./types";
 
-const themeStyles = {
-  [types.themes.BLACK]: css`
-    background: ${tokens.color.black};
-  `,
-
-  [types.themes.BLUE]: css`
-    background: ${tokens.color.blue};
-  `,
-
-  [types.themes.GREY]: css`
-    background: ${tokens.color.blackLighten70};
-    color: ${tokens.color.black};
-  `,
-
-  [types.themes.GREEN]: css`
-    background: ${tokens.color.greenDarken10};
-  `,
-
-  [types.themes.ORANGE]: css`
-    background: ${tokens.color.orangeDarken10};
-  `,
-
-  [types.themes.LIGHT_BLUE]: css`
-    background: ${tokens.color.blueLighten50};
-    color: ${tokens.color.blueDarken20};
-  `,
-
-  [types.themes.LIGHT_ORANGE]: css`
-    background: ${tokens.color.orangeLighten40};
-    color: ${tokens.color.orangeDarken20};
-  `,
-
-  [types.severityThemes.NO_RISK]: css`
-    background: ${tokens.color.blackLighten70};
-    color: ${tokens.color.black};
-  `,
-
-  [types.severityThemes.LOW_RISK]: css`
-    background: #299a7a;
-  `,
-
-  [types.severityThemes.MEDIUM_RISK]: css`
-    background: #c9af28;
-  `,
-
-  [types.severityThemes.HIGH_RISK]: css`
-    background: #cd3c44;
-  `,
-
-  [types.severityThemes.ALERT]: css`
-    background: none;
-    border: 1px solid ${tokens.color.orangeDarken10};
-    color: ${tokens.color.orangeDarken10};
-  `,
-};
-
 export const Tags = styled.ul(
   () => css`
     display: flex;
@@ -120,41 +64,103 @@ export const Ellipsis = styled.div(({ size }) => {
   `;
 });
 
-export const Delete = styled(Button.Close)(({ size }) => {
-  const fontSize = {
-    medium: "10px",
-    large: "12px",
-  };
-
-  const padding = {
-    medium: "4px",
-    large: "5px",
-  };
-
-  const width = {
-    medium: "20px",
-    large: "24px",
-  };
+export const Delete = styled(RawButton)`
+  align-items: center;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: flex;
+  flex-shrink: 0;
+  font-size: ${tokens.icon.sizeSm};
+  height: ${tokens.icon.sizeSm};
+  justify-content: center;
+  min-height: auto;
+  width: ${tokens.icon.sizeSm};
+`;
 
-  return css`
-    align-items: center;
-    border-radius: 50%;
-    box-sizing: border-box;
-    display: flex;
-    flex-shrink: 0;
-    font-size: ${fontSize[size]};
-    height: ${width[size]};
-    justify-content: center;
-    min-height: auto;
-    padding: ${padding[size]};
-    width: ${width[size]};
-
-    &:hover {
-      background: ${tokens.color.blackLighten60};
+const DeleteButtonStylesForLightBackground = css`
+  ${Delete} {
+    color: ${tokens.color.blackLighten70};
+    &:hover,
+    &:focus {
+      color: ${tokens.color.blackLighten60};
     }
+  }
+`;
 
+const DeleteButtonStylesForDarkBackground = css`
+  ${Delete} {
+    color: ${tokens.color.blackLighten30};
+    &:hover,
     &:focus {
-      background: ${tokens.color.blackLighten60};
+      color: ${tokens.color.blackLighten20};
     }
-  `;
-});
+  }
+`;
+
+const themeStyles = {
+  [types.themes.BLACK]: css`
+    background: ${tokens.color.black};
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.themes.BLUE]: css`
+    background: ${tokens.color.blue};
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.themes.GREY]: css`
+    background: ${tokens.color.blackLighten70};
+    color: ${tokens.color.black};
+    ${DeleteButtonStylesForDarkBackground}
+  `,
+
+  [types.themes.GREEN]: css`
+    background: ${tokens.color.greenDarken10};
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.themes.ORANGE]: css`
+    background: ${tokens.color.orangeDarken10};
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.themes.LIGHT_BLUE]: css`
+    background: ${tokens.color.blueLighten50};
+    color: ${tokens.color.blueDarken20};
+    ${DeleteButtonStylesForDarkBackground}
+  `,
+
+  [types.themes.LIGHT_ORANGE]: css`
+    background: ${tokens.color.orangeLighten40};
+    color: ${tokens.color.orangeDarken20};
+    ${DeleteButtonStylesForDarkBackground}
+  `,
+
+  [types.severityThemes.NO_RISK]: css`
+    background: ${tokens.color.blackLighten70};
+    color: ${tokens.color.black};
+    ${DeleteButtonStylesForDarkBackground}
+  `,
+
+  [types.severityThemes.LOW_RISK]: css`
+    background: #299a7a;
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.severityThemes.MEDIUM_RISK]: css`
+    background: #c9af28;
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.severityThemes.HIGH_RISK]: css`
+    background: #cd3c44;
+    ${DeleteButtonStylesForLightBackground}
+  `,
+
+  [types.severityThemes.ALERT]: css`
+    background: none;
+    border: 1px solid ${tokens.color.orangeDarken10};
+    color: ${tokens.color.orangeDarken10};
+    ${DeleteButtonStylesForDarkBackground}
+  `,
+};

package/stories/Examples/Variations.js

@@ -110,6 +110,7 @@ export default function Variations() {
                 key={theme[1]}
                 theme={theme[1]}
                 size={permutation.tagSize}
+                onRemove={handleRemove}
                 avatar={
                   <Avatar isRound size={permutation.avatarSize}>
                     <CalendarIcon />
@@ -133,6 +134,7 @@ export default function Variations() {
                 key={theme[1]}
                 theme={theme[1]}
                 size={permutation.tagSize}
+                onRemove={handleRemove}
                 avatar={
                   <Avatar isRound size={permutation.avatarSize}>
                     <CalendarIcon />