@vcita/design-system 1.2.2 → 1.3.0

package/src/components/VcMiniBanner/VcMiniBanner.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="vc-mini-banner d-flex flex-column flex-sm-row justify-space-between justify-sm-start align-start align-sm-center"
+       :data-qa="dataQa" :style="{ background: gradientHue
+          ? `linear-gradient(${ $vuetify.breakpoint.smAndUp ? 90 : 180 }deg, ${ gradientHue } 0%, #fff 42%, #fff 100%)`
+          : 'transparent' }"
+       @click="$emit('onAction')">
+        <div class="vc-mini-banner__thumbnail">
+          <div class="vc-mini-banner__image-wrap">
+            <div class="vc-mini-banner__image" :style="{ backgroundImage: `url(${ thumbImage })` }" />
+          </div>
+        </div>
+        <div class="vc-mini-banner__text-content">
+          <h3 class="vc-mini-banner__title" :data-qa="`${dataQa}-title`">{{ title }}</h3>
+          <h4 class="vc-mini-banner__subtitle" v-if="subtitle" :data-qa="`${dataQa}-subtitle`">{{ subtitle }}</h4>
+        </div>
+        <div class="vc-mini-banner__cta">
+          <VcButton pill small class="primary-cta" :data-qa="`${dataQa}-button`">
+            {{ ctaLabel }}
+          </VcButton>
+        </div>
+  </div>
+</template>
+
+<script>
+import VcButton from "@/components/VcButton/VcButton.vue";
+
+export default {
+  name: "VcBanner",
+  components: { VcButton },
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcMiniBanner'
+    },
+    thumbImage: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      required: false
+    },
+    ctaLabel: {
+      type: String,
+      required: true
+    },
+     gradientHue: {
+      type: String,
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/mixins.scss";
+
+.vc-mini-banner {
+  min-height: 66px;
+  overflow: hidden;
+  border-radius: var(--size-value2);
+  border: 1px solid var(--neutral-lighten-2);
+  padding: var(--size-value4);
+  padding-inline-start: var(--size-value5);
+  padding-inline-end: var(--size-value8);
+  grid-gap: var(--size-value5);
+  cursor: pointer;
+  background-color: var(--modal-bg-color);
+
+  &__thumbnail {
+    background: var(--modal-bg-color);
+    height: var(--size-value12);
+    width: var(--size-value12);
+    box-shadow: var(--shadow-5);
+    border-radius: var(--border-radius);
+  }
+
+  &__image-wrap {
+    height: inherit;
+    width: inherit;
+    padding: var(--size-value2);
+  }
+
+  &__image {
+    height: 100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+
+  &__text-content {
+    color: var(--gray-darken-5);
+  }
+
+  &__title {
+    font-weight: var(--font-weight-large2);
+    font-size: var(--font-size-small3);
+
+    @include sm-and-up {
+      font-weight: var(--font-weight-large);
+      font-size: var(--font-size-small2);
+    }
+  }
+
+  &__subtitle {
+    margin-top: var(--size-value1);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-small2);
+
+    @include sm-and-up {
+      font-weight: var(--font-weight-medium);
+      font-size: var(--font-size-xx-small);
+    }
+  }
+
+  &__title, &__subtitle {
+    user-select: none;
+  }
+
+  &__cta {
+    @include sm-and-up {
+      margin-inline-start: auto;
+    }
+  }
+
+}
+</style>

package/src/components/VcSearchPicker/VcSearchPicker.vue

@@ -16,7 +16,6 @@
                     @update:search-input="(text) => text && text.length && $emit('onSearchInput', text)"
                     @change="(newVal) => $emit('onSelectionChange', newVal)"
                     @click.native="toggleMenu"
-                    @click:append="toggleMenu"
                     @blur="focused = false;$emit('onMenuToggled', { isOpen: false })"
                     multiple
     >
@@ -271,12 +270,20 @@ export default {
   }
 }
 
