@speakapbv/dough-component-library 9.31.2 → 9.32.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.
|
@@ -10,6 +10,8 @@ export interface NotificationProps {
|
|
|
10
10
|
onClick?(e?: MouseEvent): void;
|
|
11
11
|
onHide?(show?: false): void;
|
|
12
12
|
onShow?(show?: true): void;
|
|
13
|
+
onMouseEnter?(): void;
|
|
14
|
+
onMouseLeave?(): void;
|
|
13
15
|
horizontalAlignSelf?: HorizontalAlignment.CENTER | HorizontalAlignment.LEFT | HorizontalAlignment.RIGHT;
|
|
14
16
|
verticalAlignSelf?: VerticalAlignment;
|
|
15
17
|
type?: AlertStatus | "none";
|
package/dist/index.es.js
CHANGED
|
@@ -4725,7 +4725,7 @@ var AlertText = function (props) {
|
|
|
4725
4725
|
};
|
|
4726
4726
|
AlertText.displayName = "AlertText";
|
|
4727
4727
|
|
|
4728
|
-
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(
|
|
4728
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(16px, 0, 0);\n transform-origin: top center;\n font-family: \"Roboto\", sans-serif;\n border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n position: absolute;\n top: 4px;\n right: 4px;\n width: auto;\n height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n display: inline-block;\n width: auto !important;\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n width: 24px;\n height: 24px;\n box-sizing: border-box;\n border-radius: 100%;\n border: 2px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n width: 70%;\n height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n fill: rgb(68, 132, 199);\n fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n fill: rgb(0, 136, 0);\n fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n fill: rgb(255, 136, 0);\n fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n fill: rgb(191, 41, 0);\n fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n padding-right: 12px;\n}";
|
|
4729
4729
|
styleInject(css_248z$z);
|
|
4730
4730
|
|
|
4731
4731
|
var Notification = function (props) {
|
|
@@ -4786,7 +4786,7 @@ var Notification = function (props) {
|
|
|
4786
4786
|
return (React.createElement(React.Fragment, null, !isClosed &&
|
|
4787
4787
|
show &&
|
|
4788
4788
|
props.children &&
|
|
4789
|
-
createPortal(React.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4789
|
+
createPortal(React.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, onMouseEnter: props.onMouseEnter ? props.onMouseEnter : undefined, onMouseLeave: props.onMouseLeave ? props.onMouseLeave : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4790
4790
|
"dough-notification-as-toast": props.toast,
|
|
4791
4791
|
"dough-notification-show": showNotification,
|
|
4792
4792
|
"dough-notification-clickable": props.onClick,
|
package/dist/index.js
CHANGED
|
@@ -4708,7 +4708,7 @@ var AlertText = function (props) {
|
|
|
4708
4708
|
};
|
|
4709
4709
|
AlertText.displayName = "AlertText";
|
|
4710
4710
|
|
|
4711
|
-
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(
|
|
4711
|
+
var css_248z$z = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-notification-wrapper {\n pointer-events: all;\n width: 100%;\n margin-bottom: 8px;\n position: relative;\n opacity: 0;\n transform: translate3d(16px, 0, 0);\n transform-origin: top center;\n font-family: \"Roboto\", sans-serif;\n border-radius: 12px;\n}\nbody:not(.no-transition) .dough-notification-wrapper {\n transition: all 1000ms cubic-bezier(0.25, 1.3, 0, 1);\n}\nbody.no-transition .dough-notification-wrapper {\n transition: none 0ms linear !important;\n transition-delay: 0ms !important;\n}\n.dough-notification-wrapper.dough-notification-clickable {\n cursor: pointer;\n}\n.dough-notification-wrapper.dough-notification-show {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n pointer-events: fill;\n}\n.dough-notification-wrapper > .dough-notification-close-button {\n position: absolute;\n top: 4px;\n right: 4px;\n width: auto;\n height: auto;\n}\n.dough-notification-wrapper > .dough-notification-close-button > .dough-button {\n width: 24px;\n height: 24px;\n min-width: 24px;\n min-height: 24px;\n}\n.dough-notification-wrapper .dough-notification-card {\n box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.2);\n}\n.dough-notification-wrapper.dough-notification-as-toast {\n text-align: center;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card {\n display: inline-block;\n width: auto !important;\n background-color: rgba(0, 0, 0, 0.75) !important;\n}\n.dough-notification-wrapper.dough-notification-as-toast .dough-notification-card .dough-notification-content-container {\n padding-right: 0;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper {\n width: 24px;\n height: 24px;\n box-sizing: border-box;\n border-radius: 100%;\n border: 2px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper > .dough-inline-svg-icon {\n width: 70%;\n height: 70%;\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral {\n border-color: rgb(68, 132, 199);\n border-color: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-neutral > .dough-inline-svg-icon path {\n fill: rgb(68, 132, 199);\n fill: var(--dough-color-primary);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success {\n border-color: rgb(0, 136, 0);\n border-color: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-success > .dough-inline-svg-icon path {\n fill: rgb(0, 136, 0);\n fill: var(--dough-color-status-success);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning {\n border-color: rgb(255, 136, 0);\n border-color: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-warning > .dough-inline-svg-icon path {\n fill: rgb(255, 136, 0);\n fill: var(--dough-color-status-warning);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error {\n border-color: rgb(191, 41, 0);\n border-color: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-icon-wrapper.dough-notification-type-error > .dough-inline-svg-icon path {\n fill: rgb(191, 41, 0);\n fill: var(--dough-color-status-danger);\n}\n.dough-notification-wrapper .dough-notification-title-container,\n.dough-notification-wrapper .dough-notification-content-container {\n padding-right: 12px;\n}";
|
|
4712
4712
|
styleInject(css_248z$z);
|
|
4713
4713
|
|
|
4714
4714
|
var Notification = function (props) {
|
|
@@ -4769,7 +4769,7 @@ var Notification = function (props) {
|
|
|
4769
4769
|
return (React__default.createElement(React__default.Fragment, null, !isClosed &&
|
|
4770
4770
|
show &&
|
|
4771
4771
|
props.children &&
|
|
4772
|
-
reactDom.createPortal(React__default.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4772
|
+
reactDom.createPortal(React__default.createElement("div", __assign({ onClick: props.onClick ? handleClick : undefined, onMouseEnter: props.onMouseEnter ? props.onMouseEnter : undefined, onMouseLeave: props.onMouseLeave ? props.onMouseLeave : undefined, className: cn("dough-notification-wrapper", props.className, {
|
|
4773
4773
|
"dough-notification-as-toast": props.toast,
|
|
4774
4774
|
"dough-notification-show": showNotification,
|
|
4775
4775
|
"dough-notification-clickable": props.onClick,
|