feat(components/molecule/imageEditor): Add row layout and help text to molecule image editor

[oegea]

trafficstars

molecule/imageEditor

❓ Ask

Types of changes

• [X] ✨ New feature (non-breaking change which adds functionality)

Description, Motivation and Context

Context

We're implementing a new page in cnetpro to allow the user to modify their details, among which is the user profile image. To allow modifying the user profile image, we're adopting the molecule/imageEditor in order to offer a way to the user to crop and adjust the selected image before submitting it to the backend.

The problem

We need to make some modifications in the molecule/imageEditor component to be able to render it with a row-style layout, positioning the control sliders at the right side of the image, instead of the current "top to down" or column-style layout.

Changes in this PR

This PR implements a new prop which activates a new layout mode to display controls in the desired mode. Should not affect existing implementations as long as the new prop is not setted.

Additionally, we've added a help text, which is also totally optional.

Screenshots - Animations

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.01↑	≍ 0.01↑	≍ 0＝	≍ 0＝
%	72.05	57.78	58.92	73.72
ABS	2602 / 3611	1462 / 2530	472 / 801	2508 / 3402

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.01↑	≍ 0.01↑	≍ 0＝	≍ 0＝
%	72.05	57.78	58.92	73.72
ABS	2602 / 3611	1462 / 2530	472 / 801	2508 / 3402

[oegea]

Add a demo for the new prop please

Done! And fixed scss variables too.

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.01↑	≍ 0.01↑	≍ 0＝	≍ 0＝
%	72.05	57.78	58.92	73.72
ABS	2602 / 3611	1462 / 2530	472 / 801	2508 / 3402

[andresin87]

wait till i come

[jordevo]

wait till i come

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.1↑	≍ 0.01↑	≍ 0.15↑	≍ 0.15↑
%	72.14	57.8	59.07	73.8
ABS	2613 / 3622	1462 / 2529	475 / 804	2519 / 3413

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.1↑	≍ 0.01↑	≍ 0.15↑	≍ 0.15↑
%	72.14	57.8	59.07	73.8
ABS	2613 / 3622	1462 / 2529	475 / 804	2519 / 3413

[github-actions[bot]]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0.1↑	≍ 0.01↑	≍ 0.15↑	≍ 0.15↑
%	72.14	57.8	59.07	73.8
ABS	2613 / 3622	1462 / 2529	475 / 804	2519 / 3413