@speakapbv/dough-component-library 10.0.1 → 10.1.1

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

@@ -0,0 +1,17 @@
+import "./progress-bar.scss";
+import { Colors, DoughDataAttributes, FixedColors } from "../../utils/constants";
+export interface Bar {
+    color: Colors | FixedColors | string;
+    value: number;
+}
+export interface MultiProgressBarProps {
+    className?: string;
+    dataAttributes?: DoughDataAttributes;
+    total: number;
+    railColor?: Colors | string;
+    data: Array<Bar>;
+}
+export declare const MultiProgressBar: {
+    ({ dataAttributes, className, railColor, data, total, }: MultiProgressBarProps): JSX.Element;
+    displayName: string;
+};

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}";
+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}";
 styleInject(css_248z$x);
 
 var DesignTokens = {
@@ -4708,10 +4708,31 @@ var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
 var isStandardColor = function (color) {
     return Object.values(Colors).includes(color);
 };
+var isFixedColor = function (color) {
+    return Object.values(FixedColors).includes(color);
+};
 var getColorWithFallback = function (color) {
-    return isStandardColor(color) ? "var(--" + color + ")" : 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: {
@@ -5651,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}";
+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}";
 styleInject(css_248z$x);
 
 var DesignTokens = {
@@ -4691,10 +4691,31 @@ var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
 var isStandardColor = function (color) {
     return Object.values(exports.Colors).includes(color);
 };
+var isFixedColor = function (color) {
+    return Object.values(exports.FixedColors).includes(color);
+};
 var getColorWithFallback = function (color) {
-    return isStandardColor(color) ? "var(--" + color + ")" : 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: {
@@ -5673,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

@@ -0,0 +1,6 @@
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
+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 FullyFilled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;

package/dist/utils/styles.d.ts

@@ -1,5 +1,6 @@
-import { Colors } from "./constants";
+import { Colors, FixedColors } from "./constants";
 export declare const getIESpecificStyles: (props: Record<string, any>, propToStyleMap: Record<string, Array<string>>) => string;
 export declare const generateStyles: (props: Record<string, any>, selector: string, propToStyleMap: Record<string, Array<string>>, noMediaQuery?: boolean | undefined) => string;
 export declare const isStandardColor: (color: Colors | string) => color is Colors;
-export declare const getColorWithFallback: (color: Colors | string) => string;
+export declare const isFixedColor: (color: FixedColors | string) => color is FixedColors;
+export declare const getColorWithFallback: (color: Colors | FixedColors | string) => string;

package/package.json

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