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

package/src/components/VcButton/VcButton.stories.js

@@ -0,0 +1,123 @@
+import VcButtonCmp from './VcButton';
+import VcIcon from "@/components/VcIcon/VcIcon";
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcButton: VcButtonCmp},
+    props: Object.keys(argTypes),
+    template: '<VcButton :color="color" :small="small" :large="large" :x-large="xLarge" :icon="icon"' +
+        'elveation="elevation" :fab="fab" :loading="loading"' +
+        '@click="onClick">{{label}}</VcButton>',
+})
+
+export const Playground = GeneralTemplate.bind({});
+
+// Set default values
+Playground.args = {
+    label: 'label',
+    color: 'primary',
+    small: false,
+    large: false,
+    xLarge: false,
+    icon: false,
+    fab: false,
+    loading: false,
+}
+
+const Template = (args, {argTypes}) => ({
+    components: {VcButton: VcButtonCmp},
+    props: Object.keys(argTypes),
+    template: '<div>' +
+        '<VcButton :color="color" :small="small" :x-large="xLarge" :loading="loading" @click="onClick">{{label}}</VcButton> ' +
+        '</div>',
+})
+
+export const Secondary = Template.bind({});
+
+// default values for controls
+Secondary.args = {
+    label: "Secondary",
+    color: 'secondary'
+}
+
+export const Small = Template.bind({});
+
+// default values for controls
+Small.args = {
+    label: "Small",
+    color: 'secondary',
+    small: true
+}
+
+export const ExtraLarge = Template.bind({});
+
+// default values for controls
+ExtraLarge.args = {
+    label: "Extra large",
+    color: 'secondary',
+    xLarge: true,
+}
+
+export const Loading = Template.bind({});
+
+// default values for controls
+Loading.args = {
+    label: "Loading",
+    color: 'secondary',
+    loading: true,
+}
+
+const TemplateWithIcon = (args, {argTypes}) => ({
+    components: {VcButton: VcButtonCmp, VcIcon},
+    props: Object.keys(argTypes),
+    template: '<div><VcButton :label="label" :color="color" @click="onClick">' +
+        '<template #prepend><VcIcon>$check_circle</VcIcon></template>' +
+        '</VcButton></div>',
+})
+
+export const WithIcon = TemplateWithIcon.bind({});
+
+// Set default values
+WithIcon.args = {
+    label: 'Add Item',
+}
+
+const TemplateIcon = (args, {argTypes}) => ({
+    components: {VcButton: VcButtonCmp, VcIcon},
+    props: Object.keys(argTypes),
+    template: '<div><VcButton :label="label" :color="color" :icon="icon" fab="fab" @click="onClick">' +
+        '<template #prepend><VcIcon>$close_button</VcIcon></template>' +
+        '</VcButton></div>',
+})
+
+export const Icon = TemplateIcon.bind({});
+
+// Set default values
+Icon.args = {
+    icon: true,
+    color: 'white',
+    elevation: 0,
+    fab: true,
+}
+
+export default {
+    title: 'Action / VcButton',
+    id: 'VcButton',
+    component: VcButtonCmp,
+    argTypes: {
+        color: {
+            options: ['white', 'secondary'],
+            control: {type: 'radio'}
+        },
+        onClick: { action: 'onClick', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=70%3A86',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'http://www.url.com/status', // will make the tag a link
+        }
+    },
+};

package/src/components/VcButton/VcButton.stories.mdx.old

