feat(TMC-2505): integrate status dot to tabs component (#5439)

* feat(TMC-2505): integrate status dot to tabs component

* feat(TMC-2505): integrate status dot to tabs component

* feat(TMC-2505): integrate status dot to tabs component

.changeset/tough-vans-glow.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+feat(TMC-2505): integrate status dot to tabs component

packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss → packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss

@@ -1,6 +1,6 @@
 @use '@talend/design-tokens/lib/tokens' as tokens;
 
-.statusBubble {
+.statusDot {
 	display: block;
 	width: tokens.$coral-spacing-xs;
 	height: tokens.$coral-spacing-xs;

packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx

@@ -0,0 +1,12 @@
+import { describe, expect, it } from '@jest/globals';
+import { render, screen } from '@testing-library/react';
+
+import StatusDot, { variants } from './StatusDotPrimitive';
+
+describe('StatusDot', (): void => {
+	it('Should render', (): void => {
+		render(<StatusDot variant={variants.success} data-testid="my-status-dot-component" />);
+
+		expect(screen.getByTestId('my-status-dot-component')).toBeVisible();
+	});
+});

packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, Ref } from 'react';
+
+import classnames from 'classnames';
+
+import { DataAttributes } from '../../../types';
+
+import styles from './StatusDotPrimitive.module.scss';
+
+export const variants = {
+	beta: 'beta',
+	error: 'error',
+	information: 'information',
+	success: 'success',
+	warning: 'warning',
+};
+
+export type StatusDotProps = {
+	variant: string;
+	className?: string;
+} & DataAttributes;
+
+const StatusDotPrimitive = forwardRef(
+	({ variant, className, ...rest }: StatusDotProps, ref: Ref<HTMLSpanElement>) => {
+		return (
+			<span
+				className={classnames(styles.statusDot, styles[variant], className)}
+				ref={ref}
+				{...rest}
+			/>
+		);
+	},
+);
+
+StatusDotPrimitive.displayName = 'StatusDotPrimitive';
+
+export default StatusDotPrimitive;

packages/design-system/src/components/StatusDot/StatusDot.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, Ref } from 'react';
+
+import { StatusDotProps, variants } from './Primitive/StatusDotPrimitive';
+import StatusDotBeta from './variations/StatusDotBeta';
+import StatusDotError from './variations/StatusDotError';
+import StatusDotInformation from './variations/StatusDotInformation';
+import StatusDotSuccess from './variations/StatusDotSuccess';
+import StatusDotWarning from './variations/StatusDotWarning';
+
+const StatusBubble = forwardRef((props: StatusDotProps, ref: Ref<HTMLSpanElement>) => {
+	switch (props.variant) {
+		case variants.beta:
+			return <StatusDotBeta {...props} ref={ref} />;
+		case variants.error:
+			return <StatusDotError {...props} ref={ref} />;
+		case variants.information:
+			return <StatusDotInformation {...props} ref={ref} />;
+		case variants.success:
+			return <StatusDotSuccess {...props} ref={ref} />;
+		case variants.warning:
+			return <StatusDotWarning {...props} ref={ref} />;
+		default:
+			return null;
+	}
+});
+
+export default StatusBubble;

packages/design-system/src/components/StatusDot/index.ts

@@ -0,0 +1,15 @@
+import StatusDot from './StatusDot';
+import StatusDotBeta from './variations/StatusDotBeta';
+import StatusDotError from './variations/StatusDotError';
+import StatusDotInformation from './variations/StatusDotInformation';
+import StatusDotSuccess from './variations/StatusDotSuccess';
+import StatusDotWarning from './variations/StatusDotWarning';
+
+export {
+	StatusDot,
+	StatusDotBeta,
+	StatusDotError,
+	StatusDotInformation,
+	StatusDotSuccess,
+	StatusDotWarning,
+};

packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotBetaProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotBeta = forwardRef((props: StatusDotBetaProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.beta} ref={ref} {...props} />;
+});
+
+StatusDotBeta.displayName = 'StatusDotBeta';
+
+export default StatusDotBeta;

packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotErrorProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotError = forwardRef((props: StatusDotErrorProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.error} ref={ref} {...props} />;
+});
+
+StatusDotError.displayName = 'StatusDotError';
+
+export default StatusDotError;

packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotInformationProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotInformation = forwardRef(
+	(props: StatusDotInformationProps, ref: Ref<HTMLSpanElement>) => {
+		return <StatusDotPrimitive variant={variants.information} ref={ref} {...props} />;
+	},
+);
+
+StatusDotInformation.displayName = 'StatusDotInformation';
+
+export default StatusDotInformation;

packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotSuccessProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotSuccess = forwardRef((props: StatusDotSuccessProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.success} ref={ref} {...props} />;
+});
+
+StatusDotSuccess.displayName = 'StatusDotSuccess';
+
+export default StatusDotSuccess;

packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx

@@ -0,0 +1,13 @@
+import { forwardRef, Ref } from 'react';
+
+import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive';
+
+export type StatusDotWarningProps = Omit<StatusDotProps, 'variant'>;
+
+const StatusDotWarning = forwardRef((props: StatusDotWarningProps, ref: Ref<HTMLSpanElement>) => {
+	return <StatusDotPrimitive variant={variants.warning} ref={ref} {...props} />;
+});
+
+StatusDotWarning.displayName = 'StatusDotWarning';
+
+export default StatusDotWarning;

packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss

@@ -122,4 +122,8 @@
 		transition: tokens.$coral-transition-fast;
 		transform: translateY(100%);
 	}
+
+	.statusDot {
+		align-self: flex-start;
+	}
 }

packages/design-system/src/components/Tabs/Primitive/Tabs.tsx

@@ -6,6 +6,7 @@ import { IconNameWithSize } from '@talend/icons';
 
 import { SizedIcon } from '../../Icon';
 import { StackHorizontal } from '../../Stack';
+import { StatusDot } from '../../StatusDot';
 import { TagDefault } from '../../Tag';
 import { Tooltip } from '../../Tooltip';
 import { TabsInternalContext } from './TabsProvider';
@@ -31,6 +32,7 @@ export type TabPropTypes = {
 	disabled?: boolean;
 	icon?: IconNameWithSize<'S'>;
 	tag?: string | number;
+	statusDot?: string;
 	tooltip?: string;
 	error?: boolean;
 };
@@ -53,6 +55,7 @@ export function Tab(props: TabPropTypes) {
 				{props.icon && <SizedIcon size="S" name={props.icon} />}
 				<span className={style.tab__copy}>{props.title}</span>
 				{props.tag && <TagDefault>{props.tag}</TagDefault>}
+				{props.statusDot && <StatusDot variant={props.statusDot} className={style.statusDot} />}
 			</StackHorizontal>
 		</button>
 	);