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

package/src/components/VcActions/VcActions.stories.js

@@ -0,0 +1,103 @@
+import VcActionsCmp from "./VcActions";
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcActions: VcActionsCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+        <vcActions :items="items"
+                    :header="header"
+                    v-model="showSheet"
+                    :title="title"
+                    :client="client"
+                    :data-qa="dataQa"
+                    @close="onClose"
+                    @action="onAction">
+          <template v-slot="{attrs, on}">
+            <v-icon v-bind="attrs" v-on="on"
+                    @click="showSheet = !showSheet">
+              $three_dots
+            </v-icon>
+          </template>
+        </vcActions>
+      </div>`,
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    showSheet: false,
+    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'
+}
+
+export const No_icons = GeneralTemplate.bind({});
+
+// Set default values
+No_icons.args = {
+    showSheet: false,
+    items: [
+        {
+            title: 'Move to guest list',
+            event: 'moveToGustList',
+        }, {
+            title: 'Remove from waitlist',
+            event: 'remove',
+        }, {
+            title: 'Go to client page',
+            event: 'goToClientPage',
+}
+    ],
+    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'
+}
+
+export default {
+    title: 'Controls / VcActions',
+    id: 'VcActions',
+    component: VcActionsCmp,
+    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/VcActions/VcActions.vue

@@ -1,10 +1,14 @@
 <template>
   <component :is="isMobile ? 'VcBottomActions' : 'VcActionList'"
-             @input="handleSheet('input', $event)"
-             :value="showSheet"
+             @action="handleSheet($event)"
+             @close="handleCloseSheet()"
+             v-model="showSheet"
              v-bind="$props">
     <template v-slot="{attrs, on}">
-      <v-icon v-bind="attrs" v-on="on">$three_dots</v-icon>
+      <v-icon v-bind="attrs" v-on="on"
+              @click="showSheet = !showSheet">
+        $three_dots
+      </v-icon>
     </template>
   </component>
 </template>
@@ -51,9 +55,13 @@ export default {
     },
   },
   methods: {
-    handleSheet(action, sheet) {
-      this.showSheet = sheet.isOpen
-      this.$emit('input', {action, sheet})
+    handleSheet(action) {
+      this.showSheet = false
+      this.$emit('action', action)
+    },
+    handleCloseSheet() {
+      this.showSheet = false
+      this.$emit('close')
     }
   }
 };

package/src/components/VcAlert/VcAlert.spec.js

@@ -0,0 +1,162 @@
+import '@testing-library/jest-dom'
+import VcAlert from "./VcAlert.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();
+
+describe("VcAlert.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("shows info alert", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText, emitted} = renderWithVuetify(VcAlert, {
+            props: {
+                type: 'info',
+                headerText: 'header text',
+                bodyText: 'body text',
+                buttonText: 'button text',
+                dataQa: 'infoAlert'
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const alert = getByTestId('infoAlert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveClass('vcita-alert-info');
+
+        const header = getByText('header text');
+        expect(header).toBeInTheDocument();
+
+        const body = getByText('body text');
+        expect(body).toBeInTheDocument();
+
+        const actionButton = getByText('button text');
+        expect(actionButton).toBeInTheDocument();
+        await userEvent.click(actionButton);
+        expect(emitted().onAction.length).toBe(1);
+    });
+
+    it("shows warning alert with close button", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, emitted} = renderWithVuetify(VcAlert, {
+            props: {
+                type: 'warning',
+                closeButton: true,
+                dataQa: 'warningAlert'
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const alert = getByTestId('warningAlert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveClass('vcita-alert-warning');
+
+        const closeButton = getByTestId('alert-close-btn');
+        expect(closeButton).toBeInTheDocument();
+
+        await userEvent.click(closeButton);
+        expect(emitted().closeAlert.length).toBe(1);
+    });
+
+    it("shows attention alert", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId} = renderWithVuetify(VcAlert, {
+            props: {
+                type: 'attention',
+                dataQa: 'attentionAlert'
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const alert = getByTestId('attentionAlert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveClass('vcita-alert-attention');
+    });
+
+    it("shows success alert", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId} = renderWithVuetify(VcAlert, {
+            props: {
+                type: 'success',
+                dataQa: 'successAlert'
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const alert = getByTestId('successAlert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveClass('vcita-alert-success');
+    });
+
+    it("shows success alert with stripe", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId} = renderWithVuetify(VcAlert, {
+            props: {
+                type: 'success',
+                isStripe: true,
+                dataQa: 'successAlert'
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const alert = getByTestId('successAlert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveClass('vcita-alert-success');
+        expect(alert).toHaveClass('stripe');
+    });
+
+    it("shows success alert with inline header", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcAlert, {
+            props: {
+                type: 'success',
+                headerText: 'header text',
+                bodyText: 'body text',
+                dataQa: 'successAlert',
+                isInlineHeader: true
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true');
+
+        const alert = getByTestId('successAlert');
+        expect(alert).toBeInTheDocument();
+        expect(alert).toHaveClass('vcita-alert-success');
+
+        const header = getByText('header text');
+        expect(header).toBeInTheDocument();
+
+        const body = getByText('body text');
+        expect(body).toBeInTheDocument();
+    });
+});

package/src/components/VcAlert/VcAlert.stories.js

@@ -0,0 +1,105 @@
+import {action} from '@storybook/addon-actions'
+import VcAlertCmp from './VcAlert';
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcAlert: VcAlertCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <VcAlert :type="type"
+               :header-text="headerText"
+               :body-text="bodyText"
+               :button-text="buttonText"
+               :closeButton="closeButton"
+               :is-stripe="isStripe"
+               :isInlineHeader="isInlineHeader"
+               :data-qa="dataQa"
+               @onAction="onAction"
+               @closeAlert="closeAlertAction"
+      />`,
+    methods: {
+        closeAlertAction: action('closeAlert')
+    }
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    type: 'attention',
+    headerText: 'Header:',
+    bodyText: `I learned long ago, never to wrestle with a pig. 
+        You get dirty, and besides, the pig likes it. <a href="https://images.squarespace-cdn.com/content/v1/5b71e83f1aef1d3e4bbd03f2/1534201222036-JHLKSIPN8AOXD4XNLRAN/Esther_main_image_1.jpg?format=2500w" 
+        target="_blank">Link</a>`,
+    closeButton: true,
+    isStripe: false,
+    isInlineHeader: false,
+    dataQa: 'vcita-alert',
+}
+
+export const WithButton = GeneralTemplate.bind({});
+
+// Set default values
+WithButton.args = {
+    type: 'attention',
+    headerText: 'Header:',
+    bodyText: `I learned long ago, never to wrestle with a pig. 
+        You get dirty, and besides, the pig likes it. <a href="https://images.squarespace-cdn.com/content/v1/5b71e83f1aef1d3e4bbd03f2/1534201222036-JHLKSIPN8AOXD4XNLRAN/Esther_main_image_1.jpg?format=2500w" 
+        target="_blank">Link</a>`,
+    buttonText: 'Action',
+    closeButton: true,
+    isStripe: false,
+    isInlineHeader: false,
+    dataQa: 'vcita-alert',
+}
+
+const Template = (args, {argTypes}) => ({
+    components: {VcAlert: VcAlertCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <VcAlert :type="type"
+               :header-text="headerText"
+               :body-text="bodyText"
+               :button-text="buttonText"
+               :is-stripe="isStripe"
+               :closeButton="closeButton"
+               @onAction="onAction"
+               @closeAlert="closeAlertAction"
+      />`,
+    methods: {
+        closeAlertAction: action('closeAlert')
+    }
+})
+
+export const Info_Stripe = Template.bind({});
+
+// default values for controls
+Info_Stripe.args = {
+    type: 'info',
+    headerText: '',
+    bodyText: 'Toto, I\'ve a feeling we\'re not in Kansas anymore',
+    buttonText: '',
+    closeButton: true,
+    isStripe: true,
+}
+
+export default {
+    title: 'Feedback / VcAlert',
+    id: 'VcAlert',
+    component: VcAlertCmp,
+    argTypes: {
+        type: {
+            options: ['attention', 'warning', 'info', 'success'],
+            control: {type: 'radio'}
+        },
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=1863%3A1405',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcAlert/VcAlert.vue

@@ -5,15 +5,14 @@
       :data-qa="dataQa"
       :icon="getIcon">
     <VcLayout align-start column class="alert-content" :class="{'dialog-alert__close-btn': closeButton}">
-      <template>
-        <span v-if="headerText && !isInlineHeader" class="alert-header">
-          {{ headerText }}
+      <div>Reut</div>
+      <span v-if="headerText && !isInlineHeader" class="alert-header">
+        {{ headerText }}
+      </span>
+      <span class="alert-body"
+            v-if="bodyText"
+            v-html="getBodyText">
         </span>
-        <span class="alert-body"
-          v-if="bodyText"
-          v-html="getBodyText">
-        </span>
-      </template>
     </VcLayout>
     <VcButton v-if="buttonText"
               class="action-button"

package/src/components/VcAutoComplete/VcAutoComplete.spec.js

@@ -0,0 +1,67 @@
+import '@testing-library/jest-dom'
+import VcAutoComplete from "./VcAutoComplete.vue";
+import Vuetify from 'vuetify'
+import init from "../../../testing-library.config"
+import {render} from "@testing-library/vue";
+import userEvent from '@testing-library/user-event'
+
+init();
+
+describe("VcAutoComplete.vue", () => {
+
+    const renderWithVuetify = (component, options, callback) => {
+        const root = document.createElement('div')
+        root.setAttribute('data-app', 'true')
+        root.setAttribute('data-qa', 'testContainer')
+
+        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(VcAutoComplete, {
+            props: {
+                items: ['foo', 'bar', 'fizz', 'buzz'],
+            }
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it("interacts with the menu", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {getByTestId, emitted, baseElement} = renderWithVuetify(VcAutoComplete, {
+            props: {
+                items: ['foo', 'bar', 'fizz', 'buzz'],
+            }
+        })
+
+        const item = getByTestId("VcAutoComplete");
+        expect(item).toBeInTheDocument();
+
+        // Open menu
+        await userEvent.click(item);
+        expect(emitted().onMenuToggled.length).toBe(1);
+        const newValue = emitted().onMenuToggled[0][0];
+        expect(newValue).toBeTruthy();
+
+        // Close menu by click-outside
+        await userEvent.click(baseElement);
+        expect(emitted().onMenuToggled.length).toBe(2);
+        const updatedValue = emitted().onMenuToggled[1][0];
+        expect(updatedValue).toBeFalsy();
+
+    });
+
+});

package/src/components/VcAutoComplete/VcAutoComplete.stories.js

@@ -0,0 +1,99 @@
+import VcAutoCompleteCmp from './VcAutoComplete';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcAutoComplete: VcAutoCompleteCmp},
+    props: Object.keys(argTypes),
+    template: '<div><VcAutoComplete v-model="value" :items="items" :color="color"' +
+        '@onMenuToggled="onMenuToggled"/></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    items: ['foo', 'bar', 'fizz', 'buzz'],
+    color: 'primary',
+}
+
+export const ObjectItems = Template.bind({});
+
+// Set default values
+ObjectItems.args = {
+    items: [
+        {
+            text: "regular item",
+            value: 1,
+            disabled: false,
+            divider: false,
+            header: false
+        },
+        {
+            text: "disabled item",
+            value: 2,
+            disabled: true,
+            divider: false,
+            header: false
+        },
+        {
+            text: "header item",
+            value: 3,
+            disabled: true,
+            divider: false,
+            header: "header item - cannot be selected"
+        },
+        {
+            text: "next will come a divider item",
+            value: 4,
+            disabled: false,
+            divider: false,
+            header: false
+        },
+        {
+            text: "some text",
+            value: 5,
+            disabled: false,
+            divider: true,
+            header: false
+        },
+        {
+            text: "and another regular item",
+            value: 6,
+            disabled: false,
+            divider: false,
+            header: false
+        },
+    ],
+}
+
+export const Color = Template.bind({});
+
+// Set default values
+Color.args = {
+    items: ['foo', 'bar', 'fizz', 'buzz'],
+    color: 'secondary',
+}
+
+export default {
+    title: 'Form / VcAutoComplete',
+    id: 'VcAutoComplete',
+    component: VcAutoCompleteCmp,
+    argTypes: {
+        items: {
+            control: "object"
+        },
+        color: {
+            options: ['primary', 'secondary','default','neutral','success','warning','danger','info'],
+            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
+        },
+    },
+};