Web: add label clickable button with hover state

[kimlisa]

part of https://github.com/gravitational/teleport.e/issues/7183

Created a label component that accepts any icon that can be rendered on left or right, and have same hover state as buttons depending on kind

Also adds customizing how resource labels are rendered for unified resources

Story for labels: https://localhost:9002/?path=/story/design-label--labels
Story for unified resource: https://localhost:9002/?path=/story/shared-unifiedresources-items--cards

figma: https://www.figma.com/design/CzxaBHF8hirrYv2bTVa4Rw/Identity-Governance?node-id=8638-79995&t=ujyuv9gqrjGLQWfV-0

[nicholasmarais1158]

nit: Use PropsWithChildren.

Suggested change

	export function LabelButtonWithIcon({
	Icon,
	placement,
	children,
	...labelProps
	}: LabelProps & {
	Icon: React.ComponentType<IconProps>;
	placement: IconPlacement;
	children: React.ReactNode;
	onClick?: () => void;
	}) {
	export function LabelButtonWithIcon({
	Icon,
	placement,
	children,
	...labelProps
	}: {
	Icon: React.ComponentType<IconProps>;
	placement: IconPlacement;
	onClick?: () => void;
	} & LabelProps & PropsWithChildren) {

[nicholasmarais1158]

Support keyboard navigation.

Suggested change

	<LabelWithHoverAffect {...labelProps} withHoverState>
	<LabelWithHoverAffect {...labelProps} withHoverState tabIndex={0}>

Also, consider adding :focus and/or :active styles.

[nicholasmarais1158]

To improve flexibility and promote reusability, I'd provide IconLeft and IconRight props instead of a single placement.

[nicholasmarais1158]

Feels a little strange to base this logic on the presence of an icon. Can it be based on the presence of the onClick prop instead, which should use the hover state?

[nicholasmarais1158]

This change seem a little out of place in this PR. Is it related in some way?

[nicholasmarais1158]

nit

Suggested change

	export type ResourceLabelConfig = {
	/**
	* If defined, LabelButtonWithIcon component is used that
	* renders icon and applies button hover states.
	*
	* Default is to use Label component without any hover states.
	*/
	Icon?: React.ComponentType<IconProps>;
	/**
	* If field "Icon" is defined, default renders the icon to the right.
	*/
	iconPlacement?: IconPlacement;
	/**
	* Default label kind is "secondary".
	*/
	kind?: LabelKind;
	};
	export type ResourceLabelConfig = Omit<ComponentProps<typeof LabelButtonWithIcon>, 'children'>;