Merge pull request #204 from lowdefy/blocks-antd-pagehcsf

feat(blocksAntd): pagehcsf examples
2025-02-23 14:39:32 +08:00 · 2020-11-23 16:27:19 +02:00 · 2020-11-23 16:27:19 +02:00 · f61753dc6f
commit f61753dc6f
parent 180a26eec0 98d15cf686
26 changed files with 2616 additions and 234 deletions
--- a/packages/blocksAntd/demo/Examples.js
+++ b/packages/blocksAntd/demo/Examples.js
@ -28,7 +28,7 @@ const logger = console.log;

 const Examples = ({ type, Component }) => {
  const [showYaml, toggelYaml] = useState(true);
-  // duplicate imported yaml to be mutabile
+  // duplicate imported yaml to be mutable
  const examples = JSON.parse(JSON.stringify(require(`./examples/${type}.yaml`)));
  const meta = require(`../src/blocks/${type}/${type}.json`);
  const values =
--- a/packages/blocksAntd/demo/examples/Drawer.yaml
+++ b/packages/blocksAntd/demo/examples/Drawer.yaml
@ -8,7 +8,7 @@
  type: Drawer
  properties:
    closable: false
- id: "properties.title"
+- id: "properties.mask"
  type: Drawer
  properties:
    mask: false
--- a/packages/blocksAntd/demo/examples/PageHCSF.yaml
+++ b/packages/blocksAntd/demo/examples/PageHCSF.yaml
@ -1,7 +1,138 @@
 - id: default
  type: PageHCSF
- id: properties.content
+- id: areas.content
+  type: PageHCSF
+  areas:
+    content:
+      blocks: []
+- id: areas.footer
+  type: PageHCSF
+  areas:
+    footer:
+      blocks: []
+- id: areas.header
+  type: PageHCSF
+  areas:
+    header:
+      blocks: []
+- id: areas.sider
+  type: PageHCSF
+  areas:
+    sider:
+      blocks: []
+- id: "properties.header.theme: light - dark is default"
  type: PageHCSF
  properties:
-    content: 
-      content: This is page content
+    header:
+      theme: light
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.header.color: #4432a8 "
+  type: PageHCSF
+  properties:
+    header:
+      color: "#4432a8"
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.sider.collapsed: true "
+  type: PageHCSF
+  properties:
+    sider:
+      collapsed: true
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.style: border: 5px solid blue"
+  type: PageHCSF
+  properties:
+    style:
+      border: 5px solid blue
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.content.style: border: 5px solid blue"
+  type: PageHCSF
+  properties:
+    content:
+      style:
+        border: 5px solid blue
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.header.style: border: 5px solid blue"
+  type: PageHCSF
+  properties:
+    header:
+      style:
+        border: 5px solid blue
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.footer.style: border: 5px solid blue"
+  type: PageHCSF
+  properties:
+    footer:
+      style:
+        border: 5px solid blue
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
+- id: "properties.sider.style: border: 5px solid blue"
+  type: PageHCSF
+  properties:
+    sider:
+      style:
+        border: 5px solid blue
+  areas:
+    content:
+      blocks: []
+    footer:
+      blocks: []
+    header:
+      blocks: []
+    sider:
+      blocks: []
--- a/packages/blocksAntd/src/blocks/Avatar/Avatar.js
+++ b/packages/blocksAntd/src/blocks/Avatar/Avatar.js
@ -19,7 +19,7 @@ import { blockDefaultProps } from '@lowdefy/block-tools';
 import { Avatar } from 'antd';
 import Icon from '../Icon/Icon';

-const AvatarBlock = ({ actions, blockId, methods, onClick, properties }) => (
+const AvatarBlock = ({ actions, blockId, methods, properties }) => (
  <Avatar
    id={blockId}
    alt={properties.alt}
@ -27,11 +27,11 @@ const AvatarBlock = ({ actions, blockId, methods, onClick, properties }) => (
    shape={properties.shape}
    size={properties.size}
    src={properties.src}
-    onClick={onClick || (() => methods.callAction({ action: 'onClick' }))}
+    onClick={() => methods.callAction({ action: 'onClick' })}
    className={methods.makeCssClass([
      {
        backgroundColor: !properties.src && properties.color,
-        cursor: (onClick || actions.onClick) && 'pointer',
+        cursor: actions.onClick && 'pointer',
      },
      properties.style,
    ])}
--- a/packages/blocksAntd/src/blocks/ConfirmModal/ConfirmModal.js
+++ b/packages/blocksAntd/src/blocks/ConfirmModal/ConfirmModal.js
@ -19,7 +19,7 @@ import { Modal } from 'antd';
 import { blockDefaultProps } from '@lowdefy/block-tools';
 import Icon from '../Icon/Icon';

-const ConfirmModal = ({ blockId, content, methods, onCancel, onOk, properties }) => {
+const ConfirmModal = ({ blockId, content, methods, properties }) => {
  useEffect(() => {
    methods.registerMethod('open', (args = {}) => {
      const additionalProps = {};
@ -28,6 +28,7 @@ const ConfirmModal = ({ blockId, content, methods, onCancel, onOk, properties })
          <Icon blockId={`${blockId}_icon`} properties={properties.icon} methods={methods} />
        );
      }
+      methods.callAction({ action: 'onOpen' });
      Modal[args.status || properties.status || 'confirm']({
        id: `${blockId}_confirm_modal`,
        title: properties.title,
@ -42,12 +43,18 @@ const ConfirmModal = ({ blockId, content, methods, onCancel, onOk, properties })
        maskClosable: properties.maskClosable || false,
        width: properties.width,
        zIndex: properties.zIndex,
-        onOk: onOk || (() => methods.callAction({ action: 'onOk' })),
-        onCancel: onCancel || (() => methods.callAction({ action: 'onCancel' })),
+        onOk: async () => {
+          await methods.callAction({ action: 'onOk' });
+          methods.callAction({ action: 'onClose' });
+        },
+        onCancel: async () => {
+          await methods.callAction({ action: 'onCancel' });
+          methods.callAction({ action: 'onClose' });
+        },
        ...additionalProps,
      });
    });
-  }, [methods.registerMethod]);
+  });
  return <div id={blockId} />;
 };

--- a/packages/blocksAntd/src/blocks/ConfirmModal/ConfirmModal.json
+++ b/packages/blocksAntd/src/blocks/ConfirmModal/ConfirmModal.json
@ -110,10 +110,20 @@
      "additionalProperties": false,
      "properties": {
        "onOk": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers actions when Ok button is clicked."
+        },
+        "onOpen": {
+          "type": "array",
+          "description": "Triggers actions when modal is opened."
        },
        "onCancel": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers actions when Cancel button is clicked."
+        },
+        "onClose": {
+          "type": "array",
+          "description": "Triggered after onOk or onCancel actions are completed."
        }
      }
    }
