@vcita/design-system 1.11.11 → 1.11.13

package/package.json

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

package/src/components/VcChip/VcChip.spec.js

@@ -156,4 +156,20 @@ describe("VcChip.vue", () => {
         expect(chip).toHaveClass('VcChip--small')
     })
 
+    it('Chip width', async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcChip, {
+            props: {
+                label: 'James Howlett',
+            }
+        })
+
+        const chip = getByTestId('vc-chip')
+        expect(chip).toHaveStyle('min-width: 20px');
+        expect(chip).toHaveStyle('max-width: 116px');
+
+        await updateProps({minWidth: 50, maxWidth: 100});
+        expect(chip).toHaveStyle('min-width: 50px');
+        expect(chip).toHaveStyle('max-width: 100px');
+    })
+
 });

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

@@ -15,6 +15,8 @@ const baseProps = {
     selected: false,
     small: false,
     subLabel: '',
+    maxWidth: 116,
+    minWidth: 20,
 }
 
 const GeneralTemplate = (args, {argTypes}) => ({
@@ -37,6 +39,8 @@ const GeneralTemplate = (args, {argTypes}) => ({
               :is-ripple="isRipple"
               :small="small"
               :subLabel="subLabel"
+              :max-width="maxWidth"
+              :min-width="minWidth"
               @onChipClick="onChipClick"
               @input="onClose">
       </VcChip>`,

package/src/components/VcChip/VcChip.vue

@@ -5,6 +5,7 @@
     :ripple="isRipple"
     close-icon="$close"
     :disabled="disabled"
+    :style="{maxWidth: `${maxWidth}px`, minWidth: `${minWidth}px`}"
     :class="{
       'vc-invalid': invalid,
       'vc-avatar': !!avatar,
@@ -82,6 +83,14 @@ export default {
       type: Boolean,
       default: false
     },
+    maxWidth: {
+      type: Number,
+      default: 116,
+    },
+    minWidth: {
+      type: Number,
+      default: 20,
+    },
   }
 };
 </script>
@@ -90,11 +99,13 @@ export default {
 @import '@/../styles/variables.scss';
 
 .VcChip {
-  max-width: fit-content;
   border: 1px solid var(--neutral-lighten-1);
 
-  &__label-wrap {
+  .label-wrap {
     padding-inline: var(--size-value2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .v-chip__content__avatar {

package/src/components/VcChipList/VcChipList.vue

@@ -28,6 +28,8 @@
                 :is-ripple="false"
                 :close-button="showCloseButton"
                 :small="isSmall"
+                :max-width="maxChipWidth"
+                :min-width="minChipWidth"
                 data-qa="vc-chip-item-more"/>
         <span v-else
               v-show="hiddenChips.length"
@@ -81,7 +83,13 @@ export default {
       type: String,
       default: 'text',
       validator: value => ['text', 'chip'].includes(value)
-    }
+    },
+    maxChipWidth: {
+      type: Number,
+    },
+    minChipWidth: {
+      type: Number,
+    },
   },
   data() {
     return {

package/src/components/VcPoweredBy/VcPoweredBy.spec.js

@@ -103,4 +103,51 @@ describe("VcPoweredBy.vue", () => {
         expect(powered).toBeInTheDocument();
     });
 
+    it("mounts with reverse", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByText} = renderWithVuetify(VcPoweredBy, {
+            props: {
+                poweredByText: 'powered by',
+                reverse: true,
+                image: require('@/stories/assets/vc_logo.svg')
+            }
+        })
+
+        // Make sure the component has the data-qa attribute
+        const powered = getByText('powered by');
+        expect(powered).toBeInTheDocument();
+    });
+
+    it("has class of reverse", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId} = renderWithVuetify(VcPoweredBy, {
+            props: {
+                poweredByText: 'powered by',
+                reverse: true,
+                image: require('@/stories/assets/vc_logo.svg')
+            }
+        })
+
+        // Make sure the component has the data-qa attribute
+        const container = getByTestId('VcPoweredBy');
+        expect(container).toHaveClass('alignment-direction-reverse');
+        expect(container).not.toHaveClass('alignment-direction-row');
+    });
+
+    it("has class of row", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId} = renderWithVuetify(VcPoweredBy, {
+            props: {
+                poweredByText: 'powered by',
+                reverse: false,
+                image: require('@/stories/assets/vc_logo.svg')
+            }
+        })
+
+        // Make sure the component has the data-qa attribute
+        const container = getByTestId('VcPoweredBy');
+        expect(container).toHaveClass('alignment-direction-row');
+        expect(container).not.toHaveClass('alignment-direction-reverse');
+    });
+
 });

package/src/components/VcPoweredBy/VcPoweredBy.stories.js

@@ -4,7 +4,7 @@ const Template = (args, {argTypes}) => ({
     components: {VcPoweredBy: VcPoweredByCmp},
     props: Object.keys(argTypes),
     template: `<div><span v-if="!dark">Black background is only to show non dark mode </span><div :class="{'background-color: black': !dark}">    
-    <VcPoweredBy :poweredByText="poweredByText" :dark="dark" :size="size" :image="image"/>
+    <VcPoweredBy :poweredByText="poweredByText" :dark="dark" :size="size" :image="image" :reverse="reverse"/>
     </div></div>`,
 })
 export const Playground = Template.bind({});
@@ -40,6 +40,16 @@ MediumSizeDark.args = {
     size:'md'
 }
 
+export const AlignDirectionReverse = Template.bind({});
+
+AlignDirectionReverse.args = {
+    poweredByText: 'Powered by vcita',
+    dark:true,
+    image: require('@/stories/assets/vc_logo.svg'),
+    size:'md',
+    reverse: true
+}
+
 
 export default {
     title: 'Content Display / VcPoweredBy', // This will control the story sidebar position
@@ -48,7 +58,8 @@ export default {
     argTypes: {
         poweredByText: String,
         dark: Boolean,
-        size:{ options:['sm', 'md']}
+        size:{ options:['sm', 'md']},
+        reverse: Boolean,
     },
     parameters: {
         design: {

package/src/components/VcPoweredBy/VcPoweredBy.vue

@@ -1,10 +1,10 @@
 <template>
-  <VcLayout justify-center align-center :data-qa="dataQa">
-    <VcLayout class="vcita-logo-image-container" :class="`${size}`">
-      <VcImage :image="image"></VcImage>
+  <VcLayout justify-center align-center :class="reverse ? 'alignment-direction-reverse' : 'alignment-direction-row'" :data-qa="dataQa">
+      <VcLayout class="vcita-logo-image-container" :class="`${size}`">
+        <VcImage :image="image"></VcImage>
+      </VcLayout>
+      <span class="vc-powered-by-text mx-2" :class="computedClasses">{{ poweredByText }}</span>
     </VcLayout>
-    <span class="vc-powered-by" :class="computedClasses">{{ poweredByText }}</span>
-  </VcLayout>
 </template>
 
 <script>
@@ -15,6 +15,10 @@ export default {
   name: "VcPoweredBy",
   components: {VcImage, VcLayout},
   props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    },
     poweredByText: {
       type: String,
       required: true
@@ -52,10 +56,17 @@ export default {
 @import "../../scss/mixins.scss";
 @import "../../scss/_i18n-mixins.scss";
 
-.vc-powered-by {
+.vc-powered-by-text {
   font-weight: var(--font-weight-medium);
   color: var(--modal-bg-color);
-  margin-inline-start: var(--size-value2);
+}
+
+.alignment-direction-reverse {
+  flex-direction: row-reverse;
+}
+
+.alignment-direction-row {
+  flex-direction: row;
 }
 
 .vcita-logo-image-container {

package/src/components/table/elements/VcColumnHeader/VcColumnHeader.vue

@@ -110,9 +110,9 @@ export default {
 .VcColumnHeader {
   height: var(--size-value9);
   padding: 0 var(--size-value4);
-  color: var(--gray-darken-4);
+  color: var(--gray-darken-5);
   font-size: 10px;
-  font-weight: var(--font-weight-medium2);
+  font-weight: var(--font-weight-large);
   background-color: var(--gray-lighten-4);
   border-bottom: var(--gray-lighten-2) solid 1px;
 

package/src/components/table/elements/VcDataTable/VcDataTable.vue

@@ -244,6 +244,7 @@ export default {
     position: sticky;
     padding: var(--size-value3) 0;
     margin-bottom: var(--size-value3);
+    margin-left: var(--size-value1);
   }
 
   &--header {

package/src/components/table/elements/VcTableItem/VcTableItem.vue

@@ -23,6 +23,8 @@
                   :lines="1"
                   hidden-item-display="chip"
                   :data-qa="`${dataQa}-tags`"
+                  :max-chip-width="116"
+                  :min-chip-width="20"
                   @onHiddenChipsChange="newValue => hiddenChips = newValue"/>
       <VcButton ghost v-else-if="type === 'tag' && showAddTagButton" :data-qa="`${dataQa}-addTagsButton`"
                 @click="$emit('onClickToAddTag', $props)">