orcs-design-system 2.0.71 → 2.0.74

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,38 @@ 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"
       });
     },
     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 +184,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

@@ -13,18 +13,18 @@ var TagWrapper = styled.div.withConfig({
 var TagValue = styled.button.withConfig({
   displayName: "Tag__TagValue",
   componentId: "sc-1dh2aa8-1"
-})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:1.4rem;font-weight:600;white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], themeGet("transition.transitionDefault"), function (props) {
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;display:flex;align-items:center;flex-wrap:nowrap;font-size:1.3rem;font-weight:600;white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", " &:focus{outline:0;z-index:2;box-shadow:", ";}"], themeGet("transition.transitionDefault"), function (props) {
   return props.disabled ? "default" : "pointer";
 }, function (props) {
   return props.showEdit || props.showRemove ? "15px 0 0 15px" : "15px";
 }, function (props) {
-  return props.disabled ? themeGet("colors.greyDark") : themeGet("colors.primary");
+  return props.disabled ? themeGet("colors.greyLight") : themeGet("colors.primary");
 }, function (props) {
-  return props.showEdit || props.showRemove ? "3px 6px 4px 12px" : "3px 12px 4px 12px";
+  return props.showEdit || props.showRemove ? "3px 4px 4px 10px" : "3px 10px 4px 10px";
 }, function (props) {
-  return props.selected ? themeGet("colors.primary") : props.disabled ? themeGet("colors.greyDark") : themeGet("colors.white");
+  return props.selected ? themeGet("colors.primary") : props.disabled ? themeGet("colors.greyLighter") : themeGet("colors.white");
 }, function (props) {
-  return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
+  return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.greyDarker") : themeGet("colors.primary");
 }, function (props) {
   return props.disabled ? css([""]) : css(["&:hover{border:solid 1px ", ";color:", ";background-color:", ";div{color:", ";}}"], themeGet("colors.primaryDark"), function (props) {
     return props.selected ? themeGet("colors.white") : themeGet("colors.primaryDark");
@@ -39,8 +39,10 @@ var TagValue = styled.button.withConfig({
 var TagEdit = styled(TagValue).withConfig({
   displayName: "Tag__TagEdit",
   componentId: "sc-1dh2aa8-2"
-})(["border-radius:", ";padding:2px 10px 5px 10px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
+})(["border-radius:", ";padding:", ";&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
   return props.showRemove ? "0" : "0 15px 15px 0";
+}, function (props) {
+  return props.showRemove ? "2px 7px 5px 7px" : "2px 8px 5px 8px";
 }, themeGet("colors.primary30"), function (props) {
   return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), function (props) {
     return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
@@ -49,7 +51,7 @@ var TagEdit = styled(TagValue).withConfig({
 var TagRemove = styled(TagValue).withConfig({
   displayName: "Tag__TagRemove",
   componentId: "sc-1dh2aa8-3"
-})(["border-radius:0 15px 15px 0;padding:2px 12px 5px 12px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], themeGet("colors.primary30"), function (props) {
+})(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], themeGet("colors.primary30"), function (props) {
   return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}&:focus{box-shadow:", ";}"], themeGet("colors.primaryDark"), themeGet("colors.primaryDark"), function (props) {
     return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
   }) : css(["border-left:0;&:hover{border-left:0;}"]);
@@ -57,8 +59,8 @@ var TagRemove = styled(TagValue).withConfig({
 var TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-4"
-})(["text-transform:uppercase;margin-left:", ";padding:3px;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], themeGet("space.s"), themeGet("radii.1"), themeGet("fontSizes.0"), function (props) {
-  return props.selected ? themeGet("colors.primaryDark") : props.disabled ? themeGet("colors.greyDarker") : themeGet("colors.primaryLightest");
+})(["text-transform:uppercase;margin-left:", ";padding:3px;font-size:1.2rem;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], themeGet("space.s"), themeGet("radii.1"), themeGet("fontSizes.0"), function (props) {
+  return props.selected ? themeGet("colors.primaryDark") : props.disabled ? themeGet("colors.grey") : themeGet("colors.primaryLightest");
 }, function (props) {
   return props.selected ? themeGet("colors.white") : props.disabled ? themeGet("colors.white") : themeGet("colors.primary");
 });
@@ -70,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
@@ -84,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"
@@ -107,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,
 
@@ -189,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.71",
+  "version": "2.0.74",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",