From b84496c7f71e5fbd806e6ac1fdba8c02984fee49 Mon Sep 17 00:00:00 2001
From: Ruben Barilani <ruben.barilani@zalando.de>
Date: Tue, 22 Mar 2016 16:32:49 +0100
Subject: [PATCH] feat(button-link): add button link and button link with icon
 #137

chore(fabricator): downgrade to 1.1.10 due to an issue, see https://github.com/fbrctr/fabricator-assemble/issues/40 #137
---
 .../02-atoms/buttons/00-button-link.html      | 13 ++++
 .../materials/02-atoms/buttons/01-button.html |  1 -
 .../{ => 01-button-icon}/01-button-icon.html  |  4 ++
 .../01-button-icon/02-button-link-icon.html   | 12 ++++
 package.json                                  |  2 +-
 src/styles/atoms/_btn.scss                    | 68 ++++++++++++++++++-
 6 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 docs/demo/materials/02-atoms/buttons/00-button-link.html
 rename docs/demo/materials/03-molecules/{ => 01-button-icon}/01-button-icon.html (99%)
 create mode 100644 docs/demo/materials/03-molecules/01-button-icon/02-button-link-icon.html

diff --git a/docs/demo/materials/02-atoms/buttons/00-button-link.html b/docs/demo/materials/02-atoms/buttons/00-button-link.html
new file mode 100644
index 00000000..91add425
--- /dev/null
+++ b/docs/demo/materials/02-atoms/buttons/00-button-link.html
@@ -0,0 +1,13 @@
+---
+name: button link
+title: button link
+---
+
+<button class="dc-btn dc-btn--link dc-btn--link-large">Flat Large Button</button>
+<button class="dc-btn dc-btn--link">Flat Default Button</button>
+<button class="dc-btn dc-btn--link dc-btn--link-small">Flat Small button</button><br>
+
+
+<button class="dc-btn dc-btn--link dc-btn--link-large dc-btn--link-destroy">Flat Large Destroy</button>
+<button class="dc-btn dc-btn--link dc-btn--link-success">Flat Default Success</button>
+<button class="dc-btn dc-btn--link dc-btn--link-small dc-btn--link-disabled">Flat Small Disabled</button><br>
diff --git a/docs/demo/materials/02-atoms/buttons/01-button.html b/docs/demo/materials/02-atoms/buttons/01-button.html
index f4294917..a71329f6 100644
--- a/docs/demo/materials/02-atoms/buttons/01-button.html
+++ b/docs/demo/materials/02-atoms/buttons/01-button.html
@@ -8,7 +8,6 @@
 
   Use different buttons with the <code>dc-btn--small</code> and <code>dc-btn--large</code> classes.
 ---
-
 <button class="dc-btn dc-btn--large">Large Button</button><br>
 <button class="dc-btn">Default Button</button><br>
 <button class="dc-btn dc-btn--small"> small button </button>
diff --git a/docs/demo/materials/03-molecules/01-button-icon.html b/docs/demo/materials/03-molecules/01-button-icon/01-button-icon.html
similarity index 99%
rename from docs/demo/materials/03-molecules/01-button-icon.html
rename to docs/demo/materials/03-molecules/01-button-icon/01-button-icon.html
index 79454ff6..c7eeb237 100644
--- a/docs/demo/materials/03-molecules/01-button-icon.html
+++ b/docs/demo/materials/03-molecules/01-button-icon/01-button-icon.html
@@ -6,6 +6,8 @@
 
     For buttons with icon and text, use the modifiers `dc-icon--btn--left` and `dc-icon--btn--right` to set the position of the icon.
 ---
+
+
 <button class="dc-btn">
     <i class="dc-icon dc-icon--history dc-icon--btn"></i>
 </button>
@@ -35,3 +37,5 @@
 <button class="dc-btn dc-btn--destroy dc-btn--large">
     <span>Lock</span> <i class="dc-icon dc-icon--lock dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
 </button>
