orcs-design-system 3.3.30 → 3.3.31

package/es/components/Avatar/index.js

@@ -356,19 +356,28 @@ const HeaderAvatarShape = styled("div").withConfig({
     })
   };
 });
-const HeaderAvatarAction = styled("button").withConfig({
-  displayName: "Avatar__HeaderAvatarAction",
+const HeaderAvatarActionPopover = styled(Popover).withConfig({
+  displayName: "Avatar__HeaderAvatarActionPopover",
   componentId: "sc-1wtet2j-11"
 })(_ref6 => {
   let {
-    $shape,
-    ...props
+    $shape
   } = _ref6;
   return {
     position: "absolute",
     top: 0,
     right: 0,
-    transform: $shape === "circle" ? "translate(-5%, 5%)" : "translate(20%, -20%)",
+    transform: $shape === "circle" ? "translate(-5%, 5%)" : "translate(20%, -20%)"
+  };
+});
+const HeaderAvatarAction = styled("button").withConfig({
+  displayName: "Avatar__HeaderAvatarAction",
+  componentId: "sc-1wtet2j-12"
+})(_ref7 => {
+  let {
+    ...props
+  } = _ref7;
+  return {
     width: "36px",
     height: "36px",
     borderRadius: "50%",
@@ -387,7 +396,7 @@ const HeaderAvatarAction = styled("button").withConfig({
     }
   };
 });
-const Avatar = _ref7 => {
+const Avatar = _ref8 => {
   let {
     sizing,
     image,
@@ -406,7 +415,7 @@ const Avatar = _ref7 => {
     headerAvatar = false,
     onClick,
     ...props
-  } = _ref7;
+  } = _ref8;
   const hasTitle = !!title;
   const hasSubtitle = !!subtitle;
   const hasSubtitleContent = !!subtitleContent;
@@ -456,20 +465,24 @@ const Avatar = _ref7 => {
             icon: ["fas", "user"]
           })
         })
-      }), onClick && sizing === "large" && /*#__PURE__*/_jsx(HeaderAvatarAction, {
-        $size: size,
+      }), onClick && sizing === "large" && /*#__PURE__*/_jsx(HeaderAvatarActionPopover, {
+        direction: "right",
+        width: "fit-content",
         $shape: shape,
-        onClick: onClick,
-        "aria-label": "Edit avatar",
-        children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
-          icon: ["fas", "camera"],
-          size: "lg",
-          color: "greyDarker"
-        }) : /*#__PURE__*/_jsx(Icon, {
-          icon: ["fas", "edit"],
-          size: "lg",
-          color: "greyDarker",
-          transform: "right-1"
+        text: shape === "circle" ? "Upload profile picture" : "Change image",
+        children: /*#__PURE__*/_jsx(HeaderAvatarAction, {
+          onClick: onClick,
+          "aria-label": "Edit avatar",
+          children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "camera"],
+            size: "lg",
+            color: "greyDarker"
+          }) : /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "edit"],
+            size: "lg",
+            color: "greyDarker",
+            transform: "right-1"
+          })
         })
       })]
     });
@@ -518,7 +531,7 @@ const Avatar = _ref7 => {
     }), localTime && /*#__PURE__*/_jsx(LocalTime, {
       direction: "topRight",
       textAlign: "center",
-      width: "130px",
+      width: "fit-content",
       text: localTime,
       children: /*#__PURE__*/_jsx(StatusDot, {
         icon: true,

package/es/components/Loading/Loading.stories.js

@@ -46,6 +46,26 @@ export const invertedLoading = () => /*#__PURE__*/_jsx(Box, {
   })
 });
 invertedLoading.storyName = "Inverted";
+export const aiLoading = () => /*#__PURE__*/_jsxs(Spacer, {
+  p: "r",
+  children: [/*#__PURE__*/_jsx(Loading, {
+    variant: "AI"
+  }), /*#__PURE__*/_jsx(Loading, {
+    variant: "AI",
+    large: true
+  })]
+});
+aiLoading.storyName = "AI Variant";
+export const aiChatLoading = () => /*#__PURE__*/_jsxs(Spacer, {
+  p: "r",
+  children: [/*#__PURE__*/_jsx(Loading, {
+    variant: "AIchat"
+  }), /*#__PURE__*/_jsx(Loading, {
+    variant: "AIchat",
+    large: true
+  })]
+});
+aiChatLoading.storyName = "AI Chat Variant";
 defaultLoading.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -70,4 +90,14 @@ invertedLoading.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "invertedLoading"
+};
+aiLoading.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "aiLoading"
+};
+aiChatLoading.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "aiChatLoading"
 };

