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

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

@@ -7,124 +7,157 @@ export default {
             options: ['default', 'small'],
             description: 'Size of the select',
         },
-        label: { control: 'text', description: 'Label for the select' },
+        label: {
+            control: 'text',
+            description: 'Label for the select',
+        },
         options: {
-            control: 'object',
-            description: 'Array of options (id and text)',
+            control: 'array', // Use 'array' to handle array input
+            description: 'Array of options for the select',
         },
         selected: {
             control: 'text',
-            description: 'Selected option (id or text)',
+            description: 'Selected option',
         },
-        placeholder: {
-            control: 'text',
-            description: 'Placeholder text when no option is selected',
-        },
-        main_aria_label: {
-            control: 'text',
-            description: 'Aria Label text for the accessibility',
+        disabled: {
+            control: 'boolean',
+            description: 'Disable the select',
         },
-        disabled: { control: 'boolean', description: 'Disable the select' },
         error: {
             control: { type: 'select' },
             options: ['normal', 'error'],
             description: 'Error state of the select',
         },
-        error_message: { control: 'text', description: 'Error message to display' },
-        helper_text: { control: 'text', description: 'Helper or footer text' },
-        validation_id: { control: 'text', description: 'Validation ID' },
-        custom_class: { control: 'text', description: 'Custom class for the select' },
+        error_message: {
+            control: 'text',
+            description: 'Error message to display',
+        },
+        helper_text: {
+            control: 'text',
+            description: 'Helper or footer text',
+        },
+        custom_class: {
+            control: { type: 'text' },
+            description: 'Custom class for the select',
+        },
         component_mode: {
-            control: 'check',
+            control: { type: 'check' },
             options: ['light-mode'],
             description: 'Mode of the select component',
         },
-        button_id: { control: 'text', description: 'Button ID' },
-        toggle_button_name: { control: 'text', description: 'Toggle button name' },
-        option_select_button_name: { control: 'text', description: 'Option select button name' },
-        validation_type: {
-            control: { type: 'select' },
-            options: ['normal', 'error'],
-            description: 'Validation type of the input field',
+        button_id: {
+            control: { type: 'text' },
+            description: 'default',
+        },
+        aria_label: {
+            control: { type: 'text' },
+            description: 'Aria label for the select element',
+        },
+        toggle_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the toggle button',
+        },
+        option_select_button_name: {
+            control: { type: 'text' },
+            description: 'Name for the option select button',
         },
     },
     parameters: {
         docs: {
             description: {
-                component: `
-\`\`\`html
-<dda-select
-  label="Select an option"
-  placeholder="Please select..."
-  main_aria_label="Please choose an option"
-  selected="2"
-  disabled="false"
-  helper_text="Helper or footer text"
-  error_message=""
-  validation_type="normal"
-  size="default"
-  custom_class=""
-  component_mode=""
-  button_id="button"
-  options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"}]'
-  toggle_button_name="toggle_button"
-  option_select_button_name="option_button"
-></dda-select>
-\`\`\`
-        `,
+                component: `
+  To use the \`dda-select\` component, pass the following props:
+
+  \`\`\`html
+<dda-select
+    label="Select an option"
+    selected="Option 1"
+    disabled="false"
+    helper_text="Helper or footer text"
+    error_message=""
+    size="default"
+    custom_class=""
+    component_mode=""
+    button_id="button"
+    aria_label="select"
+    options='["Option 1","Option 2","Option 3"]'
+    toggle_button_name="toggle_button_name"
+    option_select_button_name="option_select_button_name"
+></dda-select>
+  \`\`\`
+  `,
             },
         },
     },
 };
 const Template = (args) => {
-    const optionsAttribute = args.options ? `options='${JSON.stringify(args.options)}'` : '';
-    const otherAttributes = Object.entries(args)
-        .filter(([key]) => key !== 'options')
+    const attributes = Object.entries(args)
+        .filter(([key, value]) => value !== undefined && key !== 'text' && key !== 'options')
         .map(([key, value]) => `${key}="${value}"`)
         .join(' ');
-    return `
-    <dda-select ${optionsAttribute} ${otherAttributes}></dda-select>
-    <script>
-      document.querySelector('dda-select').addEventListener('selectChanged', e => {
-        console.log('Selected:', e.detail);
-      });
-    </script>
-  `;
+    const optionsAttribute = `options='${JSON.stringify(args.options)}'`;
+    return `<dda-select ${attributes} ${optionsAttribute}></dda-select>`;
 };
