Merge pull request #84 from cloudblue/LITE-30026

Add textarea, alert and radio button

components/src/index.js

@@ -15,6 +15,9 @@ export { default as Table } from '~widgets/table/widget.vue';
 export { default as ComplexTable } from './widgets/complexTable/widget.vue';
 export { default as Button } from '~widgets/button/widget.vue';
 export { default as Menu } from '~widgets/menu/widget.vue';
+export { default as Textarea } from '~widgets/textarea/widget.vue';
+export { default as Alert } from '~widgets/alert/widget.vue';
+export { default as Radio } from '~widgets/radio/widget.vue';
 
 export { default as store } from '~core/store';
 export { default as bus } from '~core/eventBus';

components/src/stories/Alert.stories.js

@@ -0,0 +1,30 @@
+import Alert from '~widgets/alert/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-alert', Alert);
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-alert v-bind="args"></ui-alert>`,
+  }),
+
+  args: {
+    message: 'This is an alert item',
+  },
+};
+
+export default {
+  title: 'Components/Alert',
+  component: Alert,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    message: 'text',
+    icon: 'text',
+    type: 'text',
+  },
+};

components/src/stories/Radio.stories.js

@@ -0,0 +1,32 @@
+import Radio from '~widgets/radio/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-radio', Radio);
+
+export const Component = {
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: `<ui-radio v-bind="args"></ui-radio>`,
+  }),
+
+  args: {
+    label: 'Option',
+    selectedValue: 'foo',
+    radioValue: 'foo',
+  },
+};
+
+export default {
+  title: 'Components/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    label: 'text',
+    radioValue: 'text',
+    selectedValue: 'text',
+  },
+};

components/src/stories/Textarea.stories.js

@@ -0,0 +1,38 @@
+import Textarea from '~widgets/textarea/widget.vue';
+import registerWidget from '~core/registerWidget';
+
+registerWidget('ui-textarea', Textarea);
+
+export const Basic = {
+  name: 'Basic options',
+  render: (args) => ({
+    setup() {
+      return { args };
+    },
+    template: '<ui-textarea v-bind="args"></ui-textarea>',
+  }),
+
+  args: {
+    value: '',
+    placeholder: 'Placeholder text',
+    label: 'Label',
+  },
+};
+
+export default {
+  title: 'Components/Textarea',
+  component: Textarea,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    value: 'text',
+    readonly: 'boolean',
+    placeholder: 'text',
+    required: 'boolean',
+    autoGrow: 'boolean',
+    noBorder: 'boolean',
+    rows: 'number',
+    label: 'string',
+  },
+};

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

@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Alert from './widget.vue';
+
+describe('Alert component', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(Alert, {
+      props: {
+        modelValue: true,
+        message: 'this is a message',
+        type: 'success',
+      },
+      global: {
+        renderStubDefaultSlot: true,
+      },
+    });
+  });
+
+  describe('render', () => {
+    test('renders the base component', () => {
+      expect(wrapper.get('.alert-holder').attributes()).toEqual(
+        expect.objectContaining({
+          class: 'alert-holder alert_success',
+          modelvalue: 'true',
+        }),
+      );
+
+      const text = wrapper.find('.alert__text');
+
+      expect(text.text()).toEqual('this is a message');
+
+      const icon = wrapper.find('ui-icon');
+
+      expect(icon.exists()).toEqual(true);
+      expect(icon.attributes()).toEqual(
+        expect.objectContaining({
+          iconname: 'googleInfoBaseline',
+          color: '#0bb071',
+          size: '24',
+        }),
+      );
+    });
+  });
+});

components/src/widgets/alert/widget.vue

@@ -0,0 +1,97 @@
+<template>
+  <div
+    class="alert-holder"
+    :class="`alert_${type}`"
+  >
+    <div class="alert">
+      <div class="alert__icon">
+        <ui-icon
+          :iconName="icon"
+          :color="typeAlert[type]"
+          size="24"
+        />
+      </div>
+      <div class="alert__text">
+        <slot name="message"> {{ message }} </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+
+  icon: {
+    type: String,
+    default: 'googleInfoBaseline',
+  },
+
+  type: {
+    type: String,
+    default: 'default',
+  },
+});
+
+const typeAlert = {
+  info: '#0055ff',
+  error: '#FF6A6A',
+  success: '#0bb071',
+  warning: '#FFC700',
+  default: '#bdbdbd',
+};
+</script>
+
+<style lang="stylus">
+.alert-holder {
+  width: 100%;
+  /* #bdbdbd */
+  background-color: rgba(189, 189, 189, 0.15);
+}
+.alert {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  min-height: 64px;
+  min-width: 240px;
+  max-width: 600px;
+  padding: 16px;
+  border-radius: 2px;
+  color: #bdbdbd;
+}
+
+.alert_error {
+  /* #FF6A6A */
+  background-color: rgba(255, 106, 106, 0.2);
+}
+
+.alert_info {
+  /* 0, 85, 255 */
+  background-color: rgba(0, 85, 255, 0.15);
+}
+.alert_success {
+  /* #0bb071 */
+  background-color: rgba(11, 176, 113, 0.15);
+}
+.alert_warning {
+  /* #FFC700 */
+  background-color: rgba(255, 199, 0, 0.15);
+}
+
+.alert__icon {
+  flex: 0 0 auto;
+  margin-right: 12px;
+  display: flex;
+}
+
+.alert__text {
+  flex: 1 1 auto;
+  font-size: 14 px;
+  line-height: 20px;
+  text-align: left;
+  color: #212121;
+}
+</style>

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

@@ -0,0 +1,91 @@
+import RadioInput from './widget.vue';
+import { shallowMount } from '@vue/test-utils';
+
+describe('RadioInput component', () => {
+  describe('render', () => {
+    describe('when is checked', () => {
+      test('renders the base component', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'foo',
+            label: 'My radio input',
+            selectedValue: 'foo',
+          },
+        });
+
+        expect(wrapper.get('.radio-input ui-icon').attributes()).toEqual(
+          expect.objectContaining({
+            iconname: 'googleRadioButtonCheckedBaseline',
+            color: '#2C98F0',
+          }),
+        );
+        expect(wrapper.get('.radio-input__label').classes()).not.toContain(
+          'radio-input__label_empty',
+        );
+        expect(wrapper.get('.radio-input__label-text').text()).toEqual('My radio input');
+        expect(wrapper.vm.isSelected).toEqual(true);
+        expect(wrapper.vm.icon).toEqual('googleRadioButtonCheckedBaseline');
+        expect(wrapper.vm.iconColor).toEqual('#2C98F0');
+      });
+    });
+
+    describe('when is unchecked', () => {
+      test('renders the base component', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'foo',
+            label: 'My radio input',
+            selectedValue: 'bar',
+          },
+        });
+
+        expect(wrapper.get('.radio-input ui-icon').attributes()).toEqual(
+          expect.objectContaining({
+            iconname: 'googleRadioButtonUncheckedBaseline',
+            color: '',
+          }),
+        );
+        expect(wrapper.get('.radio-input__label').classes()).not.toContain(
+          'radio-input__label_empty',
+        );
+        expect(wrapper.get('.radio-input__label-text').text()).toEqual('My radio input');
+        expect(wrapper.vm.isSelected).toEqual(false);
+        expect(wrapper.vm.icon).toEqual('googleRadioButtonUncheckedBaseline');
+        expect(wrapper.vm.iconColor).toEqual('');
+      });
+    });
+
+    describe('when there is no label', () => {
+      test('adds the "radio-input__label_empty" class to the label element if there is no label', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'foo',
+            selectedValue: 'foo',
+            label: '',
+          },
+        });
+
+        expect(wrapper.get('.radio-input__label').classes()).toContain('radio-input__label_empty');
+      });
+    });
+  });
+
+  describe('events', () => {
+    describe('#select', () => {
+      test('it triggers the selected event with the radio value', () => {
+        const wrapper = shallowMount(RadioInput, {
+          props: {
+            radioValue: 'bar',
+            selectedValue: 'foo',
+            label: 'label',
+          },
+        });
+
+        wrapper.vm.select();
+
+        expect(wrapper.emitted('selected')).toBeTruthy();
+        expect(wrapper.emitted()).toEqual({ selected: [['bar']] });
+      });
+    });
+  });
+});