Add button

Author: nerimartinez

src/index.js

@@ -11,6 +11,7 @@ import navigation from './widgets/navigation/widget.vue';
 import status from './widgets/status/widget.vue';
 import textfield from './widgets/textfield/widget.vue';
 import table from './widgets/table/widget.vue';
+import button from './widgets/button/widget.vue';
 
 import _store from './core/store';
 import _bus from './core/eventBus';
@@ -28,6 +29,7 @@ export const Navigation = navigation;
 export const Status = status;
 export const Textfield = textfield;
 export const Table = table;
+export const Button = button;
 
 export const bus = _bus;
 export const store = _store;

src/widgets/button/widget.spec.js

@@ -0,0 +1,27 @@
+import Button from './widget';
+
+describe('Button widget', () => {
+  let result;
+  let component;
+
+  describe('computed', () => {
+    describe('#style', () => {
+      it('returns the styles', () => {
+        component = Button.setup(
+          {
+            backgroundColor: 'red',
+            color: 'white'
+          },
+          {expose: () => 'mock reqired for composition api'}
+        );
+
+        result = component.style.value;
+
+        expect(result).toEqual(`
+  background-color: red;
+  color: white;
+`);
+      });
+    });
+  });
+});

src/widgets/button/widget.vue

@@ -0,0 +1,58 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <button
+    :disabled="disabled"
+    :style="style"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+ const props = defineProps({
+  text: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  backgroundColor: {
+    type: String,
+    default: '#2C98F0',
+  },
+  color: {
+    type: String,
+    default: '#FFF',
+  },
+})
+
+const style = computed(() => `
+  background-color: ${props.backgroundColor};
+  color: ${props.color};
+`);
+</script>
+
+<style lang="stylus">
+button {
+  text-transform: uppercase;
+  overflow: hidden;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 2px;
+  cursor: pointer;
+  border-style: none;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+
+  &:hover {
+    opacity: 0.5;
+  }
+}
+</style>
+
+