@synerise/ds-progress-bar 0.8.0 → 0.9.1

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.
 
+## [0.9.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@0.9.0...@synerise/ds-progress-bar@0.9.1) (2025-01-15)
+
+**Note:** Version bump only for package @synerise/ds-progress-bar
+
+
+
+
+
+# [0.9.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@0.8.0...@synerise/ds-progress-bar@0.9.0) (2025-01-08)
+
+
+### Features
+
+* **progress-bar:** stacked multivalue progressbar ([ad14272](https://github.com/Synerise/synerise-design/commit/ad14272c2c1bcbd359544b97402ef95fb611e451))
+
+
+
+
+
 # [0.8.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-progress-bar@0.7.18...@synerise/ds-progress-bar@0.8.0) (2024-12-18)
 
 

package/README.md

@@ -11,7 +11,7 @@ Progress-Bar UI Component
 
 ## API
 
-#### Props
+### ProgressBar
 
 | Property    | Description                                                           | Type                            | Default   |
 | ----------- | --------------------------------------------------------------------- | ------------------------------- | --------- |
@@ -22,3 +22,27 @@ Progress-Bar UI Component
 | 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` |
+
+### ProgressTiles
+
+| Property  | Description                                             | Type      | Default |
+|-----------|---------------------------------------------------------|-----------|---------|
+| tileWidth | width of each tile (with unit)                          | string    | -       |
+| colors    | Array of colors for each tile - defines number of tiles | string[]  | -       |
+| percent   | Value of progress to display colored                    | number    | -       |
+| label     | Optional label above progress bar                       | ReactNode | -       |
+
+
+### Multivalue
+
+| Property    | Description                                                                 | Type            | Default |
+|-------------|-----------------------------------------------------------------------------|-----------------|---------|
+| values      | Values for each bar                                                         | ProgressValue[] | -       |
+| stackedBars | Drives how bars are rendered - side by side or stacked on top of each other | boolean         | true    |
+
+
+### ProgressValue
+| Property | Description                      | Type   | Default |
+|----------|----------------------------------|--------|---------|
+| percent  | Value to display (length of bar) | number | -       |
+| color    | Bar color                        | string | -       |

package/dist/Multivalue/MultiValue.styles.d.ts

@@ -2,4 +2,6 @@ export declare const Multivalue: import("styled-components").StyledComponent<"di
     color: string;
     percent: number;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    stackedBars: boolean;
+}, never>;

package/dist/Multivalue/MultiValue.styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export var Multivalue = styled.div.withConfig({
   displayName: "MultiValuestyles__Multivalue",
   componentId: "sc-145qx7z-0"
@@ -10,4 +10,6 @@ export var Multivalue = styled.div.withConfig({
 export var Container = styled.div.withConfig({
   displayName: "MultiValuestyles__Container",
   componentId: "sc-145qx7z-1"
-})(["position:relative;height:16px;width:100%;padding-top:11px;flex-wrap:wrap;justify-content:flex-start;", ":not(:first-child){border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:2px solid white;}"], Multivalue);
+})(["position:relative;height:16px;width:100%;padding-top:11px;", ""], function (props) {
+  return props.stackedBars ? css(["", ":not(:first-child){border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:2px solid white;}"], Multivalue) : css(["justify-content:flex-start;display:flex;gap:2px;", "{border-radius:0;&:first-child{border-top-left-radius:6px;border-bottom-left-radius:6px;}&:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px;}}"], Multivalue);
+});

package/dist/Multivalue/Multivalue.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MultivalueProps } from './Multivalue.types';
-declare const Multivalue: React.FC<MultivalueProps>;
+declare const Multivalue: ({ values, stackedBars, ...htmlAttributes }: MultivalueProps) => React.JSX.Element;
 export default Multivalue;

package/dist/Multivalue/Multivalue.js

@@ -1,16 +1,26 @@
-import React from 'react';
+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; }
+import React, { useMemo } from 'react';
 import * as S from './MultiValue.styles';
 var normalizePercent = function normalizePercent(value) {
   if (value < 0) return 0;
   if (value > 100) return 100;
   return value;
 };
-var Multivalue = function Multivalue(props) {
-  var values = props.values;
-  var sortedByPercent = values.sort(function (a, b) {
-    return b.percent - a.percent;
-  });
-  return /*#__PURE__*/React.createElement(S.Container, null, sortedByPercent.map(function (val, index) {
+var Multivalue = function Multivalue(_ref) {
+  var values = _ref.values,
+    _ref$stackedBars = _ref.stackedBars,
+    stackedBars = _ref$stackedBars === void 0 ? true : _ref$stackedBars,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var finalValues = useMemo(function () {
+    return stackedBars ? values.sort(function (a, b) {
+      return b.percent - a.percent;
+    }) : values;
+  }, [stackedBars, values]);
+  return /*#__PURE__*/React.createElement(S.Container, _extends({
+    stackedBars: stackedBars
+  }, htmlAttributes), finalValues.map(function (val, index) {
     return /*#__PURE__*/React.createElement(S.Multivalue, {
       // eslint-disable-next-line react/no-array-index-key
       key: val.color + "-" + val.percent + "-" + index,

package/dist/Multivalue/Multivalue.types.d.ts

@@ -1,6 +1,8 @@
-export type MultivalueProps = {
+import { WithHTMLAttributes } from "@synerise/ds-utils";
+export type MultivalueProps = WithHTMLAttributes<HTMLDivElement, {
     values: ProgressValue[];
-};
+    stackedBars?: boolean;
+}>;
 export type ProgressValue = {
     percent: number;
     color: string;

package/dist/ProgressTiles/ProgressTiles.d.ts

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

package/dist/ProgressTiles/ProgressTiles.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Label } from '@synerise/ds-typography';
 import * as S from './ProgressTiles.styles';
 var MAX_PERCENT = 100;
@@ -7,7 +7,7 @@ export var ProgressTiles = function ProgressTiles(_ref) {
     label = _ref.label,
     tileWidth = _ref.tileWidth,
     percent = _ref.percent;
-  var getTilesConfig = React.useCallback(function () {
+  var getTilesConfig = useCallback(function () {
     var TILES_COUNT = colors.length;
     var tileWidthRatio = MAX_PERCENT / TILES_COUNT;
     var currentProgress = percent / tileWidthRatio;

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

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 export type ProgressTilesProps = {
     tileWidth: string;
     colors: string[];
     percent: number;
-    label?: React.ReactNode;
+    label?: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-progress-bar",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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": "^0.16.10",
+    "@synerise/ds-typography": "^0.16.11",
     "@synerise/ds-utils": "^0.31.2"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
     "react": ">=16.9.0 <= 17.0.2",
     "styled-components": "5.0.1"
   },
-  "gitHead": "ca65b979fd6354342021e27b51529d222970afdb"
+  "gitHead": "f591d14d24d6a14aab76edcb60f04aaadec8336d"
 }