diff --git a/addon/components/o-s-s/avatar-group.stories.js b/addon/components/o-s-s/avatar-group.stories.js index a43c3137c..d464261ea 100644 --- a/addon/components/o-s-s/avatar-group.stories.js +++ b/addon/components/o-s-s/avatar-group.stories.js @@ -69,6 +69,10 @@ export default { 'UI component that displays a collection of user or entity avatars grouped together in a visually cohesive manner. It typically showcases profile pictures or initials representing multiple individuals or entities, arranged horizontally. They provide a quick and intuitive way for users to identify and associate individuals within a group context, fostering a sense of community and connection.' }, iframeHeight: 100 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6202&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/addon/components/o-s-s/banner.stories.js b/addon/components/o-s-s/banner.stories.js index f88ad64a6..8e5cfbcc8 100644 --- a/addon/components/o-s-s/banner.stories.js +++ b/addon/components/o-s-s/banner.stories.js @@ -107,6 +107,10 @@ export default { component: 'A configurable Banner component. Can display a badge or an image, a title and a subtitle' }, iframeHeight: 120 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6190&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/addon/components/o-s-s/code-block.stories.js b/addon/components/o-s-s/code-block.stories.js index 43a7dd13c..d887ca9c4 100644 --- a/addon/components/o-s-s/code-block.stories.js +++ b/addon/components/o-s-s/code-block.stories.js @@ -64,6 +64,10 @@ export default { description: { component: 'Used to display code blocks in pages.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6203&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/addon/components/o-s-s/context-menu.stories.js b/addon/components/o-s-s/context-menu.stories.js index 811026a5e..1724b1c23 100644 --- a/addon/components/o-s-s/context-menu.stories.js +++ b/addon/components/o-s-s/context-menu.stories.js @@ -184,6 +184,10 @@ export default { component: 'The `OSS::ContextMenu` component provides a button that, when clicked, displays a context menu with various options. It supports nested sub-menus, loading states, and customizable appearance through skins and sizes.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6188&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/context-menu/panel.stories.js b/addon/components/o-s-s/context-menu/panel.stories.js index a6cdf9b25..a3cbcbfba 100644 --- a/addon/components/o-s-s/context-menu/panel.stories.js +++ b/addon/components/o-s-s/context-menu/panel.stories.js @@ -93,6 +93,10 @@ export default { component: 'The `OSS::ContextMenu::Panel` component displays a context menu panel anchored to a specified reference target. It supports nested submenus, customizable placement, and offset options. The panel can trigger actions when menu items are selected and handle mouse leave events.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6188&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/dialog.stories.js b/addon/components/o-s-s/dialog.stories.js index 31e64a4a5..c93dbbf46 100644 --- a/addon/components/o-s-s/dialog.stories.js +++ b/addon/components/o-s-s/dialog.stories.js @@ -82,6 +82,10 @@ export default { description: { component: 'A component that displays a dialog with a title and two buttons.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=4804-790&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/addon/components/o-s-s/infinite-select.stories.js b/addon/components/o-s-s/infinite-select.stories.js index 0f2cfb865..6ad1c747b 100644 --- a/addon/components/o-s-s/infinite-select.stories.js +++ b/addon/components/o-s-s/infinite-select.stories.js @@ -170,6 +170,10 @@ export default { component: 'A configurable select component which features a search function and an infinite loader.' }, iframeHeight: 275 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6188&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/infinite-select/option.stories.js b/addon/components/o-s-s/infinite-select/option.stories.js index 77b5cab0f..914c99881 100644 --- a/addon/components/o-s-s/infinite-select/option.stories.js +++ b/addon/components/o-s-s/infinite-select/option.stories.js @@ -131,6 +131,10 @@ export default { component: 'A highly configurable option component for use within infinite select dropdowns. Supports single and multiple selection modes, various prefix/suffix decorators including avatars, badges, icons, country flags, tags, and hints.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6188&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/layout/navbar/nav-item.stories.js b/addon/components/o-s-s/layout/navbar/nav-item.stories.js index 0423f0b1b..d5d6e98a3 100644 --- a/addon/components/o-s-s/layout/navbar/nav-item.stories.js +++ b/addon/components/o-s-s/layout/navbar/nav-item.stories.js @@ -9,6 +9,10 @@ export default { component: 'Layout component to display an item in a navbar, which may be active.' }, iframeHeight: 120 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6206&p=f&t=AsdGbaychQPIaGnK-0' } }, argTypes: { diff --git a/addon/components/o-s-s/layout/sidebar.stories.js b/addon/components/o-s-s/layout/sidebar.stories.js index 08a8a320b..48ccf7131 100644 --- a/addon/components/o-s-s/layout/sidebar.stories.js +++ b/addon/components/o-s-s/layout/sidebar.stories.js @@ -41,6 +41,10 @@ export default { component: 'Layout component to display sidebar.' }, iframeHeight: 120 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6206&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/layout/sidebar/group.stories.js b/addon/components/o-s-s/layout/sidebar/group.stories.js index 1cd9fb123..69008cd91 100644 --- a/addon/components/o-s-s/layout/sidebar/group.stories.js +++ b/addon/components/o-s-s/layout/sidebar/group.stories.js @@ -62,6 +62,10 @@ export default { component: 'Group component (used in sidebar)' }, iframeHeight: 120 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6206&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/layout/sidebar/item.stories.js b/addon/components/o-s-s/layout/sidebar/item.stories.js index 56fd9adcc..a47c6bae7 100644 --- a/addon/components/o-s-s/layout/sidebar/item.stories.js +++ b/addon/components/o-s-s/layout/sidebar/item.stories.js @@ -100,6 +100,10 @@ export default { component: 'Component Item used in sidebar.' }, iframeHeight: 120 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6206&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/marketing/banner.stories.js b/addon/components/o-s-s/marketing/banner.stories.js index 319a5684b..e4a68165e 100644 --- a/addon/components/o-s-s/marketing/banner.stories.js +++ b/addon/components/o-s-s/marketing/banner.stories.js @@ -90,6 +90,10 @@ export default { 'A marketing banner component with background gradients. Supports custom illustrations and action buttons via named blocks.' }, iframeHeight: 250 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6190&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/addon/components/o-s-s/modal-dialog.stories.js b/addon/components/o-s-s/modal-dialog.stories.js index b68cd565c..d5553d705 100644 --- a/addon/components/o-s-s/modal-dialog.stories.js +++ b/addon/components/o-s-s/modal-dialog.stories.js @@ -86,6 +86,10 @@ export default { - The footer part of the component defaults to fx-row fx-gap-px-12 in desktop mode.
- In mobile mode it defaults to fx-col (with column-reverse to have the cancel buttons at the bottom) and fx-gap-px-9` } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6196&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/nav-tab.stories.js b/addon/components/o-s-s/nav-tab.stories.js index b39039fed..a8257ebfb 100644 --- a/addon/components/o-s-s/nav-tab.stories.js +++ b/addon/components/o-s-s/nav-tab.stories.js @@ -27,6 +27,17 @@ export default { control: { type: 'array' } } } + }, + parameters: { + docs: { + description: { + component: 'Displays a navigation tab.' + } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6195&p=f&t=AsdGbaychQPIaGnK-0' + } } }; diff --git a/addon/components/o-s-s/popover.stories.js b/addon/components/o-s-s/popover.stories.js index 5bab6db8c..1e7c9cc1e 100644 --- a/addon/components/o-s-s/popover.stories.js +++ b/addon/components/o-s-s/popover.stories.js @@ -46,6 +46,17 @@ export default { type: 'text' } } + }, + parameters: { + docs: { + description: { + component: `Popover is a non-modal UI surface that displays contextual content and actions.` + } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=4559-5946&p=f&t=AsdGbaychQPIaGnK-0' + } } }; diff --git a/addon/components/o-s-s/progress-bar.stories.js b/addon/components/o-s-s/progress-bar.stories.js index f15762a00..7020220e9 100644 --- a/addon/components/o-s-s/progress-bar.stories.js +++ b/addon/components/o-s-s/progress-bar.stories.js @@ -97,6 +97,10 @@ export default { description: { component: 'Configurable component that can be used to display progression in a bar' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=9252-80010&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/select.stories.js b/addon/components/o-s-s/select.stories.js index bd09512ef..2fd9372ee 100644 --- a/addon/components/o-s-s/select.stories.js +++ b/addon/components/o-s-s/select.stories.js @@ -144,7 +144,7 @@ export default { }, design: { type: 'figma', - url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1142-1256&p=f&t=pVIlyZlo6oyvIQxs-0' + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6188&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/slider.stories.js b/addon/components/o-s-s/slider.stories.js index 5c744e398..e2f113384 100644 --- a/addon/components/o-s-s/slider.stories.js +++ b/addon/components/o-s-s/slider.stories.js @@ -123,6 +123,10 @@ export default { description: { component: 'Displays a slider.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=4584-11977&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/split-modal.stories.js b/addon/components/o-s-s/split-modal.stories.js index 84f58db25..f7df89626 100644 --- a/addon/components/o-s-s/split-modal.stories.js +++ b/addon/components/o-s-s/split-modal.stories.js @@ -38,6 +38,10 @@ export default { - In mobile mode, it defaults to fx-col (with column-reverse to have the cancel buttons at the bottom) and fx-gap-px-9 - In mobile mode, the preview panel is hidden.` } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6196&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/togglable-section.stories.js b/addon/components/o-s-s/togglable-section.stories.js index 0d3edefec..fd1cc269d 100644 --- a/addon/components/o-s-s/togglable-section.stories.js +++ b/addon/components/o-s-s/togglable-section.stories.js @@ -102,6 +102,10 @@ export default { description: { component: 'A component that allows to toggle the visibility of a section. Useful for settings.' } + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=7951-6682&p=f&t=AsdGbaychQPIaGnK-0' } } }; diff --git a/addon/components/o-s-s/upload-area.stories.js b/addon/components/o-s-s/upload-area.stories.js index 7700d9e22..c7efaa5e2 100644 --- a/addon/components/o-s-s/upload-area.stories.js +++ b/addon/components/o-s-s/upload-area.stories.js @@ -196,6 +196,10 @@ export default { component: 'The drag and drop component to upload file.' }, iframeHeight: 200 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6194&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/addon/components/o-s-s/upload-item.stories.js b/addon/components/o-s-s/upload-item.stories.js index 031c5f31c..e3acd7437 100644 --- a/addon/components/o-s-s/upload-item.stories.js +++ b/addon/components/o-s-s/upload-item.stories.js @@ -114,6 +114,10 @@ export default { component: 'The upload item component' }, iframeHeight: 200 + }, + design: { + type: 'figma', + url: 'https://www.figma.com/file/N7SDuH9mvC9zTlsLN49N4L/2.0-UI-Kit-%F0%9F%92%A0?node-id=1343-6194&p=f&t=eK7N52oGFl9Y0IDC-0' } } }; diff --git a/unmatched_names.md b/unmatched_names.md deleted file mode 100644 index 037dc53ea..000000000 --- a/unmatched_names.md +++ /dev/null @@ -1,18 +0,0 @@ -# List of names not matching between OSS and design - -This document aims to find out which components are not named the same between the design system and oss-components. This list is not exhaustive and needs to be completed. - -The final goal is to improve the consistency between the code and the design system, so the components can be found easily either in the code or in the design. It would greatly improve the efficiency of the communication between the developers and the designers. - -| OSS Component | Design Component | Notes | -| --------------------- | ------------------------ | ------------------------------------------------------------ | -| `OSS::Anchor` | Link | The OSS::Link component also exists | -| `OSS::ArrayInput` | Input | All Input OSS components map to a single design component. | -| `OSS::ButtonDropdown` | Button Split | | -| `OSS::Tag` | Chip/Franken Chip | | -| `OSS::PowerSelect` | Input/Input Multi Select | | -| `OSS::Select` | Input/Input Select | | -| `OSS::Pill` | Pill/Smart Pill | OSS has a generic Pill, but design only has Smart Pill. | -| `OSS::StarRating` | Rating | OSS::Rating component exists without a corresponding design. | - -The input components included in the Input design are (non exhaustive list): `ArrayInput`/`InputContainer`/`InputGroup`/`URLInput`/`CurrencyInput`/`EmailInput`/`TextArea`...