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

package/src/components/VcForm/VcForm.stories.js

@@ -0,0 +1,44 @@
+import VcFormCmp from './VcForm';
+import {action} from "@storybook/addon-actions";
+import VcTextField from "@/components/VcTextField/VcTextField";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcForm: VcFormCmp, VcTextField},
+    props: Object.keys(argTypes),
+    data: () => ({
+        name: '',
+        nameRules: [
+            v => !!v || 'Name is required',
+            v => (v && v.length <= 10) || 'Name must be less than 10 characters',
+        ],
+    }),
+    template: '<div>' +
+        '<VcForm @input="onInput" @submit="onSubmit">' +
+        '<VcTextField v-model="name" :counter="10"' +
+        '      :rules="nameRules"' +
+        '      label="Name"' +
+        '      required/>' +
+        '</VcForm>' +
+        '</div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    param: 'value',
+    onSubmit: action('onSubmit'),
+    onInput: action('onInput'),
+}
+
+export default {
+    title: 'Form / VcForm',
+    id: 'VcForm',
+    component: VcFormCmp,
+    parameters: {
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/forms', // will make the tag a link
+        },
+    },
+};

package/src/components/VcHourInput/VcHourInput.stories.js

@@ -0,0 +1,36 @@
+// import VcHourInputCmp from './VcHourInput';
+//
+// const Template = (args, {argTypes}) => ({
+//     components: {VcHourInput: VcHourInputCmp},
+//     props: Object.keys(argTypes),
+//     template: '<div><VcHourInput :param="param" @onClick="onClick"/></div>',
+// })
+//
+// // export const Playground = Template.bind({});
+// //
+// // // Set default values
+// // Playground.args = {
+// //     param: 'value',
+// // }
+//
+// // export default {
+// //     title: 'VcHourInput',
+// //     id: 'VcHourInput',
+// //     component: VcHourInputCmp,
+// //     argTypes: {
+// //         param: {
+// //             options: ['value1', 'value2'],
+// //             control: {type: 'radio'}
+// //         },
+// //     },
+// //     parameters: {
+// //         design: {
+// //             type: 'figma',
+// //             url: 'https://www.figma.com',
+// //         },
+// //         status: {
+// //             type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+// //             url: 'http://www.url.com/status', // will make the tag a link
+// //         },
+// //     },
+// // };

package/src/components/VcIcon/VcIcon.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+import VcIcon from "./VcIcon.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+describe("VcIcon.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,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcIcon, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});

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

