@vcita/design-system 0.3.13 → 0.3.14

package/src/components/listBox/VcListbox/VcListbox.spec.js

@@ -0,0 +1,131 @@
+import '@testing-library/jest-dom'
+import VcListbox from "./VcListbox.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../../testing-library.config";
+import {fireEvent} from "@testing-library/dom";
+
+init();
+
+const props = {
+    dataQa: 'vc-list-box',
+    items: [
+        {
+            label: 'Peter Parker',
+            avatar: {
+                path: "https://www.citypng.com/public/uploads/preview/-101609838369it1a5cyvuz.png",
+            }
+        },
+        {
+            label: 'Tony Stark',
+            avatar: {
+                path: "https://www.drawingtutorials101.com/drawing-tutorials/Cartoon-Characters/Iron-Man/iron-man-helmet/how-to-draw-iron-mans-helmet.jpg",
+            }
+        },
+        {
+            label: 'Natasha Romanoff',
+            avatar: {
+                path: "https://i2.wp.com/starbaseatlanta.com/wp-content/uploads/mvatb73672.jpg?fit=464%2C650&ssl=1",
+            }
+        },
+        {
+            label: 'Bruce Banner',
+            avatar: {
+                path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStOD5bONT-oTnmD5Qdk7JY9OJWDW3Ts8ZCFCmHS4f4mETkg9AeY_8gTbCutSfKDq2GWkk&usqp=CAU",
+            },
+            disabled: true,
+            tooltipContent: 'Hulk is too STRONG'
+        },
+        {
+            label: 'Clint Barton',
+            avatar: {
+                colorId: 13,
+            },
+        },
+    ],
+}
+
+describe("VcListbox.vue", () => {
+
+    const renderWithVuetify = (component, options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: {
+                    $dst: value => value,
+                },
+            },
+            callback,
+        )
+    }
+
+    it("mounts with default settings", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByText, getByTestId, emitted} = renderWithVuetify(VcListbox, {
+            props: {
+                ...props,
+                addAnother: true
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const listbox = getByTestId(props.dataQa);
+        expect(listbox).toBeInTheDocument();
+
+        const checkbox = getByTestId(`${props.dataQa}-2-checkbox`);
+        expect(checkbox).not.toBeChecked()
+        const listObj = getByText(props.items[2].label)
+        expect(listObj).toBeInTheDocument();
+        await fireEvent.click(listObj);
+        expect(emitted().change.length).toBe(1);
+        expect(emitted().change[0]).toStrictEqual([{"checked": true, "id": 2}]);
+        expect(checkbox).toBeChecked()
+
+        const lastItem = container.getElementsByClassName('last-item')[0]
+        await fireEvent.click(lastItem);
+        expect(emitted().addNew.length).toBe(1);
+        expect(getByText('ds.listbox.add')).toBeInTheDocument();
+    });
+
+    it("Check title", () => {
+        const {getByTestId, getByText} = renderWithVuetify(VcListbox, {
+            props: {
+                ...props,
+                title: 'listbox title'
+            }
+        })
+
+        const listboxTitle = getByTestId(`${props.dataQa}-title`);
+        expect(listboxTitle).toBeInTheDocument();
+        expect(getByText('listbox title')).toBeInTheDocument();
+    })
+
+    it("With no title", async () => {
+        const {queryByTestId} = renderWithVuetify(VcListbox, {props})
+        const listboxTitle = queryByTestId(`${props.dataQa}-title`);
+        expect(listboxTitle).not.toBeInTheDocument();
+    });
+
+    it("With add another item button", async () => {
+        const {container, emitted, getByText} = renderWithVuetify(VcListbox, {
+            props: {
+                ...props,
+                addAnother: true,
+                addAnotherLabel: 'add new Item'
+            }
+        })
+        const lastItem = container.getElementsByClassName('last-item')[0]
+        await fireEvent.click(lastItem);
+        expect(emitted().addNew.length).toBe(1);
+        expect(getByText('add new Item')).toBeInTheDocument();
+    });
+});

package/src/components/listBox/VcListbox/VcListbox.stories.js