package/es/components/Loading/index.js

@@ -5,6 +5,7 @@ import { space, layout, compose } from "styled-system";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LoadingStyles = compose(space, layout);
 const loadingSpin = keyframes(["to{transform:rotate(1turn);}"]);
+const dotAnimation = keyframes(["0%,80%,100%{opacity:0;}40%{opacity:1;}"]);
 const LoadingWrapper = styled("div").withConfig({
   displayName: "Loading__LoadingWrapper",
   componentId: "sc-195w3kf-0"
@@ -17,6 +18,18 @@ const LoadingIcon = styled.svg.withConfig({
   displayName: "Loading__LoadingIcon",
   componentId: "sc-195w3kf-1"
 })(["position:relative;width:", ";height:", ";", ";", ";"], props => props.large ? "50px" : "16px", props => props.large ? "50px" : "16px", props => props.large ? css(["animation:", " 800ms infinite linear;"], loadingSpin) : css(["animation:", " 600ms infinite linear;"], loadingSpin), props => props.inverted ? css(["fill:white;"]) : props.primary ? css(["fill:#0091ea;"]) : css(["fill:black;"]));
+const AILoadingIcon = styled.svg.withConfig({
+  displayName: "Loading__AILoadingIcon",
+  componentId: "sc-195w3kf-2"
+})(["position:relative;width:", ";height:", ";", ";"], props => props.large ? "50px" : "24px", props => props.large ? "46px" : "22px", props => props.large ? css(["animation:", " 1000ms infinite linear;"], loadingSpin) : css(["animation:", " 800ms infinite linear;"], loadingSpin));
+const AIChatLoadingIcon = styled.svg.withConfig({
+  displayName: "Loading__AIChatLoadingIcon",
+  componentId: "sc-195w3kf-3"
+})(["position:relative;width:", ";height:", ";"], props => props.large ? "56px" : "28px", props => props.large ? "12px" : "6px");
+const Dot = styled.circle.withConfig({
+  displayName: "Loading__Dot",
+  componentId: "sc-195w3kf-4"
+})(["animation:", " 1.4s infinite ease-in-out;animation-delay:", "s;transform-origin:center;"], dotAnimation, props => props.delay);
 
 /**
  * As a general guide, use the large prop for when whole pages or sections are loading, and the default (small) loading for smaller elements.
@@ -29,12 +42,129 @@ export default function Loading(_ref) {
     primary,
     theme,
     ariaLabel = "Loading",
+    variant,
     ...props
   } = _ref;
   const component = /*#__PURE__*/_jsx(LoadingWrapper, {
     ...props,
     centered: centered,
-    children: /*#__PURE__*/_jsxs(LoadingIcon, {
+    children: variant === "AI" ? /*#__PURE__*/_jsxs(AILoadingIcon, {
+      role: "img",
+      "aria-label": ariaLabel,
+      large: large,
+      viewBox: "0 0 24 22",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/_jsx("defs", {
+        children: /*#__PURE__*/_jsxs("linearGradient", {
+          id: "pathGradient",
+          x1: "21",
+          y1: "5",
+          x2: "17",
+          y2: "20",
+          gradientUnits: "userSpaceOnUse",
+          children: [/*#__PURE__*/_jsx("stop", {
+            offset: "0%",
+            stopColor: "#42B7FF"
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "100%",
+            stopColor: "#B667FF"
+          })]
+        })
+      }), /*#__PURE__*/_jsx("mask", {
+        id: "path-1-inside-1_1516_12666",
+        fill: "white",
+        children: /*#__PURE__*/_jsx("path", {
+          d: "M16.9413 19.678C17.2158 20.1574 17.0512 20.7731 16.5489 21.0029C14.8729 21.7697 13.0258 22.1053 11.1771 21.9712C8.99467 21.8129 6.90907 21.0074 5.18691 19.6576C3.46475 18.3078 2.18429 16.475 1.50923 14.3936C0.834172 12.3122 0.795197 10.0768 1.39729 7.97319C1.99938 5.86954 3.21518 3.99326 4.88923 2.58423C6.56329 1.1752 8.61954 0.297456 10.7951 0.0632129C12.9706 -0.17103 15.1666 0.248877 17.1022 1.26925C18.742 2.13365 20.1318 3.3957 21.1483 4.93302C21.453 5.39384 21.2669 6.0034 20.7803 6.26498V6.26498C20.2937 6.52657 19.6916 6.34025 19.3777 5.88569C18.5561 4.69612 17.4569 3.7177 16.1693 3.03896C14.5857 2.20416 12.7891 1.86062 11.0092 2.05226C9.22936 2.2439 7.54708 2.96202 6.17748 4.11479C4.80788 5.26756 3.8132 6.80261 3.32061 8.52367C2.82802 10.2447 2.8599 12.0736 3.41219 13.7764C3.96448 15.4793 5.01207 16.9787 6.42102 18.083C7.82998 19.1874 9.53627 19.8464 11.3217 19.9759C12.7734 20.0812 14.2239 19.8325 15.5504 19.2577C16.0573 19.0381 16.6668 19.1986 16.9413 19.678V19.678Z"
+        })
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M16.9413 19.678C17.2158 20.1574 17.0512 20.7731 16.5489 21.0029C14.8729 21.7697 13.0258 22.1053 11.1771 21.9712C8.99467 21.8129 6.90907 21.0074 5.18691 19.6576C3.46475 18.3078 2.18429 16.475 1.50923 14.3936C0.834172 12.3122 0.795197 10.0768 1.39729 7.97319C1.99938 5.86954 3.21518 3.99326 4.88923 2.58423C6.56329 1.1752 8.61954 0.297456 10.7951 0.0632129C12.9706 -0.17103 15.1666 0.248877 17.1022 1.26925C18.742 2.13365 20.1318 3.3957 21.1483 4.93302C21.453 5.39384 21.2669 6.0034 20.7803 6.26498V6.26498C20.2937 6.52657 19.6916 6.34025 19.3777 5.88569C18.5561 4.69612 17.4569 3.7177 16.1693 3.03896C14.5857 2.20416 12.7891 1.86062 11.0092 2.05226C9.22936 2.2439 7.54708 2.96202 6.17748 4.11479C4.80788 5.26756 3.8132 6.80261 3.32061 8.52367C2.82802 10.2447 2.8599 12.0736 3.41219 13.7764C3.96448 15.4793 5.01207 16.9787 6.42102 18.083C7.82998 19.1874 9.53627 19.8464 11.3217 19.9759C12.7734 20.0812 14.2239 19.8325 15.5504 19.2577C16.0573 19.0381 16.6668 19.1986 16.9413 19.678V19.678Z",
+        stroke: "url(#pathGradient)",
+        strokeWidth: "4",
+        strokeLinejoin: "round",
+        mask: "url(#path-1-inside-1_1516_12666)"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: "21.9727",
+        cy: "12.7734",
+        r: "1.5",
+        fill: "#6D74FE"
+      }), /*#__PURE__*/_jsx("circle", {
+        cx: "21.7012",
+        cy: "8.81641",
+        r: "1",
+        fill: "#42B7FF"
+      }), /*#__PURE__*/_jsx("path", {
+        d: "M18.9019 15.0489C19.0419 14.5181 19.7952 14.5181 19.9352 15.0489V15.0489C20.1648 15.9194 20.8384 16.6031 21.7054 16.8458L21.7938 16.8705C22.3137 17.016 22.2985 17.7582 21.7731 17.8822V17.8822C20.8715 18.0951 20.1615 18.8003 19.9348 19.6985V19.6985C19.8002 20.2316 19.0369 20.2316 18.9024 19.6985V19.6985C18.6756 18.8003 17.9656 18.0951 17.0641 17.8822V17.8822C16.5387 17.7582 16.5235 17.016 17.0433 16.8705L17.1318 16.8458C17.9988 16.6031 18.6723 15.9194 18.9019 15.0489V15.0489Z",
+        fill: "#B667FF"
+      })]
+    }) : variant === "AIchat" ? /*#__PURE__*/_jsxs(AIChatLoadingIcon, {
+      role: "img",
+      "aria-label": ariaLabel,
+      large: large,
+      viewBox: "0 0 28 6",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [/*#__PURE__*/_jsxs("defs", {
+        children: [/*#__PURE__*/_jsxs("linearGradient", {
+          id: "paint0_linear_723_3706",
+          x1: "0",
+          y1: "3",
+          x2: "28",
+          y2: "3",
+          gradientUnits: "userSpaceOnUse",
+          children: [/*#__PURE__*/_jsx("stop", {
+            stopColor: "#42B7FF"
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "1",
+            stopColor: "#B667FF"
+          })]
+        }), /*#__PURE__*/_jsxs("linearGradient", {
+          id: "paint1_linear_723_3706",
+          x1: "0",
+          y1: "3",
+          x2: "28",
+          y2: "3",
+          gradientUnits: "userSpaceOnUse",
+          children: [/*#__PURE__*/_jsx("stop", {
+            stopColor: "#42B7FF"
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "1",
+            stopColor: "#B667FF"
+          })]
+        }), /*#__PURE__*/_jsxs("linearGradient", {
+          id: "paint2_linear_723_3706",
+          x1: "0",
+          y1: "3",
+          x2: "28",
+          y2: "3",
+          gradientUnits: "userSpaceOnUse",
+          children: [/*#__PURE__*/_jsx("stop", {
+            stopColor: "#42B7FF"
+          }), /*#__PURE__*/_jsx("stop", {
+            offset: "1",
+            stopColor: "#B667FF"
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Dot, {
+        cx: "3",
+        cy: "3",
+        r: "3",
+        fill: "url(#paint0_linear_723_3706)",
+        delay: 0
+      }), /*#__PURE__*/_jsx(Dot, {
+        cx: "14",
+        cy: "3",
+        r: "3",
+        fill: "url(#paint1_linear_723_3706)",
+        delay: 0.2
+      }), /*#__PURE__*/_jsx(Dot, {
+        cx: "25",
+        cy: "3",
+        r: "3",
+        fill: "url(#paint2_linear_723_3706)",
+        delay: 0.4
+      })]
+    }) : /*#__PURE__*/_jsxs(LoadingIcon, {
       role: "img",
       "aria-label": ariaLabel,
       large: large,
@@ -68,7 +198,9 @@ Loading.propTypes = {
   /** Specifies the system design theme */
   theme: PropTypes.object,
   /** Specifies the aria-label for loading image */
-  ariaLabel: PropTypes.string
+  ariaLabel: PropTypes.string,
+  /** Specifies the variant of loading icon to display */
+  variant: PropTypes.oneOf(["AI", "AIchat"])
 };
 Loading.__docgenInfo = {
   "description": "As a general guide, use the large prop for when whole pages or sections are loading, and the default (small) loading for smaller elements.",
@@ -120,6 +252,20 @@ Loading.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "variant": {
+      "description": "Specifies the variant of loading icon to display",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"AI\"",
+          "computed": false
+        }, {
+          "value": "\"AIchat\"",
+          "computed": false
+        }]
+      },
+      "required": false
     }
   }
 };

package/package.json

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