@synerise/ds-progress-bar 1.1.21 → 1.1.23

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.22...@synerise/ds-progress-bar@1.1.23) (2025-11-28)
+
+**Note:** Version bump only for package @synerise/ds-progress-bar
+
+
+
+
+
+## [1.1.22](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.21...@synerise/ds-progress-bar@1.1.22) (2025-11-13)
+
+
+### Bug Fixes
+
+* **progress-bar:** layout tweaks ([53c1d2e](https://github.com/Synerise/synerise-design/commit/53c1d2efe614035cae18122a0f2bfa8589d05745))
+
+
+
+
+
 ## [1.1.21](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@1.1.20...@synerise/ds-progress-bar@1.1.21) (2025-11-06)
 
 **Note:** Version bump only for package @synerise/ds-progress-bar

package/dist/ProgressBar.js

@@ -41,26 +41,22 @@ var ProgressBar = function ProgressBar(_ref) {
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     className: (className || '') + " progress-bar-container",
     "data-testid": "progress-bar-container",
-    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", {
+    $steps: steps,
+    $inline: inline
+  }, rest), label && !inline && /*#__PURE__*/React.createElement(S.LabelWrapper, null, label && /*#__PURE__*/React.createElement(S.Label, {
+    "data-testid": "progress-bar-label"
+  }, label), /*#__PURE__*/React.createElement(S.Percent, {
     "data-testid": "progress-bar-max-percent"
-  }, percent + "%")), /*#__PURE__*/React.createElement("div", {
-    className: "progress-div"
-  }, tiles.map(function (tile, i) {
+  }, percent + "%")), /*#__PURE__*/React.createElement(S.ProgressOuter, null, tiles.map(function (tile, i) {
     return /*#__PURE__*/React.createElement(S.ProgressWrapper, {
-      thin: thin,
+      $thin: thin,
       key: "key-" + tile.id,
-      width: width
+      $width: width
     }, /*#__PURE__*/React.createElement(S.ProgressBar, {
       customColor: customColor,
-      width: (tilesWidthRatios[i] || 0) * MAX_PERCENT + "%"
+      $width: (tilesWidthRatios[i] || 0) * MAX_PERCENT + "%"
     }));
-  })), inline && /*#__PURE__*/React.createElement(S.PercentWrapper, null, percent + "%"), description && !inline && /*#__PURE__*/React.createElement("span", {
-    className: "progress-bar-description",
+  })), inline && /*#__PURE__*/React.createElement(S.PercentWrapper, null, label || percent + "%"), description && !inline && /*#__PURE__*/React.createElement(S.ProgressBarDescription, {
     "data-testid": "progress-bar-description"
   }, description));
 };

package/dist/ProgressBar.styles.d.ts

@@ -1,15 +1,18 @@
 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;
+    $width: string;
+    $thin: boolean;
 }, never>;
+export declare const ProgressOuter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Percent: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ProgressBarDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
     customColor: string;
-    width: 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;
+    $steps?: number;
+    $inline?: boolean;
 }, never>;

package/dist/ProgressBar.styles.js

@@ -12,31 +12,43 @@ export var ProgressWrapper = styled.div.withConfig({
   displayName: "ProgressBarstyles__ProgressWrapper",
   componentId: "sc-1gqovic-2"
 })(["position:relative;margin-right:2px;width:", ";height:", ";background:", ";"], function (props) {
-  return props.width;
+  return props.$width;
 }, function (props) {
-  return props.thin ? '4px' : '6px';
+  return props.$thin ? '4px' : '6px';
 }, function (props) {
   return props.theme.palette['grey-200'];
 });
