@vcita/design-system 1.3.3 → 1.3.4

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

@@ -2,12 +2,155 @@ import VcList from './VcList';
 import {VcCheckbox, VcIcon} from '@/components/index';
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const checkboxItems = [
+    {
+        disabled: true,
+        avatar:
+            {
+                name: 'Person One',
+                path: require('@/stories/assets/pics/avatar4.png'),
+            },
+        identifier: 0
+    },
+    {
+        disabled: true,
+        avatar: {
+            name: 'Person Two',
+            path: require('@/stories/assets/pics/avatar2.png'),
+        },
+        identifier: 1
+    },
+    {
+        selected: true,
+        avatar: {
+            name: 'Person Three',
+            path: require('@/stories/assets/pics/avatar1.png'),
+        },
+        identifier: 2
+    },
+    {
+        selected: true,
+        avatar: {
+            name: 'Person Four',
+            colorId: 3,
+        },
+        identifier: 3
+    },
+    {
+        avatar: {
+            name: 'Person Five',
+            colorId: 4,
+        },
+        identifier: 4
+    },
+    {
+        avatar: {
+            name: 'Person Six',
+            path: require('@/stories/assets/pics/avatar2.png'),
+        },
+        identifier: 5
+    },
+    {
+        avatar: {
+            name: 'Person Seven',
+            colorId: 6,
+        },
+        identifier: 6
+    },
+    {
+        avatar: {
+            name: 'Person Eight',
+            colorId: 7,
+        },
+        identifier: 7
+    },
+    {
+        avatar: {
+            name: 'Person Nine',
+            colorId: 8,
+        },
+        identifier: 8
+    },
+    {
+        avatar: {
+            name: 'Person Ten',
+            path: require('@/stories/assets/pics/avatar3.png'),
+        },
+        identifier: 9
+    },
+    {
+        avatar: {
+            name: 'Person Eleven',
+            colorId: 10,
+        },
+        identifier: 10
+    },
+    {
+        avatar: {
+            name: 'Person Twelve',
+            colorId: 11,
+        },
+        identifier: 11
+    },
+    {
+        avatar: {
+            name: 'Person Thirteen',
+            colorId: 12,
+        },
+        identifier: 12
+    },
+    {
+        avatar: {
+            name: 'Person Fourteen',
+            colorId: 14,
+        },
+        identifier: 14
+    },
+    {
+        avatar: {
+            name: 'Person Fifteen',
+            colorId: 13,
+        },
+        identifier: 13
+    },
+    {
+        avatar: {
+            name: 'Person Sixteen',
+            colorId: 15,
+        },
+        identifier: 15
+    },
+    {
+        avatar: {
+            name: 'Person Seventeen',
+            colorId: 16,
+        },
+        identifier: 16
+    },
+    {
+        avatar: {
+            name: 'Person Eighteen',
+            colorId: 17,
+        },
+        identifier: 17
+    },
+    {
+        avatar: {
+            name: 'Person Nineteen',
+            colorId: 18,
+        },
+        identifier: 18
+    }
+];
+
+
 const baseProps = {
     emptyListTitle: 'No result found',
     emptyListMsg: 'We can’t find any item matching your search',
     imagePath: require('@/stories/assets/pics/avatar1.png'),
     multiple: false,
     dataQa: 'vc-list',
+    items : checkboxItems.slice(0, 5),
 }
 
 const Template = (args, {argTypes}) => ({
@@ -46,148 +189,109 @@ MultipleWithCheckbox.args = {
                       :disabled="item.disabled"
                       show-border="false"
                       style="padding: 0; margin: 0; flex: 1 1 auto"/>`,
-    items: [
-        {
-            disabled: true,
-            avatar:
-                {
-                    name: 'Person One',
-                    path: require('@/stories/assets/pics/avatar4.png'),
-                },
-            identifier: 0
-        },
-        {
-            disabled: true,
-            avatar: {
-                name: 'Person Two',
-                path: require('@/stories/assets/pics/avatar2.png'),
-            },
-            identifier: 1
-        },
-        {
-            selected: true,
-            avatar: {
-                name: 'Person Three',
-                path: require('@/stories/assets/pics/avatar1.png'),
-            },
-            identifier: 2
-        },
-        {
-            selected: true,
-            avatar: {
-                name: 'Person Four',
-                colorId: 3,
-            },
-            identifier: 3
-        },
-        {
-            avatar: {
-                name: 'Person Five',
-                colorId: 4,
-            },
-            identifier: 4
-        },
-        {
-            avatar: {
-                name: 'Person Six',
-                path: require('@/stories/assets/pics/avatar2.png'),
-            },
-            identifier: 5
-        },
-        {
-            avatar: {
-                name: 'Person Seven',
-                colorId: 6,
-            },
-            identifier: 6
-        },
-        {
-            avatar: {
-                name: 'Person Eight',
-                colorId: 7,
-            },
-            identifier: 7
-        },
-        {
-            avatar: {
-                name: 'Person Nine',
-                colorId: 8,
-            },
-            identifier: 8
-        },
-        {
-            avatar: {
-                name: 'Person Ten',
-                path: require('@/stories/assets/pics/avatar3.png'),
-            },
-            identifier: 9
-        },
-        {
-            avatar: {
-                name: 'Person Eleven',
-                colorId: 10,
-            },
-            identifier: 10
-        },
-        {
-            avatar: {
-                name: 'Person Twelve',
-                colorId: 11,
-            },
-            identifier: 11
-        },
-        {
-            avatar: {
-                name: 'Person Thirteen',
-                colorId: 12,
-            },
-            identifier: 12
-        },
-        {
-            avatar: {
-                name: 'Person Fourteen',
-                colorId: 14,
-            },
-            identifier: 14
-        },
-        {
-            avatar: {
-                name: 'Person Fifteen',
-                colorId: 13,
-            },
-            identifier: 13
-        },
-        {
-            avatar: {
-                name: 'Person Sixteen',
-                colorId: 15,
-            },
-            identifier: 15
-        },
-        {
-            avatar: {
-                name: 'Person Seventeen',
-                colorId: 16,
-            },
-            identifier: 16
-        },
-        {
-            avatar: {
-                name: 'Person Eighteen',
-                colorId: 17,
-            },
-            identifier: 17
-        },
-        {
-            avatar: {
-                name: 'Person Nineteen',
-                colorId: 18,
-            },
-            identifier: 18
-        }
-    ],
 }
 
+const iconItems = [
+    {
+        disabled: true,
+        icon: 'flag',
+        label: '(GMT-10:00) America/Adak',
+        identifier: 0
+    },
+    {
+        disabled: true,
+        icon: 'customer',
+        label: '(GMT-09:00) Alaska',
+        identifier: 1
+    },
+    {
+        selected: true,
+        icon: 'inactive',
+        label: '(GMT-07:00) Arizona',
+        identifier: 2
+    },
+    {
+        icon: 'vip',
+        label: '(GMT-06:00) Central Time (US & Canada)',
+        identifier: 3
+    },
+    {
+        icon: 'success',
+        label: '(GMT-05:00) Eastern Time (US & Canada)',
+        identifier: 4
+    },
+    {
+        icon: 'close_button',
+        label: '(GMT-12:00) International Date Line West',
+        identifier: 5
+    },
+    {
+        icon: 'plus',
+        label: '(GMT-11:00) American Samoa',
+        identifier: 6
+    },
+    {
+        icon: 'arrow_right',
+        label: '(GMT-08:00) Tijuana',
+        identifier: 7
+    },
+    {
+        icon: 'warning',
+        label: '(GMT-07:00) Chihuahua',
+        identifier: 8
+    },
+    {
+        icon: 'warning_fill',
+        label: '(GMT-06:00) Mexico City',
+        identifier: 9
+    },
+    {
+        icon: 'check_button',
+        label: '(GMT-05:00) Lima',
+        identifier: 10
+    },
+    {
+        icon: 'check_circle',
+        label: '(GMT-04:00) La Paz',
+        identifier: 11
+    },
+    {
+        icon: 'check_fill',
+        label: '(GMT-03:00) Greenland',
+        identifier: 12
+    },
+    {
+        icon: 'info',
+        label: '(GMT-02:00) Mid-Atlantic',
+        identifier: 14
+    },
+    {
+        icon: 'information',
+        label: '(GMT-01:00) Cape Verde Is.',
+        identifier: 13
+    },
+    {
+        icon: 'info_fill',
+        label: '(GMT+00:00) London',
+        identifier: 15
+    },
+    {
+        icon: 'error',
+        label: '(GMT+01:00) Berlin',
+        identifier: 16
+    },
+    {
+        icon: 'question',
+        label: '(GMT+02:00) Jerusalem',
+        identifier: 17
+    },
+    {
+        icon: 'attention',
+        label: '(GMT+02:00) Sofia',
+        identifier: 18
+    }
+];
+
 export const SingleIconAndText = Template.bind({});
 
 // Set default values
@@ -195,106 +299,7 @@ SingleIconAndText.args = {
     ...baseProps,
     slotContent: `<VcIcon small style="margin-inline-end: 12px">{{ '$' + item.icon }}</VcIcon>
           <span>{{ item.label }}</span>`,
-    items: [
-        {
-            disabled: true,
-            icon: 'flag',
-            label: '(GMT-10:00) America/Adak',
-            identifier: 0
-        },
-        {
-            disabled: true,
-            icon: 'customer',
-            label: '(GMT-09:00) Alaska',
-            identifier: 1
-        },
-        {
-            selected: true,
-            icon: 'inactive',
-            label: '(GMT-07:00) Arizona',
-            identifier: 2
-        },
-        {
-            icon: 'vip',
-            label: '(GMT-06:00) Central Time (US & Canada)',
-            identifier: 3
-        },
-        {
-            icon: 'success',
-            label: '(GMT-05:00) Eastern Time (US & Canada)',
-            identifier: 4
-        },
-        {
-            icon: 'close_button',
-            label: '(GMT-12:00) International Date Line West',
-            identifier: 5
-        },
-        {
-            icon: 'plus',
-            label: '(GMT-11:00) American Samoa',
-            identifier: 6
-        },
-        {
-            icon: 'arrow_right',
-            label: '(GMT-08:00) Tijuana',
-            identifier: 7
-        },
-        {
-            icon: 'warning',
-            label: '(GMT-07:00) Chihuahua',
-            identifier: 8
-        },
-        {
-            icon: 'warning_fill',
-            label: '(GMT-06:00) Mexico City',
-            identifier: 9
-        },
-        {
-            icon: 'check_button',
-            label: '(GMT-05:00) Lima',
-            identifier: 10
-        },
-        {
-            icon: 'check_circle',
-            label: '(GMT-04:00) La Paz',
-            identifier: 11
-        },
-        {
-            icon: 'check_fill',
-            label: '(GMT-03:00) Greenland',
-            identifier: 12
-        },
-        {
-            icon: 'info',
-            label: '(GMT-02:00) Mid-Atlantic',
-            identifier: 14
-        },
-        {
-            icon: 'information',
-            label: '(GMT-01:00) Cape Verde Is.',
-            identifier: 13
-        },
-        {
-            icon: 'info_fill',
-            label: '(GMT+00:00) London',
-            identifier: 15
-        },
-        {
-            icon: 'error',
-            label: '(GMT+01:00) Berlin',
-            identifier: 16
-        },
-        {
-            icon: 'question',
-            label: '(GMT+02:00) Jerusalem',
-            identifier: 17
-        },
-        {
-            icon: 'attention',
-            label: '(GMT+02:00) Sofia',
-            identifier: 18
-        }
-    ]
+    items: iconItems.slice(0, 5),
 }
 
 export default {

package/src/components/list/VcList/VcList.vue

@@ -1,7 +1,6 @@
 <template>
-  <div :data-qa="dataQa">
-    <ul v-if="!isEmptyList"
-        class="vc-list">
+  <div :data-qa="dataQa" class="vc-list-container">
+    <ul v-if="!isEmptyList" class="vc-list">
       <VcBaseListItem v-for="item in items"
                       v-bind="item"
                       :key="item.identifier"
@@ -15,7 +14,7 @@
     </ul>
     <template v-else>
       <slot name="emptyList">
-        <VcEmptyState :title="noItemsTitle" :subtitle="noItemsMsg" size="sm"
+        <VcEmptyState :title="noItemsTitle" :subtitle="noItemsMsg" size="sm" class="VcListEmptyState"
                       :data-qa="`${dataQa}-empty`"
                       :image="imagePath"/>
       </slot>
@@ -73,9 +72,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.vc-list-container {
+  width: 100%;
+}
 
 .vc-list {
+  width: 100%;
   margin: var(--size-value0);
   padding: var(--size-value0);
 }
+
+.VcListEmptyState {
+  margin: var(--size-value4);
+}
 </style>

package/src/components/page/layouts/centeredPage/CenteredPageLayout.stories.js

@@ -9,24 +9,24 @@ const Template = (args, {argTypes}) => ({
     template: `
       <div>
       <div :style="{borderBottom: '2px solid black', paddingBottom: '5px', marginBottom: '20px'}">
-        A simple centered layout, which expands and collapses the content area based on minimum and maximum width, 
+        A simple centered layout, which expands and collapses the content area based on minimum and maximum width,
         and keeps the header in sync.
         <br>To use, go to "Docs" and click "show code".
       </div>
-      <VcLayout justify-center :style="{padding: 'var(--size-value5)'}">
-          <VcLayout column :style="{minWidth: 'var(--centered-layout-min-width)', maxWidth: 'var(--centered-layout-max-width)', flexBasis: 'var(--centered-layout-min-width)'}">
-            <VcPageHeader :title="title"
-                          :subtitle="subtitle"
-                          :show-back-button="showBackButton"
-                          :breadcrumbs="breadcrumbs"
-                          :button-data="headerButtonData"
-                          @onSaveClicked="onSaveClicked"
-                          @onBackClicked="onBackClicked"/>
-            <VcLayout align-center justify-center
-                      :style="{ minHeight: '300px', backgroundColor: 'var(--green-lighten-2)'}">
-              Your content goes here
-            </VcLayout>
+      <VcLayout justify-center align-start :style="{margin: 'var(--size-value5)', height: '100%'}">
+        <VcLayout column :style="{minWidth: 'var(--centered-layout-min-width)', maxWidth: 'var(--centered-layout-max-width)', flexBasis: 'var(--centered-layout-min-width)'}">
+          <VcPageHeader :title="title"
+                        :subtitle="subtitle"
+                        :show-back-button="showBackButton"
+                        :breadcrumbs="breadcrumbs"
+                        :button-data="headerButtonData"
+                        @onSaveClicked="onSaveClicked"
+                        @onBackClicked="onBackClicked"/>
+          <VcLayout align-center justify-center
+                    :style="{ minHeight: '300px', backgroundColor: 'var(--green-lighten-2)'}">
+            Your content goes here
           </VcLayout>
+        </VcLayout>
       </VcLayout>
       </div>`,
 })
@@ -47,7 +47,7 @@ Playground.parameters = {
         source: {
             code: `
               <template>
-                  <VcLayout justify-center class="LayoutContainer">
+                  <VcLayout justify-center align-start class="LayoutContainer">
                       <VcLayout column class="MainLayout">
                           <VcPageHeader :title="$t([YourPageTitle])" 
                                         :subtitle="$t([YourPageSubtitle])"
@@ -124,7 +124,8 @@ Playground.parameters = {
             
              <style lang="scss" scoped>
                 .LayoutContainer {
-                    padding: var(--size-value5);
+                    margin: var(--size-value5);
+                    height: 100%;
                 }
                 
                 .MainLayout {

package/styles/variables.scss

@@ -28,6 +28,7 @@
   }
 
   --border-radius: 6px;
+  --border-radius-circle: 50%;
   --border-frame: 1px solid #e0e0e0;
   --border-focused-frame: 1px solid var(--v-secondary-base);
   --shadow-focused-frame: 0px 0px 0px 3px var(--v-secondary-lighten1);

package/styles/vuetify-variables.scss

@@ -33,4 +33,12 @@ $switch-ripple-top: calc(50% - 20px);
 $snackbar-content-padding: 0;
 
 // Select Field
-$select-field-height: 52px;
+$select-field-height: 52px;
+
+// Color Picker
+$color-picker-swatch-color-width: 24px;
+$color-picker-swatch-color-height: 24px;
+$color-picker-swatch-color-margin: 5px;
+$color-picker-controls-padding: 8px;
+$color-picker-swatch-color-border-radius: 50%;
+$color-picker-border-radius: 4px;