@vcita/design-system 1.2.2 → 1.3.0

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)
+    });
+
+});

package/src/components/VcGalleryList/VcGalleryList.stories.js

@@ -0,0 +1,63 @@
+import VcGalleryListCmp from './VcGalleryList';
+import { items } from './mockData';
+
+const baseProps = {
+    isMobile: false,
+    items,
+    title: 'Holidays & Special Events',
+    showCreate: false,
+}
+
+const Template = (args, {argTypes}) => ({
+        components: {VcGalleryList: VcGalleryListCmp},
+        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.
+                </h4>
+                <h4 :style="{fontWeight: 400}">
+                    Responsive breakpoints are derived from vuetify.<br />
+                    It is coupled with VcGalleryItem.<br />
+                    It can present a 'new item' button using a 'showCreate' prop.<br />
+                </h4>
+            </div>
+            <VcGalleryList :isMobile="isMobile" 
+                                      :items="items"
+                                      :title="title"
+                                      :showCreate="showCreate"
+                                      @onSelect="onSelect"
+                                      @onPreview="onPreview"
+                                      @onExpend="onExpend"
+                                      @onCreate="onCreate"
+            />
+        </div>`,
+    })
+
+export const Playground = Template.bind({});
+Playground.args = baseProps;
+
+export const WithCreateButton = Template.bind({});
+WithCreateButton.args = {
+    ...baseProps,
+    showCreate: true
+};
+
+export default {
+    title: 'Content display / VcGalleryList',
+    id: 'VcGalleryList',
+    component: VcGalleryListCmp,
+    argTypes: {
+        createHandler: { action: 'create' },
+    },
+    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/VcGalleryList/VcGalleryList.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="vc-gallery-list" :data-qa="dataQa">
+    <h2 v-if="title" class="vc-gallery-list__title" :data-qa="`${dataQa}-title`">{{ title }}</h2>
+    <div :class="`vc-gallery-list__items vc-gallery-list__items--${$vuetify.breakpoint.name}`">
+      <VcGalleryItem v-if="showCreate"
+                     :isCreate="true"
+                     :isMobile="false"
+                     uid="1"
+                     src="1"
+                     dataQa="create"
+                     @onCreate="$emit('onCreate')"
+      />
+      <VcGalleryItem v-for="item in items"
+                     :key="item.uid"
+                     :uid="item.uid"
+                     :isMobile="isMobile"
+                     :src="item.src"
+                     :label="item.label"
+                     @onSelect="(uid) => $emit('onSelect', uid)"
+                     @onPreview="(uid) => $emit('onPreview', uid)"
+                     @onExpend="(uid) => $emit('onExpend', uid)"
+      />
+    </div>
+  </div>
+
+</template>
+
+<script>
+import VcGalleryItem from "@/components/VcGalleryItem/VcGalleryItem.vue";
+export default {
+  name: "VcGalleryList",
+  components: {
+    VcGalleryItem
+  },
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcGalleryList'
+    },
+    isMobile: {
+      type: Boolean,
+      required: true,
+    },
+    items: {
+      type: Array,
+      required: true,
+      validator: prop => prop.every(item => item.uid),
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    showCreate: {
+      type: Boolean,
+      default: false
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/mixins.scss";
+
+.vc-gallery-list {
+
+  .vc-gallery-list__title {
+    font-size: var(--font-size-small2);
+    font-weight: var(--font-weight-large);
+    margin-bottom: var(--size-value4);
+
+    @include sm-and-up{
+      margin-bottom: var(--size-value12);
+    }
+  }
+
+  .vc-gallery-list__items {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: var(--size-value5);
+
+    &--sm {
+    }
+
+    &--md {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    &--lg {
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    &--xl {
+      grid-template-columns: repeat(6, 1fr);
+    }
+
+    &--md, &--lg, &--xl {
+      grid-gap: var(--size-value8);
+    }
+  }
+}
+
+</style>

package/src/components/VcGalleryList/mockData.js

@@ -0,0 +1,50 @@
+const IMAGES = {
+  gallery_item1: require('@/stories/assets/pics/gallery-item-1.jpg'),
+  gallery_item2: require('@/stories/assets/pics/gallery-item-2.jpg'),
+  gallery_item3: require('@/stories/assets/pics/gallery-item-3.jpg'),
+  gallery_item4: require('@/stories/assets/pics/gallery-item-4.jpg'),
+  gallery_item5: require('@/stories/assets/pics/gallery-item-5.jpg'),
+}
+const items = [
+  {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bef",
+    "src": IMAGES.gallery_item1,
+    "label": "Thank’s for your application"
+  }, {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bea",
+    "src": IMAGES.gallery_item2,
+    "label": "Nice template"
+  }, {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4beg",
+    "src": IMAGES.gallery_item3,
+    "label": "Celebrate wine week"
+  },  {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4befz",
+    "src": IMAGES.gallery_item4,
+    "label": "Thank’s for your application"
+  }, {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4beax",
+    "src": IMAGES.gallery_item5,
+    "label": "Nice template"
+  }, {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4begc",
+    "src": IMAGES.gallery_item1,
+    "label": "Celebrate wine week"
+  },  {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bef1",
+    "src": IMAGES.gallery_item2,
+    "label": "Thank’s for your application"
+  }, {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bea2",
+    "src": IMAGES.gallery_item3,
+    "label": "Nice template"
+  }, {
+    "uid": "1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4beg3",
+    "src": IMAGES.gallery_item4,
+    "label": "Celebrate wine week"
+  },
+];
+
+export {
+  items
+}

package/src/components/VcLink/VcLink.vue

@@ -1,5 +1,9 @@
 <template>
-  <a :href="url" :target="target" class="VcLink" :class="{'link-secondary': secondary}" :data-qa="dataQa" @click="$emit('click')">
+  <a :href="url" :target="target"
+     class="VcLink"
+     :class="{'link-secondary': secondary, 'disabled' : disabled}"
+     :data-qa="dataQa"
+     @click="$emit('click')">
     <VcIcon v-if="!!prependIcon" class="prepend-icon" small>{{ getIcon }}</VcIcon>
     <label>{{ label }}</label>
   </a>
@@ -39,6 +43,10 @@ export default {
       type: String,
       default: '_blank',
       validator: prop => ['_blank', '_self', '_parent', '_top', '_system'].includes(prop)
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
@@ -94,5 +102,9 @@ export default {
       }
     }
   }
+
+  &.disabled {
+    pointer-events: none;
+  }
 }
 </style>

package/src/components/VcMiniBanner/VcMiniBanner.spec.js

@@ -0,0 +1,74 @@
+import '@testing-library/jest-dom'
+import VcMiniBanner from './VcMiniBanner.vue';
+import Vuetify from 'vuetify'
+import { render } from '@testing-library/vue';
+import init from '../../../testing-library.config';
+import { fireEvent, within } from "@testing-library/dom";
+
+init();
+
+const baseProps = {
+    title: 'Mini',
+    subtitle: 'Banner',
+    dataQa: 'VcMiniBanner',
+    ctaLabel: 'now!',
+    gradientHue: '#dfd',
+}
+
+describe('VcMiniBanner.vue', () => {
+
+    const renderWithVuetify = (options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        return render(
+            VcMiniBanner,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify: new Vuetify(),
+                ...options,
+                mocks: {},
+            },
+            callback,
+        )
+    }
+
+    it('mounts', () => {
+        const {container} = renderWithVuetify( {
+            props: baseProps
+        })
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it('Emit on full banner area', async () => {
+        const {getByTestId, emitted} = renderWithVuetify( {
+            props: baseProps
+        })
+        const banner = getByTestId('VcMiniBanner')
+        const VcButton = getByTestId('VcMiniBanner-button')
+        await fireEvent.click(VcButton)
+        expect(emitted().onAction.length).toBe(1)
+        await fireEvent.click(banner)
+        expect(emitted().onAction.length).toBe(2)
+    });
+
+    it('Render title', () => {
+        const {getByTestId} = renderWithVuetify( {
+            props: baseProps
+        })
+        const title = getByTestId('VcMiniBanner-title')
+        const text = within(title).getByText(baseProps.title)
+        expect(text).toBeInTheDocument()
+    });
+
+    it('Render subtitle', () => {
+        const {getByTestId} = renderWithVuetify( {
+            props: baseProps
+        })
+        const title = getByTestId('VcMiniBanner-subtitle')
+        const text = within(title).getByText(baseProps.subtitle)
+        expect(text).toBeInTheDocument()
+    });
+
+});

package/src/components/VcMiniBanner/VcMiniBanner.stories.js

@@ -0,0 +1,75 @@
+import VcMiniBanner from './VcMiniBanner';
+import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
+
+const Template = (args, {argTypes}) => ({
+        components: { VcMiniBanner },
+        props: Object.keys(argTypes),
+        template: `
+        <div>
+          <div class="description" :style="{margin: '20px 0'}">
+            <h4 :style="{margin: '8px 0'}">
+                This component functions as a slim banner used for marketing purposes.
+            </h4>
+            <h4 :style="{fontWeight: 400}">
+                Is has a flexible height with a minimum value.
+                It's props api offers title, subtitle, cta-label, thumb-image and gradient-hue. <br />
+                As it is a banner, the whole surface is clickable and emits an event <br />
+                Mobile layout id column based with align-to-start centering and a vertical gradient.
+            </h4>
+          </div>
+          <VcMiniBanner 
+              :thumbImage="thumbImage" 
+              :title="title" 
+              :subtitle="subtitle" 
+              :ctaLabel="ctaLabel" 
+              :gradientHue="gradientHue" 
+              @onAction="onAction" />
+
+        </div>
+        `,
+    })
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+    thumbImage: require(`@/stories/assets/app-market/fc.svg`),
+    title: 'Install Pro Campaigns to create pixel-perfect templates with a few clicks',
+    subtitle: 'Get creative freedom for your campaigns with a growing collection of templates for every occasion.',
+    ctaLabel: 'Install app',
+    gradientHue: '#f1f9fe',
+}
+
+export const LongSubtitle = Template.bind({});
+LongSubtitle.args = {
+    thumbImage: require(`@/stories/assets/app-market/zapier.svg`),
+    title: 'This is what automation feels like',
+    subtitle: 'Zapier empowers you to automate your work across 5,000+ apps—so you can move forward, faster. From side hustlers to enterprise leaders, Zapier connects your work apps so you get more focus and less frustration.',
+    ctaLabel: 'Read more',
+    gradientHue: '#fefef3',
+}
+
+export const WithoutHue = Template.bind({});
+WithoutHue.args = {
+    thumbImage: require(`@/stories/assets/app-market/qb.svg`),
+    title: 'Save time and automate your reporting process',
+    subtitle: 'Connect your day-to-day business activity with your accounting platform to save time and automate your reporting process',
+    ctaLabel: 'Connect',
+}
+
+export default {
+    title: 'Content display / VcMiniBanner',
+    id: 'VcMiniBanner',
+    component: VcMiniBanner,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/ZSwWaGaUJcSSxQ8CVs74VA/Upsell-%26-empty-states?node-id=263%3A18966',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+        docs: {
+            page: VcBaseDocs,
+        },
+    },
+};