From 2ca9146ea3c4e0a996c4390711c16db426e67a52 Mon Sep 17 00:00:00 2001
From: nerim <nerimartinez@gmail.com>
Date: Fri, 2 Feb 2024 13:43:40 +0100
Subject: [PATCH] Add button

---
 src/index.js                      |  2 ++
 src/widgets/button/widget.spec.js | 27 ++++++++++++++
 src/widgets/button/widget.vue     | 58 +++++++++++++++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 src/widgets/button/widget.spec.js
 create mode 100644 src/widgets/button/widget.vue

diff --git a/src/index.js b/src/index.js
index 8f802b9d..a992ef1a 100644
--- a/src/index.js
+++ b/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;
diff --git a/src/widgets/button/widget.spec.js b/src/widgets/button/widget.spec.js
new file mode 100644
index 00000000..32dfd783
--- /dev/null
+++ b/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;
+`);
+      });
+    });
+  });
+});
diff --git a/src/widgets/button/widget.vue b/src/widgets/button/widget.vue
new file mode 100644
index 00000000..0831eb45
--- /dev/null
+++ b/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>
+
+