feat(core): added button

packages/core/Button/default.vue

@@ -1,20 +1,26 @@
 <template>
-  <base-button>Label</base-button>
+  <button-base v-bind="$attrs" v-on="$listeners">
+    <slot name="default" />
+  </button-base>
 </template>
 
 <script>
-import BaseButton from '@foundation/core/Button';
+import ButtonBase from './base';
+
 export default {
   components: {
-    BaseButton
-  }
+    ButtonBase
+  },
+
+  inheritAttrs: false
 };
 </script>
 
+
 <style lang="postcss" scoped>
 >>> .button {
-  color: #333;
-  background: #eee;
-  border: solid #ccc 1px;
+  color: white;
+  background: #b00;
+  border: solid #000 2px;
 }
 </style>

packages/core/Button/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="button" v-on="$listeners">
+  <button class="button"  v-bind="$attrs" v-on="$listeners">
     <slot>{{ label }}</slot>
   </button>
 </template>

packages/core/Button/mutation/Icon/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <base-button class="icon-button" v-bind="$attrs" v-on="$listeners">
+    <template #default>
+      <slot name="icon" :iconName="iconName">
+        <base-icon class="icon" />
+      </slot>
+      <slot name="default" :label="label">
+        <span class="label" v-html="label" />
+      </slot>
+    </template>
+  </base-button>
+</template>
+
+<script>
+import BaseButton from '../../index';
+import BaseIcon from '../../../Icon';
+
+export default {
+  components: {
+    BaseButton,
+    BaseIcon
+  },
+  props: {
+    label: {
+      type: String,
+      default: 'Label'
+    },
+    iconName: {
+      type: String,
+      default: 'iconName'
+    }
+  },
+  data () {
+    return {
+    };
+  },
+
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="postcss" scoped>
+.icon-button {
+  & .icon {
+    width: 2em;
+  }
+}
+</style>

packages/core/Svg/index.vue

@@ -1,6 +1,8 @@
 <template>
   <i class="svg" v-bind="$attrs" v-on="$listeners">
-    <slot name="default" />
+    <slot name="default">
+      <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"><path d="M64.664 6.504a3 3 0 0 0-4.16.832l-33.97 50.955L11.121 42.88a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l18 18a2.996 2.996 0 0 0 2.416.864 2.998 2.998 0 0 0 2.201-1.32l36-54a3 3 0 0 0-.832-4.16" fill="#00358E" fill-rule="evenodd" /></svg>
+    </slot>
   </i>
 </template>
 

packages/sample/pages/button.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <fieldset>
+      <legend>Button</legend>
+      <form>
+        <base-button />
+      </form>
+    </fieldset>
+    <fieldset>
+      <legend>IconButton</legend>
+      <form>
+        <button-icon icon-name="icn" label="IconButton" />
+      </form>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+
+import BaseButton from '@foundation/core/Button';
+import ButtonIcon from '@foundation/core/Button/mutation/Icon';
+
+export default {
+  components: {
+    BaseButton,
+    ButtonIcon
+  },
+  data () {
+    return {
+      iconButton: {
+        iconName: 'check',
+        label: 'IconButton'
+      }
+    };
+  }
+};
+
+</script>

packages/sample/pages/index.vue

@@ -15,6 +15,10 @@ export default {
   data () {
     return {
       links: [
+        {
+          title: 'button',
+          to: '/button'
+        },
         {
           title: 'collapsible-container',
           to: '/collapsible-container'