feat(): Introduce alert component (#75)

segmentio · jedrzejchalubek · Oct 4, 2019 · Sep 26, 2019 · Sep 26, 2019 · Sep 26, 2019
commit 593ef99bc6f893c69ea129e23c529e1b51a18602
diff --git a/src/_includes/components/alert.html b/src/_includes/components/alert.html
@@ -0,0 +1,4 @@
+<div markdown="div" class="alert alert--{{ include.type }}" role="alert">
+  {% include_relative assets/icons/alerts/{{ include.type }}.svg %}
+  {{ include.content }}
+</div>
diff --git a/src/_sass/_variables.scss b/src/_sass/_variables.scss
@@ -26,6 +26,7 @@ $color-values: (
   secondary: #1f477d,
   secondary-dark: #435a6f,
   gray-light: #f7f9fa,
+  gray-lighter: #f9fafb,
   gray: #a5b0ba,
   code-gray: #435a6f,
   code-green: #52bd95,

diff --git a/src/_sass/components/_alert.scss b/src/_sass/components/_alert.scss
@@ -0,0 +1,48 @@
+.alert {
+  background-color: color(gray-lighter);
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 1.57;
+  padding: 15px 20px 15px 50px;
+  position: relative;
+
+  &::before {
+    content: "";
+    border-radius: 2px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 3px;
+  }
+
+  svg {
+    position: absolute;
+    left: 20px;
+    top: 22px;
+  }
+
+  &--info {
+    &::before {
+      background-color: color(info);
+    }
+  }
+
+  &--success {
+    &::before {
+      background-color: color(success);
+    }
+  }
+
+  &--warning {
+    &::before {
+      background-color: color(warning);
+    }
+  }
+
+  &--error {
+    &::before {
+      background-color: color(error);
+    }
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
@@ -42,6 +42,7 @@
 @import "components/logo";
 @import "components/note";
 @import "components/button-link";
+@import "components/alert";
 
 // Pages
 // =================================================

diff --git a/src/assets/icons/alerts/error.svg b/src/assets/icons/alerts/error.svg
diff --git a/src/assets/icons/alerts/info.svg b/src/assets/icons/alerts/info.svg
diff --git a/src/assets/icons/alerts/success.svg b/src/assets/icons/alerts/success.svg
diff --git a/src/assets/icons/alerts/warning.svg b/src/assets/icons/alerts/warning.svg
diff --git a/src/styleguide.md b/src/styleguide.md
@@ -37,3 +37,8 @@ layout: page
   Server-side data management is when tag sends data into your web server, then your web server passes that data to the destination system/server.
 {% endcapture %}
 {% include components/note.html title="Server-side tracking" content=server_side_tracking buttonTitle="Find out more" buttonHref="https://segment.com" %}
+
+{% include components/alert.html type="info" content="This is my sample note." %}
+{% include components/alert.html type="success" content="This is my sample note." %}
+{% include components/alert.html type="warning" content="This is my sample note." %}
+{% include components/alert.html type="error" content="This is my sample note." %}