add alerts to styleguide

innoq · Feb 21, 2018 · 4fc68ce · 4fc68ce
1 parent 4765940
commit 4fc68ce
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 16 deletions.
diff --git a/components/01-atoms/form/button/_button.scss b/components/01-atoms/form/button/_button.scss
@@ -5,30 +5,17 @@
 $default-btn-margin: $spacer-sm;
 
 .btn {
+  @extend %base-button;
   @extend %heading-font-bold;
   @include hover-fill($brand-interaction, $button-color, $button-color);
-  display: inline-block;
-  position: relative;
+
   margin-bottom: $default-btn-margin;
   border: 3px solid $button-border-color;
   border-radius: 0;
   background-color: $button-background;
-  cursor: pointer;
   padding: $spacer-md $spacer-base;
-  text-decoration: none;
   line-height: $button-medium-line-height;
-  white-space: nowrap;
   font-size: $button-medium-font-size;
-  user-select: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-  }
 
   &--cta {
     border-color: $button-cta-border-color;
@@ -87,6 +74,12 @@ $default-btn-margin: $spacer-sm;
     color: $button-inverted-color;
   }
 
+  &--icon {
+    border: 0;
+    background-color: transparent;
+    padding: $spacer-xxs;
+  }
+
   & + .btn {
     margin-left: $default-btn-margin;
   }

diff --git a/components/02-molecules/alert/_alert.scss b/components/02-molecules/alert/_alert.scss
@@ -0,0 +1,30 @@
+$alert-color: $brand-white;
+
+.alert {
+  @extend %heading-font-regular;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  padding: $container-spacer-y-sm $container-spacer-x-sm;
+  line-height: $alert-line-height;
+  color: $alert-color;
+  font-size: $alert-font-size;
+
+  &--info {
+    background-color: $brand-info;
+  }
+
+  &--warn {
+    background-color: $brand-warn;
+    color: darken($brand-warn, 51%); // Use accessible dark yellow
+  }
+
+  &--error {
+    background-color: $brand-danger;
+  }
+}
+
+.alert-btn {
+  @extend %base-button;
+  color: inherit;
+}
diff --git a/components/02-molecules/alert/alert--error.html b/components/02-molecules/alert/alert--error.html
@@ -0,0 +1,7 @@
+<div class="alert alert--error">
+    <div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</div>
+    <button class="alert-btn" type="button">
+        <i class="icon icon-close"></i>
+        <span class="sr-only">Schließen</span>
+    </button>
+</div>
diff --git a/components/02-molecules/alert/alert--warn.html b/components/02-molecules/alert/alert--warn.html
@@ -0,0 +1,7 @@
+<div class="alert alert--warn">
+    <div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</div>
+    <button class="alert-btn" type="button">
+        <i class="icon icon-close"></i>
+        <span class="sr-only">Schließen</span>
+    </button>
+</div>
diff --git a/components/02-molecules/alert/alert.config.yml b/components/02-molecules/alert/alert.config.yml
@@ -0,0 +1 @@
+status: wip
diff --git a/components/02-molecules/alert/alert.html b/components/02-molecules/alert/alert.html
@@ -0,0 +1,7 @@
+<div class="alert alert--info">
+    <div class="alert-text"><strong>Vorsicht!</strong> Vielen Dank.</div>
+    <button class="alert-btn" type="button">
+        <i class="icon icon-close"></i>
+        <span class="sr-only">Schließen</span>
+    </button>
+</div>
diff --git a/lib/styles/index.scss b/lib/styles/index.scss
@@ -116,6 +116,7 @@
 @import '../components/01-atoms/text/inline/accentuation/accentuation';
 
 // Molecules
+@import '../components/02-molecules/alert/alert';
 @import '../components/02-molecules/author-bio/author-bio';
 @import '../components/02-molecules/button-group/button-group';
 @import '../components/02-molecules/conclusion/conclusion';

diff --git a/lib/styles/settings/_colors.scss b/lib/styles/settings/_colors.scss
@@ -48,7 +48,9 @@ $brand-white: #fff;
 //
 
 // State colors
-$brand-danger: #f00;
+$brand-danger:   #f00;
+$brand-info:     $brand-green-75;
+$brand-warn:     $brand-yellow-75;
 
 // Gradients and Shadows
 $box-shadow-default: 0 4px 6px rgba(0, 0, 0, .3);

diff --git a/lib/styles/settings/_typography.scss b/lib/styles/settings/_typography.scss
@@ -516,3 +516,7 @@ $form-control-line-height: 1.375;                 // ~22px
 // Paginator
 $paginator-font-size-small: ms(0);
 $paginator-font-size: ms(3);
+
+// Alert
+$alert-font-size: $companion-font-size;         // 21px
+$alert-line-height: $base-line-height;          // 25px
diff --git a/lib/styles/tools/_forms.scss b/lib/styles/tools/_forms.scss
@@ -21,3 +21,23 @@
     content: '';
   }
 }
+
+%base-button {
+  display: inline-block;
+  position: relative;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}