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

package/init/DesignSystem.js

@@ -0,0 +1,77 @@
+import Vuetify from 'vuetify';
+import Vue from "vue";
+import vuetifyConfig from './vuetify.config';
+
+import {
+    VAlert,
+    VApp,
+    VAutocomplete,
+    VBtn,
+    VBottomSheet,
+    VBtnToggle,
+    VCard,
+    VCol,
+    VContainer,
+    VDialog,
+    VDivider,
+    VForm,
+    VIcon,
+    VLayout,
+    VList,
+    VListItem,
+    VListItemTitle,
+    VMenu,
+    VProgressCircular,
+    VRow,
+    VSnackbar,
+    VSwitch,
+    VSubheader,
+    VTextarea,
+    VTextField,
+    VTooltip,
+} from "vuetify/lib/components";
+// todo: change all above import to the next line import so we won't import all vuetify component
+// import VAlert from 'vuetify/lib/components/VAlert'\
+
+Vue.use(Vuetify, {
+    components: {
+        VAlert,
+        VApp,
+        VAutocomplete,
+        VBtn,
+        VBottomSheet,
+        VBtnToggle,
+        VCard,
+        VCol,
+        VContainer,
+        VDialog,
+        VDivider,
+        VForm,
+        VIcon,
+        VLayout,
+        VList,
+        VListItem,
+        VListItemTitle,
+        VMenu,
+        VProgressCircular,
+        VRow,
+        VSnackbar,
+        VSubheader,
+        VSwitch,
+        VTextarea,
+        VTextField,
+        VTooltip,
+    }
+});
+
+const DesignSystem = ({theme = {}, options = {}} = {}) => {
+    const ds = {...options};
+    // Make the options available to all the components
+    Vue.prototype.$ds = ds;
+    Vue.prototype.$log = Vue.prototype.$log || console.log;
+
+    const vuetifyConfigOverride = Object.assign({}, vuetifyConfig, theme);
+    return new Vuetify(vuetifyConfigOverride)
+}
+
+export default DesignSystem;

package/init/VcSvg/VcSvg.stories.js

@@ -0,0 +1,25 @@
+import VcSvgCmp from './VcSvg';
+
+const Template = (args, {argTypes}) => ({
+    components: {VcSvg: VcSvgCmp},
+    props: Object.keys(argTypes),
+    template: '<div>Used to display svg icons, for example, have a look at preview.js <VcSvg :param="param"/></div>',
+})
+
+export const Playground = Template.bind({});
+
+// Set default values
+Playground.args = {
+    param: 'value',
+}
+
+export default {
+    title: 'Content Display / VcSvg', // This will control the story sidebar position
+    id: 'VcSvg', // This will be the link to this component
+    component: VcSvgCmp,
+    parameters: {
+        status: {
+            type: 'stable', // 'beta' | 'stable' | 'deprecated' | 'releaseCandidate'
+        },
+    },
+};

package/init/vuetify.config.js

