@vcita/design-system 1.2.0 → 1.2.2

package/init/SvgIcons.js

@@ -35,7 +35,7 @@ export default {
     doc_document: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_8556_218262)"><path d="M19.7213 23.4976H19.542H19.5412H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.7213 23.4979V23.4976Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 7.16976L1.92507 19.3146L18.8801 18.0566L19.4244 6.76368L2.07292 7.16976Z" fill="#C8DDFF"/><path d="M6 9.5H18" stroke="#212121" stroke-linejoin="bevel"/><path d="M6 12.5H18" stroke="#212121" stroke-linejoin="bevel"/><path d="M6 15.5H14" stroke="#212121" stroke-linejoin="bevel"/></g><defs><clipPath id="clip0_8556_218262"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
     doc_image: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_8556_218300)"><path d="M19.7213 23.4976H19.542H19.5412H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.7213 23.4979V23.4976Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 7.16976L1.92507 19.3146L18.8801 18.0566L19.4244 6.76368L2.07292 7.16976Z" fill="#CFF8E1"/><path d="M11.3861 14.4292L13.4731 11.3208L17.5928 17.3331L6.7057 17.3331L9.6392 12.7588L11.3861 14.4292Z" stroke="#212121"/><circle cx="7.32789" cy="9.93873" r="1.31031" stroke="#212121"/></g><defs><clipPath id="clip0_8556_218300"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
     doc_pdf: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_8556_218289)"><path d="M19.7213 23.4976H19.542H19.5412H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.7213 23.4979V23.4976Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 7.16976L1.92507 19.3146L18.8801 18.0566L19.4244 6.76368L2.07292 7.16976Z" fill="#FBCBC9"/><path d="M6.21819 18.8458L5.84397 19.1774L5.87334 19.2105L5.90807 19.238L6.21819 18.8458ZM11.5156 6.82244L11.5189 7.32243L11.5417 7.32227L11.5643 7.32005L11.5156 6.82244ZM18.2415 15.334L18.6824 15.5696L18.7323 15.4763L18.7401 15.3707L18.2415 15.334ZM5.90807 19.238C6.14766 19.4274 6.4219 19.5307 6.71586 19.5407C7.0025 19.5504 7.27724 19.4706 7.52834 19.3454C8.02033 19.1 8.49802 18.6415 8.9413 18.0935C9.83639 16.9868 10.7248 15.3452 11.426 13.675C12.1272 12.0049 12.6627 10.2554 12.8248 8.92038C12.9044 8.26465 12.9032 7.64155 12.7357 7.16944C12.6491 6.92528 12.5062 6.68844 12.2745 6.52341C12.0359 6.35338 11.7548 6.29658 11.4668 6.32483L11.5643 7.32005C11.6557 7.31109 11.6853 7.33148 11.6943 7.33788C11.7104 7.3493 11.7522 7.38815 11.7932 7.50379C11.881 7.75128 11.9068 8.18423 11.8321 8.79984C11.6854 10.0075 11.1867 11.6619 10.504 13.2878C9.82139 14.9136 8.97621 16.4601 8.16378 17.4646C7.75331 17.9721 7.38375 18.3 7.08197 18.4506C6.93618 18.5233 6.82741 18.5439 6.74977 18.5413C6.67945 18.5389 6.60866 18.5171 6.52832 18.4536L5.90807 19.238ZM11.5122 6.32245C10.8439 6.32696 10.2948 6.56874 10.0186 7.11158C9.77025 7.59983 9.81533 8.20492 9.96514 8.77703C10.2705 9.94297 11.1239 11.3932 12.1412 12.6922C13.1616 13.9952 14.4018 15.2163 15.5363 15.8939C16.0981 16.2294 16.69 16.4659 17.2468 16.4606C17.8523 16.4548 18.366 16.1616 18.6824 15.5696L17.8005 15.0983C17.6556 15.3694 17.4755 15.4584 17.2373 15.4606C16.9504 15.4634 16.5485 15.3336 16.0491 15.0354C15.0613 14.4454 13.9096 13.3284 12.9285 12.0757C11.9444 10.819 11.1871 9.49589 10.9325 8.52372C10.8024 8.02678 10.8303 7.72161 10.9099 7.56501C10.9618 7.46301 11.086 7.32535 11.5189 7.32243L11.5122 6.32245ZM18.7401 15.3707C18.763 15.061 18.7087 14.7681 18.5658 14.5083C18.4239 14.2503 18.212 14.0562 17.9681 13.9141C17.4953 13.6384 16.8621 13.5333 16.1925 13.5204C14.8383 13.4943 13.0732 13.8431 11.399 14.3697C9.72308 14.8968 8.07866 15.621 6.9721 16.3827C6.4266 16.7582 5.96001 17.1775 5.71022 17.6288C5.58158 17.8612 5.49772 18.1251 5.51364 18.4072C5.52997 18.6964 5.64868 18.957 5.84397 19.1774L6.59242 18.5142C6.5273 18.4407 6.51417 18.3883 6.51205 18.3508C6.50953 18.3061 6.52061 18.2296 6.58512 18.1131C6.72163 17.8665 7.03416 17.554 7.53911 17.2064C8.53344 16.522 10.0753 15.8344 11.699 15.3236C13.3246 14.8123 14.9726 14.4971 16.1732 14.5202C16.781 14.5319 17.2105 14.6299 17.4644 14.7779C17.5839 14.8476 17.6513 14.9206 17.6896 14.9902C17.7268 15.0579 17.7534 15.1531 17.7428 15.2972L18.7401 15.3707Z" fill="#212121"/></g><defs><clipPath id="clip0_8556_218289"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
