feat: New Icon component

[charmi-v]

Description

Component: Icon

• Introduced a new Icon component.
• Added a corresponding test file.
• Updated existing mock files to support Jest testing.
• Included a documentation file detailing the component and listing the most commonly used icons.

Why

Introduced the new "Icon" component to enhance the shared-component library.

• This addition allows you to customize icon sizes and select from predefined states.
• Use this component to maintain consistency and flexibility in icon usage across projects.

Issue

235

Checklist

Please delete options that are not relevant.

• [x] I have followed the contributing guidelines
• [x] I have performed a self-review of my own code
• [x] I have successfully tested my changes locally
• [x] I have added tests that prove my changes work
• [x] I have checked that new and existing tests pass locally with my changes
• [x] I have commented my code, particularly in hard-to-understand areas

[charmi-v]

@jjeroch @oyo In package.json under devDependencies, we have "@storybook/test": "^8.1.6". The yarn.lock file lists @testing-library/jest-dom: 6.4.5 as a dependency, allowing us to use the library without explicitly listing it in package.json.

I included @testing-library/jest-dom@6.4.5 in devDependencies to:

• Show Explicit Usage: Clearly indicate the project’s reliance on it for development.
• Control Version: Ensure consistent usage of the required version.
• Prevent Conflicts: Avoid issues if @storybook/test updates its dependencies.

The GitHub Workflow Actions (Check Dependencies / check-dependencies) failed with the latest version of @testing-library/jest-dom. I used the exact version 6.4.5 without the caret (^), which successfully passed the GitHub Action.

However, this prevents receiving bug fixes and new features, which may be a future blocker if updates are needed for @testing-library/jest-dom package.

[Cofinity-UX]

@charmi-v in your given screenshots all icons have the same size container. if a 8px icon is placed, would it still be possible to adjust the size of the container? Imagine there is a small 14px height button which requires a small icon – would the (assuming) 40px container of the icon create an issue?

[charmi-v]

@charmi-v in your given screenshots all icons have the same size container. if a 8px icon is placed, would it still be possible to adjust the size of the container? Imagine there is a small 14px height button which requires a small icon – would the (assuming) 40px container of the icon create an issue?

The container in the screenshots is for illustration only and will not be rendered with the Icon component. Only the icon itself will be rendered, and as you can see, the inherit version of the icon is used within a button component itself, so one can adjust the icon size without any issues related to the container.

[sonarcloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[ybidois]

Great work @charmi-v! 👏

[MaximilianHauer]

woah ! thank you for your support 👍