@vcita/design-system 1.3.2 → 1.3.4

package/init/DesignSystem.js

@@ -48,6 +48,7 @@ import {
     VTabsItems,
     VTabItem,
     VBreadcrumbs,
+    VColorPicker,
 } from "vuetify/lib/components";
 // import initI18n from "./initI18n";
 import svgImages from "./svgImages";
@@ -100,6 +101,7 @@ Vue.use(Vuetify, {
         VTabsItems,
         VTabItem,
         VBreadcrumbs,
+        VColorPicker,
     }
 });
 
@@ -125,7 +127,7 @@ const DesignSystem = ({theme = {}, options = {}, extIcons = {}} = {}, locale ='e
         }
     };
 
-    const vuetifyConfigOverride = {...vuetifyConfig, ...theme, ...icons };
+    const vuetifyConfigOverride = {...vuetifyConfig, ...theme, ...icons, rtl: window.direction === 'rtl' };
     // initI18n(locale);
     return new Vuetify(vuetifyConfigOverride);
 }

package/init/initI18n.js

@@ -28,25 +28,33 @@ const initI18n = (locale = 'en') => {
     Vue.prototype.$ds.setLocale(locale);
 
     Vue.prototype.$dst = (key, params) => {
-        const language = messages[Vue.prototype.$ds.locale] || messages['en'];
-
-        const path = key.split('.');
-        let result = language;
-        try {
-            for (let item of path) {
-                result = result[item];
-            }
-            for (let param in params) {
-                let regex = new RegExp(`{${param}}`,'gi')
-                result = result.replace(regex, params[param])
-            }
+        const fallbackLanguage = messages['en'];
+        const language = messages[Vue.prototype.$ds.locale] || fallbackLanguage;
+
+        const result = getKeyFromLanguage(language, key, params);
+        if (result === key) {
+            return getKeyFromLanguage(fallbackLanguage, key, params);
+        }
+        return result || key;
+    }
+}
+
+const getKeyFromLanguage = (language, key, params) => {
+    const path = key.split('.');
+    let result = language;
+    try {
+        for (let item of path) {
+            result = result[item];
         }
-        catch {
-            result = key;
+        for (let param in params) {
+            let regex = new RegExp(`{${param}}`, 'gi')
+            result = result.replace(regex, params[param])
         }
-        
-        return result;
+    } catch {
+        result = key;
     }
+
+    return result;
 }
 
 export default initI18n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {
@@ -69,6 +69,7 @@
     "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-storybook": "^0.6.4",
     "eslint-plugin-vue": "^6.2.2",
+    "jest-canvas-mock": "^2.4.0",
     "minimist": "^1.2.5",
     "rollup": "^2.36.1",
     "rollup-plugin-babel": "^4.4.0",

package/src/components/VcActionList/VcActionList.spec.js

@@ -27,19 +27,28 @@ describe("VcActionList.vue", () => {
 
     const defaultProps = {
         items: [
+            {
+                header: 'User actions',
+            },
             {
                 title: 'Move to guest list',
                 event: 'moveToGustList',
-                icon: 'information'
-            }, {
-                title: 'Remove from wait list',
+                icon: '$information'
+            },
+            {
+                title: 'Remove from waitlist',
                 event: 'remove',
-                icon: 'warning_fill'
-            }, {
+                icon: '$warning_fill'
+            },
+            {
+                header: 'navigate actions',
+            },
+            {
                 title: 'Go to client page',
                 event: 'goToClientPage',
-                icon: 'vip'
-            }
+                icon: '$vip'
+            },
+
         ],
         dataQa: 'action-list-test'
     }

package/src/components/VcActionList/VcActionList.stories.js

@@ -21,19 +21,32 @@ export const Playground = GeneralTemplate.bind({});
 // Set default values
 Playground.args = {
     items: [
+        {
+            header: 'User actions',
+        },
         {
             title: 'Move to guest list',
             event: 'moveToGustList',
             icon: '$information'
-        }, {
+        },
+        {
             title: 'Remove from waitlist',
             event: 'remove',
             icon: '$warning_fill'
-        }, {
+        },
+        {
+            header: 'navigate actions',
+        },
+        {
             title: 'Go to client page',
             event: 'goToClientPage',
             icon: '$vip'
-        }
+        },
+        {
+            header: 'no header',
+            HideHeader: true,
+        },
+
     ],
     dataQa: 'playground-qa'
 }

package/src/components/VcActionList/VcActionList.vue

@@ -6,17 +6,28 @@
     </template>
     <v-list :data-qa="dataQa">
       <vc-layout column class="items-wrapper">
-        <v-list-item class="sheet-item"
-                     v-for="item in items"
-                     :key="item.title"
-                     @click="$emit('action', item.event)">
-          <v-list-item-title class="option-title">
-            <vc-icon v-if="item.icon && !isNotAllItemsWithIcons" size="20" class="icon-item">
-              {{ item.icon }}
-            </vc-icon>
-            {{ item.title }}
-          </v-list-item-title>
-        </v-list-item>
+        <template
+          v-for="(item, index) in items"
+        >
+          <v-subheader
+            :class="{'hide-header': item.HideHeader}"
+            :key="`${item.header}-${index}`"
+            v-if="item.header">
+              {{ item.header }}
+          </v-subheader>
+          <v-list-item
+              v-else
+              class="sheet-item"
+              @click="$emit('action', item.event)">
+            <v-list-item-title class="option-title">
+              <vc-icon v-if="item.icon && !isNotAllItemsWithIcons" size="20" class="icon-item">
+                {{ item.icon }}
+              </vc-icon>
+              {{ item.title }}
+            </v-list-item-title>
+          </v-list-item>
+        </template>
+
       </vc-layout>
     </v-list>
   </v-menu>
@@ -62,6 +73,19 @@ export default {
     padding: var(--size-value1) 0;
 
     .items-wrapper {
+      .v-subheader {
+        font-weight: 600;
+        font-size: 10px;
+        line-height: 16px;
+        color: var(--gray-darken-3);
+        height: 36px;
+        &:not(:first-child) {
+          border-top: var(--border-frame);
+        }
+        &.hide-header {
+          border-top: none;
+        }
+      }
       .sheet-item {
         min-height: var(--size-value10);
 

package/src/components/VcBottomActions/VcBottomActions.vue

@@ -1,7 +1,8 @@
 <template>
   <v-bottom-sheet :persistent="header"
                   :value="value"
-                  content-class="vc-bottom-sheet">
+                  content-class="vc-bottom-sheet"
+                  @click:outside="$emit('close')">
 
     <template v-slot:activator="{attrs, on}">
       <slot v-bind="{attrs, on}"/>

package/src/components/VcBottomSheet/VcBottomSheet.stories.js

@@ -1,9 +1,9 @@
 import VcBottomSheetCmp from './VcBottomSheet';
-import {VcIcon, VcEmptyState} from "@/components/index";
+import {VcIcon, VcLayout} from "@/components/index";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const GeneralTemplate = (args, {argTypes}) => ({
-    components: {VcBottomSheet: VcBottomSheetCmp, VcIcon, VcEmptyState},
+    components: {VcBottomSheet: VcBottomSheetCmp, VcIcon, VcLayout},
     props: Object.keys(argTypes),
     data: () => ({
         showSheet: false,
@@ -23,17 +23,10 @@ const GeneralTemplate = (args, {argTypes}) => ({
             $three_dots
           </VcIcon>
         </template>
-        <template>
-          <VcEmptyState title="Title"
-                        subtitle="Subtitle"
-                        size="sm"
-                        button="Reload"
-                        link-label="Link label"
-                        link-url="www.google.com"
-                        :image="image"
-                        @click="onClick"
-                        style="padding: 24px"/>
-        </template>
+        <VcLayout align-center justify-center
+                  :style="{ minHeight: '300px', backgroundColor: 'var(--green-lighten-2)', padding: '12px'}">
+          Your content goes here
+        </VcLayout>
       </VcBottomSheet>
       </div>`,
     watch: {

package/src/components/VcBottomSheet/VcBottomSheet.vue

@@ -7,8 +7,7 @@
     <template v-slot:activator="activatorObj">
       <slot v-bind="activatorObj" name="activator"/>
     </template>
-    <v-sheet :data-qa="`${dataQa}-sheet`"
-             class="vc-sheet">
+    <v-sheet :data-qa="`${dataQa}-sheet`" class="vc-sheet">
       <slot/>
     </v-sheet>
   </v-bottom-sheet>
@@ -18,7 +17,6 @@
 
 import VcLayout from "@/components/VcLayout/VcLayout.vue";
 
-
 export default {
   name: "VcBottomSheet",
   components: {VcLayout},
@@ -53,6 +51,7 @@ export default {
     border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
     display: flex;
     box-shadow: var(--modal-box-shadow);
+    overflow: auto;
   }
 }
 </style>

package/src/components/VcButton/VcButton.vue

@@ -21,7 +21,7 @@
     :disabled="disabled"
     :href="href"
     :data-qa="dataQa"
-    @click="$emit('click')"
+    @click="event => $emit('click', event)"
   >
     <slot name="prepend">
       <VcIcon v-if="prependDefaultIcon" color="currentColor"

package/src/components/VcCheckbox/VcCheckbox.vue

@@ -14,7 +14,7 @@
     :value="value"
     :data-qa="dataQa">
     <template #label>
-      <div class="d-flex align-center">
+      <div class="d-flex align-center ms-2">
         <VcAvatar v-if="avatar && label" class="ms-1 me-3"
                   :image-path="avatar.path"
                   :name="avatar.name"
@@ -99,6 +99,7 @@ export default {
     .v-input__slot .v-input--selection-controls__input {
       width: var(--size-value4);
       height: var(--size-value4);
+      margin-inline-end: 0;
 
       .v-icon {
         color: transparent;
@@ -107,6 +108,12 @@ export default {
         border-radius: 2px;
         font-size: var(--font-size-small);
         font-weight: bold;
+        z-index: 1;
+      }
+
+      input {
+        z-index: 0;
+        opacity: 1;
       }
     }
 

package/src/components/VcColorPicker/VcColorPicker.spec.js

@@ -0,0 +1,206 @@
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
+import VcColorPicker from "@/components/VcColorPicker/VcColorPicker";
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import {render, fireEvent} from "@testing-library/vue";
+import init from "../../../testing-library.config";
+import userEvent from "@testing-library/user-event";
+
+init();
+
+Vue.use(Vuetify);
+
+describe("VcColorPicker.vue", () => {
+    const renderWithVuetify = (component, options, callback, isMobile = false) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        const vuetify = new Vuetify()
+        if (isMobile) {
+            const breakpoint = {
+                init: jest.fn(),
+                framework: {},
+                smAndDown: true,
+            }
+
+            vuetify.framework.breakpoint = breakpoint;
+        }
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify,
+                ...options,
+                mocks: {
+                    $t: value => value,
+                    $dst: () => 'Color', // <- for the design system
+                },
+            },
+            callback,
+        )
+    }
+
+    it("Component is loaded", async () => {
+        const {container, getByTestId} = renderWithVuetify(VcColorPicker, {props: {}})
+        expect(container).toHaveAttribute('data-app', "true")
+        const component = getByTestId('VcColorPicker');
+        expect(component).toBeInTheDocument()
+    })
+
+    it("input elements are disabled as expected", async () => {
+        const {getByTestId} = renderWithVuetify(VcColorPicker, {props: {disabled: true}})
+        const inputElement = getByTestId('VcColorPicker_input');
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement).toBeDisabled();
+
+        const selectElement = getByTestId('VcColorPicker_select');
+        expect(selectElement).toBeInTheDocument();
+        expect(selectElement).toBeDisabled();
+    })
+
+    it("Check hex mode", async () => {
+        let hexaColor = "#aabbccff";
+        let hexColor = hexaColor.substr(0, 7);
+        const {getByLabelText} = renderWithVuetify(VcColorPicker, {props: {hexMode: true, color: hexaColor}})
+        const expectedInputValue = getByLabelText("Color");
+        expect(expectedInputValue).toBeInTheDocument();
+        expect(expectedInputValue).toHaveValue(hexColor.toUpperCase());
+    })
+
+    it("Change color", async () => {
+        const {getByTestId, getByLabelText, updateProps} = renderWithVuetify(VcColorPicker, {props: {color: "#aabbcc"}})
+        const selectElement = getByTestId("VcColorPicker_select");
+        expect(selectElement).toBeInTheDocument();
+
+        userEvent.click(selectElement);
+
+        const hexaColor = "#aabbccff";
+        const hexColor = hexaColor.substr(0, 7);
+
+        const expectedInputValue = getByLabelText("Color");
+        expect(expectedInputValue).toBeInTheDocument();
+        expect(expectedInputValue).toHaveValue(hexColor.toUpperCase());
+
+        const newColor = "#325E8BFF";
+        await updateProps({color: newColor});
+        expect(expectedInputValue).toHaveValue(newColor.toUpperCase());
+    })
+
+    it ("Shows hint", async () => {
+        let hint = "please use hex format"
+        const {getByTestId, getByText} = renderWithVuetify(VcColorPicker, {props: {hint: hint}})
+        let hintElement = getByTestId("VcColorPicker-hint")
+        expect(hintElement).toBeInTheDocument();
+
+        hintElement = getByText(hint);
+        expect(hintElement).toBeInTheDocument();
+    })
+
+    it("Rules with error", async () => {
+        const {
+            getByText,
+            getByTestId
+        } = renderWithVuetify(VcColorPicker, {props: {rules: [value => !!value || 'Required.']}})
+        const component = getByTestId('VcColorPicker');
+        expect(component).toBeInTheDocument()
+
+        const errorMsg = getByText("Required.");
+        expect(errorMsg).toBeInTheDocument();
+    })
+
+    it("update to valid color", async () => {
+        const {getByLabelText, emitted} = renderWithVuetify(VcColorPicker, {});
+
+        const expectedInputValue = getByLabelText("Color");
+        expect(expectedInputValue).toBeInTheDocument();
+        expect(expectedInputValue).toHaveValue('');
+
+        await fireEvent.update(expectedInputValue, '#333333');
+        await fireEvent.blur(expectedInputValue);
+
+        expect(expectedInputValue).toHaveValue('#333333');
+
+        expect(emitted().change.length).toBe(1);
+        expect(emitted().change[0][0]).toBe('#333333');
+    })
+
+    it("update to invalid color", async () => {
+        const {getByLabelText} = renderWithVuetify(VcColorPicker, {});
+
+        const expectedInputValue = getByLabelText("Color");
+        expect(expectedInputValue).toBeInTheDocument();
+        expect(expectedInputValue).toHaveValue('');
+
+        await fireEvent.update(expectedInputValue, '-');
+        await fireEvent.blur(expectedInputValue);
+
+        expect(expectedInputValue).toHaveValue('');
+    })
+
+    it("open and close on click outside in desktop", async () => {
+        const {getByRole, queryByTestId, baseElement} = renderWithVuetify(VcColorPicker, {});
+
+        const button = getByRole("button");
+        expect(button).toBeInTheDocument();
+
+        let picker = queryByTestId('VcColorPicker_picker');
+        expect(picker).not.toBeInTheDocument();
+
+        // Open menu
+        await userEvent.click(button);
+        picker = queryByTestId('VcColorPicker_picker');
+        expect(picker).toBeInTheDocument();
+
+        // Close menu by click-outside
+        await userEvent.click(baseElement);
+        expect(picker).not.toBeInTheDocument();
+    })
+
+    it("open and close on click outside in mobile", async () => {
+        const {getByRole, queryByTestId, baseElement} = renderWithVuetify(VcColorPicker, {}, undefined, true);
+
+        const button = getByRole("button");
+        expect(button).toBeInTheDocument();
+
+        // Open menu
+        await userEvent.click(button);
+        let picker = queryByTestId('VcColorPicker_picker');
+        expect(picker).toBeVisible();
+
+        await userEvent.click(baseElement);
+        // picker = queryByTestId('VcColorPicker_picker');
+        // expect(picker).not.toBeInTheDocument();
+    })
+
+    it("click inside in mobile mode will not close the element", async () => {
+        const {getByRole, queryByTestId} = renderWithVuetify(VcColorPicker, {}, undefined, true);
+
+        const button = getByRole("button");
+        expect(button).toBeInTheDocument();
+
+        // Open menu
+        await userEvent.click(button);
+        let picker = queryByTestId('VcColorPicker_picker');
+        expect(picker).toBeVisible();
+
+        await userEvent.click(picker);
+        picker = queryByTestId('VcColorPicker_picker');
+        expect(picker).toBeVisible();
+    })
+
+    it("return error with value not string", async () => {
+        const {getByTestId, queryByText} = renderWithVuetify(VcColorPicker,
+            {
+                props:
+                    {rules: [() => 12]}
+            })
+        const component = getByTestId('VcColorPicker');
+        expect(component).toBeInTheDocument()
+
+        const errorMsg = queryByText("VcColorPicker-error");
+        expect(errorMsg).not.toBeInTheDocument();
+    })
+})

package/src/components/VcColorPicker/VcColorPicker.stories.js

@@ -0,0 +1,107 @@
+import VcColorPicker from './VcColorPicker';
+import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
+
+const baseProps = {
+    dataQa: 'VcColorPicker',
+    disabled: false,
+    hint: "",
+    hexMode: false
+};
+
+const Template = (args, {argTypes}) => ({
+    components: {VcColorPicker: VcColorPicker},
+    props: Object.keys(argTypes),
+    data: () => ({
+        color: '#aabbccff',
+    }),
+    template: `
+      <div>
+      <VcColorPicker
+          @change="onChange"
+          style="width: 256px"
+          :hex-mode="hexMode"
+          v-model="color" 
+          :hint="hint" 
+          :disabled="disabled" 
+          :data-qa="dataQa"
+          :rules="rules"
+      />
+      </div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    ...baseProps,
+}
+
+export const Disabled = Template.bind({});
+
+// Set default values
+Disabled.args = {
+    ...baseProps,
+    disabled: true,
+}
+
+export const HexMode = Template.bind({});
+
+// Set default values
+HexMode.args = {
+    ...baseProps,
+    hexMode: true,
+}
+
+const ErrorTemplate = (args, {argTypes}) => ({
+    components: {VcColorPicker: VcColorPicker},
+    props: Object.keys(argTypes),
+    data: () => ({
+        color: '',
+    }),
+    template: `
+      <div>
+      Possible errors: <br>
+      1. Empty value <br>
+      2. Enter "#123456" in the value field
+      <VcColorPicker
+          :hex-mode="hexMode"
+          style="width: 256px"
+          v-model="color" 
+          :hint="hint" 
+          :disabled="disabled" 
+          :data-qa="dataQa"
+          :rules="rules"
+      />
+      </div>`,
+})
+export const WithError = ErrorTemplate.bind({});
+
+// Set default values
+WithError.args = {
+    ...baseProps,
+    rules: [value => !!value || 'Required.',
+    value => value === "#123456" ? "Error example" : false,
+    ],
+}
+
+export default {
+    title: 'controls / VcColorPicker', // This will control the story sidebar position
+    id: 'VcColorPicker', // This will be the permanent link to this component
+    component: VcColorPicker,
+    argTypes: {
+        onChange: {action: 'change', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=11590%3A245239',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/color-pickers/', // will make the tag a link
+        },
+        docs: {
+            page: VcBaseDocs,
+        },
+    },
+};