@@ -0,0 +1,132 @@
+import VcSvg from "./VcSvg/VcSvg.vue";
+
+const icons = {
+    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>`,
+    inactive: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.1356 10.6328L11.7528 11.1269C11.6454 11.2637 11.4501 11.2871 11.3134 11.1816L-0.178797 2.30077C-0.315516 2.19532 -0.338957 2.00001 -0.233481 1.86329L0.149323 1.3711C0.256745 1.23438 0.452057 1.21094 0.588775 1.31641L3.47157 3.54297C3.57705 2.26171 4.63955 1.25 5.95009 1.25C7.33095 1.25 8.45008 2.36913 8.45008 3.74999C8.45008 4.83983 7.74891 5.75585 6.77626 6.09959L12.079 10.1972C12.2157 10.3027 12.2411 10.5 12.1356 10.6328ZM3.75088 6.9199L9.35243 11.25H2.5126C1.99502 11.25 1.5751 10.8301 1.5751 10.3125V9.49999C1.5751 8.20311 2.51651 7.13475 3.75088 6.9199Z" /></g><defs><clipPath id="clip0"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>`,
+    vip: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9556 5.35938L9.6 9.125H2.4L1.04438 5.35938C0.997504 5.36718 0.948743 5.375 0.9 5.375C0.403125 5.375 0 4.95508 0 4.4375C0 3.91992 0.404993 3.5 0.901868 3.5C1.39874 3.5 1.80187 3.91992 1.80187 4.4375C1.80187 4.57616 1.77001 4.70703 1.71938 4.82421L3.075 5.67188C3.36187 5.85157 3.73687 5.75 3.90375 5.4453L5.43188 2.66016C5.23125 2.48829 5.1 2.23047 5.1 1.9375C5.1 1.41992 5.50313 1 6 1C6.49687 1 6.9 1.41992 6.9 1.9375C6.9 2.23047 6.76875 2.48829 6.56812 2.66016L8.09625 5.4453C8.26313 5.75 8.63624 5.85157 8.925 5.67188L10.2825 4.82421C10.23 4.70508 10.2 4.57616 10.2 4.4375C10.2 3.91992 10.6031 3.5 11.1 3.5C11.5969 3.5 12 3.91992 12 4.4375C12 4.95508 11.5969 5.375 11.1 5.375C11.0513 5.375 11.0025 5.36718 10.9556 5.35938ZM10.2 10.6875C10.2 10.8594 10.065 11 9.9 11H2.1C1.935 11 1.8 10.8594 1.8 10.6875V10.0625C1.8 9.89063 1.935 9.75 2.1 9.75H9.9C10.065 9.75 10.2 9.89063 10.2 10.0625V10.6875Z"/></svg>`,
+    success: `<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path d="M4.0789 10.6903L0.180509 6.79191C-0.0536593 6.5577 -0.0536593 6.17791 0.180509 5.94371L1.02871 5.09555C1.26291 4.86134 1.6427 4.86134 1.8769 5.09555L4.50302 7.7217L10.1279 2.09682C10.3621 1.86258 10.7419 1.86258 10.9761 2.09682L11.8243 2.94498C12.0585 3.17919 12.0585 3.55898 11.8243 3.79318L4.92713 10.6903C4.69289 10.9245 4.31314 10.9245 4.0789 10.6903Z" /></g><defs><clipPath id="clip0"><rect width="12" height="12" fill="white"/></clipPath></defs></svg>`,
+    close_button: `<svg viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg"><path d="M12.3047 13.0138L13.0119 12.3066C13.1093 12.2091 13.1093 12.0507 13.0119 11.9532L8.05931 7.00064L13.0065 2.05349C13.104 1.95599 13.104 1.79754 13.0065 1.70007L12.2993 0.992855C12.2018 0.895382 12.0434 0.895382 11.9459 0.992855L6.99867 5.94L2.04911 0.99012C1.9516 0.892616 1.79316 0.892616 1.69568 0.99012L0.988167 1.6973C0.890663 1.79481 0.890663 1.95325 0.988167 2.05076L5.93803 7.00064L0.993702 11.9447C0.896198 12.0422 0.896198 12.2006 0.993702 12.2981L1.70088 13.0053C1.79839 13.1028 1.95683 13.1028 2.05434 13.0053L6.99867 8.06127L11.9512 13.0138C12.0487 13.1113 12.2072 13.1113 12.3047 13.0138Z"/> </svg>`,
+    arrow_right: `<svg class="arrow-right" width="12" height="13" viewBox="0 0 12 13" xmlns="http://www.w3.org/2000/svg"><path d="M6.40093 0.683058C6.15685 0.438981 5.76112 0.438981 5.51704 0.683058C5.27296 0.927136 5.27296 1.32286 5.51704 1.56694L7.78311 3.83301H0.625C0.279822 3.83301 0 4.11283 0 4.45801C0 4.80319 0.279822 5.08301 0.625 5.08301H7.78343L5.51704 7.3494C5.27296 7.59348 5.27296 7.98921 5.51704 8.23328C5.76112 8.47736 6.15685 8.47736 6.40093 8.23328L9.72198 4.91223C9.72612 4.90831 9.73021 4.90433 9.73426 4.90028C9.85634 4.77819 9.91736 4.61818 9.91732 4.45817C9.91736 4.29817 9.85634 4.13815 9.73426 4.01607C9.73021 4.01201 9.72611 4.00803 9.72198 4.00411L6.40093 0.683058Z"/></svg>`,
+    warning: `<svg class="vc-notif" width="16" height="15" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg"><path d="M8.31873 10.5C8.41874 10.5 8.50309 10.4188 8.50623 10.3188L8.74061 5.19378C8.74372 5.08752 8.65934 5.00002 8.55311 5.00002H7.44374C7.33747 5.00002 7.25309 5.08752 7.25624 5.19378L7.49061 10.3188C7.49372 10.4219 7.5781 10.5 7.67811 10.5H8.31873Z"/><path d="M7.99998 12.875C8.48435 12.875 8.87498 12.4844 8.87498 12C8.87498 11.5156 8.48435 11.125 7.99998 11.125C7.5156 11.125 7.12498 11.5156 7.12498 12C7.12498 12.4844 7.5156 12.875 7.99998 12.875Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.844 0.65625C7.33344 -0.177083 8.52333 -0.216766 9.07706 0.537202L9.15518 0.65625L15.8194 13.0312C16.3119 13.8698 15.7405 14.9092 14.7923 14.9944L14.6665 15H1.33541C0.35042 15 -0.277403 13.993 0.121864 13.1414L6.844 0.65625ZM8.2917 1.16064C8.18032 0.969949 7.90489 0.948761 7.76849 1.07583L7.72445 1.13039L1.0426 13.5368C0.935848 13.719 1.04882 13.9484 1.26113 13.9925L1.33541 14H14.6665C14.8973 14 15.0441 13.7892 14.9714 13.5762L14.9389 13.5054L8.2917 1.16064Z"/></svg>`,
+    check_circle: `<svg class="vc-notif" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.25C3.71875 0.25 0.25 3.75 0.25 8C0.25 12.2812 3.71875 15.75 8 15.75C12.25 15.75 15.75 12.2812 15.75 8C15.75 3.75 12.25 0.25 8 0.25ZM8 14.75C4.28125 14.75 1.25 11.75 1.25 8C1.25 4.3125 4.25 1.25 8 1.25C11.6875 1.25 14.75 4.28125 14.75 8C14.75 11.7188 11.7188 14.75 8 14.75ZM12.4062 5.65625C12.5625 5.78125 12.5625 6.03125 12.4062 6.1875L6.78125 11.7812C6.625 11.9062 6.375 11.9062 6.25 11.7812L3.5625 9.0625C3.40625 8.90625 3.40625 8.6875 3.5625 8.53125L3.8125 8.28125C3.96875 8.125 4.21875 8.125 4.34375 8.28125L6.5 10.4375L11.625 5.375C11.75 5.21875 12 5.21875 12.1562 5.375L12.4062 5.65625Z"/></svg>`,
+    info: `<svg class="vc-notif" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M0.25 8.5C0.25 4.25 3.71875 0.75 8 0.75C12.25 0.75 15.75 4.25 15.75 8.5C15.75 12.7812 12.25 16.25 8 16.25C3.71875 16.25 0.25 12.7812 0.25 8.5ZM14.75 8.5C14.75 4.78125 11.6875 1.75 8 1.75C4.25 1.75 1.25 4.78125 1.25 8.5C1.25 12.25 4.25 15.25 8 15.25C11.7188 15.25 14.75 12.25 14.75 8.5ZM6.875 11.5C6.65625 11.5 6.5 11.6875 6.5 11.875V12.125C6.5 12.3438 6.65625 12.5 6.875 12.5H9.125C9.3125 12.5 9.5 12.3438 9.5 12.125V11.875C9.5 11.6875 9.3125 11.5 9.125 11.5H8.75V7.125C8.75 6.9375 8.5625 6.75 8.375 6.75H6.875C6.65625 6.75 6.5 6.9375 6.5 7.125V7.375C6.5 7.59375 6.65625 7.75 6.875 7.75H7.25V11.5H6.875ZM7 5C7 4.46875 7.4375 4 8 4C8.53125 4 9 4.46875 9 5C9 5.5625 8.53125 6 8 6C7.4375 6 7 5.5625 7 5Z"/></svg>`,
+    information:`<svg class="vc-information" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.00244 0.190002C2.7915 0.190002 0.189941 2.815 0.189941 6.0025C0.189941 9.21344 2.7915 11.815 6.00244 11.815C9.18994 11.815 11.8149 9.21344 11.8149 6.0025C11.8149 2.815 9.18994 0.190002 6.00244 0.190002ZM6.00244 10.69C3.40088 10.69 1.31494 8.60406 1.31494 6.0025C1.31494 3.42438 3.40088 1.315 6.00244 1.315C8.58057 1.315 10.6899 3.42438 10.6899 6.0025C10.6899 8.60406 8.58057 10.69 6.00244 10.69ZM6.00244 2.76813C5.43994 2.76813 5.01807 3.21344 5.01807 3.7525C5.01807 4.315 5.43994 4.73688 6.00244 4.73688C6.5415 4.73688 6.98682 4.315 6.98682 3.7525C6.98682 3.21344 6.5415 2.76813 6.00244 2.76813ZM7.31494 8.72125V8.15875C7.31494 8.01813 7.17432 7.8775 7.03369 7.8775H6.75244V5.53375C6.75244 5.39313 6.61182 5.2525 6.47119 5.2525H4.97119C4.80713 5.2525 4.68994 5.39313 4.68994 5.53375V6.09625C4.68994 6.26031 4.80713 6.3775 4.97119 6.3775H5.25244V7.8775H4.97119C4.80713 7.8775 4.68994 8.01813 4.68994 8.15875V8.72125C4.68994 8.88531 4.80713 9.0025 4.97119 9.0025H7.03369C7.17432 9.0025 7.31494 8.88531 7.31494 8.72125Z"/></svg>`,
+    info_fill: `<svg class="vc-info-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.815ZM6.00249 4.73687C5.45883 4.73687 5.01812 4.29616 5.01812 3.75249C5.01812 3.20883 5.45883 2.76812 6.00249 2.76812C6.54615 2.76812 6.98686 3.20883 6.98686 3.75249C6.98686 4.29616 6.54615 4.73687 6.00249 4.73687ZM4.68999 8.72123C4.68999 8.87655 4.81592 9.00248 4.97124 9.00248H7.03374C7.18906 9.00248 7.31499 8.87655 7.31499 8.72123V8.15873C7.31499 8.00342 7.18906 7.87748 7.03374 7.87748H6.75249V5.53374C6.75249 5.37842 6.62656 5.25249 6.47124 5.25249H4.97124C4.81592 5.25249 4.68999 5.37842 4.68999 5.53374V6.09624C4.68999 6.25156 4.81592 6.37749 4.97124 6.37749H5.25249V7.87748H4.97124C4.81592 7.87748 4.68999 8.00342 4.68999 8.15873V8.72123Z"/></svg>`,
+    error: `<svg class="vc-notif" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.4141 8.49991L7.99991 1.9141L14.5857 8.49991L7.99991 15.0857L1.4141 8.49991ZM7.46958 1.03022C7.76247 0.737323 8.23734 0.737324 8.53024 1.03022L15.4696 7.96958C15.7625 8.26247 15.7625 8.73734 15.4696 9.03024L8.53024 15.9696C8.23734 16.2625 7.76247 16.2625 7.46958 15.9696L0.530216 9.03024C0.237323 8.73734 0.237324 8.26247 0.530217 7.96958L7.46958 1.03022ZM7.62491 4.49989C7.40616 4.49989 7.24991 4.68739 7.24991 4.90614L7.46866 10.1561C7.46866 10.3436 7.65616 10.4999 7.84366 10.4999H8.12491C8.31241 10.4999 8.49991 10.3436 8.49991 10.1561L8.71866 4.90614C8.71866 4.68739 8.56241 4.49989 8.34366 4.49989H7.62491ZM7.99991 11.1249C7.49991 11.1249 7.12491 11.5311 7.12491 11.9999C7.12491 12.4999 7.49991 12.8749 7.99991 12.8749C8.46866 12.8749 8.87491 12.4999 8.87491 11.9999C8.87491 11.5311 8.46866 11.1249 7.99991 11.1249Z"/></svg>`,
+    question: `<svg class="vc-question" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6 0.190002C2.78906 0.190002 0.1875 2.815 0.1875 6.0025C0.1875 9.21344 2.78906 11.815 6 11.815C9.1875 11.815 11.8125 9.21344 11.8125 6.0025C11.8125 2.815 9.1875 0.190002 6 0.190002ZM6 10.69C3.39844 10.69 1.3125 8.60406 1.3125 6.0025C1.3125 3.42438 3.39844 1.315 6 1.315C8.57812 1.315 10.6875 3.42438 10.6875 6.0025C10.6875 8.60406 8.57812 10.69 6 10.69ZM8.50781 4.71344C8.50781 3.54156 7.26562 2.6275 6.11719 2.6275C5.01562 2.6275 4.3125 3.09625 3.77344 3.91656C3.67969 4.03375 3.70312 4.19781 3.82031 4.29156L4.47656 4.78375C4.59375 4.8775 4.78125 4.85406 4.875 4.73688C5.22656 4.29156 5.48438 4.03375 6.02344 4.03375C6.44531 4.03375 6.96094 4.29156 6.96094 4.71344C6.96094 5.01813 6.70312 5.15875 6.28125 5.39313C5.8125 5.67438 5.17969 6.0025 5.17969 6.84625V7.03375C5.17969 7.19781 5.29688 7.315 5.46094 7.315H6.51562C6.67969 7.315 6.79688 7.19781 6.79688 7.03375V6.89313C6.79688 6.30719 8.50781 6.28375 8.50781 4.71344ZM6.98438 8.6275C6.98438 8.08844 6.53906 7.64313 6 7.64313C5.4375 7.64313 5.01562 8.08844 5.01562 8.6275C5.01562 9.19 5.4375 9.61188 6 9.61188C6.53906 9.61188 6.98438 9.19 6.98438 8.6275Z"/></svg>`,
+    question_fill: `<svg class="vc-question-fill" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M11.8125 6.0025C11.8125 2.815 9.1875 0.190002 6 0.190002C2.78906 0.190002 0.1875 2.815 0.1875 6.0025C0.1875 9.21344 2.78906 11.815 6 11.815C9.1875 11.815 11.8125 9.21344 11.8125 6.0025ZM6.14062 2.11188C7.47656 2.11188 8.88281 3.14313 8.88281 4.5025C8.88281 6.33063 6.9375 6.35406 6.9375 7.01031V7.03375C6.9375 7.19781 6.79688 7.315 6.65625 7.315H5.34375C5.17969 7.315 5.0625 7.19781 5.0625 7.03375V6.94C5.0625 5.97906 5.78906 5.60406 6.32812 5.29938C6.79688 5.04156 7.10156 4.85406 7.10156 4.5025C7.10156 4.03375 6.49219 3.72906 6.02344 3.72906C5.39062 3.72906 5.10938 4.03375 4.6875 4.57281C4.59375 4.69 4.40625 4.71344 4.28906 4.61969L3.46875 4.01031C3.35156 3.91656 3.32812 3.7525 3.42188 3.61188C4.05469 2.65094 4.875 2.11188 6.14062 2.11188ZM6 7.92438C6.58594 7.92438 7.07812 8.41656 7.07812 9.0025C7.07812 9.61188 6.58594 10.0806 6 10.0806C5.39062 10.0806 4.92188 9.61188 4.92188 9.0025C4.92188 8.41656 5.39062 7.92438 6 7.92438Z"/></svg>`,
+    attention: `<svg class="vc-attention" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.2968 5.99686C12.2968 9.47529 9.4774 12.2937 5.99999 12.2937C2.52257 12.2937 -0.296875 9.47529 -0.296875 5.99686C-0.296875 2.52046 2.52257 -0.300003 5.99999 -0.300003C9.4774 -0.300003 12.2968 2.52046 12.2968 5.99686ZM0.921872 5.99686C0.921872 8.80428 3.19351 11.075 5.99999 11.075C8.8074 11.075 11.0781 8.80328 11.0781 5.99686C11.0781 3.19046 8.80542 0.918744 5.99999 0.918744C3.19361 0.918744 0.921872 3.19132 0.921872 5.99686ZM6.52265 6.80936C6.68498 6.80936 6.81886 6.68205 6.82696 6.51987L6.99961 3.06675C7.00832 2.89274 6.86956 2.74686 6.6953 2.74686H5.30467C5.13041 2.74686 4.99165 2.89274 5.00036 3.06675L5.17301 6.51987C5.18111 6.68205 5.31499 6.80936 5.47732 6.80936H6.52265ZM7.06639 8.43435C7.06639 9.02238 6.58801 9.50076 5.99999 9.50076C5.41196 9.50076 4.93358 9.02238 4.93358 8.43435C4.93358 7.84633 5.41196 7.36795 5.99999 7.36795C6.58801 7.36795 7.06639 7.84633 7.06639 8.43435Z"/></svg>`,
+    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>`,
+
+}
+
+export default {
+    // TODO: is this the correct iconfont?
+    icons: {
+        iconfont: "md",
+        rtl: false,
+        values: {
+            example: {
+                component: VcSvg,
+                props: {
+                    svg: `<svg viewBox="0 0 13 14" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6.21211 4.07351C7.28689 4.07351 8.1582 3.21068 8.1582 2.14635C8.1582 1.08305 7.28689 0.220215 6.21211 0.220215C5.13733 0.220215 4.26707 1.08305 4.26707 2.14635C4.26707 3.21068 5.13733 4.07351 6.21211 4.07351Z" fill="blue"/>
+                    <path d="M5.4247 12.7562L5.26192 12.6384C4.62227 12.1785 4.4814 11.293 4.94574 10.6606L9.44105 4.78918C9.9054 4.15678 10.7997 4.01625 11.4393 4.47608L11.6021 4.59388C12.2407 5.05372 12.3826 5.93928 11.9183 6.57272L7.42296 12.442C6.95861 13.0755 6.06435 13.215 5.4247 12.7562Z" fill="red"/>
+                    <path d="M3.68876 10.5109L4.67276 9.24192C5.20493 8.62192 5.40215 7.88516 4.9378 7.25276L2.98337 4.78929C2.51902 4.15689 1.62476 4.01636 0.986148 4.47619L0.822322 4.59296C0.183713 5.05382 0.0417997 5.93939 0.506148 6.57179L2.55867 9.16236L3.68876 10.5109Z" fill="green"/>
+                </svg>`
+                }
+            },
+            flag: {
+                component: VcSvg,
+                props: {svg: icons.flag}
+            },
+            customer: {
+                component: VcSvg,
+                props: {svg: icons.customer}
+            },
+            inactive: {
+                component: VcSvg,
+                props: {svg: icons.inactive}
+            },
+            vip: {
+                component: VcSvg,
+                props: {svg: icons.vip}
+            },
+            success: {
+                component: VcSvg,
+                props: {svg: icons.success}
+            },
+            close_button: {
+                component: VcSvg,
+                props: {svg: icons.close_button}
+            },
+            arrow_right: {
+                component: VcSvg,
+                props: {svg: icons.arrow_right}
+            },
+            warning: {
+                component: VcSvg,
+                props: {svg: icons.warning}
+            },
+            check_circle: {
+                component: VcSvg,
+                props: {svg: icons.check_circle}
+            },
+            info: {
+                component: VcSvg,
+                props: {svg: icons.info}
+            },
+            information: {
+                component: VcSvg,
+                props: {svg: icons.information}
+            },
+            info_fill: {
+                component: VcSvg,
+                props: {svg: icons.info_fill}
+            },
+            error: {
+                component: VcSvg,
+                props: {svg: icons.error}
+            },
+            question: {
+                component: VcSvg,
+                props: {svg: icons.question}
+            },
+            question_fill: {
+                component: VcSvg,
+                props: {svg: icons.question_fill}
+            },
+            attention: {
+                component: VcSvg,
+                props: {svg: icons.attention}
+            },
+            attention_fill: {
+                component: VcSvg,
+                props: {svg: icons.attention_fill}
+            },
+            three_dots: {
+                component: VcSvg,
+                props: {svg: icons.three_dots}
+            },
+        }
+    },
+    theme: {
+        dark: false,
+        options: {
+            customProperties: true // allow create css variables based on the theme
+        },
+        themes: {
+            light: {
+                primary: '#0C315E', // represents the secondary color on DB
+                secondary: { // represents the primary color on DB
+                    base: '#00dcf7',
+                    lighten1: '#99f1fc',
+                    lighten2: '#c2f7fd',
+                    lighten3: '#e0fbfe'
+                },
+            }
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcita/design-system",
-  "version": "0.0.12-prod.beta.27",
+  "version": "0.1.2",
   "description": "vcita design system",
   "author": "vcita",
   "scripts": {
@@ -21,12 +21,12 @@
   "unpkg": "dist/@vcita/design-system.min.js",
   "files": [
     "dist/*",
-    "src/**/*.vue",
-    "styles/**/*.scss"
+    "src",
+    "styles/**/*.scss",
+    "init",
+    "utils"
   ],
   "dependencies": {
-    "@mdi/font": "^5.9.55",
-    "@testing-library/dom": "^7.31.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.14",
     "vue-click-outside": "^1.1.0",
@@ -45,6 +45,7 @@
     "@storybook/addon-links": "^6.3.4",
     "@storybook/storybook-deployer": "^2.8.10",
     "@storybook/vue": "^6.3.4",
+    "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/user-event": "^13.2.1",
     "@testing-library/vue": "^5.8.1",

package/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>

package/src/components/VcActionList/VcActionList.spec.js

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

package/src/components/VcActionList/VcActionList.stories.js

@@ -0,0 +1,56 @@
+import VcActionListCmp from "./VcActionList";
+
+const GeneralTemplate = (args, {argTypes}) => ({
+    components: {VcActionList: VcActionListCmp},
+    props: Object.keys(argTypes),
+    template: `
+      <div>
+        <vcActionList :items="items"
+                      :data-qa="dataQa"
+                      @action="onAction">
+          <template v-slot="{attrs, on}">
+            <v-icon v-bind="attrs" v-on="on">$three_dots</v-icon>
+          </template>
+        </vcActionList>
+      </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'
+        }
+    ],
+    dataQa: 'playground-qa'
+}
+
+export default {
+    title: 'Controls / VcActionList',
+    id: 'VcActionList',
+    component: VcActionListCmp,
+    argTypes: {
+        onAction: { action: 'onAction'},
+    },
+    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'
+        }
+    },
+};

