Merge pull request #160 from zalando/topic/button-link-137

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

docs/demo/materials/02-atoms/buttons/01-button.html

@@ -3,12 +3,8 @@
 title: button
 notes: |
   Triggers an action and must not be used for navigation.
-
-  It's recommended buttons be <code>&lt;button&gt;</code> or <code>&lt;a&gt;</code> tags.
-
-  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>
+<a class="dc-btn" href="#" role="button">Anchor</a>
+<button class="dc-btn" type="submit">Button</button>
+<input class="dc-btn" type="button" value="Input">
+<input class="dc-btn" type="submit" value="Submit">

docs/demo/materials/02-atoms/buttons/02-sizes.html

@@ -0,0 +1,10 @@
+---
+name: button modifiers
+title: button modifiers
+notes: |
+  Use the size modifiers `dc-btn--large` and `dc-btn--small` to make buttons larger or smaller.
+
+---
+<button class="dc-btn dc-btn--large">Large Button</button>
+<button class="dc-btn">Normal Button</button>
+<button class="dc-btn dc-btn--small">Small Button</button>

docs/demo/materials/02-atoms/buttons/03-options.html

@@ -0,0 +1,22 @@
+---
+name: button modifiers
+title: button modifiers
+notes: |
+  Buttons can have modifier classes applied to them. Different modifier classes have different meanings, use them wisely.
+
+  `dc-btn--primary`: Triggers the primary action of the page it is placed on. Place only one primary button on each page/dialog.
+
+  `dc-btn--destroy`: Triggers a destructive action which can't be undone and might involve loss of data.
+
+  `dc-btn--disabled`: When a button is disabled. Buttons using this modifier should not be clickable.
+
+  `dc-btn--link`: Has the appearance of a link but the dimensions and modifiers of a button.
+---
+<button class="dc-btn dc-btn--primary">Primary Button</button>
+<button class="dc-btn dc-btn--destroy">Destroy Button</button>
+<button class="dc-btn dc-btn--disabled">Disabled Button</button>
+<br>
+<button class="dc-btn dc-btn--link">Button Link</button>
+<button class="dc-btn dc-btn--link dc-btn--destroy">Button Link - Destroy</button>
+<button class="dc-btn dc-btn--link dc-btn--disabled">Button Link - Disabled</button>
+<br>

docs/demo/materials/02-atoms/link.html

@@ -1,13 +1,9 @@
-<a href class="dc-link" data-tooltip="Dont't forget the tooltip">This link isn't pointing anywhere</a>
+<a href class="dc-link">This link isn't pointing anywhere</a>
 
 <br>
 
-<a href class="dc-link dc-link--success" data-tooltip="Dont't forget the tooltip">This link isn't pointing anywhere with success</a>
+<a href class="dc-link dc-link--destroy">This link isn't pointing anywhere and destroy</a>
 
 <br>
 
-<a href class="dc-link dc-link--destroy" data-tooltip="Dont't forget the tooltip">This link isn't pointing anywhere and destroy</a>
-
-<br>
-
-<a href class="dc-link dc-link--disabled" data-tooltip="Dont't forget the tooltip">This link isn't pointing anywhere and is disabled</a>
+<a href class="dc-link dc-link--disabled">This link isn't pointing anywhere and is disabled</a>

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--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--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": "^1.1.0",

src/styles/atoms/_btn.scss

@@ -53,6 +53,44 @@
     }
 }
 
+//  = LINK BUTTON
+//  ---------------------------------------------------------------------------
+@mixin _dc-btn--link-reset {
+    background: transparent;
+    box-shadow: none;
+    border: 1px solid transparent;
+}
+
+@mixin dc-btn--link {
+    @include _dc-btn--link-reset;
+    color: $dc-link-color;
+    transition: color .1s linear;
+}
+
+@mixin dc-btn--link--no-touch {
+    &:hover {
+        @include _dc-btn--link-reset;
+        color: $dc-link-color-hover;
+    }
+}
+
+@mixin dc-btn--link--touch {
+    &:active {
+        @include _dc-btn--link-reset;
+        color: $dc-link-color-hover;
+    }
+}
+
+@mixin dc-btn--link-disabled {
+    @include _dc-btn--link-reset;
+    color: $dc-gray50;
+
+    &:hover,
+    &:active {
+        border: 1px solid transparent;
+    }
+}
+
 //  = PRIMARY
 //  ---------------------------------------------------------------------------
 
@@ -99,7 +137,6 @@
     }
 }
 
-
 //  = DISABLED
 //  ---------------------------------------------------------------------------
 
@@ -128,7 +165,6 @@
 @mixin dc-btn--small {
     padding: $dc-space100 - .1 $dc-space100;
     font-size: 1.4rem;
-
     @content;
 }
 
@@ -168,7 +204,6 @@
     width: 100%;
 }
 
-
 @mixin dc-btn-selectors {
     .dc-btn {
         @include dc-btn;
@@ -177,6 +212,11 @@
     .no-touch .dc-btn {  @include dc-btn--no-touch;  }
     .touch .dc-btn {  @include dc-btn--touch;  }
 
+    .dc-btn--link {  @include dc-btn--link;  }
+    .touch .dc-btn--link {  @include dc-btn--link--touch;  }
+    .no-touch .dc-btn--link {  @include dc-btn--link--no-touch;  }
+
+
     .dc-btn--primary {  @include dc-btn--primary;  }
     .no-touch .dc-btn--primary {  @include dc-btn--primary--no-touch;  }
     .touch .dc-btn-primary {  @include dc-btn--primary--touch;  }
@@ -206,4 +246,7 @@
     .dc-btn--block {
         @include dc-btn--block;
     }
+
+    // special case (usually this kind of selectors should be avoided)
+    .dc-btn--link.dc-btn--disabled {  @include dc-btn--link-disabled;  }
 }

src/styles/atoms/_link.scss

@@ -26,18 +26,6 @@
     }
 }
 
-@mixin dc-link--success--no-touch {
-    &:hover {
-        color: $dc-green30;
-    }
-}
-
-@mixin dc-link--success--touch {
-    &:active {
-        color: $dc-green30;
-    }
-}
-
 @mixin dc-link--destroy--no-touch {
     &:hover {
         color: $dc-red40;
@@ -80,14 +68,6 @@
         @include dc-link--touch;
     }
 
-    .no-touch .dc-link--success {
-        @include dc-link--success--no-touch;
-    }
-
-    .touch .dc-link--success {
-        @include dc-link--success--touch;
-    }
-
     .no-touch .dc-link--destroy {
         @include dc-link--destroy--no-touch;
     }