@indico-data/design-system 2.36.4 → 2.37.0

package/lib/src/components/skeleton/Skeleton.d.ts

@@ -1,7 +1,7 @@
 type Props = {
     className?: string;
-    height?: number;
-    width?: number;
+    height?: number | string;
+    width?: number | string;
     isCircle?: boolean;
     isFullHeight?: boolean;
 };

package/lib/src/components/skeleton/Skeleton.stories.d.ts

@@ -4,6 +4,7 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Skeleton>;
 export declare const Default: Story;
+export declare const PercentageDimensions: Story;
 export declare const Circle: Story;
 export declare const Square: Story;
 export declare const Composition: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.36.4",
+  "version": "2.37.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/skeleton/Skeleton.stories.tsx

@@ -18,21 +18,23 @@ const meta: Meta = {
     },
     height: {
       control: 'number',
-      description: 'The height of the skeleton component',
+      description:
+        'The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%")',
       table: {
         category: 'Props',
         type: {
-          summary: 'number',
+          summary: 'number | string',
         },
       },
     },
     width: {
       control: 'number',
-      description: 'The width of the skeleton component',
+      description:
+        'The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%")',
       table: {
         category: 'Props',
         type: {
-          summary: 'number',
+          summary: 'number | string',
         },
       },
     },
@@ -78,6 +80,24 @@ export const Default: Story = {
   },
 };
 
+export const PercentageDimensions: Story = {
+  args: {
+    height: 20,
+    width: '60%',
+    isCircle: false,
+    isFullHeight: false,
+    className: 'custom-class',
+  },
+  argTypes: {
+    width: {
+      control: 'text',
+    },
+  },
+  render: (args) => {
+    return <Skeleton {...args} />;
+  },
+};
+
 export const Circle: Story = {
   args: {
     height: 50,

package/src/components/skeleton/Skeleton.tsx

@@ -1,15 +1,15 @@
 type Props = {
   className?: string;
-  height?: number;
-  width?: number;
+  height?: number | string;
+  width?: number | string;
   isCircle?: boolean;
   isFullHeight?: boolean;
 };
 
 export const Skeleton = ({ className, height, width, isCircle, isFullHeight, ...rest }: Props) => {
   const dynamicStyle = {
-    ...(height && { height: `${height}px` }),
-    ...(width && { width: `${width}px` }),
+    ...(height && { height: typeof height === 'number' ? `${height}px` : height }),
+    ...(width && { width: typeof width === 'number' ? `${width}px` : width }),
   };
 
   const circleClass = isCircle ? 'skeleton--circle' : '';