+export var ProgressOuter = styled.div.withConfig({
+  displayName: "ProgressBarstyles__ProgressOuter",
+  componentId: "sc-1gqovic-3"
+})(["display:flex;align-items:center;min-width:0;flex:1 1 auto;"]);
+export var Percent = styled.span.withConfig({
+  displayName: "ProgressBarstyles__Percent",
+  componentId: "sc-1gqovic-4"
+})([""]);
+export var ProgressBarDescription = styled.span.withConfig({
+  displayName: "ProgressBarstyles__ProgressBarDescription",
+  componentId: "sc-1gqovic-5"
+})(["margin-top:8px;"]);
 export var ProgressBar = styled.div.withConfig({
   displayName: "ProgressBarstyles__ProgressBar",
-  componentId: "sc-1gqovic-3"
+  componentId: "sc-1gqovic-6"
 })(["position:absolute;height:100%;width:", ";background-color:", ";"], function (props) {
-  return props.width;
+  return props.$width;
 }, function (props) {
   return props.customColor ? props.customColor : props.theme.palette['green-500'];
 });
 export var PercentWrapper = styled.div.withConfig({
   displayName: "ProgressBarstyles__PercentWrapper",
-  componentId: "sc-1gqovic-4"
+  componentId: "sc-1gqovic-7"
 })(["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';
+  componentId: "sc-1gqovic-8"
+})(["width:100%;display:flex;justify-content:center;flex-direction:", ";", ":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);
+  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/ProgressTiles/ProgressTiles.js

@@ -1,7 +1,6 @@
 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 { FormFieldLabel } from '@synerise/ds-form-field';
 import * as S from './ProgressTiles.styles';
 var MAX_PERCENT = 100;
 export var ProgressTiles = function ProgressTiles(_ref) {
@@ -25,9 +24,7 @@ export var ProgressTiles = function ProgressTiles(_ref) {
       };
     });
   }, [colors, percent]);
-  return /*#__PURE__*/React.createElement(S.TilesWrapper, rest, label && /*#__PURE__*/React.createElement(FormFieldLabel, {
-    className: "progress-bar-label"
-  }, label), /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(S.TilesWrapper, rest, label && /*#__PURE__*/React.createElement(S.Label, null, label), /*#__PURE__*/React.createElement("div", {
     className: "progress-bar-wrapper"
   }, getTilesConfig().map(function (tile) {
     return /*#__PURE__*/React.createElement(S.TileContainer, {

package/dist/ProgressTiles/ProgressTiles.styles.d.ts

@@ -5,4 +5,5 @@ export declare const TileProgress: import("styled-components").StyledComponent<"
     color: string;
     width: string;
 }, 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 TilesWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ProgressTiles/ProgressTiles.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { FormFieldLabel } from '@synerise/ds-form-field';
 export var TileContainer = styled.div.withConfig({
   displayName: "ProgressTilesstyles__TileContainer",
   componentId: "sc-sod9jl-0"
@@ -15,7 +16,11 @@ export var TileProgress = styled.div.withConfig({
 }, function (props) {
   return props.color;
 });
+export var Label = styled(FormFieldLabel).withConfig({
+  displayName: "ProgressTilesstyles__Label",
+  componentId: "sc-sod9jl-2"
+})(["margin-bottom:12px;cursor:pointer;"]);
 export var TilesWrapper = styled.div.withConfig({
   displayName: "ProgressTilesstyles__TilesWrapper",
-  componentId: "sc-sod9jl-2"
-})(["width:100%;display:flex;justify-content:center;flex-direction:column;.progress-bar-label{margin-bottom:12px;cursor:pointer;}.progress-bar-wrapper{display:flex;}", ":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;}}"], TileContainer, TileProgress, TileContainer, TileProgress);
+  componentId: "sc-sod9jl-3"
+})(["width:100%;display:flex;justify-content:center;flex-direction:column;.progress-bar-wrapper{display:flex;}", ":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;}}"], TileContainer, TileProgress, TileContainer, TileProgress);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-progress-bar",
-  "version": "1.1.21",
+  "version": "1.1.23",
   "description": "Progress-Bar UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,7 +35,7 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-form-field": "^1.1.19",
+    "@synerise/ds-form-field": "^1.1.20",
     "@synerise/ds-utils": "^1.5.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "cbbb7d9f155735bcc4035d8fd8a7813878d6e051"
+  "gitHead": "d5bd7fbc9d840ac30e2b79b36c451b486e178445"
 }