@@ -0,0 +1,40 @@
+import { Meta, Preview, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import VcButton from './VcButton';
+
+<Meta title="Buttons / VcButton" component={VcButton} argTypes={{
+    color: {
+        options: ["primary", "secondary"],
+        control: {type: "radio"}
+    }
+}}
+/>
+
+<style>{`
+      .subheading {
+        --mediumdark: '#999999';
+        font-weight: 900;
+        font-size: 14px;
+        color: #999;
+        letter-spacing: 3px;
+        line-height: 24px;
+        margin-bottom: 12px;
+        margin-top: 40px;
+      }
+`}</style>
+
+# VcButton Docs
+
+Some MDX docs for the `VcButton` component.
+
+<Preview>
+    <Story name="MDX experiment">
+        {{
+            components: {VcButton},
+            template: `<VcButton label="mdx story button" />`,
+        }}
+    </Story>
+</Preview>
+
+<ArgsTable of={VcButton} />
+
+<div className="subheading">CSS Variables</div>

package/src/components/VcButtonGroup/VcButtonGroup.spec.js

@@ -0,0 +1,209 @@
+import '@testing-library/jest-dom'
+import VcButtonGroup from "./VcButtonGroup.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import {fireEvent, within} from "@testing-library/dom";
+import init from "../../../testing-library.config";
+
+init();
+
+const allTheButtons = [
+    {id: 'today', label: 'Today', disabled: false},
+    {id: 'yesterday', label: 'Yesterday', disabled: false},
+    {id: '7days', label: '7 days', disabled: false},
+    {id: '3months', label: '3 months', disabled: false},
+    {id: '6month', label: '6 month', disabled: false},
+    {id: '12month', label: '12 month', disabled: false},
+    {id: '18months', label: '18 month', disabled: false},
+    {id: '24months', label: '2 years', disabled: false},
+    {id: '36months', label: '3 years', disabled: false},
+    {id: 'tooMany', label: 'too many buttons', disabled: false},
+];
+
+const defaultProps = {
+    buttons: allTheButtons.slice(0, 4),
+    selected: 'today'
+}
+
+describe("VcButtonGroup.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", () => {
+        const {container} = renderWithVuetify(VcButtonGroup, {
+            props: defaultProps
+        })
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+    it("button is selected by props", () => {
+        const {getByTestId} = renderWithVuetify(VcButtonGroup, {
+            props: defaultProps
+        });
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        const button = within(buttonGroup).getByTestId('item-0');
+        expect(button).toHaveClass('selected')
+    });
+
+    it("button is selected by changing props", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: defaultProps
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        await updateProps({selected: 'yesterday'});
+        const button = within(buttonGroup).getByTestId('item-1');
+        expect(button).toHaveClass('selected');
+    });
+
+    it("emits event when button is clicked", async () => {
+        const {getByText, emitted} = renderWithVuetify(VcButtonGroup, {
+            props: defaultProps
+        })
+
+        const button = getByText('Yesterday')
+        expect(button).toBeInTheDocument()
+        await fireEvent.click(button);
+        expect(emitted().change.length).toBe(1);
+    });
+
+    it("has 4 buttons in horizontal and vertical mode", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: {
+                ...defaultProps,
+                direction: 'horizontal',
+                buttons: allTheButtons.slice(0, 4)
+            }
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        expect(buttonGroup).toBeInTheDocument();
+        const horizontalRows = within(buttonGroup).getAllByTestId('row');
+        expect(horizontalRows.length).toBe(2);
+
+        await updateProps({direction: 'vertical'});
+        const verticalRows = within(buttonGroup).getAllByTestId('row');
+        expect(verticalRows.length).toBe(2);
+    });
+
+    it("has 5 buttons in horizontal and vertical mode", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: {
+                ...defaultProps,
+                direction: 'horizontal',
+                buttons: allTheButtons.slice(0, 5)
+            }
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        expect(buttonGroup).toBeInTheDocument();
+        const horizontalRows = within(buttonGroup).getAllByTestId('row');
+        expect(horizontalRows.length).toBe(2);
+
+        await updateProps({direction: 'vertical'});
+        const verticalRows = within(buttonGroup).getAllByTestId('row');
+        expect(verticalRows.length).toBe(3);
+    });
+
+    it("has 6 buttons in horizontal and vertical mode", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: {
+                ...defaultProps,
+                direction: 'horizontal',
+                buttons: allTheButtons.slice(0, 6)
+            }
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        expect(buttonGroup).toBeInTheDocument();
+        const horizontalRows = within(buttonGroup).getAllByTestId('row');
+        expect(horizontalRows.length).toBe(2);
+
+        await updateProps({direction: 'vertical'});
+        const verticalRows = within(buttonGroup).getAllByTestId('row');
+        expect(verticalRows.length).toBe(3);
+    });
+
+    it("has 7 buttons in horizontal and vertical mode", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: {
+                ...defaultProps,
+                direction: 'horizontal',
+                buttons: allTheButtons.slice(0, 7)
+            }
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        expect(buttonGroup).toBeInTheDocument();
+        const horizontalRows = within(buttonGroup).getAllByTestId('row');
+        expect(horizontalRows.length).toBe(2);
+
+        await updateProps({direction: 'vertical'});
+        const verticalRows = within(buttonGroup).getAllByTestId('row');
+        expect(verticalRows.length).toBe(4);
+    });
+
+    it("has 8 buttons in horizontal and vertical mode", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: {
+                ...defaultProps,
+                direction: 'horizontal',
+                buttons: allTheButtons.slice(0, 8)
+            }
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        expect(buttonGroup).toBeInTheDocument();
+        const horizontalRows = within(buttonGroup).getAllByTestId('row');
+        expect(horizontalRows.length).toBe(2);
+
+        await updateProps({direction: 'vertical'});
+        const verticalRows = within(buttonGroup).getAllByTestId('row');
+        expect(verticalRows.length).toBe(4);
+    });
+
+    it("has 9 buttons in horizontal and vertical mode", async () => {
+        const {getByTestId, updateProps} = renderWithVuetify(VcButtonGroup, {
+            props: {
+                ...defaultProps,
+                direction: 'horizontal',
+                buttons: allTheButtons.slice(0, 9)
+            }
+        })
+
+        const buttonGroup = getByTestId('VcButtonGroup');
+        expect(buttonGroup).toBeInTheDocument();
+        const horizontalRows = within(buttonGroup).getAllByTestId('row');
+        expect(horizontalRows.length).toBe(3);
+
+        await updateProps({direction: 'vertical'});
+        const verticalRows = within(buttonGroup).getAllByTestId('row');
+        expect(verticalRows.length).toBe(3);
+    });
+
+    it(" fails when it gets less than 4 buttons", () => {
+        const validator = VcButtonGroup.props.buttons.validator;
+        expect(validator(allTheButtons.slice(0, 3))).toBeFalsy();
+        expect(validator(allTheButtons.slice(0, 4))).toBeTruthy();
+        expect(validator(allTheButtons)).toBeFalsy();
+    });
+
+});

