fix: allow skeleton qa override (#651)

Co-authored-by: Andrey Yamanov <[email protected]>

Author: vasilev-alex

.changeset/flat-hounds-kick.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Pass props to the skeleton layout root.

src/components/content/Skeleton/Skeleton.stories.tsx

@@ -19,6 +19,7 @@ const Template = (args) => {
 export const Page = Template.bind({});
 Page.args = {
   layout: 'page',
+  qa: 'CustomSkeleton',
 };
 
 export const Topbar = Template.bind({});

src/components/content/Skeleton/Skeleton.tsx

@@ -1,13 +1,20 @@
+import { ReactNode } from 'react';
+
 import { BaseProps, ContainerStyleProps } from '../../../tasty';
 import { Flow } from '../../layout/Flow';
 import { CubeGridProps, Grid } from '../../layout/Grid';
 import { Space } from '../../layout/Space';
 import { CubePlaceholderProps, Placeholder } from '../Placeholder/Placeholder';
 
 const LAYOUT_MAP = {
-  page({ lines, children, isStatic = false, ...props }: CubeSkeletonProps) {
+  page({
+    lines,
+    children,
+    isStatic = false,
+    rootProps,
+  }: CubeSkeletonLayoutProps) {
     return (
-      <Flow gap="4x" {...props}>
+      <Flow gap="4x" {...rootProps}>
         <Space placeContent="space-between">
           <Placeholder isStatic={isStatic} width="100px 25% 300px" />
           <Placeholder isStatic={isStatic} width="50px 10% 150px" />
@@ -21,25 +28,30 @@ const LAYOUT_MAP = {
       </Flow>
     );
   },
-  content({ children, lines, isStatic = false, ...props }: CubeSkeletonProps) {
+  content({
+    children,
+    lines,
+    isStatic = false,
+    rootProps,
+  }: CubeSkeletonLayoutProps) {
     return (
-      <Flow gap="2x" {...props}>
+      <Flow gap="2x" {...rootProps}>
         {children ||
           Array(lines || 5)
             .fill(0)
             .map((item, i) => <Placeholder key={i} isStatic={isStatic} />)}
       </Flow>
     );
   },
-  topbar({ isStatic = false, ...props }: CubeSkeletonProps) {
+  topbar({ isStatic = false, rootProps }: CubeSkeletonLayoutProps) {
     return (
       <Space
         gap="4x"
         placeContent="space-between"
         height="6x"
         padding="1x"
         border="bottom"
-        {...props}
+        {...rootProps}
       >
         <Space>
           <Placeholder circle isStatic={isStatic} size="4x" />
@@ -53,9 +65,9 @@ const LAYOUT_MAP = {
       </Space>
     );
   },
-  menu({ lines, isStatic = false, ...props }: CubeSkeletonProps) {
+  menu({ lines, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {
     return (
-      <Flow gap="3.25x" {...props} padding="3x 1x">
+      <Flow gap="3.25x" padding="3x 1x" {...rootProps}>
         {Array(lines || 5)
           .fill(0)
           .map((item, i) => (
@@ -64,9 +76,9 @@ const LAYOUT_MAP = {
       </Flow>
     );
   },
-  stats({ cards, isStatic = false, ...props }: CubeSkeletonProps) {
+  stats({ cards, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {
     return (
-      <Space gap="4x" {...props}>
+      <Space gap="4x" {...rootProps}>
         {Array(cards || 3)
           .fill(0)
           .map((item, i) => (
@@ -87,10 +99,10 @@ const LAYOUT_MAP = {
     children,
     lines,
     isStatic = false,
-    ...props
-  }: CubeSkeletonProps) {
+    rootProps,
+  }: CubeSkeletonLayoutProps) {
     return (
-      <Flow gap="4x" {...props}>
+      <Flow gap="4x" {...rootProps}>
         <Space>
           {Array(tabs || 3)
             .fill(0)
@@ -107,16 +119,21 @@ const LAYOUT_MAP = {
       </Flow>
     );
   },
-  table({ rows, columns, isStatic = false, ...props }: CubeSkeletonProps) {
+  table({
+    rows,
+    columns,
+    isStatic = false,
+    rootProps,
+  }: CubeSkeletonLayoutProps) {
     columns = columns || 5;
     rows = rows || 5;
 
     return (
       <Grid
         columns={`repeat(${columns}, 1fr)`}
         gap="3x"
-        {...props}
         padding="1x 0"
+        {...rootProps}
       >
         {Array(rows)
           .fill(0)
@@ -136,7 +153,7 @@ const LAYOUT_MAP = {
       </Grid>
     );
   },
-  chart({ columns, isStatic = false, ...props }: CubeSkeletonProps) {
+  chart({ columns, isStatic = false, rootProps }: CubeSkeletonLayoutProps) {
     columns = columns || 12;
 
     const heightMap = [1, 4, 2, 5, 8, 9, 5, 3, 4, 2, 6, 7, 2];
@@ -148,7 +165,7 @@ const LAYOUT_MAP = {
         padding="1x 0"
         placeItems="end stretch"
         height="40x"
-        {...props}
+        {...rootProps}
       >
         {Array(columns)
           .fill(0)
@@ -168,15 +185,22 @@ const LAYOUT_MAP = {
 } as const;
 
 export interface CubeSkeletonProps
-  extends CubeGridProps,
-    CubePlaceholderProps,
-    BaseProps,
-    ContainerStyleProps {
+  extends CubeSkeletonRootProps,
+    Omit<CubeSkeletonLayoutProps, 'rootProps'> {
   /** The type of the layout */
   layout?: keyof typeof LAYOUT_MAP;
-  /** The number of columns for table layout */
+}
+
+export interface CubeSkeletonRootProps
+  extends Omit<CubeGridProps, 'columns' | 'rows'>,
+    CubePlaceholderProps,
+    BaseProps,
+    ContainerStyleProps {}
+
+export interface CubeSkeletonLayoutProps {
+  /** The number of columns for the table layout */
   columns?: number;
-  /** The number of rows for table layout */
+  /** The number of rows for the table layout */
   rows?: number;
   /** The number of placeholder lines */
   lines?: number;
@@ -186,14 +210,33 @@ export interface CubeSkeletonProps
   cards?: number;
   /** The static mode */
   isStatic?: boolean;
+  rootProps?: CubeSkeletonRootProps;
+  children?: ReactNode;
 }
 
-export function Skeleton({ layout, isStatic, ...props }: CubeSkeletonProps) {
+export function Skeleton({
+  layout,
+  isStatic,
+  columns,
+  rows,
+  lines,
+  tabs,
+  cards,
+  ...props
+}: CubeSkeletonProps) {
   layout = layout || 'page';
 
   return LAYOUT_MAP[layout] ? (
-    LAYOUT_MAP[layout]({ isStatic, ...props, qa: 'Skeleton' })
+    LAYOUT_MAP[layout]({
+      isStatic,
+      columns,
+      rows,
+      lines,
+      tabs,
+      cards,
+      rootProps: { qa: 'Skeleton', ...props },
+    })
   ) : (
-    <Placeholder {...props} />
+    <Placeholder qa="Skeleton" isStatic={isStatic} {...props} />
   );
 }