orcs-design-system 3.1.10 → 3.1.12

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

@@ -201,13 +201,11 @@ export var smallVariant = function smallVariant() {
   }, "Agile Coach");
 };
 export var highlightedVariant = function highlightedVariant() {
-  return /*#__PURE__*/React.createElement(Spacer, {
-    m: "2px"
-  }, /*#__PURE__*/React.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     highlighted: true,
     tagType: "specialist"
-  }, "Agile Coach"));
+  }, "Agile Coach");
 };
 export var personTag = function personTag() {
   return /*#__PURE__*/React.createElement(Spacer, {

package/es/components/Tag/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "small", "highlighted", "personEntity"];
 import React from "react";
@@ -11,7 +12,9 @@ import { themeGet } from "@styled-system/theme-get";
 var TagWrapper = styled.div.withConfig({
   displayName: "Tag__TagWrapper",
   componentId: "sc-1dh2aa8-0"
-})(["", " ", " display:flex;align-items:stretch;height:100%;justify-content:center;> button{margin:0;}"], space, layout);
+})(["", " ", " display:flex;align-items:stretch;height:100%;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, function (props) {
+  return props.small ? themeGet("tagScale.tagHeightSmall") : themeGet("tagScale.tagHeightDefault");
+});
 var TagValue = styled.button.attrs(function (props) {
   return {
     "aria-pressed": props.selected
@@ -34,7 +37,7 @@ var TagValue = styled.button.attrs(function (props) {
 }, function (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.showInfo || props.showRemove) && props.small ? "2px 4px 2px 6px" : props.showEdit || props.showInfo || props.showRemove ? "3px 4px 3px 10px" : props.small ? "2px 6px 2px 6px" : "3px 10px 3px 10px";
+  return props.small ? themeGet("tagScale.tagPaddingSmall") : themeGet("tagScale.tagPaddingDefault");
 }, function (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) {
@@ -66,7 +69,7 @@ var TagActionIconWrapper = styled(TagValue).withConfig({
 })(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], function (props) {
   return props.showRemove ? "0" : "0 15px 15px 0";
 }, function (props) {
-  return props.showRemove ? "0 7px 0 7px" : props.showInfo ? "0 12px 0 11px" : "0 8px 0 8px";
+  return props.showRemove && props.small ? "0 5px 0 6px" : props.showRemove ? "0 7px 0 7px" : props.showInfo && props.small ? "0 10px 0 9px" : props.showInfo ? "0 12px 0 11px" : props.small ? "0 6px 0 6px" : "0 8px 0 8px";
 }, function (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));
@@ -77,7 +80,9 @@ var TagActionIconWrapper = styled(TagValue).withConfig({
 var TagRemoveIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagRemoveIconWrapper",
   componentId: "sc-1dh2aa8-4"
-})(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;}", ""], function (props) {
+})(["border-radius:0 15px 15px 0;padding:", ";&:focus{z-index:2;}", ""], function (props) {
+  return props.small ? "0 8px 3px 7px" : "0 10px 3px 9px";
+}, function (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) {
@@ -90,7 +95,7 @@ var TagType = styled.div.withConfig({
 })(["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 props.small ? "6px" : "10px";
 }, function (props) {
-  return props.small ? themeGet("space.1")(props) : themeGet("space.2")(props);
+  return props.small ? themeGet("space.2")(props) : themeGet("space.2")(props);
 }, function (props) {
   return themeGet("radii.1")(props);
 }, function (props) {
@@ -104,13 +109,13 @@ var TagAvatar = styled(Avatar).withConfig({
   displayName: "Tag__TagAvatar",
   componentId: "sc-1dh2aa8-6"
 })(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;margin-right:", ";margin-left:", ";font-size:", ";background-color:", ";color:", ";}"], function (props) {
-  return props.small ? "20px" : "22px";
+  return props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault");
 }, function (props) {
-  return props.small ? "20px" : "22px";
+  return props.small ? themeGet("tagScale.tagAvatarSizeSmall") : themeGet("tagScale.tagAvatarSizeDefault");
 }, themeGet("space.xs"), function (props) {
-  return props.small ? "-4px" : "-7px";
+  return props.small ? themeGet("tagScale.tagAvatarMarginLeftSmall") : themeGet("tagScale.tagAvatarMarginLeftDefault");
 }, function (props) {
-  return props.small ? "0.9rem" : "1rem";
+  return props.small ? themeGet("tagScale.tagAvatarFontSizeSmall") : themeGet("tagScale.tagAvatarFontSizeDefault");
 }, function (props) {
   return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? "rgba(0,0,0,0.2)" : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
 }, function (props) {
@@ -142,7 +147,9 @@ export default function Tag(_ref) {
     highlighted = _ref.highlighted,
     personEntity = _ref.personEntity,
     props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
+  var component = /*#__PURE__*/React.createElement(TagWrapper, _extends({
+    small: small
+  }, props), /*#__PURE__*/React.createElement(TagValue, {
     selected: selected,
     highlighted: highlighted,
     disabled: disabled,
@@ -150,7 +157,9 @@ export default function Tag(_ref) {
     showInfo: showInfo,
     showRemove: showRemove,
     onClick: onSelect,
-    small: small
+    small: small,
+    "aria-label": "Navigate to tag",
+    title: "Navigate to tag"
   }, personEntity && /*#__PURE__*/React.createElement(TagAvatar, {
     selected: selected,
     highlighted: highlighted,
@@ -175,7 +184,10 @@ export default function Tag(_ref) {
     highlighted: highlighted,
     disabled: disabled,
     showRemove: showRemove,
-    onClick: onEdit
+    onClick: onEdit,
+    small: small,
+    "aria-label": "Edit tag",
+    title: "Edit tag"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "pen"],
     size: "xs"
@@ -184,7 +196,10 @@ export default function Tag(_ref) {
     highlighted: highlighted,
     disabled: disabled,
     onClick: onInfo,
-    showInfo: showInfo
+    showInfo: showInfo,
+    small: small,
+    "aria-label": "View tag details",
+    title: "View tag details"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "info"],
     size: "xs"
@@ -192,7 +207,10 @@ export default function Tag(_ref) {
     selected: selected,
     highlighted: highlighted,
     disabled: disabled,
-    onClick: onRemove
+    onClick: onRemove,
+    small: small,
+    "aria-label": "Remove tag",
+    title: "Remove tag"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: ["fas", "times"],
     size: "xs"

package/es/systemThemeCollapsed.js

@@ -235,6 +235,18 @@ export var appScale = {
   inputHeightDefault: "32px",
   inputHeightLarge: "52px"
 };
+export var tagScale = {
+  tagHeightDefault: "22px",
+  tagHeightSmall: "18px",
+  tagPaddingDefault: "0 8px",
+  tagPaddingSmall: "0 6px",
+  tagAvatarSizeDefault: "16px",
+  tagAvatarSizeSmall: "14px",
+  tagAvatarMarginLeftDefault: "-6px",
+  tagAvatarMarginLeftSmall: "-5px",
+  tagAvatarFontSizeDefault: "0.8rem",
+  tagAvatarFontSizeSmall: "0.7rem"
+};
 export default {
   fonts: fonts,
   font: font,
@@ -251,5 +263,6 @@ export default {
   breakpoints: breakpoints,
   transition: transition,
   zIndices: zIndices,
-  appScale: appScale
+  appScale: appScale,
+  tagScale: tagScale
 };

package/es/systemtheme.js

@@ -234,6 +234,18 @@ export var appScale = {
   inputHeightDefault: "38px",
   inputHeightLarge: "58px"
 };
+export var tagScale = {
+  tagHeightDefault: "28px",
+  tagHeightSmall: "24px",
+  tagPaddingDefault: "0 10px",
+  tagPaddingSmall: "0 8px",
+  tagAvatarSizeDefault: "20px",
+  tagAvatarSizeSmall: "18px",
+  tagAvatarMarginLeftDefault: "-7px",
+  tagAvatarMarginLeftSmall: "-6px",
+  tagAvatarFontSizeDefault: "0.9rem",
+  tagAvatarFontSizeSmall: "0.8rem"
+};
 export default {
   fonts: fonts,
   font: font,
@@ -250,5 +262,6 @@ export default {
   breakpoints: breakpoints,
   transition: transition,
   zIndices: zIndices,
-  appScale: appScale
+  appScale: appScale,
+  tagScale: tagScale
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.10",
+  "version": "3.1.12",
   "engines": {
     "node": "18.17.1"
   },