@vcita/design-system 1.1.6 → 1.1.7-beta.1

package/init/DesignSystem.js

@@ -43,7 +43,10 @@ import {
     VBadge,
     VRadioGroup,
     VRadio,
-
+    VTabs,
+    VTab,
+    VTabsItems,
+    VTabItem,
 } from "vuetify/lib/components";
 // import initI18n from "./initI18n";
 import svgImages from "./svgImages";
@@ -91,7 +94,10 @@ Vue.use(Vuetify, {
         VBadge,
         VRadioGroup,
         VRadio,
-
+        VTabs,
+        VTab,
+        VTabsItems,
+        VTabItem,
     }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.1.6",
+  "version": "1.1.7-beta.1",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcDocItem/VcDocItem.vue

@@ -47,7 +47,7 @@ import VcIcon from "@/components/VcIcon/VcIcon.vue";
 import VcButton from "../VcButton/VcButton.vue";
 const FORMATS = {
   DOCUMENT: ['doc', 'docx'],
-  IMAGE: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],
+  IMAGE: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'],
   PDF: ['pdf'],
   SPREADSHEET: ['csv', 'xls', 'xlsx'],
   SLIDESHOW: ['ppt', 'pptx'],

package/src/components/VcSearchPicker/VcSearchPicker.spec.js

@@ -166,4 +166,19 @@ describe("VcSearchPicker.vue", () => {
     await updateProps({ loading: false });
     expect(spinner).not.toBeInTheDocument();
   });
+
+  it("Renders custom menu class name", async () => {
+    const CLASSNAME_A = 'abc'
+    const CLASSNAME_B = 'def'
+    const { container, updateProps } = renderWithVuetify(VcSearchPicker, {
+      props: { menuContentClass: CLASSNAME_A }
+    });
+    const autoComplete = await container.getElementsByClassName('autocomplete')[0];
+    await fireEvent.click(autoComplete);
+    const menuContent = await container.querySelector('.v-menu__content');
+    expect(menuContent).toHaveClass(CLASSNAME_A);
+    await updateProps({ menuContentClass: CLASSNAME_B });
+    expect(menuContent).not.toHaveClass(CLASSNAME_A);
+    expect(menuContent).toHaveClass(CLASSNAME_B);
+  });
 });

package/src/components/VcSearchPicker/VcSearchPicker.stories.js

