File Uploader

package.json

@@ -61,6 +61,7 @@
         "css-loader": "^0.28.7",
         "enquire.js": "^2.1.6",
         "file-loader": "^1.1.5",
+        "filesize": "^3.6.0",
         "moment": "^2.19.3",
         "node-sass": "^4.7.2",
         "popper.js": "^1.12.9",
@@ -76,9 +77,11 @@
     },
     "devDependencies": {
         "@types/es6-promise": "^0.0.33",
+        "@types/filesize": "^3.6.0",
         "@types/jest": "^22.1.1",
         "@types/node": "^8.0.54",
         "@vue/test-utils": "^1.0.0-beta.11",
+        "ajv": "^6.1.1",
         "awesome-typescript-loader": "^3.4.1",
         "axios": "^0.17.1",
         "bundle-loader": "^0.5.5",
@@ -90,6 +93,7 @@
         "enquire.js": "^2.1.6",
         "es6-promise": "^4.1.1",
         "file-loader": "^1.1.5",
+        "filesize": "^3.6.0",
         "html-webpack-plugin": "^2.30.1",
         "jest": "^22.1.4",
         "jest-junit": "^3.6.0",
@@ -98,7 +102,7 @@
         "nightwatch": "^0.9.19",
         "node-sass": "^4.7.2",
         "popper.js": "^1.12.9",
-        "portal-vue": "^1.1.1",
+        "portal-vue": "~1.1.1",
         "postcss-loader": "^2.0.9",
         "postcss-sass": "^0.2.0",
         "qs": "^6.5.1",

src/components/component-names.ts

@@ -13,6 +13,8 @@ export const DROPDOWN_NAME: string = 'm-dropdown';
 export const DROPDOWN_ITEM_NAME: string = 'm-dropdown-item';
 export const DROPDOWN_GROUP_NAME: string = 'm-dropdown-group';
 export const DYNAMIC_TEMPLATE_NAME: string = 'm-dynamic-template';
+export const FILE_SELECT_NAME: string = 'm-file-select';
+export const FILE_UPLOAD_NAME: string = 'm-file-upload';
 export const EDIT_WINDOW_NAME: string = 'm-edit-window';
 export const FLEX_TEMPLATE_NAME: string = 'm-flex-template';
 export const I18N_NAME: string = 'm-i18n';
@@ -31,6 +33,7 @@ export const PANEL_NAME: string = 'm-panel';
 export const PHONE_NUMBER_NAME: string = 'm-phone-number';
 export const POPPER_NAME: string = 'm-popper';
 export const POPUP_NAME: string = 'm-popup';
+export const PROGRESS_NAME: string = 'm-progress';
 export const RADIO_NAME: string = 'm-radio';
 export const RADIO_GROUP_NAME: string = 'm-radio-group';
 export const RADIO_STYLE_NAME: string = 'm-radio-style';

src/components/dialog/dialog.ts

@@ -1,11 +1,12 @@
-import { ModulVue } from '../../utils/vue/vue';
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
-import WithRender from './dialog.html?style=./dialog.scss';
 import { Prop } from 'vue-property-decorator';
-import { DIALOG_NAME } from '../component-names';
-import { Portal, PortalMixin, PortalMixinImpl, BackdropMode, PortalTransitionDuration } from '../../mixins/portal/portal';
+
 import { MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
+import { BackdropMode, Portal, PortalMixin, PortalMixinImpl, PortalTransitionDuration } from '../../mixins/portal/portal';
+import { ModulVue } from '../../utils/vue/vue';
+import { DIALOG_NAME } from '../component-names';
+import WithRender from './dialog.html?style=./dialog.scss';
 
 export enum MDialogSize {
     FullScreen = 'full-screen',
@@ -45,6 +46,10 @@ export class MDialog extends ModulVue implements PortalMixinImpl {
     @Prop({ default: true })
     public paddingFooter: boolean;
 
+    public closeDialog(): void {
+        this.as<PortalMixin>().tryClose();
+    }
+
     public handlesFocus(): boolean {
         return true;
     }
@@ -102,10 +107,6 @@ export class MDialog extends ModulVue implements PortalMixinImpl {
             this.as<PortalMixin>().tryClose();
         }
     }
-
-    private closeDialog(): void {
-        this.as<PortalMixin>().tryClose();
-    }
 }
 
 const DialogPlugin: PluginObject<any> = {

src/components/file-select/__snapshots__/file-select.spec.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`file-select should render correctly 1`] = `
+<div class="m-file-select">
+    <input type="file" id="mFileSelect-uuid" tabindex="-1" class="m-file-select__hidden">
+    <label for="mFileSelect-uuid" class="m-file-select__hidden"><span class="m-i18n">Browse</span></label>
+    <button type="button" aria-hidden="true" class="m-button m--is-skin-secondary"> <span class="m-button__text"><span class="m-i18n">Browse</span> </span>
+    </button>
+</div>
+`;

src/components/file-select/file-select.html

@@ -0,0 +1,24 @@
+<div class="m-file-select">
+    <input ref="inputFile" type="file" :id="id" class="m-file-select__hidden" @change="processFile" :disabled="disabled || isWaiting" tabindex="-1" :multiple="multiple">
+    <label :for="id" class="m-file-select__hidden">
+            <m-i18n v-if="!hasLabel" k="m-select-file:label"></m-i18n>
+            <template v-else>{{ label }}</template>
+    </label>
+    <m-button @click="onClick" @focus="onFocus" @blur="onBlur" aria-hidden="true"
+            :skin="skin"
+            :disabled="disabled"
+            :waiting="waiting"
+            :fullSize="fullSize"
+            :iconName="iconName"
+            :iconPosition="iconPosition"
+            :iconSize="iconSize">
+        <m-i18n v-if="!hasLabel" k="m-select-file:label"></m-i18n>
+        <template v-else>{{ label }}</template>
+    </m-button>
+    <m-validation-message ref="validation"
+        :disabled="isDisabled"
+        :error="hasError"
+        :error-message="errorMessage"
+        :valid-message="validMessage"
+        :helper-message="helperMessage"></m-validation-message>
+</div>

src/components/file-select/file-select.lang.en.json

@@ -0,0 +1,5 @@
+{
+    "m-select-file": {
+        "label": "Browse"
+    }
+}

src/components/file-select/file-select.lang.fr.json

@@ -0,0 +1,5 @@
+{
+    "m-select-file": {
+        "label": "Parcourir"
+    }
+}

src/components/file-select/file-select.scss

@@ -0,0 +1,7 @@
+@import 'abstracts/variables';
+
+.m-file-select {
+    &__hidden {
+        @include m-visually-hidden;
+    }
+}

src/components/file-select/file-select.spec.ts

@@ -0,0 +1,79 @@
+import { createLocalVue, mount } from '@vue/test-utils';
+import Vue, { VueConstructor } from 'vue';
+
+import { addMessages } from '../../../tests/helpers/lang';
+import { renderComponent } from '../../../tests/helpers/render';
+import uuid from '../../utils/uuid/uuid';
+import { MButton } from '../button/button';
+import FileSelectPlugin, { MFileSelect } from './file-select';
+
+jest.mock('../../utils/uuid/uuid');
+(uuid.generate as jest.Mock).mockReturnValue('uuid');
+
+describe('file-select', () => {
+    let localVue: VueConstructor<Vue>;
+
+    beforeEach(() => {
+        localVue = createLocalVue();
+        localVue.use(FileSelectPlugin);
+        addMessages(localVue, [
+            'components/file-select/file-select.lang.en.json',
+            'components/validation-message/validation-message.lang.en.json'
+        ]);
+    });
+
+    it('should render correctly', () => {
+        const fileSelect = mount(MFileSelect, {
+            localVue: localVue
+        });
+
+        return expect(
+            renderComponent(fileSelect.vm)
+        ).resolves.toMatchSnapshot();
+    });
+
+    it('should flow down button props', () => {
+        const buttonProps = {
+            skin: 'primary',
+            disabled: true,
+            waiting: true,
+            fullSize: true,
+            iconName: 'icon-name',
+            iconPosition: 'right',
+            iconSize: '24px'
+        };
+
+        const fileSelect = mount(MFileSelect, {
+            localVue: localVue,
+            propsData: buttonProps
+        });
+
+        expect(fileSelect.find(MButton).props()).toEqual(buttonProps);
+    });
+
+    it('should set multiple attribute on input based on prop value', () => {
+        const fileSelect = mount(MFileSelect, {
+            localVue: localVue
+        });
+
+        fileSelect.setProps({ multiple: true });
+        expect(fileSelect.find('input').attributes()).toHaveProperty(
+            'multiple'
+        );
+
+        fileSelect.setProps({ multiple: false });
+        expect(fileSelect.find('input').attributes()).not.toHaveProperty(
+            'multiple'
+        );
+    });
+
+    it('should emit click event when button is clicked', () => {
+        const fileSelect = mount(MFileSelect, {
+            localVue: localVue
+        });
+
+        fileSelect.find(MButton).trigger('click');
+
+        expect(fileSelect.emitted('click')).toBeTruthy();
+    });
+});