-::v-deep .v-list-item--link {
-  font-size: var(--font-size-x-small);
+::v-deep {
+  .v-list-item--link {
+    font-size: var(--font-size-x-small);
 
-  &:before {
-    content: initial;
+    &:before {
+      content: initial;
+    }
+  }
+
+  .v-input__append-inner {
+    pointer-events: none;
   }
 }
 
+
+
 </style>

package/src/components/VcSideNav/VcSideNav.vue

@@ -30,7 +30,9 @@
   </div>
 </template>
 <script>
+
 import VcIcon from "@/components/VcIcon/VcIcon.vue";
+
 export default {
   name: "VcSideNav",
   components: {VcIcon},

package/src/components/VcTextField/VcTextField.stories.js

@@ -63,7 +63,8 @@ const TextFieldTemplate = (args, {argTypes}) => ({
                    :google-address-auto-complete="googleAddressAutoComplete"
                    :google-address-country-options="googleAddressCountryOptions"
                    @click="onClick"
-                   @input="onInput"/>
+                   @input="onInput"
+                   @onPlaceSelected="onPlaceSelected"/>
       </v-layout>`,
 })
 

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

@@ -62,11 +62,13 @@ const dialogTemplate = (args, {argTypes}) => ({
                       :showCloseButton="true"
                       :size="modalSize"                      
                       :showFooterDivider="false"
+                      :useOffset="false"
+                      flavor="input"
                       @click-outside="$emit('onClickOutside')"
                       @onCloseButtonClicked="$emit('onCloseButtonClicked')">
       <template #content>
         <VcUpsellBlock
-            mode="dialog"
+            :mode="mode"
             :imageUrl="imageUrl"
             :titleText="titleText"
             :subtitleText="subtitleText"
@@ -126,7 +128,10 @@ export default {
     component: VcUpsellBlockCmp,
     argTypes: {
         description: {table: {disable: true}},
-        modalSize: {table: {disable: true}},
+        modalSize: {
+            options: ['sm', 'md', 'lg', 'xl', 'responsive'],
+            control: {type: 'radio'}
+        },
         showDialog: {table: {disable: true}},
         linkText: {table: {category: 'link'}},
         linkUrl: {table: {category: 'link'}},

package/src/components/VcUpsellBlock/VcUpsellBlock.vue

@@ -96,6 +96,9 @@ export default {
    font-style: normal;
    @include md-and-up{
      overflow-x: visible;
+     &.dialog {
+       overflow: hidden;
+     }
    }
 
    &:before{

package/src/components/index.js

@@ -65,3 +65,8 @@ export {default as VcSearchPicker} from './VcSearchPicker/VcSearchPicker.vue';
 export {default as VcDraggableList} from './VcDraggableList/VcDraggableList.vue';
 export {default as VcTabs} from './VcTabs/VcTabs.vue';
 export {default as VcSideNav} from './VcSideNav/VcSideNav.vue';
+export {default as VcMiniBanner} from './VcMiniBanner/VcMiniBanner.vue';
+export {default as VcGalleryItem} from './VcGalleryItem/VcGalleryItem.vue';
+export {default as VcGalleryList} from './VcGalleryList/VcGalleryList.vue';
+export {default as VcBreadcrumbs} from './VcBreadcrumbs/VcBreadcrumbs.vue';
+export {default as VcPageHeader} from './page/elements/VcPageHeader.vue';

package/src/components/list/VcList/pattern/VcMobilePickerPattern.stories.js

@@ -272,6 +272,8 @@ MobileSingleSelectPickerWithAvatars.parameters = {
       </VcInputModal>
   </template>
   
+  <script>
+  
   /** 
     TODO: - to get this code running you need to
     1. Implement selected item - display the current selected item
@@ -305,6 +307,7 @@ MobileSingleSelectPickerWithAvatars.parameters = {
             },
         },
     }
+    </script>
 
     <style lang="scss" scoped>
         // Your css here

package/src/components/modal/elements/VcModalContainer.stories.js

@@ -11,6 +11,7 @@ const Template = (args, {argTypes}) => ({
                         :showCloseButton="showCloseButton"
                         :showFooterDivider="showFooterDivider" 
                         :showHeaderDivider="showHeaderDivider"
+                        :flavor="flavor"
                         :use-offset="useOffset"
                         :closeOnEsc="closeOnEsc" 
                         :data-qa="dataQa"
@@ -48,6 +49,7 @@ Playground.args = {
     closeOnEsc: true,
     showCloseButton: false,
     useOffset: false,
+    flavor: 'input',
     dataQa: 'VcModalContainer',
 }
 
@@ -60,6 +62,10 @@ export default {
             options: ['sm', 'md', 'lg', 'xl', 'responsive'],
             control: {type: 'radio'}
         },
+        flavor: {
+            options: ['input', 'confirm', 'notice', 'prominent'],
+            control: {type: 'radio'}
+        },
     },
     parameters: {
         design: {

package/src/components/modal/elements/VcModalContainer.vue

@@ -10,7 +10,7 @@
       <v-layout column :data-qa="dataQa">
         <header :class="{'showDivider': showHeaderDivider}">
           <slot name="header"/>
-          <VcButton class="VcModalCloseButton" v-if="displayCloseButton" icon fab small
+          <VcButton class="VcModalCloseButton" v-if="showCloseButton" icon fab small
                     @click="$emit('onCloseButtonClicked')">
             <template #prepend>
               <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -81,13 +81,6 @@ export default {
       default: 'VcModalContainer',
     }
   },
-  computed: {
-    displayCloseButton() {
-      if (this.flavor === 'input' && !this.$vuetify.breakpoint.mdAndUp)
-        return false;
-      return this.showCloseButton;
-    },
-  }
 }
 </script>
 
@@ -161,7 +154,7 @@ export default {
 
   footer {
     padding: var(--size-value3) var(--size-value4) var(--size-value3);
-    @include i-text-align(right);
+    text-align: end;
 
     &.showDivider {
       border-top: 1px solid rgba(0, 0, 0, 0.12);
@@ -177,7 +170,7 @@ export default {
     header {
       font-weight: var(--font-weight-xl);
       font-size: var(--font-size-medium2);
-      padding-bottom: 0px;
+      padding-bottom: 0;
       padding-top: var(--size-value10);
     }
 
@@ -217,7 +210,7 @@ export default {
       }
 
       .VcModalContainerContent {
-        min-height: 0px;
+        min-height: 0;
         margin-left: var(--size-value16);
         padding-right: var(--size-value16);
       }
@@ -235,12 +228,12 @@ export default {
     &.responsive {
       height: 100%;
       margin: 0;
-      border-bottom-left-radius: 0px;
-      border-bottom-right-radius: 0px;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
 
     .VcModalContainerContent {
-      padding: 0px;
+      padding: 0;
     }
   }
 }

package/src/components/page/elements/VcPageHeader.spec.js

@@ -0,0 +1,123 @@
+import '@testing-library/jest-dom'
+import VcPageHeader from "./VcPageHeader.vue";
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../../testing-library.config";
+import {fireEvent} from "@testing-library/dom";
+
+init();
+
+Vue.use(Vuetify)
+
+describe("VcPageHeader.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 with breadcrumbs and subtitle", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText, emitted} = renderWithVuetify(VcPageHeader, {
+            props: {
+                title: 'Payments',
+                subtitle: 'Payments subtitle',
+                breadcrumbs: [
+                    {
+                        text: 'item 1',
+                        disabled: false,
+                        href: 'item_1',
+                    },
+                    {
+                        text: 'item 2',
+                        disabled: false,
+                        href: 'item_2',
+                    },
+                    {
+                        text: 'item 3',
+                        disabled: false,
+                        href: 'item_3',
+                    },
+                ],
+            }
+        })
+
+        // 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('VcPageHeader');
+        expect(component).toBeInTheDocument();
+
+        const breadcrumbs = getByTestId('VcBreadcrumbs');
+        expect(breadcrumbs).toBeInTheDocument();
+
+        expect(getByText('Payments')).toBeInTheDocument();
+        expect(getByText('Payments subtitle')).toBeInTheDocument();
+
+        const backButton = getByTestId('VcPageHeader-backButton');
+        expect(backButton).toBeInTheDocument();
+        fireEvent.click(backButton);
+        expect(emitted().onBackClicked.length).toBe(1);
+
+        const saveButton = getByTestId('VcPageHeader-saveButton');
+        expect(saveButton).toBeInTheDocument();
+        fireEvent.click(saveButton);
+        expect(emitted().onSaveClicked.length).toBe(1);
+    });
+
+    it("has no breadcrumbs and disabled save button", () => {
+        const {queryByTestId, getByTestId} = renderWithVuetify(VcPageHeader, {
+            props: {
+                title: 'Payments',
+                buttonData: {save: {disabled: true}},
+            }
+        });
+
+        const breadcrumbs = queryByTestId('VcBreadcrumbs');
+        expect(breadcrumbs).toBe(null);
+
+        const saveButton = getByTestId('VcPageHeader-saveButton');
+        expect(saveButton).toBeDisabled();
+    });
+
+    it("has no back button", () => {
+        const {queryByTestId} = renderWithVuetify(VcPageHeader, {
+            props: {
+                title: 'Payments',
+                showBackButton: false,
+            }
+        });
+
+        const backButton = queryByTestId('VcPageHeader-backButton');
+        expect(backButton).not.toBeInTheDocument();
+    });
+
+});

package/src/components/page/elements/VcPageHeader.stories.js

@@ -0,0 +1,80 @@
+import VcPageHeaderCmp from './VcPageHeader';
+import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
+
+const baseProps = {
+    title: 'Payments',
+    subtitle: 'This page contains information on all your payments, past, present and future',
+    breadcrumbs: [
+        {
+            text: 'item 1',
+            disabled: false,
+            href: 'item_1',
+        },
+        {
+            text: 'item 2',
+            disabled: false,
+            href: 'item_2',
+        },
+        {
+            text: 'item 3',
+            disabled: false,
+            href: 'item_3',
+        },
+    ],
+    showBackButton: true,
+    buttonData: {},
+    dataQa: 'VcPageHeader',
+};
+
+const Template = (args, {argTypes}) => ({
+    components: {VcPageHeader: VcPageHeaderCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+      <VcPageHeader :title="title" 
+                    :subtitle="subtitle"
+                    :breadcrumbs="breadcrumbs"
+                    :show-back-button="showBackButton"
+                    :button-data="buttonData"
+                    @onBackClicked="onBackClicked"
+                    @onSaveClicked="onSaveClicked"/>
+      </div>`,
+})
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+    ...baseProps,
+}
+
+export const NoBreadcrumbs = Template.bind({});
+
+NoBreadcrumbs.args = {
+    ...baseProps,
+    breadcrumbs: undefined,
+}
+
+export const DisabledSaveButton = Template.bind({});
+
+DisabledSaveButton.args = {
+    ...baseProps,
+    buttonData: {save: {disabled: true}},
+}
+
+export default {
+    title: 'page / elements / VcPageHeader', // This will control the story sidebar position
+    id: 'VcPageHeader', // This will be the permanent link to this component
+    component: VcPageHeaderCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=12049%3A261603',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+        docs: {
+            page: VcBaseDocs,
+        },
+    },
+};

