feat(SW-498): Added Alert component

2024-10-16 15:18:43 +02:00
parent bcee55c359
commit e41bf86993
6 changed files with 229 additions and 0 deletions
--- a/components/TempDesignSystem/Alert/alert.module.css
+++ b/components/TempDesignSystem/Alert/alert.module.css
@@ -0,0 +1,106 @@
+.alert {
+  display: flex;
+  gap: var(--Spacing-x2);
+  overflow: hidden;
+}
+
+.iconWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2)
+    var(--Spacing-x-one-and-half) 0;
+  flex-grow: 1;
+}
+
+.textWrapper {
+  display: grid;
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1) 0;
+}
+
+.sidepeekCta {
+  flex-shrink: 0;
+}
+
+.closeButton {
+  border-width: 0;
+  padding: 0;
+  margin: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+/* Intent: inline */
+.inline {
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+}
+.inline .iconWrapper {
+  padding: var(--Spacing-x-one-and-half);
+}
+.inline.alarm .iconWrapper {
+  background-color: var(--Main-Red-70);
+}
+.inline.warning .iconWrapper {
+  background-color: var(--Main-Yellow-60);
+}
+.inline.info .iconWrapper {
+  background-color: var(--Scandic-Blue-70);
+}
+.inline .icon,
+.inline .icon * {
+  fill: var(--Base-Surface-Primary-light-Normal);
+}
+.inline .closeButton {
+  border-left: 1px solid var(--Base-Border-Subtle);
+  padding: var(--Spacing-x-one-and-half);
+}
+
+/* Intent: banner */
+.banner {
+  padding: 0 var(--Spacing-x5);
+  border-left-width: 6px;
+  border-left-style: solid;
+}
+.banner.alarm {
+  border-left-color: var(--Main-Red-70);
+  background-color: var(--Main-Red-00);
+}
+.banner.warning {
+  border-left-color: var(--Main-Yellow-60);
+  background-color: var(--Main-Yellow-00);
+}
+.banner.info {
+  border-left-color: var(--Scandic-Blue-70);
+  background-color: var(--Scandic-Blue-00);
+}
+.banner.alarm .icon,
+.banner.alarm .icon * {
+  fill: var(--Main-Red-70);
+}
+.banner.warning .icon,
+.banner.warning .icon * {
+  fill: var(--Main-Yellow-60);
+}
+.banner.info .icon,
+.banner.info .icon * {
+  fill: var(--Scandic-Blue-70);
+}
+
+.banner .closeButton {
+  align-self: center;
+  padding-left: var(--Spacing-x-one-and-half);
+}