update

Talend · Dec 11, 2023 · 68db2f1 · 68db2f1
1 parent fcf0f69
commit 68db2f1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 23 deletions.
diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonHeading.tsx
@@ -8,24 +8,17 @@ import styles from './SkeletonHeading.module.scss';
 
 export type SkeletonHeadingProps = Omit<SkeletonPrimitiveProps, 'className'> & {
 	size?: 'L' | 'M' | 'S';
-	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100%';
+	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100';
 };
 
 const SkeletonHeading = forwardRef(
-	({ size = 'L', ...props }: SkeletonHeadingProps, ref: Ref<HTMLSpanElement>) => {
+	({ size = 'L', width, ...props }: SkeletonHeadingProps, ref: Ref<HTMLSpanElement>) => {
 		return (
 			<SkeletonPrimitive
 				isBlock
 				className={classNames(styles.skeletonHeading, {
-					[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%',
+					[styles[`size-${size}`]]: size,
+					[styles[`width-${width}`]]: width,
 				})}
 				{...props}
 				ref={ref}

diff --git a/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx b/packages/design-system/src/components/Skeleton/variations/SkeletonParagraph.tsx
@@ -8,23 +8,17 @@ import styles from './SkeletonParagraph.module.scss';
 
 export type SkeletonParagraphProps = Omit<SkeletonPrimitiveProps, 'className'> & {
 	size?: 'M' | 'S';
-	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100%';
+	width?: 'XS' | 'S' | 'M' | 'L' | 'XL' | '100';
 };
 
 const SkeletonParagraph = forwardRef(
-	({ size = 'M', ...props }: SkeletonParagraphProps, ref: Ref<HTMLSpanElement>) => {
+	({ size = 'M', width, ...props }: SkeletonParagraphProps, ref: Ref<HTMLSpanElement>) => {
 		return (
 			<SkeletonPrimitive
 				isBlock
 				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%',
+					[styles[`size-${size}`]]: size,
+					[styles[`width-${width}`]]: width,
 				})}
 				{...props}
 				ref={ref}

diff --git a/packages/design-system/src/stories/feedback/Skeleton.stories.tsx b/packages/design-system/src/stories/feedback/Skeleton.stories.tsx
@@ -76,7 +76,7 @@ SkeletonHeadingStory.argTypes = {
 		description: 'optional (default is "L")',
 	},
 	width: {
-		options: ['XL', 'L', 'M', 'S', 'XS'],
+		options: ['100', 'XL', 'L', 'M', 'S', 'XS'],
 		control: { type: 'select' },
 		description: 'optional',
 	},
@@ -93,7 +93,7 @@ SkeletonParagraphStory.argTypes = {
 		description: 'optional (default is "M")',
 	},
 	width: {
-		options: ['XL', 'L', 'M', 'S', 'XS'],
+		options: ['100', 'XL', 'L', 'M', 'S', 'XS'],
 		control: { type: 'select' },
 		description: 'optional',
 	},