orcs-design-system 2.1.20 → 2.1.21

package/es/components/Tag/Tag.stories.js

@@ -113,6 +113,22 @@ export var disabled = function disabled() {
     tagType: "skill"
   }, "product design"));
 };
+export var strikethrough = function strikethrough() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    showStrikeThrough: true
+  }, "devops"), /*#__PURE__*/React.createElement(Tag, {
+    showStrikeThrough: true
+  }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
+    showStrikeThrough: true,
+    tagType: "skill"
+  }, "product design"), /*#__PURE__*/React.createElement(Tag, {
+    showStrikeThrough: true,
+    disabled: true,
+    tagType: "skill"
+  }, "digital transformation"));
+};
 export var withTagType = function withTagType() {
   return /*#__PURE__*/React.createElement(Spacer, {
     m: "2px"
@@ -179,6 +195,11 @@ disabled.__docgenInfo = {
   "methods": [],
   "displayName": "disabled"
 };
+strikethrough.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "strikethrough"
+};
 withTagType.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Tag/index.js

@@ -45,7 +45,9 @@ var TagValue = styled.button.withConfig({
 var TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
-})(["text-overflow:ellipsis;white-space:normal;text-align:left;"]);
+})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;"], function (props) {
+  return props.showStrikeThrough ? "line-through" : "none";
+});
 var TagEdit = styled(TagValue).withConfig({
   displayName: "Tag__TagEdit",
   componentId: "sc-1dh2aa8-3"
@@ -92,9 +94,10 @@ export default function Tag(_ref) {
       tagType = _ref.tagType,
       showEdit = _ref.showEdit,
       onEdit = _ref.onEdit,
+      showStrikeThrough = _ref.showStrikeThrough,
       children = _ref.children,
       isPending = _ref.isPending,
-      props = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "children", "isPending"]);
+      props = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showStrikeThrough", "children", "isPending"]);
 
   var component = /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
     selected: selected,
@@ -102,7 +105,9 @@ export default function Tag(_ref) {
     showEdit: showEdit,
     showRemove: showRemove,
     onClick: onSelect
-  }, /*#__PURE__*/React.createElement(TagValueText, null, children), tagType && /*#__PURE__*/React.createElement(TagType, {
+  }, /*#__PURE__*/React.createElement(TagValueText, {
+    showStrikeThrough: showStrikeThrough
+  }, children), tagType && /*#__PURE__*/React.createElement(TagType, {
     selected: selected,
     disabled: disabled
   }, tagType), isPending && /*#__PURE__*/React.createElement(Loading, {
@@ -158,13 +163,17 @@ Tag.propTypes = {
   isPending: PropTypes.bool,
 
   /** Specifies the design theme */
-  theme: PropTypes.object
+  theme: PropTypes.object,
+
+  /** Add a strikethrough to a tag value text */
+  showStrikeThrough: PropTypes.bool
 };
 Tag.defaultProps = {
   selected: false,
   disabled: false,
   showEdit: false,
-  showRemove: false
+  showRemove: false,
+  showStrikeThrough: false
 };
 Tag.__docgenInfo = {
   "description": "The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.\n\nThe bottom row is when you want to show tags that aren't editable.",
@@ -215,6 +224,17 @@ Tag.__docgenInfo = {
       "required": false,
       "description": "Shows the remove button"
     },
+    "showStrikeThrough": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Add a strikethrough to a tag value text"
+    },
     "children": {
       "type": {
         "name": "union",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.1.20",
+  "version": "2.1.21",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",