Implement Contextual help component

[MrFlashAccount]

Pull Request Description

This PR adds an ability to specify a rich contextual help to any form component:

This PR doesn't do any changes to production code! Only adds a new property.

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  TypeScript,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• Unit tests have been written where possible.
• If meaningful changes were made to logic or tests affecting Enso Cloud integration in the libraries,
  or the Snowflake database integration, a run of the Extra Tests has been scheduled.
  • If applicable, it is suggested to paste a link to a successful run of the Extra Tests.

[github-actions]

🧪 Storybook is successfully deployed!

📊 Dashboard:

• 👀 Review changes: https://www.chromatic.com/build?appId=673738989fc3e8430364197e&number=2994
• 👨‍🎨 Preview storybook: https://673738989fc3e8430364197e-leprelpjoa.chromatic.com/

[somebody1234]

with the notifications PR having been merged in, feel free to try StoryVariants!

enso/app/gui/src/dashboard/components/Icon/Icon.stories.tsx

Lines 107 to 120 in 47e66da

	export const AvailableIconsWithStatusBadge: Story = {
	render: () => (
	<StoryVariants
	columns="9"
	render={(props: IconProps) => (
	<StatusBadge color="danger">
	<Icon {...props} />
	</StatusBadge>
	)}
	toProps={(icon) => ({ icon })}
	variants={iconNames}
	/>
	),
	}

enso/app/gui/src/dashboard/components/AriaComponents/Text/Text.stories.tsx

Lines 36 to 52 in 47e66da

	export const Colors: Story = {
	render: () => (
	<StoryVariants
	render={Text}
	toProps={(props) => ({ ...args, ...props })}
	toLabel={({ color }) => color}
	variants={[
	{ color: 'primary' },
	{ color: 'danger' },
	{ color: 'invert', className: 'bg-primary px-2 rounded-md' },
	{ color: 'success' },
	{ color: 'disabled' },
	{ color: 'custom', className: 'text-youtube' },
	]}
	/>
	),
	}

[somebody1234]

feedback is welcome/appreciated