From a19992771ae445fd548540698000cae26c8b4664 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bk@tonik.pl>
Date: Tue, 1 Oct 2019 11:08:42 +0200
Subject: [PATCH 1/5] wip()

---
 src/_includes/components/button.html   |  3 +++
 src/_sass/components/_button-fill.scss | 13 +++++++++++++
 src/_sass/components/_button.scss      | 12 ++++++++++++
 src/_sass/segment.scss                 |  2 ++
 src/styleguide.md                      |  3 +++
 5 files changed, 33 insertions(+)
 create mode 100644 src/_includes/components/button.html
 create mode 100644 src/_sass/components/_button-fill.scss
 create mode 100644 src/_sass/components/_button.scss

diff --git a/src/_includes/components/button.html b/src/_includes/components/button.html
new file mode 100644
index 0000000000..7648e85887
--- /dev/null
+++ b/src/_includes/components/button.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button--{{ include.size }}">
+  {{ include.text }}
+</a>
diff --git a/src/_sass/components/_button-fill.scss b/src/_sass/components/_button-fill.scss
new file mode 100644
index 0000000000..c0f1200479
--- /dev/null
+++ b/src/_sass/components/_button-fill.scss
@@ -0,0 +1,13 @@
+.button-fill {
+  border-radius: 4px;
+  background-color: color(primary);
+  transition: box-shadow 0.3s;
+
+  &:hover {
+    box-shadow: 0 4px 8px 0 rgba(82, 189, 149, 0.08);
+  }
+
+  &--white {
+    background-color: color(white);
+  }
+}
diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss
new file mode 100644
index 0000000000..511f07c945
--- /dev/null
+++ b/src/_sass/components/_button.scss
@@ -0,0 +1,12 @@
+.button {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1.5;
+  text-align: center;
+
+  &--small {
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.14;
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
index b02acc551b..b1105c3e16 100644
--- a/src/_sass/segment.scss
+++ b/src/_sass/segment.scss
@@ -44,6 +44,8 @@
 @import "components/note";
 @import "components/button-link";
 @import "components/alert";
+@import "components/button";
+@import "components/button-fill";
 
 // Pages
 // =================================================
diff --git a/src/styleguide.md b/src/styleguide.md
index b2a0236106..09ff12b77a 100644
--- a/src/styleguide.md
+++ b/src/styleguide.md
@@ -47,3 +47,6 @@ layout: page
 {% 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." %}
+
+{% include components/button.html size="standard" text="Sign up" href="https://segment.com" %}
+{% include components/button.html size="small" text="Yes" href="https://segment.com" %}

From eb4817255ceabc4b73750cfa948147965a49218f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bk@tonik.pl>
Date: Tue, 1 Oct 2019 13:52:59 +0200
Subject: [PATCH 2/5] wip(): Icon

---
 src/_includes/components/alert.html     |  2 +-
 src/_includes/components/button.html    |  7 ++++++-
 src/_sass/components/_button-fill.scss  | 13 +++++++++++++
 src/_sass/components/_button.scss       | 11 +++++++++++
 src/assets/icons/symbols/thumb-down.svg |  3 +++
 src/assets/icons/symbols/thumb-up.svg   |  3 +++
 src/styleguide.md                       |  2 +-
 7 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/symbols/thumb-down.svg
 create mode 100644 src/assets/icons/symbols/thumb-up.svg

diff --git a/src/_includes/components/alert.html b/src/_includes/components/alert.html
index 411a7f1a53..0d7904b495 100644
--- a/src/_includes/components/alert.html
+++ b/src/_includes/components/alert.html
@@ -1,4 +1,4 @@
-<div markdown="div" class="alert alert--{{ include.type }}" role="alert">
+<div class="alert alert--{{ include.type }}" role="alert">
   {% include_relative assets/icons/alerts/{{ include.type }}.svg %}
   {{ include.content }}
 </div>
diff --git a/src/_includes/components/button.html b/src/_includes/components/button.html
index 7648e85887..c544851b2a 100644
--- a/src/_includes/components/button.html
+++ b/src/_includes/components/button.html
@@ -1,3 +1,8 @@
-<a href="{{ include.href }}" class="button button--{{ include.size }}">
+<a href="{{ include.href }}" class="button button--{{ include.size }} flex">
+  {% if include.icon %}
+    <div class="button__icon">
+      {% include_relative assets/icons/symbols/{{ include.icon }}.svg %}
+    </div>
+  {% endif %}
   {{ include.text }}
 </a>
diff --git a/src/_sass/components/_button-fill.scss b/src/_sass/components/_button-fill.scss
index c0f1200479..cbb62d3712 100644
--- a/src/_sass/components/_button-fill.scss
+++ b/src/_sass/components/_button-fill.scss
@@ -9,5 +9,18 @@
 
   &--white {
     background-color: color(white);
+    color: color(gray);
+
+    svg, svg * {
+      fill: color(gray);
+    }
+
+    :hover {
+      color: color(success);
+
+      svg, svg * {
+        fill: color(success);
+      }
+    }
   }
 }
diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss
index 511f07c945..0d5b6a01a2 100644
--- a/src/_sass/components/_button.scss
+++ b/src/_sass/components/_button.scss
@@ -3,10 +3,21 @@
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
+  padding: 12px 23px;
 
   &--small {
     font-size: 14px;
     font-weight: 500;
     line-height: 1.14;
+    padding: 9px 8px;
+  }
+
+  &__icon {
+    margin-right: 5px;
+
+    svg {
+      max-height: 14px;
+      width: 16px;
+    }
   }
 }
diff --git a/src/assets/icons/symbols/thumb-down.svg b/src/assets/icons/symbols/thumb-down.svg
new file mode 100644
index 0000000000..02c2d492cc
--- /dev/null
+++ b/src/assets/icons/symbols/thumb-down.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.992 5.374c-.08.58-.73.96-1.43 1.05-.15.02-.32.04-.49.05.06.01.11.01.16.02.71.08 1.23.47 1.15 1.05-.08.58-.73.96-1.43 1.05-.34.04-.72.07-1.13.09h-.01c-.24.01-.49.02-.75.02-.48.02-1.11.04-1.59.08-.36.03-.41.28-.37.53.35.9.54 1.91.5 2.91-.04.85-.6 1.679-1.41 1.769-.671.07-1.161-.39-.991-.98.56-1.93-2.07-4.22-4.2-5.51V1.505c1.66-1.03 4.35-1.56 7.48-1.5.19 0 .39.01.62.02h.09c.22.01.46.03.73.05.71.06 1.54.51 1.5 1.09-.03.51-.4.79-.87.93.27.02.54.04.79.06.71.06 1.24.45 1.17 1.04-.06.58-.7.97-1.41 1.07-.02 0-.05.01-.07.01.29.02.57.03.81.05.71.03 1.23.47 1.15 1.05zM2 7.994H0v-7h2c.55 0 1 .45 1 1v5c0 .56-.45 1-1 1z" fill="#A5B0BA" fill-rule="nonzero"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/icons/symbols/thumb-up.svg b/src/assets/icons/symbols/thumb-up.svg
new file mode 100644
index 0000000000..965450daea
--- /dev/null
+++ b/src/assets/icons/symbols/thumb-up.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15.992 8.626c-.08-.58-.73-.96-1.43-1.05a6.75 6.75 0 00-.49-.05c.06-.01.11-.01.16-.02.71-.08 1.23-.47 1.15-1.05-.08-.58-.73-.96-1.43-1.05-.34-.04-.72-.07-1.13-.09h-.01c-.24-.01-.49-.02-.75-.02-.48-.02-1.11-.04-1.59-.08-.36-.03-.41-.28-.37-.53.35-.9.54-1.91.5-2.91-.04-.85-.6-1.679-1.41-1.769-.671-.07-1.161.39-.991.98.56 1.93-2.07 4.22-4.2 5.51v5.999c1.66 1.03 4.35 1.56 7.48 1.5.19 0 .39-.01.62-.02h.09c.22-.01.46-.03.73-.05.71-.06 1.54-.51 1.5-1.09-.03-.51-.4-.79-.87-.93.27-.02.54-.04.79-.06.71-.06 1.24-.45 1.17-1.04-.06-.58-.7-.97-1.41-1.07-.02 0-.05-.01-.07-.01.29-.02.57-.03.81-.05.71-.03 1.23-.47 1.15-1.05zM2 6.006H0v7h2c.55 0 1-.45 1-1v-5c0-.56-.45-1-1-1z" fill="#A5B0BA" fill-rule="nonzero"/>
+</svg>
\ No newline at end of file
diff --git a/src/styleguide.md b/src/styleguide.md
index 09ff12b77a..a6b18d7bee 100644
--- a/src/styleguide.md
+++ b/src/styleguide.md
@@ -49,4 +49,4 @@ layout: page
 {% include components/alert.html type="error" content="This is my sample note." %}
 
 {% include components/button.html size="standard" text="Sign up" href="https://segment.com" %}
-{% include components/button.html size="small" text="Yes" href="https://segment.com" %}
+{% include components/button.html size="small" icon="thumb-down" text="Yes" href="https://segment.com" %}

From f6c48a1dcbaa3176abdcb695dae6a7e616d28c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bk@tonik.pl>
Date: Tue, 1 Oct 2019 15:22:08 +0200
Subject: [PATCH 3/5] feat(): Introduce buttons

---
 src/_includes/components/button-fill.html   |  3 +++
 src/_includes/components/button-hollow.html |  3 +++
 src/_includes/components/button.html        |  7 +------
 src/_sass/components/_button-fill.scss      |  8 +++-----
 src/_sass/components/_button-hollow.scss    |  8 ++++++++
 src/_sass/components/_button.scss           | 11 ++---------
 src/_sass/segment.scss                      |  1 +
 src/styleguide.md                           |  7 +++++--
 8 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 src/_includes/components/button-fill.html
 create mode 100644 src/_includes/components/button-hollow.html
 create mode 100644 src/_sass/components/_button-hollow.scss

diff --git a/src/_includes/components/button-fill.html b/src/_includes/components/button-fill.html
new file mode 100644
index 0000000000..586dd1f019
--- /dev/null
+++ b/src/_includes/components/button-fill.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button-fill {% if include.size %}button--{{ include.size }}{% endif %} {% if include.variant %}button-fill--{{ include.variant }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button-hollow.html b/src/_includes/components/button-hollow.html
new file mode 100644
index 0000000000..51efbd8f25
--- /dev/null
+++ b/src/_includes/components/button-hollow.html
@@ -0,0 +1,3 @@
+<a href="{{ include.href }}" class="button button-hollow {% if include.size %}button--{{ include.size }}{% endif %} flex">
+  {{ include.text }}
+</a>
diff --git a/src/_includes/components/button.html b/src/_includes/components/button.html
index c544851b2a..7e7b5c42b4 100644
--- a/src/_includes/components/button.html
+++ b/src/_includes/components/button.html
@@ -1,8 +1,3 @@
-<a href="{{ include.href }}" class="button button--{{ include.size }} flex">
-  {% if include.icon %}
-    <div class="button__icon">
-      {% include_relative assets/icons/symbols/{{ include.icon }}.svg %}
-    </div>
-  {% endif %}
+<a href="{{ include.href }}" class="button {% if include.size %}button--{{ include.size }}{% endif %} flex">
   {{ include.text }}
 </a>
diff --git a/src/_sass/components/_button-fill.scss b/src/_sass/components/_button-fill.scss
index cbb62d3712..a254c7d231 100644
--- a/src/_sass/components/_button-fill.scss
+++ b/src/_sass/components/_button-fill.scss
@@ -1,6 +1,7 @@
 .button-fill {
   border-radius: 4px;
   background-color: color(primary);
+  color: color(white);
   transition: box-shadow 0.3s;
 
   &:hover {
@@ -10,12 +11,9 @@
   &--white {
     background-color: color(white);
     color: color(gray);
+    transition: 0.3s color;
 
-    svg, svg * {
-      fill: color(gray);
-    }
-
-    :hover {
+    &:hover {
       color: color(success);
 
       svg, svg * {
diff --git a/src/_sass/components/_button-hollow.scss b/src/_sass/components/_button-hollow.scss
new file mode 100644
index 0000000000..4d9b0934f5
--- /dev/null
+++ b/src/_sass/components/_button-hollow.scss
@@ -0,0 +1,8 @@
+.button-hollow {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 2;
+  color: color(secondary);
+  padding: 12px 0;
+  text-decoration: none;
+}
diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss
index 0d5b6a01a2..74383f6e8f 100644
--- a/src/_sass/components/_button.scss
+++ b/src/_sass/components/_button.scss
@@ -4,6 +4,8 @@
   line-height: 1.5;
   text-align: center;
   padding: 12px 23px;
+  display: inline-block;
+  text-decoration: none;
 
   &--small {
     font-size: 14px;
@@ -11,13 +13,4 @@
     line-height: 1.14;
     padding: 9px 8px;
   }
-
-  &__icon {
-    margin-right: 5px;
-
-    svg {
-      max-height: 14px;
-      width: 16px;
-    }
-  }
 }
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
index b1105c3e16..62bfb5893d 100644
--- a/src/_sass/segment.scss
+++ b/src/_sass/segment.scss
@@ -46,6 +46,7 @@
 @import "components/alert";
 @import "components/button";
 @import "components/button-fill";
+@import "components/button-hollow";
 
 // Pages
 // =================================================
diff --git a/src/styleguide.md b/src/styleguide.md
index a6b18d7bee..6f17671d0b 100644
--- a/src/styleguide.md
+++ b/src/styleguide.md
@@ -48,5 +48,8 @@ layout: page
 {% include components/alert.html type="warning" content="This is my sample note." %}
 {% include components/alert.html type="error" content="This is my sample note." %}
 
-{% include components/button.html size="standard" text="Sign up" href="https://segment.com" %}
-{% include components/button.html size="small" icon="thumb-down" text="Yes" href="https://segment.com" %}
+{% include components/button.html text="Sign up" href="https://segment.com" %}
+{% include components/button.html size="small" text="Yes" href="https://segment.com" %}
+{% include components/button-fill.html size="small" text="Sign up" href="https://segment.com" %}
+{% include components/button-fill.html size="small" variant="white" text="Yes" href="https://segment.com" %}
+{% include components/button-hollow.html size="small" text="Log in" href="https://segment.com" %}

From 6592ae304daf673c534a2b27c5012d716557af7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bk@tonik.pl>
Date: Tue, 1 Oct 2019 16:55:18 +0200
Subject: [PATCH 4/5] fix(): Add new variant and remove text decoration

---
 src/_sass/components/_button-fill.scss   |  4 ----
 src/_sass/components/_button-hollow.scss |  3 ---
 src/_sass/components/_button.scss        | 10 +++++++++-
 src/styleguide.md                        |  3 ++-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/_sass/components/_button-fill.scss b/src/_sass/components/_button-fill.scss
index a254c7d231..3182547df7 100644
--- a/src/_sass/components/_button-fill.scss
+++ b/src/_sass/components/_button-fill.scss
@@ -15,10 +15,6 @@
 
     &:hover {
       color: color(success);
-
-      svg, svg * {
-        fill: color(success);
-      }
     }
   }
 }
diff --git a/src/_sass/components/_button-hollow.scss b/src/_sass/components/_button-hollow.scss
index 4d9b0934f5..847b73d485 100644
--- a/src/_sass/components/_button-hollow.scss
+++ b/src/_sass/components/_button-hollow.scss
@@ -1,8 +1,5 @@
 .button-hollow {
-  font-size: 16px;
-  font-weight: 500;
   line-height: 2;
   color: color(secondary);
   padding: 12px 0;
-  text-decoration: none;
 }
diff --git a/src/_sass/components/_button.scss b/src/_sass/components/_button.scss
index 74383f6e8f..7398c567fe 100644
--- a/src/_sass/components/_button.scss
+++ b/src/_sass/components/_button.scss
@@ -3,14 +3,22 @@
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
-  padding: 12px 23px;
+  padding: 12px 15px;
   display: inline-block;
   text-decoration: none;
 
+  &:hover {
+    text-decoration: none;
+  }
+
   &--small {
     font-size: 14px;
     font-weight: 500;
     line-height: 1.14;
     padding: 9px 8px;
   }
+
+  &--large {
+    padding: 12px 23px;
+  }
 }
diff --git a/src/styleguide.md b/src/styleguide.md
index 6f17671d0b..52894e3365 100644
--- a/src/styleguide.md
+++ b/src/styleguide.md
@@ -49,7 +49,8 @@ layout: page
 {% include components/alert.html type="error" content="This is my sample note." %}
 
 {% include components/button.html text="Sign up" href="https://segment.com" %}
-{% include components/button.html size="small" text="Yes" href="https://segment.com" %}
+{% include components/button-fill.html size="large" text="Yes" href="https://segment.com" %}
+{% include components/button.html size="large" text="Yes" href="https://segment.com" %}
 {% include components/button-fill.html size="small" text="Sign up" href="https://segment.com" %}
 {% include components/button-fill.html size="small" variant="white" text="Yes" href="https://segment.com" %}
 {% include components/button-hollow.html size="small" text="Log in" href="https://segment.com" %}

From f732d060e2ef52e619fe1813574eae3623b177c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bk@tonik.pl>
Date: Tue, 1 Oct 2019 16:58:24 +0200
Subject: [PATCH 5/5] fix(): Remove ine height

---
 src/_sass/components/_button-hollow.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/_sass/components/_button-hollow.scss b/src/_sass/components/_button-hollow.scss
index 847b73d485..180e4a0df8 100644
--- a/src/_sass/components/_button-hollow.scss
+++ b/src/_sass/components/_button-hollow.scss
@@ -1,5 +1,4 @@
 .button-hollow {
-  line-height: 2;
   color: color(secondary);
   padding: 12px 0;
 }