+
+
diff --git a/docs/demo/materials/03-molecules/01-button-icon/02-button-link-icon.html b/docs/demo/materials/03-molecules/01-button-icon/02-button-link-icon.html
new file mode 100644
index 00000000..d5ef757c
--- /dev/null
+++ b/docs/demo/materials/03-molecules/01-button-icon/02-button-link-icon.html
@@ -0,0 +1,12 @@
+---
+name: button link icon
+title: button link icon
+---
+<button class="dc-btn dc-btn--link dc-btn--link-destroy dc-btn--link-large">
+    <span>Back to previous</span> <i class="dc-icon dc-icon--arrow-left dc-icon--btn dc-icon--btn-large dc-icon--btn--left"></i>
+</button>
+
+<button class="dc-btn dc-btn--link dc-btn--link-large">
+    <span>Go To next</span> <i class="dc-icon dc-icon--arrow-right dc-icon--btn dc-icon--btn-large dc-icon--btn--right"></i>
+</button>
+
diff --git a/package.json b/package.json
index 9924f3bc..53d7e305 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "babel-loader": "5.0.0",
     "browser-sync": "^2.7.1",
     "del": "^1.1.1",
-    "fabricator-assemble": "^1.1.9",
+    "fabricator-assemble": "1.1.10",
     "gulp": "^3.8.11",
     "gulp-autoprefixer": "^2.3.1",
     "gulp-conventional-changelog": "^0.7.0",
diff --git a/src/styles/atoms/_btn.scss b/src/styles/atoms/_btn.scss
index 3c89d930..5e586f1d 100644
--- a/src/styles/atoms/_btn.scss
+++ b/src/styles/atoms/_btn.scss
@@ -1,4 +1,5 @@
 // @import "../core/core";
+// @import "../atoms/link";
 
 @mixin dc-btn {
     display: inline-block;
@@ -128,7 +129,6 @@
 @mixin dc-btn--small {
     padding: $dc-space100 - .1 $dc-space100;
     font-size: 1.4rem;
-
     @content;
 }
 
@@ -168,6 +168,24 @@
     width: 100%;
 }
 
+//  = FLAT BUTTON
+//  ---------------------------------------------------------------------------
+@mixin dc-btn--link {
+    @include dc-link;
+
+    background: transparent;
+    border-color: transparent;
+}
+
+@mixin dc-btn--link--no-touch {
+    &:hover {
+        border-color: transparent;
+        background: none;
+        box-shadow: none;
+    }
+
+    @include dc-link--no-touch;
+}
 
 @mixin dc-btn-selectors {
     .dc-btn {
@@ -206,4 +224,52 @@
     .dc-btn--block {
         @include dc-btn--block;
     }
+
+    .dc-btn--link {
+        @include dc-btn--link;
+    }
+
+    .no-touch .dc-btn--link {
+        @include dc-btn--link--no-touch;
+    }
+
+    .dc-btn--link-large {
+        @include dc-btn--large;
+    }
+
+    .dc-btn--link-small {
+        @include dc-btn--small;
+    }
+
+    .no-touch .dc-btn--link-small {
+        @include dc-btn--small--no-touch;
+    }
+
+    .no-touch .dc-btn--link-success {
+        @include dc-link--success--no-touch;
+    }
+
+    .touch .dc-btn--link-success {
+        @include dc-link--success--touch;
+    }
+
+    .no-touch .dc-btn--link-destroy {
+        @include dc-link--destroy--no-touch;
+    }
+
+    .touch .dc-btn--link-destroy {
+        @include dc-link--destroy--touch;
+    }
+
+    .dc-btn--link-disabled {
+        @include dc-link--disabled;
+    }
+
+    .no-touch .dc-btn--link-disabled {
+        @include dc-link--disabled--no-touch;
+    }
+
+    .touch .dc-btn--link-disabled {
+        @include dc-link--disabled--touch;
+    }
 }