fix: panel: ensures there is no element when footer is not implemented

EightfoldAI · Oct 17, 2023 · 2d9680c · 2d9680c
1 parent e4f0359
commit 2d9680c
Show file tree

Hide file tree

Showing 4 changed files with 618 additions and 24 deletions.
diff --git 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
@@ -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
@@ -297,7 +297,7 @@ export const Panel = React.forwardRef<PanelRef, PanelProps>(
                     >
                       {getHeader()}
                       {getBody()}
-                      {getFooter()}
+                      {!!footer && getFooter()}
                     </div>
                   </FocusTrap>
                 </NoFormStyle>