feat(DataTableSkeleton): 12513 - Add TS types for props (#13245)

* feat(DataTableSkeleton): 12513 - Add TS types for props * fix: yarn run format --------- Co-authored-by: Francine Lucca <[email protected]> Co-authored-by: Francine Lucca <[email protected]>
carbon-design-system · Mar 8, 2023 · 5f0172d · 5f0172d
1 parent 0c9b4fd
commit 5f0172d
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 5 deletions.
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js
@@ -20,7 +20,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Components/DataTable',
+  title: 'Components/DataTable/Skeleton',
   decorators: [withKnobs],
   component: DataTableSkeleton,
 };
@@ -34,3 +34,25 @@ export const Skeleton = () => {
     </div>
   );
 };
+
+export const Playground = (args) => {
+  return (
+    <div style={{ width: '800px' }}>
+      <DataTableSkeleton {...args} headers={headers} />
+      <br />
+    </div>
+  );
+};
+
+Playground.argTypes = {
+  headers: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+};
diff --git a/...ts/DataTableSkeleton/DataTableSkeleton.js → ...s/DataTableSkeleton/DataTableSkeleton.tsx b/...ts/DataTableSkeleton/DataTableSkeleton.js → ...s/DataTableSkeleton/DataTableSkeleton.tsx
@@ -10,6 +10,49 @@ import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
+export interface DataTableSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * Specify the number of columns that you want to render in the skeleton state
+   */
+  columnCount: number;
+
+  /**
+   * Optionally specify whether you want the Skeleton to be rendered as a
+   * compact DataTable
+   */
+  compact: boolean;
+
+  /**
+   * Optionally specify the displayed headers
+   */
+  headers?: [{ header: string; key: string }] | { header: string; key: string };
+
+  /**
+   * Specify the number of rows that you want to render in the skeleton state
+   */
+  rowCount: number;
+
+  /**
+   * Specify if the table header should be rendered as part of the skeleton.
+   */
+  showHeader: boolean;
+
+  /**
+   * Specify if the table toolbar should be rendered as part of the skeleton.
+   */
+  showToolbar: boolean;
+
+  /**
+   * Optionally specify whether you want the DataTable to be zebra striped
+   */
+  zebra: boolean;
+}
+
 const DataTableSkeleton = ({
   headers,
   rowCount,
@@ -48,8 +91,8 @@ const DataTableSkeleton = ({
     <div className={`${prefix}--skeleton ${prefix}--data-table-container`}>
       {showHeader ? (
         <div className={`${prefix}--data-table-header`}>
-          <div className={`${prefix}--data-table-header__title`}></div>
-          <div className={`${prefix}--data-table-header__description`}></div>
+          <div className={`${prefix}--data-table-header__title`} />
+          <div className={`${prefix}--data-table-header__description`} />
         </div>
       ) : null}
       {showToolbar ? (
@@ -58,7 +101,8 @@ const DataTableSkeleton = ({
           className={`${prefix}--table-toolbar`}>
           <div className={`${prefix}--toolbar-content`}>
             <span
-              className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}></span>
+              className={`${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm`}
+            />
           </div>
         </section>
       ) : null}
@@ -72,7 +116,7 @@ const DataTableSkeleton = ({
                     {headers[i]?.header}
                   </div>
                 ) : (
-                  <span></span>
+                  <span />
                 )}
               </th>
             ))}