@vcita/design-system 0.2.0 → 0.2.4

package/src/components/Wizard/VcStepsBar/VcStepsBar.spec.js

@@ -0,0 +1,122 @@
+import '@testing-library/jest-dom'
+import VcStepsBar from "./VcStepsBar";
+import Vuetify from 'vuetify'
+import {render, waitFor} from "@testing-library/vue";
+import init from "../../../../testing-library.config"
+
+init();
+
+const props = {
+    steps: [
+        {name: 'Step name 1'},
+        {name: 'Step name 2'},
+        {name: 'Step name 3'},
+        {name: 'Step name 4'}
+    ],
+}
+
+describe("VcStepsBar.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: {},
+            },
+            callback,
+        )
+    }
+
+    it("Basic stepsBar", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcStepsBar, {
+            props: {
+                ...props,
+                title: 'Title',
+                dataQa: 'vcStepsBar',
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const stepsBar = getByTestId('vcStepsBar');
+        expect(stepsBar).toBeInTheDocument();
+
+        const title = getByText('Title');
+        expect(title).toBeInTheDocument();
+
+        const lastStep = getByText('Step name 4');
+        expect(lastStep).toBeVisible()
+        expect(lastStep.parentElement).toHaveClass('v-stepper__step', 'v-stepper__step--inactive')
+
+        await waitFor(() => {
+            const firstStep = document.getElementById('step-1')
+            expect(firstStep).toBeVisible()
+            expect(firstStep).toHaveClass('v-stepper__step--active')
+        }, {timeout: 200})
+    });
+
+    it("Step forward ", async () => {
+        const {updateProps} = renderWithVuetify(VcStepsBar, {props})
+
+        await updateProps({currentStep: 2})
+        const firstStep = document.getElementById('step-1')
+        expect(firstStep).toHaveClass('v-stepper__step--complete')
+        const secondStep = document.getElementById('step-2')
+        expect(secondStep).toHaveClass('v-stepper__step--active')
+    });
+
+    it("3 steps froward and a step back (getting to 3rd step) ", async () => {
+        const {updateProps} = renderWithVuetify(VcStepsBar, {props})
+
+        let currentStep = 1
+        await updateProps({currentStep: ++currentStep})
+        await updateProps({currentStep: ++currentStep})
+        await updateProps({currentStep: ++currentStep})
+        await updateProps({currentStep: --currentStep})
+        const step1 = document.getElementById('step-1')
+        expect(step1).toHaveClass('v-stepper__step--complete')
+        const step2 = document.getElementById('step-2')
+        expect(step2).toHaveClass('v-stepper__step--complete')
+        const step4 = document.getElementById('step-4')
+        expect(step4).toHaveClass('v-stepper__step--inactive')
+        const step3 = document.getElementById('step-3')
+        expect(step3).toHaveClass('v-stepper__step--active', 'v-stepper__step--complete')
+    });
+
+    it("Passing the steps length won't fail ", async () => {
+        const {emitted, updateProps} = renderWithVuetify(VcStepsBar, {props})
+
+        await updateProps({currentStep: 5})
+        expect(emitted().input.length).toBe(1);
+        expect(emitted().input[0]).toEqual([4]);
+        await updateProps({currentStep: 1})
+        await updateProps({currentStep: 2})
+        const step4 = document.getElementById('step-4')
+        expect(step4).toHaveClass('v-stepper__step--complete')
+    });
+
+    it("Set the current step to low the the first won't fail", async () => {
+        const {emitted, updateProps} = renderWithVuetify(VcStepsBar, {props})
+
+        await updateProps({currentStep: -1})
+        expect(emitted().input.length).toBe(1);
+        expect(emitted().input[0]).toEqual([1]);
+    });
+
+    it("Skip to a targeted step (3rd) ", async () => {
+        const {updateProps} = renderWithVuetify(VcStepsBar, {props})
+
+        await updateProps({currentStep: 3})
+        const step3 = document.getElementById('step-3')
+        expect(step3).toHaveClass('v-stepper__step--active')
+    });
+});