package/src/components/page/elements/VcPageHeader.vue

@@ -0,0 +1,96 @@
+<template>
+  <VcLayout align-center class="VcPageHeader">
+    <VcLayout column :data-qa="dataQa">
+      <VcBreadcrumbs v-if="breadcrumbs && breadcrumbs.length > 0" :items="breadcrumbs"/>
+      <span class="VcHeader--title">
+        <VcButton v-if="showBackButton" icon small
+                  :data-qa="`${dataQa}-backButton`"
+                  @click="$emit('onBackClicked')">
+          <template #prepend>
+            <VcIcon color="black" size="var(--font-size-small)">$chevron_left</VcIcon>
+          </template>
+        </VcButton>
+        {{ title }}
+      </span>
+      <span v-if="subtitle && subtitle.length > 0" class="VcHeader--subtitle">
+        {{ subtitle }}
+      </span>
+    </VcLayout>
+    <VcLayout justify-end>
+      <slot name="buttons">
+        <VcButton :icon-size="12"
+                  :disabled="buttonData.save && buttonData.save.disabled"
+                  prepend-default-icon prepend-icon="check_button"
+                  :data-qa="`${dataQa}-saveButton`"
+                  @click="$emit('onSaveClicked')">
+          {{ saveButtonLabel }}
+        </VcButton>
+      </slot>
+    </VcLayout>
+  </VcLayout>
+</template>
+
+<script>
+import VcBreadcrumbs from "@/components/VcBreadcrumbs/VcBreadcrumbs.vue";
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+import VcButton from "@/components/VcButton/VcButton.vue";
+
+export default {
+  name: "VcPageHeader",
+  components: {VcButton, VcIcon, VcLayout, VcBreadcrumbs},
+  props: {
+    breadcrumbs: {
+      type: Array,
+      validator: items => items.every(item => item.text && item.href)
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    subtitle: {
+      type: String,
+      default: ''
+    },
+    showBackButton: {
+      type: Boolean,
+      default: true,
+    },
+    buttonData: {
+      type: Object,
+      default: () => ({}),
+    },
+    dataQa: {
+      type: String,
+      default: 'VcPageHeader'
+    }
+  },
+  computed: {
+    saveButtonLabel() {
+      return this.buttonData.save?.label || this.$dst('ds.page.saveButton.label')
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.VcPageHeader {
+  margin-bottom: var(--size-value10);
+}
+
+.VcHeader--title {
+  font-size: var(--font-size-medium0);
+  font-weight: var(--font-weight-large2);
+  line-height: var(--size-value8);
+  color: var(--gray-darken-5);
+  margin-top: var(--size-value1);
+}
+
+.VcHeader--subtitle {
+  font-size: var(--font-size-x-small);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--size-value5);
+}
+
+</style>