Add "Icons" Type to Shared-Component Library

[jjeroch]

Ticket Summary:

Enhance the current shared-component library by introducing a new "Icons" component type with customizable sizes and states.

Enhancement Description:

• Create a new "Icons" component type with the following configurable properties:
  • Size: Ability to set icon sizes to one of the predefined options (8px, 10px, 12px, 14px, 16px, 18px, 20px).
  • States: Include visual representations for different icon states such as default, error, success, and warning.

Tasks:

1. Design and Specification:

   • Collaborate with the design team to define the visual guidelines and specifications for the different sizes and states of the Icons component.

2. Implementation:

   • Develop the Icons component, ensuring that it is flexible and easily integrated into existing and future projects.
   • Ensure scalability and maintainability of the component.

3. Testing:

   • Perform thorough unit and integration tests for each size and state of the Icons component.
   • Conduct cross-browser and responsiveness tests.

4. Documentation:

   • Update the shared-component library documentation with detailed guidance on how to use the new Icons component.
   • Provide examples for each size and state.
   • Storybook documentation is available

Acceptance Criteria:

• [ ] The Icons component must offer the predefined sizes with accurate dimensions.
• [ ] Icons must visually reflect the state they represent (default, error, success, warning) clearly and distinctly.
• [ ] The component should be compatible with existing shared components and easily adoptable by frontends utilizing the shared-component library.
• [ ] refer to the material UI library which is expected to be used for icons
• [ ] add an overview with some best practices

Technical Details:

• The new Icons component should adhere to the existing shared-component library design principles and code standards.

---

If possible please include a section of most used / to be used icons based on material UI for the following scenarios...open Action Item: how can we include the icon image inside storybook?

Below is an example of a Markdown table containing a default set of Material UI icons that can be used in application development.

Icon Name	Purpose	Material UI Icon Code
Home	Navigate home	home
Menu	Open menu	menu
Search	Search items	search
Account	User account	account_circle
Settings	Settings	settings
Notifications	Notifications	notifications
Favorite	Mark as favorite	favorite
Close	Close or exit	close
Check	Confirm action	check
Error	Indicate error	error
Help	Help or info	help_outline
Logout	Log out	logout
Add	Add new item	add
Edit	Edit item	edit
Delete	Delete item	delete
Arrow Forward	Navigate forward	arrow_forward
Arrow Back	Navigate back	arrow_back
Download	Download	file_download
Upload	Upload	file_upload
Refresh	Refresh content	refresh
Print	Print document	print
Exit To App	External link	exit_to_app

To use these icons in your application, you would typically import them from the Material UI icons package and then use them in your React components. Here's an example of how you might import and use the Home icon:

import HomeIcon from '@mui/icons-material/Home';

function App() {
  return (
    <div>
      <HomeIcon />
    </div>
  );
}

export default App;

[charmi-v]

Hello @jjeroch @evegufy ,

I am interested in contributing to this project and would like to work on the new Icon component. Could you please assign this issue to me?

Additionally, could you advise whom I should collaborate with to gain a clearer understanding of the expected preview and requirements for the component?

Thank you.

[jjeroch]

@charmi-v thats awesome :) Assigned the ticket to you

@MaximilianHauer FYI

Please note that I enhanced the description (acceptance criterias)

[charmi-v]

Hello @MaximilianHauer , Could you provide a reference for the preview of icons in different states, such as default, error, success, and warning? I assume that the icon colors will update based on these states. Please share your thoughts on this

[MaximilianHauer]

@charmi-v do you only need a reference to improve on the icon or a finished icon where you only need to replace the color ? we dont have any designer anymore this means our capabilities on delivering a finished product is limited. do you have a designer in your team ?

[ybidois]

@MaximilianHauer our designers would be happy to help here. Maybe we can discuss it next week in the open meeting? Thanks @typecastcloud for the heads up!

[Cofinity-UX]

Cofinity-UX is happy to support here! @jjeroch if the system icons are based on the Material UI library, it will be better to stick to the naming of the icons there (better for the FE devs workflow). Further, a white (or contrast) color option is also needed. Can you update this in the requirements? Thank you!