docs: add new stories for UI components

[benoitf]

What does this PR do?

Add new stories for UI components

Screenshot / video of UI

https://66f17e753e2f921f3f94916e--podman-desktop-pr.netlify.app/storybook

What issues does this PR fix or reference?

fixes #7441

How to test this PR?

• Tests are covering the bug fix or the new feature

[axel7083]

The tooltip indication is not really visible in dark mode

I would remove the next Hover the icon and put a ? icon instead

Otherwise great job, I created #8840 and #8841 as I just noticed the problem with the numerous items added

[feloy]

• I'm testing by running pnpm dev from the storybook directory, I'm not sure if there is a better way

• In the Docs page, the Stories are not displaying anything (they are displayed correctly in dedicated pages):

• In the source code, <wrapper is displayed instead of the real component name.

• could the terminal displaying the code be in light mode?

[benoitf]

@feloy I think the best way is to render the final look

or go to the website (click on the netlify link of this PR)

https://66e1a382d9435a070cc59d87--podman-desktop-pr.netlify.app/storybook/

[feloy]

@feloy I think the best way is to render the final look

or go to the website (click on the netlify link of this PR)

https://66e1a382d9435a070cc59d87--podman-desktop-pr.netlify.app/storybook/

ok, thanks. So the only remaining concern would be:

could the terminal displaying the code be in light mode?

[benoitf]

there might be a way but it's not related to this PR that only bring new stories (no terminal being added)

you can create the issue, it'll be for the storybook/docusaurus integration

[benoitf]

I've added a bunch of argsTypes parameters + example on selected for the tab

also added an extra padding on tooltip to see the tooltip

[axel7083]

LGTM

[dgolovin]

Is it normal for pr preview?

Also noticed that not all the elements have 'Basic' item. Not sure if that is intentional.

[feloy]

LGTM
Thanks for the changes

[benoitf]

@dgolovin I fixed the dropdown rendering by adding a min-height and a padding

I renamed also Example to Basic

[dgolovin]

LGTM now