@latte-macchiat-io/latte-vanilla-components 0.0.463 → 0.0.464
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.
package/package.json
CHANGED
|
@@ -13,12 +13,13 @@ export type AlertBoxProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
13
13
|
text: string;
|
|
14
14
|
noIcon?: boolean;
|
|
15
15
|
title?: string | null;
|
|
16
|
+
variant: 'info';
|
|
16
17
|
};
|
|
17
18
|
|
|
18
|
-
export const AlertBox = ({ title, text, noIcon = false, className }: AlertBoxProps) => {
|
|
19
|
+
export const AlertBox = ({ title, text, noIcon = false, variant = 'info', className }: AlertBoxProps) => {
|
|
19
20
|
return (
|
|
20
21
|
<Box direction="row">
|
|
21
|
-
{
|
|
22
|
+
{!noIcon && <Icon iconPath={icons.close} size={50} color={themeContract.boxAlert.variant[variant].iconColor} />}
|
|
22
23
|
<div className={alertBoxContent}>
|
|
23
24
|
{title && <Heading as="h4">{title}</Heading>}
|
|
24
25
|
<Paragraph>{text}</Paragraph>
|
|
@@ -719,26 +719,26 @@ export const themeContract = createGlobalThemeContract({
|
|
|
719
719
|
},
|
|
720
720
|
},
|
|
721
721
|
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
722
|
+
boxAlert: {
|
|
723
|
+
variant: {
|
|
724
|
+
warning: {
|
|
725
|
+
iconColor: 'latte-boxAlert-variant-warning-iconColor',
|
|
726
|
+
backgroundColor: 'latte-boxAlert-variant-warning-backgroundColor',
|
|
727
|
+
},
|
|
728
|
+
info: {
|
|
729
|
+
iconColor: 'latte-boxAlert-variant-info-iconColor',
|
|
730
|
+
backgroundColor: 'latte-boxAlert-variant-info-backgroundColor',
|
|
731
|
+
},
|
|
732
|
+
success: {
|
|
733
|
+
iconColor: 'latte-boxAlert-variant-success-iconColor',
|
|
734
|
+
backgroundColor: 'latte-boxAlert-variant-success-backgroundColor',
|
|
735
|
+
},
|
|
736
|
+
danger: {
|
|
737
|
+
iconColor: 'latte-boxAlert-variant-danger-iconColor',
|
|
738
|
+
backgroundColor: 'latte-boxAlert-variant-danger-backgroundColor',
|
|
739
|
+
},
|
|
740
|
+
},
|
|
741
|
+
},
|
|
742
742
|
|
|
743
743
|
modal: {
|
|
744
744
|
border: 'latte-modal-border',
|
package/src/theme/createTheme.ts
CHANGED
|
@@ -35,7 +35,7 @@ export type ThemeOverrides = {
|
|
|
35
35
|
form?: Partial<typeof baseLightTheme.form>;
|
|
36
36
|
logo?: Partial<typeof baseLightTheme.logo>;
|
|
37
37
|
box?: Partial<typeof baseLightTheme.box>;
|
|
38
|
-
|
|
38
|
+
boxAlert?: Partial<typeof baseLightTheme.boxAlert>;
|
|
39
39
|
consentCookie?: Partial<typeof baseLightTheme.consentCookie>;
|
|
40
40
|
};
|
|
41
41
|
|
|
@@ -73,7 +73,7 @@ const createAppTheme = (selector: string, overrides: ThemeOverrides = {}) => {
|
|
|
73
73
|
form: { ...baseLightTheme.form, ...overrides.form },
|
|
74
74
|
logo: { ...baseLightTheme.logo, ...overrides.logo },
|
|
75
75
|
box: { ...baseLightTheme.box, ...overrides.box },
|
|
76
|
-
|
|
76
|
+
boxAlert: { ...baseLightTheme.boxAlert, ...overrides.boxAlert },
|
|
77
77
|
consentCookie: { ...baseLightTheme.consentCookie, ...overrides.consentCookie },
|
|
78
78
|
});
|
|
79
79
|
};
|
|
@@ -112,7 +112,7 @@ const createAppDarkTheme = (selector: string, overrides: ThemeOverrides = {}) =>
|
|
|
112
112
|
form: { ...baseDarkTheme.form, ...overrides.form },
|
|
113
113
|
logo: { ...baseDarkTheme.logo, ...overrides.logo },
|
|
114
114
|
box: { ...baseDarkTheme.box, ...overrides.box },
|
|
115
|
-
|
|
115
|
+
boxAlert: { ...baseDarkTheme.boxAlert, ...overrides.boxAlert },
|
|
116
116
|
consentCookie: { ...baseDarkTheme.consentCookie, ...overrides.consentCookie },
|
|
117
117
|
});
|
|
118
118
|
};
|