-    doc_sheet: `<svg fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_10309_230169)"><path d="M19.7213 23.4976H19.542H19.5412H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.7213 23.4979V23.4976Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 6.16976L1.92507 18.3146L18.8801 17.0566L19.4244 5.76368L2.07292 6.16976Z" fill="#CFF8E1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 8H5V7H19V8Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H5V10H19V11Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V19H5V7H6Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 7V19H18V7H19Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 8V18H8V8H9Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 8V18H13V8H14Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 15H5V14H19V15Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 19H5V18H19V19Z" fill="#212121"/></g><defs><clipPath id="clip0_10309_230169"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
+    doc_sheet: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_10309_230169)"><path d="M19.7213 23.4976H19.542H19.5412H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.7213 23.4979V23.4976Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 6.16976L1.92507 18.3146L18.8801 17.0566L19.4244 5.76368L2.07292 6.16976Z" fill="#CFF8E1"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 8H5V7H19V8Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 11H5V10H19V11Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V19H5V7H6Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 7V19H18V7H19Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9 8V18H8V8H9Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 8V18H13V8H14Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 15H5V14H19V15Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19 19H5V18H19V19Z" fill="#212121"/></g><defs><clipPath id="clip0_10309_230169"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
     doc_slideshow: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_10309_230216)"><path d="M19.5412 23.4976H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.542 23.4976H19.5412Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 7.16976L1.92507 19.3146L18.8801 18.0566L19.4244 6.76368L2.07292 7.16976Z" fill="#FFDDB3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.45331 15.5697H3.70825V14.5697H9.45331V15.5697Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.45331 13.4113H3.70825V12.4113H9.45331V13.4113Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.89476 10.9998H3.70825V9.99976H7.89476V10.9998Z" fill="#212121"/><path d="M17.1493 12.8907C17.1493 13.5032 16.9677 14.1019 16.6274 14.6111C16.2872 15.1203 15.8035 15.5172 15.2377 15.7516C14.6719 15.986 14.0492 16.0473 13.4486 15.9278C12.8479 15.8083 12.2961 15.5134 11.863 15.0803C11.43 14.6473 11.135 14.0955 11.0156 13.4948C10.8961 12.8941 10.9574 12.2715 11.1918 11.7057C11.4261 11.1398 11.8231 10.6562 12.3323 10.3159C12.8415 9.97568 13.4402 9.79407 14.0527 9.79407L14.0527 12.8907H17.1493Z" stroke="#212121"/><path d="M18.7408 11.3418C18.7408 10.9491 18.6635 10.5602 18.5132 10.1974C18.3629 9.83453 18.1426 9.50484 17.8649 9.22714C17.5872 8.94943 17.2575 8.72914 16.8946 8.57885C16.5318 8.42855 16.1429 8.3512 15.7502 8.3512L15.7502 11.3418H18.7408Z" stroke="#212121"/></g><defs><clipPath id="clip0_10309_230216"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
     doc_archive: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_10309_230170)"><path d="M19.5412 23.4976H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.542 23.4976H19.5412Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stoke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 6.16976L1.92507 18.3146L18.8801 17.0566L19.4244 5.76368L2.07292 6.16976Z" fill="#FFDDB3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 6V16.2719H11V6H12Z" fill="#212121"/><path d="M9.50024 16.5H13.5001V21.5H9.50024V16.5Z" stroke="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 8H11V7H14V8Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 9H9V8H12V9Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 7H9V6H12V7Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 10H11V9H14V10Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 11H9V10H12V11Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 13H9V12H12V13Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 15H9V14H12V15Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 12H11V11H14V12Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14 13.5C14 13.7761 13.7761 14 13.5 14H11.5C11.2239 14 11 13.7761 11 13.5C11 13.2239 11.2239 13 11.5 13H13.5C13.7761 13 14 13.2239 14 13.5Z" fill="#212121"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 20H11V18H12V20Z" fill="#212121"/></g><defs><clipPath id="clip0_10309_230170"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
     doc_audio: `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_10309_230171)"><path d="M19.5412 23.4976H3.50498L3.50498 17L3.50498 16.9997L3.5 7.5V0.5H16.2924L20.4999 4.7181V23.4992L19.542 23.4976H19.5412Z" stroke="#212121"/><path d="M16 0V4.5H20.5" stroke="#212121" stroke-linejoin="bevel"/><path fill-rule="evenodd" clip-rule="evenodd" d="M2.07292 7.16976L1.92507 19.3146L18.8801 18.0566L19.4244 6.76368L2.07292 7.16976Z" fill="#C8DDFF"/><path d="M8.7022 8.91144L8.56484 8.43068L8.2022 8.53429V8.91144H8.7022ZM15.6491 6.92664H16.1491V6.26377L15.5117 6.44587L15.6491 6.92664ZM9.2022 17.5123V8.91144H8.2022V17.5123H9.2022ZM8.83956 9.3922L15.7864 7.4074L15.5117 6.44587L8.56484 8.43068L8.83956 9.3922ZM15.1491 6.92664V15.5275H16.1491V6.92664H15.1491ZM8.2022 17.5123C8.2022 17.6886 8.10971 17.8833 7.89056 18.0503C7.67097 18.2176 7.34559 18.3355 6.96548 18.3355V19.3355C7.54462 19.3355 8.0876 19.1573 8.49655 18.8457C8.90595 18.5339 9.2022 18.067 9.2022 17.5123H8.2022ZM6.96548 18.3355C6.58537 18.3355 6.25999 18.2176 6.0404 18.0503C5.82125 17.8833 5.72876 17.6886 5.72876 17.5123H4.72876C4.72876 18.067 5.025 18.5339 5.4344 18.8457C5.84336 19.1573 6.38634 19.3355 6.96548 19.3355V18.3355ZM5.72876 17.5123C5.72876 17.336 5.82125 17.1412 6.0404 16.9742C6.25999 16.807 6.58537 16.6891 6.96548 16.6891V15.6891C6.38634 15.6891 5.84336 15.8672 5.4344 16.1788C5.025 16.4907 4.72876 16.9575 4.72876 17.5123H5.72876ZM6.96548 16.6891C7.34559 16.6891 7.67097 16.807 7.89056 16.9742C8.10971 17.1412 8.2022 17.336 8.2022 17.5123H9.2022C9.2022 16.9575 8.90595 16.4907 8.49655 16.1788C8.0876 15.8672 7.54462 15.6891 6.96548 15.6891V16.6891ZM15.1491 15.5275C15.1491 15.7038 15.0566 15.8985 14.8374 16.0655C14.6178 16.2328 14.2925 16.3507 13.9124 16.3507V17.3507C14.4915 17.3507 15.0345 17.1725 15.4434 16.8609C15.8528 16.5491 16.1491 16.0822 16.1491 15.5275H15.1491ZM13.9124 16.3507C13.5322 16.3507 13.2069 16.2328 12.9873 16.0655C12.7681 15.8985 12.6756 15.7038 12.6756 15.5275H11.6756C11.6756 16.0822 11.9719 16.5491 12.3813 16.8609C12.7902 17.1725 13.3332 17.3507 13.9124 17.3507V16.3507ZM12.6756 15.5275C12.6756 15.3512 12.7681 15.1564 12.9873 14.9894C13.2069 14.8221 13.5322 14.7043 13.9124 14.7043V13.7043C13.3332 13.7043 12.7902 13.8824 12.3813 14.194C11.9719 14.5059 11.6756 14.9727 11.6756 15.5275H12.6756ZM13.9124 14.7043C14.2925 14.7043 14.6178 14.8221 14.8374 14.9894C15.0566 15.1564 15.1491 15.3512 15.1491 15.5275H16.1491C16.1491 14.9727 15.8528 14.5059 15.4434 14.194C15.0345 13.8824 14.4915 13.7043 13.9124 13.7043V14.7043ZM8.83956 12.0386L15.7864 10.0538L15.5117 9.09228L8.56484 11.0771L8.83956 12.0386Z" fill="#212121"/></g><defs><clipPath id="clip0_10309_230171"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