package/src/components/Wizard/VcStepsBar/VcStepsBar.stories.js

@@ -0,0 +1,56 @@
+import VcStepsBarCmp from './VcStepsBar';
+import {VcButton} from "../../index";
+import {action} from "@storybook/addon-actions";
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcStepsBar: VcStepsBarCmp, VcButton},
+    props: Object.keys(argTypes),
+    data: () => ({
+        currentStep: 1
+    }),
+    template: `
+      <div>
+      <VcStepsBar
+        v-model.number="currentStep"
+        :title="title"
+        :steps="steps"
+        :data-qa="dataQa"
+        @input="onOutOfRange"
+      />
+      <v-layout justify-end style="margin: 24px">
+        <VcButton color="white" @click="() => --currentStep" style="margin-inline-end: 12px">Back</VcButton>
+        <VcButton @click="() => ++currentStep">Next</VcButton>
+      </v-layout>
+      </div>`,
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    title: 'Title',
+    steps: [
+        {name: 'Step name 1'},
+        {name: 'Step name 2'},
+        {name: 'Step name 3'},
+        {name: 'Step name 4'}
+    ],
+    onOutOfRange: action('Out of range'),
+    dataQa: 'vc-steps-bar',
+}
+
+export default {
+    title: 'Wizard / VcStepsBar',
+    id: 'VcStepsBar',
+    component: VcStepsBarCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=6724%3A68128',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/api/v-stepper/'
+        },
+    },
+};

package/src/components/Wizard/VcStepsBar/VcStepsBar.vue