@@ -0,0 +1,79 @@
+import VcListboxCmp from './VcListbox';
+import {action} from "@storybook/addon-actions";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcListbox: VcListboxCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <VcListbox :items="items"
+                 :title="title"
+                 :add-another="addAnother"
+                 :add-another-label="addAnotherLabel"
+                 :data-qa="dataQa"
+                 @change="onChange"
+                 @addNew="onAddNew">
+      </VcListbox>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    title: 'Avengers crew',
+    addAnother: false,
+    addAnotherLabel: 'Add new Avenger',
+    dataQa: "vc-listbox",
+    items: [
+        {
+            label: 'Peter Parker',
+            avatar: {
+                path: "https://www.citypng.com/public/uploads/preview/-101609838369it1a5cyvuz.png",
+            }
+        },
+        {
+            label: 'Tony Stark',
+            avatar: {
+                path: "https://www.drawingtutorials101.com/drawing-tutorials/Cartoon-Characters/Iron-Man/iron-man-helmet/how-to-draw-iron-mans-helmet.jpg",
+            },
+            checked: true
+        },
+        {
+            label: 'Natasha Romanoff',
+            avatar: {
+                path: "https://i2.wp.com/starbaseatlanta.com/wp-content/uploads/mvatb73672.jpg?fit=464%2C650&ssl=1",
+            }
+        },
+        {
+            label: 'Bruce Banner',
+            avatar: {
+                path: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStOD5bONT-oTnmD5Qdk7JY9OJWDW3Ts8ZCFCmHS4f4mETkg9AeY_8gTbCutSfKDq2GWkk&usqp=CAU",
+            },
+            disabled: true,
+            tooltipContent: 'Hulk is too STRONG'
+        },
+        {
+            label: 'Clint Barton',
+            avatar: {
+                colorId: 13,
+            },
+        },
+    ],
+    onChange: action('changed'),
+    onAddNew: action('addNew'),
+}
+
+export default {
+    title: 'form / list box / VcListbox', // This will control the story sidebar position
+    id: 'VcListbox', // This will be the link to this component
+    component: VcListboxCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=7340%3A69294',
+        },
+        status: {
+            type: 'releaseCandidate', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/lists/'
+        },
+    },
+};

package/src/components/listBox/VcListbox/VcListbox.vue

