feat(button-link): add button link and button link with icon #137

chore(fabricator): downgrade to 1.1.10 due to an issue, see fbrctr/fabricator-assemble#40 #137

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>

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>

docs/demo/materials/03-molecules/01-button-icon.html → 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>
+
+

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>
+

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",

src/styles/atoms/_btn.scss

@@ -1,4 +1,5 @@
 // @import "../core/core";
+// @import "../atoms/link";
 
 @mixin dc-btn {
     display: inline-block;
@@ -129,7 +130,6 @@
 @mixin dc-btn--small {
     padding: $dc-space100 - .1 $dc-space100;
     font-size: 1.4rem;
-
     @content;
 }
 
@@ -169,6 +169,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 {
@@ -207,4 +225,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;
+    }
 }