@speakapbv/dough-component-library 10.0.1 → 10.1.0

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,8 +4708,11 @@ 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 ProgressBar = function (_a) {

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,8 +4691,11 @@ 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 ProgressBar = function (_a) {

package/dist/src/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/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.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",