@vcita/design-system 0.2.5 → 0.2.6

package/package.json

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

package/src/components/index.js

@@ -10,8 +10,8 @@ export {default as VcIconWithTooltip} from './VcIconWithTooltip/VcIconWithToolti
 export {default as VcBottomActions} from './VcBottomActions/VcBottomActions.vue';
 export {default as VcActionList} from './VcActionList/VcActionList.vue';
 export {default as VcActions} from './VcActions/VcActions.vue';
-export {default as VcStepsBar} from './Wizard/VcStepsBar/VcStepsBar.vue';
-export {default as VcMobileWizardProgress} from './Wizard/VcMobileWizardProgress/VcMobileWizardProgress.vue';
+export {default as VcStepsBar} from './wizard/VcStepsBar/VcStepsBar.vue';
+export {default as VcMobileWizardProgress} from './wizard/VcMobileWizardProgress/VcMobileWizardProgress.vue';
 export {default as VcProgressCircular} from './VcProgressCircular/VcProgressCircular.vue';
 // export {default as VcAutoComplete} from './VcAutoComplete/VcAutoComplete.vue';
 export {default as VcButton} from './VcButton/VcButton.vue';
@@ -35,3 +35,4 @@ export {default as VcGroupHeader} from './list/VcGroupHeader/VcGroupHeader.vue';
 export {default as VcEmptyState} from './VcEmptyState/VcEmptyState.vue';
 export {default as VcSvg} from './VcSvg/VcSvg.vue';
 export {default as VcBanner} from './VcBanner/VcBanner.vue'
+export {default as VcWizardCtaContainer} from './wizard/VcWizardCtaContainer/VcWizardCtaContainer.vue';

package/src/components/{Wizard → wizard}/VcMobileWizardProgress/VcMobileWizardProgress.vue

