From 2d9680ceb6237891888085e6be9d8113f9a127f3 Mon Sep 17 00:00:00 2001
From: Dylan Kilgore <dkilgore@eightfold.ai>
Date: Tue, 17 Oct 2023 10:02:34 -0700
Subject: [PATCH] fix: panel: ensures there is no element when footer is not
 implemented

---
 src/components/Panel/Panel.stories.tsx        |  41 +-
 src/components/Panel/Panel.test.tsx           |  23 +-
 src/components/Panel/Panel.tsx                |   2 +-
 .../Panel/__snapshots__/Panel.test.tsx.snap   | 576 +++++++++++++++++-
 4 files changed, 618 insertions(+), 24 deletions(-)

diff --git a/src/components/Panel/Panel.stories.tsx b/src/components/Panel/Panel.stories.tsx
index c1343e841..859ee0d96 100644
--- a/src/components/Panel/Panel.stories.tsx
+++ b/src/components/Panel/Panel.stories.tsx
@@ -3,8 +3,8 @@ import { Stories } from '@storybook/addon-docs';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { Panel, PanelSize } from './';
 import { PanelHeader } from './PanelHeader';
+import { Button, ButtonVariant } from '../Button';
 import { IconName } from '../Icon';
-import { PrimaryButton } from '../Button';
 
 export default {
   title: 'Panel',
@@ -107,12 +107,20 @@ const Panel_Story: ComponentStory<typeof Panel> = (args) => {
   const [visible, setVisible] = useState<boolean>(false);
   return (
     <>
-      <PrimaryButton text={'Open panel'} onClick={() => setVisible(true)} />
+      <Button
+        onClick={() => setVisible(true)}
+        text={'Open panel'}
+        variant={ButtonVariant.Primary}
+      />
       <Panel
         {...args}
         footer={
           <div>
-            <PrimaryButton text={'Close'} onClick={() => setVisible(false)} />
+            <Button
+              onClick={() => setVisible(false)}
+              text={'Close'}
+              variant={ButtonVariant.Primary}
+            />
           </div>
         }
         visible={visible}
@@ -126,23 +134,25 @@ const Stacked_Story: ComponentStory<typeof Panel> = (args) => {
   const [visible, setVisible] = useState<Record<string, boolean>>({});
   return (
     <>
-      <PrimaryButton
-        text={'Open first panel'}
+      <Button
         onClick={() =>
           setVisible({
             simple: true,
           })
         }
+        text={'Open first panel'}
+        variant={ButtonVariant.Primary}
       />
       <Panel {...args} visible={visible.simple} onClose={() => setVisible({})}>
-        <PrimaryButton
-          text={'Open second panel'}
+        <Button
           onClick={() =>
             setVisible({
               ...visible,
               child: true,
             })
           }
+          text={'Open second panel'}
+          variant={ButtonVariant.Primary}
         />
         <Panel
           {...args}
@@ -155,14 +165,15 @@ const Stacked_Story: ComponentStory<typeof Panel> = (args) => {
             })
           }
         >
-          <PrimaryButton
-            text={'Open third panel'}
+          <Button
             onClick={() =>
               setVisible({
                 ...visible,
                 nextChild: true,
               })
             }
+            text={'Open third panel'}
+            variant={ButtonVariant.Primary}
           />
           <Panel
             {...args}
@@ -185,12 +196,20 @@ const Panel_Header_Story: ComponentStory<typeof Panel> = (args) => {
   const [visible, setVisible] = useState<boolean>(false);
   return (
     <>
-      <PrimaryButton text={'Open panel'} onClick={() => setVisible(true)} />
+      <Button
+        onClick={() => setVisible(true)}
+        text={'Open panel'}
+        variant={ButtonVariant.Primary}
+      />
       <Panel
         {...args}
         footer={
           <div>
-            <PrimaryButton text={'Close'} onClick={() => setVisible(false)} />
+            <Button
+              onClick={() => setVisible(false)}
+              text={'Close'}
+              variant={ButtonVariant.Primary}
+            />
           </div>
         }
         visible={visible}
diff --git a/src/components/Panel/Panel.test.tsx b/src/components/Panel/Panel.test.tsx
index d8f88154f..8fabb649e 100644
--- a/src/components/Panel/Panel.test.tsx
+++ b/src/components/Panel/Panel.test.tsx
@@ -3,6 +3,7 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import MatchMediaMock from 'jest-matchmedia-mock';
 import { Panel } from './';
+import { Button, ButtonVariant } from '../Button';
 import { IconName } from '../Icon';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -11,8 +12,13 @@ let matchMedia: any;
 
 describe('Panel', () => {
   let wrapper: ReactWrapper;
-  const body = 'This is the panel body';
-  const title = 'This is the title';
+  const body: string = 'This is the panel body';
+  const title: string = 'This is the title';
+  const footer: JSX.Element = (
+    <div>
+      <Button text={'Close'} variant={ButtonVariant.Primary} />
+    </div>
+  );
 
   beforeAll(() => {
     matchMedia = new MatchMediaMock();
@@ -23,7 +29,7 @@ describe('Panel', () => {
 
   beforeEach(() => {
     wrapper = mount(
-      <Panel visible={false}>
+      <Panel footer={footer} visible={false}>
         <div>{body}</div>
       </Panel>
     );
@@ -127,4 +133,15 @@ describe('Panel', () => {
     });
     expect(wrapper.find('.modeless').length).toBeTruthy();
   });
+
+  test('Panel footer', () => {
+    wrapper.setProps({
+      visible: true,
+      title,
+      body,
+      footer,
+    });
+    expect(wrapper.find('.footer')).toBeTruthy();
+    expect(wrapper.find('.button-primary').text()).toBe('Close');
+  });
 });
diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx
index 641a84c15..3e9c52784 100644
--- a/src/components/Panel/Panel.tsx
+++ b/src/components/Panel/Panel.tsx
@@ -297,7 +297,7 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
                     >
                       {getHeader()}
                       {getBody()}
-                      {getFooter()}
+                      {!!footer && getFooter()}
                     </div>
                   </FocusTrap>
                 </NoFormStyle>
diff --git a/src/components/Panel/__snapshots__/Panel.test.tsx.snap b/src/components/Panel/__snapshots__/Panel.test.tsx.snap
index 187f7b3b7..5e2f09096 100644
--- a/src/components/Panel/__snapshots__/Panel.test.tsx.snap
+++ b/src/components/Panel/__snapshots__/Panel.test.tsx.snap
@@ -306,7 +306,69 @@ LoadedCheerio {
                 "attribs": Object {
                   "class": "footer",
                 },
-                "children": Array [],
+                "children": Array [
+                  Node {
+                    "attribs": Object {},
+                    "children": Array [
+                      Node {
+                        "attribs": Object {
+                          "aria-disabled": "false",
+                          "class": "button button-primary button-medium pill-shape",
+                        },
+                        "children": Array [
+                          Node {
+                            "attribs": Object {
+                              "class": "button-text-medium",
+                            },
+                            "children": Array [
+                              Node {
+                                "data": "Close",
+                                "next": null,
+                                "parent": [Circular],
+                                "prev": null,
+                                "type": "text",
+                              },
+                            ],
+                            "name": "span",
+                            "namespace": "http://www.w3.org/1999/xhtml",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "tag",
+                            "x-attribsNamespace": Object {
+                              "class": undefined,
+                            },
+                            "x-attribsPrefix": Object {
+                              "class": undefined,
+                            },
+                          },
+                        ],
+                        "name": "button",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "aria-disabled": undefined,
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "aria-disabled": undefined,
+                          "class": undefined,
+                        },
+                      },
+                    ],
+                    "name": "div",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
                 "name": "div",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
@@ -372,7 +434,69 @@ LoadedCheerio {
               "attribs": Object {
                 "class": "footer",
               },
-              "children": Array [],
+              "children": Array [
+                Node {
+                  "attribs": Object {},
+                  "children": Array [
+                    Node {
+                      "attribs": Object {
+                        "aria-disabled": "false",
+                        "class": "button button-primary button-medium pill-shape",
+                      },
+                      "children": Array [
+                        Node {
+                          "attribs": Object {
+                            "class": "button-text-medium",
+                          },
+                          "children": Array [
+                            Node {
+                              "data": "Close",
+                              "next": null,
+                              "parent": [Circular],
+                              "prev": null,
+                              "type": "text",
+                            },
+                          ],
+                          "name": "span",
+                          "namespace": "http://www.w3.org/1999/xhtml",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "tag",
+                          "x-attribsNamespace": Object {
+                            "class": undefined,
+                          },
+                          "x-attribsPrefix": Object {
+                            "class": undefined,
+                          },
+                        },
+                      ],
+                      "name": "button",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "aria-disabled": undefined,
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "aria-disabled": undefined,
+                        "class": undefined,
+                      },
+                    },
+                  ],
+                  "name": "div",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
@@ -670,7 +794,69 @@ LoadedCheerio {
             "attribs": Object {
               "class": "footer",
             },
-            "children": Array [],
+            "children": Array [
+              Node {
+                "attribs": Object {},
+                "children": Array [
+                  Node {
+                    "attribs": Object {
+                      "aria-disabled": "false",
+                      "class": "button button-primary button-medium pill-shape",
+                    },
+                    "children": Array [
+                      Node {
+                        "attribs": Object {
+                          "class": "button-text-medium",
+                        },
+                        "children": Array [
+                          Node {
+                            "data": "Close",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "text",
+                          },
+                        ],
+                        "name": "span",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "class": undefined,
+                        },
+                      },
+                    ],
+                    "name": "button",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "aria-disabled": undefined,
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "aria-disabled": undefined,
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+            ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
@@ -1424,7 +1610,69 @@ LoadedCheerio {
                 "attribs": Object {
                   "class": "footer",
                 },
-                "children": Array [],
+                "children": Array [
+                  Node {
+                    "attribs": Object {},
+                    "children": Array [
+                      Node {
+                        "attribs": Object {
+                          "aria-disabled": "false",
+                          "class": "button button-primary button-medium pill-shape",
+                        },
+                        "children": Array [
+                          Node {
+                            "attribs": Object {
+                              "class": "button-text-medium",
+                            },
+                            "children": Array [
+                              Node {
+                                "data": "Close",
+                                "next": null,
+                                "parent": [Circular],
+                                "prev": null,
+                                "type": "text",
+                              },
+                            ],
+                            "name": "span",
+                            "namespace": "http://www.w3.org/1999/xhtml",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "tag",
+                            "x-attribsNamespace": Object {
+                              "class": undefined,
+                            },
+                            "x-attribsPrefix": Object {
+                              "class": undefined,
+                            },
+                          },
+                        ],
+                        "name": "button",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "aria-disabled": undefined,
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "aria-disabled": undefined,
+                          "class": undefined,
+                        },
+                      },
+                    ],
+                    "name": "div",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
                 "name": "div",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
@@ -1490,7 +1738,69 @@ LoadedCheerio {
               "attribs": Object {
                 "class": "footer",
               },
-              "children": Array [],
+              "children": Array [
+                Node {
+                  "attribs": Object {},
+                  "children": Array [
+                    Node {
+                      "attribs": Object {
+                        "aria-disabled": "false",
+                        "class": "button button-primary button-medium pill-shape",
+                      },
+                      "children": Array [
+                        Node {
+                          "attribs": Object {
+                            "class": "button-text-medium",
+                          },
+                          "children": Array [
+                            Node {
+                              "data": "Close",
+                              "next": null,
+                              "parent": [Circular],
+                              "prev": null,
+                              "type": "text",
+                            },
+                          ],
+                          "name": "span",
+                          "namespace": "http://www.w3.org/1999/xhtml",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "tag",
+                          "x-attribsNamespace": Object {
+                            "class": undefined,
+                          },
+                          "x-attribsPrefix": Object {
+                            "class": undefined,
+                          },
+                        },
+                      ],
+                      "name": "button",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "aria-disabled": undefined,
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "aria-disabled": undefined,
+                        "class": undefined,
+                      },
+                    },
+                  ],
+                  "name": "div",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
@@ -1788,7 +2098,69 @@ LoadedCheerio {
             "attribs": Object {
               "class": "footer",
             },
-            "children": Array [],
+            "children": Array [
+              Node {
+                "attribs": Object {},
+                "children": Array [
+                  Node {
+                    "attribs": Object {
+                      "aria-disabled": "false",
+                      "class": "button button-primary button-medium pill-shape",
+                    },
+                    "children": Array [
+                      Node {
+                        "attribs": Object {
+                          "class": "button-text-medium",
+                        },
+                        "children": Array [
+                          Node {
+                            "data": "Close",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "text",
+                          },
+                        ],
+                        "name": "span",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "class": undefined,
+                        },
+                      },
+                    ],
+                    "name": "button",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "aria-disabled": undefined,
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "aria-disabled": undefined,
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+            ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,
@@ -2542,7 +2914,69 @@ LoadedCheerio {
                 "attribs": Object {
                   "class": "footer",
                 },
-                "children": Array [],
+                "children": Array [
+                  Node {
+                    "attribs": Object {},
+                    "children": Array [
+                      Node {
+                        "attribs": Object {
+                          "aria-disabled": "false",
+                          "class": "button button-primary button-medium pill-shape",
+                        },
+                        "children": Array [
+                          Node {
+                            "attribs": Object {
+                              "class": "button-text-medium",
+                            },
+                            "children": Array [
+                              Node {
+                                "data": "Close",
+                                "next": null,
+                                "parent": [Circular],
+                                "prev": null,
+                                "type": "text",
+                              },
+                            ],
+                            "name": "span",
+                            "namespace": "http://www.w3.org/1999/xhtml",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "tag",
+                            "x-attribsNamespace": Object {
+                              "class": undefined,
+                            },
+                            "x-attribsPrefix": Object {
+                              "class": undefined,
+                            },
+                          },
+                        ],
+                        "name": "button",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "aria-disabled": undefined,
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "aria-disabled": undefined,
+                          "class": undefined,
+                        },
+                      },
+                    ],
+                    "name": "div",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {},
+                    "x-attribsPrefix": Object {},
+                  },
+                ],
                 "name": "div",
                 "namespace": "http://www.w3.org/1999/xhtml",
                 "next": null,
@@ -2608,7 +3042,69 @@ LoadedCheerio {
               "attribs": Object {
                 "class": "footer",
               },
-              "children": Array [],
+              "children": Array [
+                Node {
+                  "attribs": Object {},
+                  "children": Array [
+                    Node {
+                      "attribs": Object {
+                        "aria-disabled": "false",
+                        "class": "button button-primary button-medium pill-shape",
+                      },
+                      "children": Array [
+                        Node {
+                          "attribs": Object {
+                            "class": "button-text-medium",
+                          },
+                          "children": Array [
+                            Node {
+                              "data": "Close",
+                              "next": null,
+                              "parent": [Circular],
+                              "prev": null,
+                              "type": "text",
+                            },
+                          ],
+                          "name": "span",
+                          "namespace": "http://www.w3.org/1999/xhtml",
+                          "next": null,
+                          "parent": [Circular],
+                          "prev": null,
+                          "type": "tag",
+                          "x-attribsNamespace": Object {
+                            "class": undefined,
+                          },
+                          "x-attribsPrefix": Object {
+                            "class": undefined,
+                          },
+                        },
+                      ],
+                      "name": "button",
+                      "namespace": "http://www.w3.org/1999/xhtml",
+                      "next": null,
+                      "parent": [Circular],
+                      "prev": null,
+                      "type": "tag",
+                      "x-attribsNamespace": Object {
+                        "aria-disabled": undefined,
+                        "class": undefined,
+                      },
+                      "x-attribsPrefix": Object {
+                        "aria-disabled": undefined,
+                        "class": undefined,
+                      },
+                    },
+                  ],
+                  "name": "div",
+                  "namespace": "http://www.w3.org/1999/xhtml",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "tag",
+                  "x-attribsNamespace": Object {},
+                  "x-attribsPrefix": Object {},
+                },
+              ],
               "name": "div",
               "namespace": "http://www.w3.org/1999/xhtml",
               "next": null,
@@ -2906,7 +3402,69 @@ LoadedCheerio {
             "attribs": Object {
               "class": "footer",
             },
-            "children": Array [],
+            "children": Array [
+              Node {
+                "attribs": Object {},
+                "children": Array [
+                  Node {
+                    "attribs": Object {
+                      "aria-disabled": "false",
+                      "class": "button button-primary button-medium pill-shape",
+                    },
+                    "children": Array [
+                      Node {
+                        "attribs": Object {
+                          "class": "button-text-medium",
+                        },
+                        "children": Array [
+                          Node {
+                            "data": "Close",
+                            "next": null,
+                            "parent": [Circular],
+                            "prev": null,
+                            "type": "text",
+                          },
+                        ],
+                        "name": "span",
+                        "namespace": "http://www.w3.org/1999/xhtml",
+                        "next": null,
+                        "parent": [Circular],
+                        "prev": null,
+                        "type": "tag",
+                        "x-attribsNamespace": Object {
+                          "class": undefined,
+                        },
+                        "x-attribsPrefix": Object {
+                          "class": undefined,
+                        },
+                      },
+                    ],
+                    "name": "button",
+                    "namespace": "http://www.w3.org/1999/xhtml",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "tag",
+                    "x-attribsNamespace": Object {
+                      "aria-disabled": undefined,
+                      "class": undefined,
+                    },
+                    "x-attribsPrefix": Object {
+                      "aria-disabled": undefined,
+                      "class": undefined,
+                    },
+                  },
+                ],
+                "name": "div",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "tag",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+            ],
             "name": "div",
             "namespace": "http://www.w3.org/1999/xhtml",
             "next": null,