Add alert component

aiur.config.js

@@ -63,6 +63,7 @@ module.exports = {
     molecules: {
       file: "./lib/documentation/MOLECULES.md",
       children: {
+        alert: "./lib/components/alert/alert.md",
         announcement: "./lib/components/announcement/announcement.md",
         cards: "./lib/components/cards/cards.md",
         breadcrumb: "./lib/components/breadcrumb/breadcrumb.md",

lib/assets/stylesheets/application.scss

@@ -18,6 +18,7 @@ Application specific code
 
 // Components
 @import "../../components/achtung-box/achtung-box";
+@import "../../components/alert/alert";
 @import "../../components/announcement/announcement";
 @import "../../components/article-logo/article-logo";
 @import "../../components/breadcrumb/breadcrumb";

lib/components/alert/_alert.scss

@@ -0,0 +1,42 @@
+.alert {
+  @extend %heading-font-regular;
+
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+
+  width: 100%;
+  padding: $spacer-xs;
+
+  font-size: $font-size-base;
+  color: $brand-text;
+
+  &--info {
+    background-color: $brand-primary-light;
+  }
+
+  &--warn {
+    background-color: $brand-tertiary-light;
+  }
+
+  &--error {
+    background-color: $brand-error;
+  }
+}
+
+.alert__text {
+  margin-bottom: 0;
+}
+
+.alert__btn {
+  @extend %base-button;
+
+  color: inherit;
+  background-color: transparent;
+}
+
+@include for-tablet-landscape-up {
+  .alert {
+    padding: $spacer-sm;
+  }
+}

lib/components/alert/alert.md

@@ -0,0 +1,28 @@
+title: Alert
+description: Alert
+
+```html
+<div class="alert alert--info">
+    <p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
+    <button class="alert__btn" type="button">
+        <span class="icon--close"></span>
+        <span class="sr-only">Schließen</span>
+    </button>
+</div>
+
+<div class="alert alert--warn">
+    <p class="alert__text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</p>
+    <button class="alert__btn" type="button">
+        <span class="icon--close"></span>
+        <span class="sr-only">Schließen</span>
+    </button>
+</div>
+
+<div class="alert alert--error">
+    <p class="alert__text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</p>
+    <button class="alert__btn" type="button">
+        <span class="icon--close"></span>
+        <span class="sr-only">Schließen</span>
+    </button>
+</div>
+```

lib/components/buttons/_buttons.scss

@@ -1,3 +1,27 @@
+%base-button {
+  cursor: pointer;
+  user-select: none;
+
+  position: relative;
+
+  display: inline-block;
+
+  text-decoration: none;
+  white-space: nowrap;
+
+  background: none;
+  border: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}
+
 .btn {
   @extend %body-font-bold;
 

lib/components/icons/_icons.scss

@@ -1,5 +1,65 @@
-.icon {
-  &.icon-add {
-    @include icon-before("icons/add.svg", inherit, 1.5rem);
+// Icon helper
+@mixin icon-before($svg-path, $color, $height: 1rem) {
+  &::before {
+    content: " ";
+
+    display: block;
+
+    width: $height;
+    height: $height;
+
+    color: $color;
+
+    background-color: currentcolor;
+
+    mask-image: asset-url($svg-path);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
   }
 }
+
+.icon--add {
+  @include icon-before("icons/add.svg", 1.5rem);
+}
+
+.icon--close {
+  @include icon-before("icons/close.svg", inherit, 1rem);
+}
+
+//Sizes
+.icon--small {
+  width: $spacer-sm;
+  height: $spacer-sm;
+}
+
+.icon--medium {
+  width: $spacer-lg;
+  height: $spacer-lg;
+}
+
+.icon--big {
+  width: $spacer-xl;
+  height: $spacer-xl;
+}
+
+// Colors
+.icon--brand-primary {
+  background: $brand-primary;
+}
+
+.icon--brand-secondary {
+  background: $brand-secondary;
+}
+
+.icon--brand-white {
+  background: $brand-white;
+}
+
+.icon--brand-black {
+  background: $brand-black;
+}
+
+.icon-close {
+  mask-image: asset-url("icons/close.svg");
+}

lib/components/icons/icons.md

@@ -6,5 +6,7 @@ Here are the icons that we have available for use in the system
 _add_
 
 ```html
-<span class="icon icon-add" role="presentation"></span>
+<span class="icon icon--add" role="presentation"></span>
+
+<span class="icon icon--close" role="presentation"></span>
 ```

lib/fundamentals/_helpers.scss

@@ -1,24 +1,3 @@
-// Icon helper
-@mixin icon-before($svg-path, $color, $height: 1rem) {
-  &::before {
-    content: " ";
-
-    display: block;
-
-    width: $height;
-    height: $height;
-
-    color: $color;
-
-    background-color: currentcolor;
-
-    mask-image: asset-url($svg-path);
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-  }
-}
-
 // Only visible to screen reader
 @mixin visually-hidden() {
   /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
@@ -29,7 +8,11 @@
 
   width: 1px;
   height: 1px;
+  padding: 0;
+
+  white-space: nowrap;
 
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  border: 0;
 }

lib/views/customer-pages/customer-profile-edit-page/customer-profile-edit-page.md

@@ -1,6 +1,10 @@
 title: Customer Proflie Edit Page
 description: Customer Proflie Edit Page
 
+## Alerts
+
+See [All available alert styles](https://styleguide.socreatory.com/molecules/alert)
+
 ```html
 <scroll-nav>
     <nav class="navbar-wrapper">
@@ -49,7 +53,14 @@ description: Customer Proflie Edit Page
 </header>
 
 <main class="customer-profile-edit-page">
-    <section class="container">
+    <section class="container container--md">
+        <div class="alert alert--info">
+            <p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
+            <button class="alert__btn" type="button">
+                <span class="icon--close"></span>
+                <span class="sr-only">Schließen</span>
+            </button>
+        </div>
         <div class="login-form">
             <h1 class="login-form__headline">Profil bearbeiten</h1>
             <form class="form" id="#" novalidate="novalidate" action="/contact_forms" accept-charset="UTF-8" method="post">

lib/views/customer-pages/customer-profile-page/customer-profile-page.md

@@ -1,6 +1,10 @@
 title: Customer Profile Page
 description: Customer Profile Page
 
+## Alerts
+
+See [All available alert styles](https://styleguide.socreatory.com/molecules/alert)
+
 ```html
 <scroll-nav>
     <nav class="navbar-wrapper">
@@ -50,6 +54,13 @@ description: Customer Profile Page
 
 <main class="customer-profile-page">
     <section class="container container--md">
+        <div class="alert alert--info">
+            <p class="alert__text"><strong>Erfolg!</strong> Vielen Dank.</p>
+            <button class="alert__btn" type="button">
+                <span class="icon--close"></span>
+                <span class="sr-only">Schließen</span>
+            </button>
+        </div>
         <dl>
             <dt>Name</dt>
             <dd>Mareike Müller</dd>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "socreatory-styleguide",
   "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "aiur": "aiur -t ./dist",
     "aiur:watch": "aiur -t ./dist --watch --liveserve 0.0.0.0:4001",
@@ -29,7 +29,6 @@
   },
   "dependencies": {
     "@ungap/custom-elements-builtin": "^0.6.3",
-    "innoq-styleguide": "^14.0.0",
     "lodash": "^4.17.20",
     "tabelle": "^0.2.0",
     "uitil": "^2.7.1"