@vcita/design-system 0.2.7 → 0.3.11

package/src/components/VcSwitch/VcSwitch.vue

@@ -1,21 +1,27 @@
 <template>
+<div class="switchContainer" :class="{'with-icon': icon}">
   <v-switch inset hide-details
             class="VcSwitch"
-            :class="{'is-active': value,}"
+            :class="{'is-active': value, 'with-icon': icon}"
             :label="label"
             :ripple="ripple"
             :input-value="value"
             :color="color"
             :disabled="disabled"
-            @change="val => $emit('input', Boolean(val))">
+            @change="onChange">
     <template #label>
       <slot name="label"/>
     </template>
   </v-switch>
+  <VcIcon v-if="icon&value" class="VcSwitchIcon VcSwitchIconV" size="10">$check_button</VcIcon>
+  <VcIcon v-if="icon&!value" class="VcSwitchIcon VcSwitchIconX" size="10">$close_button</VcIcon>
+</div>
 </template>
 
 <script>
+import VcIcon from '../VcIcon/VcIcon.vue'
 export default {
+  components: { VcIcon },
   name: "VcSwitch",
   props: {
     value: {
@@ -37,85 +43,189 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    icon: {
+      type: Boolean,
+      default: false
     }
   },
+  methods:{
+    onChange: function (id) {
+      this.$emit('input', id)
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss/_i18n-mixins.scss";
 
-.VcSwitch {
-  padding: 0;
-  margin: 0;
+.switchContainer{
+  
+  & .VcSwitch {
+    padding: 0;
+    margin: 0;
 
-  ::v-deep {
-    label {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
-      line-height: var(--size-value6);
-      color: rgba(0, 0, 0, 0.87);
-    }
+    ::v-deep {
+      label {
+        font-size: var(--font-size-small);
+        font-weight: var(--font-weight-medium);
+        line-height: var(--size-value6);
+        color: rgba(0, 0, 0, 0.87);
+      }
 
-    input {
-      height: var(--size-value5);
-    }
+      input {
+        height: var(--size-value5);
+      }
 
-    .v-input--selection-controls__input {
-      @include i-margin-mirror(0, var(--size-value3));
-      height: var(--size-value5);
-      width: var(--size-value8);
-    }
-    .v-input--switch__track {
-      top: 0;
-      @include i-position-mirror(left, 0);
+      .v-input--selection-controls__input {
+        @include i-margin-mirror(0, var(--size-value3));
+        height: var(--size-value5);
+        width: var(--size-value8);
+      }
+      .v-input--switch__track {
+        top: 0;
+        @include i-position-mirror(left, 0);
+      }
+
+      .v-input--selection-controls__ripple {
+        @include i-position-mirror(left, -10px);
+        height: 25px;
+        width: 25px;
+      }
+
+      .v-input--switch__thumb {
+        height: 14px;
+        width: 14px;
+        background-color: #fff;
+        top: calc(50% - 7px);
+        @include i-translate-x(3px, '!');
+        box-shadow: var(--shadow-5);
+      }
     }
 
-    .v-input--selection-controls__ripple {
-      @include i-position-mirror(left, -10px);
-      height: 25px;
-      width: 25px;
+    &.v-input--is-disabled{
+      ::v-deep {
+        opacity: 1;
+        .v-input--switch__track{
+          color: var(--gray-lighten-2) !important;
+        }
+
+        .v-input--switch__thumb{
+          background-color: var(--gray) !important;
+          box-shadow: none;
+        }
+      }
     }
 
-    .v-input--switch__thumb {
-      height: 14px;
-      width: 14px;
-      background-color: #fff;
-      top: calc(50% - 7px);
-      @include i-translate-x(3px, '!');
-      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.141176), 0 1px 3px rgba(0, 0, 0, 0.2);
+    &.is-active {
+      ::v-deep {
+        .v-input--switch__track {
+          opacity: 1;
+          background-color: currentColor;
+        }
+
+        .v-input--selection-controls__ripple {
+          @include i-translate-x(14px, '!');
+        }
+
+        .v-input--switch__thumb {
+          @include i-translate-x(17px, '!');
+        }
+      }
     }
-  }
 
-  &.v-input--is-disabled{
-    ::v-deep {
-      opacity: 1;
-      .v-input--switch__track{
-        color: #EDEDED !important;
+    &.with-icon {
+      ::v-deep {
+
+      input {
+        height: var(--size-value6);
       }
 
-      .v-input--switch__thumb{
-        background-color: #E0E0E0 !important;
-        box-shadow: none;
+      .v-input--selection-controls__input {
+        @include i-margin-mirror(0, var(--size-value3));
+        height: var(--size-value6);
+        width: var(--size-value12);
       }
-    }
-  }
-  
-  &.is-active {
-    ::v-deep {
       .v-input--switch__track {
-        opacity: 1;
-        background-color: currentColor;
+        top: 0;
+        @include i-position-mirror(left, 0);
+        height: var(--size-value6);
+        width: var(--size-value12);
       }
 
       .v-input--selection-controls__ripple {
-        @include i-translate-x(14px, '!');
+        @include i-position-mirror(left, -9px);
+        height: 29px;
+        width: 29px;
+        top: calc(50% - 21.5px);
       }
 
       .v-input--switch__thumb {
-        @include i-translate-x(17px, '!');
+        height: 18px;
+        width: 18px;
+        top: calc(50% - 9px);
+        @include i-translate-x(3.5px, '!');
+      }
+    }
+
+    &.v-input--is-disabled{
+      ::v-deep {
+        opacity: 1;
+        .v-input--switch__track{
+          color: var(--gray-lighten-2) !important;
+        }
+
+        .v-input--switch__thumb{
+          background-color: var(--gray) !important;
+          box-shadow: none;
+        }
+      }
+
+      & + .VcSwitchIcon{
+        fill: var(--gray-lighten-2) !important;
       }
     }
+
+    &.is-active {
+      ::v-deep {
+        .v-input--switch__track {
+          opacity: 1;
+          background-color: currentColor;
+        }
+
+        .v-input--selection-controls__ripple {
+          @include i-translate-x(23.5px, '!');
+        }
+
+        .v-input--switch__thumb {
+          @include i-translate-x(26px, '!');
+        }
+      }
+    }
+
+    }
+  }
+
+  & .VcSwitchIcon{
+    position: relative;
+  }
+  & .VcSwitchIconV{
+      left: 30px;
+      top: -47px;
+      margin-bottom: -47px;
+      fill: var(--v-secondary-base);
+  }
+
+  & .VcSwitchIconX{
+      left: 7.4px;
+      top: -51px;
+      margin-bottom: -51px;
+      fill: var(--neutral-lighten-1);
+  }
+
+  &.with-icon{
+    height: var(--size-value6);
   }
 }
 

package/src/components/index.js

@@ -21,6 +21,8 @@ export {default as VcIcon} from './VcIcon/VcIcon.vue';
 export {default as VcLayout} from './VcLayout/VcLayout.vue';
 export {default as VcLoader} from './VcLoader/VcLoader.vue';
 export {default as VcSwitch} from './VcSwitch/VcSwitch.vue';
+export {default as VcListEntity} from './list/VcListEntity/VcListEntity.vue';
+export {default as VcExpansionCard} from './VcExpansionCard/VcExpansionCard.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';

package/src/components/list/VcListEntity/VcListEntity.spec.js

@@ -0,0 +1,95 @@
+import '@testing-library/jest-dom';
+import VcListEntity from "./VcListEntity.vue";
+import init from "../../../../testing-library.config"
+import Vuetify from 'vuetify';
+import {render} from "@testing-library/vue";
+import {fireEvent} from '@testing-library/dom'
+
+init();
+
+
+const props = {
+    basic: {
+        title: 'first entity',
+        value: true
+    },
+};
+
+describe("VcListEntity.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("render VcListEntity", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcListEntity, {
+            props: props.basic
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+
+
+        const component = getByTestId('VcListEntity');
+        expect(component).toBeInTheDocument();
+
+        const title = getByText('first entity');
+        expect(title).toBeInTheDocument();
+    });
+
+    it("render VcListEntity with icon slot", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcListEntity, {
+            props: props.basic,
+            slots: {
+                icon: '<div>icon</div>',
+            },
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+
+
+        const component = getByTestId('VcListEntity');
+        expect(component).toBeInTheDocument();
+
+        const title = getByText('first entity');
+        expect(title).toBeInTheDocument();
+
+        const slotIcon = getByText('icon');
+        expect(slotIcon).toBeInTheDocument();
+    });
+
+    it('event emitted',async () => {
+        const {emitted,getByRole} = renderWithVuetify(VcListEntity, {
+            props: props.basic,
+        })
+    
+        const switchName = getByRole('switch');
+        expect(switchName).toBeInTheDocument();
+        expect(switchName).toHaveAttribute('aria-checked',"true");
+    
+        await fireEvent.click(switchName);
+        expect(switchName).toHaveAttribute('aria-checked',"false");
+        expect(emitted().input.length).toBe(1);
+    
+        await fireEvent.click(switchName);
+        expect(switchName).toHaveAttribute('aria-checked',"true");
+        expect(emitted().input.length).toBe(2);
+      })
+
+});

package/src/components/list/VcListEntity/VcListEntity.stories.js

@@ -0,0 +1,77 @@
+import VcListEntityCmp from './VcListEntity.vue';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcListEntity: VcListEntityCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        itemValue: true,
+    }),
+    template: `<div><VcListEntity :disabled="disabled" :value="itemValue" :title="title"></VcListEntity></div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    disabled: false,
+    value: false,
+    title:'text to <b>storybook</b>'
+}
+
+const TemplateDisabled = (args, {argTypes}) => ({
+    components: {VcListEntity: VcListEntityCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        itemValue: true,
+    }),
+    template: '<div><VcListEntity :disabled="disabled" :value="itemValue" :title="title" /></div>',
+})
+
+export const Disabled = TemplateDisabled.bind({});
+
+// Set default values
+Disabled.args = {
+    disabled: true,
+    value: false,
+    title:'text to <b>storybook</b>'
+}
+
+const TemplateWithSlot = (args, {argTypes}) => ({
+    components: {VcListEntity: VcListEntityCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        itemValue: true,
+    }),
+    template: `<div><VcListEntity :disabled="disabled" :value="itemValue" :title="title" >
+    <template v-slot:icon>
+    <v-icon size="12">home</v-icon>
+    </template>
+    </VcListEntity>
+  </div>`,
+})
+
+export const WithSlot = TemplateWithSlot.bind({});
+
+// Set default values
+WithSlot.args = {
+    disabled: false,
+    value: false,
+    title:'text to <b>storybook</b>'
+}
+
+
+export default {
+    title: 'containers / list / VcListEntity',
+    id: 'VcListEntity',
+    component: VcListEntityCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=4133%3A39303',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/list/VcListEntity/VcListEntity.vue

@@ -0,0 +1,70 @@
+<template>
+  <div id="container" class="listEntity" :data-qa="dataQa">
+    <v-container fluid>
+      <div class="d-flex flex-wrap justify-space-between align-center sl-row" :class="{'margin-start':$vuetify.breakpoint.mdAndUp}">
+        <div class="justify-start d-flex align-center">
+          <slot name="icon"></slot>
+          <div
+            class="sl-title"
+            v-html="title"
+          >
+        </div>
+        </div>
+        <div class="d-flex justify-end">
+          <VcSwitch
+            :disabled="disabled"
+            :ripple="false"
+            v-model="value"
+            color="secondary"
+            @input="val => $emit('input', Boolean(val))"
+          >
+          </VcSwitch>
+        </div>
+        
+        
+      </div>
+    </v-container>
+  </div>
+</template>
+<script>
+import VcIcon from '../../VcIcon/VcIcon.vue'
+import VcSwitch from '../../VcSwitch/VcSwitch.vue';
+export default {
+  components: { VcIcon, VcSwitch },
+  name: 'VcListEntity',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    value: {
+        type: Boolean,
+        default: false
+    },
+    title: {
+        type: String,
+        required: false,
+    },
+    dataQa: {
+      type: String,
+      default: 'VcListEntity'
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.listEntity{
+    & .sl-title{
+      font-size: var(--font-size-x-small);
+      line-height: var(--size-value4);
+      font-weight: var(--font-weight-medium2);
+      margin: 0 8px;
+    }
+
+
+    & .sl-row{
+      min-width: 100%;
+    }
+}
+</style>

package/src/components/modal/VcConfirmModal/VcConfirmModal.vue

@@ -16,8 +16,8 @@
         <VcModalFooter
             direction="horizontal"
             :buttons='[
-                {label: cancelButtonLabel || $dst("ds.modal.cancel"),event:"onCancelClicked",color:"white"},
-                {label: okButtonLabel || $dst("ds.modal.ok"),event:"onOkClicked",color:"secondary"}
+                {label: cancelButtonLabel || $dst("ds.modal.cancel"), event:"onCancelClicked", color:"white", loading},
+                {label: okButtonLabel || $dst("ds.modal.ok"), event:"onOkClicked", color:"secondary", loading}
                 ]'
             @onOkClicked="$emit('onOkClicked')"
             @onCancelClicked="$emit('onCancelClicked')"
@@ -83,6 +83,10 @@ export default {
       type: String,
       required: false
     },
+    loading: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>

package/src/components/wizard/VcSteperContent/VcStepperContent.vue

@@ -122,14 +122,20 @@ export default {
 
 }
 .layout-content {
+  padding: var(--size-value0) var(--size-value4);
   @include md-and-up {
+    padding: revert;
     padding-block-start: var(--size-value3);
     padding-inline: var(--size-value10);
   }
 }
 .stepper-header {
+  flex: 0;
   margin-block-end: var(--size-value7);
+  padding: var(--size-value0) var(--size-value4);
   @include md-and-up {
+    padding: revert;
+    flex: revert;
     padding-block-start: var(--size-value3);
     padding-inline: var(--size-value10);
   }

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

@@ -120,6 +120,11 @@ describe("VcWizard.vue", () => {
             props: {
                 steps: defaultSteps,
                 dataQa: 'vcWizard',
+                initialWizardData: {
+                    textFieldValue: 'initial value'
+                },
+
+
             }
         })
         const stepperElement = getByTestId("vc-steps-bar")
@@ -132,6 +137,8 @@ describe("VcWizard.vue", () => {
         expect(nextButton).toHaveClass('v-btn--disabled')
 
         const textInput = await findByTestId('text-input')
+        expect(textInput.value).toBe('initial value')
+        await userEvent.clear(textInput)
         await userEvent.type(textInput, "1");
         await userEvent.type(textInput, "2");
         await userEvent.type(textInput, "3");

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

@@ -14,6 +14,9 @@ const GeneralTemplate = (args, {argTypes}) => ({
             :steps="steps"
             @submit="onSubmit"
             :data-qa="dataQa"
+            :initialWizardData="{
+              textFieldValue: 'initial value'
+            }"
           />
       </div>`,
 })

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

@@ -41,6 +41,10 @@ export default {
   name: "VcWizard",
   components: {VcStepsBar, VcStepperContent, VcMobileWizardProgress, VcWizardCtaContainer},
   props: {
+    initialWizardData: {
+      type: Object,
+      default: () => ({}),
+    },
     steps: {
       type: [Array],
       validator: steps => steps.every(step => step.name),
@@ -87,13 +91,16 @@ export default {
       if(this.currentStep < this.wizardSteps.length) {
         this.currentStep++;
       } else {
-        this.$emit('submit', this.wizardSteps)
+        this.$emit('submit', this.wizardData)
       }
     },
   },
   computed: {
     wizardData() {
-      return Object.values(this.wizardStepsData).reduce((acc, currentValue) => ({ ...acc, ...currentValue}), {})
+      return Object.values(this.wizardStepsData).reduce((acc, currentValue) => {
+        Object.assign(acc,currentValue)
+        return acc
+      }, {...this.initialWizardData})
     },
     currentStepObj() {
       return this.wizardSteps[this.currentStep - 1]
@@ -120,8 +127,8 @@ export default {
   height: 100%;
   @include md-and-up {
     display: grid;
-    grid-template-columns: minmax(200px, 1fr) 3fr;
-    grid-template-rows: 400px 80px;
+    grid-template-columns: minmax(250px,1fr) 3fr;
+    grid-template-rows: 562px 80px;
     grid-column-gap: var(--size-value10);
     grid-row-gap: 0px;
   }
@@ -133,6 +140,7 @@ export default {
 .vc-stepper-container {
   grid-area: 1 / 1 / 3 / 2;
   border-inline-end: 1px solid #E0E0E0;
+  max-height: calc( 100% - 24px );
 }
 .wizard-cta-container {
   grid-area: 2 / 2 / 3 / 3;

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

@@ -3,7 +3,7 @@
     <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 :value="textFieldValue" data-qa="text-input" class="text-input" placeholder="enter 123 to proceed" @input="(data) => $emit('submit', {wizardData: {textFieldValue: data}} )" >
 
     </VcTextArea>
     <v-layout>

package/src/stories/welcome.stories.mdx

@@ -179,6 +179,7 @@ Setting their values will allow you to control different aspects of the display
 <div><code>--size-value7: 28px;</code></div>
 <div><code>--size-value8: 32px;</code></div>
 <div><code>--size-value10: 40px;</code></div>
+<div><code>--size-value12: 48px;</code></div>
 <div><code>--size-value16: 64px;</code></div>