--- a/packages/blocksAntd/src/blocks/ControlledList/ControlledList.js
+++ b/packages/blocksAntd/src/blocks/ControlledList/ControlledList.js
@ -28,7 +28,7 @@ const ControlledListBlock = ({ blockId, properties, list, methods }) => {
    methods.registerMethod('removeItem', methods.removeItem);
    methods.registerMethod('moveItemDown', methods.moveItemDown);
    methods.registerMethod('moveItemUp', methods.moveItemUp);
-  }, []);
+  });
  const styles = {
    header: {
      display: 'flex',
--- a/packages/blocksAntd/src/blocks/Drawer/Drawer.js
+++ b/packages/blocksAntd/src/blocks/Drawer/Drawer.js
@ -19,14 +19,26 @@ import { Drawer } from 'antd';
 import { type } from '@lowdefy/helpers';
 import { blockDefaultProps } from '@lowdefy/block-tools';

-const DrawerBlock = ({ blockId, content, properties, methods, onClose }) => {
+const triggerSetOpen = ({ state, setOpen, methods }) => {
+  if (!state) {
+    methods.callAction({ action: 'onClose' });
+  }
+  if (state) {
+    methods.callAction({ action: 'onOpen' });
+  }
+  setOpen(state);
+};
+
+const DrawerBlock = ({ blockId, content, properties, methods }) => {
  const [openState, setOpen] = useState(false);
  useEffect(() => {
-    methods.registerMethod('toggleOpen', () => {
-      setOpen(!openState);
-    });
-    methods.registerMethod('setOpen', ({ open }) => setOpen(!!open));
-  }, [methods.registerMethod, setOpen]);
+    methods.registerMethod('toggleOpen', () =>
+      triggerSetOpen({ state: !openState, setOpen, methods })
+    );
+    methods.registerMethod('setOpen', ({ open }) =>
+      triggerSetOpen({ state: !!open, setOpen, methods })
+    );
+  });
  return (
    <Drawer
      id={blockId}
@ -41,13 +53,7 @@ const DrawerBlock = ({ blockId, content, properties, methods, onClose }) => {
      zIndex={properties.zIndex}
      placement={properties.placement}
      keyboard={properties.keyboard}
-      onClose={
-        onClose ||
-        (() => {
-          methods.callAction({ action: 'onClose' });
-          setOpen(false);
-        })
-      }
+      onClose={() => triggerSetOpen({ state: false, setOpen, methods })}
      drawerStyle={methods.makeCssClass(properties.drawerStyle, { styleObjectOnly: true })}
      headerStyle={methods.makeCssClass(properties.headerStyle, { styleObjectOnly: true })}
      bodyStyle={methods.makeCssClass(properties.bodyStyle, { styleObjectOnly: true })}
--- a/packages/blocksAntd/src/blocks/Drawer/Drawer.json
+++ b/packages/blocksAntd/src/blocks/Drawer/Drawer.json
@ -93,7 +93,12 @@
      "additionalProperties": false,
      "properties": {
        "onClose": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers actions when drawer is closed."
+        },
+        "onOpen": {
+          "type": "array",
+          "description": "Triggers actions when modal is opened."
        }
      }
    }
--- a/packages/blocksAntd/src/blocks/Message/Message.js
+++ b/packages/blocksAntd/src/blocks/Message/Message.js
@ -21,21 +21,21 @@ import { blockDefaultProps } from '@lowdefy/block-tools';

 import Icon from '../Icon/Icon';

-const MessageBlock = ({ blockId, properties, methods, onClose }) => {
+const MessageBlock = ({ blockId, properties, methods }) => {
  useEffect(() => {
    methods.registerMethod('open', (args = {}) => {
      message[args.status || properties.status || 'success']({
        id: `${blockId}_message`,
        content: args.content || properties.content || blockId,
        duration: type.isNone(args.duration) ? properties.duration : args.duration,
-        onClose: onClose || (() => methods.callAction({ action: 'onClose' })),
+        onClose: () => methods.callAction({ action: 'onClose' }),
        icon: properties.icon && (
          <Icon blockId={`${blockId}_icon`} properties={properties.icon} methods={methods} />
        ),
        className: methods.makeCssClass(properties.messageStyle),
      });
    });
-  }, [methods.registerMethod]);
+  });
  return <div id={blockId} />;
 };

--- a/packages/blocksAntd/src/blocks/Message/Message.json
+++ b/packages/blocksAntd/src/blocks/Message/Message.json
@ -62,7 +62,8 @@
      "additionalProperties": false,
      "properties": {
        "onClose": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers actions when message is closed."
        }
      }
    }
