Improve Textfield widget

components/src/stories/TextField.stories.js

@@ -11,9 +11,12 @@ export const Component = {
     },
     template: '<ui-textfield v-bind="args"></ui-textfield>',
   }),
-  
+
   args: {
     label: 'Label text',
+    value: '',
+    placeholder: 'Placeholder text',
+    suffix: '',
   },
 };
 
@@ -25,5 +28,8 @@ export default {
   },
   argTypes: {
     label: 'text',
+    value: 'text',
+    placeholder: 'text',
+    suffix: 'text',
   },
 };

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

@@ -1,67 +1,60 @@
+import { mount } from '@vue/test-utils';
 import Textfield from './widget';
 
 
 describe('Textfield widget', () => {
-  let context;
-  let result;
-
-  describe('#data', () => {
-    it('returns the initial data', () => {
-      result = Textfield.data();
-
-      expect(result).toEqual({
-        focused: false,
-        localValue: '',
-      });
+  let wrapper;
+
+  describe('render', () => {
+    it('renders the base component without any prop', () => {
+      wrapper = mount(Textfield);
+
+      expect(wrapper.get('.text-field').exists()).toBeTruthy();
+      expect(wrapper.get('.text-field label').text()).toEqual('');
+      expect(wrapper.get('.text-field__input').exists()).toBeTruthy();
+      expect(wrapper.get('.text-field__input').element.value).toEqual('');
+      expect(wrapper.get('.text-field__input').attributes('placeholder')).toEqual('');
+      expect(wrapper.find('.text-field__suffix').exists()).toBeFalsy();
+      expect(wrapper.find('.text-field_focused').exists()).toBeFalsy();
+      expect(wrapper.find('.text-field__input_right').exists()).toBeFalsy();
     });
-  });
-
-  describe('methods', () => {
-    describe('#onInput', () => {
 
-      beforeEach(() => {
-        context = {
-          localValue: 'my value',
-          $emit: jest.fn(),
-          e: {
-            stopPropagation: jest.fn(),
-          },
-        };
-
-        Textfield.methods.onInput.call(context, context.e);
-      });
-
-      it('calls stop propagation from event', () => {
-        expect(context.e.stopPropagation).toHaveBeenCalled();
+    it('renders the base component with the props set', () => {
+      wrapper = mount(Textfield, {
+        props: {
+          value: 'Foo',
+          label: 'My text input',
+          placeholder: 'Insert text here',
+          suffix: 'hh:mm:ssss.csv',
+        },
       });
 
-      it('emits input event with localValue', () => {
-        expect(context.$emit).toHaveBeenCalledWith('input', context.localValue);
-      });
+      expect(wrapper.get('.text-field').exists()).toBeTruthy();
+      expect(wrapper.get('.text-field label').text()).toEqual('My text input');
+      expect(wrapper.get('.text-field__input').exists()).toBeTruthy();
+      expect(wrapper.get('.text-field__input').element.value).toEqual('Foo');
+      expect(wrapper.get('.text-field__input').attributes('placeholder')).toEqual('Insert text here');
+      expect(wrapper.get('.text-field__suffix').text()).toEqual('hh:mm:ssss.csv');
+      expect(wrapper.get('.text-field__input_right').exists()).toBeTruthy();
+      expect(wrapper.find('.text-field_focused').exists()).toBeFalsy();
     });
 
-    describe('#removeFocus', () => {
-      it('sets focused to false if focused is true', () => {
-        context = {
-          focused: true,
-        }
+    it('sets the "text-field_focused" class when focused', async () => {
+      wrapper = mount(Textfield);
 
-        Textfield.methods.removeFocus.call(context);
+      await wrapper.find('.text-field').trigger('focusin');
 
-        expect(context.focused).toEqual(false);
-      })
+      expect(wrapper.get('.text-field_focused').exists()).toBeTruthy();
     });
+  });
 
-    describe('#setFocus', () => {
-      it('sets focused to false if focused is true', () => {
-        context = {
-          focused: false,
-        }
+  describe('events', () => {
+    it('emits the "input" event when the input element value changes', async () => {
+      wrapper = mount(Textfield);
 
-        Textfield.methods.setFocus.call(context);
+      await wrapper.find('.text-field__input').setValue('lorem ipsum');
 
-        expect(context.focused).toEqual(true);
-      })
+      expect(wrapper.emitted().input[0]).toEqual(['lorem ipsum']);
     });
   });
 });

components/src/widgets/textfield/widget.vue

@@ -1,10 +1,7 @@
-<!-- eslint-disable vue/no-v-html -->
 <template>
   <div
-    :class="[
-      {'text-field_focused': focused},
-      'text-field',
-    ]"
+    class="text-field"
+    :class="{ 'text-field_focused': isFocused }"
     @focusin="setFocus"
     @focusout="removeFocus"
   >
@@ -13,51 +10,66 @@
       <div class="text-field__body">
         <input
           v-model="localValue"
-          name="textfield"
           class="text-field__input"
+          :class="{ 'text-field__input_right': suffix }"
+          :placeholder="placeholder"
+          name="textfield"
           type="text"
-          @input="onInput"
+          @input.stop
         >
+        <span
+          v-if="suffix"
+          class="text-field__suffix"
+        >{{ suffix }}</span>
       </div>
     </div>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      default: '',
-    },
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
   },
-  emits: ['input'],
-  data() {
-    return {
-      focused: false,
-      localValue: '',
-    }
+  label: {
+    type: String,
+    default: '',
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  suffix: {
+    type: String,
+    default: '',
   },
+});
 
-  methods: {
-    onInput(e) {
-      e.stopPropagation();
-      this.$emit('input', this.localValue );
-    },
+const localValue = ref('');
 
-    removeFocus() {
-      if (this.focused) {
-        this.focused = false;
-      }
-    },
+const isFocused = ref(false);
+const emit = defineEmits(['input']);
 
-    setFocus() {
-      if (this.focused) return;
+const removeFocus = () => (isFocused.value = false);
+const setFocus = () => (isFocused.value = true);
 
-      this.focused = true;
-    },
+watch(
+  () => props.value,
+  newValue => {
+    localValue.value = newValue;
   },
-}
+  { immediate: true },
+);
+
+watch(
+  localValue,
+  (newValue) => {
+    emit('input', newValue);
+  },
+);
 </script>
 
 <style lang="stylus">
@@ -77,12 +89,6 @@ export default {
     font-size: 14px;
   }
 
-  &___r {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-  }
-
   &__body {
     flex-grow: 1;
 
@@ -115,6 +121,10 @@ export default {
     outline: none;
     border-style: none;
     background-color: transparent;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #212121;
 
     &:hover,
     &:focus {
@@ -135,7 +145,17 @@ export default {
     .text-field_disabled & {
       color: #BDBDBD;
     }
+
+    &_right {
+      text-align: right;
+    }
+  }
+
+  &__suffix {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #707070;
   }
 }
 </style>
-