TASK: Add icon slot in button to allow icon position and margin

src/components/button/button.tsx

@@ -21,7 +21,7 @@ export class Button {
 
   render() {
     return (<button class={this.className()} disabled={this.disabled} type={this.type}>
-      <slot/>
+      <slot name="icon" /> <slot/>
     </button>);
   }
 }

src/components/button/styles/button.dark.scss

@@ -7,76 +7,80 @@
   font-weight: 400;
   font-size: $font-size-dark-base;
   line-height: 1.1;
+}
 
-  button {
-    background-color: neos-color($colors-dark, 'neutral');
-    border: 0;
-    color: neos-color($colors-dark, 'neutral', 'contrast');
+::slotted(neos-icon) {
+  margin-right: $content-margin-small;
+}
 
-    padding: 0 $content-padding;
-    margin: 0;
+button {
+  background-color: neos-color($colors-dark, 'neutral');
+  border: 0;
+  color: neos-color($colors-dark, 'neutral', 'contrast');
 
-    &:focus:enabled,
-    &:hover:enabled {
-      background-color: neos-color($colors-dark, 'primary', 'shade');
-    }
+  padding: 0 $content-padding;
+  margin: 0;
+
+  &:focus:enabled,
+  &:hover:enabled {
+    background-color: neos-color($colors-dark, 'primary', 'shade');
+  }
 
-    &.t-clean {
-      background-color: neos-color($colors-dark, 'success');
+  &.t-clean {
+    background-color: neos-color($colors-dark, 'success');
 
-      &:focus:enabled,
-      &:hover:enabled {
-        background-color: neos-color($colors-dark, 'success', 'shade');
-      }
+    &:focus:enabled,
+    &:hover:enabled {
+      background-color: neos-color($colors-dark, 'success', 'shade');
     }
+  }
 
-    &.t-brand {
-      background-color: neos-color($colors-dark, 'primary');
+  &.t-brand {
+    background-color: neos-color($colors-dark, 'primary');
 
-      &:focus:enabled,
-      &:hover:enabled {
-        background-color: neos-color($colors-dark, 'primary', 'shade');
-      }
+    &:focus:enabled,
+    &:hover:enabled {
+      background-color: neos-color($colors-dark, 'primary', 'shade');
     }
+  }
 
-    &.t-lighter {
-      background-color: neos-color($colors-dark, 'secondary');
+  &.t-lighter {
+    background-color: neos-color($colors-dark, 'secondary');
 
-      &:focus:enabled,
-      &:hover:enabled {
-        background-color: neos-color($colors-dark, 'secondary', 'shade');
-      }
+    &:focus:enabled,
+    &:hover:enabled {
+      background-color: neos-color($colors-dark, 'secondary', 'shade');
     }
+  }
 
-    &.t-transparent {
-      background-color: transparent;
+  &.t-transparent {
+    background-color: transparent;
 
-      &:focus:enabled,
-      &:hover:enabled {
-        background-color: neos-color($colors-dark, 'primary', 'shade');
-      }
+    &:focus:enabled,
+    &:hover:enabled {
+      background-color: neos-color($colors-dark, 'primary', 'shade');
     }
+  }
 
-    &.t-warn {
-      background-color: neos-color($colors-dark, 'warning');
+  &.t-warn {
+    background-color: neos-color($colors-dark, 'warning');
 
-      &:focus:enabled,
-      &:hover:enabled {
-        background-color: neos-color($colors-dark, 'warning', 'shade');
-      }
+    &:focus:enabled,
+    &:hover:enabled {
+      background-color: neos-color($colors-dark, 'warning', 'shade');
     }
+  }
 
-    &.l-squared {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: $grid-unit;
-      width: $grid-unit;
-    }
+  &.l-squared {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: $grid-unit;
+    width: $grid-unit;
+  }
 
-    &[disabled] {
-      cursor: not-allowed;
-      opacity: .65;
-    }
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: .65;
   }
 }

src/index.html

@@ -93,19 +93,24 @@
       <h2>with icon</h2>
     </header>
     <neos-button>
-      <neos-icon name="folder"></neos-icon> Confirm
+      <neos-icon name="folder" slot="icon"></neos-icon>
+      Confirm
     </neos-button>
     <neos-button theme="clean">
-      <neos-icon name="check-circle"></neos-icon> Publish
+      <neos-icon name="check-circle" slot="icon"></neos-icon>
+      Publish
     </neos-button>
     <neos-button theme="brand">
-      <neos-icon name="calendar"></neos-icon> Did you love Neos?
+      <neos-icon name="heart" slot="icon"></neos-icon>
+      Did you love Neos?
     </neos-button>
     <neos-button theme="warn">
-      <neos-icon name="folder"></neos-icon> Delete
+      <neos-icon name="folder" slot="icon"></neos-icon>
+      Delete
     </neos-button>
     <neos-button theme="warn" disabled>
-      <neos-icon name="frown"></neos-icon> Delete
+      <neos-icon name="frown" slot="icon"></neos-icon>
+      Delete
     </neos-button>
   </section>
   <section>