@mozaic-ds/web-components 1.3.0 → 1.4.0

package/dist/components/fileuploader/FileUploader.stories.js

@@ -0,0 +1,172 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { action } from 'storybook/actions';
+import './FileUploader.svelte';
+import '../fileuploaderitem/FileUploaderItem.svelte';
+const meta = {
+    title: 'Form elements/File uploader',
+    component: 'm-file-uploader',
+    subcomponents: { 'm-file-uploader-item': 'm-file-uploader-item' },
+    tags: ['v2'],
+    args: {
+        id: 'id',
+        files: [],
+        label: 'Label',
+        helptext: 'Help text',
+        helpid: 'helpid',
+        necessityindicator: '(required)',
+        hasdragdrop: true,
+        showfileslist: true,
+        disabled: false,
+        title: 'Drag & drop',
+        subtitle: 'or',
+        uploadbuttonlabel: 'Upload file(s)',
+        multiple: true,
+        deletebuttonlabel: 'Delete',
+        information: 'Additional file information',
+        errormessage: 'Error message (Be concise and use comprehensive words).',
+    },
+    argTypes: {
+        files: {
+            description: 'Model binding for the selected files',
+            table: {
+                type: {
+                    summary: '{ name: string; size?: number; type?: HTMLInputElement["accept"]}[]',
+                },
+            },
+        },
+        format: {
+            control: 'radio',
+            options: ['inline', 'stacked'],
+        },
+        name: {
+            description: 'Slot for customizing the file name display.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        information: {
+            description: 'Slot for displaying additional file information.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        errormessage: {
+            description: 'Slot for providing a custom error message.',
+            table: {
+                category: 'Slots',
+            },
+        },
+    },
+    render: (args) => {
+        return html `
+      <m-file-uploader
+        id="${args.id}"
+        .files="${args.files}"
+        label="${args.label}"
+        helptext="${ifDefined(args.helptext)}"
+        helpid="${ifDefined(args.helpid)}"
+        necessityindicator="${ifDefined(args.necessityindicator)}"
+        .hasdragdrop="${ifDefined(args.hasdragdrop)}"
+        .showfileslist="${ifDefined(args.showfileslist)}"
+        .disabled="${ifDefined(args.disabled)}"
+        title="${ifDefined(args.title)}"
+        subtitle="${ifDefined(args.subtitle)}"
+        uploadbuttonlabel="${ifDefined(args.uploadbuttonlabel)}"
+        .multiple="${ifDefined(args.multiple)}"
+        deletebuttonlabel="${ifDefined(args.deletebuttonlabel)}"
+        information="${ifDefined(args.information)}"
+        errormessage="${ifDefined(args.errormessage)}"
+        format="${ifDefined(args.format)}"
+        @validation="${action('validation')}"
+        @files-update="${action('files-update')}"
+      >
+      </m-file-uploader>
+    `;
+    },
+};
+export default meta;
+export const Default = {
+    args: {},
+};
+export const WithoutDragAndDrop = {
+    args: {
+        hasdragdrop: false,
+    },
+};
+export const Disabled = {
+    args: {
+        disabled: true,
+    },
+};
+export const InlineFileWithError = {
+    args: {
+        valid: false,
+        file: {
+            name: 'File.txt',
+        },
+        information: 'Additional information',
+    },
+    render: (args) => {
+        return html `
+      <div style="width: 400px">
+        <m-file-uploader-item
+          .valid="${args.valid}"
+          .file="${args.file}"
+          information="${args.information}"
+        >
+        </m-file-uploader-item>
+      </div>
+    `;
+    },
+};
+export const StackedFileItem = {
+    args: {
+        valid: true,
+        file: {
+            name: 'File.txt',
+        },
+        format: 'stacked',
+        information: 'Additional information',
+        deletebuttonlabel: 'Delete',
+    },
+    render: (args) => {
+        return html `
+      <div style="width: 400px">
+        <m-file-uploader-item
+          .valid="${args.valid}"
+          .file="${args.file}"
+          format="${args.format}"
+          information="${args.information}"
+          deletebuttonlabel="${args.deletebuttonlabel}"
+        >
+        </m-file-uploader-item>
+      </div>
+    `;
+    },
+};
+export const StackedFileWithError = {
+    args: {
+        valid: false,
+        file: {
+            name: 'File.txt',
+        },
+        format: 'stacked',
+        information: 'Additional information',
+        deletebuttonlabel: 'Delete',
+    },
+    render: (args) => {
+        return html `
+      <div style="width: 400px">
+        <m-file-uploader-item
+          .valid="${args.valid}"
+          .file="${args.file}"
+          format="${args.format}"
+          information="${args.information}"
+          deletebuttonlabel="${args.deletebuttonlabel}"
+        >
+        </m-file-uploader-item>
+      </div>
+    `;
+    },
+};