@vcita/design-system 0.0.12-prod.beta.27 → 0.1.2

package/src/components/VcAvatar/VcAvatar.spec.js

@@ -0,0 +1,110 @@
+import '@testing-library/jest-dom'
+import VcAvatar from "./VcAvatar.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+const propWithImage = {imagePath: "https://www.w3schools.com/howto/img_avatar.png", text: "John"}
+const propWithText = {text: "John"}
+const propWithOneLetter = {name: "T"}
+const propWithNoLastName = {name: "Thomas"}
+const propWithNameSpace = {name: " "}
+const propWithInitials = {name: "John Snow"}
+const propWithBadgeIcon = {badgeIcon: "flag", name: "JohnSnow"}
+
+describe("VcAvatar.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: {
+                    $t: value => value,
+                },
+            },
+            callback,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcAvatar, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it("avatar has image", () => {
+        const {getByTestId} = renderWithVuetify(VcAvatar, {
+            props: propWithImage
+        })
+
+        const image = getByTestId('avatarImage')
+        expect(image).toBeInTheDocument()
+    });
+
+    it("avatar has text", () => {
+        const {getByText} = renderWithVuetify(VcAvatar, {
+            props: propWithText
+        })
+
+        const text = getByText('John')
+        expect(text).toBeInTheDocument()
+    });
+
+    it("avatar has name of one letter", () => {
+        const {getByText} = renderWithVuetify(VcAvatar, {
+            props: propWithOneLetter
+        })
+
+        const text = getByText('T')
+        expect(text).toBeInTheDocument()
+    });
+
+    it("avatar has name of two letters", () => {
+        const {getByText} = renderWithVuetify(VcAvatar, {
+            props: propWithNoLastName
+        })
+
+        const text = getByText('TH')
+        expect(text).toBeInTheDocument()
+    });
+
+    it("avatar has name of space", () => {
+        const {getByTestId} = renderWithVuetify(VcAvatar, {
+            props: propWithNameSpace
+        })
+
+        const text = getByTestId('avatar-initials');
+        expect(text).toHaveTextContent('');
+    });
+
+    it("avatar has initials", () => {
+        const {getByText} = renderWithVuetify(VcAvatar, {
+            props: propWithInitials
+        })
+
+        const initials = getByText('JS')
+        expect(initials).toBeInTheDocument()
+    });
+    it("avatar has badge icon", () => {
+        const {getByTestId} = renderWithVuetify(VcAvatar, {
+            props: propWithBadgeIcon
+        })
+
+        const icon = getByTestId('avatarBadgeIcon')
+        expect(icon).toBeInTheDocument()
+    });
+
+});

package/src/components/VcAvatar/VcAvatar.stories.js

