@speakapbv/dough-component-library 9.31.1 → 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";
|
|
@@ -25,35 +25,32 @@ export interface TypoProps {
|
|
|
25
25
|
color?: string;
|
|
26
26
|
component?: string;
|
|
27
27
|
}
|
|
28
|
-
declare type TypoHeaderProps = Omit<TypoProps, "bold"> & {
|
|
29
|
-
regular?: boolean;
|
|
30
|
-
};
|
|
31
28
|
export declare const H1: {
|
|
32
|
-
(props:
|
|
29
|
+
(props: TypoProps): JSX.Element;
|
|
33
30
|
displayName: string;
|
|
34
31
|
};
|
|
35
32
|
export declare const H2: {
|
|
36
|
-
(props:
|
|
33
|
+
(props: TypoProps): JSX.Element;
|
|
37
34
|
displayName: string;
|
|
38
35
|
};
|
|
39
36
|
export declare const H3: {
|
|
40
|
-
(props:
|
|
37
|
+
(props: TypoProps): JSX.Element;
|
|
41
38
|
displayName: string;
|
|
42
39
|
};
|
|
43
40
|
export declare const H4: {
|
|
44
|
-
(props:
|
|
41
|
+
(props: TypoProps): JSX.Element;
|
|
45
42
|
displayName: string;
|
|
46
43
|
};
|
|
47
44
|
export declare const H5: {
|
|
48
|
-
(props:
|
|
45
|
+
(props: TypoProps): JSX.Element;
|
|
49
46
|
displayName: string;
|
|
50
47
|
};
|
|
51
48
|
export declare const H6: {
|
|
52
|
-
(props:
|
|
49
|
+
(props: TypoProps): JSX.Element;
|
|
53
50
|
displayName: string;
|
|
54
51
|
};
|
|
55
52
|
export declare const H7: {
|
|
56
|
-
(props:
|
|
53
|
+
(props: TypoProps): JSX.Element;
|
|
57
54
|
displayName: string;
|
|
58
55
|
};
|
|
59
56
|
export declare const Subtitle: {
|
|
@@ -76,4 +73,3 @@ export declare const DoughListItem: {
|
|
|
76
73
|
(props: TypoProps): JSX.Element;
|
|
77
74
|
displayName: string;
|
|
78
75
|
};
|
|
79
|
-
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -883,7 +883,7 @@ var TextElement = function (props) {
|
|
|
883
883
|
}) }, props.dataAttributes), props.children);
|
|
884
884
|
};
|
|
885
885
|
var HeaderElement = function (props) { return (React.createElement(TextElement, __assign({}, props, { className: cn(props.className, {
|
|
886
|
-
"dough-header-regular": props.
|
|
886
|
+
"dough-header-regular": props.bold === false,
|
|
887
887
|
}) }))); };
|
|
888
888
|
var H1 = function (props) { return (React.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
|
|
889
889
|
H1.displayName = "H1";
|
|
@@ -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
|
@@ -876,7 +876,7 @@ var TextElement = function (props) {
|
|
|
876
876
|
}) }, props.dataAttributes), props.children);
|
|
877
877
|
};
|
|
878
878
|
var HeaderElement = function (props) { return (React__default.createElement(TextElement, __assign({}, props, { className: cn(props.className, {
|
|
879
|
-
"dough-header-regular": props.
|
|
879
|
+
"dough-header-regular": props.bold === false,
|
|
880
880
|
}) }))); };
|
|
881
881
|
var H1 = function (props) { return (React__default.createElement(HeaderElement, __assign({}, props, { className: cn(props.className, "dough-text-h1"), component: props.component ? props.component : "h1" }))); };
|
|
882
882
|
H1.displayName = "H1";
|
|
@@ -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,
|