@synerise/ds-progress-bar 1.0.4 → 1.1.0

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.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.0.5...@synerise/ds-progress-bar@1.1.0) (2025-04-16)
+
+
+### Features
+
+* **form-field:** add form-field component ([7f6b191](https://github.com/Synerise/synerise-design/commit/7f6b191132a3b0d694c21fb4d649f4deea6acb89))
+
+
+
+
+
+## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.0.4...@synerise/ds-progress-bar@1.0.5) (2025-04-04)
+
+
+### Bug Fixes
+
+* **progress-bar:** rename thick to thin ([fa3c6b2](https://github.com/Synerise/synerise-design/commit/fa3c6b21bf8c13445dc21868f56b726451e217f2))
+
+
+
+
+
 ## [1.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.0.3...@synerise/ds-progress-bar@1.0.4) (2025-04-02)
 
 **Note:** Version bump only for package @synerise/ds-progress-bar

package/README.md

@@ -18,6 +18,7 @@ Progress-Bar UI Component
 | amount      | Number visibile in progress bar label                                 | 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`   |

package/dist/Multivalue/Multivalue.js

@@ -1,6 +1,6 @@
 var _excluded = ["values", "stackedBars"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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, { useMemo } from 'react';
 import * as S from './MultiValue.styles';
 var normalizePercent = function normalizePercent(value) {

package/dist/ProgressBar.d.ts

@@ -1,15 +1,4 @@
 import React from 'react';
 import { ProgressProps } from './ProgressBar.types';
-declare class ProgressBar extends React.PureComponent<ProgressProps> {
-    static defaultProps: {
-        type: string;
-        status: string;
-        strokeLinecap: string;
-        strokeColor: string;
-        showLabel: boolean;
-        description: string;
-        maxPercent: boolean;
-    };
-    render(): React.ReactNode;
-}
+declare const ProgressBar: ({ showLabel, description, amount, percent, type, status, strokeColor, strokeLinecap, className, thick, thin, labelFormatter, containerStyles, style, maxPercent, ...rest }: ProgressProps) => React.JSX.Element;
 export default ProgressBar;

package/dist/ProgressBar.js

@@ -1,68 +1,62 @@
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+var _excluded = ["showLabel", "description", "amount", "percent", "type", "status", "strokeColor", "strokeLinecap", "className", "thick", "thin", "labelFormatter", "containerStyles", "style", "maxPercent"];
+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 * as S from './ProgressBar.styles';
-var ProgressBar = /*#__PURE__*/function (_React$PureComponent) {
-  _inheritsLoose(ProgressBar, _React$PureComponent);
-  function ProgressBar() {
-    return _React$PureComponent.apply(this, arguments) || this;
-  }
-  var _proto = ProgressBar.prototype;
-  _proto.render = function render() {
-    var _this$props = this.props,
-      showLabel = _this$props.showLabel,
-      description = _this$props.description,
-      amount = _this$props.amount,
-      percent = _this$props.percent,
-      type = _this$props.type,
-      status = _this$props.status,
-      strokeColor = _this$props.strokeColor,
-      strokeLinecap = _this$props.strokeLinecap,
-      className = _this$props.className,
-      thick = _this$props.thick,
-      labelFormatter = _this$props.labelFormatter,
-      containerStyles = _this$props.containerStyles,
-      maxPercent = _this$props.maxPercent;
-    var maxBorderWidth = function maxBorderWidth() {
-      if (percent === 100) {
-        return maxPercent;
-      }
-      return false;
-    };
-    return /*#__PURE__*/React.createElement(S.Container, {
-      className: (className || '') + " progress-bar-container",
-      "data-testid": "progress-bar-container",
-      style: containerStyles
-    }, 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", {
-      "data-testid": "progress-bar-max-percent"
-    }, " (" + percent + "%)"))), /*#__PURE__*/React.createElement(S.AntdProgressBar, {
-      percent: percent,
-      maxPercent: maxBorderWidth(),
-      type: type,
-      thick: thick,
-      status: status,
-      strokeColor: strokeColor,
-      strokeLinecap: strokeLinecap,
-      showInfo: false
-    }), description && /*#__PURE__*/React.createElement("span", {
-      className: "progress-bar-description",
-      "data-testid": "progress-bar-description"
-    }, description));
+var ProgressBar = function ProgressBar(_ref) {
+  var _ref$showLabel = _ref.showLabel,
+    showLabel = _ref$showLabel === void 0 ? false : _ref$showLabel,
+    _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,
+    className = _ref.className,
+    thick = _ref.thick,
+    thin = _ref.thin,
+    labelFormatter = _ref.labelFormatter,
+    containerStyles = _ref.containerStyles,
+    style = _ref.style,
+    _ref$maxPercent = _ref.maxPercent,
+    maxPercent = _ref$maxPercent === void 0 ? true : _ref$maxPercent,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var theme = useTheme();
+  var maxBorderWidth = function maxBorderWidth() {
+    if (percent === 100) {
+      return maxPercent;
+    }
+    return false;
   };
-  return ProgressBar;
-}(React.PureComponent);
-ProgressBar.defaultProps = {
-  type: 'line',
-  status: 'normal',
-  strokeLinecap: 'round',
-  strokeColor: '#76dc25',
-  showLabel: false,
-  description: '',
-  maxPercent: true
+  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", {
+    "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", {
+    className: "progress-bar-description",
+    "data-testid": "progress-bar-description"
+  }, description));
 };
 export default ProgressBar;

package/dist/ProgressBar.styles.d.ts

@@ -2,6 +2,6 @@
 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, {
-    thick?: boolean | undefined;
+    thin?: boolean | undefined;
     maxPercent?: boolean | undefined;
 }, never>;

package/dist/ProgressBar.styles.js

@@ -16,9 +16,9 @@ export var AntdProgressBar = styled(Progress).withConfig({
   displayName: "ProgressBarstyles__AntdProgressBar",
   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.thick ? '3px' : '6px';
+  return props.thin ? '3px' : '6px';
 }, function (props) {
-  return props.thick ? '3px' : '0px';
+  return props.thin ? '3px' : '0px';
 }, function (props) {
   return props.theme.palette['grey-200'];
 }, function (props) {

package/dist/ProgressBar.types.d.ts

@@ -1,11 +1,21 @@
 import type { ReactNode, CSSProperties } from 'react';
 import type { ProgressProps as AntProgressProps } from 'antd/lib/progress/progress';
-export type ProgressProps = AntProgressProps & {
+import { ExactlyOne, WithHTMLAttributes } from '@synerise/ds-utils';
+export type ProgressProps = WithHTMLAttributes<HTMLDivElement, Pick<AntProgressProps, 'percent' | 'type' | 'status' | 'strokeColor' | 'strokeLinecap'> & {
     amount?: number;
     showLabel?: boolean;
     description?: ReactNode;
-    thick?: boolean;
     labelFormatter?: (amount?: string | number, percent?: string | number) => ReactNode;
+    /**
+     * @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/dist/ProgressTiles/ProgressTiles.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ProgressTilesProps } from './ProgressTiles.types';
-export declare const ProgressTiles: ({ colors, label, tileWidth, percent }: ProgressTilesProps) => React.JSX.Element;
+export declare const ProgressTiles: ({ colors, label, tileWidth, percent, ...rest }: ProgressTilesProps) => React.JSX.Element;
 export default ProgressTiles;

package/dist/ProgressTiles/ProgressTiles.js

@@ -1,12 +1,15 @@
+var _excluded = ["colors", "label", "tileWidth", "percent"];
+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, { useCallback } from 'react';
-import { Label } from '@synerise/ds-typography';
+import { FormFieldLabel } from '@synerise/ds-form-field';
 import * as S from './ProgressTiles.styles';
 var MAX_PERCENT = 100;
 export var ProgressTiles = function ProgressTiles(_ref) {
   var colors = _ref.colors,
     label = _ref.label,
     tileWidth = _ref.tileWidth,
-    percent = _ref.percent;
+    percent = _ref.percent,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
   var getTilesConfig = useCallback(function () {
     var TILES_COUNT = colors.length;
     var tileWidthRatio = MAX_PERCENT / TILES_COUNT;
@@ -22,7 +25,7 @@ export var ProgressTiles = function ProgressTiles(_ref) {
       };
     });
   }, [colors, percent]);
-  return /*#__PURE__*/React.createElement(S.TilesWrapper, null, label && /*#__PURE__*/React.createElement(Label, {
+  return /*#__PURE__*/React.createElement(S.TilesWrapper, rest, label && /*#__PURE__*/React.createElement(FormFieldLabel, {
     className: "progress-bar-label"
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "progress-bar-wrapper"

package/dist/ProgressTiles/ProgressTiles.types.d.ts

@@ -1,7 +1,8 @@
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 import type { ReactNode } from 'react';
-export type ProgressTilesProps = {
+export type ProgressTilesProps = WithHTMLAttributes<HTMLDivElement, {
     tileWidth: string;
     colors: string[];
     percent: number;
     label?: ReactNode;
-};
+}>;

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export { default } from './ProgressBar';
 export { default as Multivalue } from './Multivalue/Multivalue';
 export { default as ProgressTiles } from './ProgressTiles/ProgressTiles';
 export type { ProgressProps } from './ProgressBar.types';
+export type { MultivalueProps, ProgressValue } from './Multivalue/Multivalue.types';
+export type { ProgressTilesProps } from './ProgressTiles/ProgressTiles.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-progress-bar",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Progress-Bar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,7 +34,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-typography": "^1.0.4",
+    "@synerise/ds-form-field": "^1.1.0",
     "@synerise/ds-utils": "^1.0.1"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "dc78b03be09e793ec84f1dafc59c5616e77f1196"
+  "gitHead": "6735f9babfeef53122f54ca86cba5f581e8870d9"
 }