@vcita/design-system 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcAvatar/VcAvatar.stories.js

@@ -230,7 +230,6 @@ export default {
     id: 'VcAvatar', // This will be the link to this component
     component: VcAvatarCmp,
     description: 'some desctext',
-    id: 'VcAvatarCmp',
     argTypes: {
         size: {
             options: ['x-sm', 'sm', 'md', 'lg'],

package/src/components/VcButton/VcButton.stories.js

@@ -28,28 +28,28 @@ const GeneralTemplate = (args, {argTypes}) => ({
     components: {VcButton: VcButtonCmp},
     props: Object.keys(argTypes),
     template: `
-        <div>
-        <p v-if="description">{{description}}</p>
-        <VcButton :color="color"
-                  :flavor="flavor"
-                  :ghost="ghost"
-                  :x-small="xSmall"
-                  :small="small"
-                  :large="large"
-                  :x-large="xLarge"
-                  :icon="icon"
-                  :fab="fab"
-                  :pill="pill"
-                  :outlined="outlined"
-                  :loading="loading"
-                  :width="width"
-                  :disabled="disabled"
-                  :href="href"
-                  :prepend-default-icon="prependDefaultIcon"
-                  @click="onClick">
-            {{ label }}
-        </VcButton>
-        </div>`,
+      <div>
+      <p v-if="description">{{ description }}</p>
+      <VcButton :color="color"
+                :flavor="flavor"
+                :ghost="ghost"
+                :x-small="xSmall"
+                :small="small"
+                :large="large"
+                :x-large="xLarge"
+                :icon="icon"
+                :fab="fab"
+                :pill="pill"
+                :outlined="outlined"
+                :loading="loading"
+                :width="width"
+                :disabled="disabled"
+                :href="href"
+                :prepend-default-icon="prependDefaultIcon"
+                @click="onClick">
+        {{ label }}
+      </VcButton>
+      </div>`,
 })
 
 export const Playground = GeneralTemplate.bind({});
@@ -296,7 +296,7 @@ export default {
         fab: {table: {category: 'Shape'}},
         pill: {table: {category: 'Shape'}},
         outlined: {table: {category: 'Shape'}},
-        onClick: {action: 'onClick',table: {disable: true}},
+        onClick: {action: 'onClick', table: {disable: true}},
     },
     parameters: {
         docs: {

package/src/components/VcChip/VcChip.stories.js

@@ -1,5 +1,4 @@
 import VcChipCmp from "./VcChip";
-import {action} from "@storybook/addon-actions";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -36,13 +35,15 @@ Playground.args = {
     invalid: false,
     dataQa: 'vc-chip',
     isRipple: true,
-    onClose: action('close'),
 }
 
 export default {
     title: 'Content Display / VcChip',
     id: 'VcChip',
     component: VcChipCmp,
+    argTypes: {
+        onClose: {action: 'close', table: {disable: true}},
+    },
     parameters: {
         design: {
             type: 'figma',

package/src/components/VcChipList/VcChipList.stories.js

@@ -3,14 +3,20 @@ import VcChipListCmp from './VcChipList';
 const chip = {
     label: 'Chip name',
     avatar: {
-        imagePath: require('@/stories/assets/pics/avatar1.png')
+        imagePath: require(`@/stories/assets/pics/avatar1.png`)
     }
 };
 
 const items = [];
 
 for (let i = 0; i < 30; i++) {
-    items.push(chip);
+    items.push({...chip, label: chip.label + ' ' + (i + 1)});
+}
+
+const baseProps = {
+    items,
+    moreText: 'and $NUMBER more',
+    dataQa: 'VcChipList',
 }
 
 const PlaygroundTemplate = (args, {argTypes}) => ({
@@ -23,21 +29,26 @@ const PlaygroundTemplate = (args, {argTypes}) => ({
     },
     computed: {
         moreString() {
-            return `and ${this.hiddenNumber} more`;
+            return this.moreText.replace('$NUMBER', this.hiddenNumber);
         }
     },
     template: `
       <div>
       <div>VcChipList renders a list of VcChip components according to an array of items.</div>
-      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the "more" indicator.</div>
+      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the
+        "more" indicator.
+      </div>
       <br>
       <div>The "moreText" prop will determine the text for the "more" indicator.</div>
-      <div>It's not editable as a prop in this example, because it's computed in order to include the number of hidden chips.</div>
+      <div>This example shows one way for including the number of hidden items in the "moreText" label.</div>
       <br>
-      <div>This example shows the default content of the VcChip (label) and the default display of the tooltip content.</div>
+      <div>This example shows the default content of the VcChip (label) and the default display of the tooltip
+        content.
+      </div>
       <br>
       <VcChipList :items="items"
                   :more-text="moreString"
+                  :data-qa="dataQa"
                   @onHiddenChipsChange="(num) => this.hiddenNumber = num"/>
       </div>
     `
@@ -46,7 +57,7 @@ const PlaygroundTemplate = (args, {argTypes}) => ({
 export const Playground = PlaygroundTemplate.bind({});
 
 Playground.args = {
-    items
+    ...baseProps,
 };
 
 const CustomTemplate = (args, {argTypes}) => ({
@@ -59,32 +70,34 @@ const CustomTemplate = (args, {argTypes}) => ({
     },
     computed: {
         moreString() {
-            return `and ${this.hiddenNumber} more`;
+            return this.moreText.replace('$NUMBER', this.hiddenNumber);
         }
     },
     template: `
       <div>
       <div>VcChipList renders a list of VcChip components according to an array of items.</div>
-      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the "more" indicator.</div>
+      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the
+        "more" indicator.
+      </div>
       <br>
       <div>The "moreText" prop will determine the text for the "more" indicator.</div>
-      <div>It's not editable as a prop in this example, because it's computed in order to include the number of hidden chips.</div>
+      <div>This example shows one way for including the number of hidden items in the "moreText" label.</div>
       <br>
       <div>This example shows the VcChip with custom content and the custom display of the tooltip content.</div>
       <br>
       <VcChipList :items="items"
                   :more-text="moreString"
                   @onHiddenChipsChange="(num) => this.hiddenNumber = num">
-      <template #chipLabel="{item}">
-        <span style="color:gray;margin-inline-end:4px;">{{item.label}} |</span>
-        <span>Custom content</span>
-      </template>
-      <template #tooltipSlot="{items}">
-        <div v-for="item in items">
-          <span style="font-weight:400;">{{item.label}} |</span>
-          <span style="font-weight:600;">Custom content</span>
-        </div>
-      </template>
+        <template #chipLabel="{item}">
+          <span style="color:gray;margin-inline-end:4px;">{{ item.label }} |</span>
+          <span>Custom content</span>
+        </template>
+        <template #tooltipSlot="{items}">
+          <div v-for="item in items">
+            <span style="font-weight:400;">{{ item.label }} |</span>
+            <span style="font-weight:600;">Custom content</span>
+          </div>
+        </template>
       </VcChipList>
       </div>
     `
@@ -93,7 +106,7 @@ const CustomTemplate = (args, {argTypes}) => ({
 export const CustomContent = CustomTemplate.bind({});
 
 CustomContent.args = {
-    items
+    ...baseProps,
 }
 
 export default {

package/src/components/VcGalleryItem/VcGalleryItem.spec.js

@@ -0,0 +1,120 @@
+import '@testing-library/jest-dom'
+import VcGalleryItem from './VcGalleryItem.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 baseProps = {
+  uid: '1a',
+  label: 'Correct item label',
+  isMobile: false,
+  isCreate: false,
+};
+
+describe('VcGalleryItem.vue', () => {
+
+  const renderWithVuetify = (options, callback) => {
+    const root = document.createElement('div')
+    root.setAttribute('data-app', 'true')
+
+    return render(
+        VcGalleryItem,
+        {
+          container: document.body.appendChild(root),
+          vuetify: new Vuetify(),
+          ...options,
+          mocks: {$dst: value => value},
+        },
+        callback,
+    )
+  }
+
+  it('Mounts', () => {
+    const {container} = renderWithVuetify({
+      props: baseProps
+    })
+    expect(container).toHaveAttribute('data-app', 'true')
+  });
+
+  it('Displays slot content', async () => {
+    const labelSlotContent = 'label slot content';
+    const buttonSlotContent = 'slot-button';
+    const {queryByText, getByTestId} = renderWithVuetify({
+      props: baseProps,
+      slots: {
+        actions: `<div>${buttonSlotContent}</div>`,
+        label: `<div>${labelSlotContent}</div>`,
+      },
+    })
+    expect(queryByText(labelSlotContent)).toBeInTheDocument();
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    expect(queryByText(buttonSlotContent)).toBeInTheDocument();
+  });
+
+  it('Button events emission', async () => {
+    const {getByTestId, emitted} = renderWithVuetify({
+      props: baseProps
+    })
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    const selectBtn = getByTestId('VcGalleryItem-select-btn')
+    const previewBtn = getByTestId('VcGalleryItem-preview-btn')
+    await fireEvent.click(selectBtn)
+    await fireEvent.click(previewBtn)
+    expect(emitted().onSelect.length).toBe(1)
+    expect(emitted().onPreview.length).toBe(1)
+  });
+
+  it('Mobile events emission', async () => {
+    const {getByTestId, emitted, updateProps} = renderWithVuetify({
+      props: Object.assign(baseProps, { isMobile: true })
+    })
+    const thumbnail = getByTestId('VcGalleryItem-thumbnail');
+    await fireEvent.click(thumbnail);
+    expect(emitted().onExpend.length).toBe(1);
+    await updateProps({ isMobile: false })
+    await fireEvent.click(thumbnail);
+    expect(emitted().onExpend.length).toBe(1);
+  });
+
+  it('Displays correct label', async () => {
+    const {queryByText, updateProps} = renderWithVuetify({
+      props: baseProps
+    })
+    expect(queryByText(baseProps.label)).toBeInTheDocument();
+    expect(queryByText(baseProps.label.repeat(2))).toBeNull();
+    await updateProps({label: baseProps.label.repeat(2)})
+    expect(queryByText(baseProps.label.repeat(2))).toBeInTheDocument();
+  });
+
+
+  it('Toggle isCreate modifier class', async () => {
+    const {getByTestId, updateProps} = renderWithVuetify({
+      props: baseProps
+    })
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    expect(VcGalleryItem).not.toHaveClass('vc-gallery-item--is-create');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    await updateProps({ isCreate: true })
+    expect(VcGalleryItem).toHaveClass('vc-gallery-item--is-create');
+  });
+
+  it('Fires onCreate event', async () => {
+    const {getByTestId, updateProps, emitted} = renderWithVuetify({
+      props: Object.assign(baseProps, { isCreate: true })
+    })
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    const thumbnail = getByTestId('VcGalleryItem-thumbnail');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    await fireEvent.click(thumbnail)
+    expect(emitted().onCreate.length).toBe(1)
+    await updateProps({ isCreate: false })
+    await fireEvent.click(thumbnail)
+    expect(emitted().onCreate.length).toBe(1)
+  });
+
+});

package/src/components/VcGalleryItem/VcGalleryItem.stories.js

@@ -0,0 +1,94 @@
+import VcGalleryItemCmp from './VcGalleryItem';
+import VcButton from '../VcButton/VcButton';
+import VcIcon from '../VcIcon/VcIcon';
+
+const baseProps = {
+    isMobile: false,
+    uid: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bef',
+    isCreate: false,
+    dataQa: 'VcGalleryItem',
+}
+
+const Template = (args, {argTypes}) => ({
+        components: { VcGalleryItem: VcGalleryItemCmp, VcButton, VcIcon },
+        props: Object.keys(argTypes),
+        template: `<div>
+            <div class="description" :style="{margin: '20px 0'}">
+                <h4 :style="{margin: '8px 0'}">
+                    This component functions as a list/grid item and is meant to show inner content.
+                </h4>
+                <h4 :style="{fontWeight: 400}">
+                    It keeps a specific ratio while it's text is flushed beneath.<br />
+                    It presents control-buttons layer on hover, and a simplified click-action on mobile.<br />
+                    It's slots api label and actions modularity.<br />
+                    When 'isCreate' is passed as true, it functions as a 'new-item' button. <br />
+                </h4>
+            </div>
+            <VcGalleryItem :isMobile="isMobile" 
+                                      :uid="uid"
+                                      :src="src"
+                                      :label="label"
+                                      :dataQa="dataQa"
+                                      :isCreate="isCreate"
+                                      @onSelect="onSelect"
+                                      @onPreview="onPreview"
+                                      @onExpend="onExpend"
+                                      @onCreate="onCreate"
+            >
+                <template #actions v-if="actionsSlotContent">
+                    ${args.actionsSlotContent}
+                </template>
+                <template #label v-if="labelSlotContent">
+                    ${args.labelSlotContent}
+                </template>
+            </VcGalleryItem>
+        </div>
+        `,
+})
+
+export const Playground = Template.bind({});
+Playground.args = {
+    ...baseProps,
+    src: require('@/stories/assets/pics/gallery-item-1.jpg'),
+    label: 'Thank’s for your application',
+}
+
+
+export const LabelSlotContent = Template.bind({});
+LabelSlotContent.args = {
+    ...baseProps,
+    src: require('@/stories/assets/pics/gallery-item-2.jpg'),
+    labelSlotContent: `<span :style="{color: 'green'}">Slot content label</span>`
+}
+
+
+export const ActionsSlotContent = Template.bind({});
+ActionsSlotContent.args = {
+    ...baseProps,
+    src: require('@/stories/assets/pics/gallery-item-3.jpg'),
+    label: 'Thank’s for your application',
+    actionsSlotContent: `<VcButton @click="$emit('onSelect')" flavor="primary" label="Yes" class="buttons__select">
+                             <template #prepend><VcIcon :style="{ marginRight: '12px' }">$check_circle</VcIcon></template>
+                         </VcButton>`
+}
+
+export const CreateItem = Template.bind({});
+CreateItem.args = {
+    ...baseProps,
+    isCreate: true,
+}
+
+export default {
+    title: 'Content display / VcGalleryItem',
+    id: 'VcGalleryItem',
+    component: VcGalleryItemCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/7FONyMxCo0nkhyz013Xmai/Campaign-editor?node-id=1504%3A205665',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};

package/src/components/VcGalleryItem/VcGalleryItem.vue

@@ -0,0 +1,161 @@
+<template>
+  <div class="vc-gallery-item" :data-qa="dataQa"
+       :class="{'vc-gallery-item--is-create': isCreate}">
+    <div class="vc-gallery-item__thumbnail"
+         :data-qa="`${dataQa}-thumbnail`"
+         @click="isCreate ? $emit('onCreate') : isMobile && $emit('onExpend', { uid })">
+      <div class="vc-gallery-item__image" :style="{ backgroundImage: `url(${src})` }" v-if="!isCreate" role="image" />
+      <div class="buttons flex-column align-center justify-center" v-if="!isMobile || isCreate" >
+        <slot name="actions">
+          <VcButton @click="$emit('onSelect', { uid })"
+                    pill
+                    :label="$dst('ds.gallery_item.select')"
+                    :data-qa="`${dataQa}-select-btn`"
+                    v-if="!isCreate"
+                    class="buttons__select" />
+          <VcButton @click="$emit('onPreview', { uid })"
+                    flavor="secondary"
+                    pill
+                    :label="$dst('ds.gallery_item.preview')"
+                    :data-qa="`${dataQa}-preview-btn`"
+                    v-if="!isCreate"
+                    class="buttons__preview" />
+          <div class="create__wrap" v-else>
+            <VcButton class="create__button" icon plain :data-qa="`${dataQa}-create-button`">
+              <template #prepend>
+                <VcIcon size="32" :color="$vuetify.theme.defaults.light.secondary.base">$plus</VcIcon>
+              </template>
+            </VcButton>
+          </div>
+        </slot>
+      </div>
+    </div>
+    <h3 class="vc-gallery-item__label" :data-qa="`${dataQa}-label`">
+      <slot name="label">
+        {{ !isCreate ? label : $dst('ds.gallery_item.create') }}
+      </slot>
+    </h3>
+  </div>
+</template>
+
+<script>
+import VcButton from "@/components/VcButton/VcButton.vue";
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+export default {
+  name: "VcGalleryItem",
+  components: {
+    VcButton,
+    VcIcon
+  },
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcGalleryItem'
+    },
+    isMobile: {
+      type: Boolean,
+      required: true
+    },
+    uid: {
+      type: String,
+      required: true
+    },
+    src: {
+      type: String,
+      default: ''
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    isCreate: {
+      type: Boolean,
+      required: false
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/mixins.scss";
+
+.vc-gallery-item {
+  max-width: 252px;
+  margin-bottom: var(--size-value4);
+
+  @include sm-and-up {
+    min-width: 200px;
+  }
+
+  .VcButton.secondary__text {
+    background-color: var(--v-secondary-lighten2);
+    color: var(--v-secondary-base)!important;
+  }
+
+  &__thumbnail {
+    position: relative;
+    height: 0;
+    padding-bottom: 136%;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow-4);
+    margin-bottom: var(--size-value3);
+    overflow: hidden;
+
+    .vc-gallery-item--is-create &  {
+      background: var(--v-secondary-lighten3);
+      border: 1px dashed var(--v-secondary-base);
+    }
+  }
+
+  &__image {
+    padding-bottom: inherit;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: top center;
+
+    .vc-gallery-item__thumbnail:hover & {
+      filter: blur(5px);
+      transition: filter 0.3s ease-out;
+    }
+  }
+
+  &__label {
+    font-weight: var(--font-weight-medium2);
+    font-size: var(--font-size-small);
+    line-height: 1.5;
+    text-align: center;
+    color: var(--gray-darken-5);
+
+    .vc-gallery-item--is-create & {
+      color: var(--v-secondary-base);
+    }
+  }
+}
+
+.buttons {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: none;
+
+  .vc-gallery-item--is-create & {
+    display: flex;
+    background-color: var(--neutral-lighten-3);
+    cursor: pointer;
+  }
+
+  .vc-gallery-item__thumbnail:hover & {
+    display: flex;
+  }
+
+  &__select {
+    margin-bottom: var(--size-value4);
+  }
+
+}
+</style>

package/src/components/VcGalleryList/VcGalleryList.spec.js

@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom'
+import VcGalleryList from './VcGalleryList.vue';
+import Vuetify from 'vuetify'
+import { render } from '@testing-library/vue';
+import init from '../../../testing-library.config';
+import { fireEvent } from "@testing-library/dom";
+import { items } from './mockData';
+
+init();
+
+const baseProps = {
+    isMobile: false,
+    showCreate: true,
+    items,
+    title: 'Nice list'
+};
+
+describe('VcGalleryList.vue', () => {
+
+    const renderWithVuetify = (options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            VcGalleryList,
+            {
+                container: document.body.appendChild(root),
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: { $dst: value => value },
+            },
+            callback,
+        )
+    }
+
+    it('Mounts', () => {
+        const {container} = renderWithVuetify({
+            props: baseProps
+        })
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it('Renders correct title', async () => {
+        const { queryByText, updateProps } = renderWithVuetify({
+            props: baseProps
+        });
+        expect(queryByText(baseProps.title.repeat(2))).not.toBeInTheDocument();
+        expect(queryByText(baseProps.title)).toBeInTheDocument();
+        await updateProps({ title: baseProps.title.repeat(2) })
+        expect(queryByText(baseProps.title.repeat(2))).toBeInTheDocument();
+    });
+
+    it('Toggles title rendering', async () => {
+        const { queryByTestId, updateProps } = renderWithVuetify({
+            props: baseProps
+        });
+        const title = queryByTestId('VcGalleryList-title')
+        expect(title).toBeTruthy();
+        await updateProps({ title: '' })
+        const currentTitle = queryByTestId('VcGalleryList-title')
+        expect(currentTitle).toBeFalsy();
+    });
+
+    it('Toggles "create" button display', async () => {
+        const { queryByTestId, updateProps } = renderWithVuetify({
+            props: baseProps
+        });
+        const createBtn = queryByTestId('create-thumbnail')
+        expect(createBtn).toBeTruthy();
+        await updateProps({ showCreate: false })
+        const currentCreateBtn = queryByTestId('create-thumbnail')
+        expect(currentCreateBtn).toBeFalsy();
+    });
+
+    it('Events emission', async () => {
+        const { queryByTestId, emitted } = renderWithVuetify({
+            props: baseProps
+        });
+        const createBtn = queryByTestId('create-thumbnail')
+        expect(createBtn).toBeTruthy();
+        expect(emitted().onCreate).toBeFalsy()
+        await fireEvent.click(createBtn)
+        expect(emitted().onCreate.length).toBe(1)
+    });
+
+});