@vcita/design-system 0.2.5 → 0.2.7

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

@@ -0,0 +1,100 @@
+import '@testing-library/jest-dom'
+import VcWizardCtaContainer from "./VcWizardCtaContainer.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../../testing-library.config";
+import userEvent from "@testing-library/user-event";
+
+init();
+
+describe("VcWizardCtaContainer.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("mounts", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcWizardCtaContainer, {
+            props: {
+                isBackDisplayed: true,
+                isNextButtonDisabled: false,
+                backButtonLabel: "back",
+                nextButtonLabel: "next",
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+    });
+
+    it("displays correctly", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByText, getByTestId} = renderWithVuetify(VcWizardCtaContainer, {
+            props: {
+                isBackDisplayed: true,
+                isNextButtonDisabled: false,
+                backButtonLabel: "back",
+                nextButtonLabel: "next",
+            }
+        })
+
+        expect(getByTestId("wizard-back-button")).toBeInTheDocument()
+        expect(getByTestId("wizard-next-button")).toBeInTheDocument()
+        expect(getByText("back")).toBeInTheDocument();
+        expect(getByText("next")).toBeInTheDocument();
+        // Expect options: https://github.com/testing-library/jest-dom
+    });
+    it("removes back button correctly and disables the next button", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId, queryByTestId, emitted } = renderWithVuetify(VcWizardCtaContainer, {
+            props: {
+                isBackDisplayed: false,
+                isNextButtonDisabled: true,
+                backButtonLabel: "back",
+                nextButtonLabel: "next",
+            }
+        })
+        const nextButton = getByTestId("wizard-next-button")
+        const backButton = queryByTestId("wizard-back-button")
+        expect(backButton).toBeFalsy()
+        expect(nextButton).toHaveClass('v-btn--disabled');
+        await userEvent.click(nextButton);
+        expect(emitted().onNextPressed).toBeFalsy();
+        // Expect options: https://github.com/testing-library/jest-dom
+    });
+    it("emits events correctly", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {emitted, getByTestId} = renderWithVuetify(VcWizardCtaContainer, {
+            props: {
+                isBackDisplayed: true,
+                isNextButtonDisabled: false,
+                backButtonLabel: "back",
+                nextButtonLabel: "next",
+            }
+        })
+        const nextButton = getByTestId("wizard-next-button")
+        const backButton = getByTestId("wizard-back-button")
+        // Expect options: https://github.com/testing-library/jest-dom
+        await userEvent.click(nextButton);
+        await userEvent.click(backButton);
+        expect(emitted().onBackPressed.length).toBe(1);
+        expect(emitted().onNextPressed.length).toBe(1);
+    });
+
+
+
+});

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

@@ -0,0 +1,67 @@
+import VcWizardCtaContainerCmp from './VcWizardCtaContainer';
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcWizardCtaContainer: VcWizardCtaContainerCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div
+      
+      >
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <VcWizardCtaContainer
+            style="border: solid 1px black; min-height: 80px; padding: 20px;"
+            :isBackDisplayed="isBackDisplayed"
+            :isNextButtonDisabled="isNextButtonDisabled"
+            :backButtonLabel="backButtonLabel"
+            :nextButtonLabel="nextButtonLabel"
+        >
+        </VcWizardCtaContainer>
+      </div>`
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    isBackDisplayed: true,
+    isNextButtonDisabled: false,
+    backButtonLabel: "back",
+    nextButtonLabel: "next",
+}
+
+export default {
+    title: 'Wizard / wizard cta container',
+    id: 'VcWizardCtaContainer',
+    component: VcWizardCtaContainerCmp,
+    argTypes: {
+        backButtonLabel: {
+            options: ['back', 'revert'],
+            control: {type: 'radio'}
+        },
+        nextButtonLabel: {
+            options: ['next', 'confirm'],
+            control: {type: 'radio'}
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=6718%3A80517',
+        },
+        status: {
+            type: 'releaseCandidate', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/buttons/', // will make the tag a link
+        }
+    },
+};

package/src/components/wizard/VcWizardCtaContainer/VcWizardCtaContainer.vue

@@ -0,0 +1,95 @@
+<template>
+  <VcLayout class="wizard-cta-container" align-center justify-end>
+    <vc-button
+        class="wizard-cta-button back-button"
+        color="white"
+        :pill="true"
+        :data-qa="`${dataQa ? dataQa + '-' : ''}wizard-back-button`"
+        v-if="isBackDisplayed"
+        @click="$emit('onBackPressed')"
+    >
+      {{backButtonLabel}}
+    </vc-button>
+    <vc-button
+        class="wizard-cta-button next-button"
+        :pill="true"
+        :data-qa="`${dataQa ? dataQa + '-' : ''}wizard-next-button`"
+        :disabled="isNextButtonDisabled"
+        @click="$emit('onNextPressed')"
+    >
+      {{nextButtonLabel}}
+    </vc-button>
+  </VcLayout>
+</template>
+
+<script>
+import VcButton from "@/components/VcButton/VcButton.vue";
+import VcLayout from "@/components/VcLayout/VcLayout.vue";
+
+export default {
+  name: "VcWizardCtaContainer",
+  components: {
+    VcButton,
+    VcLayout,
+  },
+  props: {
+    isBackDisplayed: {
+      type: Boolean,
+      required: true
+    },
+    isNextButtonDisabled: {
+      type: Boolean,
+      required: true
+    },
+    backButtonLabel: {
+      type: String,
+      required: true
+    },
+    nextButtonLabel: {
+      type: String,
+      required: true
+    },
+    dataQa: {
+      type: String,
+      default: '',
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+@import "src/scss/i18n-mixins";
+@import "src/scss/mixins";
+@import '@/../styles/variables.scss';
+.wizard-cta-container {
+  background-color: white;
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: var(--size-value18);
+  max-height: var(--size-value18);
+  padding: var(--size-value3) var(--size-value4);
+  border-top: 1px solid var(--gray-lighten-1);
+  @include md-and-up {
+    border-top: revert;
+    position: static;
+    padding: var(--size-value5);
+    width: 100%;
+    transform: revert;
+  }
+}
+.wizard-cta-button {
+  flex: 1;
+  min-height: var(--size-value12);
+  @include md-and-up {
+    flex: revert;
+    min-height: var(--size-value10);
+  }
+}
+
+.wizard-cta-button + .wizard-cta-button {
+  margin-inline-start: var(--size-value3);
+}
+</style>

package/src/scss/mixins.scss

@@ -1,10 +1,16 @@
 $mdUp: 960px;
+$lgUp: 972px;
 
 @mixin md-and-up {
   @media screen and (min-width: $mdUp) {
     @content;
   }
 }
+@mixin lg-and-up {
+  @media screen and (min-width: $lgUp) {
+    @content;
+  }
+}
 
 @mixin  hide-scrollbar {
   -webkit-overflow-scrolling: touch;