@@ -20,6 +20,7 @@ const Template = (args, {argTypes}) => ({
                         :showInnerIcon="showInnerIcon"
                         :items="this.items"
                         :selectedItems="exampleSelected"
+                        :menuContentClass="menuContentClass"
                         @onSelectionChange="newVal => this.exampleSelected = newVal"
                         @onSearchInput="searchInput"
                         @onScrollEnd="scrollEnd"
@@ -54,6 +55,7 @@ const Template2 = (args, {argTypes}) => ({
                         :showInnerIcon="showInnerIcon"
                         :items="this.items"
                         :selectedItems="exampleSelected"
+                        :menuContentClass="menuContentClass"
                         @onSelectionChange="newVal => this.exampleSelected = newVal"
                         @onSearchInput="searchInput"
                         @onScrollEnd="scrollEnd"
@@ -74,6 +76,7 @@ DocumentItem.args = {
     errorLabelText: 'Please select A document',
     noDataText: 'No documents found',
     iconType: 'folder',
+    menuContentClass: 'custom-    content-    class',
 }
 
 
@@ -94,6 +97,7 @@ const Template3 = (args, {argTypes}) => ({
                         :showInnerIcon="showInnerIcon"
                         :items="this.items"
                         :selectedItems="exampleSelected"
+                        :menuContentClass="menuContentClass"
                         @onSelectionChange="newVal => this.exampleSelected = newVal"
                         @onSearchInput="searchInput"
                         @onScrollEnd="scrollEnd"
@@ -138,6 +142,7 @@ const Template4 = (args, {argTypes}) => ({
                         :showInnerIcon="showInnerIcon"
                         :items="this.items"
                         v-model="exampleSelected"
+                        :menuContentClass="menuContentClass"
                         @onSelectionChange="selectionChange"
                         @onSearchInput="searchInput"
                         @onScrollEnd="scrollEnd"

package/src/components/VcSearchPicker/VcSearchPicker.vue

@@ -10,6 +10,7 @@
                              'autocomplete--has-items': selectedItems.length,
                              'autocomplete--search-content': searchInput && searchInput.length,
                     }"
+                    :menu-content-class="menuContentClass"
                     :menu-props="menuProps"
                     :search-input.sync="searchInput"
                     @update:search-input="(text) => text && text.length && $emit('onSearchInput', text)"
@@ -105,6 +106,10 @@ export default {
     error: {
       type: Boolean,
       default: false,
+    },
+    menuContentClass: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -120,7 +125,7 @@ export default {
     menuProps() {
       return {
         value: this.focused,
-        contentClass: 'vc-select-field-menu'
+        contentClass: `vc-select-field-menu ${this.menuContentClass}`
       }
     },
     noData() {
@@ -173,14 +178,15 @@ export default {
     }
     .v-input__icon--append .v-icon {
       transform: rotate(0deg);
+      color: var(--gray-darken-3)!important;
     }
     .autocomplete--open {
       .v-input__icon--append .v-icon {
         transform: rotate(180deg)
       }
       .v-input__slot {
-        border-color: var(--search-picker-border-color);
-        outline: 3px solid var(--search-picker-second-border-color);
+        border-color: var(--v-primary-base);
+        outline: 2px solid var(--v-primary-lighten5);
       }
     }
     .autocomplete {
@@ -241,6 +247,7 @@ export default {
         display: inline-block;
         font-size: var(--font-size-small2);
         color: var(--gray-darken-5);
+        caret-color: currentColor;
       }
     }
 

package/src/components/VcSearchPicker/mockData.js

@@ -12,7 +12,7 @@ const characters = [
 const documents = [
   { text: 'Client Contract.pdf', value: 'f22fbda2-637e-4df5-9106-435dc8ade089'},
   { text: 'Brochure.jpeg', value: '03f95bb8-8435-499f-9ca7-efb23a3692f2'},
-  { text: 'Application and Offer Logic And a very long text', value: '13a34bf5-230e-481b-9808-d2d6ac4364dd' },
+  { text: 'Application and Offer Logic And a very long text'.repeat(10), value: '13a34bf5-230e-481b-9808-d2d6ac4364dd' },
   { text: 'Great music.mp3', value: '758f20ee-499e-4892-abb5-65626bd31b35' },
   { text: 'Client Contract1.xls', value: '84e3c394-d92a-4a21-8b05-5680c3f10eb0' },
   { text: 'Brochure.pptx', value: '17efc973-8a0f-4b6e-a3a1-db65d663032f' },

package/src/components/VcTabs/VcTabs.spec.js

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom'
+import VcTabs from "./VcTabs.vue";
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import userEvent from '@testing-library/user-event';
+
+Vue.use(Vuetify)
+
+describe("VcTabs.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: value => value, // <- for the design system
+                },
+            },
+            callback,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId} = renderWithVuetify(VcTabs, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        // Make sure the component has the data-qa attribute
+        const component = getByTestId('VcTabs');
+        expect(component).toBeInTheDocument();
+    });
+
+});

package/src/components/VcTabs/VcTabs.stories.js

@@ -0,0 +1,182 @@
+import VcTabsCmp from './VcTabs';
+import VcForm from "@/components/VcForm/VcForm";
+import VcTextField from "@/components/VcTextField/VcTextField";
+import VcImage from "@/components/VcImage/VcImage";
+import VcLoader from "@/components/VcLoader/VcLoader";
+import VcIcon from "@/components/VcIcon/VcIcon";
+
+const basicProps = {
+    tabs: [{label: 'Tab 1'}, {label: 'Tab 2'}, {label: 'Tab 3'}, {label: 'Tab 4'},],
+    distribution: 'start',
+    tabSize: 'M',
+    separatorStyle: 'default',
+}
+
+const Template = (args, {argTypes}) => ({
+    components: {VcTabs: VcTabsCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        currentIndex: null,
+    }),
+    template: `
+      <div>
+      Known issue: When using the tab key in the keyboard to navigate between tabs, you can reach disabled tabs.
+      This issue is fixed in Vuetify 2.6.8, and so will be fixed once we upgrade the Vuetify version.
+      <VcTabs :tabs="tabs" 
+              :distribution="distribution"
+              :tab-size="tabSize"
+              :separator-style="separatorStyle"
+              v-model="currentIndex" 
+              @change="onChange">
+      </VcTabs>
+      </div>`,
+});
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    ...basicProps,
+    tabs: [{label: 'Tab 1'}, {label: 'Tab 2'}, {label: 'Tab 3', disabled: true}, {label: 'Tab 4'},],
+};
+
+const UsingTabSlotTemplate = (args, {argTypes}) => ({
+    components: {VcTabs: VcTabsCmp, VcIcon},
+    props: Object.keys(argTypes),
+    data: () => ({
+        currentIndex: null,
+    }),
+    template: `
+      <div>
+      <VcTabs :tabs="tabs" 
+              v-model="currentIndex"
+              :distribution="distribution"
+              :tab-size="tabSize"
+              :separator-style="separatorStyle"
+              @change="onChange">
+        <template #tab-0>
+          <VcIcon color="black">$success</VcIcon>
+        </template>
+        <template #tab-1>
+          <VcIcon color="black">$plus</VcIcon>
+        </template>
+        <template #tab-2>
+          <VcIcon color="black">$magnify_glass</VcIcon>
+        </template>
+        <template #tab-3>
+          <VcIcon color="black">$corrupted_flag</VcIcon>
+        </template>
+      </VcTabs>
+      </div>`,
+});
+
+export const UsingTabSlot = UsingTabSlotTemplate.bind({});
+
+// Set default values
+UsingTabSlot.args = {
+    ...basicProps,
+};
+
+const Initialized = (args, {argTypes}) => ({
+    components: {VcTabs: VcTabsCmp, VcForm, VcTextField, VcImage, VcLoader},
+    props: Object.keys(argTypes),
+    data: () => ({
+        currentIndex: 1,
+    }),
+    template: `
+      <div>
+      <VcTabs :tabs="tabs" v-model="currentIndex"
+              :distribution="distribution"
+              :tab-size="tabSize"
+              :separator-style="separatorStyle"
+              @change="onChange">
+        <template #tab-content-0="data">
+          <div>{{ data.item.label }}</div>
+          <div>This tab is an example of how you can access the title of the tab, if you need to</div>
+        </template>
+        <template #tab-content-1>
+          <div>You can put anything you want in your tab</div>
+          <VcLoader/>
+        </template>
+        <template #tab-content-2>
+          <div>Really, even an image</div>
+          <VcImage image="static/media/src/stories/assets/upgrade.svg"/>
+        </template>
+        <template #tab-content-3>
+          <div>Or a form, it's totally flexible</div>
+          <template>
+            <div>
+              <VcForm>
+                <VcTextField
+                    label="Name"
+                    :counter="10"/>
+              </VcForm>
+            </div>
+          </template>
+        </template>
+      </VcTabs>
+      </div>`,
+});
+
+export const SelectInitialTab = Initialized.bind({});
+
+SelectInitialTab.args = {
+    ...basicProps,
+};
+
+const BGColorTemplate = (args, {argTypes}) => ({
+    components: {VcTabs: VcTabsCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        currentIndex: null,
+    }),
+    template: `
+      <div style="background-color: #aaee93">
+      The elements of the component are all background-color: transparent
+      That means that they will receive the color of the elements behind it.
+      <VcTabs :tabs="tabs"
+              :distribution="distribution"
+              :tab-size="tabSize"
+              :separator-style="separatorStyle"
+              v-model="currentIndex"
+              @change="onChange">
+      </VcTabs>
+      </div>`,
+});
+
+export const BgColor = BGColorTemplate.bind({});
+
+BgColor.args = {
+    ...basicProps,
+};
+
+export default {
+    title: 'containers / VcTabs', // This will control the story sidebar position
+    id: 'VcTabs', // This will be the permanent link to this component
+    component: VcTabsCmp,
+    argTypes: {
+        distribution: {
+            options: ['start', 'equal', 'grow'],
+            control: {type: 'radio'}
+        },
+        tabSize: {
+            options: ['M', 'L'],
+            control: {type: 'radio'}
+        },
+        separatorStyle: {
+            options: ['default','shadow', 'divider'],
+            control: {type: 'radio'}
+        },
+        onChange: {action: 'change', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=251%3A912',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/tabs',
+        },
+    },
+};

package/src/components/VcTabs/VcTabs.vue

@@ -0,0 +1,125 @@
+<template>
+    <div :data-qa="dataQa" class="VcTabs--wrapper">
+      <v-tabs :value="safeCurrentIndex"
+              background-color="transparent"
+              slider-color="secondary"
+              slider-size="4"
+              :height="tabSize === 'M' ? 48 : 60"
+              :grow="distribution === 'grow'"
+              :fixed-tabs="distribution==='equal'"
+              class="VcTabs--content"
+              :class="{'separatorShadow': separatorStyle === 'shadow', 'separatorDivider' : separatorStyle === 'divider'}"
+              @change="(newIndex) => $emit('change', newIndex)">
+        <v-tab v-for="(item, index) in tabs" :key="`tab-${index}`"
+               :class="{'VcTab': true, 'VcTabDisabled': item.disabled}"
+               active-class="VcTabActive"
+               :disabled="item.disabled"
+               :data-qa="`${dataQa}-tab-${index}`" >
+          <slot :name="`tab-${index}`" :item="item">
+            <span class="VcTab-label">{{ item.label }}</span>
+          </slot>
+        </v-tab>
+      </v-tabs>
+
+      <v-tabs-items :value="safeCurrentIndex" class="VcTabsContent">
+        <v-tab-item v-for="(item, index) in tabs" :key="`tab-content-${index}`" :data-qa="`${dataQa}-tab-content-${index}`">
+          <slot :name="`tab-content-${index}`" :item="item">
+            <div>{{item.label}}</div>
+          </slot>
+        </v-tab-item>
+      </v-tabs-items>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "VcTabs",
+  model: {
+    prop: 'currentIndex',
+    event: 'change',
+  },
+  props: {
+    tabs: {
+      type: Array,
+      required: true,
+      validator: value => value.every(tab => tab.label)
+    },
+    tabSize: {
+      type: String,
+      default: 'M',
+      validator: value => ['M', 'L'].includes(value)
+    },
+    currentIndex: {
+      type: Number,
+      default: 0,
+      validator: prop => prop >= 0,
+    },
+    distribution: {
+      type: String,
+      default: "start",
+      validator: prop => ['start','equal', 'grow'].includes(prop)
+    },
+    separatorStyle: {
+      type: String,
+      default: 'default',
+      validator: prop => ['default','shadow', 'divider'].includes(prop)
+    },
+    dataQa: {
+      type: String,
+      default: 'VcTabs'
+    },
+  },
+  computed: {
+    safeCurrentIndex() {
+      return Math.max(0, Math.min(this.currentIndex, this.tabs.length - 1));
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.VcTabs--wrapper {
+
+  .separatorShadow {
+    border-bottom: 1px solid var(--gray-lighten-1);
+    box-shadow: var(--shadow-1);
+  }
+
+  .separatorDivider {
+    border-bottom: 1px solid var(--gray-lighten-1);
+  }
+}
+
+.VcTab:focus {
+  color: rgba(255,255,255,0) !important; // The tabs should take the color of what's behind them
+  box-shadow: inset 0 0 0 3px var(--v-secondary-lighten1);
+  border-radius: 2px;
+
+  .VcTab-label {
+    color: var(--gray-darken-4);
+  }
+
+  &.VcTabDisabled {
+    background: rgba(0, 0, 0, 0.04);
+    color: #999999;
+  }
+}
+
+.VcTabActive {
+  color: var(--gray-darken-5);
+}
+
+.VcTab-label {
+  font-size: var(--font-size-x-small);
+  font-weight: var(--font-weight-medium2);
+  line-height: var(--size-value4);
+  letter-spacing: 0px;
+  text-transform: initial;
+}
+
+.VcTabsContent {
+  background-color: transparent;
+}
+
+</style>

package/src/components/VcUpsellBlock/VcUpsellBlock.stories.js

@@ -89,6 +89,14 @@ dialogPlayground.args = {
     description: `Upsell block - dialog view. Pass mode=dialog to VcUpsellBlock component and wrap it with VcModalContainer. \nIf 'responsive' size is used and width/height changes are needed - you may change the css of VcModalContainer according to your development needs.`
 }
 
+dialogPlayground.parameters = {
+    docs: {
+        source: {
+            type: 'code'
+        }
+    }
+}
+
 export const dialogWithoutBulletsIcon = dialogTemplate.bind({});
 
 dialogWithoutBulletsIcon.args = {
@@ -104,6 +112,14 @@ dialogWithoutBulletsIcon.args = {
     description: `Upsell block - dialog view. Icon is optional.`
 }
 
+dialogWithoutBulletsIcon.parameters = {
+    docs: {
+        source: {
+            type: 'code'
+        }
+    }
+}
+
 export default {
     title: ' Content Display / VcUpsellBlock', // This will control the story sidebar position
     id: 'VcUpsellBlock', // This will be the permanent link to this component
@@ -120,5 +136,13 @@ export default {
             type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
             url: 'www.vcita.com', // will make the tag a link
         },
+        docs: {
+            source: {
+                // code: 'Your code snippet goes here.',
+                // format: false,
+                language: "html",
+                // type: "auto",
+            },
+        },
     },
 };

package/src/components/index.js

@@ -62,3 +62,4 @@ export {default as VcDocItem} from './VcDocItem/VcDocItem.vue';
 export {default as VcTimeSince} from './VcTimeSince/VcTimeSince.vue';
 export {default as VcSearchPicker} from './VcSearchPicker/VcSearchPicker.vue';
 export {default as VcDraggableList} from './VcDraggableList/VcDraggableList.vue';
+export {default as VcTabs} from './VcTabs/VcTabs.vue';

package/src/components/wizard/VcWizard/VcWizard.stories.js

@@ -10,7 +10,7 @@ const GeneralTemplate = (args, {argTypes}) => ({
     template: `
       <div>
           <VcWizard
-            v-model="currentStep"
+            v-model.number="currentStep"
             :steps="steps"
             @submit="onSubmit"
             :size="size"
@@ -95,7 +95,7 @@ Playground.args = {
         },
     ],
     dataQa: 'vc-wizard',
-    size: 'md',
+    size: 'md'
 }
 
 export default {

package/src/stories/welcome.stories.mdx

@@ -233,9 +233,3 @@ variables for `Dropzone`:
 Variables for `VcSelectField`:
 
 <div><code>--select-field-height: 52px;</code></div>
-
-
-variables for `VcSearchPicker`:
-
-<div><code>--search-picker-border-color: #1e93b7;</code></div>
-<div><code>--search-picker-second-border-color: #95cddb;</code></div>

package/styles/variables.scss

@@ -60,10 +60,6 @@
   // Select field height
   --select-field-height: 52px;
 
-  // --search-picker
-  --search-picker-border-color: #1e93b7;
-  --search-picker-second-border-color: #95cddb;
-
   // Colors
   // Gray
   --gray-darken-5: #212121;  /*rgba(0, 0, 0, 0.87)*/