@dubai-design-system/components-js 3.12.9 → 3.12.11

package/dist/collection/components/dda-attach-file/dda-attach-file.stories.js

@@ -4,49 +4,45 @@ export default {
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-attach-file\` component, pass the following props:
-
-\`\`\`html
-<dda-attach-file
-  label="Attach File"
-  place_holder="No File Selected"
-  upload_button_text="Choose File"
-  helper_text="Helper or footer text"
-  success_text="Successfully uploaded"
-  error_message="Error message"
-  file_size_error_message="File size should not exceed {max} MB"
-  max_file_size="2"
-  size="default"
-  validation_type="normal"
-  input_type="normal"
-  custom_class=""
-  component_mode=""
-  input_id="input"
-  button_id="button"
-  delete_button_id="deleteFile"
-  aria_label="input"
-  button_aria_label="button"
-  button_name="button"
-  input_name="input"
-  accept=".pdf,.docx"
-></dda-attach-file>
-\`\`\`
-
-The component emits a \`fileChanged\` event when a file is selected or removed.
-        `,
+                component: `
+  To use the \`dda-attach-file\` component, pass the following props:
+  
+  \`\`\`html
+<dda-attach-file
+    label="Attach File"
+    helper_text="Helper or footer text"
+    error_message=""
+    size="default"
+    validation_type="normal"
+    input_type="normal"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    button_id="button"
+    aria_label="input"
+    button_aria_label="button"
+    button_name="button"
+    input_name="input"
+    onchange="console.log('changed')"
+></dda-attach-file>
+    \`\`\`
+  `,
             },
         },
     },
     argTypes: {
-        label: { control: 'text', description: 'Label for the attach file component' },
-        place_holder: { control: 'text', description: 'Default place holder text' },
-        upload_button_text: { control: 'text', description: 'Button text for upload file' },
-        helper_text: { control: 'text', description: 'Helper text for the attach file component' },
-        success_text: { control: 'text', description: 'Success message text' },
-        error_message: { control: 'text', description: 'Error message displayed below the component' },
-        file_size_error_message: { control: 'text', description: 'File size limit exceed warning message. Use {max} as a placeholder for max size' },
-        validation_id: { control: 'text', description: 'ID used for error/helper message' },
+        label: {
+            control: 'text',
+            description: 'Label for the attach file component',
+        },
+        helper_text: {
+            control: 'text',
+            description: 'Helper text for the attach file component',
+        },
+        error_message: {
+            control: 'text',
+            description: 'Error message displayed below the attach file component',
+        },
         size: {
             control: { type: 'select' },
             options: ['default', 'small'],
@@ -55,80 +51,128 @@ The component emits a \`fileChanged\` event when a file is selected or removed.
         validation_type: {
             control: { type: 'select' },
             options: ['normal', 'error'],
-            description: 'Validation type of the component',
+            description: 'Validation type of the attach file component',
         },
         input_type: {
             control: { type: 'select' },
             options: ['normal', 'disabled'],
-            description: 'Input type (used for visual class only)',
+            description: 'Input type of the attach file component',
+        },
+        custom_class: {
+            control: { type: 'text' },
+            description: 'Custom class to be applied by the user',
         },
-        custom_class: { control: 'text', description: 'Custom class to be applied' },
         component_mode: {
             control: { type: 'check' },
             options: ['light-mode'],
             description: 'Mode of the attach file component',
         },
-        input_id: { control: 'text', description: 'Input id for file input' },
-        button_id: { control: 'text', description: 'Button id for file upload button' },
-        delete_button_id: { control: 'text', description: 'Button id for file delete button' },
-        aria_label: { control: 'text', description: 'ARIA label for input' },
-        button_aria_label: { control: 'text', description: 'ARIA label for upload button' },
-        button_name: { control: 'text', description: 'Name for the upload button' },
-        input_name: { control: 'text', description: 'Name for the input field' },
-        accept: { control: 'text', description: 'Accept attribute for file types (e.g., .pdf,.docx)' },
-        max_file_size: { control: 'number', description: 'Maximum file size allowed in MB' },
+        input_id: {
+            control: 'text',
+            description: 'Input id for the attach file component',
+        },
+        button_id: {
+            control: 'text',
+            description: 'Button id for the attach file component',
+        },
+        aria_label: {
+            control: 'text',
+            description: 'Aria label for accessibility',
+        },
+        button_aria_label: {
+            control: 'text',
+            description: 'Aria label for the upload button',
+        },
+        onchange: {
+            control: 'text',
+            description: 'onchange event for the attach file component',
+        },
+        button_name: {
+            control: 'text',
+            description: 'Name for the upload button',
+        },
+        input_name: {
+            control: 'text',
+            description: 'Name for the input field',
+        }
     },
 };
 const Template = (args) => {
     const attributes = Object.entries(args)
         .filter(([key, value]) => value !== undefined && key !== 'text')
-        .map(([key, value]) => {
-        if (typeof value === 'boolean')
-            return value ? key : '';
-        return `${key}="${value}"`;
-    })
-        .filter(Boolean)
+        .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    return `
-    <dda-attach-file ${attributes}></dda-attach-file>
-    <script>
-      const fileComponent = document.querySelector('dda-attach-file');
-      fileComponent?.addEventListener('fileChanged', (e) => {
-        console.log('fileChanged:', e.detail);
-      });
-    </script>
-  `;
+    return `<dda-attach-file ${attributes}></dda-attach-file>`;
 };
 export const Default = Template.bind({});
 Default.args = {
     label: 'Attach File',
-    place_holder: 'No File Selected',
-    upload_button_text: 'Choose File',
     helper_text: 'Helper or footer text',
-    success_text: 'Successfully uploaded',
-    error_message: 'Error Message',
-    validation_id: 'validationId',
-    file_size_error_message: 'File size should not exceed {max} MB',
-    max_file_size: 200,
+    error_message: '',
     size: 'default',
     validation_type: 'normal',
     input_type: 'normal',
-    input_id: 'choose-File',
-    button_id: 'choose-File-button',
-    delete_button_id: 'delete-File-button',
+    custom_class: '',
+    component_mode: '',
+    input_id: 'input',
+    button_id: 'button',
     aria_label: 'input',
     button_aria_label: 'button',
+    onchange: '',
     button_name: 'button',
-    input_name: 'input',
-    accept: '.pdf,.docx',
+    input_name: 'input'
+};
+export const Small = Template.bind({});
+Small.args = {
+    label: 'Attach File',
+    helper_text: 'Helper or footer text',
+    error_message: '',
+    size: 'small',
+    validation_type: 'normal',
+    input_type: 'normal',
     custom_class: '',
     component_mode: '',
-    onInput: '',
+    input_id: 'input',
+    button_id: 'button',
+    aria_label: 'input',
+    button_aria_label: 'button',
+    onchange: '',
+    button_name: 'button',
+    input_name: 'input'
 };
-export const Small = Template.bind({});
-Small.args = Object.assign(Object.assign({}, Default.args), { size: 'small' });
 export const ErrorState = Template.bind({});
-ErrorState.args = Object.assign(Object.assign({}, Default.args), { validation_type: 'error' });
+ErrorState.args = {
+    label: 'Attach File',
+    helper_text: '',
+    error_message: 'Helper or footer text',
+    size: 'default',
+    validation_type: 'error',
+    input_type: 'normal',
+    custom_class: '',
+    component_mode: '',
+    input_id: 'input',
+    button_id: 'button',
+    aria_label: 'input',
+    button_aria_label: 'button',
+    onchange: '',
+    button_name: 'button',
+    input_name: 'input'
+};
 export const Disabled = Template.bind({});
-Disabled.args = Object.assign(Object.assign({}, Default.args), { input_type: 'disabled' });
-//# sourceMappingURL=dda-attach-file.stories.js.map
+Disabled.args = {
+    label: 'Attach File',
+    helper_text: 'Helper or footer text',
+    error_message: '',
+    size: 'default',
+    validation_type: 'normal',
+    input_type: 'disabled',
+    custom_class: '',
+    component_mode: '',
+    input_id: 'input',
+    button_id: 'button',
+    aria_label: 'input',
+    button_aria_label: 'button',
+    onchange: '',
+    button_name: 'button',
+    input_name: 'input'
+};