@speakapbv/dough-component-library 10.0.0 → 10.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/button/button.d.ts +2 -5
  2. package/dist/index.es.js +22 -8
  3. package/dist/index.js +22 -8
  4. package/dist/src/components/button/button.stories.d.ts +2 -1
  5. package/dist/src/components/progress-bar/multi-progress-bar.d.ts +17 -0
  6. package/dist/src/components/progress-bar/multi-progress-bar.stories.d.ts +6 -0
  7. package/dist/utils/styles.d.ts +3 -2
  8. package/package.json +1 -1
package/dist/components/button/button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactNode, MouseEvent } from "react";
1
+ import React, { ReactNode, MouseEvent } from "react";
2
2
  import { Colors, Sizes, DoughDataAttributes, ColorsText } from "../../utils/constants";
3
3
  import "./button.scss";
4
4
  export declare enum ButtonInputType {
@@ -39,7 +39,4 @@ export interface ButtonProps {
39
39
  withoutBackground?: boolean;
40
40
  colorPicker?: boolean;
41
41
  }
42
- export declare const Button: {
43
- (props: ButtonProps): JSX.Element;
44
- displayName: string;
45
- };
42
+ export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
package/dist/index.es.js CHANGED
@@ -618,14 +618,14 @@ var ButtonInputType;
618
618
  ButtonInputType["SUBMIT"] = "submit";
619
619
  ButtonInputType["LINK"] = "link";
620
620
  })(ButtonInputType || (ButtonInputType = {}));
