orcs-design-system 3.2.9 → 3.2.11

package/es/components/ProgressBar/ProgressBar.stories.js

@@ -16,11 +16,11 @@ export const defaultProgressBar = () => /*#__PURE__*/_jsxs(Spacer, {
   children: [/*#__PURE__*/_jsx(ProgressBar, {
     ariaLabel: "Percent Completed",
     containerWidth: 100,
-    fillWidth: 40
+    fillWidth: 75
   }), /*#__PURE__*/_jsx(ProgressBar, {
     ariaLabel: "Percent Completed",
     containerWidth: 50,
-    fillWidth: 70
+    fillWidth: 75
   })]
 });
 defaultProgressBar.storyName = "Default";

package/es/components/ProgressBar/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import { space, layout } from "styled-system";
@@ -8,11 +8,20 @@ const expandWidth = keyframes(["0%{width:0;}"]);
 const Background = styled.div.withConfig({
   displayName: "ProgressBar__Background",
   componentId: "sc-q9qaaf-0"
-})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;"], space, layout, props => themeGet("colors.greyLighter")(props));
+})(["", " ", " position:relative;background:", ";height:16px;border-radius:8px;width:", ";"], space, layout, props => themeGet("colors.greyLighter")(props), props => props.containerWidth ? props.containerWidth + "%" : "100%");
 const Fill = styled.div.withConfig({
   displayName: "ProgressBar__Fill",
   componentId: "sc-q9qaaf-1"
-})(["position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));
+})(["width:", ";position:absolute;left:3px;top:3px;height:10px;border-radius:5px;animation:", " 1000ms ease-in-out 1;transition:", ";", ";"], props => {
+  if (props.fillWidth && props.containerWidthPx) {
+    const sixPxInPercentage = 6 / props.containerWidthPx * 100;
+    const minPixelValue = 1; // Minimum pixel value for visibility
+    const minPercentageValue = minPixelValue / props.containerWidthPx * 100;
+    const calculatedWidth = "calc(".concat(props.fillWidth, "% - ").concat(sixPxInPercentage, "%)");
+    return "max(".concat(calculatedWidth, ", ").concat(minPercentageValue, "%)");
+  }
+  return "0";
+}, expandWidth, props => themeGet("transition.transitionDefault")(props), props => props.gradient ? css(["background:linear-gradient( to right,", " 0%,", " 50%,", " 100% );"], themeGet("colors.danger")(props), themeGet("colors.warning")(props), themeGet("colors.success")(props)) : css(["background:", ";"], themeGet("colors.primary")(props)));
 
 /**
  * Progress bar is not intended to be used for loading (that's what the Loading component is for). The intended use is for indicating progress through steps or progress towards a goal.
@@ -24,27 +33,32 @@ const Fill = styled.div.withConfig({
 
 export default function ProgressBar(_ref) {
   let {
-    containerWidth,
+    containerWidth = "100%",
     fillWidth,
     gradient,
     theme,
     ariaLabel = "Progress",
     ...props
   } = _ref;
+  const backgroundRef = useRef(null);
+  const [containerWidthPx, setContainerWidthPx] = useState(0);
+  useEffect(() => {
+    if (backgroundRef.current) {
+      setContainerWidthPx(backgroundRef.current.offsetWidth);
+    }
+  }, [containerWidth]);
   const component = /*#__PURE__*/_jsx(Background, {
-    style: {
-      width: containerWidth + "%"
-    },
+    ref: backgroundRef,
+    containerWidth: containerWidth,
     ...props,
     "aria-label": ariaLabel,
     "aria-valuenow": fillWidth,
     "aria-valuemin": "0",
     "aria-valuemax": "100",
     children: /*#__PURE__*/_jsx(Fill, {
+      containerWidthPx: containerWidthPx,
       gradient: gradient,
-      style: {
-        width: fillWidth + "%"
-      }
+      fillWidth: fillWidth
     })
   });
   return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
@@ -69,21 +83,25 @@ ProgressBar.__docgenInfo = {
   "methods": [],
   "displayName": "ProgressBar",
   "props": {
-    "ariaLabel": {
+    "containerWidth": {
       "defaultValue": {
-        "value": "\"Progress\"",
+        "value": "\"100%\"",
         "computed": false
       },
-      "description": "Specifies the aria-label for the progress bar",
+      "description": "Sets the percentage width of the parent container",
       "type": {
-        "name": "object"
+        "name": "number"
       },
       "required": false
     },
-    "containerWidth": {
-      "description": "Sets the percentage width of the parent container",
+    "ariaLabel": {
+      "defaultValue": {
+        "value": "\"Progress\"",
+        "computed": false
+      },
+      "description": "Specifies the aria-label for the progress bar",
       "type": {
-        "name": "number"
+        "name": "object"
       },
       "required": false
     },

package/es/components/StatusDot/StatusDot.stories.js

@@ -68,6 +68,20 @@ export const withIcon = () => /*#__PURE__*/_jsx(Box, {
     children: /*#__PURE__*/_jsxs(Spacer, {
       m: "xxs",
       children: [/*#__PURE__*/_jsx(Popover, {
+        direction: "top",
+        text: "Additional info",
+        textAlign: "center",
+        width: "110px",
+        children: /*#__PURE__*/_jsx(StatusDot, {
+          icon: true,
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: ["fas", "question"],
+            color: "white",
+            size: "xs",
+            transform: "up-2"
+          })
+        })
+      }), /*#__PURE__*/_jsx(Popover, {
         direction: "top",
         text: "Target met",
         textAlign: "center",

package/es/components/StatusDot/index.js

@@ -18,18 +18,30 @@ const StatusDotItem = styled("div").withConfig({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  lineHeight: "0"
+  lineHeight: "0",
+  svg: {
+    filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.7))" : "none"
+  }
 }), props => variant({
   variants: {
     default: {},
     success: {
-      bg: themeGet("colors.success")(props)
+      bg: themeGet("colors.success")(props),
+      svg: {
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.6))" : "none"
+      }
     },
     warning: {
-      bg: themeGet("colors.warning")(props)
+      bg: themeGet("colors.warning")(props),
+      svg: {
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(147,101,0,1))" : "none"
+      }
     },
     danger: {
-      bg: themeGet("colors.danger")(props)
+      bg: themeGet("colors.danger")(props),
+      svg: {
+        filter: props.icon ? "drop-shadow(0 1px 1px rgba(0,0,0,0.7))" : "none"
+      }
     }
   }
 }), StatusDotStyles);

package/package.json

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