orcs-design-system 2.1.21 → 2.1.22

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,13 @@ 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");
+};
 defaultTag.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -204,4 +211,9 @@ withTagType.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "withTagType"
+};
+smallVariant.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "smallVariant"
 };

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) {
@@ -26,7 +28,7 @@ var TagValue = styled.button.withConfig({
 }, function (props) {
   return props.disabled ? themeGet("colors.greyLight")(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);
 }, function (props) {
@@ -45,8 +47,10 @@ var TagValue = styled.button.withConfig({
 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",
@@ -67,12 +71,14 @@ var TagRemove = styled(TagValue).withConfig({
 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);
 }, function (props) {
@@ -97,19 +103,22 @@ 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,
+      props = _objectWithoutProperties(_ref, ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showStrikeThrough", "children", "isPending", "small"]);
 
   var component = /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
     selected: selected,
     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
+    disabled: disabled,
+    small: small
   }, tagType), isPending && /*#__PURE__*/React.createElement(Loading, {
     ml: "s"
   })), showEdit && /*#__PURE__*/React.createElement(TagEdit, {
@@ -166,10 +175,14 @@ 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
 };
 Tag.defaultProps = {
   selected: false,
+  small: false,
   disabled: false,
   showEdit: false,
   showRemove: false,
@@ -191,6 +204,17 @@ 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"
+    },
     "disabled": {
       "defaultValue": {
         "value": "false",

package/package.json

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