From c510004d5ac7147fee637a273292ae43eb71922d Mon Sep 17 00:00:00 2001 From: agata-kim Date: Thu, 14 Nov 2024 16:25:28 +0100 Subject: [PATCH 001/112] Enhanced UI in Notification, Pagination, Switch and Spinner components. Fixed bug with inverted spinner in Spinner component. --- .../notification/notification.stories.ts | 45 +++++++++++++- .../pagination/pagination.stories.ts | 29 +++++++++ .../src/components/spinner/spinner.scss | 8 +-- .../src/components/spinner/spinner.stories.ts | 37 ++++++++++- .../src/components/switch/switch.stories.ts | 61 +++++++++++++++++-- 5 files changed, 167 insertions(+), 13 deletions(-) diff --git a/packages/components/src/components/notification/notification.stories.ts b/packages/components/src/components/notification/notification.stories.ts index 1ed7e7ced6..7bfcf97efc 100644 --- a/packages/components/src/components/notification/notification.stories.ts +++ b/packages/components/src/components/notification/notification.stories.ts @@ -15,26 +15,69 @@ export default { argTypes: { content: { description: 'Text inside the notification is passed as slot.', + table: { + category: 'story controls', + type: { + summary: null + } + } }, variant: { description: 'Variant of the notification.', options: ['success', 'warning', 'error'], control: { type: 'radio' }, + table: { + category: 'ifx-notification props', + defaultValue: { + summary: 'success' + }, + type: { + summary: 'success | warning | error' + } + } }, icon: { description: 'The icon to be displayed in the notification.', options: Object.values(icons).map(i => i['name']), control: { type: 'select' }, + table: { + category: 'ifx-notification props', + type: { + summary: 'string' + } + } }, linkText: { description: 'Text for the link.', + table: { + category: 'ifx-notification props', + type: { + summary: 'string' + } + } }, linkHref: { description: 'URL for the link.', + table: { + category: 'ifx-notification props', + type: { + summary: 'string' + } + } }, - linkTarget:{ + linkTarget: { options: ['_blank', '_self', '_parent'], control: { type: 'radio' }, + description: 'Specifies where to open the linked document.', + table: { + category: 'ifx-notification props', + defaultValue: { + summary: '_blank' + }, + type: { + summary: '_blank | _self | _parent' + } + } }, }, }; diff --git a/packages/components/src/components/pagination/pagination.stories.ts b/packages/components/src/components/pagination/pagination.stories.ts index 4b1b90489b..ddf105a10e 100644 --- a/packages/components/src/components/pagination/pagination.stories.ts +++ b/packages/components/src/components/pagination/pagination.stories.ts @@ -9,10 +9,37 @@ export default { currentPage: 1, }, argTypes: { + currentPage: { + description: 'Current page number', + table: { + category: 'Ifx-pagination props', + defaultValue: { + 'summary': '0' + }, + type: { + summary: 'number', + }, + }, + }, + + total: { + description: 'Total number of items', + table: { + category: 'Ifx-pagination props', + defaultValue: { + 'summary': '1' + }, + type: { + summary: 'number', + }, + }, + }, + ifxPageChange: { action: 'ifxPageChange', description: 'Custom event emitted page is changed', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -24,6 +51,7 @@ export default { action: 'ifxNextPage', description: 'Custom event emitted when next page button clicked', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -35,6 +63,7 @@ export default { action: 'ifxPrevPage', description: 'Custom event emitted when previous page button clicked', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: diff --git a/packages/components/src/components/spinner/spinner.scss b/packages/components/src/components/spinner/spinner.scss index ab8fc0a242..09ad0c7c71 100644 --- a/packages/components/src/components/spinner/spinner.scss +++ b/packages/components/src/components/spinner/spinner.scss @@ -32,9 +32,7 @@ animation: spin 2s linear infinite; &.inverted { - border-top-color: tokens.$ifxColorBaseWhite; - border-left-color: tokens.$ifxColorBaseWhite; - border-right-color: tokens.$ifxColorBaseWhite; + animation-direction: reverse; } } @@ -48,9 +46,7 @@ } &.inverted { - & svg { - fill: tokens.$ifxColorBaseWhite; - } + animation-direction: reverse; } &.s { diff --git a/packages/components/src/components/spinner/spinner.stories.ts b/packages/components/src/components/spinner/spinner.stories.ts index c4b8737692..eb3e09cc03 100644 --- a/packages/components/src/components/spinner/spinner.stories.ts +++ b/packages/components/src/components/spinner/spinner.stories.ts @@ -1,3 +1,4 @@ + export default { title: 'Components/Spinner', tags: ['autodocs'], @@ -5,21 +6,53 @@ export default { args: { size: 'm', variant: 'default', + inverted: false, }, argTypes: { size: { - description: 'Size options: s (24px) and m (40px) - default: m', + description: 'Size options: s (24px) and m (40px)', options: ['s', 'm'], control: { type: 'radio' }, + table: { + category: 'ifx-spinner props', + defaultValue: { + summary: 'm' + }, + type: { + summary: 's | m' + } + } }, variant: { + description: 'Variant of the spinner', options: ['default', 'brand'], control: { type: 'radio' }, + table: { + category: 'ifx-spinner props', + defaultValue: { + summary: 'default' + }, + type: { + summary: 'string' + } + }, }, + inverted: { + description: 'Inverts the spinner', + table: { + category: 'ifx-spinner props', + defaultValue: { + summary: 'false' + }, + type: { + summary: 'boolean' + } + } + } }, }; -const DefaultTemplate = args => ``; +const DefaultTemplate = args => ``; export const Default = DefaultTemplate.bind({}); Default.argsTypes = {}; diff --git a/packages/components/src/components/switch/switch.stories.ts b/packages/components/src/components/switch/switch.stories.ts index bef4ce3fd1..6e9302e456 100644 --- a/packages/components/src/components/switch/switch.stories.ts +++ b/packages/components/src/components/switch/switch.stories.ts @@ -5,21 +5,70 @@ export default { tags: ['autodocs'], args: { - checked: false, label: 'Switch', + checked: false, name: 'switch', value: 'switch', + disabled: false, }, argTypes: { + label: { + name: 'Label', + description: 'Set the label of .', + table: { + category: 'story controls', + type: { + summary: ' `label` ' + } + } + }, name: { - description: 'Name of the element, that is used as reference when a form is submitted.' + description: 'Name of the element, that is used as reference when a form is submitted.', + table: { + category: 'ifx-switch props', + type: { + summary: 'string' + } + } + }, + checked: { + name: 'checked', + description: 'Set the checked state of the switch.', + table: { + category: 'ifx-switch props', + defaultValue: { + summary: 'false' + }, + type: { + summary: 'boolean' + } + } }, value: { - description: 'The value that gets submitted, when the radio button is checked' + description: 'The value that gets submitted, when the radio button is checked', + table: { + category: 'ifx-switch props', + type: { + summary: 'string' + } + } + }, + disabled: { + description: 'The value that gets submitted, when the radio button is checked', + table: { + category: 'ifx-switch props', + defaultValue: { + summary: 'false' + }, + type: { + summary: 'boolean' + } + } }, ifxChange: { description: 'Custom event emitted on change', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -29,7 +78,10 @@ export default { action: 'ifxChange', }, }, -}; + + + +} const DefaultTemplate = args => { const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement; @@ -38,6 +90,7 @@ const DefaultTemplate = args => { element.setAttribute('checked', args.checked); element.setAttribute('name', args.name); element.setAttribute('value', args.value); + element.setAttribute('disabled', args.disabled); // Add the event listener // element.addEventListener('ifxChange', action('ifxChange')); From 57f7e2dbf7cfde8606645a22e10d55941eafc055 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Thu, 14 Nov 2024 21:51:24 +0100 Subject: [PATCH 002/112] Enhance UI controls and descriptions in Checkbox stories --- .../components/checkbox/checkbox.stories.ts | 91 ++++++++++++++++--- 1 file changed, 76 insertions(+), 15 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts index 37f264dbe8..adb1314ba9 100644 --- a/packages/components/src/components/checkbox/checkbox.stories.ts +++ b/packages/components/src/components/checkbox/checkbox.stories.ts @@ -4,25 +4,91 @@ export default { title: 'Components/Checkbox', tags: ['autodocs'], args: { - error: false, - checked: false, label: 'Text', + error: false, + disabled: false, + value: false, size: 's', indeterminate: false, - name: 'checkbox', - value: 'checkbox', + name: 'checkbox' }, argTypes: { + label: { + name: 'Label of Checkbox', + description: 'Sets the label of **.', + table: { + category: 'story controls', + type: { + summary: ' `label` ' + } + } + }, + error: { + description: 'Toggles the error state for the checkbox.', + control: 'boolean', + table: { + category: 'ifx-checkbox props', + defaultValue: { + summary: false, + } + } + }, + disabled: { + description: 'Disables the checkbox when set to true.', + control: 'boolean', + table: { + category: 'ifx-checkbox props', + defaultValue: { + summary: false, + } + } + }, + value: { + description: 'Controls whether the checkbox is checked.', + control: 'boolean', + table: { + category: 'ifx-checkbox props', + defaultValue: { + summary: false, + } + } + }, + indeterminate: { + description: 'Activates the indeterminate state for the checkbox when set to true.', + control: 'boolean', + table: { + category: 'ifx-checkbox props', + defaultValue: { + summary: false, + } + } + }, size: { - description: 'Size options: s (21px) and m (25px) - default: m', + description: 'Sets the size of the checkbox. Options: s (21px) and m (25px).', + control: 'radio', options: ['s', 'm'], - control: { type: 'radio' }, + table: { + category: 'ifx-checkbox props', + defaultValue: { + summary: 's' + }, + type: { + summary: 's | m' + } + } + }, + name: { + description: 'Name of the element, that is used as reference when a form is submitted.', + table: { + category: 'ifx-checkbox props' + } }, ifxChange: { action: 'ifxChange', description: 'Custom event emitted when accordion-item is closed', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -30,19 +96,14 @@ export default { }, }, }, - name: { - description: 'Name of the element, that is used as reference when a form is submitted.' - }, - value: { - description: 'The value that gets submitted, when the checkbox is seleted' - } }, }; -const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) => { +const Template = ({ error, disabled, value, indeterminate, size, label, name }) => { const checkbox = document.createElement('ifx-checkbox'); checkbox.setAttribute('error', error); - checkbox.setAttribute('checked', checked); + checkbox.setAttribute('disabled', disabled); + checkbox.setAttribute('value', value); checkbox.setAttribute('size', size); checkbox.setAttribute('indeterminate', indeterminate); checkbox.setAttribute('name', name); @@ -56,4 +117,4 @@ const DefaultTemplate = ({ error, checked, indeterminate, size, label, name }) = return checkbox; }; -export const Default = DefaultTemplate.bind({}); +export const Default = Template.bind({}); \ No newline at end of file From eb638fca13794b74248b2d6c6478c58ad3a6ce53 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Thu, 14 Nov 2024 23:10:09 +0100 Subject: [PATCH 003/112] Enhance UI controls and descriptions in Icon Button stories, and fix previous commit about Checkbox stories --- .../components/checkbox/checkbox.stories.ts | 8 +-- .../icon-button/icon-button.stories.ts | 67 +++++++++++++++++-- 2 files changed, 65 insertions(+), 10 deletions(-) diff --git a/packages/components/src/components/checkbox/checkbox.stories.ts b/packages/components/src/components/checkbox/checkbox.stories.ts index adb1314ba9..83e97baae1 100644 --- a/packages/components/src/components/checkbox/checkbox.stories.ts +++ b/packages/components/src/components/checkbox/checkbox.stories.ts @@ -7,7 +7,7 @@ export default { label: 'Text', error: false, disabled: false, - value: false, + checked: false, size: 's', indeterminate: false, name: 'checkbox' @@ -44,7 +44,7 @@ export default { } } }, - value: { + checked: { description: 'Controls whether the checkbox is checked.', control: 'boolean', table: { @@ -99,11 +99,11 @@ export default { }, }; -const Template = ({ error, disabled, value, indeterminate, size, label, name }) => { +const Template = ({ error, disabled, checked, indeterminate, size, label, name }) => { const checkbox = document.createElement('ifx-checkbox'); checkbox.setAttribute('error', error); checkbox.setAttribute('disabled', disabled); - checkbox.setAttribute('value', value); + checkbox.setAttribute('checked', checked); checkbox.setAttribute('size', size); checkbox.setAttribute('indeterminate', indeterminate); checkbox.setAttribute('name', name); diff --git a/packages/components/src/components/icon-button/icon-button.stories.ts b/packages/components/src/components/icon-button/icon-button.stories.ts index 56cd4b18bb..d35ea4fde8 100644 --- a/packages/components/src/components/icon-button/icon-button.stories.ts +++ b/packages/components/src/components/icon-button/icon-button.stories.ts @@ -16,26 +16,81 @@ export default { argTypes: { icon: { + description: 'The icon to be displayed.', options: Object.values(icons).map(i => i['name']), control: { type: 'select' }, + table: { + category: 'ifx-icon-button props', + type: { + summary: 'string' + } + } }, variant: { + description: 'Sets the style variant of the icon button.', + control: 'radio', options: ['primary', 'secondary', 'tertiary'], - control: { type: 'radio' }, + table: { + category: 'ifx-icon-button props', + defaultValue: { + summary: 'primary' + } + } + }, + disabled: { + description: 'Disables the icon button when set to true.', + control: 'boolean', + table: { + category: 'ifx-icon-button props', + defaultValue: { + summary: 'false' + } + } + }, + href: { + description: 'Specifies the URL to which the icon button will link.', + table: { + category: 'ifx-icon-button props', + type: { + summary: 'string' + } + } }, - size: { - description: 'Size options: s (24px), m (40px) and l (48px) - default: m', + description: 'Sets the size of the icon button. Options: s (24px), m (40px) and l (48px).', + control: 'radio', options: ['s', 'm', 'l'], - control: { type: 'radio' }, + table: { + category: 'ifx-icon-button props', + defaultValue: { + summary: 'm' + }, + type: { + summary: 's | m | l' + } + } }, target: { + description: 'Determines where to open the linked URL when the button is clicked.', + control: 'radio', options: ['_blank', '_self', '_parent'], - control: { type: 'radio' }, + table: { + category: 'ifx-icon-button props', + defaultValue: { + summary: '_blank' + } + } }, shape: { + description: 'Defines the shape of the icon button.', + control: 'radio', options: ['round', 'square'], - control: { type: 'radio' }, + table: { + category: 'ifx-icon-button props', + defaultValue: { + summary: 'round' + } + } }, }, }; From 757078d91ae1a28374aeb638164693804bdfdbae Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Thu, 14 Nov 2024 23:35:45 +0100 Subject: [PATCH 004/112] Enhance UI controls and descriptions in Link stories --- .../src/components/link/link.stories.ts | 60 +++++++++++++++++-- 1 file changed, 56 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/link/link.stories.ts b/packages/components/src/components/link/link.stories.ts index d4a3a51647..b5c86724ee 100644 --- a/packages/components/src/components/link/link.stories.ts +++ b/packages/components/src/components/link/link.stories.ts @@ -12,18 +12,70 @@ export default { }, argTypes: { + label: { + name: 'Label of Link', + description: 'Sets the label of **.', + table: { + category: 'story controls', + type: { + summary: ' `label` ' + } + } + }, + href: { + description: 'Specifies the URL of the link.', + table: { + category: 'ifx-link props', + type: { + summary: 'string' + } + } + }, target: { + description: 'Determines where to open the linked URL when the link is clicked.', + control: 'radio', options: ['_blank', '_self', '_parent'], - control: { type: 'radio' }, + table: { + category: 'ifx-link props', + defaultValue: { + summary: '_blank' + } + } + }, + disabled: { + description: 'Disables the link.', + control: 'boolean', + table: { + category: 'ifx-link props', + defaultValue: { + summary: 'false' + } + } }, size: { - description: 'Font Size options: s (14px), m (16px), l (18px), xl (20px) - default: m', + description: 'Sets the Font Size of the link. Options: s (14px), m (16px), l (18px), xl (20px)', + control: 'radio', options: ['s', 'm', 'l', 'xl'], - control: { type: 'radio' }, + table: { + category: 'ifx-link props', + defaultValue: { + summary: 'm' + }, + type: { + summary: 's | m | l | xl' + } + } }, variant: { + description: 'Sets the style variant of the link.', + control: 'radio', options: ['bold', 'underlined', 'title', 'menu'], - control: { type: 'radio' }, + table: { + category: 'ifx-link props', + defaultValue: { + summary: 'bold' + } + } }, }, }; From f0e91294088e2b4bdc8a4a3aa7355d7f0f0f660f Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Fri, 15 Nov 2024 11:35:00 +0100 Subject: [PATCH 005/112] Enhance UI controls and descriptions in Progress Bar stories --- .../progress-bar/progress-bar.stories.ts | 39 +++++++++++++++---- 1 file changed, 31 insertions(+), 8 deletions(-) diff --git a/packages/components/src/components/progress-bar/progress-bar.stories.ts b/packages/components/src/components/progress-bar/progress-bar.stories.ts index 4a2f0f6cb8..1fe06b846e 100644 --- a/packages/components/src/components/progress-bar/progress-bar.stories.ts +++ b/packages/components/src/components/progress-bar/progress-bar.stories.ts @@ -4,17 +4,40 @@ export default { args: { size: 'm', - percentage: 50, + value: 50, showLabel: false, }, argTypes: { - percentage: { + value: { + description: 'The percentage of the progress bar.', control: { type: 'range', min: 0, max: 100 }, + table: { + category: 'ifx-progress-bar props', + defaultValue: { + summary: 50 + } + } + }, + showLabel: { + description: 'Shows the percentage of the progress bar. Does not fit in size ***s***', + control: 'boolean', + table: { + category: 'ifx-progress-bar props', + defaultValue: { + summary: false + } + } }, size: { - description: 'Size options: s (36px) and m (40px) - default: m', + description: 'Sets the size of the progress bar. Options: s (36px) and m (40px)', + control: 'radio', options: ['s', 'm'], - control: { type: 'radio' }, + table: { + category: 'ifx-progress-bar props', + defaultValue: { + summary: 'm' + } + } }, }, }; @@ -23,7 +46,7 @@ const Template = args => { const wrapper = document.createElement('div'); wrapper.innerHTML = ` @@ -35,18 +58,18 @@ const Template = args => { export const Default = Template.bind({}); Default.args = { size: 'm', - percentage: 50, + value: 50, showLabel: false, }; export const Small = Template.bind({}); Small.args = { - percentage: 75, + value: 75, size: 's', }; export const WithLabel = Template.bind({}); WithLabel.args = { - percentage: 25, + value: 25, showLabel: true, }; From 035d95577488ed70d28a758fad313e82a34d7ee3 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Fri, 15 Nov 2024 11:47:43 +0100 Subject: [PATCH 006/112] Enhance UI controls and descriptions in Status stories --- .../src/components/status/status.stories.ts | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/status/status.stories.ts b/packages/components/src/components/status/status.stories.ts index d797930a4e..de65db651b 100644 --- a/packages/components/src/components/status/status.stories.ts +++ b/packages/components/src/components/status/status.stories.ts @@ -8,13 +8,36 @@ export default { border: true, }, argTypes: { + label: { + description: 'Sets the label of **.', + table: { + category: 'ifx-status props', + type: { + summary: ' `label` ' + } + } + }, border: { + description: 'When set to **true** the status has a border.', control: 'boolean', attr: 'border', + table: { + category: 'ifx-status props', + defaultValue: { + summary: true + } + } }, color: { + description: 'Sets the color of the status.', + control: 'radio', options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'], - control: { type: 'radio' }, + table: { + category: 'ifx-status props', + defaultValue: { + summary: 'orange' + } + } }, }, }; From af9da87e8f6d9f876d251d8a9163572b019b2246 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Fri, 15 Nov 2024 12:08:12 +0100 Subject: [PATCH 007/112] Enhance UI controls and descriptions in Date Picker stories --- .../date-picker/date-picker.stories.ts | 52 ++++++++++++++++--- 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/packages/components/src/components/date-picker/date-picker.stories.ts b/packages/components/src/components/date-picker/date-picker.stories.ts index 5974cb664c..fe1d060e34 100644 --- a/packages/components/src/components/date-picker/date-picker.stories.ts +++ b/packages/components/src/components/date-picker/date-picker.stories.ts @@ -12,18 +12,58 @@ export default { name: 'date-picker' }, argTypes: { + disabled: { + description: 'Disables the date picker', + control: 'boolean', + table: { + category: 'ifx-date-picker props', + defaultValue: { + summary: false + } + } + }, + success: { + description: 'Indicates success in the date picker.', + control: 'boolean', + table: { + category: 'ifx-date-picker props', + defaultValue: { + summary: false + } + } + }, + error: { + description: 'Indicates error in the date picker.', + control: 'boolean', + table: { + category: 'ifx-date-picker props', + defaultValue: { + summary: false + } + } + }, size: { - description: 'Size options: Height small (36px) and Height large (40px) - default: small', + description: 'Sets the size of the date picker. Options: Height small (36px) and Height large (40px)', + control: 'radio', options: ['s', 'l'], - control: { type: 'radio' }, + table: { + category: 'ifx-date-picker props', + defaultValue: { + summary: 's' + } + } }, name: { - description: 'Name of the element, that is used as reference when a form is submitted.' + description: 'Name of the element, that is used as reference when a form is submitted.', + table: { + category: 'ifx-date-picker props' + } }, ifxDate: { action: 'ifxDate', - description: 'Custom event', + description: 'A custom event emitted when a date in the calendar is being selected.', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -34,7 +74,7 @@ export default { }, }; -const DefaultTemplate = ({ error, disabled, success, size }) => { +const Template = ({ error, disabled, success, size }) => { const element = document.createElement('ifx-date-picker'); element.setAttribute('error', error); element.setAttribute('disabled', disabled); @@ -44,4 +84,4 @@ const DefaultTemplate = ({ error, disabled, success, size }) => { return element; }; -export const Default = DefaultTemplate.bind({}); \ No newline at end of file +export const Default = Template.bind({}); \ No newline at end of file From 158345d84256b4775c1f1fa9af448d18fb5fd9ea Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Fri, 15 Nov 2024 12:43:15 +0100 Subject: [PATCH 008/112] Enhance UI controls and descriptions in Button stories --- .../src/components/button/button.stories.ts | 106 ++++++++++++++++-- 1 file changed, 97 insertions(+), 9 deletions(-) diff --git a/packages/components/src/components/button/button.stories.ts b/packages/components/src/components/button/button.stories.ts index 3642031704..2d762c4154 100644 --- a/packages/components/src/components/button/button.stories.ts +++ b/packages/components/src/components/button/button.stories.ts @@ -12,6 +12,7 @@ export default { size: 'm', fullWidth: false, disabled: false, + icon: '', iconPosition: 'left', href: false, url: '', @@ -19,37 +20,124 @@ export default { }, argTypes: { + label: { + description: 'Sets the text displayed on the button.', + table: { + category: 'story controls', + type: { + summary: ' `label` ' + } + } + }, icon: { + description: 'The icon to be displayed.', + control: 'select', options: Object.values(icons).map(i => i['name']), - control: { type: 'select' }, + table: { + category: 'ifx-button props', + type: { + summary: 'string' + } + } }, variant: { + description: 'Sets the style variant of the button.', + control: 'radio', options: ['primary', 'secondary', 'tertiary'], - control: { type: 'radio' }, + table: { + category: 'ifx-button props', + defaultValue: { + summary: 'primary' + } + } }, theme: { + description: 'Specifies the theme style of the button.', + control: 'radio', options: ['default', 'danger', 'inverse'], - control: { type: 'radio' }, + table: { + category: 'ifx-button props', + defaultValue: { + summary: 'default' + } + } }, type: { + description: 'Sets the type attribute of the button.', + control: 'radio', options: ['button', 'submit', 'reset'], - control: { type: 'radio' }, + table: { + category: 'ifx-button props', + defaultValue: { + summary: 'button' + } + } }, size: { - description: 'Size options: xs (32px) s (36px), m (40px), l (48px) - default: m', + description: 'Sets the size of the button. Options: xs (32px) s (36px), m (40px), l (48px)', + control: 'radio', options: ['xs', 's', 'm', 'l'], - control: { type: 'radio' }, + table: { + category: 'ifx-button props', + defaultValue: { + summary: 'm' + } + } }, fullWidth: { - control: { type: 'boolean' }, + description: 'When set to **true**, expands the button to take the full width of its container.', + control: 'boolean', + table: { + category: 'ifx-button props' + } + }, + disabled: { + description: 'Disables the button when set to true.', + control: 'boolean', + table: { + category: 'ifx-button props', + defaultValue: { + summary: 'false' + } + } }, iconPosition: { + description: 'Determines the position of an icon within the button if an icon is used.', + control: 'radio', options: ['left', 'right'], - control: { type: 'radio' }, + table: { + category: 'ifx-button props' + } + }, + href: { + description: 'When set to **true**, treats the button as a link by setting a URL.', + control: 'boolean', + table: { + category: 'ifx-button props', + defaultValue: { + summary: 'false' + } + } + }, + url: { + description: 'Specifies the destination URL for the button when it acts as a link.', + table: { + category: 'ifx-button props', + type: { + summary: 'string' + } + } }, target: { + description: 'Determines where to open the linked document when the button is clicked.', + control: 'radio', options: ['_blank', '_self', '_parent'], - control: { type: 'radio' }, + table: { + category: 'ifx-button props', + defaultValue: { + summary: '_blank' + } + } }, }, }; From 9ee45f1584031adaa0b9336e505570ade4f4eb21 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Mon, 18 Nov 2024 09:14:17 +0100 Subject: [PATCH 009/112] Enhance UI controls and descriptions in Number Indicator stories --- .../number-indicator.stories.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/components/src/components/number-indicator/number-indicator.stories.ts b/packages/components/src/components/number-indicator/number-indicator.stories.ts index dac935beff..48281c4426 100644 --- a/packages/components/src/components/number-indicator/number-indicator.stories.ts +++ b/packages/components/src/components/number-indicator/number-indicator.stories.ts @@ -6,6 +6,24 @@ export default { label: 1, inverted: false, }, + argTypes: { + label: { + description: 'Specifies the number to be displayed within the indicator.', + table: { + category: 'ifx-number-indicator props' + } + }, + inverted: { + description: 'Toggles the color scheme of the number indicator.', + control: 'boolean', + table: { + category: 'ifx-number-indicator props', + defautlValue: { + summary: false + } + } + } + } }; const DefaultTemplate = args => `${args.label}`; From 0b5865b7984436323c49c54ac21993e0c6d8bff6 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Mon, 18 Nov 2024 09:52:03 +0100 Subject: [PATCH 010/112] Enhance UI controls and descriptions in Radio Button stories --- .../radio-button/radio-button.stories.ts | 75 ++++++++++++++++--- 1 file changed, 64 insertions(+), 11 deletions(-) diff --git a/packages/components/src/components/radio-button/radio-button.stories.ts b/packages/components/src/components/radio-button/radio-button.stories.ts index e8780fe3d9..f02febe005 100644 --- a/packages/components/src/components/radio-button/radio-button.stories.ts +++ b/packages/components/src/components/radio-button/radio-button.stories.ts @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { table } from 'console'; export default { title: 'Components/Radio Button', @@ -14,9 +15,72 @@ export default { value: 'radio', }, argTypes: { + error: { + description: 'Indicates whether the radio button is in an error state.', + control: 'boolean', + table: { + category: 'ifx-radio-button props', + defaultValue: { + summary: false + } + } + }, + disabled: { + description: 'Disables the radio button.', + control: 'boolean', + table: { + category: 'ifx-radio-button props', + defaultValue: { + summary: false + } + } + }, + checked: { + description: 'Determines whether the radio button is selected by default.', + control: 'boolean', + table: { + category: 'ifx-radio-button props', + defaultValue: { + summary: false + } + } + }, + label: { + description: 'Defines the text displayed alongside the radio button.', + table: { + category: 'ifx-radio-button props', + } + }, + size: { + description: 'Specifies the size of the radio button. Options: s (20px) and m (24px)', + control: 'radio', + options: ['s', 'm'], + table: { + category: 'ifx-radio-button props', + defaultValue: { + summary: 's' + }, + type: { + summary: 's | m' + } + } + }, + name: { + description: 'Name of the element, that is used as reference when a form is submitted.', + table: { + category: 'ifx-radio-button props' + } + }, + value: { + description: 'The value that gets submitted, when the radio button is checked', + table: { + category: 'ifx-radio-button props' + } + }, ifxChange: { description: 'Custom event emitted when radio button checked and unchecked', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -25,17 +89,6 @@ export default { }, action: 'ifxChange', - }, - size: { - description: 'Size options: s (20px) and m (24px) - default: s', - options: ['s', 'm'], - control: { type: 'radio' }, - }, - name: { - description: 'Name of the element, that is used as reference when a form is submitted.' - }, - value: { - description: 'The value that gets submitted, when the radio button is checked' } }, }; From a559efa8e36b840ebb1be7cdca1b55a21fc9f61e Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Mon, 18 Nov 2024 10:51:45 +0100 Subject: [PATCH 011/112] Enhance UI controls and descriptions in Stepper stories --- .../src/components/stepper/stepper.stories.ts | 39 +++++++++++++------ 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/components/src/components/stepper/stepper.stories.ts b/packages/components/src/components/stepper/stepper.stories.ts index 5ea765e129..ed62b03afa 100644 --- a/packages/components/src/components/stepper/stepper.stories.ts +++ b/packages/components/src/components/stepper/stepper.stories.ts @@ -3,8 +3,8 @@ import { action } from '@storybook/addon-actions'; export default{ title: 'Components/Stepper', args: { - activeStep: 2, amountOfSteps: 5, + activeStep: 2, errorStep: 0, disabled: false, indicatorPosition: 'left', @@ -12,25 +12,31 @@ export default{ variant: 'default' }, argTypes: { - activeStep: { + activeStep: { control: { type: 'number', min: 1 }, description: 'Indicates the current active step', table: { - defaultValue: { summary: 1 } + category: 'ifx-stepper props', + defaultValue: { summary: 2 } } }, amountOfSteps: { name: 'Amount of steps', control: 'number', - description: 'Indicates the number of steps in stepper in a story' + description: 'Indicates the number of steps in stepper in a story', + table: { + category: 'story controls', + defaultValue: { summary: 5 } + } }, completeStep: { name: 'complete', - description: 'A boolean prop to mark a step complete.
Usage:', + description: 'A boolean prop to mark a step as complete.
Usage:', table: { + category: 'ifx-step props', defaultValue: { summary: false }, type: { summary: ` ` @@ -40,8 +46,9 @@ export default{ disabled: { name: 'disabled', control: 'boolean', - description: 'A boolean prop to make the step unclickable:', + description: 'A boolean prop to make all the steps unclickable.', table: { + category: 'ifx-step props', defaultValue: { summary: false }, type: { summary: ` ` @@ -54,32 +61,42 @@ export default{ control: 'number', description: 'Specified step number indicates to have an error', table: { - defaultValue: { summary: false } + category: 'ifx-step props' }, }, indicatorPosition: { control: 'radio', defaultValue: { summary: 'left' }, - description: 'Allows to swap the progross bar and steps\' label', + description: 'Allows to swap the progress bar and steps\' label', options: ['left', 'right'], - if: { arg:'variant', eq: 'compact' } + if: { arg:'variant', eq: 'compact' }, + table: { + category: 'ifx-stepper props' + } }, showStepNumber: { control: 'boolean', defaultValue: { summary: 'false' }, description: 'Shows the step number when set true', - if: { arg: 'variant', eq: 'default' } + if: { arg: 'variant', eq: 'default' }, + table: { + category: 'ifx-stepper props' + } }, variant: { options: ['default', 'compact'], defaultValue: { summary: 'default' }, description: 'Allows to switch between default and compact variant', - control: 'radio' + control: 'radio', + table: { + category: 'ifx-stepper props' + } }, ifxChange: { action: 'ifxChange', description: 'A custom event emitted when active step changes', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: ` From 594ed30a7d27fa6c79ad89a89121ea4044936255 Mon Sep 17 00:00:00 2001 From: evangeliaPanteliadou Date: Mon, 18 Nov 2024 13:11:54 +0100 Subject: [PATCH 012/112] Enhance UI controls and descriptions in Single Select stories --- .../select/single-select/select.stories.ts | 107 ++++++++++++++---- 1 file changed, 82 insertions(+), 25 deletions(-) diff --git a/packages/components/src/components/select/single-select/select.stories.ts b/packages/components/src/components/select/single-select/select.stories.ts index 09e77a7025..d9416b72c5 100644 --- a/packages/components/src/components/select/single-select/select.stories.ts +++ b/packages/components/src/components/select/single-select/select.stories.ts @@ -24,6 +24,7 @@ export default { title: 'Components/Select/Single Select', // tags: ['autodocs'], args: { + label: '', size: 'm', showSearch: true, searchPlaceholderValue: 'Search...', @@ -31,7 +32,6 @@ export default { placeholderValue: 'Placeholder', error: false, errorMessage: 'Some error', - label: '', disabled: false, // type: 'single', //for later implementation }, @@ -42,46 +42,91 @@ export default { // control: false, // }, size: { - options: { - 'small (36px)': 's', - 'medium (40px)': 'm', - }, - control: { - type: 'radio', - }, + description: 'Specifies the size. Options: small - s (36px) medium - m (40px)', + control: 'radio', + options: ['s', 'm'], + table: { + category: 'ifx-select props', + defaultValue: { + summary: 'm' + } + } }, placeholder: { - options: [true, false], - control: { type: 'radio' }, + description: 'Determines whether a placeholder is displayed or not.', + control: 'boolean', + table: { + category: 'ifx-select props', + defaultValue: { + summary: true + } + } }, - placeholderValue: { control: 'text' }, - // value: { for later implementation - // control: 'text', - // description: 'Programmatically set the selected value', - // }, + placeholderValue: { + description: 'Sets the text displayed as the placeholder when placeholder is set to true.', + table: { + category: 'ifx-select props' + } + }, error: { - options: [true, false], - control: { type: 'radio' }, + description: 'Displays an error state.', + control: 'boolean', + table: { + category: 'ifx-select props', + defaultValue: { + summary: false + } + } + }, + errorMessage: { + description: 'Message displayed when error is set to true.', + table: { + category: 'ifx-select props' + } + }, + label: { + description: 'Sets the label.', + table: { + category: 'ifx-select props' + } }, - errorMessage: { control: 'text' }, - label: { control: 'text' }, disabled: { - options: [true, false], - control: { type: 'radio' }, + description: 'Disables the dropdown.', + control: 'boolean', + table: { + category: 'ifx-select props', + defaultValue: { + summary: false + } + } }, showSearch: { - options: [true, false], - control: { type: 'radio' }, + description: 'Enables a search bar inside the dropdown to filter options.', + control: 'boolean', + table: { + category: 'ifx-select props', + defaultValue: { + summary: true + } + } + }, + searchPlaceholderValue: { + description: 'Placeholder text for the search input field.', + table: { + category: 'ifx-select props' + } }, - searchPlaceholderValue: { control: { type: 'text' } }, - options: { description: 'Takes an array of objects in the following format', + table: { + category: 'ifx-select props' + } }, ifxSelect: { action: 'ifxSelect', description: 'Custom event emitted when item is selected', table: { + category: 'custom events', type: { summary: 'Framework integration', detail: @@ -89,6 +134,18 @@ export default { }, }, }, + ifxInput: { + action: 'ifxInput', + description: 'A custom event *ifxInput* is emitted immediately after the value of *Search* changes', + table: { + category: 'custom events', + type: { + summary: 'Framework integration', + detail: + 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});', + }, + }, + }, }, }; From b1a6332169f26c65e77e8305cb1d5917b3ecd12c Mon Sep 17 00:00:00 2001 From: agata-kim Date: Mon, 18 Nov 2024 17:45:13 +0100 Subject: [PATCH 013/112] Updated stories for Accordion, Card, Badge, and Spinner. --- .../accordion/accordion.stories.tsx | 84 ++++++++- .../components/accordion/accordionItem.tsx | 4 +- .../src/components/accordion/readme.md | 10 +- .../src/components/badge/badge.stories.ts | 31 +++- .../src/components/card/card.stories.ts | 172 ++++++++++++------ .../src/components/spinner/spinner.scss | 8 +- .../src/components/spinner/spinner.stories.ts | 2 +- 7 files changed, 243 insertions(+), 68 deletions(-) diff --git a/packages/components/src/components/accordion/accordion.stories.tsx b/packages/components/src/components/accordion/accordion.stories.tsx index 51b952b0b6..0fc15b871b 100644 --- a/packages/components/src/components/accordion/accordion.stories.tsx +++ b/packages/components/src/components/accordion/accordion.stories.tsx @@ -6,18 +6,90 @@ export default { //tags: ['autodocs'], args: { - autoCollapse: false, + amountOfItems: 3, AriaLevel: 3, + autoCollapse: false, }, argTypes: { - amountOfItems: { control: 'number' }, + amountOfItems: { + control: 'number', + name: 'Amount of Items', + description: 'Control the number of ** ', + table: { + category: 'story controls', + type: { + summary: 'number' + } + } + + }, AriaLevel: { control: 'number', min: 1, max: 6, - description: 'The aria-level attribute for the accordion item header.' + description: 'The aria-level attribute for the accordion item header', + table: { + + category: 'ifx-accordion-item props', + type: { + summary: 'number' + } + } }, + mutable: { + control: 'boolean', + description: 'Set the mutable attribute', + table: { + category: 'ifx-accordion-item props', + defaultValue: {summary: 'true'}, + type: { + summary: 'boolean' + } + } + }, + autoCollapse: { + control: 'boolean', + description: 'Collapse the other items when one item is opened', + table: { + category: 'ifx-accordion props', + defaultValue: { + summary: 'false' + }, + type: { + summary: 'boolean' + } + } + }, + ifxItemOpen: { + action: 'ifxItemOpen', + description: 'Event emitted when an accordion item is opened', + table: { + category: 'custom events', + type: { + summary: 'Framework integration', + detail:`React: onIfxItemOpen={handleOpen} + Vue: @ifxItemOpen="handleOpen" + Angular: (ifxItemOpen)="handleOpen()" + VanillaJs: .addEventListener("ifxItemOpen", (event) => {/*handle open*/});` + } + }, + }, + ifxItemClose: { + action: 'ifxItemClose', + description: 'Event emitted when an accordion item is closed', + table: { + category: 'custom events', + type: { + summary: 'Framework integration', + detail: + `React: onIfxItemClose={handleClose} + Vue: @ifxItemClose="handleClose" + Angular: (ifxItemClose)="handleClose()" + VanillaJs: .addEventListener("ifxItemClose", (event) => {/*handle close*/});` + } + }, + } }, }; @@ -27,12 +99,16 @@ const Template = args => { initialItem.setAttribute('caption', `Label`); initialItem.setAttribute('open', `true`); initialItem.setAttribute('aria-level', args.AriaLevel); + initialItem.setAttribute('mutable', args.mutable); + initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen')); + initialItem.addEventListener('ifxItemClose', action('ifxItemClose')); initialItem.innerHTML = ` Content for Initial Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent volutpat, ligula eu aliquam bibendum, orci nisl cursus ipsum, nec egestas odio sapien eget neque. `; +initialItem.setAttribute('caption', `Label`); initialItem.addEventListener('ifxItemOpen', action('ifxItemOpen')); initialItem.addEventListener('ifxItemClose', action('ifxItemClose')); @@ -44,6 +120,7 @@ const Template = args => { item.setAttribute('caption', `Label`); item.setAttribute('open', `false`); item.setAttribute('aria-level', args.AriaLevel); + item.setAttribute('mutable', args.mutable); item.innerHTML = ` Content for Item #${ @@ -64,4 +141,5 @@ const Template = args => { export const Default = Template.bind({}); Default.args = { amountOfItems: 3, + mutable: true, }; diff --git a/packages/components/src/components/accordion/accordionItem.tsx b/packages/components/src/components/accordion/accordionItem.tsx index 95cd77683c..5823973996 100644 --- a/packages/components/src/components/accordion/accordionItem.tsx +++ b/packages/components/src/components/accordion/accordionItem.tsx @@ -11,7 +11,7 @@ export class IfxAccordionItem { @Prop({ mutable: true, }) open: boolean = false; - @Prop() AriaLive = 3; + @Prop() AriaLevel = 3; @State() internalOpen: boolean = false; @Event() ifxItemOpen: EventEmitter; @Event() ifxItemClose: EventEmitter; @@ -98,7 +98,7 @@ export class IfxAccordionItem { return (
this.toggleOpen()} tabindex='0'> -