@vcita/design-system 0.2.0 → 0.2.4

package/src/components/VcTextField/VcTextField.spec.js

@@ -28,18 +28,20 @@ describe("VcTextField.vue", () => {
 
     it("mounts", () => {
         // Queries: https://testing-library.com/docs/queries/about#types-of-queries
-        const {container} = renderWithVuetify(VcTextField, {
+        const {container,getByTestId} = renderWithVuetify(VcTextField, {
             props: {}
         })
 
         // Expect options: https://github.com/testing-library/jest-dom
         expect(container).toHaveAttribute('data-app', 'true')
+        const textField = getByTestId('vc-text-field')
+        expect(textField).toBeInTheDocument()
     });
 
     it("receives initial value", () => {
         // Queries: https://testing-library.com/docs/queries/about#types-of-queries
-        const labelText = "initial label";
-        const inputText = "initial value";
+        const labelText = "label";
+        const inputText = "Text";
         const {getByLabelText} = renderWithVuetify(VcTextField, {
             props: {
                 label: labelText,
@@ -68,103 +70,19 @@ describe("VcTextField.vue", () => {
         expect(item).toHaveValue(newValue);
     });
 
-    it("used as number stepper and click down", async () => {
-        const labelText = "initial label";
-        const {getByLabelText, getByTestId, emitted} = renderWithVuetify(VcTextField, {
-            props: {
-                label: labelText,
-                type: 'number',
-                value: 2,
-            }
-        })
-
-        const item = getByLabelText(labelText);
-        expect(item).toHaveValue(2);
-        const buttonUp = getByTestId('VcTextFieldButtonUp');
-        const buttonDown = getByTestId('VcTextFieldButtonDown');
-
-        expect(buttonUp).toBeInTheDocument();
-        expect(buttonDown).toBeInTheDocument();
-
-        await userEvent.click(buttonDown);
-        expect(emitted().input.length).toBe(1);
-        const newValue = emitted().input[0][0];
-        expect(newValue).toBe("1");
-    });
-
-    it("used as number stepper and click up", async () => {
-        const labelText = "initial label";
-        const {getByLabelText, getByTestId, emitted} = renderWithVuetify(VcTextField, {
-            props: {
-                label: labelText,
-                type: 'number',
-                value: 2,
-            }
-        })
-
-        const item = getByLabelText(labelText);
-        expect(item).toHaveValue(2);
-        const buttonUp = getByTestId('VcTextFieldButtonUp');
-        const buttonDown = getByTestId('VcTextFieldButtonDown');
-
-        expect(buttonUp).toBeInTheDocument();
-        expect(buttonDown).toBeInTheDocument();
-
-        await userEvent.click(buttonUp);
-        expect(emitted().input.length).toBe(1);
-        const newValue = emitted().input[0][0];
-        expect(newValue).toBe("3");
-    });
-
-    it("used as number stepper with max limit", async () => {
-        const labelText = "initial label";
-        const startingValue = 3;
-        const {getByLabelText, getByTestId, emitted} = renderWithVuetify(VcTextField, {
-            props: {
-                label: labelText,
-                type: 'number',
-                value: startingValue,
-                min: 1,
-                max: 3,
-            }
-        })
-
-        const item = getByLabelText(labelText);
-        expect(item).toHaveValue(startingValue);
-        const buttonUp = getByTestId('VcTextFieldButtonUp');
-        const buttonDown = getByTestId('VcTextFieldButtonDown');
-
-        expect(buttonUp).toBeInTheDocument();
-        expect(buttonDown).toBeInTheDocument();
-
-        await userEvent.click(buttonUp);
-        expect(emitted().input).toBe(undefined);
-        expect(item).toHaveValue(startingValue);
-    });
-
-    it("used as number stepper with min limit", async () => {
+    it("receive user input over the length limit", () => {
         const labelText = "initial label";
-        const startingValue = 1;
-        const {getByLabelText, getByTestId, emitted} = renderWithVuetify(VcTextField, {
+        const {getByLabelText} = renderWithVuetify(VcTextField, {
             props: {
                 label: labelText,
-                type: 'number',
-                value: startingValue,
-                min: 1,
-                max: 3,
+                counter: true,
+                maxlength: 10
             }
         })
-
+        const newValue = 'Hello world';
+        const newValueMaxLength = 'Hello worl';
         const item = getByLabelText(labelText);
-        expect(item).toHaveValue(startingValue);
-        const buttonUp = getByTestId('VcTextFieldButtonUp');
-        const buttonDown = getByTestId('VcTextFieldButtonDown');
-
-        expect(buttonUp).toBeInTheDocument();
-        expect(buttonDown).toBeInTheDocument();
-
-        await userEvent.click(buttonDown);
-        expect(emitted().input).toBe(undefined);
-        expect(item).toHaveValue(startingValue);
+        userEvent.type(item, newValue);
+        expect(item).toHaveValue(newValueMaxLength);
     });
 });

package/src/components/VcTextField/VcTextField.stories.js

@@ -1,65 +1,84 @@
 import VcTextFieldCmp from './VcTextField';
 import {action} from "@storybook/addon-actions";
 
-const StringTemplate = (args, {argTypes}) => ({
+const TextFieldTemplate = (args, {argTypes}) => ({
     components: {VcTextField: VcTextFieldCmp},
     props: Object.keys(argTypes),
-    data() {
-        return {
-            title: 'initial value',
-        }
-    },
-    template: '<VcTextField v-model="title" :label="label" type="text" :step="step" ' +
-        '@input="onInput"/>',
+    template: '<VcTextField :value="value" :maxlength="maxlength" :hint="hint" :counter="counter" :disabled="disabled" :rules="rules" :label="label" :type="type" @input="onInput"/>',
 })
 
-export const Playground = StringTemplate.bind({});
-
-// Set default values
+export const Playground = TextFieldTemplate.bind({});
 Playground.args = {
     onInput: action("onInput"),
-    label: "some label text",
+    label: "Label",
+    type: 'text'
 }
 
-// const NumberTemplate = (args, {argTypes}) => ({
-//     components: {VcTextField: VcTextFieldCmp},
-//     props: Object.keys(argTypes),
-//     data() {
-//         return {
-//             curValue: 3,
-//         }
-//     },
-//     template: '<VcTextField v-model="curValue" :label="label" type="number" :step="step" :min="min" :max="max"' +
-//         '@input="onInput"/>',
-// })
-
-// export const NumberField = NumberTemplate.bind({});
-
-// // Set default values
-// NumberField.args = {
-//     label: "some label text",
-//     onInput: action("onInput"),
-//     step: '1',
-// }
+export const Disabled = TextFieldTemplate.bind({});
+Disabled.args = {
+    onInput: action("onInput"),
+    label: "Label",
+    type: 'text',
+    disabled: true
+}
+export const Hint = TextFieldTemplate.bind({});
+Hint.args = {
+    onInput: action("onInput"),
+    label: "Label",
+    type: 'text',
+    hint: "Help text"
+}
+export const Error = TextFieldTemplate.bind({});
+Error.args = {
+    onInput: action("onInput"),
+    label: "Email",
+    type: 'text',
+    rules: [value => !!value || 'Required.',value => {
+        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+        return pattern.test(value) || 'Invalid e-mail.'
+    }]
+}
+export const Counter = TextFieldTemplate.bind({});
+Counter.args = {
+    onInput: action("onInput"),
+    label: "Email",
+    type: 'text',
+    counter: true,
+    maxlength: 100
+}
 
 export default {
     title: 'Form / VcTextField',
     id: 'VcTextField',
     component: VcTextFieldCmp,
-    // argTypes: {
-    //     type: {
-    //         options: ['number', 'text'],
-    //         control: {type: 'radio'}
-    //     },
-    // },
+    argTypes: {
+        type: {
+            options: ['number', 'text'],
+            control: {type: 'radio'}
+        },
+        disabled: {
+            options: [true, false],
+            control: {type: 'boolean'}
+        },
+        counter: {
+            options: [true, false],
+            control: {type: 'boolean'}
+        },
+        maxlength: {
+            control: {type: 'number'}
+        },
+        value: {
+            control: {type: 'text'}
+        }
+    },
     parameters: {
         design: {
             type: 'figma',
-            url: 'https://www.figma.com',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=634%3A1645',
         },
         status: {
-            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
-            url: 'http://www.url.com/status', // will make the tag a link
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/text-fields/', // will make the tag a link
         },
     },
 };

package/src/components/VcTextField/VcTextField.vue

@@ -1,213 +1,136 @@
 <template>
   <v-text-field class="VcTextInput"
                 dense
+                :data-qa="dataQa"
                 :label="label"
                 :rules="rules"
+                :disabled="disabled"
                 :type="type"
+                :error="counter && maxlength && value.length > maxlength"
                 :value="value"
-                :color="color"
-                :step="step"
+                :hint="hint"
+                :counter="counter"
+                :maxlength="maxlength"
+                persistent-hint
                 hide-details="auto"
                 @input="(data) => $emit('input',data)">
-    <template v-slot:append v-if="type === 'number'">
-      <VcLayout class="number-counter" column>
-        <VcButton icon
-                  data-qa="VcTextFieldButtonUp"
-                  :ripple="false"
-                  min-width="44px"
-                  max-height="25px"
-                  @click="updateValue(parseFloat(step))">
-          <VcIcon>icon-caret-down fa-rotate-180</VcIcon>
-        </VcButton>
-        <VcButton icon
-                  data-qa="VcTextFieldButtonDown"
-                  :ripple="false"
-                  min-width="44px"
-                  max-height="25px"
-                  @click="updateValue(-parseFloat(step))">
-          <VcIcon>icon-caret-down</VcIcon>
-        </VcButton>
-      </VcLayout>
-    </template>
-    <slot/>
   </v-text-field>
 </template>
 
 <script>
-import VcIcon from "@/components/VcIcon/VcIcon.vue";
-import VcButton from "@/components/VcButton/VcButton.vue";
-import VcLayout from "@/components/VcLayout/VcLayout.vue";
 
 export default {
   name: 'VcTextField',
-  components: {VcLayout, VcButton, VcIcon},
   props: {
     type: {
       type: String,
       default: 'text',
       validator: prop => ['text', 'number'].includes(prop)
     },
-    label: {
+    dataQa: {
       type: String,
-      default: '',
+      default: 'vc-text-field'
     },
-    step: {
+    label: {
       type: String,
-      default: '1',
+      default: '',
     },
     value: {
       type: [Number, String],
       default: '',
     },
-    min: {
-      type: Number,
-      default: -Infinity,
+    counter: {
+      type: [Number, Boolean],
+      default: false,
     },
-    max: {
+    maxlength: {
       type: Number,
-      default: Infinity,
+      default: 100,
     },
     rules: {
       type: Array
     },
-    color: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    hint: {
       type: String,
-      default: 'Primary',
+      default: '',
     }
-  },
-  methods: {
-    updateValue(num) {
-      let currVal = parseFloat(this.value)
-      currVal = parseFloat((currVal + num).toPrecision(this.step.length + 1))
-      if (currVal < parseFloat(this.min) || currVal > parseFloat(this.max)) {
-        return;
-      }
-      this.$emit('input', currVal.toString())
-    },
-  },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-@import "../../scss/_i18n-mixins.scss";
-
-.number-counter {
-  @include i-border-left(1px solid rgba(0, 0, 0, 0.12));
-}
-</style>
-
-<style lang="scss">
-@import "../../scss/_i18n-mixins.scss";
-
-.VcTextInput.v-text-field {
-  margin: 0;
-  padding: 0;
-
-  label {
-    letter-spacing: -0.3px;
-    font-size: 15px;
-    color: rgba(0, 0, 0, 0.4);
-  }
-
-  .v-text-field__slot:first-child {
-    margin: 0 12px;
-  }
-
-  &[prepend-inner-icon] {
-    .v-text-field__slot {
-      padding: 0;
+.VcTextInput.v-text-field::v-deep {
+  font-family: var(--primary-font-family);
+  .v-input__slot {
+    padding: 0px var(--size-value3);
+    height: var(--size-value13);
+    background: #FFFFFF;
+    border: 1px solid var(--gray-lighten-1);
+    box-sizing: border-box;
+    border-radius: 6px;
+    label{
+      font-size: var(--font-size-small2);
+      line-height: var(--size-value5);
+      color: var(--gray-darken-3);
+      font-weight: var(--font-weight-medium);
     }
-  }
-
-  &.v-input--is-label-active, &.v-input--is-focused {
-
-    label {
-      font-size: 14px;
-      font-weight: normal;
-      font-stretch: normal;
-      font-style: normal;
-      line-height: 1.17;
-      letter-spacing: -0.3px;
-      color: rgba(0, 0, 0, 0.62) !important;
-      transform: translateY(-100%) scale(0.85);
-      top: 8px;
+    input {
+      font-weight: var(--font-weight-medium2);
+      font-size: var(--font-size-small2);
+      line-height: var(--size-value5);
+      color: var(--gray-darken-5);
     }
-  }
-
-  &:not(.v-text-field--outlined) {
-    .v-text-field__slot {
-      transition: margin-bottom 0.1s;
+    &:before, &:after{
+      display: none;
     }
-
-    &.v-input--is-label-active, &.v-input--is-focused {
-      .v-text-field__slot {
-        margin-bottom: -20px;
+    &:hover{
+      border-color: var(--gray-darken-3);
+    }
+    &:focus, &:active, &:focus-within{
+      border: 1px solid var(--v-secondary-base);
+      box-shadow: 0px 0px 0px 3px var(--v-secondary-lighten1);
+      input{
+        color: var(--gray-darken-3);
       }
     }
   }
-
-  &.v-input--is-focused {
-    .v-input__slot {
-      border-color: currentColor;
-    }
+  &.error--text .v-input__slot{
+    border-color: var(--red);
+    color: unset;
+    box-shadow: unset;
+    font-size: var(--font-size-xx-small);
+    line-height: var(--size-value4);
   }
-
-  .v-input__slot {
-    min-height: 52px !important;
-    border-radius: 6px;
-    background-color: #fff !important;
-    position: relative !important;
-    border: solid 1px rgba(0, 0, 0, 0.12);
-    transition: border-color, background-color 0.1s !important;
-
-    &:hover {
-      border-color: currentColor;
+  &.v-input--is-label-active , &.v-input--is-focused{
+    label{
+    font-size: var(--font-size-small);
+    line-height: 1.17;
+    letter-spacing: -0.3px;
+    color: var(--gray-darken-4) !important;
+    transform: translateY(-100%) scale(0.85);
+    top: var(--size-value2);
     }
-
-    &:before, &:after {
-      display: none;
+    .v-text-field__slot {
+      margin-bottom: -14px;
     }
   }
-
-  &.v-input--is-disabled {
+  &.v-input--is-disabled{
     .v-input__slot {
-      background-color: rgba(0, 0, 0, 0.03) !important;
+      background: var(--gray-lighten-3);
+      border: 1px solid var(--gray-lighten-1);
+      label, input{
+        color: var(--gray-darken-2);
+      }
     }
   }
-
-  input {
-    font-size: 15px !important;
-    font-weight: 500;
-  }
-
-  .v-text-field__prefix {
-    color: rgba(0, 0, 0, 0.54) !important;
-  }
-
-  .v-input__prepend-inner, .v-input__append-inner {
-    color: rgba(0, 0, 0, 0.4);
-    margin: auto 12px auto 12px !important;
-    max-width: 20px;
-    max-height: 20px;
-    padding: 0 !important;
-
-    .v-input__icon {
-      height: 100%;
-      max-width: 100%;
-      min-width: 100%;
-      max-height: 100%;
-      min-height: 100%;
-    }
-
-    i {
-      color: rgba(0, 0, 0, 0.4);
-    }
+  &:not(.v-input--is-label-active):not(.v-input--is-focused) input {padding: var(--size-value2) 0}
+  .v-messages__message{
+    line-height: var(--size-value4);
   }
 
-  &.error--text {
-    .v-input__slot {
-      border: 1px solid #F2514A;
-    }
-  }
 }
-</style>
+</style>

package/src/components/VcTooltip/VcTooltip.spec.js

@@ -1,5 +1,5 @@
 import '@testing-library/jest-dom'
-import VcAlert from "./VcTooltip.vue";
+import VcTooltip from "./VcTooltip.vue";
 import Vuetify from 'vuetify'
 import {render} from "@testing-library/vue";
 import init from "../../../testing-library.config";
@@ -27,7 +27,7 @@ describe("VcTooltip.vue", () => {
 
     it("With normal tooltip", async () => {
         // Queries: https://testing-library.com/docs/queries/about#types-of-queries
-        const {container, getByTestId} = renderWithVuetify(VcAlert, {
+        const {container, getByTestId} = renderWithVuetify(VcTooltip, {
             props: {
                 content: 'content text',
                 dataQa: 'infoTooltip'
@@ -42,7 +42,7 @@ describe("VcTooltip.vue", () => {
     });
 
     it("With dark tooltip", async () => {
-        const {container, getByTestId} = renderWithVuetify(VcAlert, {
+        const {container, getByTestId} = renderWithVuetify(VcTooltip, {
             props: {
                 dark: true,
                 content: 'content text',