orcs-design-system 2.0.72 → 2.0.75

package/es/components/Select/index.js

@@ -110,7 +110,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     valueContainer: function valueContainer(provided) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        padding: props.padding ? props.padding : "2px 8px"
+        padding: props.padding ? props.padding : "2px 4px"
       });
     },
     clearIndicator: function clearIndicator(provided, state) {
@@ -143,34 +143,43 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     multiValue: function multiValue(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
         opacity: state.isDisabled ? 0.7 : 1,
-        backgroundColor: props.inverted ? themeGet("colors.primaryDark")(props) : themeGet("colors.primary")(props),
+        backgroundColor: "transparent",
         color: themeGet("colors.white")(props),
-        borderRadius: themeGet("radii.2")(props),
+        alignItems: "center",
+        padding: "0 !important",
         fontSize: themeGet("fontSizes.1")(props),
         wordWrap: "break-word"
       });
     },
-    multiValueLabel: function multiValueLabel(provided) {
+    multiValueLabel: function multiValueLabel(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: props.inverted ? themeGet("colors.primaryDark")(props) : themeGet("colors.primary")(props),
+        backgroundColor: themeGet("colors.primary")(props),
         color: themeGet("colors.white"),
-        borderRadius: themeGet("radii.2")(props),
-        padding: themeGet("space.2")(props),
-        fontSize: themeGet("fontSizes.1")(props),
+        padding: state.data.isFixed ? "4px 10px 5px 10px !important" : "4px 8px 5px 10px !important",
+        fontSize: "1.3rem",
+        fontWeight: "600",
         wordWrap: "break-word",
-        whiteSpace: "wrap"
+        whiteSpace: "break-spaces",
+        borderRadius: state.data.isFixed ? "15px" : "15px 0 0 15px",
+        "&:has(> div)": {
+          backgroundColor: "transparent",
+          padding: "0 !important",
+          borderRadius: "0 !important"
+        }
       });
     },
     multiValueRemove: function multiValueRemove(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        backgroundColor: props.inverted ? themeGet("colors.primaryDark")(props) : themeGet("colors.primary")(props),
+        backgroundColor: themeGet("colors.primary")(props),
         color: themeGet("colors.white")(props),
-        borderRadius: themeGet("radii.2")(props),
-        paddingLeft: themeGet("space.0")(props),
-        paddingRight: themeGet("space.1")(props),
+        borderLeft: "solid 1px ".concat(themeGet("colors.primaryDark")(props)),
+        padding: "6.5px 6px 6.5px 5px",
         display: state.data.isFixed ? "none" : provided.display,
+        cursor: "pointer",
+        borderRadius: "0 15px 15px 0",
+        transition: themeGet("transition.transitionDefault")(props),
         "&:hover": {
-          backgroundColor: themeGet("colors.primaryDarkest")(props),
+          backgroundColor: themeGet("colors.primaryDark")(props),
           color: themeGet("colors.white")(props)
         }
       });
@@ -180,7 +189,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         opacity: state.isDisabled ? 0.7 : 1,
         backgroundColor: !state.isFocused && !props.inverted ? themeGet("colors.white")(props) : state.isFocused && !props.inverted ? themeGet("colors.primaryLightest")(props) : !state.isFocused && props.inverted ? themeGet("colors.greyDarker")(props) : themeGet("colors.primaryDark")(props),
         fontSize: themeGet("fontSizes.1")(props),
-        whiteSpace: "wrap"
+        whiteSpace: "break-spaces"
       });
     },
     placeholder: function placeholder(provided, state) {

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

@@ -66,14 +66,32 @@ export var showEditAndRemove = function showEditAndRemove() {
   }, /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     showEdit: true,
-    showRemove: true
+    showRemove: true,
+    onSelect: function onSelect() {
+      return console.log("select");
+    },
+    onEdit: function onEdit() {
+      return console.log("edit");
+    },
+    onRemove: function onRemove() {
+      return console.log("remove");
+    }
   }, "devops"), /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     showEdit: true,
     showRemove: true
   }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
     showEdit: true,
-    showRemove: true
+    showRemove: true,
+    onSelect: function onSelect() {
+      return console.log("select");
+    },
+    onEdit: function onEdit() {
+      return console.log("edit");
+    },
+    onRemove: function onRemove() {
+      return console.log("remove");
+    }
   }, "product design"), /*#__PURE__*/React.createElement(Tag, {
     showEdit: true,
     showRemove: true

package/es/components/Tag/index.js

@@ -72,13 +72,16 @@ var TagType = styled.div.withConfig({
 
 export default function Tag(_ref) {
   var selected = _ref.selected,
+      onSelect = _ref.onSelect,
       disabled = _ref.disabled,
       showRemove = _ref.showRemove,
+      onRemove = _ref.onRemove,
       theme = _ref.theme,
       tagType = _ref.tagType,
       showEdit = _ref.showEdit,
+      onEdit = _ref.onEdit,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["selected", "disabled", "showRemove", "theme", "tagType", "showEdit", "children"]);
+      props = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "children"]);
 
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -86,20 +89,23 @@ export default function Tag(_ref) {
     selected: selected,
     disabled: disabled,
     showEdit: showEdit,
-    showRemove: showRemove
+    showRemove: showRemove,
+    onClick: onSelect
   }, children, tagType ? /*#__PURE__*/React.createElement(TagType, {
     selected: selected,
     disabled: disabled
   }, tagType) : null), showEdit ? /*#__PURE__*/React.createElement(TagEdit, {
     selected: selected,
     disabled: disabled,
-    showRemove: showRemove
+    showRemove: showRemove,
+    onClick: onEdit
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "pen"],
     size: "xs"
   })) : null, showRemove ? /*#__PURE__*/React.createElement(TagRemove, {
     selected: selected,
-    disabled: disabled
+    disabled: disabled,
+    onClick: onRemove
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     size: "xs"
@@ -109,12 +115,21 @@ Tag.propTypes = {
   /** Adds selected styling to tag */
   selected: PropTypes.bool,
 
+  /** On tag selected */
+  onSelect: PropTypes.func,
+
   /** Shows the remove button */
   showRemove: PropTypes.bool,
 
+  /** On tag remove button clicked */
+  onRemove: PropTypes.func,
+
   /** Shows edit button */
   showEdit: PropTypes.bool,
 
+  /** On tag edit button clicked */
+  onEdit: PropTypes.func,
+
   /** Can add a type to a tag as text */
   tagType: PropTypes.string,
 
@@ -191,6 +206,27 @@ Tag.__docgenInfo = {
       "required": false,
       "description": "Specifies the design theme"
     },
+    "onSelect": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "On tag selected"
+    },
+    "onRemove": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "On tag remove button clicked"
+    },
+    "onEdit": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "On tag edit button clicked"
+    },
     "tagType": {
       "type": {
         "name": "string"

package/package.json

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