Merge pull request #39 from cloudblue/button

Add button

components/jest.config.js

@@ -41,6 +41,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost/',
+    customExportConditions: ["node", "node-addons"],
   },
 
   coverageProvider: 'v8',

components/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;

components/src/stories/Button.stories.js

@@ -0,0 +1,29 @@
+import Button from '~widgets/button/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-button', Button);
+
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-button disabled v-bind="args"></ui-button>`,
+  }),
+
+  args: {
+    text: 'Text',
+  },
+};
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: 'text',
+  },
+};

components/src/widgets/button/widget.spec.js

@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import Button from './widget';
+
+
+describe('Button widget', () => {
+  let result;
+
+  describe('computed', () => {
+    describe('#style', () => {
+      it('returns the styles', () => {
+        const wrapper = mount(Button)
+
+        result = wrapper.vm.style;
+
+        expect(result).toEqual(`
+  background-color: #2C98F0;
+  color: #FFF;
+`);
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('#onClick', () => {
+      it('emits clicked event if it is not disabled', async () => {
+        const wrapper = mount(Button)
+
+        result = wrapper.vm.onClick();
+
+        expect(wrapper.emitted('clicked')).toBeTruthy()
+      });
+    });
+  });
+});

components/src/widgets/button/widget.vue

@@ -0,0 +1,74 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <button
+    :disabled="disabled"
+    :style="style"
+    @click="onClick"
+  >
+    <slot>
+      {{ text }}
+    </slot>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const emit = defineEmits(['clicked']);
+
+ 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};
+`);
+
+const onClick = () => {
+  if (!props.disabled) emit('clicked');
+};
+
+</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.8;
+  }
+
+  &:disabled {
+    background-color: #f2f2f2 !important;
+    color: #BDBDBD !important;
+    opacity: 0.5;
+    cursor: default;
+    pointer-events: none;
+  }
+}
+</style>
+
+