621
- var Button = function (props) {
621
+ var Button = forwardRef(function (props, externalRef) {
622
622
  var doubleClickPrevent = false;
623
623
  var clickTime = 0;
624
624
  var doubleClickDuration = 250;
625
625
  var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f, withoutBackground = props.withoutBackground;
626
626
  var _g = useState(props.color || Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
627
627
  var initColorVal = useState(props.color || Colors.BUTTON)[0];
628
- var buttonRef = useRef(null);
628
+ var buttonRef = useRef();
629
629
  var clickAndDoubleClickHandler = function (eNative, e, handler) {
630
630
  hideLastDoughTooltip();
631
631
  if (buttonRef && buttonRef.current) {
@@ -752,18 +752,29 @@ var Button = function (props) {
752
752
  props.label && React.createElement(React.Fragment, null, props.label),
753
753
  !props.label && props.children),
754
754
  props.icon && alignIconRight && (React.createElement("div", { className: "dough-button-icon" }, props.icon)))); };
755
+ function getRef() {
756
+ return function (node) {
757
+ buttonRef.current = node;
758
+ if (typeof externalRef === "function") {
759
+ externalRef(node);
760
+ }
761
+ else if (externalRef) {
762
+ externalRef.current = node;
763
+ }
764
+ };
765
+ }
755
766
  return (React.createElement(React.Fragment, null,
756
- type === ButtonInputType.LINK && (React.createElement(Link, __assign({ ref: buttonRef, className: cn("dough-button-wrapper", props.className, {
767
+ type === ButtonInputType.LINK && (React.createElement(Link, __assign({ ref: getRef(), className: cn("dough-button-wrapper", props.className, {
757
768
  "dough-button-full-width": props.fullWidth,
758
769
  "dough-link-no-underline": type === ButtonInputType.LINK,
759
770
  }), disabled: props.disabled, onClick: clickHandler, dataAttributes: props.dataAttributes }, linkProps), getButtonContent())),
760
- type !== ButtonInputType.LINK && (React.createElement("button", __assign({ ref: buttonRef, type: type, autoFocus: props.autoFocus, name: props.name, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
771
+ type !== ButtonInputType.LINK && (React.createElement("button", __assign({ ref: getRef(), type: type, autoFocus: props.autoFocus, name: props.name, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
761
772
  "dough-button-full-width": props.fullWidth,
762
773
  "dough-button-not-clickable": !props.onClick &&
763
774
  !props.onDoubleClick &&
764
775
  type === ButtonInputType.BUTTON,
765
776
  }), disabled: props.disabled, onClick: clickHandler, onDoubleClick: doubleClickHandler }, props.dataAttributes), getButtonContent()))));
766
- };
777
+ });
767
778
  Button.displayName = "Button";
768
779
 
769
780
  var css_248z$3 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-toggle {\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n border-radius: 40px;\n position: relative;\n cursor: pointer;\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-toggle {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: auto;\n height: auto;\n overflow: visible;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border-radius: 100%;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(0);\n}\nbody:not(.no-transition) .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(0.5);\n position: absolute;\n top: -8px;\n right: -8px;\n bottom: -8px;\n left: -8px;\n z-index: 15;\n width: auto;\n height: auto;\n opacity: 0.5;\n background-color: transparent !important;\n border: 3px solid rgba(0, 0, 0, 0);\n border-radius: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n display: none;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-background {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-theme {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-white {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-primary {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-light {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-dark {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-button {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-like {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning-light {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-danger {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-1 {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-2 {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-3 {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-4 {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-5 {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-1 {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-2 {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-3 {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-4 {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-5 {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-6 {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-transparent {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: transform 450ms cubic-bezier(0.75, 1.8, 0.25, 0.75);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: transform 1350ms cubic-bezier(0.25, 1, 0, 1), opacity 750ms 100ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle.dough-toggle-toggled {\n background-color: transparent;\n color: #ffffff;\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background {\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(1.2);\n opacity: 0;\n}\n.dough-toggle.dough-toggle-size-none {\n width: 0;\n height: 0;\n}\n.dough-toggle.dough-toggle-size-huge {\n width: 48px;\n height: 48px;\n}\n.dough-toggle.dough-toggle-size-extra-large {\n width: 40px;\n height: 40px;\n}\n.dough-toggle.dough-toggle-size-large {\n width: 32px;\n height: 32px;\n}\n.dough-toggle.dough-toggle-size-normal {\n width: 24px;\n height: 24px;\n}\n.dough-toggle.dough-toggle-size-small {\n width: 16px;\n height: 16px;\n}\n.dough-toggle.dough-toggle-size-extra-small {\n width: 8px;\n height: 8px;\n}\n.dough-toggle.dough-toggle-size-tiny {\n width: 4px;\n height: 4px;\n}\n.dough-toggle > .dough-toggle-icon-wrapper {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-icon-wrapper {\n line-height: normal;\n}\n.dough-toggle * {\n pointer-events: none;\n}\n.dough-toggle.dough-toggle-disabled, .dough-toggle.dough-toggle-readonly {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled *, .dough-toggle.dough-toggle-readonly * {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled {\n opacity: 0.5;\n}";
@@ -4019,7 +4030,7 @@ var Switch = forwardRef(function (props, ref) {
4019
4030
  });
4020
4031
  Switch.displayName = "Switch";
4021
4032
 
4022
- var RadioOption = function (props) { return (React.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React.createElement(CheckCircle, null), label: props.label, onChange: function (val) {
4033
+ var RadioOption = function (props) { return (React.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React.createElement(CheckCircle, null), dataAttributes: props.dataAttributes, label: props.label, onChange: function (val) {
4023
4034
  if (val && props.onSelected) {
4024
4035
  props.onSelected(props.value);
4025
4036
  }
@@ -4507,7 +4518,7 @@ var PanelOverlay = function (props) {
4507
4518
  };
4508
4519
  PanelOverlay.displayName = "PanelOverlay";
4509
4520
 
4510
- 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}";
4521
+ 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}";
4511
4522
  styleInject(css_248z$x);
4512
4523
 
4513
4524
  var DesignTokens = {
@@ -4697,8 +4708,11 @@ var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
4697
4708
  var isStandardColor = function (color) {
4698
4709
  return Object.values(Colors).includes(color);
4699
4710
  };
4711
+ var isFixedColor = function (color) {
4712
+ return Object.values(FixedColors).includes(color);
4713
+ };
4700
4714
  var getColorWithFallback = function (color) {
4701
- return isStandardColor(color) ? "var(--" + color + ")" : color;
4715
+ return isStandardColor(color) || isFixedColor(color) ? "var(--" + color + ")" : color;
4702
4716
  };
4703
4717
 
4704
4718
  var ProgressBar = function (_a) {
package/dist/index.js CHANGED
@@ -612,14 +612,14 @@ Link.displayName = "Link";
612
612
  ButtonInputType["SUBMIT"] = "submit";
613
613
  ButtonInputType["LINK"] = "link";
614
614
  })(exports.ButtonInputType || (exports.ButtonInputType = {}));
615
- var Button = function (props) {
615
+ var Button = React.forwardRef(function (props, externalRef) {
616
616
  var doubleClickPrevent = false;
617
617
  var clickTime = 0;
618
618
  var doubleClickDuration = 250;
619
619
  var _a = props.alignIconRight, alignIconRight = _a === void 0 ? false : _a, _b = props.shadow, shadow = _b === void 0 ? true : _b, _c = props.padding, padding = _c === void 0 ? true : _c, _d = props.size, size = _d === void 0 ? exports.Sizes.SMALL : _d, _e = props.type, type = _e === void 0 ? exports.ButtonInputType.BUTTON : _e, _f = props.linkProps, linkProps = _f === void 0 ? {} : _f, withoutBackground = props.withoutBackground;
620
620
  var _g = React.useState(props.color || exports.Colors.BUTTON), colorVal = _g[0], setColorVal = _g[1];
621
621
  var initColorVal = React.useState(props.color || exports.Colors.BUTTON)[0];
622
- var buttonRef = React.useRef(null);
622
+ var buttonRef = React.useRef();
623
623
  var clickAndDoubleClickHandler = function (eNative, e, handler) {
624
624
  hideLastDoughTooltip();
625
625
  if (buttonRef && buttonRef.current) {
@@ -746,18 +746,29 @@ var Button = function (props) {
746
746
  props.label && React__default.createElement(React__default.Fragment, null, props.label),
747
747
  !props.label && props.children),
748
748
  props.icon && alignIconRight && (React__default.createElement("div", { className: "dough-button-icon" }, props.icon)))); };
749
+ function getRef() {
750
+ return function (node) {
751
+ buttonRef.current = node;
752
+ if (typeof externalRef === "function") {
753
+ externalRef(node);
754
+ }
755
+ else if (externalRef) {
756
+ externalRef.current = node;
757
+ }
758
+ };
759
+ }
749
760
  return (React__default.createElement(React__default.Fragment, null,
750
- type === exports.ButtonInputType.LINK && (React__default.createElement(Link, __assign({ ref: buttonRef, className: cn("dough-button-wrapper", props.className, {
761
+ type === exports.ButtonInputType.LINK && (React__default.createElement(Link, __assign({ ref: getRef(), className: cn("dough-button-wrapper", props.className, {
751
762
  "dough-button-full-width": props.fullWidth,
752
763
  "dough-link-no-underline": type === exports.ButtonInputType.LINK,
753
764
  }), disabled: props.disabled, onClick: clickHandler, dataAttributes: props.dataAttributes }, linkProps), getButtonContent())),
754
- type !== exports.ButtonInputType.LINK && (React__default.createElement("button", __assign({ ref: buttonRef, type: type, autoFocus: props.autoFocus, name: props.name, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
765
+ type !== exports.ButtonInputType.LINK && (React__default.createElement("button", __assign({ ref: getRef(), type: type, autoFocus: props.autoFocus, name: props.name, tabIndex: props.tabIndex === undefined ? 0 : props.tabIndex, className: cn("dough-button-wrapper", props.className, {
755
766
  "dough-button-full-width": props.fullWidth,
756
767
  "dough-button-not-clickable": !props.onClick &&
757
768
  !props.onDoubleClick &&
758
769
  type === exports.ButtonInputType.BUTTON,
759
770
  }), disabled: props.disabled, onClick: clickHandler, onDoubleClick: doubleClickHandler }, props.dataAttributes), getButtonContent()))));
760
- };
771
+ });
761
772
  Button.displayName = "Button";
762
773
 
763
774
  var css_248z$3 = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-toggle {\n display: inline-block;\n -webkit-tap-highlight-color: transparent;\n border-radius: 40px;\n position: relative;\n cursor: pointer;\n overflow: visible;\n box-sizing: border-box;\n pointer-events: all;\n z-index: 100;\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\n.dough-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent;\n}\nbody:not(.no-transition) .dough-toggle {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: -1;\n width: auto;\n height: auto;\n overflow: visible;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 10;\n width: auto;\n height: auto;\n border-radius: 100%;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(0);\n}\nbody:not(.no-transition) .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(0.5);\n position: absolute;\n top: -8px;\n right: -8px;\n bottom: -8px;\n left: -8px;\n z-index: 15;\n width: auto;\n height: auto;\n opacity: 0.5;\n background-color: transparent !important;\n border: 3px solid rgba(0, 0, 0, 0);\n border-radius: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n display: none;\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-background {\n border-color: #eceffb;\n border-color: var(--dough-color-background);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-theme {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-theme);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-white {\n border-color: rgb(255, 255, 255);\n border-color: var(--dough-color-white);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-primary {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-header);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-light {\n border-color: rgb(94, 162, 233);\n border-color: var(--dough-color-header-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-header-dark {\n border-color: rgb(47, 101, 159);\n border-color: var(--dough-color-header-dark);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-button {\n border-color: rgb(71, 170, 60);\n border-color: var(--dough-color-button);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-like {\n border-color: rgb(242, 64, 37);\n border-color: var(--dough-color-like);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning-light {\n border-color: rgb(255, 239, 221);\n border-color: var(--dough-color-status-warning-light);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-status-danger {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-1 {\n border-color: rgb(250, 75, 52);\n border-color: var(--dough-color-selector-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-2 {\n border-color: rgb(255, 168, 34);\n border-color: var(--dough-color-selector-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-3 {\n border-color: rgb(0, 145, 255);\n border-color: var(--dough-color-selector-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-4 {\n border-color: rgb(20, 202, 215);\n border-color: var(--dough-color-selector-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-selector-5 {\n border-color: rgb(143, 0, 255);\n border-color: var(--dough-color-selector-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-1 {\n border-color: rgb(68, 68, 68);\n border-color: var(--dough-color-gray-1);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-2 {\n border-color: rgb(105, 105, 105);\n border-color: var(--dough-color-gray-2);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-3 {\n border-color: rgb(159, 159, 159);\n border-color: var(--dough-color-gray-3);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-4 {\n border-color: rgb(210, 210, 210);\n border-color: var(--dough-color-gray-4);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-5 {\n border-color: rgb(230, 230, 230);\n border-color: var(--dough-color-gray-5);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-gray-6 {\n border-color: rgb(245, 245, 245);\n border-color: var(--dough-color-gray-6);\n}\n.dough-toggle > .dough-toggle-background-wrapper > .dough-toggle-background-grow.dough-color-transparent {\n border-color: rgba(255, 255, 255, 0);\n border-color: var(--dough-color-transparent);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: transform 450ms cubic-bezier(0.75, 1.8, 0.25, 0.75);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\nhtml.dough-IE11 .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background {\n transition: all 500ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody:not(.no-transition) .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: transform 1350ms cubic-bezier(0.25, 1, 0, 1), opacity 750ms 100ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-toggle.dough-toggle-animate > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-toggle.dough-toggle-toggled {\n background-color: transparent;\n color: #ffffff;\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background {\n transform: translate3d(0, 0, 0) scale(1);\n}\n.dough-toggle.dough-toggle-toggled > .dough-toggle-background-wrapper > .dough-toggle-background-grow {\n transform: translate3d(0, 0, 0) scale(1.2);\n opacity: 0;\n}\n.dough-toggle.dough-toggle-size-none {\n width: 0;\n height: 0;\n}\n.dough-toggle.dough-toggle-size-huge {\n width: 48px;\n height: 48px;\n}\n.dough-toggle.dough-toggle-size-extra-large {\n width: 40px;\n height: 40px;\n}\n.dough-toggle.dough-toggle-size-large {\n width: 32px;\n height: 32px;\n}\n.dough-toggle.dough-toggle-size-normal {\n width: 24px;\n height: 24px;\n}\n.dough-toggle.dough-toggle-size-small {\n width: 16px;\n height: 16px;\n}\n.dough-toggle.dough-toggle-size-extra-small {\n width: 8px;\n height: 8px;\n}\n.dough-toggle.dough-toggle-size-tiny {\n width: 4px;\n height: 4px;\n}\n.dough-toggle > .dough-toggle-icon-wrapper {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 0;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100%;\n height: 100%;\n}\nhtml.dough-IE11 .dough-toggle > .dough-toggle-icon-wrapper {\n line-height: normal;\n}\n.dough-toggle * {\n pointer-events: none;\n}\n.dough-toggle.dough-toggle-disabled, .dough-toggle.dough-toggle-readonly {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled *, .dough-toggle.dough-toggle-readonly * {\n pointer-events: none !important;\n}\n.dough-toggle.dough-toggle-disabled {\n opacity: 0.5;\n}";
@@ -4003,7 +4014,7 @@ var Switch = React.forwardRef(function (props, ref) {
4003
4014
  });
4004
4015
  Switch.displayName = "Switch";
4005
4016
 
4006
- var RadioOption = function (props) { return (React__default.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React__default.createElement(CheckCircle, null), label: props.label, onChange: function (val) {
4017
+ var RadioOption = function (props) { return (React__default.createElement(CheckBox, { className: props.className, inputClassName: props.inputClassName, readOnly: props.readOnly, disabled: props.disabled, checkOnly: true, color: props.color, icon: React__default.createElement(CheckCircle, null), dataAttributes: props.dataAttributes, label: props.label, onChange: function (val) {
4007
4018
  if (val && props.onSelected) {
4008
4019
  props.onSelected(props.value);
4009
4020
  }
@@ -4490,7 +4501,7 @@ var PanelOverlay = function (props) {
4490
4501
  };
4491
4502
  PanelOverlay.displayName = "PanelOverlay";
4492
4503
 
4493
- 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}";
4504
+ 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}";
4494
4505
  styleInject(css_248z$x);
4495
4506
 
4496
4507
  var DesignTokens = {
@@ -4680,8 +4691,11 @@ var generateStyles = function (props, selector, propToStyleMap, noMediaQuery) {
4680
4691
  var isStandardColor = function (color) {
4681
4692
  return Object.values(exports.Colors).includes(color);
4682
4693
  };
4694
+ var isFixedColor = function (color) {
4695
+ return Object.values(exports.FixedColors).includes(color);
4696
+ };
4683
4697
  var getColorWithFallback = function (color) {
4684
- return isStandardColor(color) ? "var(--" + color + ")" : color;
4698
+ return isStandardColor(color) || isFixedColor(color) ? "var(--" + color + ")" : color;
4685
4699
  };
4686
4700
 
4687
4701
  var ProgressBar = function (_a) {
package/dist/src/components/button/button.stories.d.ts CHANGED
@@ -1,5 +1,6 @@
1
+ import React from "react";
1
2
  import { ButtonProps } from "./button";
2
- declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, ButtonProps>;
3
+ declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, ButtonProps & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
3
4
  export default _default;
4
5
  export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ButtonProps & {
5
6
  width: string;
package/dist/src/components/progress-bar/multi-progress-bar.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import "./progress-bar.scss";
2
+ import { Colors, DoughDataAttributes, FixedColors } from "../../utils/constants";
3
+ export interface Bar {
4
+ color: Colors | FixedColors | string;
5
+ value: number;
6
+ }
7
+ export interface MultiProgressBarProps {
8
+ className?: string;
9
+ dataAttributes?: DoughDataAttributes;
10
+ total: number;
11
+ railColor?: Colors | string;
12
+ data: Array<Bar>;
13
+ }
14
+ export declare const MultiProgressBar: {
15
+ ({ dataAttributes, className, railColor, data, total, }: MultiProgressBarProps): JSX.Element;
16
+ displayName: string;
17
+ };
package/dist/src/components/progress-bar/multi-progress-bar.stories.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
2
+ export default _default;
3
+ export declare const Empty: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
4
+ export declare const SingleData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
5
+ export declare const MultipleData: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
6
+ export declare const FullyFilled: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("./multi-progress-bar").MultiProgressBarProps>;
package/dist/utils/styles.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { Colors } from "./constants";
1
+ import { Colors, FixedColors } from "./constants";
2
2
  export declare const getIESpecificStyles: (props: Record<string, any>, propToStyleMap: Record<string, Array<string>>) => string;
3
3
  export declare const generateStyles: (props: Record<string, any>, selector: string, propToStyleMap: Record<string, Array<string>>, noMediaQuery?: boolean | undefined) => string;
4
4
  export declare const isStandardColor: (color: Colors | string) => color is Colors;
5
- export declare const getColorWithFallback: (color: Colors | string) => string;
5
+ export declare const isFixedColor: (color: FixedColors | string) => color is FixedColors;
6
+ export declare const getColorWithFallback: (color: Colors | FixedColors | string) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@speakapbv/dough-component-library",
3
- "version": "10.0.0",
3
+ "version": "10.1.0",
4
4
  "description": "DOUGH: Speakap React Component Library",
5
5
  "author": "Speakap",
6
6
  "license": "MIT",