package/src/components/VcButton/VcButton.stories.js

@@ -28,28 +28,28 @@ const GeneralTemplate = (args, {argTypes}) => ({
     components: {VcButton: VcButtonCmp},
     props: Object.keys(argTypes),
     template: `
-        <div>
-        <p v-if="description">{{description}}</p>
-        <VcButton :color="color"
-                  :flavor="flavor"
-                  :ghost="ghost"
-                  :x-small="xSmall"
-                  :small="small"
-                  :large="large"
-                  :x-large="xLarge"
-                  :icon="icon"
-                  :fab="fab"
-                  :pill="pill"
-                  :outlined="outlined"
-                  :loading="loading"
-                  :width="width"
-                  :disabled="disabled"
-                  :href="href"
-                  :prepend-default-icon="prependDefaultIcon"
-                  @click="onClick">
-            {{ label }}
-        </VcButton>
-        </div>`,
+      <div>
+      <p v-if="description">{{ description }}</p>
+      <VcButton :color="color"
+                :flavor="flavor"
+                :ghost="ghost"
+                :x-small="xSmall"
+                :small="small"
+                :large="large"
+                :x-large="xLarge"
+                :icon="icon"
+                :fab="fab"
+                :pill="pill"
+                :outlined="outlined"
+                :loading="loading"
+                :width="width"
+                :disabled="disabled"
+                :href="href"
+                :prepend-default-icon="prependDefaultIcon"
+                @click="onClick">
+        {{ label }}
+      </VcButton>
+      </div>`,
 })
 
 export const Playground = GeneralTemplate.bind({});
@@ -296,7 +296,7 @@ export default {
         fab: {table: {category: 'Shape'}},
         pill: {table: {category: 'Shape'}},
         outlined: {table: {category: 'Shape'}},
-        onClick: {action: 'onClick',table: {disable: true}},
+        onClick: {action: 'onClick', table: {disable: true}},
     },
     parameters: {
         docs: {

package/src/components/VcChip/VcChip.stories.js

@@ -1,5 +1,4 @@
 import VcChipCmp from "./VcChip";
-import {action} from "@storybook/addon-actions";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -36,13 +35,15 @@ Playground.args = {
     invalid: false,
     dataQa: 'vc-chip',
     isRipple: true,
-    onClose: action('close'),
 }
 
 export default {
     title: 'Content Display / VcChip',
     id: 'VcChip',
     component: VcChipCmp,
+    argTypes: {
+        onClose: {action: 'close', table: {disable: true}},
+    },
     parameters: {
         design: {
             type: 'figma',

package/src/components/VcChipList/VcChipList.stories.js

@@ -3,14 +3,20 @@ import VcChipListCmp from './VcChipList';
 const chip = {
     label: 'Chip name',
     avatar: {
-        imagePath: require('@/stories/assets/pics/avatar1.png')
+        imagePath: require(`@/stories/assets/pics/avatar1.png`)
     }
 };
 
 const items = [];
 
 for (let i = 0; i < 30; i++) {
-    items.push(chip);
+    items.push({...chip, label: chip.label + ' ' + (i + 1)});
+}
+
+const baseProps = {
+    items,
+    moreText: 'and $NUMBER more',
+    dataQa: 'VcChipList',
 }
 
 const PlaygroundTemplate = (args, {argTypes}) => ({
@@ -23,21 +29,26 @@ const PlaygroundTemplate = (args, {argTypes}) => ({
     },
     computed: {
         moreString() {
-            return `and ${this.hiddenNumber} more`;
+            return this.moreText.replace('$NUMBER', this.hiddenNumber);
         }
     },
     template: `
       <div>
       <div>VcChipList renders a list of VcChip components according to an array of items.</div>
-      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the "more" indicator.</div>
+      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the
+        "more" indicator.
+      </div>
       <br>
       <div>The "moreText" prop will determine the text for the "more" indicator.</div>
-      <div>It's not editable as a prop in this example, because it's computed in order to include the number of hidden chips.</div>
+      <div>This example shows one way for including the number of hidden items in the "moreText" label.</div>
       <br>
-      <div>This example shows the default content of the VcChip (label) and the default display of the tooltip content.</div>
+      <div>This example shows the default content of the VcChip (label) and the default display of the tooltip
+        content.
+      </div>
       <br>
       <VcChipList :items="items"
                   :more-text="moreString"
+                  :data-qa="dataQa"
                   @onHiddenChipsChange="(num) => this.hiddenNumber = num"/>
       </div>
     `
@@ -46,7 +57,7 @@ const PlaygroundTemplate = (args, {argTypes}) => ({
 export const Playground = PlaygroundTemplate.bind({});
 
 Playground.args = {
-    items
+    ...baseProps,
 };
 
 const CustomTemplate = (args, {argTypes}) => ({
@@ -59,32 +70,34 @@ const CustomTemplate = (args, {argTypes}) => ({
     },
     computed: {
         moreString() {
-            return `and ${this.hiddenNumber} more`;
+            return this.moreText.replace('$NUMBER', this.hiddenNumber);
         }
     },
     template: `
       <div>
       <div>VcChipList renders a list of VcChip components according to an array of items.</div>
-      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the "more" indicator.</div>
+      <div>If some of the items don't fit within 2 rows, their data will be displayed in a tooltip while hovering the
+        "more" indicator.
+      </div>
       <br>
       <div>The "moreText" prop will determine the text for the "more" indicator.</div>
-      <div>It's not editable as a prop in this example, because it's computed in order to include the number of hidden chips.</div>
+      <div>This example shows one way for including the number of hidden items in the "moreText" label.</div>
       <br>
       <div>This example shows the VcChip with custom content and the custom display of the tooltip content.</div>
       <br>
       <VcChipList :items="items"
                   :more-text="moreString"
                   @onHiddenChipsChange="(num) => this.hiddenNumber = num">
-      <template #chipLabel="{item}">
-        <span style="color:gray;margin-inline-end:4px;">{{item.label}} |</span>
-        <span>Custom content</span>
-      </template>
-      <template #tooltipSlot="{items}">
-        <div v-for="item in items">
-          <span style="font-weight:400;">{{item.label}} |</span>
-          <span style="font-weight:600;">Custom content</span>
-        </div>
-      </template>
+        <template #chipLabel="{item}">
+          <span style="color:gray;margin-inline-end:4px;">{{ item.label }} |</span>
+          <span>Custom content</span>
+        </template>
+        <template #tooltipSlot="{items}">
+          <div v-for="item in items">
+            <span style="font-weight:400;">{{ item.label }} |</span>
+            <span style="font-weight:600;">Custom content</span>
+          </div>
+        </template>
       </VcChipList>
       </div>
     `
@@ -93,7 +106,7 @@ const CustomTemplate = (args, {argTypes}) => ({
 export const CustomContent = CustomTemplate.bind({});
 
 CustomContent.args = {
-    items
+    ...baseProps,
 }
 
 export default {

package/src/components/VcDocItem/VcDocItem.spec.js

@@ -162,4 +162,14 @@ describe("VcDocItem.vue", () => {
         await updateProps({ uploaded: false });
         expect(uploadedLabelIcon).not.toBeInTheDocument();
     });
+
+    it("Conditionally rendered file size element", async () => {
+        const { container, updateProps } = renderWithVuetify(VcDocItem, {
+            props: items[1]
+        })
+        const size = container.querySelector('.title__file-size');
+        expect(size).toBeInTheDocument();
+        await updateProps({ fileSize: '' });
+        expect(size).not.toBeInTheDocument();
+    });
 });

package/src/components/VcDocItem/VcDocItem.stories.js

@@ -16,6 +16,7 @@ const Template = (args, {argTypes}) => ({
                    :uploaded="uploaded"
                    :corrupted="corrupted"
                    :corrupted-label="corruptedLabel"
+                   :fileSize="fileSize"
                    @onRemove="onRemove"
                    @onConfirm="onConfirm"
         />
@@ -49,6 +50,7 @@ Jpeg.args = {
     uploaded: false,
     corrupted: false,
     corruptedLabel: 'Try something else',
+    fileSize: items[1].fileSize,
 }
 
 export const DocWithNoExtension = Template.bind({});
@@ -67,6 +69,7 @@ DocWithNoExtension.args = {
     uploaded: false,
     corrupted: false,
     corruptedLabel: 'Try something different',
+    fileSize: items[2].fileSize,
 }
 
 export default {

package/src/components/VcDocItem/VcDocItem.vue

@@ -13,6 +13,9 @@
         <span class="title__header">
           {{ title }}
         </span>
+        <span v-if="fileSize && fileSize.length" class="title__file-size" :data-qa="`${dataQa}-size`">
+          ({{ fileSize }})
+        </span>
         <span v-if="corrupted" class="title__corrupted">
           {{ corruptedLabelText }}
         </span>
@@ -30,12 +33,9 @@
       </div>
     </div>
     <div class="actions" v-if="allowActions" :data-qa="`${dataQa}-actions`" >
-      <VcButton v-for="action in actions"
-                icon
-                @click="$emit(action.type, uid)"
-                :data-qa="`${dataQa}-action`">
+      <VcButton icon :data-qa="`${dataQa}-action`" v-for="action in actions">
         <template #prepend>
-          <VcIcon size="16">${{action.icon}}</VcIcon>
+          <VcIcon size="16" @click="e => $emit(action.type, uid, e)">${{action.icon}}</VcIcon>
         </template>
       </VcButton>
     </div>
@@ -106,6 +106,10 @@ export default {
       type: String,
       required: false,
     },
+    fileSize: {
+      type: String,
+      required: false,
+    },
   },
   computed: {
     extension() {
@@ -205,6 +209,14 @@ export default {
   &__corrupted {
     color: var(--red);
   }
+
+  &__file-size {
+    margin-inline-start: 10px;
+    color: var(--gray-darken-3);
+    font-size: var(--font-size-xx-small);
+    font-weight: var(--font-weight-medium);
+    white-space: nowrap;
+  }
 }
 
 .signature {

package/src/components/VcDocItem/mockData.js

@@ -1,7 +1,7 @@
 const items = [
-  { title: 'Client Contract.pdf', isSignable: true, trimSignable: false, uid: '7349fb0c-8dfc-4b64-94b3-f52b37dda1c6' },
-  { title: 'Brochure.jpeg', isSignable: true, trimSignable: false, uid: 'a325e07a-0c9c-4cd8-86d2-ce7498beb0ae' },
-  { title: 'Application and Offer Logic And a very long title', isSignable: true, trimSignable: true, uid: '2697b7c5-541c-4a16-945e-42bd622c52ff' },
+  { title: 'Client Contract.pdf', isSignable: true, trimSignable: false, uid: '7349fb0c-8dfc-4b64-94b3-f52b37dda1c6', fileSize: '45kb' },
+  { title: 'Brochure.jpeg', isSignable: true, trimSignable: false, uid: 'a325e07a-0c9c-4cd8-86d2-ce7498beb0ae', fileSize: '123kb' },
+  { title: 'Application and Offer Logic And a very long title', isSignable: true, trimSignable: true, uid: '2697b7c5-541c-4a16-945e-42bd622c52ff', fileSize: '12kb' },
   { title: 'DonecNon.doc', isSignable: false, trimSignable: false, uid: 'c9f57ffb-694c-442e-8917-b7ca3c5ab48f', actions: [{type: 'onRemove', icon: 'trash'}, {type: 'onConfirm', icon: 'plus'}] },
 ];
 

package/src/components/VcIcon/VcIcon.stories.js

@@ -2,40 +2,63 @@ import VcIconCmp from './VcIcon';
 import icons from "../../../init/SvgIcons";
 import VcBaseDocs from "@/stories/VcBaseDocs.mdx";
 
+const baseProps = {
+    iconName: 'success',
+    color: 'black',
+    dataQa: 'VcIcon',
+    small: false,
+};
+
 const Template = (args, {argTypes}) => ({
     components: {VcIcon: VcIconCmp},
     props: Object.keys(argTypes),
-    template: '<div><VcIcon :color="color">{{`$${iconName}`}}</VcIcon></div>',
+    template: '<div><VcIcon :color="color" :data-qa="dataQa">{{`$${iconName}`}}</VcIcon></div>',
 })
 
 export const Playground = Template.bind({});
 
 // Set default values
 Playground.args = {
-    iconName: 'success',
-    color: 'black'
+    ...baseProps,
 }
 
 export const WithColor = Template.bind({});
 
 // Set default values
 WithColor.args = {
-    iconName: 'success',
+    ...baseProps,
     color: 'orange',
 }
 
+export const WithColorFromVar = Template.bind({});
+
+// Set default values
+WithColorFromVar.args = {
+    ...baseProps,
+    color: 'var(--gray-darken-2)',
+}
+
 const TemplateSmall = (args, {argTypes}) => ({
     components: {VcIcon: VcIconCmp},
     props: Object.keys(argTypes),
-    template: '<div><VcIcon :color="color" small>{{iconName}}</VcIcon></div>',
+    template: '<div><VcIcon :color="color" :small="small" :size="size" :data-qa="dataQa">{{iconName}}</VcIcon></div>',
 })
 
 export const Small = TemplateSmall.bind({});
 
 // Set default values
 Small.args = {
-    iconName: 'success',
-    color: 'black'
+    ...baseProps,
+    small: true,
+}
+
+export const SizeInPixels = TemplateSmall.bind({});
+
+// Set default values
+SizeInPixels.args = {
+    ...baseProps,
+    iconName: 'check_circle',
+    size: 30,
 }
 
 export default {

package/src/components/VcIcon/VcIcon.vue

@@ -5,13 +5,22 @@ export default {
     dataQa: {
       type: String,
       default: 'VcIcon'
-    }
+    },
+    color: {
+      type: String,
+      default: 'black',
+    },
   },
   render: function (createElement) {
     const props = {
       attrs: {...this.$attrs, 'data-qa': this.dataQa},
-      on: this.$listeners
+      on: this.$listeners,
+      style: {
+        fill: this.$props.color,
+        color: this.$props.color,
+      },
     };
+
     return createElement('v-icon', props, this.$slots.default);
   }
 }

package/src/components/VcSideNav/VcSideNav.spec.js

@@ -0,0 +1,105 @@
+import '@testing-library/jest-dom';
+import VcSideNav from "./VcSideNav.vue";
+import Vue from '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();
+
+Vue.use(Vuetify);
+
+describe("VcSideNav.vue", () => {
+    const renderWithVuetify = (component, options, callback, isMobile = false) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+
+        const vuetify = new Vuetify()
+        if (isMobile) {
+            const breakpoint = {
+                init: jest.fn(),
+                framework: {},
+                smAndDown: true,
+            }
+
+            vuetify.framework.breakpoint = breakpoint;
+        }
+
+        return render(
+            component,
+            {
+                container: document.body.appendChild(root),
+                // for Vuetify components that use the vuetify instance property
+                vuetify,
+                ...options,
+                mocks: {
+                    $t: value => value,
+                    $dst: value => value, // <- for the design system
+                },
+            },
+            callback,
+        )
+    }
+
+    const navGroupsData = [
+        {id: 1, label: 'Group 1', items: [{id: '1', label: 'Item 1'},{id: '2', label: 'Item 2'}]},
+        {id: 2, label: 'Group 2', items: [{id: '3', label: 'Item 3'},{id: '4', label: 'Item 4'}]}
+    ]
+    const slotItemText = 'item as slot';
+    const slotGroupHeaderText = 'group header as slot';
+
+    it ("mount with all elements", async ()=> {
+        const {container, getByTestId} = renderWithVuetify(VcSideNav, {props: {navGroups: navGroupsData}})
+
+        expect(container).toHaveAttribute('data-app', "true")
+        const component = getByTestId('VcSideNav');
+        expect(component).toBeInTheDocument()
+        navGroupsData.forEach((group) => {
+            // Verify Groups
+            let groupElement = getByTestId(group.id)
+            expect(groupElement).toBeInTheDocument()
+            group.items.forEach((item) => {
+                // Verify Items
+                let itemElement = getByTestId(`item-${item.id}`)
+                expect(itemElement).toBeInTheDocument()
+            })
+        })
+    })
+
+    it ("check selected items", async () => {
+        const {emitted, getByTestId, updateProps} = renderWithVuetify(VcSideNav, {props: {navGroups: navGroupsData, selected: '4'}})
+        const selectedCmp = getByTestId(`item-4`);
+        expect(selectedCmp).toBeInTheDocument()
+        expect(selectedCmp).toHaveClass("selected")
+
+        let item2 = getByTestId('item-2')
+        await userEvent.click(item2)
+        expect(emitted().change.length).toBe(1);
+        expect(emitted().change[0]).toEqual(["2"]);
+
+        await updateProps({selected: '2'})
+        item2 = getByTestId('item-2')
+        expect(item2).toHaveClass("selected")
+    })
+
+    it ("check slot usage", async () => {
+        const {getByText} = renderWithVuetify(VcSideNav, {
+            props: {navGroups: navGroupsData, selected: '2'}
+            ,
+            slots: {
+                "item-2" : slotItemText,
+                "group-1-header" : slotGroupHeaderText,
+            }
+        })
+        const slotItem = getByText(slotItemText);
+        expect(slotItem).toBeInTheDocument()
+        expect(slotItem).toHaveClass("selected")
+
+        const slotGroupHeader = getByText(slotGroupHeaderText);
+        expect(slotGroupHeader).toBeInTheDocument()
+    })
+
+
+
+})