feat: add new scenarios for skeleton

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

@@ -1,4 +1,5 @@
 import { forwardRef, HTMLAttributes, Ref } from 'react';
+
 import classNames from 'classnames';
 
 import styles from './Skeleton.module.scss';

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

@@ -5,13 +5,15 @@ import SkeletonButtonIcon, { SkeletonButtonIconProps } from './variations/Skelet
 import SkeletonHeading, { SkeletonHeadingProps } from './variations/SkeletonHeading';
 import SkeletonInput, { SkeletonInputProps } from './variations/SkeletonInput';
 import SkeletonParagraph, { SkeletonParagraphProps } from './variations/SkeletonParagraph';
+import SkeletonSized, { SkeletonSizedProps } from './variations/SkeletonSized';
 
 export type SkeletonProps =
 	| ({ variant: 'button' } & SkeletonButtonProps)
 	| ({ variant: 'buttonIcon' } & SkeletonButtonIconProps)
 	| ({ variant: 'heading' } & SkeletonHeadingProps)
 	| ({ variant: 'paragraph' } & SkeletonParagraphProps)
-	| ({ variant: 'input' } & SkeletonInputProps);
+	| ({ variant: 'input' } & SkeletonInputProps)
+	| ({ variant: 'sized' } & SkeletonSizedProps);
 
 export const Skeleton = forwardRef((props: SkeletonProps, ref: Ref<HTMLSpanElement>) => {
 	switch (props.variant) {
@@ -40,6 +42,11 @@ export const Skeleton = forwardRef((props: SkeletonProps, ref: Ref<HTMLSpanEleme
 			return <SkeletonInput {...rest} ref={ref} />;
 		}
 
+		case 'sized': {
+			const { variant, ...rest } = props;
+			return <SkeletonSized {...rest} ref={ref} />;
+		}
+
 		default: {
 			return null;
 		}

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

@@ -1,8 +1,17 @@
-export * from './Skeleton';
 import SkeletonButton from './variations/SkeletonButton';
 import SkeletonButtonIcon from './variations/SkeletonButtonIcon';
 import SkeletonHeading from './variations/SkeletonHeading';
 import SkeletonInput from './variations/SkeletonInput';
 import SkeletonParagraph from './variations/SkeletonParagraph';
+import SkeletonSized from './variations/SkeletonSized';
+
+export * from './Skeleton';
 
-export { SkeletonHeading, SkeletonButtonIcon, SkeletonButton, SkeletonParagraph, SkeletonInput };
+export {
+	SkeletonHeading,
+	SkeletonButtonIcon,
+	SkeletonButton,
+	SkeletonParagraph,
+	SkeletonInput,
+	SkeletonSized,
+};

packages/design-system/src/components/Skeleton/variations/SkeletonHeading.module.scss

@@ -15,4 +15,28 @@
 	&.size-S {
 		height: 1.4rem;
 	}
+
+	&.width-XS {
+		max-width: 10%;
+	}
+
+	&.width-S {
+		max-width: 20%;
+	}
+
+	&.width-M {
+		max-width: 40%;
+	}
+
+	&.width-L {
+		max-width: 60%;
+	}
+
+	&.width-XL {
+		max-width: 80%;
+	}
+
+	&.width-100 {
+		max-width: 100%;
+	}
 }

packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx

@@ -8,6 +8,7 @@ import styles from './SkeletonHeading.module.scss';
 
 export type SkeletonHeadingProps = Omit<SkeletonPrimitiveProps, 'className'> & {
 	size?: 'L' | 'M' | 'S';
+	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100%';
 };
 
 const SkeletonHeading = forwardRef(
@@ -19,6 +20,12 @@ const SkeletonHeading = forwardRef(
 					[styles['size-L']]: size === 'L',
 					[styles['size-M']]: size === 'M',
 					[styles['size-S']]: size === 'S',
+					[styles['width-XS']]: props.width === 'XS',
+					[styles['width-S']]: props.width === 'S',
+					[styles['width-M']]: props.width === 'M',
+					[styles['width-L']]: props.width === 'L',
+					[styles['width-XL']]: props.width === 'XL',
+					[styles['width-100']]: props.width === '100%',
 				})}
 				{...props}
 				ref={ref}

packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.module.scss

@@ -7,4 +7,28 @@
 	&.size-S {
 		height: 1.2rem;
 	}
+
+	&.width-XS {
+		max-width: 10%;
+	}
+
+	&.width-S {
+		max-width: 20%;
+	}
+
+	&.width-M {
+		max-width: 40%;
+	}
+
+	&.width-L {
+		max-width: 60%;
+	}
+
+	&.width-XL {
+		max-width: 80%;
+	}
+
+	&.width-100 {
+		max-width: 100%;
+	}
 }

packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx

@@ -8,6 +8,7 @@ import styles from './SkeletonParagraph.module.scss';
 
 export type SkeletonParagraphProps = Omit<SkeletonPrimitiveProps, 'className'> & {
 	size?: 'M' | 'S';
+	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100%';
 };
 
 const SkeletonParagraph = forwardRef(
@@ -18,6 +19,12 @@ const SkeletonParagraph = forwardRef(
 				className={classNames(styles.skeletonParagraph, {
 					[styles['size-M']]: size === 'M',
 					[styles['size-S']]: size === 'S',
+					[styles['width-XS']]: props.width === 'XS',
+					[styles['width-S']]: props.width === 'S',
+					[styles['width-M']]: props.width === 'M',
+					[styles['width-L']]: props.width === 'L',
+					[styles['width-XL']]: props.width === 'XL',
+					[styles['width-100']]: props.width === '100%',
 				})}
 				{...props}
 				ref={ref}

packages/design-system/src/components/Skeleton/variations/SkeletonSized.module.scss

@@ -0,0 +1,3 @@
+.skeleton-sized-circle {
+	border-radius: 50%;
+}

packages/design-system/src/components/Skeleton/variations/SkeletonSized.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, Ref } from 'react';
+
+import classNames from 'classnames';
+
+import SkeletonPrimitive, { SkeletonPrimitiveProps } from '../Primitive/Skeleton.Primitive';
+
+import style from './SkeletonSized.module.scss';
+
+export type SkeletonSizedProps = Omit<SkeletonPrimitiveProps, 'className'> & {
+	height?: number;
+	width?: number;
+	isCircle?: boolean;
+};
+
+const SkeletonSized = forwardRef(
+	(
+		{ height = 1.4, width = 2, isCircle, ...props }: SkeletonSizedProps,
+		ref: Ref<HTMLSpanElement>,
+	) => {
+		return (
+			<SkeletonPrimitive
+				// @ts-expect-error style is valid
+				style={{ height: `${height}rem`, width: `${width}rem` }}
+				className={classNames({ [style['skeleton-sized-circle']]: isCircle })}
+				{...props}
+				ref={ref}
+			/>
+		);
+	},
+);
+SkeletonSized.displayName = 'SkeletonSized';
+
+export default SkeletonSized;

packages/design-system/src/stories/feedback/Skeleton.mdx

@@ -1,11 +1,13 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+
 import { FigmaImage } from '@talend/storybook-docs';
+
 import {
+	Skeleton,
 	SkeletonButton,
-	SkeletonParagraph,
 	SkeletonHeading,
 	SkeletonInput,
-	Skeleton,
+	SkeletonParagraph,
 	StackHorizontal,
 	StackVertical,
 } from '../../';
@@ -82,6 +84,15 @@ It illustrates any input element.
 	<Story of={Stories.SkeletonInputStory} />
 </Canvas>
 
+#### Sized
+
+It can be the size needed
+
+<Canvas>
+	<Story of={Stories.SkeletonSizedStory} />
+</Canvas>
+<Controls of={Stories.SkeletonSizedStory} />
+
 #### Composition example
 
 Combine all of them to mock content!

packages/design-system/src/stories/feedback/Skeleton.stories.tsx

@@ -7,10 +7,10 @@ import {
 	SkeletonHeading,
 	SkeletonInput,
 	SkeletonParagraph,
+	SkeletonSized,
 	StackHorizontal,
 	StackVertical,
 } from '../../';
-
 import SkeletonPrimitive from '../../components/Skeleton/Primitive/Skeleton.Primitive';
 
 export default {
@@ -34,6 +34,10 @@ const SkeletonParagraphTemplate: StoryFn<typeof SkeletonParagraph> = args => {
 	return <SkeletonParagraph {...args} />;
 };
 
+const SkeletonSizedTemplate: StoryFn<typeof SkeletonSized> = args => {
+	return <SkeletonSized {...args} />;
+};
+
 const SkeletonInputTemplate: StoryFn<typeof SkeletonInput> = args => {
 	return <SkeletonInput {...args} />;
 };
@@ -71,6 +75,11 @@ SkeletonHeadingStory.argTypes = {
 		control: { type: 'select' },
 		description: 'optional (default is "L")',
 	},
+	width: {
+		options: ['XL', 'L', 'M', 'S', 'XS'],
+		control: { type: 'select' },
+		description: 'optional',
+	},
 };
 
 export const SkeletonParagraphStory = SkeletonParagraphTemplate.bind({});
@@ -83,6 +92,26 @@ SkeletonParagraphStory.argTypes = {
 		control: { type: 'select' },
 		description: 'optional (default is "M")',
 	},
+	width: {
+		options: ['XL', 'L', 'M', 'S', 'XS'],
+		control: { type: 'select' },
+		description: 'optional',
+	},
+};
+
+export const SkeletonSizedStory = SkeletonSizedTemplate.bind({});
+SkeletonSizedStory.args = {
+	isCircle: true,
+};
+SkeletonSizedStory.argTypes = {
+	height: {
+		control: { type: 'number' },
+		defaultValue: 10,
+	},
+	width: {
+		control: { type: 'number' },
+		defaultValue: 10,
+	},
 };
 
 export const SkeletonInputStory = SkeletonInputTemplate.bind({});