--- a/packages/blocksAntd/src/blocks/Modal/Modal.js
+++ b/packages/blocksAntd/src/blocks/Modal/Modal.js
@ -19,12 +19,26 @@ import { blockDefaultProps } from '@lowdefy/block-tools';
 import { get, type } from '@lowdefy/helpers';
 import { Modal } from 'antd';

+const triggerSetOpen = ({ state, setOpen, methods }) => {
+  if (!state) {
+    methods.callAction({ action: 'onClose' });
+  }
+  if (state) {
+    methods.callAction({ action: 'onOpen' });
+  }
+  setOpen(state);
+};
+
 const ModalBlock = ({ blockId, content, properties, actions, methods }) => {
  const [openState, setOpen] = useState(false);
  useEffect(() => {
-    methods.registerMethod('toggleOpen', () => setOpen(!openState));
-    methods.registerMethod('setOpen', ({ open }) => setOpen(!!open));
-  }, [methods.registerMethod, setOpen]);
+    methods.registerMethod('toggleOpen', () =>
+      triggerSetOpen({ state: !openState, setOpen, methods })
+    );
+    methods.registerMethod('setOpen', ({ open }) =>
+      triggerSetOpen({ state: !!open, setOpen, methods })
+    );
+  });
  const extraProps = {};
  if (content.footer) {
    extraProps.footer = content.footer();
@ -42,11 +56,11 @@ const ModalBlock = ({ blockId, content, properties, actions, methods }) => {
        onOk={async () => {
          await methods.callAction({ action: 'onOk' });
          // the visible should only close if actions finished successfully
-          setOpen(false);
+          triggerSetOpen({ state: false, setOpen, methods });
        }}
        onCancel={async () => {
          await methods.callAction({ action: 'onCancel' });
-          setOpen(false);
+          triggerSetOpen({ state: false, setOpen, methods });
        }}
        afterClose={() => methods.callAction({ action: 'afterClose' })}
        confirmLoading={get(actions, 'onOk.loading')}
--- a/packages/blocksAntd/src/blocks/Modal/Modal.json
+++ b/packages/blocksAntd/src/blocks/Modal/Modal.json
@ -92,10 +92,20 @@
        "additionalProperties": false,
        "properties": {
          "onOk": {
-            "type": "array"
+            "type": "array",
+            "description": "Triggers actions when Ok button is clicked."
+          },
+          "onOpen": {
+            "type": "array",
+            "description": "Triggers actions when modal is opened."
          },
          "onCancel": {
-            "type": "array"
+            "type": "array",
+            "description": "Triggers actions when Cancel button is clicked."
+          },
+          "onClose": {
+            "type": "array",
+            "description": "Triggers after onOk or onCancel is completed."
          }
        }
      }
--- a/packages/blocksAntd/src/blocks/Notification/Notification.js
+++ b/packages/blocksAntd/src/blocks/Notification/Notification.js
@ -21,7 +21,7 @@ import { type } from '@lowdefy/helpers';
 import Button from '../Button/Button';
 import Icon from '../Icon/Icon';

-const NotificationBlock = ({ blockId, properties, methods, onClose, onClick }) => {
+const NotificationBlock = ({ blockId, properties, methods }) => {
  useEffect(() => {
    methods.registerMethod('open', (args = {}) => {
      notification[args.status || properties.status || 'success']({
@ -47,13 +47,13 @@ const NotificationBlock = ({ blockId, properties, methods, onClose, onClick }) =
          />
        ),
        message: args.message || properties.message || blockId,
-        onClose: onClose || (() => methods.callAction({ action: 'onClose' })),
-        onClick: onClick || (() => methods.callAction({ action: 'onClick' })),
+        onClose: () => methods.callAction({ action: 'onClose' }),
+        onClick: () => methods.callAction({ action: 'onClick' }),
        placement: properties.placement,
        top: properties.top,
      });
    });
-  }, [methods.registerMethod]);
+  });
  return <div id={blockId} />;
 };

--- a/packages/blocksAntd/src/blocks/Notification/Notification.json
+++ b/packages/blocksAntd/src/blocks/Notification/Notification.json
@ -95,10 +95,12 @@
      "additionalProperties": false,
      "properties": {
        "onClose": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers actions when notification is closed."
        },
        "onClick": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers actions when notification is clicked."
        }
      }
    }
--- a/packages/blocksAntd/src/blocks/PageHCF/PageHCF.json
+++ b/packages/blocksAntd/src/blocks/PageHCF/PageHCF.json
@ -44,7 +44,7 @@
          "properties": {
            "style": {
              "type": "object",
-              "description": "Content css style object."
+              "description": "Footer css style object."
            }
          }
        },
