orcs-design-system 2.1.21 → 2.1.23

package/es/components/Badge/index.js

@@ -24,8 +24,9 @@ var Item = styled("span").withConfig({
     fontWeight: themeGet("fontWeights.2")(props),
     display: "inline-block",
     position: "relative",
-    py: 2,
-    px: 3,
+    pt: themeGet("space.2")(props),
+    pb: "calc(".concat(themeGet("space.2")(props), " + 1px)"),
+    px: themeGet("space.3")(props),
     cursor: "default",
     borderRadius: 1,
     color: themeGet("colors.greyDarkest")(props),

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

@@ -165,6 +165,20 @@ export var withTagType = function withTagType() {
     tagType: "skill"
   }, "product design"));
 };
+export var smallVariant = function smallVariant() {
+  return /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    tagType: "specialist",
+    small: true
+  }, "Agile Coach");
+};
+export var highlightedVariant = function highlightedVariant() {
+  return /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    highlighted: true,
+    tagType: "specialist"
+  }, "Agile Coach");
+};
 defaultTag.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -204,4 +218,14 @@ withTagType.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "withTagType"
+};
+smallVariant.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "smallVariant"
+};
+highlightedVariant.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "highlightedVariant"
 };

package/es/components/Tag/index.js

@@ -13,8 +13,10 @@ 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:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], function (props) {
+})(["-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:", ";display:flex;align-items:center;flex-wrap:nowrap;font-size:", ";font-weight:", ";white-space:nowrap;position:relative;z-index:1;transition:", ";cursor:", ";border-radius:", ";border:solid 1px ", ";padding:", ";background-color:", ";color:", ";", ""], function (props) {
   return themeGet("fontSizes.1")(props);
+}, function (props) {
+  return props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props);
 }, function (props) {
   return themeGet("fontWeights.2")(props);
 }, function (props) {
@@ -24,29 +26,33 @@ var TagValue = styled.button.withConfig({
 }, function (props) {
   return props.showEdit || props.showRemove ? "15px 0 0 15px" : "15px";
 }, function (props) {
-  return props.disabled ? themeGet("colors.greyLight")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : themeGet("colors.primary")(props);
 }, function (props) {
-  return props.showEdit || props.showRemove ? "3px 4px 4px 10px" : "3px 10px 4px 10px";
+  return props.showEdit || props.showRemove ? "3px 4px 4px 10px" : props.small ? "calc(".concat(themeGet("space.2")(props), " - 1px)") + " " + themeGet("space.3")(props) + " " + themeGet("space.2")(props) + " " + themeGet("space.3")(props) : "3px 10px 4px 10px";
 }, function (props) {
-  return props.selected ? themeGet("colors.primary")(props) : props.disabled ? themeGet("colors.greyLighter")(props) : themeGet("colors.white")(props);
+  return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
 }, function (props) {
-  return props.selected ? themeGet("colors.white")(props) : props.disabled ? themeGet("colors.greyDarker")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.greyDarker")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
 }, function (props) {
-  return props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:solid 1px ", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], themeGet("colors.primaryDark")(props), function (props) {
+  return props.disabled ? css([""]) : css(["&:hover,&:focus{outline:0;border:", ";color:", ";background-color:", ";div{color:", ";}div[class*=\"TagType\"]{background-color:", ";}}"], function (props) {
+    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
+  }, function (props) {
     return props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
   }, function (props) {
-    return props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
+    return props.selected && props.highlighted ? themeGet("colors.warningDarker")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
   }, function (props) {
     return props.selected ? themeGet("colors.white")(props) : themeGet("colors.primaryDark")(props);
   }, function (props) {
-    return props.selected ? themeGet("colors.primaryDarker")(props) : themeGet("colors.primaryLighter")(props);
+    return props.selected && props.highlighted ? themeGet("colors.warningDarkest")(props) : props.selected ? themeGet("colors.primaryDarker")(props) : themeGet("colors.primaryLighter")(props);
   });
 });
 var TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
-})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;"], function (props) {
+})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";"], function (props) {
   return props.showStrikeThrough ? "line-through" : "none";
+}, function (props) {
+  return themeGet("fontSizes.1")(props);
 });
 var TagEdit = styled(TagValue).withConfig({
   displayName: "Tag__TagEdit",
@@ -56,27 +62,37 @@ var TagEdit = styled(TagValue).withConfig({
 }, function (props) {
   return props.showRemove ? "2px 7px 5px 7px" : "2px 8px 5px 8px";
 }, function (props) {
-  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}"], themeGet("colors.primaryDark")(props), themeGet("colors.primaryDark")(props)) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
+  return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
+    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
+  }, function (props) {
+    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
+  }) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
 });
 var TagRemove = styled(TagValue).withConfig({
   displayName: "Tag__TagRemove",
   componentId: "sc-1dh2aa8-4"
 })(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;}", ""], function (props) {