package/src/components/VcActionList/VcActionList.vue

@@ -9,7 +9,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)"
         >
           <v-list-item-title class="option-title">
             <vc-icon v-if="item.icon && !isNotAllItemsWithIcons" size="20" class="icon-item">

package/src/components/VcActions/VcActions.spec.js

@@ -0,0 +1,153 @@
+import '@testing-library/jest-dom'
+import VcActions from "./VcActions.vue";
+import Vuetify from 'vuetify'
+import {render} from "@testing-library/vue";
+import userEvent from '@testing-library/user-event';
+import init from "../../../testing-library.config";
+
+init();
+
+describe("VcActions.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: {},
+            },
+            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'
+            }
+        ],
+        dataQa: 'actions-test'
+    }
+
+    const bottomSheetProps = {
+        ...defaultProps,
+        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
+        },
+
+    }
+
+    it("mounts", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText, emitted, getByRole} = renderWithVuetify(VcActions, {
+            props: defaultProps
+        }, undefined, false);
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+
+        const actionsButton = getByRole('button',{name:/\$three_dots/i})
+        await userEvent.click(actionsButton);
+        const menuList = getByTestId('actions-test')
+        expect(container).toContainElement(menuList)
+
+        //select an action and check if it fired
+        const actionItem = getByText('Move to guest list')
+        await userEvent.click(actionItem);
+        expect(emitted().action.length).toBe(1);
+        expect(emitted().action[0]).toEqual(['moveToGustList']);
+    });
+
+    it("mounts mobile", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText, emitted, getByRole} = renderWithVuetify(VcActions, {
+            props: defaultProps
+        }, undefined, true);
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+        const actionsButton = getByRole('button',{name:/\$three_dots/i})
+        await userEvent.click(actionsButton);
+        const menuList = getByTestId('actions-test')
+        expect(container).toContainElement(menuList)
+
+        //select an action and check if it fired
+        const actionItem = getByText('Remove from wait list')
+        await userEvent.click(actionItem);
+        expect(emitted().action.length).toBe(1);
+        expect(emitted().action[0]).toEqual(['remove']);
+    });
+
+    it("mounts mobile with header", async () => {
+        // Queries: https://testing-library.com/docs/queries/about#types-of-queries
+        const {container, getByTestId, getByText, emitted, getByRole} = renderWithVuetify(VcActions, {
+            props: bottomSheetProps
+        }, undefined, true);
+
+        // Expect options: https://github.com/testing-library/jest-dom
+        expect(container).toHaveAttribute('data-app', 'true')
+
+        // Open the bottom sheet
+        const actionsButton = getByRole('button',{name:/\$three_dots/i})
+        await userEvent.click(actionsButton);
+        const menuList = getByTestId('actions-test')
+        expect(container).toContainElement(menuList)
+
+
+        // Check extended elements
+        const avatar = getByTestId('avatarImage')
+        expect(avatar).toBeVisible()
+        const  title = getByText('Ronald\'s actions')
+        expect(title).toBeVisible()
+        //Check that the items list visible before clicking on the close button
+        // and hidden after it
+        const listItems = getByTestId('actions-test')
+        expect(listItems).toBeVisible()
+        const closeSheetButton = getByTestId('close-sheet-button')
+        await userEvent.click(closeSheetButton);
+        expect(emitted().close.length).toBe(1);
+        expect(listItems).not.toBeVisible()
+
+
+        //Reopen the bottom sheet
+        await userEvent.click(actionsButton);
+
+        //select an action and check if it fired
+        const actionItem = getByText('Go to client page')
+        await userEvent.click(actionItem);
+        expect(emitted().action.length).toBe(1);
+        expect(emitted().action[0]).toEqual(['goToClientPage']);
+    });
+
+});