orcs-design-system 3.5.10 → 3.5.12

package/es/components/Avatar/CroppedImage.js

@@ -76,8 +76,8 @@ export const CroppedImageWrapper = /*#__PURE__*/styled(CroppedImage).withConfig(
   width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   flex: "0 0 auto",
-  backgroundColor: themeGet("colors.greyLighter")(props),
-  border: "0",
+  backgroundColor: themeGet("colors.white")(props),
+  border: "solid 1px " + themeGet("colors.greyLighter")(props),
   display: "block",
   borderRadius: "50%",
   overflow: "hidden"
@@ -121,7 +121,7 @@ export const HeaderAvatarCroppedImage = /*#__PURE__*/styled(CroppedImage).withCo
     width: $size,
     height: $size,
     transition: "width 200ms ease-in-out, height 200ms ease-in-out",
-    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
     overflow: "hidden",
     display: "block"
   };

package/es/components/Avatar/index.js

@@ -90,11 +90,11 @@ const Image = /*#__PURE__*/styled("img").withConfig({
   width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
   flex: "0 0 auto",
-  backgroundColor: themeGet("colors.greyLighter")(props),
+  backgroundColor: themeGet("colors.white")(props),
   objectFit: "cover",
   objectPosition: "center",
   objectRepeat: "no-repeat",
-  border: "0",
+  border: "solid 1px " + themeGet("colors.greyLighter")(props),
   display: "block",
   borderRadius: "50%"
 }), props => variant({
@@ -279,48 +279,56 @@ const LocalTime = /*#__PURE__*/styled(Popover).withConfig({
   componentId: "sc-1wtet2j-6"
 })(["position:absolute;top:0;left:0;"]);
 
-// HeaderAvatar specific styles
-const HeaderAvatarWrapper = /*#__PURE__*/styled("div").withConfig({
-  displayName: "HeaderAvatarWrapper",
-  componentId: "sc-1wtet2j-7"
-})(_ref2 => {
+// HeaderAvatar: frame = white background + padding (the "border") + shadow; fixed outer size 150px (large) / 65px (small)
+const HEADER_AVATAR_OUTER = {
+  large: "150px",
+  small: "65px"
+};
+const HEADER_AVATAR_PADDING = {
+  large: 6,
+  small: 4
+};
+const headerAvatarFrameStyles = _ref2 => {
   let {
-    $size,
-    $shape
+    $shape,
+    $sizing
   } = _ref2;
+  const padding = $sizing === "large" ? HEADER_AVATAR_PADDING.large : HEADER_AVATAR_PADDING.small;
   return {
-    position: "relative",
+    boxSizing: "border-box",
+    width: $sizing === "large" ? HEADER_AVATAR_OUTER.large : HEADER_AVATAR_OUTER.small,
+    height: $sizing === "large" ? HEADER_AVATAR_OUTER.large : HEADER_AVATAR_OUTER.small,
+    padding: "".concat(padding, "px"),
+    background: "#fff",
+    boxShadow: "0px 3px 6px rgba(0,0,0,0.15)",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    width: $size,
-    height: $size,
-    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
-    boxShadow: "0px 3px 6px rgba(0,0,0,0.15)",
-    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
-    background: "transparent"
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out"
   };
-}, avatarStyles);
-const HeaderAvatarBorder = /*#__PURE__*/styled("div").withConfig({
-  displayName: "HeaderAvatarBorder",
+};
+const HeaderAvatarFrame = /*#__PURE__*/styled("div").withConfig({
+  displayName: "HeaderAvatarFrame",
+  componentId: "sc-1wtet2j-7"
+})(headerAvatarFrameStyles, avatarStyles);
+const HeaderAvatarInner = /*#__PURE__*/styled("div").withConfig({
+  displayName: "HeaderAvatarInner",
   componentId: "sc-1wtet2j-8"
 })(_ref3 => {
   let {
     $size,
-    $shape,
-    $sizing
+    $shape
   } = _ref3;
   return {
     width: $size,
     height: $size,
-    transition: "width 200ms ease-in-out, height 200ms ease-in-out, border-width 200ms ease-in-out",
-    border: $sizing === "large" ? "6px solid #fff" : "4px solid #fff",
-    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
     overflow: "hidden",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    background: "#fff"
+    transition: "width 200ms ease-in-out, height 200ms ease-in-out"
   };
 });
 const HeaderAvatarLoading = /*#__PURE__*/styled("div").withConfig({
@@ -352,7 +360,7 @@ const HeaderAvatarImage = /*#__PURE__*/styled("img").withConfig({
     objectFit: "cover",
     objectPosition: "center",
     objectRepeat: "no-repeat",
-    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
+    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
     display: "block"
   };
 });
@@ -383,7 +391,7 @@ const HeaderAvatarShape = /*#__PURE__*/styled("div").withConfig({
     color: "#fff",
     fontWeight: 600,
     fontSize: "calc(".concat($size, " / 2.5)"),
-    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0"
+    borderRadius: $shape === "circle" || !$shape ? "50%" : "0"
   }, $shape === "hexagon" && {
     clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
   }), $shape === "tag" && {
@@ -395,18 +403,19 @@ const HeaderAvatarAction = /*#__PURE__*/styled("button").withConfig({
   componentId: "sc-1wtet2j-12"
 })(_ref8 => {
   let {
-    $shape
+    $shape,
+    $sizing
   } = _ref8;
-  return _objectSpread(_objectSpread(_objectSpread({
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, headerAvatarFrameStyles({
+    $shape,
+    $sizing
+  })), {}, {
     cursor: "pointer",
-    padding: "0",
-    background: "none",
     border: "none",
     outline: "none",
     appearance: "none",
     position: "relative",
-    zIndex: "5",
-    borderRadius: $shape === "circle" || !$shape ? "50%" : "6px"
+    zIndex: "5"
   }, $shape === "hexagon" && {
     clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
   }), $shape === "tag" && {
@@ -418,7 +427,7 @@ const HeaderAvatarAction = /*#__PURE__*/styled("button").withConfig({
       }
     }
   });
-});
+}, avatarStyles);
 const IconContainer = /*#__PURE__*/styled("div").withConfig({
   displayName: "IconContainer",
   componentId: "sc-1wtet2j-13"
@@ -426,22 +435,17 @@ const IconContainer = /*#__PURE__*/styled("div").withConfig({
   let {
     $shape,
     $sizing,
-    $hasImage
+    $size
   } = _ref9;
-  // Simplified width calculation (no change based on image presence)
-  const width = $sizing === "large" ? "calc(100% - 12px)" : "calc(100% - 8px)";
-
-  // Height calculation with reduction when no image
-  const heightReduction = $sizing === "large" ? $hasImage ? 17 : 12 : $hasImage ? 12 : 8;
-  const height = "calc(100% - ".concat(heightReduction, "px)");
+  const padding = $sizing === "large" ? 6 : 4;
   return _objectSpread(_objectSpread({
     opacity: "0",
     transition: "opacity 0.2s ease-in-out",
     position: "absolute",
-    top: $sizing === "large" ? "6px" : "4px",
-    left: $sizing === "large" ? "6px" : "4px",
-    width,
-    height,
+    top: "".concat(padding, "px"),
+    left: "".concat(padding, "px"),
+    width: $size,
+    height: $size,
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -496,31 +500,21 @@ const Avatar = _ref0 => {
 
   // HeaderAvatar logic
   if (headerAvatar) {
-    var _theme$avatarScale;
-    // Sizing logic
-    let size = (theme === null || theme === void 0 || (_theme$avatarScale = theme.avatarScale) === null || _theme$avatarScale === void 0 ? void 0 : _theme$avatarScale.headerAvatarDefault) || "65px";
-    if (sizing === "large") {
-      var _theme$avatarScale2;
-      size = (theme === null || theme === void 0 || (_theme$avatarScale2 = theme.avatarScale) === null || _theme$avatarScale2 === void 0 ? void 0 : _theme$avatarScale2.headerAvatarLarge) || "150px";
-    }
-    if (customSize) {
-      size = resolveCustomSize(customSize, {
-        theme
-      }) || customSize;
-    }
+    // Fixed outer size 150px (large) / 65px (small); inner = outer minus padding
+    const innerSize = sizing === "large" ? "138px" : "57px";
     const imgContent = image ? croppedAreaPercent ? /*#__PURE__*/_jsx(HeaderAvatarCroppedImage, {
       src: image,
       alt: alt,
       croppedAreaPercent: croppedAreaPercent,
-      $size: size,
+      $size: innerSize,
       $shape: shape
     }) : /*#__PURE__*/_jsx(HeaderAvatarImage, {
       src: image,
       alt: alt,
-      $size: size,
+      $size: innerSize,
       $shape: shape
     }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
-      $size: size,
+      $size: innerSize,
       $shape: shape,
       $gradient: gradient || fallbackGradient,
       children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
@@ -537,18 +531,13 @@ const Avatar = _ref0 => {
         color: defaultIconColor
       })
     });
-    const avatarContent = /*#__PURE__*/_jsx(HeaderAvatarWrapper, _objectSpread(_objectSpread({}, props), {}, {
-      $size: size,
+    const innerContent = /*#__PURE__*/_jsx(HeaderAvatarInner, {
+      $size: innerSize,
       $shape: shape,
-      children: /*#__PURE__*/_jsx(HeaderAvatarBorder, {
-        $size: size,
-        $shape: shape,
-        $sizing: sizing,
-        children: loading ? /*#__PURE__*/_jsx(HeaderAvatarLoading, {
-          $size: size
-        }) : imgContent
-      })
-    }));
+      children: loading ? /*#__PURE__*/_jsx(HeaderAvatarLoading, {
+        $size: innerSize
+      }) : imgContent
+    });
     if (onClick && !loading) {
       return /*#__PURE__*/_jsx(Popover, {
         direction: "right",
@@ -557,7 +546,7 @@ const Avatar = _ref0 => {
         text: shape === "circle" ? "Upload profile picture" : "Change image",
         headerAvatarSizing: sizing,
         tabIndex: "-1",
-        children: /*#__PURE__*/_jsxs(HeaderAvatarAction, {
+        children: /*#__PURE__*/_jsxs(HeaderAvatarAction, _objectSpread(_objectSpread({}, props), {}, {
           onClick: onClick,
           "aria-label": "Edit avatar",
           $shape: shape,
@@ -565,7 +554,7 @@ const Avatar = _ref0 => {
           children: [/*#__PURE__*/_jsx(IconContainer, {
             $shape: shape,
             $sizing: sizing,
-            $hasImage: !!image,
+            $size: innerSize,
             className: "icon-container",
             children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
               icon: ["fas", "camera"],
@@ -576,11 +565,15 @@ const Avatar = _ref0 => {
               size: sizing === "large" ? "lg" : "1x",
               color: defaultIconColor
             })
-          }), avatarContent]
-        })
+          }), innerContent]
+        }))
       });
     }
-    return avatarContent;
+    return /*#__PURE__*/_jsx(HeaderAvatarFrame, _objectSpread(_objectSpread({}, props), {}, {
+      $shape: shape,
+      $sizing: sizing,
+      children: innerContent
+    }));
   }
   const component = /*#__PURE__*/_jsxs(AvatarWrapper, _objectSpread(_objectSpread({}, props), {}, {
     type: type,

package/es/components/Header/Header.stories.js

@@ -73,6 +73,7 @@ export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
   searchComponent: /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "search",
+    ariaLabel: "Type to search",
     height: "100%",
     type: "text",
     placeholder: "Search for...",
@@ -93,6 +94,7 @@ export const headerWithExtras = () => /*#__PURE__*/_jsx(Header, {
   searchComponent: /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "search",
+    ariaLabel: "Type to search",
     height: "100%",
     type: "text",
     placeholder: "Search for...",

package/es/components/Header/Header.styles.js

@@ -123,12 +123,11 @@ export const IconContainer = /*#__PURE__*/styled(Flex).withConfig({
   background: themeGet("colors.greyDark")(props),
   transition: themeGet("transition.transitionDefault")(props)
 }));
-export const UserMenuContent = /*#__PURE__*/styled(Box).withConfig({
+export const UserMenuContent = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "UserMenuContent",
   componentId: "sc-xs8ba0-8"
 })(props => css({
   position: "absolute",
-  gap: "s",
   top: "calc(100% + 8px)",
   right: "0",
   zIndex: themeGet("zIndices.2")(props),

package/es/components/Header/UserMenu.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import Avatar from "../Avatar";
@@ -50,13 +53,14 @@ const UserMenu = _ref => {
         justifyContent: "center",
         borderRadius: "50%",
         p: "2px",
-        children: /*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, _objectSpread({
           icon: ["fas", "chevron-down"],
-          rotation: isOpen ? 180 : 0,
           color: "white",
           size: "xs",
           mt: isOpen ? "0" : "1px"
-        })
+        }, isOpen && {
+          rotation: "180"
+        }))
       })]
     }), /*#__PURE__*/_jsxs(UserMenuContent, {
       p: "s",
@@ -67,7 +71,7 @@ const UserMenu = _ref => {
       maxHeight: "430px",
       border: "solid 1px",
       borderRadius: "2",
-      display: "flex",
+      gap: "s",
       flexDirection: "column",
       alignItems: "flex-start",
       justifyContent: "flex-start",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.5.10",
+  "version": "3.5.12",
   "engines": {
     "node": ">=20.0.0"
   },