Add Figma links to stories.

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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: {

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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.<br>
         - 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'
     }
   }
 };

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'
+    }
   }
 };
 

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'
+    }
   }
 };
 

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };

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'
     }
   }
 };