@@ -0,0 +1,53 @@
+import VcIconCmp from './VcIcon';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcIcon: VcIconCmp},
+    props: Object.keys(argTypes),
+    template: '<div><VcIcon :color="color">{{iconName}}</VcIcon></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    iconName: 'mdi-close',
+    color: 'black'
+}
+
+export const WithColor = Template.bind({});
+
+// Set default values
+WithColor.args = {
+    iconName: 'mdi-close',
+    color: 'orange',
+}
+
+const TemplateSmall = (args, {argTypes}) => ({
+    components: {VcIcon: VcIconCmp},
+    props: Object.keys(argTypes),
+    template: '<div><VcIcon :color="color" small>{{iconName}}</VcIcon></div>',
+})
+
+export const Small = TemplateSmall.bind({});
+
+// Set default values
+Small.args = {
+    iconName: 'mdi-close',
+    color: 'black'
+}
+
+export default {
+    title: 'Content Display / VcIcon',
+    id: 'VcIcon',
+    component: VcIconCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcIconWithTooltip/VcIconWithTooltip.spec.js

@@ -0,0 +1,156 @@
+import '@testing-library/jest-dom'
+import VcIconWithTooltip from "./VcIconWithTooltip.vue";
+import Vuetify from 'vuetify'
+import {render, waitFor} from "@testing-library/vue";
+import userEvent from '@testing-library/user-event';
+import init from "../../../testing-library.config";
+
+init();
+
+describe("VcIconWithTooltip.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 = {
+        size: 12,
+        header: "John Lennon",
+        content: "Life is what happens when you're busy making other plans",
+        top: true,
+        bottom: false,
+        nudgeLeft: 0,
+        nudgeRight: 0,
+        dataQa: 'test-tooltip',
+    }
+
+    it("mounts", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText, queryByText} = renderWithVuetify(VcIconWithTooltip, {
+            props: defaultProps
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+
+        const tooltipButton = getByTestId(`${defaultProps.dataQa}-icon`)
+        expect(getByText('$information')).toBeInTheDocument()
+        expect(queryByText('$info_fill')).toBeNull()
+
+        let tooltipContent = null
+        await userEvent.hover(tooltipButton)
+        // Let the hover commence
+        await waitFor(() => {
+            tooltipContent = getByTestId(`${defaultProps.dataQa}-content`)
+            // Check tooltip is active and with the correct data
+            expect(tooltipContent).toBeVisible()
+            expect(queryByText('$information')).toBeNull()
+            expect(getByText('$info_fill')).toBeInTheDocument()
+            expect(getByText(defaultProps.header)).toBeVisible()
+            expect(getByText(defaultProps.content)).toBeVisible()
+        }, {timeout: 200})
+
+        await userEvent.unhover(tooltipButton)
+        // Check tooltip is inactive
+        await waitFor(() => {
+            expect(tooltipContent).not.toBeVisible()
+            expect(getByText('$information')).toBeInTheDocument()
+            expect(queryByText('$info_fill')).toBeNull()
+        }, {timeout: 200})
+    });
+
+    it("dark mode", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId, getByText, queryByText} = renderWithVuetify(VcIconWithTooltip, {
+            props: {
+                ...defaultProps,
+                dark: true,
+                icon: 'question'
+            }
+        })
+
+        const tooltipButton = getByTestId(`${defaultProps.dataQa}-icon`)
+        expect(getByText('$question')).toBeInTheDocument()
+        expect(queryByText('$question_fill')).toBeNull()
+
+        let tooltipContent = null
+        await userEvent.hover(tooltipButton)
+
+        // Let the hover commence
+        await waitFor(() => {
+            tooltipContent = getByTestId(`${defaultProps.dataQa}-dark-content`)
+            // Check tooltip is active and with the correct data
+            expect(tooltipContent).toBeVisible()
+            expect(queryByText('$question')).toBeNull()
+            expect(getByText('$question_fill')).toBeInTheDocument()
+            expect(getByText(`${defaultProps.header} ${defaultProps.content}`)).toBeVisible()
+        }, {timeout: 200})
+
+        await userEvent.unhover(tooltipButton)
+        // Check tooltip is inactive
+        await waitFor(() => {
+            expect(tooltipContent).not.toBeVisible()
+            expect(getByText('$question')).toBeInTheDocument()
+            expect(queryByText('$question_fill')).toBeNull()
+        }, {timeout: 200})
+    });
+
+    it("attention icon", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByText, getByTestId, queryByText} = renderWithVuetify(VcIconWithTooltip, {
+            props: {
+                ...defaultProps,
+                icon: 'attention'
+            }
+        })
+
+        const tooltipButton = getByTestId(`${defaultProps.dataQa}-icon`)
+        expect(getByText('$attention')).toBeVisible()
+        expect(queryByText('$attention_fill')).toBeNull()
+        await userEvent.hover(tooltipButton)
+        // Let the hover commence
+        await waitFor(() => {
+            // Check tooltip is active and with the correct data
+            const tooltipContent = getByTestId(`${defaultProps.dataQa}-content`)
+            expect(getByText('$attention_fill')).toBeVisible()
+            expect(queryByText('$attention')).toBeNull()
+            expect(tooltipContent).toBeVisible()
+        }, {timeout: 200})
+    });
+
+    it("default icon", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByText, getByTestId} = renderWithVuetify(VcIconWithTooltip, {
+            props: {
+                ...defaultProps,
+                icon: 'default'
+            }
+        })
+
+        const tooltipButton = getByTestId(`${defaultProps.dataQa}-icon`)
+        expect(getByText('$information')).toBeVisible()
+        await userEvent.hover(tooltipButton)
+        // Let the hover commence
+        await waitFor(() => {
+            const tooltipContent = getByTestId(`${defaultProps.dataQa}-content`)
+
+            // Check tooltip is active and with the correct data
+            expect(tooltipContent).toBeVisible()
+        }, {timeout: 200})
+
+    });
+
+});

package/src/components/VcIconWithTooltip/VcIconWithTooltip.stories.js