-const defaultOptions = [
-    { id: '1', text: 'Option 1' },
-    { id: '2', text: 'Option 2' },
-    { id: '3', text: 'Option 3' },
-    { id: '4', text: 'Option 4' },
-    { id: '5', text: 'Option 5' },
-];
 export const Default = Template.bind({});
 Default.args = {
     label: 'Select an option',
-    placeholder: 'Please select...',
-    main_aria_label: 'Please choose an option',
-    options: defaultOptions,
-    selected: '0',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    selected: 'Option 1',
     disabled: false,
     helper_text: 'Helper or footer text',
-    error_message: 'This is a error message',
-    validation_type: 'normal',
-    validation_id: 'validationId',
+    error_message: '',
     size: 'default',
     custom_class: '',
     component_mode: '',
     button_id: 'button',
-    toggle_button_name: 'toggle_button',
-    option_select_button_name: 'option_button',
-    selectChanged: "",
+    aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
 };
 export const Small = Template.bind({});
-Small.args = Object.assign(Object.assign({}, Default.args), { size: 'small' });
+Small.args = {
+    label: 'Select an option',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    selected: 'Option 1',
+    disabled: false,
+    helper_text: 'Helper or footer text',
+    error_message: '',
+    size: 'small',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
+};
 export const WithError = Template.bind({});
-WithError.args = Object.assign(Object.assign({}, Default.args), {
-    // error: 'error',
-    validation_type: 'error', error_message: 'This is an error message'
-});
+WithError.args = {
+    label: 'Select an option',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    selected: 'Option 1',
+    disabled: false,
+    error: 'error',
+    error_message: 'This is an error message',
+    size: 'default',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
+};
 export const Disabled = Template.bind({});
-Disabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true });
-//# sourceMappingURL=dda-select.stories.js.map
+Disabled.args = {
+    label: 'Select an option',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    selected: 'Option 1',
+    disabled: true,
+    error_message: 'Helper or footer text',
+    size: 'default',
+    custom_class: '',
+    component_mode: '',
+    button_id: 'button',
+    aria_label: 'select',
+    toggle_button_name: "toggle_button_name",
+    option_select_button_name: "option_select_button_name",
+};

package/dist/collection/components/dda-sticky-footer/dda-sticky-footer.css