package/src/components/VcButtonGroup/VcButtonGroup.stories.js

@@ -0,0 +1,109 @@
+import VcColumnButtonGroupCmp from './VcButtonGroup';
+import {action} from "@storybook/addon-actions";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcColumnButtonGroup: VcColumnButtonGroupCmp},
+    props: Object.keys(argTypes),
+    computed: {
+        calcButtons() {
+            return allTheButtons.slice(0, this.numOfButtons);
+        }
+    },
+    template: '<div><VcColumnButtonGroup :buttons="calcButtons" v-model="selected" :direction="direction" ' +
+        '@change="onChange"/></div>',
+})
+
+const allTheButtons = [
+    {id: 'today', label: 'Today Today Today Today Today Today Today Today TodayToday Today Today Today Today Today Today Today', disabled: false},
+    {id: 'yesterday', label: 'Yesterday', disabled: false},
+    {id: '7days', label: '7 days', disabled: false},
+    {id: '3months', label: '3 months', disabled: false},
+    {id: '6month', label: '6 month', disabled: false},
+    {id: '12month', label: '12 month', disabled: false},
+    {id: '18months', label: '18 month', disabled: false},
+    {id: '24months', label: '2 years', disabled: false},
+    {id: '36months', label: '3 years', disabled: false},
+];
+
+export const Playground = Template.bind({});
+// Set default values
+Playground.args = {
+    selected: "",
+    onChange: action('changed'),
+    direction: 'vertical',
+    numOfButtons: 4,
+    buttons: allTheButtons,
+}
+
+const disabledBtns = allTheButtons.map((item, index) => {
+    return {...item, disabled: index % 2 > 0}
+});
+
+const DisabledTemplate = (args, {argTypes}) => ({
+    components: {VcColumnButtonGroup: VcColumnButtonGroupCmp},
+    props: Object.keys(argTypes),
+    computed: {
+        calcButtons() {
+            return disabledBtns.slice(0, this.numOfButtons);
+        }
+    },
+    template: '<div><VcColumnButtonGroup :buttons="calcButtons" v-model="selected" :direction="direction" ' +
+        '@change="onChange"/></div>',
+})
+
+export const Disabled = DisabledTemplate.bind({});
+// Set default values
+Disabled.args = {
+    selected: "",
+    onChange: action('changed'),
+    numOfButtons: 4,
+    buttons: disabledBtns,
+}
+
+export const Horizontal = Template.bind({});
+// Set default values
+Horizontal.args = {
+    selected: "",
+    direction: 'horizontal',
+    onChange: action('changed'),
+    numOfButtons: 6,
+    buttons: allTheButtons,
+}
+
+export const Selected = Template.bind({});
+// Set default values
+Selected.args = {
+    selected: "today",
+    onChange: action('changed'),
+    numOfButtons: 4,
+    buttons: allTheButtons,
+}
+
+export default {
+    title: 'controls / VcButtonGroup',
+    id: 'VcButtonGroup',
+    component: VcColumnButtonGroupCmp,
+    argTypes: {
+        direction: {
+            options: ['horizontal', 'vertical'],
+            control: {type: 'radio'}
+        },
+        buttons: {
+            control: "object"
+        },
+        numOfButtons: {
+            options: [4, 5, 6, 7, 8, 9],
+            control: {type: 'select'}
+        }
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita-ui-library?node-id=2356%3A33394',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            // url: 'http://www.url.com/status', // will make the tag a link
+        },
+    },
+};