@@ -0,0 +1,77 @@
+import VcIconWithTooltipCmp from './VcIconWithTooltip';
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcIconWithTooltip: VcIconWithTooltipCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <VcIconWithTooltip
+          :icon="icon"
+          :size="size"
+          :header="header"
+          :content="content"
+          :flavor="flavor"
+          :top="top"
+          :bottom="bottom"
+          :nudge-left="nudgeLeft"
+          :nudge-right="nudgeRight"
+          :dark="dark"
+          :data-qa="dataQa">
+        </VcIconWithTooltip>
+      </div>`
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    icon: "information",
+    size: 12,
+    header: "John Lennon",
+    content: "Life is what happens when you're busy making other plans",
+    flavor: 'alert',
+    dark: false,
+    top: true,
+    bottom: false,
+    nudgeLeft: 0,
+    nudgeRight: 0,
+    dataQa: 'vc-tooltip',
+}
+
+export default {
+    title: 'Content Display / VcIconWithTooltip',
+    id: 'VcIconWithTooltip',
+    component: VcIconWithTooltipCmp,
+    argTypes: {
+        flavor: {
+            options: ['information', 'alert'],
+            control: {type: 'radio'}
+        },
+        icon: {
+            options: ['information', 'question', 'attention', 'default'],
+            control: {type: 'radio'}
+        }
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=70%3A87',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        }
+    },
+};

package/src/components/VcIconWithTooltip/VcIconWithTooltip.vue

@@ -1,8 +1,9 @@
 <template>
-  <VcTooltip v-bind="$attrs">
+  <VcTooltip v-bind="$attrs"
+             :data-qa="dataQa">
     <template>
       <v-icon :size="size" class="tooltip-icon"
-              :data-qa="dataQa"
+              :data-qa="`${dataQa}-icon`"
               @mouseover="inHover"
               @mouseleave="iconInUse = icon"
               :class="{'vc-default': iconInUse === 'default', 'vc-default_hovering': iconInUse === 'default_hovering'}">
@@ -31,7 +32,7 @@ export default {
     },
     dataQa: {
       type: String,
-      default: 'vc-icon-with-tooltip'
+      default: 'vc-tooltip'
     },
   },
   data() {
@@ -80,7 +81,7 @@ export default {
   }
 
   .vc-question-fill {
-    fill: $grey-1;
+    fill: var(--gray-darken-4);
   }
 
   .vc-information, .vc-info-fill {
@@ -88,7 +89,7 @@ export default {
   }
 
   .vc-attention, .vc-attention-fill {
-    fill: var(--v-danger-base);
+    fill: var(--red);
   }
 
   &.vc-default {
@@ -99,7 +100,7 @@ export default {
 
   &.vc-default_hovering {
     .vc-information, .vc-info-fill {
-      fill: $grey-1;
+      fill: var(--gray-darken-4);
     }
   }
 }

package/src/components/VcLayout/VcLayout.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+import VcLayout from "./VcLayout.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+describe("VcLayout.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,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcLayout, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});

package/src/components/VcLayout/VcLayout.stories.js

@@ -0,0 +1,26 @@
+import VcLayoutCmp from './VcLayout';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcLayout: VcLayoutCmp},
+    props: Object.keys(argTypes),
+    template: '<div><VcLayout><div>div in the layout</div></VcLayout></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    // param: 'value',
+}
+
+export default {
+    title: 'Containers / VcLayout',
+    id: 'VcLayout',
+    component: VcLayoutCmp,
+    parameters: {
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/api/v-layout', // will make the tag a link
+        },
+    },
+};

package/src/components/VcLoader/VcLoader.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+import VcLoader from "./VcLoader.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+describe("VcLoader.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,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcLoader, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});

package/src/components/VcLoader/VcLoader.stories.js

@@ -0,0 +1,30 @@
+import VcLoaderCmp from './VcLoader';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcLoader: VcLoaderCmp},
+    props: Object.keys(argTypes),
+    template: '<div><VcLoader :color="color" :value="value" :size="size" :width="width"/></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    color: 'primary'
+}
+
+export default {
+    title: 'Loaders / VcLoader',
+    id: 'VcLoader',
+    component: VcLoaderCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcLoader/VcLoader.vue

@@ -17,7 +17,7 @@ export default {
     },
     color: {
       type: String,
-      default: "#0c315e"
+      default: "primary"
     },
     size: {
       type: Number,

package/src/components/VcMenu/VcMenu.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+import VcMenu from "./VcMenu.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+describe("VcMenu.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,
+        )
+    }
+
+    it("mounts", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container} = renderWithVuetify(VcMenu, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});

package/src/components/VcMenu/VcMenu.stories.js

@@ -0,0 +1,45 @@
+import VcMenuCmp from './VcMenu';
+import VcButton from "@/components/VcButton/VcButton";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcMenu: VcMenuCmp, VcButton},
+    props: Object.keys(argTypes),
+    template: '<div><VcMenu>' +
+        '      <template #activator="{ on, attrs }"> ' +
+        '        <VcButton v-bind="attrs"  v-on="on"> Click me </VcButton> ' +
+        '      </template> ' +
+        '      <v-list> ' +
+        '        <v-list-item> ' +
+        '          <v-list-item-title>Option 1</v-list-item-title> ' +
+        '        </v-list-item> ' +
+        '        <v-list-item disabled> ' +
+        '          <v-list-item-title>Option 2</v-list-item-title> ' +
+        '        </v-list-item> ' +
+        '        <v-list-item> ' +
+        '          <v-list-item-title>Option 3</v-list-item-title> ' +
+        '        </v-list-item> ' +
+        '      </v-list>' +
+        '</VcMenu></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+}
+
+// export default {
+//     title: 'Containers / VcMenu',
+//     id: 'VcMenu',
+//     component: VcMenuCmp,
+//     parameters: {
+//         design: {
+//             type: 'figma',
+//             url: 'https://www.figma.com',
+//         },
+//         status: {
+//             type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+//             url: 'http://www.url.com/status', // will make the tag a link
+//         },
+//     },
+// };