From 3688fec257f90a8fe4dbcad9bbd6de1770f7e5ec Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 24 Feb 2021 14:16:49 -0800
Subject: [PATCH] fix(DataTableSkeleton): fix support for visible headers
 (#7855)

* fix(DataTableSkeleton): fix support for visible headers

* chore(storybook): fix showHeader knob

* chore(tests): update snapshots
---
 .../__snapshots__/PublicAPI-test.js.snap      |  1 -
 .../DataTableSkeleton-story.js                | 37 ++++++++++---------
 .../DataTableSkeleton/DataTableSkeleton.js    | 10 ++++-
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index a070e1b045f2..13d6768580c9 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6394,7 +6394,6 @@ Map {
     "defaultProps": Object {
       "columnCount": 5,
       "compact": false,
-      "headers": Array [],
       "rowCount": 5,
       "showHeader": true,
       "showToolbar": true,
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
index bd8ea4dee28b..decae3539554 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
@@ -9,21 +9,19 @@
 
 import React from 'react';
 
-import { withKnobs, boolean, array } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import DataTableSkeleton from '../DataTableSkeleton';
 
+const headers = [
+  { key: 'Name' },
+  { key: 'Protocol' },
+  { key: 'Port' },
+  { key: 'Rule' },
+  { key: 'Attached Groups' },
+];
+
 const props = () => ({
-  headers: array(
-    'Optional table headers (headers)',
-    [
-      { key: 'name' },
-      { key: 'protocol' },
-      { key: 'port' },
-      { key: 'rule' },
-      { key: 'attached-groups' },
-    ],
-    ','
-  ),
+  showHeaders: boolean('Show table headers', true),
   zebra: boolean('Use zebra stripe (zebra)', false),
   compact: boolean('Compact variant (compact)', false),
   showHeader: boolean('Show the Table Header (showHeader)', true),
@@ -39,12 +37,15 @@ export default {
   },
 };
 
-export const Skeleton = () => (
-  <div style={{ width: '800px' }}>
-    <DataTableSkeleton {...props()} />
-    <br />
-  </div>
-);
+export const Skeleton = () => {
+  const { showHeaders } = props();
+  return (
+    <div style={{ width: '800px' }}>
+      <DataTableSkeleton {...props()} headers={showHeaders ? headers : null} />
+      <br />
+    </div>
+  );
+};
 
 Skeleton.storyName = 'default';
 
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
index 5eac50f49402..4ae9499bc474 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.js
@@ -13,6 +13,7 @@ import { settings } from 'carbon-components';
 const { prefix } = settings;
 
 const DataTableSkeleton = ({
+  headers,
   rowCount,
   columnCount,
   zebra,
@@ -67,7 +68,13 @@ const DataTableSkeleton = ({
           <tr>
             {columnsArray.map((i) => (
               <th key={i}>
-                <span></span>
+                {headers ? (
+                  <div className="bx--table-header-label">
+                    {headers[i]?.key}
+                  </div>
+                ) : (
+                  <span></span>
+                )}
               </th>
             ))}
           </tr>
@@ -131,7 +138,6 @@ DataTableSkeleton.defaultProps = {
   columnCount: 5,
   zebra: false,
   compact: false,
-  headers: [],
   showHeader: true,
   showToolbar: true,
 };