@synerise/ds-progress-bar 1.1.14 → 1.1.16

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.15...@synerise/ds-progress-bar@1.1.16) (2025-09-05)
+
+
+### Bug Fixes
+
+* fixed regressions ([7280298](https://github.com/Synerise/synerise-design/commit/7280298de410dd67bb858afda6c2367436bbc192))
+
+
+
+
+
+## [1.1.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.14...@synerise/ds-progress-bar@1.1.15) (2025-09-05)
+
+
+### Bug Fixes
+
+* **progress-bar:** refactor progress bar and remove ant ([3324544](https://github.com/Synerise/synerise-design/commit/33245443d076da967561558ca8506d6ab0d904e5))
+
+
+
+
+
 ## [1.1.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.13...@synerise/ds-progress-bar@1.1.14) (2025-08-28)
 
 **Note:** Version bump only for package @synerise/ds-progress-bar

package/README.md

@@ -15,14 +15,14 @@ Progress-Bar UI Component
 
 | Property    | Description                                                           | Type                            | Default   |
 | ----------- | --------------------------------------------------------------------- | ------------------------------- | --------- |
-| amount      | Number visibile in progress bar label                                 | number                          | -         |
+| steps       | Number of steps in progress bar                                       | number                          | -         |
 | description | Text of description under progress bar                                | string                          | -         |
 | percent     | Value of progress bar, also visible in label                          | number                          | -         |
-| thin        | Displays a thinner line                                               | boolean                         | -         |
-| showLabel   | Shows label above progress bar, label contains amount and percentage. | boolean                         | `false`   |
-| type        | Type of progress bar                                                  | `line` / `circle` / `dashboard` | `line`    |
-| strokeLine  | To set the style of the progress linecap                              | `round` / `square`              | `round`   |
-| strokeColor | Color of progress bar                                                 | string                          | `#76dc25` |
+| thin        | Displays a thinner line                                               | boolean                         | `false`   |
+| label       | Optional label above progress bar                                     | string                          | -         |
+| customColor | Bar color                                                             | string                          | -         |
+| width       | CSS width property of progress-bar                                    | string                          | -         |
+| inline      | set percent value next to progress bar                                | boolean                         | `false`   |
 
 ### ProgressTiles
 

package/dist/ProgressBar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type ProgressProps } from './ProgressBar.types';
-declare const ProgressBar: ({ showLabel, description, amount, percent, type, status, strokeColor, strokeLinecap, className, thick, thin, labelFormatter, containerStyles, style, maxPercent, ...rest }: ProgressProps) => React.JSX.Element;
+declare const ProgressBar: ({ description, label, steps, width, customColor, percent, className, thin, containerStyles, inline, ...rest }: ProgressProps) => React.JSX.Element;
 export default ProgressBar;

package/dist/ProgressBar.js

@@ -1,60 +1,65 @@
-var _excluded = ["showLabel", "description", "amount", "percent", "type", "status", "strokeColor", "strokeLinecap", "className", "thick", "thin", "labelFormatter", "containerStyles", "style", "maxPercent"];
+var _excluded = ["description", "label", "steps", "width", "customColor", "percent", "className", "thin", "containerStyles", "inline"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { useTheme } from '@synerise/ds-core';
+import React, { useMemo } from 'react';
+import { v4 as uuid } from 'uuid';
 import * as S from './ProgressBar.styles';
+var MAX_PERCENT = 100;
 var ProgressBar = function ProgressBar(_ref) {
-  var _ref$showLabel = _ref.showLabel,
-    showLabel = _ref$showLabel === void 0 ? false : _ref$showLabel,
-    _ref$description = _ref.description,
+  var _ref$description = _ref.description,
     description = _ref$description === void 0 ? '' : _ref$description,
-    amount = _ref.amount,
-    percent = _ref.percent,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'line' : _ref$type,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'normal' : _ref$status,
-    strokeColor = _ref.strokeColor,
-    _ref$strokeLinecap = _ref.strokeLinecap,
-    strokeLinecap = _ref$strokeLinecap === void 0 ? 'round' : _ref$strokeLinecap,
+    label = _ref.label,
+    _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? 1 : _ref$steps,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$customColor = _ref.customColor,
+    customColor = _ref$customColor === void 0 ? '' : _ref$customColor,
+    _ref$percent = _ref.percent,
+    percent = _ref$percent === void 0 ? 50 : _ref$percent,
     className = _ref.className,
-    thick = _ref.thick,
-    thin = _ref.thin,
-    labelFormatter = _ref.labelFormatter,
+    _ref$thin = _ref.thin,
+    thin = _ref$thin === void 0 ? false : _ref$thin,
     containerStyles = _ref.containerStyles,
-    style = _ref.style,
-    _ref$maxPercent = _ref.maxPercent,
-    maxPercent = _ref$maxPercent === void 0 ? true : _ref$maxPercent,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var maxBorderWidth = function maxBorderWidth() {
-    if (percent === 100) {
-      return maxPercent;
-    }
-    return false;
-  };
+  var tiles = useMemo(function () {
+    return Array.from({
+      length: steps
+    }, function () {
+      return {
+        id: uuid()
+      };
+    });
+  }, [steps]);
+  var tileWidthRatio = MAX_PERCENT / steps;
+  var currentProgress = percent / tileWidthRatio;
+  var tileWidths = Array(Math.floor(currentProgress)).fill(1);
+  var lastTileWidth = currentProgress % 1;
+  var tilesWidthRatios = [].concat(tileWidths, [lastTileWidth]);
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     className: (className || '') + " progress-bar-container",
     "data-testid": "progress-bar-container",
-    style: _extends({}, containerStyles, style)
-  }, rest), showLabel && (labelFormatter ? labelFormatter(amount, percent) : /*#__PURE__*/React.createElement("span", {
-    className: "progress-bar-label",
-    "data-testid": "progress-bar-label"
-  }, /*#__PURE__*/React.createElement(S.MaxValue, {
-    "data-testid": "progress-bar-max-value"
-  }, amount), /*#__PURE__*/React.createElement("span", {
+    steps: steps,
+    inline: inline
+  }, rest), label && !inline && /*#__PURE__*/React.createElement(S.LabelWrapper, null, /*#__PURE__*/React.createElement(S.Label, {
+    "data-testid": "progress-bar-label",
+    className: "progress-bar-label"
+  }, label), /*#__PURE__*/React.createElement("span", {
     "data-testid": "progress-bar-max-percent"
-  }, " (" + percent + "%)"))), /*#__PURE__*/React.createElement(S.AntdProgressBar, {
-    percent: percent,
-    maxPercent: maxBorderWidth(),
-    type: type,
-    thin: thin || thick,
-    status: status,
-    strokeColor: strokeColor || theme.palette['green-500'],
-    strokeLinecap: strokeLinecap,
-    showInfo: false
-  }), description && /*#__PURE__*/React.createElement("span", {
+  }, percent + "%")), /*#__PURE__*/React.createElement("div", {
+    className: "progress-div"
+  }, tiles.map(function (tile, i) {
+    return /*#__PURE__*/React.createElement(S.ProgressWrapper, {
+      thin: thin,
+      key: "key-" + tile.id,
+      width: width
+    }, /*#__PURE__*/React.createElement(S.ProgressBar, {
+      customColor: customColor,
+      width: (tilesWidthRatios[i] || 0) * MAX_PERCENT + "%"
+    }));
+  })), inline && /*#__PURE__*/React.createElement(S.PercentWrapper, null, percent + "%"), description && !inline && /*#__PURE__*/React.createElement("span", {
     className: "progress-bar-description",
     "data-testid": "progress-bar-description"
   }, description));

package/dist/ProgressBar.styles.d.ts

@@ -1,6 +1,15 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MaxValue: import("styled-components").StyledComponent<"strong", any, {}, never>;
-export declare const AntdProgressBar: import("styled-components").StyledComponent<import("react").FC<import("antd/lib/progress").ProgressProps>, any, {
-    thin?: boolean;
-    maxPercent?: boolean;
+export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: import("@synerise/ds-form-field").FormFieldLabelProps) => React.JSX.Element, any, {}, never>;
+export declare const ProgressWrapper: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    thin: boolean;
+}, never>;
+export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
+    customColor: string;
+    width: string;
+}, never>;
+export declare const PercentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    steps?: number;
+    inline?: boolean;
 }, never>;

