@vcita/design-system 1.2.2 → 1.3.0

package/init/DesignSystem.js

@@ -47,6 +47,7 @@ import {
     VTab,
     VTabsItems,
     VTabItem,
+    VBreadcrumbs,
 } from "vuetify/lib/components";
 // import initI18n from "./initI18n";
 import svgImages from "./svgImages";
@@ -98,6 +99,7 @@ Vue.use(Vuetify, {
         VTab,
         VTabsItems,
         VTabItem,
+        VBreadcrumbs,
     }
 });
 

package/init/SvgIcons.js

@@ -1,3 +1,13 @@
+/**
+ * When adding items to this file, please test them using the VcIcon component.
+ * Please make sure that setting the color property takes the appropriate effect.
+ * For most icons this means that they use the color as set in the prop.
+ * For some cases, the color should not have any effect, for example logos.
+ *
+ * If the color doesn't work as needed, remove the "fill" attributes in the svg
+ * until you arrive at the desired result.
+ */
+
 export default {
     flag: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 12C1.81066 12 2.06249 11.7481 2.06249 11.4375V9.22496C2.72602 8.94223 3.5527 8.70648 4.74455 8.70648C6.00054 8.70648 7.03778 9.52171 8.61683 9.52171C9.74579 9.52171 10.6481 9.13982 11.488 8.56411C11.6915 8.42463 11.8125 8.19305 11.8125 7.94634V2.24871C11.8125 1.70042 11.2437 1.33769 10.7464 1.56863C9.94162 1.94242 8.95452 2.31522 8.00542 2.31522C6.74946 2.31522 5.71219 1.49999 4.13314 1.49999C3.54825 1.49999 3.02435 1.60274 2.53834 1.78154C2.5862 1.65657 2.62504 1.4465 2.62504 1.31265C2.62504 1.28963 2.62385 1.2523 2.62238 1.22932C2.58087 0.562837 2.0345 0.0282617 1.36729 0.00111634C0.617453 -0.0293935 0 0.569429 0 1.31249C0 1.75842 0.222587 2.15214 0.562499 2.38933V11.4375C0.562499 11.7481 0.814337 12 1.125 12H1.5Z"/></svg>`,
     customer: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.47508 3.49999C8.47508 4.88085 7.35595 5.99999 5.97509 5.99999C4.59423 5.99999 3.47509 4.88085 3.47509 3.49999C3.47509 2.11913 4.59423 1 5.97509 1C7.35595 1 8.47508 2.11913 8.47508 3.49999ZM10.3501 10.0625C10.3501 10.5801 9.93016 11 9.41258 11H2.5376C2.02002 11 1.6001 10.5801 1.6001 10.0625V9.24999C1.6001 7.80077 2.77588 6.62499 4.2251 6.62499H4.55125C4.98682 6.82421 5.46728 6.93749 5.97509 6.93749C6.4829 6.93749 6.96532 6.82421 7.39892 6.62499H7.72508C9.17429 6.62499 10.3501 7.80077 10.3501 9.24999V10.0625Z"/></svg>`,
@@ -23,8 +33,8 @@ export default {
     attention_fill: `<svg class="vc-attention-fill" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.00249 11.815C9.21241 11.815 11.815 9.21335 11.815 6.00249C11.815 2.7935 9.21241 0.190002 6.00249 0.190002C2.79257 0.190002 0.190002 2.7935 0.190002 6.00249C0.190002 9.21335 2.79257 11.815 6.00249 11.815ZM5.43358 6.75249C5.28421 6.75249 5.16089 6.63571 5.15277 6.48657L4.97891 3.29908C4.97012 3.13797 5.09836 3.0025 5.2597 3.0025H6.74525C6.90659 3.0025 7.03486 3.13797 7.02607 3.29908L6.85221 6.48657C6.84409 6.63571 6.72076 6.75249 6.5714 6.75249H5.43358ZM4.92437 8.25248C4.92437 8.84792 5.40705 9.33061 6.00249 9.33061C6.59792 9.33061 7.08061 8.84792 7.08061 8.25248C7.08061 7.65705 6.59792 7.17436 6.00249 7.17436C5.40705 7.17436 4.92437 7.65705 4.92437 8.25248Z"/></svg>`,
     three_dots: `<svg class="vc-three-dots" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.52637 2.47368C6.52637 3.30263 7.1711 3.94737 8.00005 3.94737C8.78295 3.94737 9.47374 3.30263 9.47374 2.47368C9.47374 1.69079 8.78295 1 8.00005 1C7.1711 1 6.52637 1.69079 6.52637 2.47368ZM8.00005 6.52632C7.1711 6.52632 6.52637 7.21711 6.52637 8.00001C6.52637 8.82895 7.1711 9.47369 8.00005 9.47369C8.78295 9.47369 9.47374 8.82895 9.47374 8.00001C9.47374 7.21711 8.78295 6.52632 8.00005 6.52632ZM8.00005 15C7.1711 15 6.52637 14.3553 6.52637 13.5263C6.52637 12.7435 7.1711 12.0526 8.00005 12.0526C8.78295 12.0526 9.47374 12.7435 9.47374 13.5263C9.47374 14.3553 8.78295 15 8.00005 15Z"/></svg>`,
     indeterminate: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.5" y="11" width="7" height="2" rx="0.25" fill="white"/></svg>',
-    chevron_right: `<svg class="vc-chevron-right" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_652_11903)"><path d="M4.61199 0.903801L4.14795 1.36786C4.03811 1.47768 4.03811 1.65574 4.14795 1.76561L8.38308 6.01081L4.14795 10.256C4.03811 10.3659 4.03811 10.5439 4.14795 10.6538L4.61199 11.1178C4.7218 11.2276 4.8999 11.2276 5.00974 11.1178L9.91786 6.20968C10.0277 6.09984 10.0277 5.92177 9.91786 5.81191L5.00974 0.903779C4.8999 0.793962 4.72181 0.793962 4.61199 0.903801Z"/></g><defs><clipPath id="clip0_652_11903"><rect width="12" height="12" fill="white" transform="translate(12 12) rotate(-180)"/></clipPath></defs></svg>`,
-    chevron_left: `<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.38826 11.0964L5.85229 10.6323C5.96213 10.5225 5.96213 10.3444 5.85229 10.2346L1.61717 5.98938L5.85229 1.74416C5.96213 1.63432 5.96213 1.45625 5.85229 1.34641L5.38826 0.882351C5.27844 0.772533 5.10035 0.772533 4.99051 0.882351L0.0823801 5.7905C-0.02746 5.90034 -0.02746 6.07841 0.0823801 6.18828L4.99051 11.0964C5.10035 11.2062 5.27844 11.2062 5.38826 11.0964Z" fill="#478FFF"/></svg>`,
+    chevron_right: `<svg class="vc-chevron-right" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_652_11903)"><path d="M4.61199 0.903801L4.14795 1.36786C4.03811 1.47768 4.03811 1.65574 4.14795 1.76561L8.38308 6.01081L4.14795 10.256C4.03811 10.3659 4.03811 10.5439 4.14795 10.6538L4.61199 11.1178C4.7218 11.2276 4.8999 11.2276 5.00974 11.1178L9.91786 6.20968C10.0277 6.09984 10.0277 5.92177 9.91786 5.81191L5.00974 0.903779C4.8999 0.793962 4.72181 0.793962 4.61199 0.903801Z"/></g><defs><clipPath id="clip0_652_11903"><rect width="12" height="12" fill="white" transform="translate(12 12) rotate(-180)"/></clipPath></defs></svg>`,
+    chevron_left: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.38826 11.0964L5.85229 10.6323C5.96213 10.5225 5.96213 10.3444 5.85229 10.2346L1.61717 5.98938L5.85229 1.74416C5.96213 1.63432 5.96213 1.45625 5.85229 1.34641L5.38826 0.882351C5.27844 0.772533 5.10035 0.772533 4.99051 0.882351L0.0823801 5.7905C-0.02746 5.90034 -0.02746 6.07841 0.0823801 6.18828L4.99051 11.0964C5.10035 11.2062 5.27844 11.2062 5.38826 11.0964Z"/></svg>`,
     mastercard: `<svg width="48" height="30" viewBox="0 0 48 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M30.4888 3.20898H17.5103V26.7923H30.4888V3.20898Z" fill="#FF5F00"/><path d="M18.3348 15C18.3348 10.2083 20.5597 5.95834 23.9794 3.20834C21.4661 1.20834 18.2936 0 14.8326 0C6.63348 0 0 6.70833 0 15C0 23.2917 6.63348 30 14.8326 30C18.2936 30 21.4661 28.7917 23.9794 26.7917C20.5597 24.0833 18.3348 19.7917 18.3348 15Z" fill="#EB001B"/><path d="M47.9997 15C47.9997 23.2917 41.3663 30 33.1672 30C29.7062 30 26.5337 28.7917 24.0204 26.7917C27.4813 24.0417 29.665 19.7917 29.665 15C29.665 10.2083 27.4401 5.95834 24.0204 3.20834C26.5337 1.20834 29.7062 0 33.1672 0C41.3663 0 47.9997 6.75 47.9997 15Z" fill="#F79E1B"/></svg>`,
     visa: `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.7996 31.3605H16.9113L19.3433 16.2734H23.2314L20.7996 31.3605Z" fill="#00579F"/><path d="M34.8956 16.6423C34.1287 16.3371 32.9122 16 31.4081 16C27.5682 16 24.8642 18.0543 24.8477 20.9913C24.8158 23.1583 26.7836 24.3618 28.2555 25.0844C29.7598 25.8227 30.2712 26.3046 30.2712 26.9627C30.2559 27.9734 29.0556 28.4393 27.9361 28.4393C26.3837 28.4393 25.5519 28.1991 24.2878 27.6368L23.7758 27.3957L23.2317 30.7824C24.1437 31.1993 25.8238 31.5692 27.5682 31.5854C31.6482 31.5854 34.3043 29.5629 34.3358 26.433C34.3513 24.7155 33.3122 23.3995 31.0719 22.3242C29.712 21.6339 28.8791 21.1684 28.8791 20.4621C28.895 19.82 29.5835 19.1623 31.1187 19.1623C32.3828 19.1301 33.3116 19.4349 34.0151 19.74L34.3668 19.9002L34.8956 16.6423Z" fill="#00579F"/><path d="M40.0634 26.0157C40.3836 25.1489 41.6158 21.7944 41.6158 21.7944C41.5996 21.8267 41.9354 20.9117 42.1274 20.35L42.3991 21.65C42.3991 21.65 43.1354 25.2614 43.2953 26.0157C42.6876 26.0157 40.8314 26.0157 40.0634 26.0157ZM44.863 16.2734H41.8554C40.9279 16.2734 40.2233 16.5461 39.8231 17.5252L34.0475 31.3603H38.1274C38.1274 31.3603 38.7991 29.4982 38.9435 29.0971C39.3911 29.0971 43.36 29.0971 43.9358 29.0971C44.0474 29.6268 44.3997 31.3603 44.3997 31.3603H48L44.863 16.2734Z" fill="#00579F"/><path d="M13.6636 16.2734L9.8556 26.5614L9.43948 24.4748C8.73547 22.0673 6.52754 19.4515 4.0636 18.1509L7.55156 31.3445H11.6634L17.7752 16.2734H13.6636Z" fill="#00579F"/><path d="M6.31995 16.2734H0.0640009L0 16.5783C4.88004 17.8303 8.11199 20.8481 9.43985 24.4755L8.07988 17.5416C7.85598 16.5781 7.16792 16.3052 6.31995 16.2734Z" fill="#FAA61A"/></svg>`,
     trash: `<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.75 2H11.5L10.4375 0.625C10.1875 0.28125 9.65625 0 9.25 0H6.75C6.3125 0 5.78125 0.28125 5.53125 0.625L4.5 2H1.25C1.09375 2 1 2.125 1 2.25V2.75C1 2.90625 1.09375 3 1.25 3H2V14.5C2 15.3438 2.65625 16 3.5 16H12.5C13.3125 16 14 15.3438 14 14.5V3H14.75C14.875 3 15 2.90625 15 2.75V2.25C15 2.125 14.875 2 14.75 2ZM5.75 13.5H5.25C5.09375 13.5 5 13.4062 5 13.25V4.75C5 4.625 5.09375 4.5 5.25 4.5H5.75C5.875 4.5 6 4.625 6 4.75V13.25C6 13.4062 5.875 13.5 5.75 13.5ZM10.75 13.5H10.25C10.0938 13.5 10 13.4062 10 13.25V4.75C10 4.625 10.0938 4.5 10.25 4.5H10.75C10.875 4.5 11 4.625 11 4.75V13.25C11 13.4062 10.875 13.5 10.75 13.5ZM6.75 1C6.59375 1.03125 6.40625 1.09375 6.34375 1.21875L5.75 2H10.25L9.625 1.21875C9.5625 1.09375 9.375 1.03125 9.25 1H6.75ZM13 14.5C13 14.7812 12.75 15 12.5 15H3.5C3.21875 15 3 14.7812 3 14.5V3H13V14.5ZM8.25 13.5H7.75C7.59375 13.5 7.5 13.4062 7.5 13.25V4.75C7.5 4.625 7.59375 4.5 7.75 4.5H8.25C8.375 4.5 8.5 4.625 8.5 4.75V13.25C8.5 13.4062 8.375 13.5 8.25 13.5Z" fill="black"/></svg>`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {

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

@@ -230,7 +230,6 @@ export default {
     id: 'VcAvatar', // This will be the link to this component
     component: VcAvatarCmp,
     description: 'some desctext',
-    id: 'VcAvatarCmp',
     argTypes: {
         size: {
             options: ['x-sm', 'sm', 'md', 'lg'],

package/src/components/VcBreadcrumbs/VcBreadcrumbs.spec.js

@@ -0,0 +1,82 @@
+import '@testing-library/jest-dom'
+import VcBreadcrumbs from "./VcBreadcrumbs.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)
+
+describe("VcBreadcrumbs.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", () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText} = renderWithVuetify(VcBreadcrumbs, {
+            props: {
+                items: [
+                    {
+                        text: 'item 1',
+                        disabled: false,
+                        href: 'item_1',
+                    },
+                    {
+                        text: 'item 2',
+                        disabled: false,
+                        href: 'item_2',
+                    },
+                    {
+                        text: 'item 3',
+                        disabled: false,
+                        href: 'item_3',
+                    },
+                ],
+            }
+        })
+
+        // 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('VcBreadcrumbs');
+        expect(component).toBeInTheDocument();
+
+        expect(getByText('item 1')).toBeInTheDocument();
+        expect(getByText('item 2')).toBeInTheDocument();
+        expect(getByText('item 3')).toBeInTheDocument();
+    });
+
+});

package/src/components/VcBreadcrumbs/VcBreadcrumbs.stories.js

@@ -0,0 +1,86 @@
+import VcBreadcrumbsCmp from './VcBreadcrumbs';
+import VcBaseDocs from '@/stories/VcBaseDocs.mdx';
+
+const baseProps = {
+    items: [
+        {
+            text: 'item 1',
+            disabled: false,
+            href: 'item_1',
+        },
+        {
+            text: 'item 2',
+            disabled: false,
+            href: 'item_2',
+        },
+        {
+            text: 'item 3',
+            disabled: false,
+            href: 'item_3',
+        },
+    ],
+    dataQa: 'VcBreadcrumbs',
+};
+
+const Template = (args, {argTypes}) => ({
+    components: {VcBreadcrumbs: VcBreadcrumbsCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+      This is component was created for the SettingPagePattern story, it is *not* final
+      <VcBreadcrumbs :items="items" @click="onClick" :data-qa="dataQa"/>
+      </div>`,
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    ...baseProps,
+}
+
+export const Disabled = Template.bind({});
+
+// Set default values
+Disabled.args = {
+    ...baseProps,
+    items: [
+        {
+            text: 'item 1',
+            disabled: true,
+            href: 'item_1',
+        },
+        {
+            text: 'item 2',
+            disabled: true,
+            href: 'item_2',
+        },
+        {
+            text: 'item 3',
+            disabled: true,
+            href: 'item_3',
+        },
+    ],
+}
+
+export default {
+    title: 'controls / VcBreadcrumbs', // This will control the story sidebar position
+    id: 'VcBreadcrumbs', // This will be the permanent link to this component
+    component: VcBreadcrumbsCmp,
+    argTypes: {
+        onClick: {action: 'click', table: {disable: true}},
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com',
+        },
+        status: {
+            type: 'beta', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+            url: 'https://vuetifyjs.com/en/components/breadcrumbs', // will make the tag a link
+        },
+        docs: {
+            page: VcBaseDocs,
+        },
+    },
+};

package/src/components/VcBreadcrumbs/VcBreadcrumbs.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-breadcrumbs :items="items" :data-qa="dataQa" class="VcBreadcrumbs">
+    <template #divider>
+      <VcIcon size="6">$chevron_right</VcIcon>
+    </template>
+    <template #item="{item}">
+      <VcLink secondary :label="item.text" :url="item.href" :disabled="item.disabled" :data-qa="`${dataQa}-${item.text}`"></VcLink>
+    </template>
+  </v-breadcrumbs>
+</template>
+
+<script>
+import VcIcon from "@/components/VcIcon/VcIcon.vue";
+import VcLink from "@/components/VcLink/VcLink.vue";
+
+export default {
+  name: "VcBreadcrumbs",
+  components: {VcLink, VcIcon},
+  props: {
+    /**
+     * The options for each item:
+     *     disabled: boolean,
+     *     exact: boolean,
+     *     href: string,
+     *     link: boolean,
+     *     text: string | number,
+     *     to: string | object
+     */
+    items: {
+      type: Array,
+      required: true,
+      validator: items => items.every(item => item.text)
+    },
+    dataQa: {
+      type: String,
+      default: 'VcBreadcrumbs'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.VcBreadcrumbs {
+  padding: 0;
+
+  ::v-deep {
+    a {
+      font-size: var(--font-size-xx-small);
+      color: var(--gray-darken-3);
+
+      &:last-child label {
+        color: var(--gray-darken-5);
+      }
+    }
+  }
+}
+
+</style>

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

@@ -1,6 +1,7 @@
 import VcButtonCmp from './VcButton';
 import VcIcon from "@/components/VcIcon/VcIcon";
 import VcButtonDocs from './VcButtonDocs.mdx';
+import icons from "../../../init/SvgIcons";
 
 const baseProps = {
     label: 'label',
@@ -18,6 +19,8 @@ const baseProps = {
     disabled: false,
     href: '',
     prependDefaultIcon: false,
+    prependIcon: 'plus',
+    iconSize: 16,
     plain: false,
     block: false,
     ripple: false,
@@ -46,6 +49,8 @@ const GeneralTemplate = (args, {argTypes}) => ({
                 :disabled="disabled"
                 :href="href"
                 :prepend-default-icon="prependDefaultIcon"
+                :prepend-icon="prependIcon"
+                :icon-size="iconSize"
                 @click="onClick">
         {{ label }}
       </VcButton>
@@ -196,7 +201,7 @@ const TemplateWithIcon = (args, {argTypes}) => ({
                 :loading="loading"
                 @click="onClick">{{ label }}
         <template #prepend>
-          <VcIcon>$check_circle</VcIcon>
+          <VcIcon color="currentColor">$check_circle</VcIcon>
         </template>
       </VcButton>
       </div>`,
@@ -206,6 +211,7 @@ export const WithIcon = TemplateWithIcon.bind({});
 
 // Set default values
 WithIcon.args = {
+    ...baseProps,
     label: 'Add Item',
 }
 
@@ -255,12 +261,12 @@ export const Flavor = TemplateFlavor.bind({});
 
 // Set default values
 Flavor.args = {
+    ...baseProps,
     flavor: 'primary',
     outlined: true,
     label: 'flavor'
 }
 
-
 export default {
     title: 'Action / VcButton',
     id: 'VcButton',
@@ -271,6 +277,11 @@ export default {
         href: {table: {category: 'Button Content', subcategory: 'Text'}},
         icon: {table: {category: 'Button Content', subcategory: 'Icon'}},
         prependDefaultIcon: {table: {category: 'Button Content', subcategory: 'Icon'}},
+        prependIcon: {
+            options: Object.keys(icons),
+            control: {type: 'select'},
+            table: {category: 'Button Content', subcategory: 'Icon'}},
+        iconSize: {table: {category: 'Button Content', subcategory: 'Icon'}},
         color: {
             options: ['white', 'secondary'],
             control: {type: 'radio'},

package/src/components/VcButton/VcButton.vue

@@ -24,9 +24,8 @@
     @click="$emit('click')"
   >
     <slot name="prepend">
-      <VcIcon v-if="prependDefaultIcon" class="prependDefaultIcon" small
-        >$plus</VcIcon
-      >
+      <VcIcon v-if="prependDefaultIcon" color="currentColor"
+              :class="{prependDefaultIcon: !icon}" :size="iconSize">{{getPrependIcon}}</VcIcon>
     </slot>
     {{ label || ($slots.default && $slots.default[0].text) || "" }}
     <slot name="append" />
@@ -101,6 +100,9 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * The button will contain an icon and no text
+     */
     icon: {
       type: Boolean,
       default: false,
@@ -144,6 +146,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    prependIcon: {
+      type: String,
+      default: 'plus',
+    },
+    iconSize: {
+      type: Number,
+      default: 16,
+    },
     dataQa: {
       type: String,
       default: "vc-btn",
@@ -158,6 +168,9 @@ export default {
           return this.outlined ? '--gray-darken-5' : '--neutral-lighten-2';
       }
     },
+    getPrependIcon() {
+      return `$${this.prependIcon}`;
+    }
   },
 };
 </script>
@@ -173,10 +186,6 @@ export default {
 
   .prependDefaultIcon {
     margin-inline-end: var(--size-value3);
-
-    ::v-deep svg {
-      fill: currentColor;
-    }
   }
 
   &.secondary__text {

package/src/components/VcGalleryItem/VcGalleryItem.spec.js

@@ -0,0 +1,120 @@
+import '@testing-library/jest-dom'
+import VcGalleryItem from './VcGalleryItem.vue';
+import Vuetify from 'vuetify'
+import { render } from '@testing-library/vue';
+import init from '../../../testing-library.config';
+import { fireEvent } from "@testing-library/dom";
+
+init();
+
+const baseProps = {
+  uid: '1a',
+  label: 'Correct item label',
+  isMobile: false,
+  isCreate: false,
+};
+
+describe('VcGalleryItem.vue', () => {
+
+  const renderWithVuetify = (options, callback) => {
+    const root = document.createElement('div')
+    root.setAttribute('data-app', 'true')
+
+    return render(
+        VcGalleryItem,
+        {
+          container: document.body.appendChild(root),
+          vuetify: new Vuetify(),
+          ...options,
+          mocks: {$dst: value => value},
+        },
+        callback,
+    )
+  }
+
+  it('Mounts', () => {
+    const {container} = renderWithVuetify({
+      props: baseProps
+    })
+    expect(container).toHaveAttribute('data-app', 'true')
+  });
+
+  it('Displays slot content', async () => {
+    const labelSlotContent = 'label slot content';
+    const buttonSlotContent = 'slot-button';
+    const {queryByText, getByTestId} = renderWithVuetify({
+      props: baseProps,
+      slots: {
+        actions: `<div>${buttonSlotContent}</div>`,
+        label: `<div>${labelSlotContent}</div>`,
+      },
+    })
+    expect(queryByText(labelSlotContent)).toBeInTheDocument();
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    expect(queryByText(buttonSlotContent)).toBeInTheDocument();
+  });
+
+  it('Button events emission', async () => {
+    const {getByTestId, emitted} = renderWithVuetify({
+      props: baseProps
+    })
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    const selectBtn = getByTestId('VcGalleryItem-select-btn')
+    const previewBtn = getByTestId('VcGalleryItem-preview-btn')
+    await fireEvent.click(selectBtn)
+    await fireEvent.click(previewBtn)
+    expect(emitted().onSelect.length).toBe(1)
+    expect(emitted().onPreview.length).toBe(1)
+  });
+
+  it('Mobile events emission', async () => {
+    const {getByTestId, emitted, updateProps} = renderWithVuetify({
+      props: Object.assign(baseProps, { isMobile: true })
+    })
+    const thumbnail = getByTestId('VcGalleryItem-thumbnail');
+    await fireEvent.click(thumbnail);
+    expect(emitted().onExpend.length).toBe(1);
+    await updateProps({ isMobile: false })
+    await fireEvent.click(thumbnail);
+    expect(emitted().onExpend.length).toBe(1);
+  });
+
+  it('Displays correct label', async () => {
+    const {queryByText, updateProps} = renderWithVuetify({
+      props: baseProps
+    })
+    expect(queryByText(baseProps.label)).toBeInTheDocument();
+    expect(queryByText(baseProps.label.repeat(2))).toBeNull();
+    await updateProps({label: baseProps.label.repeat(2)})
+    expect(queryByText(baseProps.label.repeat(2))).toBeInTheDocument();
+  });
+
+
+  it('Toggle isCreate modifier class', async () => {
+    const {getByTestId, updateProps} = renderWithVuetify({
+      props: baseProps
+    })
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    expect(VcGalleryItem).not.toHaveClass('vc-gallery-item--is-create');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    await updateProps({ isCreate: true })
+    expect(VcGalleryItem).toHaveClass('vc-gallery-item--is-create');
+  });
+
+  it('Fires onCreate event', async () => {
+    const {getByTestId, updateProps, emitted} = renderWithVuetify({
+      props: Object.assign(baseProps, { isCreate: true })
+    })
+    const VcGalleryItem = getByTestId('VcGalleryItem');
+    const thumbnail = getByTestId('VcGalleryItem-thumbnail');
+    await fireEvent.mouseEnter(VcGalleryItem);
+    await fireEvent.click(thumbnail)
+    expect(emitted().onCreate.length).toBe(1)
+    await updateProps({ isCreate: false })
+    await fireEvent.click(thumbnail)
+    expect(emitted().onCreate.length).toBe(1)
+  });
+
+});

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

@@ -0,0 +1,94 @@
+import VcGalleryItemCmp from './VcGalleryItem';
+import VcButton from '../VcButton/VcButton';
+import VcIcon from '../VcIcon/VcIcon';
+
+const baseProps = {
+    isMobile: false,
+    uid: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bef',
+    isCreate: false,
+    dataQa: 'VcGalleryItem',
+}
+
+const Template = (args, {argTypes}) => ({
+        components: { VcGalleryItem: VcGalleryItemCmp, VcButton, VcIcon },
+        props: Object.keys(argTypes),
+        template: `<div>
+            <div class="description" :style="{margin: '20px 0'}">
+                <h4 :style="{margin: '8px 0'}">
+                    This component functions as a list/grid item and is meant to show inner content.
+                </h4>
+                <h4 :style="{fontWeight: 400}">
+                    It keeps a specific ratio while it's text is flushed beneath.<br />
+                    It presents control-buttons layer on hover, and a simplified click-action on mobile.<br />
+                    It's slots api label and actions modularity.<br />
+                    When 'isCreate' is passed as true, it functions as a 'new-item' button. <br />
+                </h4>
+            </div>
+            <VcGalleryItem :isMobile="isMobile" 
+                                      :uid="uid"
+                                      :src="src"
+                                      :label="label"
+                                      :dataQa="dataQa"
+                                      :isCreate="isCreate"
+                                      @onSelect="onSelect"
+                                      @onPreview="onPreview"
+                                      @onExpend="onExpend"
+                                      @onCreate="onCreate"
+            >
+                <template #actions v-if="actionsSlotContent">
+                    ${args.actionsSlotContent}
+                </template>
+                <template #label v-if="labelSlotContent">
+                    ${args.labelSlotContent}
+                </template>
+            </VcGalleryItem>
+        </div>
+        `,
+})
+
+export const Playground = Template.bind({});
+Playground.args = {
+    ...baseProps,
+    src: require('@/stories/assets/pics/gallery-item-1.jpg'),
+    label: 'Thank’s for your application',
+}
+
+
+export const LabelSlotContent = Template.bind({});
+LabelSlotContent.args = {
+    ...baseProps,
+    src: require('@/stories/assets/pics/gallery-item-2.jpg'),
+    labelSlotContent: `<span :style="{color: 'green'}">Slot content label</span>`
+}
+
+
+export const ActionsSlotContent = Template.bind({});
+ActionsSlotContent.args = {
+    ...baseProps,
+    src: require('@/stories/assets/pics/gallery-item-3.jpg'),
+    label: 'Thank’s for your application',
+    actionsSlotContent: `<VcButton @click="$emit('onSelect')" flavor="primary" label="Yes" class="buttons__select">
+                             <template #prepend><VcIcon :style="{ marginRight: '12px' }">$check_circle</VcIcon></template>
+                         </VcButton>`
+}
+
+export const CreateItem = Template.bind({});
+CreateItem.args = {
+    ...baseProps,
+    isCreate: true,
+}
+
+export default {
+    title: 'Content display / VcGalleryItem',
+    id: 'VcGalleryItem',
+    component: VcGalleryItemCmp,
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/7FONyMxCo0nkhyz013Xmai/Campaign-editor?node-id=1504%3A205665',
+        },
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};