--- a/packages/blocksAntd/src/blocks/PageHCSF/PageHCSF.js
+++ b/packages/blocksAntd/src/blocks/PageHCSF/PageHCSF.js
@ -67,6 +67,16 @@ const PageHCSF = ({ blockId, content, properties, methods }) => (
                      content={{
                        content: () => content.sider(),
                      }}
+                      rename={{
+                        actions: {
+                          onClose: 'onSiderClose',
+                          onOpen: 'onSiderOpen',
+                        },
+                        methods: {
+                          toggleOpen: 'toggleSiderOpen',
+                          onOpen: 'setSiderOpen',
+                        },
+                      }}
                    />
                  )}
                </>
--- a/packages/blocksAntd/src/blocks/PageHCSF/PageHCSF.json
+++ b/packages/blocksAntd/src/blocks/PageHCSF/PageHCSF.json
@ -1,6 +1,20 @@
 {
  "category": "context",
  "loading": false,
+  "test": {
+    "methods": [
+      {
+        "name": "toggleSiderOpen",
+        "args": {}
+      },
+      {
+        "name": "setSiderOpen",
+        "args": {
+          "open": true
+        }
+      }
+    ]
+  },
  "schema": {
    "properties": {
      "type": "object",
@ -28,19 +42,89 @@
        },
        "main": {
          "type": "object",
-          "description": "Main layout properties."
+          "description": "Main layout properties.",
+          "additionalProperties": false,
+          "properties": {
+            "style": {
+              "type": "object",
+              "description": "Main css style object."
+            }
+          }
        },
        "content": {
          "type": "object",
-          "description": "Content properties."
+          "description": "Content properties.",
+          "additionalProperties": false,
+          "properties": {
+            "style": {
+              "type": "object",
+              "description": "Content css style object."
+            }
+          }
        },
        "sider": {
          "type": "object",
-          "description": "Sider properties."
+          "description": "Sider properties.",
+          "additionalProperties": false,
+          "properties": {
+            "breakpoint": {
+              "type": "string",
+              "enum": ["xs", "sm", "md", "lg", "xl", "xxl"],
+              "description": "Breakpoints of the responsive layout"
+            },
+            "collapsed": {
+              "type": "boolean",
+              "description": "Set the current collapsed state"
+            },
+            "collapsedWidth": {
+              "type": "integer",
+              "description": "Width of the collapsed sidebar, by setting to 0 a special trigger will appear"
+            },
+            "collapsible": {
+              "type": "boolean",
+              "description": "Whether can be collapsed"
+            },
+            "color": {
+              "type": "string",
+              "description": "Sider color"
+            },
+            "defaultCollapsed": {
+              "type": "boolean",
+              "description": "Set the initial collapsed state"
+            },
+            "reverseArrow": {
+              "type": "boolean",
+              "description": "Direction of arrow, for a sider that expands from the right"
+            },
+            "theme": {
+              "type": "string",
+              "enum": ["light", "dark"],
+              "description": "Color theme of the sidebar"
+            },
+            "style": {
+              "type": "object",
+              "description": "Css style object to apply to sider."
+            },
+            "width": {
+              "type": ["string", "number"],
+              "description": "width of the sidebar"
+            },
+            "zeroWidthTriggerStyle": {
+              "type": "object",
+              "description": "Css style to applied to zero width trigger."
+            }
+          }
        },
        "footer": {
          "type": "object",
-          "description": "Footer properties."
+          "description": "Footer properties.",
+          "additionalProperties": false,
+          "properties": {
+            "style": {
+              "type": "object",
+              "description": "Footer css style object."
+            }
+          }
        },
        "style": {
          "type": "object",
@ -52,8 +136,13 @@
      "type": "object",
      "additionalProperties": false,
      "properties": {
-        "onCollapse": {
-          "type": "array"
+        "onSiderClose": {
+          "type": "array",
+          "description": "Triggers actions when sider is closed."
+        },
+        "onSiderOpen": {
+          "type": "array",
+          "description": "Triggers actions when sider is opened."
        },
        "onBreakpoint": {
          "type": "array"
--- a/packages/blocksAntd/src/blocks/Sider/Sider.js
+++ b/packages/blocksAntd/src/blocks/Sider/Sider.js
@ -14,17 +14,35 @@
  limitations under the License.
 */

-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Layout } from 'antd';
 import { blockDefaultProps } from '@lowdefy/block-tools';
+import { get } from '@lowdefy/helpers';

 const Sider = Layout.Sider;

-const SiderBlock = ({ blockId, properties, content, methods }) => {
-  const additionalProps = {};
-  if (properties.collapsed === true || properties.collapsed === false) {
-    additionalProps.collapsed = properties.collapsed;
+const triggerSetOpen = async ({ state, setOpen, methods, rename }) => {
+  if (!state) {
+    await methods.callAction({ action: get(rename, 'actions.onClose', { default: 'onClose' }) });
  }
+  if (state) {
+    await methods.callAction({ action: get(rename, 'actions.onOpen', { default: 'onOpen' }) });
+  }
+  setOpen(state);
+};
+
+const SiderBlock = ({ blockId, properties, content, methods, rename }) => {
+  const [openState, setOpen] = useState(!!properties.defaultCollapsed);
+  useEffect(() => {
+    methods.registerMethod(
+      get(rename, 'methods.toggleOpen', { default: 'toggleOpen' }),
+      async () => await triggerSetOpen({ state: !openState, setOpen, methods, rename })
+    );
+    methods.registerMethod(
+      get(rename, 'methods.setOpen', { default: 'setOpen' }),
+      async ({ open }) => await triggerSetOpen({ state: !!open, setOpen, methods, rename })
+    );
+  });
  return (
    <Sider
      id={blockId}
@ -33,21 +51,13 @@ const SiderBlock = ({ blockId, properties, content, methods }) => {
        properties.style,
      ])} hide-on-print`}
      breakpoint={properties.breakpoint}
-      collapsed={properties.collapsed}
+      collapsed={openState}
      collapsedWidth={properties.collapsedWidth}
      collapsible={properties.collapsible}
-      defaultCollapsed={properties.defaultCollapsed}
      reverseArrow={properties.reverseArrow}
      theme={properties.theme}
-      trigger={properties.trigger}
      width={properties.width}
-      onCollapse={() => methods.callAction({ action: 'onCollapse' })}
      onBreakpoint={() => methods.callAction({ action: 'onBreakpoint' })}
-      zeroWidthTriggerStyle={methods.makeCssClass(properties.zeroWidthTriggerStyle, {
-        styleObjectOnly: true,
-        react: true,
-      })}
-      {...additionalProps}
    >
      {content.content && content.content()}
    </Sider>
--- a/packages/blocksAntd/src/blocks/Sider/Sider.json
+++ b/packages/blocksAntd/src/blocks/Sider/Sider.json
@ -1,6 +1,20 @@
 {
  "category": "container",
  "loading": false,
+  "test": {
+    "methods": [
+      {
+        "name": "toggleOpen",
+        "args": {}
+      },
+      {
+        "name": "setOpen",
+        "args": {
+          "open": true
+        }
+      }
+    ]
+  },
  "schema": {
    "properties": {
      "type": "object",
@ -11,10 +25,6 @@
          "enum": ["xs", "sm", "md", "lg", "xl", "xxl"],
          "description": "Breakpoints of the responsive layout"
        },
-        "collapsed": {
-          "type": "boolean",
-          "description": "Set the current collapsed state"
-        },
        "collapsedWidth": {
          "type": "integer",
          "description": "Width of the collapsed sidebar, by setting to 0 a special trigger will appear"
@ -47,10 +57,6 @@
        "width": {
          "type": ["string", "number"],
          "description": "width of the sidebar"
-        },
-        "zeroWidthTriggerStyle": {
-          "type": "object",
-          "description": "Css style to applied to zero width trigger."
        }
      }
    },
@ -58,11 +64,17 @@
      "type": "object",
      "additionalProperties": false,
      "properties": {
-        "onCollapse": {
-          "type": "array"
+        "onClose": {
+          "type": "array",
+          "description": "Triggers actions when sider is closed."
+        },
+        "onOpen": {
+          "type": "array",
+          "description": "Triggers actions when sider is opened."
        },
        "onBreakpoint": {
-          "type": "array"
+          "type": "array",
+          "description": "Triggers on breakpoint change."
        }
      }
    }
--- a/packages/blocksAntd/src/blocks/UserAvatar/UserAvatar.js
+++ b/packages/blocksAntd/src/blocks/UserAvatar/UserAvatar.js
@ -36,7 +36,7 @@ const UserAvatar = ({ blockId, methods, properties, user }) => {
        params: { pageId: 'profile' },
      },
    ]);
-  }, []);
+  });
  if (properties.disabled) {
    return '';
  }
--- a/packages/blocksAntd/tests/PageHCSF.mock.test.js
+++ b/packages/blocksAntd/tests/PageHCSF.mock.test.js
@ -0,0 +1,38 @@
+/*
+  Copyright 2020 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { runMockRenderTests } from '@lowdefy/block-tools';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { Layout } from 'antd';
+
+Enzyme.configure({ adapter: new Adapter() });
+import PageHCSF from '../src/blocks/PageHCSF/PageHCSF';
+import examples from '../demo/examples/PageHCSF.yaml';
+import meta from '../src/blocks/PageHCSF/PageHCSF.json';
+
+jest.mock('antd/lib/layout', () => {
+  return jest.fn(() => 'mocked');
+});
+
+const mocks = [
+  {
+    name: 'default',
+    fn: Layout,
+  },
+];
+
+runMockRenderTests({ examples, Block: PageHCSF, meta, mocks, enzyme: { mount } });
--- a/packages/blocksAntd/tests/snapshots/ConfirmModal.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/ConfirmModal.test.js.snap
@ -190,7 +190,21 @@ Array [
        menus={Array []}
        methods={
          Object {
-            "callAction": [MockFunction],
+            "callAction": [MockFunction] {
+              "calls": Array [
+                Array [
+                  Object {
+                    "action": "onOpen",
+                  },
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
            "makeCssClass": [MockFunction] {
              "calls": Array [
                Array [
@ -889,7 +903,21 @@ Array [
        menus={Array []}
        methods={
          Object {
-            "callAction": [MockFunction],
+            "callAction": [MockFunction] {
+              "calls": Array [
+                Array [
+                  Object {
+                    "action": "onOpen",
+                  },
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
            "makeCssClass": [MockFunction] {
              "calls": Array [
                Array [
@ -1588,7 +1616,21 @@ Array [
        menus={Array []}
        methods={
          Object {
-            "callAction": [MockFunction],
+            "callAction": [MockFunction] {
+              "calls": Array [
+                Array [
+                  Object {
+                    "action": "onOpen",
+                  },
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
            "makeCssClass": [MockFunction] {
              "calls": Array [
                Array [
@ -2295,7 +2337,21 @@ Array [
        menus={Array []}
        methods={
          Object {
-            "callAction": [MockFunction],
+            "callAction": [MockFunction] {
+              "calls": Array [
+                Array [
+                  Object {
+                    "action": "onOpen",
+                  },
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
            "makeCssClass": [MockFunction] {
              "calls": Array [
                Array [
@ -2986,7 +3042,21 @@ Array [
        menus={Array []}
        methods={
          Object {
-            "callAction": [MockFunction],
+            "callAction": [MockFunction] {
+              "calls": Array [
+                Array [
+                  Object {
+                    "action": "onOpen",
+                  },
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            },
            "makeCssClass": [MockFunction] {
              "calls": Array [
                Array [
--- a/packages/blocksAntd/tests/snapshots/Drawer.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/Drawer.test.js.snap
@ -276,6 +276,75 @@ Array [
 ]
 `;

+exports[`Mock for method: {"name":"setOpen","args":{"open":true}} - properties.mask - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "children": <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>,
+      "closable": undefined,
+      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "getContainer": undefined,
+      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "height": undefined,
+      "id": "properties.mask",
+      "keyboard": undefined,
+      "mask": false,
+      "maskClosable": undefined,
+      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "onClose": [Function],
+      "placement": undefined,
+      "title": undefined,
+      "visible": false,
+      "width": undefined,
+      "zIndex": undefined,
+    },
+    Object {},
+  ],
+  Array [
+    Object {
+      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "children": <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>,
+      "closable": undefined,
+      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "getContainer": undefined,
+      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "height": undefined,
+      "id": "properties.mask",
+      "keyboard": undefined,
+      "mask": false,
+      "maskClosable": undefined,
+      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "onClose": [Function],
+      "placement": undefined,
+      "title": undefined,
+      "visible": true,
+      "width": undefined,
+      "zIndex": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
 exports[`Mock for method: {"name":"setOpen","args":{"open":true}} - properties.maskClosable: false - value[0] - default 1`] = `
 Array [
  Array [
@ -621,75 +690,6 @@ Array [
 ]
 `;

-exports[`Mock for method: {"name":"setOpen","args":{"open":true}} - properties.title - value[0] - default 2`] = `
-Array [
-  Array [
-    Object {
-      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "children": <div
-        style={
-          Object {
-            "border": "1px solid red",
-            "padding": 10,
-          }
-        }
-      >
-        content
-      </div>,
-      "closable": undefined,
-      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "getContainer": undefined,
-      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "height": undefined,
-      "id": "properties.title",
-      "keyboard": undefined,
-      "mask": false,
-      "maskClosable": undefined,
-      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "onClose": [Function],
-      "placement": undefined,
-      "title": undefined,
-      "visible": false,
-      "width": undefined,
-      "zIndex": undefined,
-    },
-    Object {},
-  ],
-  Array [
-    Object {
-      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "children": <div
-        style={
-          Object {
-            "border": "1px solid red",
-            "padding": 10,
-          }
-        }
-      >
-        content
-      </div>,
-      "closable": undefined,
-      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "getContainer": undefined,
-      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "height": undefined,
-      "id": "properties.title",
-      "keyboard": undefined,
-      "mask": false,
-      "maskClosable": undefined,
-      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "onClose": [Function],
-      "placement": undefined,
-      "title": undefined,
-      "visible": true,
-      "width": undefined,
-      "zIndex": undefined,
-    },
-    Object {},
-  ],
-]
-`;
-
 exports[`Mock for method: {"name":"setOpen","args":{"open":true}} - properties.width: 500 - value[0] - default 1`] = `
 Array [
  Array [
@ -1104,6 +1104,75 @@ Array [
 ]
 `;

+exports[`Mock for method: {"name":"toggleOpen","args":{}} - properties.mask - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "children": <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>,
+      "closable": undefined,
+      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "getContainer": undefined,
+      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "height": undefined,
+      "id": "properties.mask",
+      "keyboard": undefined,
+      "mask": false,
+      "maskClosable": undefined,
+      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "onClose": [Function],
+      "placement": undefined,
+      "title": undefined,
+      "visible": false,
+      "width": undefined,
+      "zIndex": undefined,
+    },
+    Object {},
+  ],
+  Array [
+    Object {
+      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "children": <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>,
+      "closable": undefined,
+      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "getContainer": undefined,
+      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "height": undefined,
+      "id": "properties.mask",
+      "keyboard": undefined,
+      "mask": false,
+      "maskClosable": undefined,
+      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "onClose": [Function],
+      "placement": undefined,
+      "title": undefined,
+      "visible": true,
+      "width": undefined,
+      "zIndex": undefined,
+    },
+    Object {},
+  ],
+]
+`;
+
 exports[`Mock for method: {"name":"toggleOpen","args":{}} - properties.maskClosable: false - value[0] - default 1`] = `
 Array [
  Array [
@ -1449,75 +1518,6 @@ Array [
 ]
 `;

-exports[`Mock for method: {"name":"toggleOpen","args":{}} - properties.title - value[0] - default 2`] = `
-Array [
-  Array [
-    Object {
-      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "children": <div
-        style={
-          Object {
-            "border": "1px solid red",
-            "padding": 10,
-          }
-        }
-      >
-        content
-      </div>,
-      "closable": undefined,
-      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "getContainer": undefined,
-      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "height": undefined,
-      "id": "properties.title",
-      "keyboard": undefined,
-      "mask": false,
-      "maskClosable": undefined,
-      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "onClose": [Function],
-      "placement": undefined,
-      "title": undefined,
-      "visible": false,
-      "width": undefined,
-      "zIndex": undefined,
-    },
-    Object {},
-  ],
-  Array [
-    Object {
-      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "children": <div
-        style={
-          Object {
-            "border": "1px solid red",
-            "padding": 10,
-          }
-        }
-      >
-        content
-      </div>,
-      "closable": undefined,
-      "drawerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "getContainer": undefined,
-      "headerStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "height": undefined,
-      "id": "properties.title",
-      "keyboard": undefined,
-      "mask": false,
-      "maskClosable": undefined,
-      "maskStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
-      "onClose": [Function],
-      "placement": undefined,
-      "title": undefined,
-      "visible": true,
-      "width": undefined,
-      "zIndex": undefined,
-    },
-    Object {},
-  ],
-]
-`;
-
 exports[`Mock for method: {"name":"toggleOpen","args":{}} - properties.width: 500 - value[0] - default 1`] = `
 Array [
  Array [
@ -1672,6 +1672,10 @@ exports[`Test Schema properties.keyboard: false 1`] = `true`;

 exports[`Test Schema properties.keyboard: false 2`] = `null`;

+exports[`Test Schema properties.mask 1`] = `true`;
+
+exports[`Test Schema properties.mask 2`] = `null`;
+
 exports[`Test Schema properties.maskClosable: false 1`] = `true`;

 exports[`Test Schema properties.maskClosable: false 2`] = `null`;
@ -1692,10 +1696,6 @@ exports[`Test Schema properties.title 1`] = `true`;

 exports[`Test Schema properties.title 2`] = `null`;

-exports[`Test Schema properties.title 3`] = `true`;
-
-exports[`Test Schema properties.title 4`] = `null`;
-
 exports[`Test Schema properties.width: 500 1`] = `true`;

 exports[`Test Schema properties.width: 500 2`] = `null`;
--- a/packages/blocksAntd/tests/snapshots/PageHCSF.mock.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/PageHCSF.mock.test.js.snap
--- a/packages/blocksAntd/tests/snapshots/PageHCSF.test.js.snap
+++ b/packages/blocksAntd/tests/snapshots/PageHCSF.test.js.snap
@ -1,5 +1,174 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`Render areas.content - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="areas.content"
+>
+  <section
+    className="ant-layout {}"
+    id="areas.content_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="areas.content_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+  </section>
+</section>
+`;
+
+exports[`Render areas.footer - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="areas.footer"
+>
+  <section
+    className="ant-layout {}"
+    id="areas.footer_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="areas.footer_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="areas.footer_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render areas.header - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="areas.header"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,null]} hide-on-print"
+    id="areas.header_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout {}"
+    id="areas.header_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="areas.header_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+  </section>
+</section>
+`;
+
+exports[`Render areas.sider - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="areas.sider"
+>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="areas.sider_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="areas.sider_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="areas.sider_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+</section>
+`;
+
 exports[`Render default - value[0] 1`] = `
 <section
  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
@ -28,18 +197,33 @@ exports[`Render default - value[0] 1`] = `
 </section>
 `;

-exports[`Render properties.content - value[0] 1`] = `
+exports[`Render properties.content.style: border: 5px solid blue - value[0] 1`] = `
 <section
  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
-  id="properties.content"
+  id="properties.content.style: border: 5px solid blue"
 >
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,null]} hide-on-print"
+    id="properties.content.style: border: 5px solid blue_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
  <section
-    className="ant-layout {}"
-    id="properties.content_layout"
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.content.style: border: 5px solid blue_layout"
  >
    <main
-      className="ant-layout-content {}"
-      id="properties.content_content"
+      className="ant-layout-content {\\"style\\":{\\"border\\":\\"5px solid blue\\"}}"
+      id="properties.content.style: border: 5px solid blue_content"
    >
      <div
        style={
@ -52,14 +236,695 @@ exports[`Render properties.content - value[0] 1`] = `
        content
      </div>
    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.content.style: border: 5px solid blue_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.content.style: border: 5px solid blue_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
 </section>
 `;

+exports[`Render properties.footer.style: border: 5px solid blue - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.footer.style: border: 5px solid blue"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,null]} hide-on-print"
+    id="properties.footer.style: border: 5px solid blue_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.footer.style: border: 5px solid blue_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.footer.style: border: 5px solid blue_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.footer.style: border: 5px solid blue_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},{\\"border\\":\\"5px solid blue\\"}]} hide-on-print"
+    id="properties.footer.style: border: 5px solid blue_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render properties.header.color: #4432a8  - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.header.color: #4432a8 "
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},{\\"backgroundColor\\":\\"#4432a8\\"},null]} hide-on-print"
+    id="properties.header.color: #4432a8 _header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.header.color: #4432a8 _layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.header.color: #4432a8 _content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.header.color: #4432a8 _sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.header.color: #4432a8 _footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render properties.header.style: border: 5px solid blue - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.header.style: border: 5px solid blue"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,{\\"border\\":\\"5px solid blue\\"}]} hide-on-print"
+    id="properties.header.style: border: 5px solid blue_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.header.style: border: 5px solid blue_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.header.style: border: 5px solid blue_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.header.style: border: 5px solid blue_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.header.style: border: 5px solid blue_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render properties.header.theme: light - dark is default - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.header.theme: light - dark is default"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":\\"#fff\\"},null,null]} hide-on-print"
+    id="properties.header.theme: light - dark is default_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.header.theme: light - dark is default_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.header.theme: light - dark is default_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.header.theme: light - dark is default_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.header.theme: light - dark is default_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render properties.sider.collapsed: true  - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.sider.collapsed: true "
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,null]} hide-on-print"
+    id="properties.sider.collapsed: true _header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.sider.collapsed: true _layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.sider.collapsed: true _content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.sider.collapsed: true _sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.sider.collapsed: true _footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render properties.sider.style: border: 5px solid blue - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\"}}"
+  id="properties.sider.style: border: 5px solid blue"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,null]} hide-on-print"
+    id="properties.sider.style: border: 5px solid blue_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.sider.style: border: 5px solid blue_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.sider.style: border: 5px solid blue_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},{\\"border\\":\\"5px solid blue\\"}]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.sider.style: border: 5px solid blue_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.sider.style: border: 5px solid blue_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Render properties.style: border: 5px solid blue - value[0] 1`] = `
+<section
+  className="ant-layout {\\"style\\":{\\"minHeight\\":\\"100vh\\",\\"border\\":\\"5px solid blue\\"}}"
+  id="properties.style: border: 5px solid blue"
+>
+  <header
+    className="ant-layout-header {\\"style\\":[{\\"backgroundColor\\":false},null,null]} hide-on-print"
+    id="properties.style: border: 5px solid blue_header"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      header
+    </div>
+  </header>
+  <section
+    className="ant-layout ant-layout-has-sider {}"
+    id="properties.style: border: 5px solid blue_layout"
+  >
+    <main
+      className="ant-layout-content {}"
+      id="properties.style: border: 5px solid blue_content"
+    >
+      <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>
+    </main>
+    <aside
+      className="{\\"style\\":[{\\"overflow\\":\\"auto\\"},null]} hide-on-print ant-layout-sider ant-layout-sider-dark"
+      id="properties.style: border: 5px solid blue_sider"
+      style={
+        Object {
+          "flex": "0 0 200px",
+          "maxWidth": "200px",
+          "minWidth": "200px",
+          "width": "200px",
+        }
+      }
+    >
+      <div
+        className="ant-layout-sider-children"
+      >
+        <div
+          style={
+            Object {
+              "border": "1px solid red",
+              "padding": 10,
+            }
+          }
+        >
+          sider
+        </div>
+      </div>
+    </aside>
+  </section>
+  <footer
+    className="ant-layout-footer {\\"style\\":[{\\"margin\\":\\"auto\\"},null]} hide-on-print"
+    id="properties.style: border: 5px solid blue_footer"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      footer
+    </div>
+  </footer>
+</section>
+`;
+
+exports[`Test Schema areas.content 1`] = `true`;
+
+exports[`Test Schema areas.content 2`] = `null`;
+
+exports[`Test Schema areas.footer 1`] = `true`;
+
+exports[`Test Schema areas.footer 2`] = `null`;
+
+exports[`Test Schema areas.header 1`] = `true`;
+
+exports[`Test Schema areas.header 2`] = `null`;
+
+exports[`Test Schema areas.sider 1`] = `true`;
+
+exports[`Test Schema areas.sider 2`] = `null`;
+
 exports[`Test Schema default 1`] = `true`;

 exports[`Test Schema default 2`] = `null`;

-exports[`Test Schema properties.content 1`] = `true`;
+exports[`Test Schema properties.content.style: border: 5px solid blue 1`] = `true`;

-exports[`Test Schema properties.content 2`] = `null`;
+exports[`Test Schema properties.content.style: border: 5px solid blue 2`] = `null`;
+
+exports[`Test Schema properties.footer.style: border: 5px solid blue 1`] = `true`;
+
+exports[`Test Schema properties.footer.style: border: 5px solid blue 2`] = `null`;
+
+exports[`Test Schema properties.header.color: #4432a8  1`] = `true`;
+
+exports[`Test Schema properties.header.color: #4432a8  2`] = `null`;
+
+exports[`Test Schema properties.header.style: border: 5px solid blue 1`] = `true`;
+
+exports[`Test Schema properties.header.style: border: 5px solid blue 2`] = `null`;
+
+exports[`Test Schema properties.header.theme: light - dark is default 1`] = `true`;
+
+exports[`Test Schema properties.header.theme: light - dark is default 2`] = `null`;
+
+exports[`Test Schema properties.sider.collapsed: true  1`] = `true`;
+
+exports[`Test Schema properties.sider.collapsed: true  2`] = `null`;
+
+exports[`Test Schema properties.sider.style: border: 5px solid blue 1`] = `true`;
+
+exports[`Test Schema properties.sider.style: border: 5px solid blue 2`] = `null`;
+
+exports[`Test Schema properties.style: border: 5px solid blue 1`] = `true`;
+
+exports[`Test Schema properties.style: border: 5px solid blue 2`] = `null`;