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

package/dist/collection/components/dda-input/dda-input.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Components/Text Field/Text Field',
+    title: 'Components/Input',
     tags: ['autodocs'],
     argTypes: {
         size: {
@@ -37,14 +37,6 @@ export default {
             options: ['normal', 'error'],
             description: 'Validation type of the input field',
         },
-        input_role: {
-            control: 'text',
-            description: 'Describe the role',
-        },
-        validation_id: {
-            control: 'text',
-            description: 'Validation ID of helper text and error text',
-        },
         input_status: {
             control: { type: 'select' },
             options: ['normal', 'disabled'],
@@ -74,31 +66,32 @@ export default {
         input_name: {
             control: { type: 'text' },
             description: 'Name of the input field',
-        },
-        required: {
-            control: 'boolean',
-            description: 'Marks the input as required',
-        },
+        }
     },
     parameters: {
         docs: {
             description: {
-                component: `
-To use the \`dda-input\` component, pass the following props:
-
-\`\`\`html
-<dda-input
-  label="Email"
-  placeholder="Enter email"
-  input_role=""
-  type="email"
-  required="true"
-  validation_type="error"
-  error_message="Invalid email"
-  input_id="email-id"
-  aria_label="email"
-></dda-input>
-  \`\`\`
+                component: `
+To use the \`dda-input\` component, pass the following props:
+
+\`\`\`html
+<dda-input
+    placeholder="Enter text"
+    label="Text Input"
+    value=""
+    type="text"
+    size="default"
+    helper_text="Helper or footer text"
+    error_message=""
+    validation_type="normal"
+    custom_class=""
+    component_mode=""
+    input_id="input"
+    aria_label="input"
+    onchange="console.log('changed')"
+    input_name=""
+></dda-input>
+  \`\`\`
 `,
             },
         },
@@ -113,163 +106,132 @@ const Template = (args) => {
 };
 export const Text = Template.bind({});
 Text.args = {
-    label: 'Text Input',
     placeholder: 'Enter text',
-    type: 'text',
-    input_id: 'input',
+    label: 'Text Input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
+    type: 'text',
+    size: 'default',
     helper_text: 'Helper or footer text',
-    error_message: 'Error text',
+    error_message: '',
     validation_type: 'normal',
-    validation_id: 'validationId',
-    input_status: 'normal',
-    size: 'default',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
-    required: false,
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const Password = Template.bind({});
 Password.args = {
-    label: 'Password Input',
     placeholder: 'Enter password',
-    type: 'password',
-    input_id: 'input',
+    label: 'Password Input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
-    helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: '',
-    validation_id: 'validationId',
-    input_status: 'normal',
+    type: 'password',
     size: 'default',
+    helper_text: 'Helper or footer text',
+    error_message: '',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const Email = Template.bind({});
 Email.args = {
-    label: 'Email Input',
     placeholder: 'Enter email',
-    type: 'email',
-    input_id: 'input',
+    label: 'Email Input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
-    helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: '',
-    validation_id: 'validationId',
-    input_status: 'normal',
+    type: 'email',
     size: 'default',
+    helper_text: 'Helper or footer text',
+    error_message: '',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const Number = Template.bind({});
 Number.args = {
-    label: 'Number Input',
     placeholder: 'Enter number',
-    type: 'number',
-    input_id: 'input',
+    label: 'Number Input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
-    helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: '',
-    validation_id: 'validationId',
-    input_status: 'normal',
+    type: 'number',
     size: 'default',
+    helper_text: 'Helper or footer text',
+    error_message: '',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const Date = Template.bind({});
 Date.args = {
+    placeholder: 'Enter Date',
     label: 'Date Input',
-    placeholder: '',
-    type: 'date',
-    input_id: 'input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
-    helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: '',
-    validation_id: 'validationId',
-    input_status: 'normal',
+    type: 'date',
     size: 'default',
-    custom_class: 'dda-date-picker',
+    helper_text: 'Helper or footer text',
+    error_message: '',
+    custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const Time = Template.bind({});
 Time.args = {
-    label: 'Time Input',
     placeholder: 'Enter Time',
-    type: 'time',
-    input_id: 'input',
+    label: 'Time Input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
-    helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: '',
-    validation_id: 'validationId',
-    input_status: 'normal',
+    type: 'time',
     size: 'default',
+    helper_text: 'Helper or footer text',
+    error_message: '',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const Witherror = Template.bind({});
 Witherror.args = {
-    label: 'Input with Error',
     placeholder: 'Enter value',
-    type: 'text',
-    input_id: 'input',
+    label: 'Input with Error',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
-    helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: 'error',
-    validation_id: 'validationId',
-    input_status: 'normal',
+    type: 'text',
     size: 'default',
+    helper_text: '',
+    error_message: 'Helper or footer text',
+    validation_type: 'error',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
 export const disabled = Template.bind({});
 disabled.args = {
-    label: 'Number Input',
     placeholder: 'Enter number',
-    type: 'number',
-    input_id: 'input',
+    label: 'Number Input',
     value: '',
-    input_role: '',
-    input_name: 'input',
-    aria_label: 'input',
+    type: 'number',
+    size: 'default',
     helper_text: 'Helper or footer text',
-    error_message: 'Error text',
-    validation_type: '',
-    validation_id: 'validationId',
+    error_message: '',
     input_status: 'disabled',
-    size: 'default',
     custom_class: '',
     component_mode: '',
-    inputChanged: '',
+    input_id: 'input',
+    aria_label: 'input',
+    onchange: '',
+    input_name: 'input',
 };
-//# sourceMappingURL=dda-input.stories.js.map