package/src/components/VcButtonGroup/VcButtonGroup.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="VcButtonGroup" :data-qa="dataQa">
-    <v-row v-for="(row, rowIdx) in rows" data-qa="row" :key="`row-${rowIdx}`">
+    <v-row v-for="(row, rowIdx) in rows" data-qa="row" :key="`row-${rowIdx}`" class="button-group-row">
       <v-col :cols="Math.floor(12/cols)" v-for="(button,itemIdx) in row" :key="button.id"
              @click="onSelected(button.id)" class="button-item d-flex align-center justify-center"
              :class="{
@@ -95,6 +95,10 @@ export default {
   font-weight: var(--font-weight-medium2);
   font-size: 13px;
 
+  .button-group-row {
+    margin: 0;
+  }
+
   .button-item {
     cursor: pointer;
     transition: 0.3s background-color, color ease-out;

package/src/components/VcCard/VcCard.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+import VcCard from "./VcCard.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import init from "../../../testing-library.config";
+
+init();
+
+describe("VcCard.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(VcCard, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});

package/src/components/VcCard/VcCard.stories.js

@@ -0,0 +1,28 @@
+import VcCardCmp from './VcCard';
+import VcLoader from "@/components/VcLoader/VcLoader";
+
+const Template = (args, {argTypes}) => ({
+    components: {VcCard: VcCardCmp, VcLoader},
+    props: Object.keys(argTypes),
+    template: '<VcCard><VcLoader/></VcCard>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {}
+
+export default {
+    title: 'Content display / VcCard', // This will control the story sidebar position
+    id: 'VcCard', // This will be the link to this component
+    component: VcCardCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/xIOY6fBoA1wpy1tHv3i5js/vcita---ui-library?node-id=2498%3A30885',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};

package/src/components/VcCard/VcCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-card class="VcCard" tile :data-qa="dataQa">
+    <slot>
+    {{ this.$slots && this.$slots.default }}
+    </slot>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "VcCard",
+  props: {
+    dataQa: {
+      type: String,
+      default: 'VcCard'
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/mixins.scss";
+
+.VcCard {
+  position: relative;
+  padding: 16px 0px 0px;
+  border-bottom: 1px solid #E0E0E0;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  box-shadow: none !important;
+
+  @include md-and-up {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 24px;
+    border: 1px solid #E0E0E0;
+    border-radius: 6px !important;
+
+    &:hover {
+      box-shadow: 0px 4px 18px rgba(145, 152, 160, 0.22) !important;
+    }
+  }
+}
+
+</style>

package/src/components/VcExpansionPanels/VcExpansionPanels.stories.js

@@ -0,0 +1,36 @@
+import VcExpansionPanelsCmp from './VcExpansionPanels';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcExpansionPanels: VcExpansionPanelsCmp},
+    props: Object.keys(argTypes),
+    template: `<div><VcExpansionPanels :param="param"/></div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    param: 'value',
+}
+
+export default {
+    title: 'VcExpansionPanels', // This will control the story sidebar position
+    id: 'VcExpansionPanels', // This will be the link to this component
+    component: VcExpansionPanelsCmp,
+    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/VcForm/VcForm.spec.js

@@ -0,0 +1,38 @@
+import '@testing-library/jest-dom'
+import VcForm from "./VcForm.vue";
+import init from "../../../testing-library.config"
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+
+init();
+
+describe("VcForm.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(VcForm, {
+            props: {}
+        })
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+    });
+
+});