feat(): Introduce Note component (#77)

imklau · jedrzejchalubek · commit b0473ec33718 · 2019-09-27T17:30:59.000+02:00
diff --git a/src/_includes/components/note.html b/src/_includes/components/note.html
@@ -0,0 +1,27 @@
+<div class="note">
+  {% if include.title %}
+    <div class="note__header">
+      <span class="note__icon">
+        {% include_relative assets/icons/alerts/info-note.svg %}
+      </span>
+
+      <h4>{{ include.title }}</h4>
+    </div>
+
+    <div class="note__text">
+      {{ include.content | markdownify }}
+      {% include components/button-link.html text=include.buttonTitle href=include.buttonHref %}
+    </div>
+  {% else %}
+    <div class="note__content">
+      <span class="note__icon">
+        {% include_relative assets/icons/alerts/info-note.svg %}
+      </span>
+
+      <div class="note__text">
+        <span class="note__heading">NOTE:</span> {{ include.content | markdownify }}
+        {% include components/button-link.html text=include.buttonTitle href=include.buttonHref %}
+      </div>
+    </div>
+  {% endif %}
+</div>
diff --git a/src/_sass/components/_note.scss b/src/_sass/components/_note.scss
@@ -0,0 +1,43 @@
+.note {
+  padding: 24px 24px 24px 16px;
+  background-color: color(gray-light);
+  border-radius: 8px;
+  font-size: 14px;
+  line-height: 22px;
+
+  & > * + * {
+    margin-top: 5px;
+  }
+
+  &__header {
+    display: flex;
+
+    & > * + * {
+      margin-left: 10px;
+    }
+  }
+
+  &__content {
+    display: flex;
+
+    & > * + * {
+      margin-left: 20px;
+    }
+  }
+
+  &__text {
+    & > * {
+      display: inline;
+    }
+  }
+
+  &__heading {
+    color: color(secondary);
+    font-weight: 700;
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
@@ -40,6 +40,7 @@
 // =================================================
 @import "components/stage";
 @import "components/logo";
+@import "components/note";
 @import "components/button-link";
 
 // Pages
diff --git a/src/assets/icons/alerts/info-note.svg b/src/assets/icons/alerts/info-note.svg
@@ -0,0 +1 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14 0a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12zM8.192 6.144h-2.73v1.365h2.047v5.462H5.461v1.365h5.462v-1.365H8.875V6.827a.682.682 0 0 0-.683-.683zm0-4.096a1.366 1.366 0 1 0 0 2.732 1.366 1.366 0 0 0 0-2.732z" fill="#1DC989" fill-rule="evenodd"/></svg>
diff --git a/src/styleguide.md b/src/styleguide.md
@@ -5,8 +5,6 @@ hidden: true
 layout: page
 ---
 
-{% include components/button-link.html text="Find out more" href="https://segment.com" %}
-
 # Heading 1
 ## Heading 2
 ### Heading 3
@@ -27,3 +25,15 @@ layout: page
     - Subitem
     - Subitem
 * Item
+
+{% include components/button-link.html text="Find out more" href="https://segment.com" %}
+
+{% capture note %}
+  Our [browser and mobile libraries](https://segment.com) **automatically** use Anonymous IDs under the covers to keep track of users as they navigate around your website or app, so you don’t need to worry about them when using those libraries.
+{% endcapture %}
+{% include components/note.html content=note %}
+
+{% capture server_side_tracking %}
+  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" %}
