Merge pull request #374 from cjdev/fix-dialog-layout-content

DialogLayout now uses TopNav content

Author: nicolasfont

packages/visual-stack/src/layouts/DialogLayout/index.css

@@ -54,26 +54,6 @@
   fill: #fff;
 }
 
-.vs-dialog-layout-content {
-  position: relative;
-  margin: 0 auto;
-  z-index: 10;
-}
-
-.vs-dialog-layout-content p {
-  max-width: 580px;
-}
-
-.vs-dialog-layout-content-normal {
-  max-width: 800px;
-  padding: 48px 24px 24px;
-}
-
-.vs-dialog-layout-content-wide {
-  max-width: 100%;
-  padding: 48px 48px 48px;
-}
-
 .vs-dialog-layout-button-bar .vs-text-btn {
   color: #fff;
   opacity: 0.64;

packages/visual-stack/src/layouts/DialogLayout/index.js

@@ -34,23 +34,20 @@ export const DialogLayout = ({
   <div className={cn(`vs-dialog-layout`, className)} {...restProps}>
     <TopNav
       title={title}
-      actionChildren=<TopNavControls
-        onSubmit={onSubmit}
-        onCancel={onCancel}
-        submitButtonText={submitButtonText}
-        cancelButtonText={cancelButtonText}
-        disableSubmit={disableSubmit}
-        showSubmitButtonSpinner={showSubmitButtonSpinner}
-      />
-    />
-    <div
-      className={cn(
-        'vs-dialog-layout-content',
-        `vs-dialog-layout-content-${contentSize ? contentSize : 'normal'}`
-      )}
+      contentSize={contentSize}
+      actionChildren={
+        <TopNavControls
+          onSubmit={onSubmit}
+          onCancel={onCancel}
+          submitButtonText={submitButtonText}
+          cancelButtonText={cancelButtonText}
+          disableSubmit={disableSubmit}
+          showSubmitButtonSpinner={showSubmitButtonSpinner}
+        />
+      }
     >
       {children}
-    </div>
+    </TopNav>
   </div>
 );
 

packages/visual-stack/src/layouts/DialogLayout/tests/index.test.js

@@ -5,6 +5,8 @@ import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
 
+jest.mock('../../../components/CJLogo', () => () => <></>);
+
 describe('DialogLayout', () => {
   test('should render', () => {
     const component = mount(
@@ -151,24 +153,24 @@ describe('DialogLayout', () => {
   test('should have wide content when contentSize is wide', () => {
     const component = mount(<DialogLayout contentSize={'wide'} />);
 
-    const content = component.find('.vs-dialog-layout-content');
+    const content = component.find('.vs-topnav-content');
 
-    expect(content.hasClass('vs-dialog-layout-content-wide')).toBe(true);
+    expect(content.hasClass('vs-topnav-content-wide')).toBe(true);
   });
 
   test('should have normal content when contentSize is normal', () => {
     const component = mount(<DialogLayout contentSize={'normal'} />);
 
-    const content = component.find('.vs-dialog-layout-content');
+    const content = component.find('.vs-topnav-content');
 
-    expect(content.hasClass('vs-dialog-layout-content-normal')).toBe(true);
+    expect(content.hasClass('vs-topnav-content-normal')).toBe(true);
   });
 
   test('should have normal content when contentSize is not passed', () => {
     const component = mount(<DialogLayout />);
 
-    const content = component.find('.vs-dialog-layout-content');
+    const content = component.find('.vs-topnav-content');
 
-    expect(content.hasClass('vs-dialog-layout-content-normal')).toBe(true);
+    expect(content.hasClass('vs-topnav-content-normal')).toBe(true);
   });
 });