@vcita/design-system 0.2.7 → 0.2.11

package/src/components/VcSwitch/VcSwitch.stories.js

@@ -9,7 +9,7 @@ const Template = (args, {argTypes}) => ({
     data: () => ({
         itemValue: true,
     }),
-    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange"/></div>',
+    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange" :icon="icon" /></div>',
 })
 
 export const Playground = Template.bind({});
@@ -20,6 +20,7 @@ Playground.args = {
     onChange: action("input"),
     ripple: true,
     disabled: false,
+    icon: false,
 }
 
 const TemplateDisabled = (args, {argTypes}) => ({
@@ -28,7 +29,7 @@ const TemplateDisabled = (args, {argTypes}) => ({
     data: () => ({
         itemValue: true,
     }),
-    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange"/></div>',
+    template: '<div><VcSwitch v-model="itemValue" color="secondary" :label="label" :ripple="ripple" :disabled="disabled" @input="onChange" :icon="icon" /></div>',
 })
 
 export const Disabled = TemplateDisabled.bind({});
@@ -70,6 +71,16 @@ LabelInSlot.args = {
     disabled: false,
 }
 
+export const WithIcon = Template.bind({});
+
+// Set default values
+WithIcon.args = {
+    value: true,
+    onChange: action("input"),
+    disabled: false,
+    icon: true,
+}
+
 export default {
     title: 'Form / VcSwitch',
     id: 'VcSwitch',
@@ -84,4 +95,4 @@ export default {
             url: 'http://www.url.com/status', // will make the tag a link
         },
     },
-};
+};

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/modal/VcConfirmProminentModal/VcConfirmProminentModal.stories.js

@@ -11,6 +11,7 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <VcConfirmProminentModal :show-dialog="showDialog"
+                               :useOffset="useOffset"
                                :title-text="titleText"
                                :subtitle-text="subtitleText"
                                :icon="iconParam"
@@ -29,6 +30,7 @@ export const Playground = Template.bind({});
 // Set default values
 Playground.args = {
     showDialog: true,
+    useOffset: false,
     titleText: 'Notice header text',
     subtitleText: 'some more information about this issue, and some more information about this issue',
     contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',

package/src/components/modal/VcConfirmProminentModal/VcConfirmProminentModal.vue

@@ -5,6 +5,7 @@
                  :icon="icon"
                  :size="size"
                  flavor="prominent"
+                 :useOffset="useOffset"
                  @onCloseButtonClicked="$emit('onCloseButtonClicked')"
                  @onOkClicked="$emit('onOkClicked')"
                  @onCancelClicked="$emit('onCancelClicked')">
@@ -46,6 +47,10 @@ export default {
       type: String,
       required: false
     },
+    useOffset: {
+      type: Boolean,
+      default: true
+    },
     size: {
       type: String,
       default: 'md', // required

package/src/components/modal/VcInputModal/VcInputModal.stories.js

@@ -14,6 +14,7 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <VcInputModal :show-dialog="showDialog"
+                    :useOffset="useOffset"
                     :topTitle="topTitle"
                     :title="title"
                     :subtitle="subtitle"
@@ -37,6 +38,7 @@ export const Playground = Template.bind({});
 // Set default values
 Playground.args = {
     showDialog: true,
+    useOffset: false,
     topTitle: '',
     title: 'Input form',
     subtitle: '',
@@ -55,6 +57,7 @@ const TemplateWithAdditional = (args, {argTypes}) => ({
         ],
     }),
     template: '<div><VcInputModal :show-dialog="showDialog" ' +
+        ':useOffset="useOffset" ' +
         ':topTitle="topTitle" ' +
         ':title="title" ' +
         ':subtitle="subtitle" ' +
@@ -78,6 +81,7 @@ export const WithAdditionalPanel = TemplateWithAdditional.bind({});
 // Set default values
 WithAdditionalPanel.args = {
     showDialog: true,
+    useOffset: false,
     title: 'With additional pane (when large)',
     size: 'lg'
 }
@@ -93,7 +97,7 @@ const TemplateWithFooter = (args, {argTypes}) => ({
     }),
     template: `
       <div>
-      <VcInputModal :show-dialog="showDialog" :topTitle="topTitle" :title="title" :subtitle="subtitle"
+      <VcInputModal :show-dialog="showDialog" :useOffset="useOffset" :topTitle="topTitle" :title="title" :subtitle="subtitle"
                     :header-icon="headerIcon" :size="size" @onCloseButtonClicked="onCloseButtonClicked"
                     @onOkClicked="onOkClicked" @onCancelClicked="onCancelClicked"
                     @onValidationChanged="onValidationChanged">
@@ -125,6 +129,7 @@ export const UsingFooterSlot = TemplateWithFooter.bind({});
 // Set default values
 UsingFooterSlot.args = {
     showDialog: true,
+    useOffset: false,
     title: 'With additional pane (when large)',
     size: 'lg',
 }
@@ -144,6 +149,7 @@ const TemplateWithImage = (args, {argTypes}) => ({
         ],
     }),
     template: '<div><VcInputModal :show-dialog="showDialog" ' +
+        ':useOffset="useOffset" ' +
         ':topTitle="topTitle" ' +
         ':title="title" ' +
         ':subtitle="subtitle" ' +
@@ -164,6 +170,7 @@ export const WithHeaderImage = TemplateWithImage.bind({});
 // Set default values
 WithHeaderImage.args = {
     showDialog: true,
+    useOffset: false,
     topTitle: 'Top title',
     title: 'Input form',
     size: 'lg'