-  return props.selected ? css(["border-left:solid 1px ", ";&:hover{border-left:solid 1px ", ";}"], themeGet("colors.primaryDark")(props), themeGet("colors.primaryDark")(props)) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
+  return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
+    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
+  }, function (props) {
+    return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
+  }) : css(["border-left:0;&:hover,&:focus{background-color:", ";border-left:0;}"], themeGet("colors.primaryLightest")(props));
 });
 var TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-5"
-})(["text-transform:uppercase;margin-left:", ";padding:3px;line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
+})(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
   return themeGet("space.s")(props);
+}, function (props) {
+  return props.small ? themeGet("space.1")(props) : themeGet("space.2")(props);
 }, function (props) {
   return themeGet("radii.1")(props);
 }, function (props) {
-  return themeGet("fontSizes.0")(props);
+  return props.small ? "1rem" : themeGet("fontSizes.0")(props);
 }, function (props) {
-  return props.selected ? themeGet("colors.primaryDark")(props) : props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.primaryLightest")(props);
+  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? themeGet("colors.black20")(props) : props.selected ? themeGet("colors.primaryDark")(props) : themeGet("colors.primaryLightest")(props);
 }, function (props) {
-  return props.selected ? themeGet("colors.white")(props) : props.disabled ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
 });
 /**
  * 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.
@@ -97,23 +113,30 @@ export default function Tag(_ref) {
       showStrikeThrough = _ref.showStrikeThrough,
       children = _ref.children,
       isPending = _ref.isPending,
-      props = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showStrikeThrough", "children", "isPending"]);
+      small = _ref.small,
+      highlighted = _ref.highlighted,
+      props = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showStrikeThrough", "children", "isPending", "small", "highlighted"]);
 
   var component = /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
     selected: selected,
+    highlighted: highlighted,
     disabled: disabled,
     showEdit: showEdit,
     showRemove: showRemove,
-    onClick: onSelect
+    onClick: onSelect,
+    small: small
   }, /*#__PURE__*/React.createElement(TagValueText, {
     showStrikeThrough: showStrikeThrough
   }, children), tagType && /*#__PURE__*/React.createElement(TagType, {
     selected: selected,
-    disabled: disabled
+    highlighted: highlighted,
+    disabled: disabled,
+    small: small
   }, tagType), isPending && /*#__PURE__*/React.createElement(Loading, {
     ml: "s"
   })), showEdit && /*#__PURE__*/React.createElement(TagEdit, {
     selected: selected,
+    highlighted: highlighted,
     disabled: disabled,
     showRemove: showRemove,
     onClick: onEdit
@@ -122,6 +145,7 @@ export default function Tag(_ref) {
     size: "xs"
   })), showRemove && /*#__PURE__*/React.createElement(TagRemove, {
     selected: selected,
+    highlighted: highlighted,
     disabled: disabled,
     onClick: onRemove
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -166,10 +190,18 @@ Tag.propTypes = {
   theme: PropTypes.object,
 
   /** Add a strikethrough to a tag value text */
-  showStrikeThrough: PropTypes.bool
+  showStrikeThrough: PropTypes.bool,
+
+  /** Applies the small variant styles */
+  small: PropTypes.bool,
+
+  /** Applies a highlighted style and colour to the tag */
+  highlighted: PropTypes.bool
 };
 Tag.defaultProps = {
   selected: false,
+  small: false,
+  highlighted: false,
   disabled: false,
   showEdit: false,
   showRemove: false,
@@ -191,6 +223,28 @@ Tag.__docgenInfo = {
       "required": false,
       "description": "Adds selected styling to tag"
     },
+    "small": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Applies the small variant styles"
+    },
+    "highlighted": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Applies a highlighted style and colour to the tag"
+    },
     "disabled": {
       "defaultValue": {
         "value": "false",

package/es/systemThemeCollapsed.js

@@ -167,8 +167,8 @@ export var colors = {
   warningLighter: lighten(0.25, warning),
   warningLightest: lighten(0.3, warning),
   warningDark: darken(0.05, warningSaturated),
-  warningDarker: darken(0.2, warningSaturated),
-  warningDarkest: darken(0.3, warningSaturated),
+  warningDarker: darken(0.15, warningSaturated),
+  warningDarkest: darken(0.25, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),

package/es/systemtheme.js

@@ -166,8 +166,8 @@ export var colors = {
   warningLighter: lighten(0.25, warning),
   warningLightest: lighten(0.3, warning),
   warningDark: darken(0.05, warningSaturated),
-  warningDarker: darken(0.2, warningSaturated),
-  warningDarkest: darken(0.3, warningSaturated),
+  warningDarker: darken(0.15, warningSaturated),
+  warningDarkest: darken(0.25, warningSaturated),
   warning10: rgba(warning, 0.1),
   warning20: rgba(warning, 0.2),
   warning30: rgba(warning, 0.3),

package/package.json

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