[666] Icons not vertical-aligned correctly

[soujvnunes]

Icons not vertical-aligned correctly

After the redesign of some icons, primarily prottoyped for Home V2, these are being:

• implemented and served with a11y and optical fixture resources;
• presented throught Storybook;
• and tested;

During the implementation, was encountered some issues between Storybook and React JS Scripts. Those are being covered in the app README.

References

1. Browse Stories;
2. babel-loader devDependency causes error in Create-React-App

💡 Functionality

Test

Please, follow along the success of the implementation by style class and a11y attributes.

1. yarn test;

Storybook

See how the Icon behave on screen through Storybook example story.

1. yarn storybook

⚡ Changelog

Unit	🟢 Added	🟡 Changed	🔴 Removed
🟢 .storybook/	Adds preflight config for Storybook
🟢 <Icon />	Adds icons unity to handle the redesigned and customized a11y and fixture prop graphics
	Adds styles to handle default fixture ones, size and direction responsivity
	Adds story to present an Example of usage
	Tests fixture, size and direction responsivity
	Adds a set of svg files which references its graphic icons as React Components
🟡 </ModalSection />		Uses css var for its bottom margin
🟡 components/index.ts		Indexes <Icon />
🟡 styles/theme/_tokens.scss		Adds CSS varis for sizing tokens
🟡 .eslintignore		Adds storybook's dir to be ignored
🟡 .eslintrc.json		Adds storybook's plugins extensions
🟡 README.md		Adds storybook's troubleshooting
🟡 package.json		Adds storybook's dev/deps and configs

🐛 Backlog

Unit	Has story?	Description
src/assets/icons	🔴	Needs to be reviwed, since icons is being implemented through the <Icon />

Footnotes

useHook() is related to React JS hooks, located on src/hooks/ path;

<Component />/ <Component [prop=value] /> is related to React JS components, located on src/components/ path;

module() is related to modules located on src/utils/ or anywhere else on the app that provides some usefull shared resource;