package/dist/ProgressBar.styles.js

@@ -1,28 +1,42 @@
-import Progress from 'antd/lib/progress';
-import styled from 'styled-components';
-export var Container = styled.div.withConfig({
-  displayName: "ProgressBarstyles__Container",
+import styled, { css } from 'styled-components';
+import { FormFieldLabel } from '@synerise/ds-form-field';
+export var LabelWrapper = styled.div.withConfig({
+  displayName: "ProgressBarstyles__LabelWrapper",
   componentId: "sc-1gqovic-0"
-})(["&&{width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;color:", ";.ant-progress{margin:14px 0;}}"], function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var MaxValue = styled.strong.withConfig({
-  displayName: "ProgressBarstyles__MaxValue",
+})(["display:flex;align-items:center;margin-bottom:8px;"]);
+export var Label = styled(FormFieldLabel).withConfig({
+  displayName: "ProgressBarstyles__Label",
   componentId: "sc-1gqovic-1"
-})(["font-weight:500;color:", ";"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var AntdProgressBar = styled(Progress).withConfig({
-  displayName: "ProgressBarstyles__AntdProgressBar",
+})(["&&&{margin:0 8px 0 0;align-items:center;}"]);
+export var ProgressWrapper = styled.div.withConfig({
+  displayName: "ProgressBarstyles__ProgressWrapper",
   componentId: "sc-1gqovic-2"
-})(["&.ant-progress-line{width:100%;height:", ";margin-top:", ";margin:14px 0;border-radius:3px;color:", ";overflow:hidden;box-sizing:content-box;.ant-progress-outer{display:flex;}.ant-progress-inner{width:100%;}.ant-progress-outer,.ant-progress-inner{background:", ";}.ant-progress-outer,.ant-progress-inner,.ant-progress-bg{height:6px !important;}.ant-progress-bg:first-child{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:", ";}}"], function (props) {
-  return props.thin ? '3px' : '6px';
+})(["position:relative;margin-right:2px;width:", ";height:", ";background:", ";"], function (props) {
+  return props.width;
 }, function (props) {
-  return props.thin ? '3px' : '0px';
+  return props.thin ? '4px' : '6px';
 }, function (props) {
   return props.theme.palette['grey-200'];
+});
+export var ProgressBar = styled.div.withConfig({
+  displayName: "ProgressBarstyles__ProgressBar",
+  componentId: "sc-1gqovic-3"
+})(["position:absolute;height:100%;width:", ";background-color:", ";"], function (props) {
+  return props.width;
 }, function (props) {
-  return props.theme.palette['grey-100'];
-}, function (props) {
-  return props.maxPercent ? "0px" : "2px solid " + props.theme.palette.white;
+  return props.customColor ? props.customColor : props.theme.palette['green-500'];
+});
+export var PercentWrapper = styled.div.withConfig({
+  displayName: "ProgressBarstyles__PercentWrapper",
+  componentId: "sc-1gqovic-4"
+})(["margin-left:8px;color:", ";font-weight:400;"], function (props) {
+  return props.theme.palette['grey-800'];
+});
+export var Container = styled.div.withConfig({
+  displayName: "ProgressBarstyles__Container",
+  componentId: "sc-1gqovic-5"
+})(["width:100%;display:flex;justify-content:center;flex-direction:", ";.progress-bar-description{margin-top:8px;}.progress-div{display:flex;align-items:center;}", ":last-of-type{border-radius:3px;", ":last-of-type{border-radius:3px;}}", ""], function (props) {
+  return props.inline ? 'row' : 'column';
+}, ProgressWrapper, ProgressBar, function (props) {
+  return props.steps !== 1 && css(["", ":first-of-type{border-radius:3px 0 0 3px;", ":first-of-type{border-radius:3px 0 0 3px;}}", ":last-of-type{border-radius:0 3px 3px 0;", ":last-of-type{border-radius:0 3px 3px 0;}}"], ProgressWrapper, ProgressBar, ProgressWrapper, ProgressBar);
 });

package/dist/ProgressBar.types.d.ts

@@ -1,21 +1,16 @@
-import type { ProgressProps as AntProgressProps } from 'antd/lib/progress/progress';
 import type { CSSProperties, ReactNode } from 'react';
-import { type ExactlyOne, type WithHTMLAttributes } from '@synerise/ds-utils';
-export type ProgressProps = WithHTMLAttributes<HTMLDivElement, Pick<AntProgressProps, 'percent' | 'type' | 'status' | 'strokeColor' | 'strokeLinecap'> & {
-    amount?: number;
-    showLabel?: boolean;
+import { type WithHTMLAttributes } from '@synerise/ds-utils';
+export type ProgressProps = WithHTMLAttributes<HTMLDivElement, {
+    label?: ReactNode;
+    steps?: number;
+    width?: string;
+    customColor?: string;
     description?: ReactNode;
-    labelFormatter?: (amount?: string | number, percent?: string | number) => ReactNode;
+    thin?: boolean;
+    percent?: number;
+    inline?: boolean;
     /**
      * @deprecated - use style prop
      */
     containerStyles?: CSSProperties;
-    maxPercent?: boolean;
-} & ExactlyOne<{
-    /**
-     * @deprecated - this property has been renamed to thin to reflect it's functionality
-     */
-    thick?: boolean;
-}, {
-    thin?: boolean;
-}>>;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-progress-bar",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "Progress-Bar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -39,9 +39,8 @@
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5f5d424cf8c7fa89e231c36a45f5ab3e4cfac8e7"
+  "gitHead": "7a8206260f1e50bb4b4784081feae944ba780c30"
 }