@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <div v-if="title"
+         class="vc-list-title"
+         :data-qa="`${dataQa}-title`">
+      {{ title }}
+    </div>
+
+    <v-list class="VcListbox"
+            :data-qa="dataQa">
+      <div class="vc-overflow">
+        <v-list-item class="vc-list-item"
+                     v-for="(item, index) in items"
+                     :tabindex="index"
+                     :key="index">
+          <VcChecklistItem :data-qa="`${dataQa}-${index}`"
+                           v-bind="item"
+                           @change="args => $emit('change', {...args, id: index})">
+          </VcChecklistItem>
+        </v-list-item>
+      </div>
+
+      <div v-if="addAnother"
+           :data-qa="`${dataQa}-increase`">
+        <v-divider class="divider"></v-divider>
+        <v-list-item align-baseline class="last-item"
+                     @click="$emit('addNew')">
+          <VcIcon class="add-another-icon" dense>$plus</VcIcon>
+          <span class="add-another-label">{{ getAddAnotherLabel }}</span>
+        </v-list-item>
+      </div>
+    </v-list>
+  </div>
+</template>
+
+<script>
+
+import VcChecklistItem from "@/components/listBox/VcChecklistItem/VcChecklistItem.vue";
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+
+export default {
+  name: "VcListbox",
+  components: {VcChecklistItem, VcIcon},
+  props: {
+    items: {
+      type: Array,
+      required: true,
+      validator: items => items.every(item => item.label),
+    },
+    addAnother: {
+      type: Boolean,
+      default: false
+    },
+    addAnotherLabel: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    dataQa: {
+      type: String,
+      default: 'VcListbox'
+    }
+  },
+  computed: {
+    getAddAnotherLabel() {
+      return this.addAnotherLabel || this.$dst('ds.listbox.add')
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/../styles/variables.scss';
+@import "@/../src/scss/mixins.scss";
+
+.vc-list-title {
+  font-weight: var(--font-weight-medium2);
+  font-size: var(--font-size-small2);
+  line-height: var(--size-value5);
+  margin-block-end: var(--size-value3);
+}
+
+.VcListbox {
+  padding-block: var(--size-value1);
+  margin-block: var(--size-value1);
+  border: 1px solid var(--gray-lighten-1);
+  box-sizing: border-box;
+  border-radius: var(--border-radius);
+  width: fit-content;
+  box-shadow: none !important;
+
+  .vc-overflow {
+    overflow: auto;
+    max-height: 160px;
+
+    .vc-list-item {
+      padding: var(--size-value0);
+      min-height: unset;
+    }
+  }
+
+  .divider {
+    border-color: var(--gray-lighten-1);
+  }
+
+  .last-item {
+    cursor: pointer;
+    min-height: var(--size-value10);
+
+    &:hover {
+      background-color: var(--gray-lighten-3);
+    }
+
+    .add-another-label {
+      font-weight: var(--font-weight-medium2);
+      font-size: var(--font-size-x-small);
+      line-height: var(--size-value5);
+      color: var(--gray-darken-5);
+    }
+
+    .add-another-icon {
+      margin-inline-end: var(--size-value3);
+      cursor: pointer;
+
+      ::v-deep {
+        .v-icon__component {
+          height: unset;
+          width: unset;
+
+          svg {
+            width: var(--size-value3);
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/modal/VcNoticeModal/VcNoticeModal.stories.js

@@ -6,18 +6,13 @@ import VcModalFooter from "@/components/modal/elements/VcModalFooter";
 const Template = (args, {argTypes}) => ({
     components: {VcNoticeModal: VcNoticeModalCmp},
     props: Object.keys(argTypes),
-    computed: {
-        iconParam() {
-            return require('@/stories/assets/rabbit.svg');
-        },
-    },
     template: `
       <div>
       <VcNoticeModal :show-dialog="showDialog"
                      :useOffset="useOffset"
                      :title-text="titleText"
                      :subtitle-text="subtitleText"
-                     :icon="iconParam"
+                     :image="image"
                      :content-text="contentText"
                      :size="size"
                      :ok-button-label="okButtonLabel"
@@ -40,21 +35,17 @@ Playground.args = {
     size: 'lg',
     okButtonLabel: undefined,
     cancelButtonLabel: undefined,
+    image: require('@/stories/assets/rabbit.svg'),
 }
 
 const TemplateUsingSlot = (args, {argTypes}) => ({
     components: {VcNoticeModal: VcNoticeModalCmp, VcLayout, VcIcon},
     props: Object.keys(argTypes),
-    computed: {
-        iconParam() {
-            return require('@/stories/assets/rabbit.svg');
-        },
-    },
     template: '<div><VcNoticeModal :show-dialog="showDialog" ' +
         ':useOffset="useOffset" ' +
         ':title-text="titleText" ' +
         ':subtitle-text="subtitleText" ' +
-        ':icon="iconParam" ' +
+        ':image="image" ' +
         ':size="size" ' +
         '@onCloseButtonClicked="onCloseButtonClicked" ' +
         '@onOkClicked="onOkClicked" ' +
@@ -77,26 +68,22 @@ UsingContentSlot.args = {
     subtitleText: 'some more information about this issue, and some more information about this issue',
     contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     size: 'lg',
+    image: require('@/stories/assets/rabbit.svg')
 }
 
 const TemplateUsingFooterSlot = (args, {argTypes}) => ({
     components: {VcNoticeModal: VcNoticeModalCmp, VcModalFooter},
     props: Object.keys(argTypes),
-    computed: {
-        iconParam() {
-            return require('@/stories/assets/rabbit.svg');
-        },
-    },
     template: `
       <VcNoticeModal :show-dialog="showDialog" :useOffset="useOffset" :title-text="titleText" :subtitle-text="subtitleText"
-                     :content-text="contentText" :icon="iconParam" :size="size"
+                     :content-text="contentText" :image="image" :size="size"
                      @onCloseButtonClicked="onCloseButtonClicked" @onOkClicked="onOkClicked"
                      @onCancelClicked="onCancelClicked">
       <template #footer>
         <VcModalFooter
             direction="vertical"
             :buttons='[
-                {label:"Contact",event:"onContactClicked",color:"primary"},
+                {label:"Contact",event:"onContactClicked",color:"secondary"},
                 {label:"Clear",event:"onClearClicked",color:"secondary"},
                 {label:"Save",event:"onSaveClicked",color:"white"}
                 ]'
@@ -118,6 +105,20 @@ UsingFooterSlot.args = {
     subtitleText: 'some more information about this issue, and some more information about this issue',
     contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     size: 'lg',
+    image: require('@/stories/assets/rabbit.svg'),
+}
+
+export const WithImageAsComponents = Template.bind({});
+
+// Set default values
+WithImageAsComponents.args = {
+    showDialog: true,
+    useOffset: false,
+    titleText: 'Notice with image slot',
+    subtitleText: 'It looks the same, what\'s the deal?',
+    contentText: 'In some projects you will have infrastructure that makes it impossible to pass an SVG in the usual way, because SVGs are treated as components. So the right way to pass them is using a slot.',
+    size: 'lg',
+    image: require('@/stories/assets/rabbit.svg'),
 }
 
 export default {

package/src/components/modal/VcNoticeModal/VcNoticeModal.vue

@@ -6,7 +6,7 @@
                     @onCloseButtonClicked="$emit('onCloseButtonClicked')">
     <template #content>
       <VcLayout :class="`VcNoticeHeader ${flavor}`" column align-content-center>
-        <img :src="icon" class="VcNoticeImage" :class="`${size}`">
+        <VcImage :image="currentImage" class="VcNoticeImage" :class="`${size}`"/>
         <div class="VcNoticeHeaderText">{{ titleText }}</div>
       </VcLayout>
       <VcLayout :class="`VcNoticeSubtitle ${flavor}`" column>{{ subtitleText }}</VcLayout>
@@ -36,18 +36,22 @@
 import VcModalContainer from "@/components/modal/elements/VcModalContainer.vue";
 import VcModalFooter from "@/components/modal/elements/VcModalFooter.vue";
 import VcLayout from "@/components/VcLayout/VcLayout.vue";
+import VcImage from "@/components/VcImage/VcImage.vue";
 
 export default {
   name: "VcNoticeModal",
-  components: {VcLayout, VcModalFooter, VcModalContainer},
+  components: {VcImage, VcLayout, VcModalFooter, VcModalContainer},
   props: {
     showDialog: {
       type: Boolean,
       required: true
     },
+    image: {
+      type: [String, Object],
+    },
     icon: {
-      type: String,
-      required: true,
+      type: [String, Object],
+      comment: 'deprecated'
     },
     titleText: {
       type: String,
@@ -84,6 +88,12 @@ export default {
       required: false
     },
   },
+  computed: {
+    currentImage() {
+      // for backward compatibility
+      return this.image || this.icon;
+    }
+  }
 }
 </script>
 
@@ -96,11 +106,11 @@ export default {
   &.responsive,
   &.sm,
   &.md {
-    max-height: 160px;
+    height: 160px;
   }
 
   &.lg {
-    max-height: 208px;
+    height: 208px;
   }
 }
 
@@ -113,6 +123,7 @@ export default {
 
 .VcNoticeHeader {
   text-align: center;
+  align-items: center;
   font-size: 18px;
   font-weight: 600;
   line-height: 28px;

package/src/components/wizard/VcStepsBar/VcStepsBar.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="vc-stepper-container" data-qa="vc-steps-bar">
-    <v-stepper class="vc-stepper"
-               v-model="currentStep"
-               vertical
-               :data-qa="dataQa">
+    <v-stepper
+      class="vc-stepper"
+      v-model="currentStep"
+      vertical
+      :data-qa="dataQa"
+    >
       <div v-if="title" class="stepper-title">{{ title }}</div>
       <template v-for="(step, index) in steps">
         <v-stepper-step
@@ -12,7 +14,7 @@
           :complete="lastCompleted > index + 1"
           :step="index + 1"
         >
-          {{ step.name }}
+          {{ step.title? step.title: step.name }}
         </v-stepper-step>
       </template>
     </v-stepper>
@@ -22,8 +24,8 @@
 <script>
 export default {
   name: "VcStepsBar",
-  model:{
-    prop: 'currentStep',
+  model: {
+    prop: "currentStep",
   },
   props: {
     currentStep: {
@@ -32,54 +34,54 @@ export default {
     },
     steps: {
       type: Array,
-      validator: steps => steps.every(step => step.name),
-      required: true
+      validator: (steps) => steps.every((step) => step.name),
+      required: true,
     },
     title: {
       type: String,
-      default: ''
+      default: "",
     },
     dataQa: {
       type: String,
-      default: 'vc-steps-bar'
-    }
+      default: "vc-steps-bar",
+    },
   },
   data() {
     return {
       lastCompleted: 0,
-      FIRST_STEP: 1
-    }
+      FIRST_STEP: 1,
+    };
   },
   methods: {
     nextStep() {
       if (this.lastCompleted < this.currentStep) {
-        this.lastCompleted = this.currentStep
+        this.lastCompleted = this.currentStep;
       }
       if (this.currentStep > this.steps.length) {
-        this.shareStep(this.steps.length)
+        this.shareStep(this.steps.length);
       }
     },
     shareStep(step) {
-      this.$emit('input', step)
-    }
+      this.$emit("input", step);
+    },
   },
   watch: {
     currentStep: {
       handler(newVal, oldVal) {
         if (newVal > oldVal) {
-          this.nextStep()
+          this.nextStep();
         }
         if (newVal < this.FIRST_STEP) {
-          this.shareStep(this.FIRST_STEP)
+          this.shareStep(this.FIRST_STEP);
         }
-      }
-    }
+      },
+    },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
-@import '@/../styles/variables.scss';
+@import "@/../styles/variables.scss";
 .vc-stepper-container {
   height: 100%;
   padding-block-start: var(--size-value4);

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

@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom'
 import VcWizard from "./VcWizard";
 import Vuetify from 'vuetify'
-import {getByText, render} from "@testing-library/vue";
+import {render} from "@testing-library/vue";
 import {within} from '@testing-library/dom'
 
 import init from "../../../../testing-library.config"

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

@@ -28,6 +28,7 @@ Playground.args = {
     onSubmit: action('submit'),
     steps: [
         {
+            title: 'Step title 1',
             name: 'Step name 1',
             description: 'A description for step 1',
             component: () => import('@/components/VcTextArea/VcTextArea.vue'),