scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in feat/LOY-233-success-banner-for-dtmc-linking (pull request #2328)

Browse Source 
feat(LOY-233): create success banner for successful DTMC linking

* feat(LOY-233): create success banner for successful DTMC linking

* fix(LOY-233): code cleanup

* fix(LOY-233): use new design vars for alert bg colors


Approved-by: Erik Tiekstra
This commit is contained in:
Chuma Mcphoy (We Ahead)
2025-06-11 08:52:28 +00:00
parent b4a05dae0b
commit 144a33fa30
6 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/scandic-web/components/TempDesignSystem/Alert/alert.module.css
View File

@@ -51,13 +51,16 @@
padding: var(--Spacing-x-one-and-half);
}
.inline.alarm .iconWrapper {
background-color: var(--UI-Semantic-Error);
background-color: var(--Surface-Feedback-Error-Accent);
}
.inline.warning .iconWrapper {
background-color: var(--UI-Semantic-Warning);
background-color: var(--Surface-Feedback-Warning-Accent);
}
.inline.info .iconWrapper {
background-color: var(--UI-Semantic-Information);
background-color: var(--Surface-Feedback-Information-Accent);
}
.inline.success .iconWrapper {
background-color: var(--Surface-Feedback-Succes-Accent);
}
.inline .icon,
.inline .icon * {
@@ -70,28 +73,37 @@
border-left-style: solid;
}
.banner.alarm {
border-left-color: var(--UI-Semantic-Error);
border-left-color: var(--Surface-Feedback-Error-Accent);
background-color: var(--Scandic-Red-00);
}
.banner.warning {
border-left-color: var(--UI-Semantic-Warning);
border-left-color: var(--Surface-Feedback-Warning-Accent);
background-color: var(--Scandic-Yellow-00);
}
.banner.info {
border-left-color: var(--UI-Semantic-Information);
border-left-color: var(--Surface-Feedback-Information-Accent);
background-color: var(--Scandic-Blue-00);
}
.banner.success {
border-left-color: var(--Surface-Feedback-Succes-Accent);
background-color: var(--Scandic-Green-00);
}
.banner.alarm .icon,
.banner.alarm .icon * {
fill: var(--UI-Semantic-Error);
fill: var(--Surface-Feedback-Error-Accent);
}
.banner.warning .icon,
.banner.warning .icon * {
fill: var(--UI-Semantic-Warning);
fill: var(--Surface-Feedback-Warning-Accent);
}
.banner.info .icon,
.banner.info .icon * {
fill: var(--UI-Semantic-Information);
fill: var(--Surface-Feedback-Information-Accent);
}
.banner.success .icon,
.banner.sucess .icon * {
fill: var(--Surface-Feedback-Succes-Accent);
}
@media screen and (min-width: 768px) {

11
apps/scandic-web/components/TempDesignSystem/Alert/utils.tsx
View File

@@ -39,6 +39,17 @@ export function IconByAlertType({
{...props}
/>
)
case AlertTypeEnum.Success:
return (
<MaterialIcon
icon="check_circle"
color={
variant === "inline" ? "Icon/Inverted" : "Icon/Feedback/Success"
}
isFilled
{...props}
/>
)
case AlertTypeEnum.Info:
default:
return (

1
apps/scandic-web/components/TempDesignSystem/Alert/variants.ts
View File

@@ -14,6 +14,7 @@ export const alertVariants = cva(styles.alert, {
[AlertTypeEnum.Info]: styles.info,
[AlertTypeEnum.Warning]: styles.warning,
[AlertTypeEnum.Alarm]: styles.alarm,
[AlertTypeEnum.Success]: styles.success,
},
},
defaultVariants: {