@@ -0,0 +1,190 @@
+<template>
+  <div>
+    <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
+          :key="`step-${index + 1}`"
+          :id="`step-${index + 1}`"
+          :complete="lastCompleted > index + 1"
+          :step="index + 1"
+        >
+          {{ step.name }}
+        </v-stepper-step>
+      </template>
+    </v-stepper>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VcStepsBar",
+  model:{
+    prop: 'currentStep',
+  },
+  props: {
+    currentStep: {
+      type: Number,
+      default: 1,
+    },
+    steps: {
+      type: Array,
+      validator: steps => steps.every(step => step.name),
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    dataQa: {
+      type: String,
+      default: 'vc-steps-bar'
+    }
+  },
+  data() {
+    return {
+      lastCompleted: 0,
+      FIRST_STEP: 1
+    }
+  },
+  methods: {
+    nextStep() {
+      if (this.lastCompleted < this.currentStep) {
+        this.lastCompleted = this.currentStep
+      }
+      if (this.currentStep > this.steps.length) {
+        this.shareStep(this.steps.length)
+      }
+    },
+    shareStep(step) {
+      this.$emit('input', step)
+    }
+  },
+  watch: {
+    currentStep: {
+      handler(newVal, oldVal) {
+        if (newVal > oldVal) {
+          this.nextStep()
+        }
+        if (newVal < this.FIRST_STEP) {
+          this.shareStep(this.FIRST_STEP)
+        }
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/../styles/variables.scss';
+
+.vc-stepper.v-stepper {
+  padding-block-start: var(--size-value4);
+  padding-inline-start: var(--size-value10);
+
+  .stepper-title {
+    margin-block-end: var(--size-value6);
+    font-weight: var(--font-weight-large2);
+    font-size: var(--font-size-medium);
+    letter-spacing: 0.03em;
+    color: var(--gray-darken-5);
+  }
+
+  .v-stepper__step {
+    padding: var(--size-value0);
+    width: fit-content;
+    align-items: flex-start;
+    margin-block-end: var(--size-value1);
+
+    ::v-deep {
+      .v-stepper__label {
+        padding-inline-end: var(--size-value6);
+        text-shadow: none;
+        font-size: var(--font-size-small2);
+        letter-spacing: 0.01em;
+        line-height: var(--size-value6);
+        padding-bottom: var(--size-value7);
+      }
+
+      span.v-stepper__step__step {
+        height: var(--size-value5);
+        min-width: var(--size-value5);
+        width: var(--size-value5);
+        margin-inline-end: var(--size-value3);
+        margin-inline-start: var(--size-value0);
+        margin-block: 2px;
+        font-size: var(--font-size-xx-small);
+        font-weight: var(--font-weight-medium2);
+      }
+    }
+
+    // Default
+    &:not(.v-stepper__step--active):not(.v-stepper__step--complete) {
+      ::v-deep {
+        span.v-stepper__step__step {
+          background-color: var(--gray-lighten-2);
+          color: var(--gray-darken-2);
+        }
+
+        .v-stepper__label {
+          color: var(--gray-darken-4);
+        }
+      }
+    }
+
+    // Active
+    &.v-stepper__step--active:not(.v-stepper__step--complete) {
+      ::v-deep {
+        span.v-stepper__step__step {
+          background-color: var(--v-secondary-base) !important;
+        }
+
+        .v-stepper__label {
+          color: var(--gray-darken-5);
+          font-weight: var(--font-weight-large);
+        }
+      }
+    }
+
+    // Completed
+    &.v-stepper__step--complete {
+      ::v-deep {
+        span.v-stepper__step__step {
+          background-color: var(--green) !important;
+
+          i {
+            font-size: var(--size-value3);
+          }
+        }
+
+        .v-stepper__label {
+          color: var(--gray-darken-5);
+        }
+      }
+
+      &.v-stepper__step--active {
+        ::v-deep {
+          .v-stepper__label {
+            font-weight: var(--font-weight-large);
+          }
+        }
+      }
+    }
+
+    &:not(:last-child) {
+      &::after {
+        content: "";
+        border-inline-start: 2px solid var(--gray-lighten-1);
+        position: absolute;
+        top: 0;
+        margin-inline-start: 9px;
+        height: -webkit-fill-available;
+        margin-top: var(--size-value7);
+      }
+    }
+  }
+}
+</style>

package/src/components/index.js

@@ -10,6 +10,9 @@ 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 VcProgressCircular} from './VcProgressCircular/VcProgressCircular.vue';
 // export {default as VcAutoComplete} from './VcAutoComplete/VcAutoComplete.vue';
 export {default as VcButton} from './VcButton/VcButton.vue';
 export {default as VcButtonGroup} from './VcButtonGroup/VcButtonGroup.vue';
@@ -21,7 +24,6 @@ export {default as VcSwitch} from './VcSwitch/VcSwitch.vue';
 export {default as VcTextField} from './VcTextField/VcTextField.vue';
 export {default as VcAvatar} from './VcAvatar/VcAvatar.vue';
 export {default as VcTextArea} from './VcTextArea/VcTextArea.vue';
-export {default as VcSvg} from '../../init/VcSvg/VcSvg.vue';
 export {default as VcToast} from './VcToast/VcToast.vue';
 export {default as VcCard} from './VcCard/VcCard.vue';
 export {default as VcCheckbox} from './VcCheckbox/VcCheckbox.vue';
@@ -30,3 +32,5 @@ export {default as VcFocusArea} from './VcFocusArea/VcFocusArea.vue';
 export {default as VcLink} from './VcLink/VcLink.vue';
 export {default as VcListItem} from './list/VcListItem/VcListItem.vue';
 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';

package/src/components/list/VcListItem/VcListItem.vue

@@ -66,9 +66,7 @@ export default {
     opacity: 0;
     transition: opacity 300ms;
     flex-grow: 0;
-    @include md-and-up {
-      min-width: 150px;
-    }
+    align-items: center;
 
     .three-dots {
       border-radius: 1000px;