orcs-design-system 3.3.45 → 3.3.46

package/es/components/Avatar/index.js

@@ -124,7 +124,7 @@ const Shape = styled("div").withConfig({
   height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   flex: "0 0 auto",
-  background: `linear-gradient(135deg, ${themeGet("colors.primaryLightest")(props)}, ${themeGet("colors.primaryLight")(props)})`,
+  background: props.gradient ? props.gradient : `linear-gradient(135deg, ${themeGet("colors.primaryLightest")(props)}, ${themeGet("colors.primaryLight")(props)})`,
   color: themeGet("colors.white")(props),
   border: "0",
   display: "flex",
@@ -353,8 +353,16 @@ const HeaderAvatarShape = styled("div").withConfig({
 })(_ref7 => {
   let {
     $size,
-    $shape
+    $shape,
+    $gradient
   } = _ref7;
+  const backgroundStyles = $gradient ? {
+    backgroundImage: $gradient,
+    backgroundSize: "cover",
+    backgroundPosition: "center center"
+  } : {
+    background: "#e6e6e6"
+  };
   return {
     width: $size,
     height: $size,
@@ -362,7 +370,7 @@ const HeaderAvatarShape = styled("div").withConfig({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    background: "#e6e6e6",
+    ...backgroundStyles,
     color: "#222",
     fontWeight: 600,
     fontSize: `calc(${$size} / 2.5)`,
@@ -446,6 +454,7 @@ const Avatar = _ref0 => {
   let {
     sizing,
     image,
+    gradient,
     imageAlt,
     initials,
     title,
@@ -494,6 +503,7 @@ const Avatar = _ref0 => {
     }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
       $size: size,
       $shape: shape,
+      $gradient: gradient,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "users"]
       }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
@@ -567,6 +577,7 @@ const Avatar = _ref0 => {
       type: type,
       className: type == "inverted" ? "inverted" : "",
       uppercase: uppercase,
+      gradient: gradient,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
         icon: ["fas", "users"]
       }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {

package/es/components/SideNavV2/components/BaseSection.js

@@ -26,7 +26,8 @@ export const AvatarLink = _ref => {
     name,
     link,
     shape = "square",
-    showName
+    showName,
+    gradient
   } = _ref;
   return /*#__PURE__*/_jsxs(Link, {
     to: link,
@@ -34,7 +35,8 @@ export const AvatarLink = _ref => {
     children: [/*#__PURE__*/_jsx(Avatar, {
       image: avatar,
       customSize: "24px",
-      shape: shape
+      shape: shape,
+      gradient: gradient
     }), showName && /*#__PURE__*/_jsx(ItemName, {
       children: name
     })]
@@ -45,7 +47,8 @@ AvatarLink.propTypes = {
   name: PropTypes.string.isRequired,
   link: PropTypes.string.isRequired,
   shape: PropTypes.string,
-  showName: PropTypes.bool
+  showName: PropTypes.bool,
+  gradient: PropTypes.string
 };
 const BaseSection = _ref2 => {
   let {
@@ -173,6 +176,13 @@ AvatarLink.__docgenInfo = {
         "name": "bool"
       },
       "required": false
+    },
+    "gradient": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
     }
   }
 };

package/es/components/SideNavV2/sections/SideNavCurrentViewSection.js

@@ -38,10 +38,26 @@ const CurrentViewContent = _ref => {
     subNav,
     isExpanded,
     avatar,
-    shape
+    shape,
+    gradient
   } = _ref;
   const link = subNav?.[0]?.link;
   const hasValidLink = Boolean(link);
+  const avatarAndLabelMarkup = /*#__PURE__*/_jsxs(Flex, {
+    flexWrap: "nowrap",
+    gap: "s",
+    alignItems: "center",
+    children: [/*#__PURE__*/_jsx(Avatar, {
+      image: avatar,
+      customSize: "24px",
+      shape: shape,
+      border: "1px solid",
+      gradient: gradient
+    }), /*#__PURE__*/_jsx(H6, {
+      fontWeight: "bold",
+      children: name
+    })]
+  });
   return /*#__PURE__*/_jsxs(Flex, {
     flexDirection: "column",
     gap: "s",
@@ -57,34 +73,8 @@ const CurrentViewContent = _ref => {
       alignItems: "center",
       children: [hasValidLink ? /*#__PURE__*/_jsx(UnstyledNavLink, {
         to: link,
-        children: /*#__PURE__*/_jsxs(Flex, {
-          flexWrap: "nowrap",
-          gap: "s",
-          alignItems: "center",
-          children: [/*#__PURE__*/_jsx(Avatar, {
-            image: avatar,
-            customSize: "24px",
-            shape: shape,
-            border: "1px solid"
-          }), /*#__PURE__*/_jsx(H6, {
-            fontWeight: "bold",
-            children: name
-          })]
-        })
-      }) : /*#__PURE__*/_jsxs(Flex, {
-        flexWrap: "nowrap",
-        gap: "s",
-        alignItems: "center",
-        children: [/*#__PURE__*/_jsx(Avatar, {
-          image: avatar,
-          customSize: "24px",
-          shape: shape,
-          border: "1px solid"
-        }), /*#__PURE__*/_jsx(H6, {
-          fontWeight: "bold",
-          children: name
-        })]
-      }), badge]
+        children: avatarAndLabelMarkup
+      }) : avatarAndLabelMarkup, badge]
     }), /*#__PURE__*/_jsx(SubNavList, {
       children: subNav?.map(_ref2 => {
         let {
@@ -111,7 +101,8 @@ const SideNavCurrentViewSection = _ref3 => {
     isExpanded,
     avatar,
     shape,
-    isSmallScreen
+    isSmallScreen,
+    gradient
   } = _ref3;
   // Don't render anything if there's no valid name
   if (!name) {
@@ -123,7 +114,8 @@ const SideNavCurrentViewSection = _ref3 => {
     subNav: subNav,
     isExpanded: isExpanded,
     avatar: avatar,
-    shape: shape
+    shape: shape,
+    gradient: gradient
   });
   return /*#__PURE__*/_jsxs(Flex, {
     isExpanded: isExpanded,
@@ -138,7 +130,8 @@ const SideNavCurrentViewSection = _ref3 => {
         image: avatar,
         customSize: "24px",
         shape: shape,
-        isSmallScreen: isSmallScreen
+        isSmallScreen: isSmallScreen,
+        gradient: gradient
       })
     }), isExpanded && !isSmallScreen && currentViewMarkup]
   });

package/es/components/SideNavV2/sections/SideNavPinnedSection.js

@@ -16,7 +16,8 @@ const SideNavPinnedSection = _ref => {
       name,
       link,
       shape,
-      onUnpin
+      onUnpin,
+      gradient
     } = item;
     return /*#__PURE__*/_jsx(Item, {
       children: isExpanded ? /*#__PURE__*/_jsxs(_Fragment, {
@@ -25,7 +26,8 @@ const SideNavPinnedSection = _ref => {
           name: name,
           link: link,
           shape: shape,
-          showName: true
+          showName: true,
+          gradient: gradient
         }), /*#__PURE__*/_jsx(Popover, {
           text: "Unpin item",
           direction: "right",
@@ -54,7 +56,8 @@ const SideNavPinnedSection = _ref => {
           name: name,
           link: link,
           shape: shape,
-          showName: false
+          showName: false,
+          gradient: gradient
         })
       })
     }, name);

package/es/components/SideNavV2/sections/SideNavTeamsSection.js

@@ -12,7 +12,8 @@ const SideNavTeamsSection = _ref => {
     const {
       avatar,
       name,
-      link
+      link,
+      gradient
     } = team;
     return /*#__PURE__*/_jsx(Item, {
       children: isExpanded ? /*#__PURE__*/_jsx(AvatarLink, {
@@ -20,7 +21,8 @@ const SideNavTeamsSection = _ref => {
         name: name,
         link: link,
         shape: "square",
-        showName: true
+        showName: true,
+        gradient: gradient
       }) : /*#__PURE__*/_jsx(Popover, {
         text: name,
         direction: "right",
@@ -30,7 +32,8 @@ const SideNavTeamsSection = _ref => {
           name: name,
           link: link,
           shape: "square",
-          showName: false
+          showName: false,
+          gradient: gradient
         })
       })
     }, name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.45",
+  "version": "3.3.46",
   "engines": {
     "node": "20.12.2"
   },