@speakapbv/dough-component-library 10.1.0 → 10.1.2

package/dist/index.d.ts

@@ -37,6 +37,7 @@ export { Tooltip, TooltipDirection } from "./components/tooltip/tooltip";
 export { AppBackground } from "./components/app-background/app-background";
 export { AppWrapper } from "./components/app-wrapper/app-wrapper";
 export { PanelOverlay } from "./components/panel-overlay/panel-overlay";
+export { MultiProgressBar, MultiProgressBarProps, } from "./components/progress-bar/multi-progress-bar";
 export { ProgressBar, ProgressBarProps, } from "./components/progress-bar/progress-bar";
 export { AlertText } from "./components/alert-textbox/alert-textbox";
 export { Notification } from "./components/notification/notification";

package/dist/index.es.js

@@ -4518,7 +4518,7 @@ var PanelOverlay = function (props) {
 };
 PanelOverlay.displayName = "PanelOverlay";
 
-var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n  border-left: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-left: unset;\n}\n.dough-multi-progress-bar__progress:not(:last-of-type) {\n  border-right: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
+var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.dough-multi-progress-bar__progress:not(:last-of-type) {\n  border-right: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
 styleInject(css_248z$x);
 
 var DesignTokens = {
@@ -4715,6 +4715,24 @@ var getColorWithFallback = function (color) {
     return isStandardColor(color) || isFixedColor(color) ? "var(--" + color + ")" : color;
 };
 
+var MultiProgressBar = function (_a) {
+    var dataAttributes = _a.dataAttributes, className = _a.className, _b = _a.railColor, railColor = _b === void 0 ? "#EDEDED" : _b, data = _a.data, total = _a.total;
+    var aggregatedTotal = data.reduce(function (agg, el) { return agg + el.value; }, 0);
+    var normalizedTotal = aggregatedTotal > total ? aggregatedTotal : total;
+    return (React.createElement("div", __assign({ className: cn("dough-multi-progress-bar", className) }, dataAttributes, { style: {
+            backgroundColor: getColorWithFallback(railColor),
+        } }),
+        data.filter(Boolean).map(function (_a, index) {
+            var value = _a.value, color = _a.color;
+            return (React.createElement("div", { key: index, className: "dough-multi-progress-bar__progress", style: {
+                    backgroundColor: getColorWithFallback(color),
+                    width: "calc(" + value + " / " + normalizedTotal + " * 100%)",
+                } }));
+        }),
+        aggregatedTotal < total && (React.createElement("div", { className: "dough-multi-progress-bar__progress" }))));
+};
+MultiProgressBar.displayName = "MultiProgressBar";
+
 var ProgressBar = function (_a) {
     var total = _a.total, completed = _a.completed, _b = _a.railColor, railColor = _b === void 0 ? "#EDEDED" : _b, _c = _a.barColor, barColor = _c === void 0 ? Colors.SUCCESS : _c, dataAttributes = _a.dataAttributes, className = _a.className;
     return (React.createElement("div", __assign({ className: cn("dough-progress-bar", className) }, dataAttributes, { style: {
@@ -5654,4 +5672,4 @@ GridItem.displayName = "GridItem";
 
 injectRobotoFont();
 
-export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };
+export { AlertStatus, AlertText, AppBackground, AppWrapper, Avatar, BR, Badge, BorderStyles, Box, BoxAlign, BoxAlignContent, BoxAlignment, BoxDirection, BoxDisplay, BoxJustifyContent, BoxOverflow, BoxWrap, BreadCrumb, BreadCrumbText, BreakpointViewer, BreakpointViewportSizes, Button, ButtonInputType, Card, Carousel, CheckBox, Collapser, ColorTile, Colors, ColorsIcon, ColorsText, Container, ContentSlider, DatePicker, DateTime, DesignTokens, Dialog, Direction, Divider, DoughDateInput, DoughListItem, DropMenu, Fader, FixedColors, Footer, Grid, GridContentAlignment, GridFlow, GridItem, GridItemsAlignment, H1, H2, H3, H4, H5, H6, H7, Header, HorizontalAlignment, HorizontalListSlider, Image, ImageCarousel, ImageContentShowOnHoverClassName, InputWrapper, LayoutContainer, LayoutFlexBox, Link, MultiProgressBar, Notification, NumericInput, Overlay, OverlayVariant, PanelOverlay, Paragraph, ProgressBar, RadioGroup, RadioOption, SelectBox, Sizes, Skeleton, SkeletonShape, Spacer, Spacings, Spinner, StepsIndicator, StrengthIndicator, Subtitle, Switch, Table, TableCell, TableRow, TableRowStyle, TabsContainer, Tag, Text, TextAlignment, TextArea, TextInput, TimePicker, Toggle, ToggleWithText, Tooltip, TooltipDirection, UnorderedList, VerticalAlignment, cancelEvent, checkComponentType, cn, findParentBySelector, generateUID, hideLastDoughTooltip, isStandardColor, setBreakpointSizeManually };

package/dist/index.js

@@ -4501,7 +4501,7 @@ var PanelOverlay = function (props) {
 };
 PanelOverlay.displayName = "PanelOverlay";
 
-var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n  border-left: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n  border-left: unset;\n}\n.dough-multi-progress-bar__progress:not(:last-of-type) {\n  border-right: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
+var css_248z$x = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-progress-bar {\n  height: 4px;\n  width: 100%;\n  border-radius: 4px;\n  position: relative;\n}\n\n.dough-progress-bar__progress {\n  position: absolute;\n  height: 100%;\n  border-radius: 4px;\n  z-index: 1;\n}\n\n.dough-multi-progress-bar {\n  height: 8px;\n  width: 100%;\n  border-radius: 8px;\n  display: flex;\n}\n\n.dough-multi-progress-bar__progress {\n  height: 100%;\n  z-index: 1;\n}\n.dough-multi-progress-bar__progress:first-of-type {\n  border-top-left-radius: 4px;\n  border-bottom-left-radius: 4px;\n}\n.dough-multi-progress-bar__progress:not(:last-of-type) {\n  border-right: 1px solid rgb(110, 111, 117);\n}\n.dough-multi-progress-bar__progress:last-of-type {\n  border-top-right-radius: 4px;\n  border-bottom-right-radius: 4px;\n}";
 styleInject(css_248z$x);
 
 var DesignTokens = {
@@ -4698,6 +4698,24 @@ var getColorWithFallback = function (color) {
     return isStandardColor(color) || isFixedColor(color) ? "var(--" + color + ")" : color;
 };
 
+var MultiProgressBar = function (_a) {
+    var dataAttributes = _a.dataAttributes, className = _a.className, _b = _a.railColor, railColor = _b === void 0 ? "#EDEDED" : _b, data = _a.data, total = _a.total;
+    var aggregatedTotal = data.reduce(function (agg, el) { return agg + el.value; }, 0);
+    var normalizedTotal = aggregatedTotal > total ? aggregatedTotal : total;
+    return (React__default.createElement("div", __assign({ className: cn("dough-multi-progress-bar", className) }, dataAttributes, { style: {
+            backgroundColor: getColorWithFallback(railColor),
+        } }),
+        data.filter(Boolean).map(function (_a, index) {
+            var value = _a.value, color = _a.color;
+            return (React__default.createElement("div", { key: index, className: "dough-multi-progress-bar__progress", style: {
+                    backgroundColor: getColorWithFallback(color),
+                    width: "calc(" + value + " / " + normalizedTotal + " * 100%)",
+                } }));
+        }),
+        aggregatedTotal < total && (React__default.createElement("div", { className: "dough-multi-progress-bar__progress" }))));
+};
+MultiProgressBar.displayName = "MultiProgressBar";
+
 var ProgressBar = function (_a) {
     var total = _a.total, completed = _a.completed, _b = _a.railColor, railColor = _b === void 0 ? "#EDEDED" : _b, _c = _a.barColor, barColor = _c === void 0 ? exports.Colors.SUCCESS : _c, dataAttributes = _a.dataAttributes, className = _a.className;
     return (React__default.createElement("div", __assign({ className: cn("dough-progress-bar", className) }, dataAttributes, { style: {
@@ -5676,6 +5694,7 @@ exports.InputWrapper = InputWrapper;
 exports.LayoutContainer = LayoutContainer;
 exports.LayoutFlexBox = LayoutFlexBox;
 exports.Link = Link;
+exports.MultiProgressBar = MultiProgressBar;
 exports.Notification = Notification;
 exports.NumericInput = NumericInput;
 exports.Overlay = Overlay;

package/dist/src/components/progress-bar/multi-progress-bar.stories.d.ts

@@ -3,4 +3,5 @@ export default _default;
 export declare const Empty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
 export declare const SingleData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
 export declare const MultipleData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
+export declare const BigData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
 export declare const FullyFilled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "10.1.0",
+    "version": "10.1.2",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",