@@ -0,0 +1,101 @@
+import VcAvatarCmp from './VcAvatar';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcAvatar: VcAvatarCmp},
+    props: Object.keys(argTypes),
+    template: `<div>
+                <VcAvatar 
+                    :color-id="colorId" 
+                    :name="name" 
+                    :text="text" 
+                    :size="size" 
+                    :badgeIcon="badgeIcon" 
+                    :lightMode="lightMode" 
+                    :lightModeTooltip="lightModeTooltip" 
+                    :badgePosition="badgePosition" 
+                    :image-path="imagePath"/>
+              </div>`,
+});
+
+export const Playground = Template.bind({});
+
+Playground.args = {
+    size: 'lg',
+    colorId: 1,
+    name: 'John Smith'
+}
+
+export const WithImage = Template.bind({});
+
+WithImage.args = {
+    imagePath: "https://www.w3schools.com/howto/img_avatar.png",
+    size: 'md'
+}
+
+export const WithText = Template.bind({});
+
+WithText.args = {
+    colorId: 3,
+    text: "Text",
+}
+
+export const WithName = Template.bind({});
+
+WithName.args = {
+    colorId: 1,
+    name: "John Smith",
+}
+
+export const WithBadge = Template.bind({});
+
+WithBadge.args = {
+    colorId: 1,
+    imagePath: "https://www.w3schools.com/howto/img_avatar.png",
+    badgeIcon: 'flag',
+}
+
+export const WithBadgeLeft = Template.bind({});
+
+WithBadgeLeft.args = {
+    colorId: 1,
+    imagePath: "https://www.w3schools.com/howto/img_avatar.png",
+    badgeIcon: 'confirmed',
+    badgePosition: 'left'
+}
+
+export const WithLightMode = Template.bind({});
+
+WithLightMode.args = {
+    lightMode: true,
+    lightModeTooltip: 'tooltip',
+    text: '+2'
+}
+
+export default {
+    title: 'Content Display / VcAvatar',
+    component: VcAvatarCmp,
+    id: 'VcAvatarCmp',
+    argTypes: {
+        size: {
+            options: ['x-sm', 'sm','md','lg'],
+            control: {type: 'radio'}
+        },
+        badgePosition: {
+            options: ['right', 'left'],
+            control: {type: 'radio'}
+        },
+        badgeIcon: {
+            options: ['flag', 'customer','inactive','vip','confirmed'],
+            control: {type: 'select'}
+        }
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita-ui-library?node-id=95%3A149',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};

package/src/components/VcBottomActions/VcBottomActions.spec.js

@@ -0,0 +1,64 @@
+import '@testing-library/jest-dom'
+import VcBottomActions from "./VcBottomActions.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../testing-library.config";
+
+init();
+
+describe("VcBottomActions.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,
+        )
+    }
+    const defaultProps = {
+        items: [
+            {
+                title: 'Move to guest list',
+                event: 'moveToGustList',
+                icon: 'information'
+            }, {
+                title: 'Remove from wait list',
+                event: 'remove',
+                icon: 'example'
+            }, {
+                title: 'Go to client page',
+                event: 'goToClientPage',
+                icon: 'vip'
+            }
+        ],
+        header: true,
+        title: `Ronald's actions`,
+        client: {
+            imagePath: 'https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y',
+            name: 'Victor Chohen',
+            firstName: 'Ronald',
+            colorId: 1
+        },
+        dataQa: 'bottom-action-test'
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcBottomActions, {
+            props: defaultProps
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});

package/src/components/VcBottomActions/VcBottomActions.stories.js

@@ -0,0 +1,103 @@
+import VcBottomActionsCmp from './VcBottomActions';
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcBottomActions: VcBottomActionsCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+        <VcBottomActions :items="items"
+                         :header="header"
+                         :title="title"
+                         :client="client"
+                         :data-qa="dataQa"
+                         @close="onClose"
+                         @action="onAction">
+          <template v-slot="{attrs, on}">
+            <v-icon v-bind="attrs" v-on="on">$three_dots</v-icon>
+          </template>
+        </VcBottomActions>
+      </div>`,
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    items: [
+        {
+            title: 'Move to guest list',
+            event: 'moveToGustList',
+            icon: 'information'
+        }, {
+            title: 'Remove from waitlist',
+            event: 'remove',
+            icon: 'example'
+        }, {
+            title: 'Go to client page',
+            event: 'goToClientPage',
+            icon: 'vip'
+        }],
+    header: true,
+    title: `Ronald's actions`,
+    client: {
+        imagePath: 'https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y',
+        name: 'Victor Chohen',
+        firstName: 'Ronald',
+        colorId: 1
+    },
+    dataQa: 'playground-qa'
+}
+const noHeaderTemplate = (args, {argTypes}) => ({
+    components: {VcBottomActions: VcBottomActionsCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+        <VcBottomActions :items="items"
+                         :data-qa="dataQa"
+                         @close="onClose"
+                         @action="onAction">
+          <template>
+            <v-icon>$information</v-icon>
+          </template>
+        </VcBottomActions>
+      </div>`,
+})
+
+export const No_Header_Template = noHeaderTemplate.bind({});
+
+// Set default values
+No_Header_Template.args = {
+    items: [
+        {
+            title: 'Move to guest list',
+            event: 'moveToGustList'
+        }, {
+            title: 'Remove from wait list',
+            event: 'remove'
+        }, {
+            title: 'Go to client page',
+            event: 'goToClientPage'
+        }
+    ],
+    dataQa: 'bottom-sheet-qa'
+}
+
+export default {
+    title: 'Controls / VcBottomActions',
+    id: 'VcBottomActions',
+    component: VcBottomActionsCmp,
+    argTypes: {
+        onAction: {action: 'onAction'},
+        onClose: {action: 'onClose'},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/lF4Iiyl1UcTQqWpszonNsx/Event\'s-Waitlist?node-id=617%3A83022',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/bottom-sheets/',
+        }
+    },
+};

package/src/components/VcBottomActions/VcBottomActions.vue

@@ -1,7 +1,6 @@
 <template>
   <v-bottom-sheet :persistent="header"
                   :value="value"
-                  @input="(newVal) => $emit('input', {isOpen: newVal})"
                   content-class="vc-bottom-sheet">
 
     <template v-slot:activator="{attrs, on}">
@@ -18,8 +17,9 @@
         <span v-if="title" class="vc-title" v-html="title"></span>
         <vc-layout class="button-close-wrapper">
           <vc-button class="close-button"
-                     @click="$emit('input', {isOpen: false , action: 'closeButton'})"
+                     @click="$emit('close')"
                      :ripple="false"
+                     data-qa="close-sheet-button"
                      plain>
             <template #append>
               <vc-icon>$close_button</vc-icon>
@@ -31,7 +31,7 @@
         <v-list-item class="sheet-item"
                      v-for="item in items"
                      :key="item.title"
-                     @click="$emit('input', {isOpen: false , action: item.event})"
+                     @click="$emit('action', item.event)"
         >
           <vc-layout align-center class="option-title">
               <vc-icon v-if="item.icon && !isNotAllItemsWithIcons" class="icon-item">{{ `$${item.icon}` }}</vc-icon>
@@ -103,7 +103,7 @@ export default {
     .subheader {
       border-bottom: 1px solid rgba(0, 0, 0, 0.12);
       padding: var(--size-value3) var(--size-value4);
-      color: $black-2;
+      color: var(--gray-darken-5);
 
       .avatar {
         margin-inline-end: var(--size-value3);

package/src/components/VcButton/VcButton.spec.js

@@ -0,0 +1,181 @@
+import '@testing-library/jest-dom'
+import VcButton from "./VcButton.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+const props = {
+    basic: {
+        lable: 'button 1'
+    },
+    icon: {
+        lable: 'button 1',
+        icon: true
+    },
+    customIcon: {
+        lable: 'button 1',
+        customIcon: 'arrow_right'
+    },
+    fab: {
+        lable: 'button 1',
+        fab: true
+    },
+    plain: {
+        lable: 'button 1',
+        plain: true
+    },
+    xSmall: {
+        lable: 'button 1',
+        xSmall: true
+    },
+    small: {
+        lable: 'button 1',
+        small: true
+    },
+    large: {
+        lable: 'button 1',
+        large: true
+    },
+    xlarge: {
+        lable: 'button 1',
+        xLarge: true
+    },
+    loading: {
+        lable: 'button 1',
+        loading: true
+    },
+    width: {
+        lable: 'button 1',
+        width: 20
+    }
+}
+
+describe("VcButton.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,
+      },
+      callback,
+    )
+  }
+
+  it("render VcButton", () => {
+    // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+    const {container} = renderWithVuetify(VcButton,{props: props.basic})
+    // Expect options: https://github.com/testing-library/jest-dom
+    expect(container).toHaveAttribute('data-app', 'true');
+  });
+
+  it("button get rounded class", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.icon})
+    const roundBtn = container.querySelector('.v-btn--round');
+
+    expect(roundBtn).toBeInTheDocument();
+  });
+
+  it("Button get icon", () => {
+      //Todo need to import vuetify config with icons
+    // const {container} = renderWithVuetify(VcButton,{props: props.customIcon})
+    // const xxx = container.querySelector('.arrow-right')
+    //   debugger
+    //
+    // expect(xxx).toBeInTheDocument();
+  });
+
+  it("button get class fab (button is round)", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.fab})
+    const fabBtn = container.querySelector('.v-btn--fab');
+
+    expect(fabBtn).toBeInTheDocument();
+  });
+
+  // it("button get class plain (background not change on hover)", () => {
+  //   const {container, debug} = renderWithVuetify(VcButton,{props: props.plain})
+  //   const plainBtn = container.querySelector('.v-btn--plain');
+  //
+  //   debug();
+  //
+  //   expect(plainBtn).toBeInTheDocument();
+  // });
+
+  it("button get default size class", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.basic})
+    const smallBtn = container.querySelector('.v-size--default');
+
+    expect(smallBtn).toBeInTheDocument();
+  });
+
+  it("button get extra small class", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.xSmall})
+    const xSmallBtn = container.querySelector('.v-size--x-small');
+
+    expect(xSmallBtn).toBeInTheDocument();
+  });
+
+  it("button get small class", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.small})
+    const smallBtn = container.querySelector('.v-size--small');
+
+    expect(smallBtn).toBeInTheDocument();
+  });
+
+  it("button get large class", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.large})
+
+    const largeBtn = container.querySelector('.v-size--large');
+
+    expect(largeBtn).toBeInTheDocument();
+  });
+
+  it("button get extra-large class", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.xlarge})
+    const largeBtn = container.querySelector('.v-size--x-large');
+
+    expect(largeBtn).toBeInTheDocument();
+  });
+
+  it("button show spinner icon", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.loading})
+    const loaderBtn = container.querySelector('.v-btn--loading');
+    const loaderElem = container.querySelector('.v-btn__loader');
+
+    expect(loaderBtn).toBeInTheDocument();
+    expect(loaderElem).toBeInTheDocument();
+  });
+  
+  it("button have 20 px width", () => {
+    const {container} = renderWithVuetify(VcButton,{props: props.width})
+    const btn = container.querySelector('.v-btn');
+
+    expect(btn).toHaveStyle('width: 20px');
+  });
+
+  it("button get only specific color names", () => {
+    const {container} = renderWithVuetify(VcButton,{props: {
+        ...props.basic,
+        color: 'secondary'
+    }})
+    const btnWithColor = container.querySelector('.secondary');
+
+    expect(btnWithColor).toBeInTheDocument();
+  });
+  
+  it("component failed for having wrong color", () => {
+    const validator = VcButton.props.color.validator;
+
+    expect(validator('#fff')).toBeFalsy();
+    expect(validator('spring')).toBeFalsy();
+  });
+
+});