@@ -1,225 +0,0 @@
-.dda-footer {
-    box-shadow: 0 -2px 13px 0 rgba(0, 0, 0, 0.12);
-    background-color: var(--dda-surface-100);
-    color: var(--dda-surface-0);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    z-index: 5;
-    padding: 0 20px;
-    transform: translateY(0);
-    /* transition: transform 0.3s ease-in-out; */
-}
-.dda-footer.hidden {
-  transform: translateY(100%);
-}
-.footer-content {
-    height: 64px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.dda-footer-item {
-    display: flex;
-    align-items: center;
-    position: relative;
-}
-.dda-footer-item ul {
-    display: inline-flex;
-    align-items: center;
-}
-
-.dda-footer-item ul li {
-    padding: 0 10px;
-    border-inline-start: solid 1px #E0E3E2;
-}
-
-.dda-footer-item ul li:first-child {
-    border: 0px;
-}
-
-.foot-icon-btn a{
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    font-size: var(--font-caption);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-surface-0);
-}
-.foot-icon-btn a:visited{
-    color: var(--dda-on-primary-variant-40);
-}
-.foot-icon-btn a i,
-.dda-footer-right button i{
-    color: var(--dda-on-surface-variant-30);
-}
-
-.foot-icon-btn a img {
-    height: 32px;
-}
-.dda-footer-item ul li.foot-menu{
-    padding: 0 5px;
-}
-.foot-menu a {
-    color: var(--dda-on-surface-0);
-}
-
-.foot-menu a i,
-.foot-menu a svg {
-    font-size: 20px;
-    color: var(--dda-on-surface-variant-30);
-    fill: var(--dda-on-surface-variant-30);
-}
-
-.foot-menu a img {
-    height: 40px;
-}
-
-.foot-logo a {
-    background-color: var(--dda-neutral-100);
-    height: 40px;
-    display: flex;
-    align-items: center;
-}
-
-.foot-logo a img {
-    height: 35px;
-}
-.dda-footer-right button.show-right-icon{
-    display: none;
-}
-/* @media only screen and (orientation: landscape) and (max-width: 768px) {
-    .footer-content{
-        height: 44px;
-    }
-    .dda-footer-item .foot-icon-btn a{
-        width: 35px;
-        height: 35px;
-    }
-} */
-.dda-footer .dubaiae-text-icon{
-    height: 18px;
-}
-.dda-footer .dubaiae-small-icon{
-    height: 18px;
-    display: none;
-}
-
-@media (max-width: 1024px) {
-    .dda-footer {
-        background: transparent;
-        box-shadow: none;
-        padding-left: 32px;
-        padding-right: 32px;
-        padding-bottom: 32px;
-    }
-    .footer-content{
-        height: auto;
-    }
-    .foot-menu,
-    .foot-icon-btn a span {
-        display: none;
-    }
-    .dda-footer-item ul{
-        gap: 16px
-    }
-    .dda-footer-item ul li {
-        padding: 0px;
-        border: 0px !important;
-    }
-
-    .foot-icon-btn a,
-    .dda-footer-right button {
-        width: 48px;
-        height: 48px;
-        background: #ffffff;
-        border-radius: 50px;
-        border: 0px;
-        box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
-    }
-    
-    .dda-footer-right button.show-right-icon{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .foot-icon-btn a img {
-        height: 24px;
-    }
-
-    .foot-icon-btn a i{
-        font-size: 23px;
-    }
-    .dda-footer-right button i{
-        font-size: 34px;
-    }
-    .dda-footer-right .foot-right_links {
-        position: absolute;
-        bottom: 59px;
-        inset-inline-end: 0px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-        height: 0;
-        overflow: hidden;
-    }
-    .dda-footer-right .foot-right_links.show-dda-icon{
-        height: auto;
-        overflow: visible;
-    }
-    .foot-right_links li.foot-icon-btn {
-        list-style: none;
-        opacity: 0;
-        transform: translateY(20px);
-        /* transition: opacity 0.4s ease, transform 0.4s ease; */
-    }
-    @media (prefers-reduced-motion: no-preference) {
-        .foot-right_links li.foot-icon-btn,
-        .dda-footer-right .foot-right_links {
-            transition: opacity 0.4s ease, transform 0.4s ease;
-        }
-    }
-    .foot-right_links.show-dda-icon li.foot-icon-btn {
-        opacity: 1;
-        transform: translateY(0);
-    }
-    .dda-footer .dubaiae-text-icon{
-        display: none;
-    }
-    .dda-footer .dubaiae-small-icon{
-        height: 24px;
-        display: block;
-    }
-
-    
-}
-
-@media (max-width: 640px) {
-    .dda-footer {
-        padding-left: 16px;
-        padding-right: 16px;
-        padding-bottom: 16px;
-    }
-}
-
-@media (max-width: 1200px) {
-    
-}
-
-@media (max-width: 1400px) {
-    .dda-footer-middle {
-        display: none;
-    }
-    
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    .dda-footer {
-        transition: transform 0.3s ease-in-out;
-    }
-}