@@ -68,6 +68,10 @@ export default {
 @import '@/../styles/variables.scss';
 
 .vc-mobile-wizard-progress {
+  padding: var(--size-value4);
+  background-color: var(--neutral-lighten-3);
+  width: 100%;
+  max-height: 84px;
   .titles-container {
     margin: var(--size-value0) var(--size-value4);
 

package/src/components/{Wizard/VcSteperContant → wizard/VcSteperContent}/VcStepperContent.vue

@@ -1,28 +1,31 @@
 <template>
-  <v-stepper class="vc-stepper-content"
-             v-model="currentStep"
-             :data-qa="dataQa">
+  <vc-layout column justify-start class="stepper-content-wrapper">
     <VcLayout v-if="!isLoading" column class="stepper-header">
       <div class="content-stepper-title">{{ getStepName }}</div>
       <div class="content-stepper-description" v-html="getStepDescription"></div>
     </VcLayout>
-    <v-stepper-items>
-      <template v-for="(step, index) in steps">
-        <v-stepper-content :step="index + 1">
-          <VcLayout column :justify-center="isLoading">
-            <VcLoader :size="LOADER_SIZE" :color="LOADER_COLOR" v-show="isLoading"/>
-            <slot :name="`alert-${index + 1}`"></slot>
-            <component v-show="!isLoading"
-                       :is="step.component"
-                       v-bind="step.props"
-                       v-on="step.event"
-                       :data-qa="getStepQa(index)"
-            />
-          </VcLayout>
-        </v-stepper-content>
-      </template>
-    </v-stepper-items>
-  </v-stepper>
+    <v-stepper class="vc-stepper-content"
+               v-model="currentStep"
+               :data-qa="dataQa">
+      <v-stepper-items>
+          <v-stepper-content v-for="(step, index) in steps" :key="`step-${index}`" :step="index + 1">
+            <VcLayout v-if="currentStep === index + 1" class="layout-content" column :justify-center="isLoading">
+              <VcLoader :size="LOADER_SIZE" :color="LOADER_COLOR" v-show="isLoading"/>
+              <slot :name="`alert-${index + 1}`"></slot>
+              <component
+                  v-show="!isLoading"
+                  :is="step.component"
+                  v-bind="{...wizardData, ...step.props}"
+                  v-on="step.event"
+                  @submit="data => $emit('submit', data)"
+                  :data-qa="getStepQa(index)"
+              />
+            </VcLayout>
+          </v-stepper-content>
+      </v-stepper-items>
+    </v-stepper>
+  </vc-layout>
+
 </template>
 
 <script>
@@ -35,6 +38,10 @@ export default {
     prop: 'currentStep',
   },
   props: {
+    wizardData: {
+      type: Object,
+      required: true,
+    },
     currentStep: {
       type: Number,
       default: 1,
@@ -44,14 +51,6 @@ export default {
       validator: steps => steps.every(step => step.component && step.name),
       required: true
     },
-    title: {
-      type: String,
-      default: ''
-    },
-    description: {
-      type: String,
-      default: ''
-    },
     dataQa: {
       type: String,
       default: 'vc-content-wizard'
@@ -116,34 +115,49 @@ export default {
 <style lang="scss" scoped>
 @import '@/../styles/variables.scss';
 @import "@/../src/scss/mixins.scss";
+.stepper-content-wrapper {
+  max-height: 100%;
+  width: 100%;
+  padding-bottom: var(--size-value6);
 
-.vc-stepper-content.v-stepper {
-  padding-block: var(--size-value3);
-  padding-inline: var(--size-value10);
-
-  .stepper-header {
-    margin-block-end: var(--size-value7);
-    .content-stepper- {
-      &title {
-        letter-spacing: 0.01em;
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-large);
-        line-height: var(--size-value8);
-        color: var(--gray-darken-5);
+}
+.layout-content {
+  @include md-and-up {
+    padding-block-start: var(--size-value3);
+    padding-inline: var(--size-value10);
+  }
+}
+.stepper-header {
+  margin-block-end: var(--size-value7);
+  @include md-and-up {
+    padding-block-start: var(--size-value3);
+    padding-inline: var(--size-value10);
+  }
+  .content-stepper- {
+    &title {
+      letter-spacing: 0.01em;
+      font-size: var(--font-size-medium);
+      font-weight: var(--font-weight-large);
+      line-height: var(--size-value8);
+      color: var(--gray-darken-5);
 
-        @include md-and-up {
-          font-size: var(--font-size-medium2);
-        }
+      @include md-and-up {
+        font-size: var(--font-size-medium2);
       }
+    }
 
-      &description {
-        font-size: var(--font-size-x-small);
-        line-height: var(--size-value5);
-        color: var(--gray-darken-4);
-      }
+    &description {
+      font-size: var(--font-size-x-small);
+      line-height: var(--size-value5);
+      color: var(--gray-darken-4);
     }
   }
-
+}
+.vc-stepper-content.v-stepper {
+  width: 100%;
+  box-shadow: none;
+  max-height: 100%;
+  overflow: auto;
   ::v-deep {
     .v-stepper__items .v-stepper__content {
       padding: 0;

package/src/components/{Wizard → wizard}/VcStepsBar/VcStepsBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="vc-stepper-container" data-qa="vc-steps-bar">
     <v-stepper class="vc-stepper"
                v-model="currentStep"
                vertical
@@ -80,11 +80,13 @@ export default {
 
 <style lang="scss" scoped>
 @import '@/../styles/variables.scss';
-
-.vc-stepper.v-stepper {
+.vc-stepper-container {
+  height: 100%;
   padding-block-start: var(--size-value4);
   padding-inline-start: var(--size-value10);
-
+}
+.vc-stepper.v-stepper {
+  box-shadow: none;
   .stepper-title {
     margin-block-end: var(--size-value6);
     font-weight: var(--font-weight-large2);

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

@@ -0,0 +1,155 @@
+import '@testing-library/jest-dom'
+import VcWizard from "./VcWizard";
+import Vuetify from 'vuetify'
+import {getByText, render} from "@testing-library/vue";
+import {within} from '@testing-library/dom'
+
+import init from "../../../../testing-library.config"
+import userEvent from "@testing-library/user-event";
+
+init();
+
+const defaultSteps = [
+    {
+        name: 'Step name 1',
+        description: 'A description for step 1',
+        component: () => import('@/components/VcTextArea/VcTextArea.vue'),
+        props: {
+            placeholder: '"It\'s Not Who I Am Underneath, But What I Do, That Defines Me."\n'
+        }
+    },
+    {
+        name: 'Step name 2',
+        component: () => import('./demoWizardPage'),
+        props: {
+
+        },
+        nextStepEnabledRules: [val => val.textFieldValue === '123'],
+    },
+    {
+        isNextButtonDisabled: false,
+        name: 'Step name 3',
+        description: 'A description for step 3',
+        component: () => import('@/components/VcAlert/VcAlert.vue'),
+        props: {
+            type: 'info',
+            headerText: 'Header:',
+            bodyText: `I learned long ago, never to wrestle with a pig. 
+        You get dirty, and besides, the pig likes it. <a href="https://images.squarespace-cdn.com/content/v1/5b71e83f1aef1d3e4bbd03f2/1534201222036-JHLKSIPN8AOXD4XNLRAN/Esther_main_image_1.jpg?format=2500w" 
+        target="_blank">Link</a>`,
+            closeButton: true,
+        }
+    },
+    {
+        isBackDisplayed: false,
+        name: 'Step name 4',
+        component: () => import('@/components/VcEmptyState/VcEmptyState.vue'),
+        props: {
+            icon: require('@/stories/assets/rabbit.svg'),
+            title: 'Title',
+            subtitle: 'Subtitle',
+            content: 'content text',
+            button: 'Reload',
+            linkLabel: 'link label',
+            linkUrl: 'www.google.com'
+        }
+    },
+]
+describe("VcWizard.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("Basic VcWizard", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcWizard, {
+            props: {
+                steps: defaultSteps,
+                dataQa: 'vcWizard',
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+    });
+
+    it("moves forward a step, updates text button, and then back successfully ", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId, findByTestId, queryByText} = renderWithVuetify(VcWizard, {
+            props: {
+                steps: defaultSteps,
+                dataQa: 'vcWizard',
+            }
+        })
+        const nextButton = getByTestId("vcWizard-wizard-next-button")
+        await userEvent.click(nextButton);
+        const stepperElement = getByTestId("vc-steps-bar")
+
+        let activeStep = await within(stepperElement).findByText("Step name 2")
+        expect(activeStep.parentElement).toHaveClass("v-stepper__step--active")
+
+        const demoButton = await findByTestId('test-button')
+        await userEvent.click(demoButton);
+        let backButton = queryByText("new text")
+
+        expect(backButton).toBeTruthy()
+
+        await userEvent.click(backButton);
+        activeStep = await within(stepperElement).findByText("Step name 1")
+        expect(activeStep.parentElement).toHaveClass("v-stepper__step--active")
+    });
+    it("moves forward but not longer than number of possible steps ", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {emitted, getByTestId, queryByTestId, findByTestId} = renderWithVuetify(VcWizard, {
+            props: {
+                steps: defaultSteps,
+                dataQa: 'vcWizard',
+            }
+        })
+        const stepperElement = getByTestId("vc-steps-bar")
+
+        let nextButton = getByTestId("vcWizard-wizard-next-button")
+        await userEvent.click(nextButton);
+
+        let activeStep = await within(stepperElement).findByText("Step name 2")
+        expect(activeStep.parentElement).toHaveClass("v-stepper__step--active")
+        expect(nextButton).toHaveClass('v-btn--disabled')
+
+        const textInput = await findByTestId('text-input')
+        await userEvent.type(textInput, "1");
+        await userEvent.type(textInput, "2");
+        await userEvent.type(textInput, "3");
+        nextButton = await findByTestId("vcWizard-wizard-next-button")
+
+        expect(nextButton).not.toHaveClass("v-btn--disabled")
+
+        await userEvent.click(nextButton);
+        await userEvent.click(nextButton);
+        await userEvent.click(nextButton);
+
+        activeStep = await within(stepperElement).findByText("Step name 4")
+        expect(activeStep.parentElement).toHaveClass("v-stepper__step--active")
+
+        expect(emitted().submit.length).toBe(1);
+        const backButton = queryByTestId("vcWizard-wizard-back-button")
+        expect(backButton).toBe(null)
+    });
+
+
+});

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

@@ -0,0 +1,115 @@
+import VcWizardCmp from './VcWizard';
+import {action} from "@storybook/addon-actions";
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcWizard: VcWizardCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        currentStep: 1
+    }),
+    template: `
+      <div>
+          <VcWizard
+            v-model.number="currentStep"
+            :steps="steps"
+            @submit="onSubmit"
+            :data-qa="dataQa"
+          />
+      </div>`,
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    onSubmit: action('submit'),
+    steps: [
+        {
+            name: 'Step name 1',
+            description: 'A description for step 1',
+            component: () => import('@/components/VcTextArea/VcTextArea.vue'),
+            props: {
+                placeholder: '"It\'s Not Who I Am Underneath, But What I Do, That Defines Me."\n'
+            }
+        },
+        {
+            isNextButtonDisabled: true,
+            name: 'Step name 2',
+            component: () => import('./demoWizardPage'),
+            nextStepEnabledRules: [val => val.textFieldValue === '123'],
+            props: {
+                numOfButtons: 4,
+                buttons: [{
+                    id: 'today',
+                    label: 'Today',
+                    disabled: false
+                },
+                    {
+                        id: 'yesterday',
+                        label: 'Yesterday',
+                        disabled: false
+                    },
+                    {
+                        id: '7days',
+                        label: '7 days',
+                        disabled: false
+                    },
+                    {
+                        id: '3months',
+                        label: '3 months',
+                        disabled: false
+                    }],
+            }
+        },
+        {
+            name: 'Step name 3',
+            description: 'A description for step 3',
+            component: () => import('@/components/VcAlert/VcAlert.vue'),
+            props: {
+                type: 'info',
+                headerText: 'Header:',
+                bodyText: `I learned long ago, never to wrestle with a pig. 
+        You get dirty, and besides, the pig likes it. <a href="https://images.squarespace-cdn.com/content/v1/5b71e83f1aef1d3e4bbd03f2/1534201222036-JHLKSIPN8AOXD4XNLRAN/Esther_main_image_1.jpg?format=2500w" 
+        target="_blank">Link</a>`,
+                closeButton: true,
+            }
+        },
+        {
+            name: 'Step name 4',
+            component: () => import('@/components/VcEmptyState/VcEmptyState.vue'),
+            props: {
+                icon: require('@/stories/assets/rabbit.svg'),
+                title: 'Title',
+                subtitle: 'Subtitle',
+                content: 'content text',
+                button: 'Reload',
+                linkLabel: 'link label',
+                linkUrl: 'www.google.com'
+            }
+        },
+    ],
+    dataQa: 'vc-wizard',
+}
+
+export default {
+    title: 'Wizard / VcWizard',
+    id: 'Vcwizard',
+    component: VcWizardCmp,
+    argTypes: {
+        value: {
+            table: {
+                disable: true,
+            },
+        }
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=6718%3A79786',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/progress-circular'
+        },
+    },
+};

package/src/components/wizard/VcWizard/VcWizard.vue

@@ -0,0 +1,144 @@
+<template>
+  <v-layout class="vc-wizard" column align-start justify-start>
+    <VcMobileWizardProgress
+        v-if="!$vuetify.breakpoint.mdAndUp"
+        :dataQa="dataQa"
+        :currentStep="currentStep"
+        :steps="wizardSteps"/>
+    <VcStepsBar
+        v-else
+        :currentStep="currentStep"
+        :steps="wizardSteps"
+        :title="title"
+        :dataQa="dataQa"
+    />
+    <VcStepperContent
+        :wizardData="wizardData"
+        @submit="handleSubmit"
+        :currentStep="currentStep"
+        :steps="wizardSteps"
+        :dataQa="dataQa"
+    />
+    <VcWizardCtaContainer
+        :isBackDisplayed="isBackDisplayed"
+        :isNextButtonDisabled="isNextButtonDisabled"
+        :backButtonLabel="currentStepObj.backButtonLabel || $dst('ds.wizard.back')"
+        :nextButtonLabel="currentStepObj.nextButtonLabel || $dst('ds.wizard.next')"
+        @onBackPressed="goBackOneStep"
+        @onNextPressed="goForwardOneStep"
+        :dataQa="dataQa"
+    />
+  </v-layout>
+</template>
+
+<script>
+import VcStepsBar from "@/components/wizard/VcStepsBar/VcStepsBar.vue"
+import VcStepperContent from "@/components/wizard/VcSteperContent/VcStepperContent.vue"
+import VcMobileWizardProgress from "@/components/wizard/VcMobileWizardProgress/VcMobileWizardProgress.vue"
+import VcWizardCtaContainer from "@/components/wizard/VcWizardCtaContainer/VcWizardCtaContainer.vue"
+
+export default {
+  name: "VcWizard",
+  components: {VcStepsBar, VcStepperContent, VcMobileWizardProgress, VcWizardCtaContainer},
+  props: {
+    steps: {
+      type: [Array],
+      validator: steps => steps.every(step => step.name),
+      required: true
+    },
+    dataQa: {
+      type: String,
+      default: 'wizard'
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      currentStep: 1,
+      wizardSteps: [],
+      wizardStepsData: {},
+    }
+  },
+  created() {
+    this.init();
+  },
+  methods: {
+    init() {
+      this.currentStep = 1
+      this.wizardSteps = this.steps.slice()
+    },
+    goBackOneStep() {
+      this.wizardStepsData[this.currentStep] = undefined
+      this.$set(this.wizardStepsData, this.currentStep, undefined);
+      this.currentStep--;
+    },
+    handleSubmit(data) {
+      const stepData = data.stepData || {}
+      const wizardData = data.wizardData || {}
+      const newStepData = { ...this.currentStepObj, ...stepData};
+      const newWizardStepData = {...this.wizardStepsData[this.currentStep], ...wizardData}
+      this.$set(this.wizardStepsData, this.currentStep, newWizardStepData);
+      this.wizardSteps.splice(this.currentStep - 1, 1, newStepData)
+    },
+    goForwardOneStep() {
+      if(this.currentStep < this.wizardSteps.length) {
+        this.currentStep++;
+      } else {
+        this.$emit('submit', this.wizardSteps)
+      }
+    },
+  },
+  computed: {
+    wizardData() {
+      return Object.values(this.wizardStepsData).reduce((acc, currentValue) => ({ ...acc, ...currentValue}), {})
+    },
+    currentStepObj() {
+      return this.wizardSteps[this.currentStep - 1]
+    },
+    isBackDisplayed() {
+      return this.currentStepObj.isBackDisplayed !== undefined ? this.currentStepObj.isBackDisplayed : this.currentStep > 1
+    },
+    isNextButtonDisabled() {
+      if( this.currentStepObj.nextStepEnabledRules ) {
+        return this.currentStepObj.nextStepEnabledRules.every(rule => !rule(this.wizardData))
+      } else {
+        return this.currentStepObj.isNextButtonDisabled !== undefined ? this.currentStepObj.isNextButtonDisabled : false
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/../styles/variables.scss';
+@import "@/../src/scss/mixins.scss";
+
+.vc-wizard {
+  height: 100%;
+  @include md-and-up {
+    display: grid;
+    grid-template-columns: minmax(200px, 1fr) 3fr;
+    grid-template-rows: 400px 80px;
+    grid-column-gap: var(--size-value10);
+    grid-row-gap: 0px;
+  }
+  @include lg-and-up {
+    grid-column-gap: var(--size-value20);
+  }
+}
+
+.vc-stepper-container {
+  grid-area: 1 / 1 / 3 / 2;
+  border-inline-end: 1px solid #E0E0E0;
+}
+.wizard-cta-container {
+  grid-area: 2 / 2 / 3 / 3;
+
+}
+.stepper-content-wrapper {
+  grid-area: 1 / 2 / 2 / 3;
+}
+</style>

package/src/components/wizard/VcWizard/demoWizardPage.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-layout class="demo-page">
+    <v-btn @click="$emit('submit', {stepData: {backButtonLabel: 'new text'}} )" data-qa="test-button" class="demo-page-button">
+      demo button text
+    </v-btn>
+    <VcTextArea data-qa="text-input" class="text-input" placeholder="enter 123 to proceed" @input="(data) => $emit('submit', {wizardData: {textFieldValue: data}} )" >
+
+    </VcTextArea>
+    <v-layout>
+      this will contain the text field value after it propagated up and down through the wizard {{textFieldValue}}
+    </v-layout>
+  </v-layout>
+</template>
+
+<script>
+import VcTextArea from "@/components/VcTextArea/VcTextArea.vue";
+
+export default {
+  props: {
+    textFieldValue: {
+      type: String,
+      default: "",
+    },
+  },
+  components:{
+    VcTextArea
+  }
+}
+</script>