Changed panels to panes (#42)

Author: EranNL

.eslintrc

@@ -19,7 +19,8 @@
         "dist",
         "setupTests.ts",
         "babel.config.js",
-        "www"
+        "www",
+        "src/**/__tests__/*"
     ],
     "rules": {
         "comma-dangle": "off",

package-lock.json

@@ -23,6 +23,7 @@
         "@babel/preset-typescript": "^7.13.0",
         "@types/enzyme": "^3.10.8",
         "@types/enzyme-adapter-react-16": "^1.0.6",
+        "@types/jest": "^26.0.20",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^16.9.11",
         "@typescript-eslint/eslint-plugin": "^4.15.2",

package.json

@@ -16,7 +16,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 // Static properties are not given yet, when declaring the card const. Therefore, the error saying
-// that Card is missing above CardStatics  properties. These will defined after the card component
+// that Card is missing above CardStatics properties. These will defined after the card component
 // is defined.
 // @ts-ignore
 const Card: ForwardComponentWithStatics<HTMLDivElement, CardProps, CardStatics> = React.forwardRef((

src/components/Card/Card.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export interface PanelContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    vertical?: boolean;
+}
+
+const PanelContainer = React.forwardRef<HTMLDivElement, PanelContainerProps>((
+    {
+        children,
+        vertical
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'pane-container',
+            vertical && 'vertical'
+        )}
+    >
+        {children}
+    </div>
+));
+
+PanelContainer.displayName = 'PanelContainer';
+PanelContainer.propTypes = {
+    children: PropTypes.node,
+    vertical: PropTypes.bool
+}
+
+export default PanelContainer;

src/components/Panel/Container.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export type PaneContentProps = React.HTMLAttributes<HTMLDivElement>;
+
+const PaneContent = React.forwardRef<HTMLDivElement, PaneContentProps>((
+    {
+        children,
+        className
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'pane-content',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+PaneContent.displayName = 'PaneContent';
+PaneContent.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string
+}
+
+export default PaneContent;

src/components/Panel/Content.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import PaneContent from './Content';
+import { ForwardComponentWithStatics } from '../utils';
+import { PaneContainer } from './index';
+
+export type PaneStatics = {
+    Content: typeof PaneContent;
+    Container: typeof PaneContainer;
+}
+
+export interface PaneProps extends React.HTMLAttributes<HTMLDivElement> {
+    horizontal?: boolean;
+}
+
+// Static properties are not given yet, when declaring the card const. Therefore, the error saying
+// that Pane is missing above PaneStatics properties. These will defined after the pane component
+// is defined.
+// @ts-ignore
+const Pane: ForwardComponentWithStatics<HTMLDivElement, PaneProps, PaneStatics> = React.forwardRef<HTMLDivElement, PaneProps>((
+    {
+        children,
+        className,
+        horizontal
+    },
+    ref
+): React.ReactElement => (
+    <div
+        ref={ref}
+        className={clsx(
+            'pane',
+            horizontal && 'horizontal',
+            className
+        )}
+    >
+        {children}
+    </div>
+));
+
+Pane.displayName = 'Pane';
+Pane.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    horizontal: PropTypes.bool
+}
+
+Pane.Content = PaneContent;
+Pane.Container = PaneContainer;
+
+export default Pane;

src/components/Panel/Pane.tsx

@@ -0,0 +1,61 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import Pane from '../Pane';
+import PaneContainer from '../Container';
+import PaneContent from '../Content';
+
+describe('Pane test', () => {
+    it('should render pane container', () => {
+        const container = shallow(
+            <PaneContainer>
+                Hello world
+            </PaneContainer>
+        );
+
+        expect(container.find('.pane-container').length).toBe(1);
+    });
+
+    it('should render vertical pane container', () => {
+        const container = shallow(
+            <PaneContainer vertical>
+                Hello world
+            </PaneContainer>
+        );
+
+        expect(container.find('.pane-container.vertical').length).toBe(1);
+    });
+
+    it('should render pane', () => {
+        const container = shallow(
+            <Pane>
+                Hello world
+            </Pane>
+        );
+
+        expect(container.find('.pane').length).toBe(1);
+    });
+
+    it('should render horizontal pane', () => {
+        const container = shallow(
+            <Pane horizontal>
+                Hello world
+            </Pane>
+        );
+
+        expect(container.find('.pane.horizontal').length).toBe(1);
+    });
+    it('should render pane content', () => {
+        const container = mount(
+            <div>
+                <PaneContent>
+                    Hello world
+                </PaneContent>
+                <Pane.Content>
+                    Hello world
+                </Pane.Content>
+            </div>
+        );
+
+        expect(container.find('.pane-content').length).toBe(2);
+    });
+});

src/components/Panel/Panel.tsx

@@ -1,2 +1,8 @@
-export { default as Panel } from './Panel';
-export type { PanelProps } from './Panel'
+export { default as PaneContainer} from './Container';
+export type { PanelContainerProps } from './Container';
+
+export { default as PaneContent } from './Content';
+export type { PaneContentProps } from './Content';
+
+export { default as Panel } from './Pane';
+export type { PaneProps } from './Pane'

src/components/Panel/__tests__/Pane.test.tsx

@@ -1,5 +1,5 @@
 /**
- * 1. Colors
+ * Colors
  */
 $colors: (
     'red': (
@@ -147,7 +147,7 @@ $colors: (
 }
 
 /**
- * 2. Base
+ * Base
  */
 $base-background-color: color('gray', 'background') !default;
 $base-body-gutter: 0 !default;
@@ -206,18 +206,7 @@ $success-color-active: color('green', 'active') !default;
 }
 
 /**
- * 3. Panel
- */
-$panel-background: #fff !default;
-$panel-gutter: 2rem !default;
-
-:root {
-    --panel-background: #{$panel-background};
-    --panel-gutter: #{$panel-gutter}
-}
-
-/**
- * 4. Page
+ * Page
  */
 $page-gutter: 2rem !default;
 
@@ -226,7 +215,7 @@ $page-gutter: 2rem !default;
 }
 
 /**
- * 5. Button
+ * Button
  */
 $button-padding: 1rem !default;
 $button-font-weight: 600 !default;
@@ -277,7 +266,7 @@ $danger-button-ghost-active-background: color('red', 'background-hover') !defaul
 }
 
 /**
- * 6. Cards
+ * Cards
  */
 $card-padding: 1.5rem !default;
 $card-background: #fff !default;
@@ -288,7 +277,7 @@ $card-background: #fff !default;
 }
 
 /**
- * 7. Form fields
+ * Form fields
  */
 $form-field-padding: 1rem !default;
 $form-field-font-weight: 500 !default;
@@ -301,7 +290,7 @@ $form-field-font-size: 1rem !default;
 }
 
 /**
- * 8. Icons
+ * Icons
  */
 $iconPath: '../icons' !default;
 $icons: (
@@ -556,7 +545,7 @@ $icons: (
 }
 
 /**
- * 8. Form fields
+ * Form fields
  */
 $form-field-padding: 1rem !default;
 $form-field-font-weight: 500 !default;

src/components/Panel/__tests__/Panel.test.tsx

@@ -1,7 +1,27 @@
-.panel {
+.pane-container {
+    display: flex;
+
+    &.vertical {
+        flex-direction: column;
+    }
+}
+
+.pane {
     background: var(--panel-background);
+    display: flex;
+    flex-direction: column;
+    flex: 1 auto;
+    position: relative;
+
+    &.horizontal {
+        flex-direction: row;
+    }
+
+    .pane-content {
+        padding: var(--base-gutter);
+    }
 
-    &.panel-spaced {
-        padding: var(--panel-gutter);
+    .pane-header {
+        padding: var(--base-gutter);
     }
 }