@guardian/stand 0.0.75 → 0.0.76
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/dist/components/AlertBanner/AlertBanner.cjs +1 -1
- package/dist/components/AlertBanner/AlertBanner.js +1 -1
- package/dist/styleD/build/css/component/alertBanner.css +4 -1
- package/dist/styleD/build/css/component/badge.css +2 -2
- package/dist/styleD/build/typescript/component/alertBanner.cjs +17 -6
- package/dist/styleD/build/typescript/component/alertBanner.d.cts +12 -3
- package/dist/styleD/build/typescript/component/alertBanner.d.ts +12 -3
- package/dist/styleD/build/typescript/component/alertBanner.js +17 -6
- package/dist/styleD/build/typescript/component/badge.cjs +2 -2
- package/dist/styleD/build/typescript/component/badge.js +2 -2
- package/package.json +1 -1
|
@@ -24,7 +24,7 @@ function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children
|
|
|
24
24
|
css: require_styles.alertBannerContentStyles(mergedTheme),
|
|
25
25
|
children: [showIcon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_Icon.Icon, {
|
|
26
26
|
size: "md",
|
|
27
|
-
fill: mergedTheme.
|
|
27
|
+
fill: mergedTheme[level].icon.color,
|
|
28
28
|
children: determinedIcon
|
|
29
29
|
}), children]
|
|
30
30
|
}), closeButtonProps && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_IconButton.IconButton, {
|
|
@@ -24,7 +24,7 @@ function AlertBanner({ level, showIcon = false, icon, closeButtonProps, children
|
|
|
24
24
|
css: alertBannerContentStyles(mergedTheme),
|
|
25
25
|
children: [showIcon && /* @__PURE__ */ jsx(Icon, {
|
|
26
26
|
size: "md",
|
|
27
|
-
fill: mergedTheme.
|
|
27
|
+
fill: mergedTheme[level].icon.color,
|
|
28
28
|
children: determinedIcon
|
|
29
29
|
}), children]
|
|
30
30
|
}), closeButtonProps && /* @__PURE__ */ jsx(IconButton, {
|
|
@@ -23,9 +23,12 @@
|
|
|
23
23
|
0.875rem/1.3 'Open Sans';
|
|
24
24
|
--component-alert-banner-shared-content-typography-letter-spacing: 0rem;
|
|
25
25
|
--component-alert-banner-shared-content-typography-font-width: 95;
|
|
26
|
-
--component-alert-banner-shared-content-icon-color: #545454;
|
|
27
26
|
--component-alert-banner-information-background-color: #e8f0fb;
|
|
27
|
+
--component-alert-banner-information-icon-color: #00344e;
|
|
28
28
|
--component-alert-banner-success-background-color: #cde4c9;
|
|
29
|
+
--component-alert-banner-success-icon-color: #326528;
|
|
29
30
|
--component-alert-banner-warning-background-color: #ffedac;
|
|
31
|
+
--component-alert-banner-warning-icon-color: #433608;
|
|
30
32
|
--component-alert-banner-error-background-color: #f5c6c0;
|
|
33
|
+
--component-alert-banner-error-icon-color: #8c2113;
|
|
31
34
|
}
|
|
@@ -7,9 +7,9 @@
|
|
|
7
7
|
--component-badge-shared-align-items: center;
|
|
8
8
|
--component-badge-shared-justify-content: center;
|
|
9
9
|
--component-badge-size-md-padding-top: 4px;
|
|
10
|
-
--component-badge-size-md-padding-right:
|
|
10
|
+
--component-badge-size-md-padding-right: 10px;
|
|
11
11
|
--component-badge-size-md-padding-bottom: 4px;
|
|
12
|
-
--component-badge-size-md-padding-left:
|
|
12
|
+
--component-badge-size-md-padding-left: 10px;
|
|
13
13
|
--component-badge-size-md-weight-strong-typography-font: normal 700 1rem/1.15
|
|
14
14
|
'Open Sans';
|
|
15
15
|
--component-badge-size-md-weight-strong-typography-letter-spacing: -0.03125rem;
|
|
@@ -27,14 +27,25 @@ const componentAlertBanner = {
|
|
|
27
27
|
font: "normal 460 0.875rem/1.3 Open Sans",
|
|
28
28
|
letterSpacing: "0rem",
|
|
29
29
|
fontWidth: 95
|
|
30
|
-
}
|
|
31
|
-
icon: { color: "#545454" }
|
|
30
|
+
}
|
|
32
31
|
}
|
|
33
32
|
},
|
|
34
|
-
information: {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
information: {
|
|
34
|
+
backgroundColor: "#e8f0fb",
|
|
35
|
+
icon: { color: "#00344e" }
|
|
36
|
+
},
|
|
37
|
+
success: {
|
|
38
|
+
backgroundColor: "#cde4c9",
|
|
39
|
+
icon: { color: "#326528" }
|
|
40
|
+
},
|
|
41
|
+
warning: {
|
|
42
|
+
backgroundColor: "#ffedac",
|
|
43
|
+
icon: { color: "#433608" }
|
|
44
|
+
},
|
|
45
|
+
error: {
|
|
46
|
+
backgroundColor: "#f5c6c0",
|
|
47
|
+
icon: { color: "#8c2113" }
|
|
48
|
+
}
|
|
38
49
|
};
|
|
39
50
|
//#endregion
|
|
40
51
|
exports.componentAlertBanner = componentAlertBanner;
|
|
@@ -28,22 +28,31 @@ export declare const componentAlertBanner: {
|
|
|
28
28
|
letterSpacing: string;
|
|
29
29
|
fontWidth: number;
|
|
30
30
|
};
|
|
31
|
-
icon: {
|
|
32
|
-
color: string;
|
|
33
|
-
};
|
|
34
31
|
};
|
|
35
32
|
};
|
|
36
33
|
information: {
|
|
37
34
|
backgroundColor: string;
|
|
35
|
+
icon: {
|
|
36
|
+
color: string;
|
|
37
|
+
};
|
|
38
38
|
};
|
|
39
39
|
success: {
|
|
40
40
|
backgroundColor: string;
|
|
41
|
+
icon: {
|
|
42
|
+
color: string;
|
|
43
|
+
};
|
|
41
44
|
};
|
|
42
45
|
warning: {
|
|
43
46
|
backgroundColor: string;
|
|
47
|
+
icon: {
|
|
48
|
+
color: string;
|
|
49
|
+
};
|
|
44
50
|
};
|
|
45
51
|
error: {
|
|
46
52
|
backgroundColor: string;
|
|
53
|
+
icon: {
|
|
54
|
+
color: string;
|
|
55
|
+
};
|
|
47
56
|
};
|
|
48
57
|
};
|
|
49
58
|
export type ComponentAlertBanner = typeof componentAlertBanner;
|
|
@@ -28,22 +28,31 @@ export declare const componentAlertBanner: {
|
|
|
28
28
|
letterSpacing: string;
|
|
29
29
|
fontWidth: number;
|
|
30
30
|
};
|
|
31
|
-
icon: {
|
|
32
|
-
color: string;
|
|
33
|
-
};
|
|
34
31
|
};
|
|
35
32
|
};
|
|
36
33
|
information: {
|
|
37
34
|
backgroundColor: string;
|
|
35
|
+
icon: {
|
|
36
|
+
color: string;
|
|
37
|
+
};
|
|
38
38
|
};
|
|
39
39
|
success: {
|
|
40
40
|
backgroundColor: string;
|
|
41
|
+
icon: {
|
|
42
|
+
color: string;
|
|
43
|
+
};
|
|
41
44
|
};
|
|
42
45
|
warning: {
|
|
43
46
|
backgroundColor: string;
|
|
47
|
+
icon: {
|
|
48
|
+
color: string;
|
|
49
|
+
};
|
|
44
50
|
};
|
|
45
51
|
error: {
|
|
46
52
|
backgroundColor: string;
|
|
53
|
+
icon: {
|
|
54
|
+
color: string;
|
|
55
|
+
};
|
|
47
56
|
};
|
|
48
57
|
};
|
|
49
58
|
export type ComponentAlertBanner = typeof componentAlertBanner;
|
|
@@ -27,14 +27,25 @@ const componentAlertBanner = {
|
|
|
27
27
|
font: "normal 460 0.875rem/1.3 Open Sans",
|
|
28
28
|
letterSpacing: "0rem",
|
|
29
29
|
fontWidth: 95
|
|
30
|
-
}
|
|
31
|
-
icon: { color: "#545454" }
|
|
30
|
+
}
|
|
32
31
|
}
|
|
33
32
|
},
|
|
34
|
-
information: {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
information: {
|
|
34
|
+
backgroundColor: "#e8f0fb",
|
|
35
|
+
icon: { color: "#00344e" }
|
|
36
|
+
},
|
|
37
|
+
success: {
|
|
38
|
+
backgroundColor: "#cde4c9",
|
|
39
|
+
icon: { color: "#326528" }
|
|
40
|
+
},
|
|
41
|
+
warning: {
|
|
42
|
+
backgroundColor: "#ffedac",
|
|
43
|
+
icon: { color: "#433608" }
|
|
44
|
+
},
|
|
45
|
+
error: {
|
|
46
|
+
backgroundColor: "#f5c6c0",
|
|
47
|
+
icon: { color: "#8c2113" }
|
|
48
|
+
}
|
|
38
49
|
};
|
|
39
50
|
//#endregion
|
|
40
51
|
export { componentAlertBanner };
|