@vcita/design-system 1.3.2 → 1.3.4

package/src/components/VcColorPicker/VcColorPicker.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="VcColorPicker d-flex flex-column"
+       ref="pickerInput" :data-qa="dataQa"
+       v-click-outside="closePicker">
+    <div class="VcColorPicker__input d-flex align-center">
+      <VcSelectField
+          :data-qa="`${dataQa}_select`"
+          :disabled="disabled"
+          class="VcColorPicker__input__dropdown"
+          :class="{'error--text' : getError}"
+          @click.native.stop.prevent="showPicker = true"
+          :readonly="!disabled">
+        <template v-slot:prepend>
+          <div class="color-preview" :style="{backgroundColor: color}"></div>
+        </template>
+      </VcSelectField>
+      <VcTextField
+          :data-qa="`${dataQa}_input`"
+          :class="{'error--text' : getError}"
+          :label="$dst('ds.color_picker.label')"
+          :disabled="disabled"
+          @blur="validateInput"
+          @input="onInputUpdate"
+          v-model="inputColor"></VcTextField>
+    </div>
+    <div class="VcColorPicker__messages mt-1"
+         :class="{'error-message' : getError}"
+         v-if="!showPicker">
+      <span v-if="hint && !getError" :data-qa="`${dataQa}-hint`">{{ hint }}</span>
+      <span v-if="getError" :data-qa="`${dataQa}-error`">{{ getError }}</span>
+    </div>
+    <div class="VcColorPicker__picker mt-2 pa-2" v-if="showPicker && !isMobile">
+      <v-color-picker
+          :hide-mode-switch="hexMode"
+          mode="hexa"
+          :value="color"
+          show-swatches
+          flat
+          :width="getPickerWidth"
+          :data-qa="`${dataQa}_picker`"
+          :swatches="swatches"
+          @update:color="onPickerUpdate">
+      </v-color-picker>
+    </div>
+    <v-bottom-sheet
+        v-if="isMobile"
+        v-model="showPicker">
+      <v-color-picker
+          :data-qa="`${dataQa}_picker`"
+          v-if="showPicker"
+          :hide-mode-switch="hexMode"
+          class="VcColorPicker__picker"
+          mode="hexa"
+          :value="color"
+          show-swatches
+          flat
+          :width="getPickerWidth"
+          @update:color="onPickerUpdate"
+          :swatches="swatches">
+      </v-color-picker>
+    </v-bottom-sheet>
+  </div>
+</template>
+
+<script>
+const regexHex = /^#[0-9A-F]{6}$/i;
+const regexHexa = /^#[0-9A-F]{8}$/i;
+const swatchesConst = [["#EF4444", '#F97316'], ['#FACC15', '#4ADE80'], ['#2DD4BF', '#3B82F6'], ['#6467F2', '#EC4899'], ['#F43F5E', '#D946EF'], ['#8B5CF6', '#0EA5E9'], ['#10B981', '#84CC16']];
+
+// import ClickOutside from 'vue-click-outside';
+import VcTextField from "@/components/VcTextField/VcTextField.vue";
+import VcSelectField from '@/components/VcSelectField/VcSelectField.vue';
+
+export default {
+  name: "VcColorPicker",
+  // directives: {
+  //   ClickOutside
+  // },
+  components: {VcTextField, VcSelectField},
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcColorPicker'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hint: {
+      type: String,
+      default: ""
+    },
+    color: {
+      type: String,
+      default: "",
+      validator: prop => !prop || (regexHex.test(prop)) || (regexHexa.test(prop)),
+    },
+    /**
+     * Similar to Vuetify rules prop - array of functions that return true or the message error as a string
+     * See an example in the storybook
+     */
+    rules: {
+      type: Array,
+      validator: prop => prop.every(rule => typeof rule === "function"),
+    },
+    hexMode: {
+      type: Boolean,
+      default: false
+    }
+  },
+  model: {
+    prop: 'color',
+    event: 'change'
+  },
+  data(vm) {
+    return {
+      showPicker: false,
+      inputColor: this.getHexMode(vm.color?.toUpperCase()),
+      swatches: swatchesConst,
+    }
+  },
+  methods: {
+    isValidHexColor(val) {
+      return (regexHex.test(val)) || (regexHexa.test(val));
+    },
+    closePicker() {
+      if (this.isMobile) return; // Don't close the picker after it's clicked
+      this.showPicker = false;
+    },
+    onPickerUpdate(color) {
+      this.inputColor = color.hexa.toUpperCase();
+      this.$emit('change', this.inputColor);
+    },
+    validateInput() {
+      this.inputColor = (this.isValidHexColor(this.inputColor) ? this.inputColor : this.color).toUpperCase();
+    },
+    onInputUpdate(color) {
+      if (this.isValidHexColor(color)) this.$emit('change', color.toUpperCase())
+    },
+    getHexMode(color) {
+      if (this.hexMode && color?.toString().match(/#[a-zA-Z0-9]{8}/)) {
+        return color.substr(0, 7).toUpperCase();
+      }
+      return color;
+    },
+  },
+  computed: {
+    getPickerWidth() {
+      if (this.isMobile) return window.innerWidth;
+      else return (this.$refs?.pickerInput?.offsetWidth);
+    },
+    isMobile() {
+      return (!this.$vuetify.breakpoint.mdAndUp);
+    },
+    getError() {
+      if (!this.rules) return false;
+      let errorMessages = this.rules.map((rule) => {
+        const resolve = rule.call(this, this.inputColor)
+        if (typeof (resolve) === 'string') return resolve;
+      }).filter(item => !!item);
+      return errorMessages[0];
+    }
+  },
+  watch: {
+    color(value) {
+      this.inputColor = this.getHexMode(value);
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.v-dialog:has(.v-color-picker__color) {
+  .v-color-picker__color {
+    &:has(span.v-icon) {
+      border: 2px solid #FFFFFF;
+      box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
+
+      span.v-icon {
+        display: none;
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" scoped>
+.VcColorPicker {
+  direction: ltr !important;
+
+  &__input {
+    &__dropdown {
+      width: var(--size-value18);
+      max-width: var(--size-value18);
+
+      .color-preview {
+        width: var(--size-value6);
+        height: var(--size-value6);
+        border-radius: var(--border-radius-circle);
+      }
+    }
+  }
+
+  &__picker {
+    box-shadow: var(--shadow-6);
+  }
+
+  &__messages {
+    font-weight: var(--font-weight-medium);
+    font-size: var(--font-size-xx-small);
+    line-height: var(--size-value4);
+    color: var(--gray-darken-3);
+
+    &.error-message {
+      color: var(--red);
+    }
+  }
+
+  ::v-deep {
+    .VcSelectField {
+      border-radius: var(--border-radius) 0 0 var(--border-radius);
+
+      fieldset {
+        margin-top: 1px;
+      }
+    }
+
+    .VcTextInput.v-text-field .v-input__slot {
+      border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    }
+
+    .v-color-picker__canvas {
+      border-radius: var(--border-radius);
+    }
+
+    .v-dialog__content {
+      background-color: red;
+    }
+
+    .v-color-picker__color {
+      &:has(span.v-icon) {
+        border: 2px solid #FFFFFF;
+        box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
+
+        span.v-icon {
+          display: none;
+        }
+      }
+    }
+
+    .v-color-picker__input {
+      font-size: var(--font-size-x-small);
+      font-weight: var(--font-weight-medium2);
+    }
+
+    .v-color-picker__swatches > div {
+      padding: unset;
+      justify-content: space-between;
+    }
+
+    .v-color-picker__controls {
+      padding: var(--size-value4) var(--size-value2) var(--size-value6);
+    }
+
+    .v-color-picker__edit {
+      padding-bottom: var(--size-value4);
+      border-bottom: var(--border-frame);
+    }
+  }
+}
+</style>

package/src/components/VcFilterPanel/VcFilterPanel.spec.js

@@ -77,4 +77,19 @@ describe("VcFilterPanel.vue", () => {
         const slotContent = getByText('content');
         expect(slotContent).toBeInTheDocument();
     });
+    it("does not render header with the right prop", async () => {
+        const {queryByText, updateProps} = renderWithVuetify(VcFilterPanel, {
+            props: {
+                title: 'filter panel',
+                shouldDisplayHeader: true,
+            },
+        })
+        let title = queryByText('filter panel');
+        expect(title).toBeInTheDocument();
+        await updateProps({
+            shouldDisplayHeader: false,
+        })
+        title = queryByText('filter panel');
+        expect(title).not.toBeInTheDocument();
+    });
 });

package/src/components/VcFilterPanel/VcFilterPanel.stories.js

@@ -9,6 +9,8 @@ const Template = (args, {argTypes}) => ({
       <VcFilterPanel :title="title"
                      :is-loading="isLoading"
                      :show-close-button="showCloseButton"
+                     :type="type"
+                     :shouldDisplayHeader="shouldDisplayHeader"
                      :data-qa="dataQa"
                      @close="onClose"/>
       </div>`,
@@ -21,7 +23,9 @@ Playground.args = {
     title: 'Filter',
     isLoading: false,
     showCloseButton: true,
-    dataQa: 'VcFilterPanel'
+    dataQa: 'VcFilterPanel',
+    type: 'primary',
+    shouldDisplayHeader: true,
 }
 
 export default {
@@ -30,6 +34,10 @@ export default {
     component: VcFilterPanelCmp,
     argTypes: {
         onClose: {action: 'close', table: {disable: true}},
+        type: {
+            options: ['primary', 'secondary'],
+            control: {type: 'radio'}
+        },
     },
     parameters: {
         design: {

package/src/components/VcFilterPanel/VcFilterPanel.vue

@@ -1,7 +1,7 @@
 <template>
-  <VcLayout column align-content-space-between class="VcFilterPanel" :data-qa="dataQa">
+  <VcLayout column align-content-space-between class="VcFilterPanel" :class="`vc-${flavor}`" :data-qa="dataQa">
     <VcLayout class="VcFilterPanel-container" column>
-      <VcLayout class="VcFilterPanel-label-container">
+      <VcLayout class="VcFilterPanel-label-container" v-if="shouldDisplayHeader">
         <div class="filter">
           <span class="filter-label">{{ title }}</span>
           <slot name="header"/>
@@ -44,6 +44,15 @@ export default {
       type: Boolean,
       default: false,
     },
+    flavor: {
+      type: String,
+      default: 'primary',
+      validator: prop => ['primary', 'secondary'].includes(prop),
+    },
+    shouldDisplayHeader: {
+      type: Boolean,
+      default: true,
+    },
     dataQa: {
       type: String,
       default: 'VcFilterPanel'
@@ -101,6 +110,18 @@ export default {
     }
   }
 
+  &.vc-secondary {
+    .filter {
+      border-bottom: none;
+      background-color: var(--modal-bg-color);
+
+      .filter-label {
+        font-weight: 700;
+        font-size: 18px;
+      }
+    }
+  }
+
   .VcFilterPanel-content-wrapper {
     flex-grow: 1;
   }
@@ -125,7 +146,7 @@ export default {
       margin-right: var(--size-value0);
 
       svg {
-        fill:var(--gray-darken-2);
+        fill: var(--gray-darken-2);
         width: var(--size-value4);
         height: var(--size-value4);
       }

package/src/components/VcGalleryItem/VcGalleryItem.stories.js

@@ -9,6 +9,8 @@ const baseProps = {
     selected: false,
     disabled: false,
     dataQa: 'VcGalleryItem',
+    actionsSlotContent: null,
+    labelSlotContent: null,
 }
 
 const Template = (args, {argTypes}) => ({

package/src/components/VcGroupedItems/VcGroupedItems.spec.js

@@ -0,0 +1,148 @@
+import '@testing-library/jest-dom';
+import VcGroupedItems from "./VcGroupedItems.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);
+
+const basicProps = {
+    itemGroups: [
+        {
+            label: 'GROUP 1',
+            id: 1,
+            items: [
+                {id: '1', label: 'Menu Item 1'},
+                {id: '2', label: 'Menu Item 2'},
+                {id: '3', label: 'Menu Item 3'},
+                {id: '4', label: 'Menu Item 4'},
+                {id: '5', label: 'Menu Item 5', disabled: true},
+            ]
+        },
+        {
+            label: 'GROUP 2',
+            id: 2,
+            items: [
+                {id: '6', label: 'Menu Item 6'},
+                {id: '7', label: 'Menu Item 7'},
+                {id: '8', label: 'Menu Item 8'},
+                {id: '9', label: 'Menu Item 9'},
+                {id: '10', label: 'Menu Item 10'},
+            ]
+        },
+    ],
+    showDividers: false,
+    flavor: 'flat',
+    dataQa: 'VcGroupedItems',
+}
+
+describe("VcGroupedItems.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,
+        )
+    }
+
+    it("mounts and shows groups and items", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcGroupedItems, {
+            props: {
+                ...basicProps,
+            }
+        });
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        // Make sure the component has the data-qa attribute
+        const component = getByTestId('VcGroupedItems');
+        expect(component).toBeInTheDocument();
+
+        const group1 = getByText('GROUP 1');
+        expect(group1).toBeInTheDocument();
+
+        const group2 = getByText('GROUP 2');
+        expect(group2).toBeInTheDocument();
+
+        for (let i = 1; i < 11; i++) {
+            const item = getByText(`Menu Item ${i}`);
+            expect(item).toBeInTheDocument();
+        }
+    });
+
+    it("shows dividers", async () => {
+        const {getByRole, updateProps, getAllByRole} = renderWithVuetify(VcGroupedItems, {
+            props: {
+                ...basicProps,
+                showDividers: true,
+            }
+        });
+
+        const divider = getByRole('separator');
+        expect(divider).toBeInTheDocument();
+
+        const thirdGroup = {
+            label: 'GROUP 3',
+            id: 3,
+            items: [
+                {id: '11', label: 'Menu Item 11'},
+                {id: '12', label: 'Menu Item 12'},
+                {id: '13', label: 'Menu Item 13'},
+                {id: '14', label: 'Menu Item 14'},
+                {id: '15', label: 'Menu Item 15'},
+            ]
+        };
+
+        await updateProps({itemGroups: [...basicProps.itemGroups, thirdGroup]});
+
+        const dividers = getAllByRole('separator');
+        expect(dividers.length).toBe(2);
+    });
+
+    it("emits selection events", async () => {
+        const {getByText, emitted} = renderWithVuetify(VcGroupedItems, {
+            props: {
+                ...basicProps,
+            }
+        });
+
+        await userEvent.click(getByText('Menu Item 1'));
+        expect(emitted().change.length).toBe(1);
+        expect(emitted().change[0][0]).toBe('1');
+
+        await userEvent.click(getByText('Menu Item 5'));
+        expect(emitted().change.length).toBe(2);
+        expect(emitted().change[1][0]).toBe('5');
+    });
+
+});

package/src/components/VcGroupedItems/VcGroupedItems.stories.js

@@ -0,0 +1,135 @@
+import VcGroupedItemsCmp from './VcGroupedItems';
+import VcBaseDocs from '@/stories/VcBaseDocs.mdx'
+import VcBadge from "@/components/VcBadge/VcBadge";
+import VcIcon from "@/components/VcIcon/VcIcon";
+
+const basicProps = {
+    itemGroups: [
+        {
+            label: 'GROUP 1',
+            id: 1,
+            items: [
+                {id: '1', label: 'Menu Item'},
+                {id: '2', label: 'Menu Item'},
+                {id: '3', label: 'Menu Item'},
+                {id: '4', label: 'Menu Item'},
+                {id: '5', label: 'Menu Item', disabled: true},
+            ]
+        },
+        {
+            label: 'GROUP 2',
+            id: 2,
+            items: [
+                {id: '6', label: 'Menu Item'},
+                {id: '7', label: 'Menu Item'},
+                {id: '8', label: 'Menu Item'},
+                {id: '9', label: 'Menu Item'},
+                {id: '10', label: 'Menu Item'},
+            ]
+        },
+    ],
+    showDividers: false,
+    flavor: 'flat',
+    dataQa: 'VcGroupedItems',
+}
+
+const Template = (args, {argTypes}) => ({
+    components: {VcGroupedItems: VcGroupedItemsCmp},
+    props: Object.keys(argTypes),
+    data: () => ({
+        selectedIdx: undefined,
+    }),
+    template: `
+      <div>
+      <VcGroupedItems :item-groups="itemGroups" :selected="selectedIdx" :show-dividers="showDividers" :flavor="flavor"
+                      :dataQa="dataQa"
+                      @change="onChange"/>
+      </div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    ...basicProps,
+}
+
+export const ElevatedFlavor = Template.bind({});
+
+// Set default values
+ElevatedFlavor.args = {
+    ...basicProps,
+    flavor: 'elevated',
+}
+
+export const FlatFlavor = Template.bind({});
+
+// Set default values
+FlatFlavor.args = {
+    ...basicProps,
+    flavor: 'elevated',
+}
+
+export const WithDividers = Template.bind({});
+
+// Set default values
+WithDividers.args = {
+    ...basicProps,
+    showDividers: true,
+}
+
+const TemplateWithSlots = (args, {argTypes}) => ({
+    components: {VcGroupedItems: VcGroupedItemsCmp, VcBadge, VcIcon},
+    props: Object.keys(argTypes),
+    data: () => ({
+        selectedIdx: undefined,
+    }),
+    template: `
+      <div>
+      <VcGroupedItems :item-groups="itemGroups" :selected="selectedIdx" :show-dividers="showDividers" :flavor="flavor"
+                      :dataQa="dataQa">
+        <template #group-1-header>
+          <div class="d-flex align-center">
+            <span>Group Title</span>
+            <VcBadge class="ps-2" badgeText="new" :offsetX="-2" :offsetY="0"></VcBadge>
+          </div>
+        </template>
+        <template #item-4>
+          <div class="d-flex align-center flex-grow-1 justify-space-between px-6">
+            <span>Slot Label</span>
+            <div class="d-flex align-center">
+              <vc-icon size="16" color="black" class="mx-3">$magnify_glass</vc-icon>
+              <vc-icon size="16" color="black" class="mx-3">$plus</vc-icon>
+            </div>
+          </div>
+        </template>
+      </VcGroupedItems>
+      </div>`,
+})
+
+export const UsingGroupAndItemSlots = TemplateWithSlots.bind({});
+
+UsingGroupAndItemSlots.args = {
+    ...basicProps,
+}
+
+export default {
+    title: 'containers / VcGroupedItems', // This will control the story sidebar position
+    id: 'VcGroupedItems', // This will be the permanent link to this component
+    component: VcGroupedItemsCmp,
+    argTypes: {
+        onChange: {action: 'change', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=251%3A908',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+        docs: {
+            page: VcBaseDocs,
+        },
+    },
+};