From 4263f6b8764bb147e301c3dbba0ac4986959aad8 Mon Sep 17 00:00:00 2001
From: Sandile <sah.memela@gmail.com>
Date: Tue, 7 Sep 2021 11:43:11 +0200
Subject: [PATCH 1/2] feat(blocksAntd): Card block now has an onClick event.

---
 packages/blocks/blocksAntd/demo/examples/Card.yaml   | 10 ++++++++++
 packages/blocks/blocksAntd/src/blocks/Card/Card.js   |  7 ++++++-
 packages/blocks/blocksAntd/src/blocks/Card/Card.json | 10 ++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/blocks/blocksAntd/demo/examples/Card.yaml b/packages/blocks/blocksAntd/demo/examples/Card.yaml
index 4ef789a22..63f1df886 100644
--- a/packages/blocks/blocksAntd/demo/examples/Card.yaml
+++ b/packages/blocks/blocksAntd/demo/examples/Card.yaml
@@ -49,3 +49,13 @@
   type: Card
   properties:
     title: <div style="color:green">Card Title</div>
+- id: 'with onClick event'
+  type: Card
+  properties:
+    title: Card block
+  events:
+    onClick:
+      - id: message
+        type: message
+        params:
+          content: Success
diff --git a/packages/blocks/blocksAntd/src/blocks/Card/Card.js b/packages/blocks/blocksAntd/src/blocks/Card/Card.js
index 67dceca5d..f8a1e97f6 100644
--- a/packages/blocks/blocksAntd/src/blocks/Card/Card.js
+++ b/packages/blocks/blocksAntd/src/blocks/Card/Card.js
@@ -18,7 +18,7 @@ import React from 'react';
 import { Card } from 'antd';
 import { blockDefaultProps, RenderHtml } from '@lowdefy/block-tools';
 
-const CardBlock = ({ blockId, content, properties, methods }) => (
+const CardBlock = ({ blockId, content, properties, methods, events }) => (
   <Card
     id={blockId}
     title={
@@ -35,6 +35,11 @@ const CardBlock = ({ blockId, content, properties, methods }) => (
     hoverable={properties.hoverable}
     size={properties.size}
     type={properties.inner ? 'inner' : null}
+    onClick={() => methods.triggerEvent({ name: 'onClick' })}
+    className={methods.makeCssClass([
+      { outline: 'none', cursor: events.onClick && 'pointer' },
+      properties.style,
+    ])}
   >
     {content.content && content.content()}
   </Card>
diff --git a/packages/blocks/blocksAntd/src/blocks/Card/Card.json b/packages/blocks/blocksAntd/src/blocks/Card/Card.json
index 0f41c5964..db4785cd3 100644
--- a/packages/blocks/blocksAntd/src/blocks/Card/Card.json
+++ b/packages/blocks/blocksAntd/src/blocks/Card/Card.json
@@ -51,6 +51,16 @@
           "description": "Title to show in the title area - supports html. Overwritten by blocks in the title content area."
         }
       }
+    },
+    "events": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "onClick": {
+          "type": "array",
+          "description": "Trigger actions when the Card is clicked."
+        }
+      }
     }
   }
 }

From 5fd636db37a957f7ac569ebe14ebfce5b4ddbe98 Mon Sep 17 00:00:00 2001
From: Sandile <sah.memela@gmail.com>
Date: Tue, 7 Sep 2021 15:01:43 +0200
Subject: [PATCH 2/2] chore(blocksAntd): Updated Card tests.

---
 .../__snapshots__/Card.mock.test.js.snap      | 216 ++++++++++++++++++
 .../tests/__snapshots__/Card.test.js.snap     |  74 +++++-
 2 files changed, 280 insertions(+), 10 deletions(-)

diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/Card.mock.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/Card.mock.test.js.snap
index 9aadbb027..2c311a265 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/Card.mock.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/Card.mock.test.js.snap
@@ -16,6 +16,7 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": <div
         style={
           Object {
@@ -29,6 +30,7 @@ Array [
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "areas.extra:",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -48,6 +50,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -58,6 +69,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -89,10 +104,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "default",
+      "onClick": [Function],
       "size": undefined,
       "title": undefined,
       "type": null,
@@ -118,10 +135,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "properties.bodyStyle: border: 5px solid blue",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -143,6 +162,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -153,6 +181,10 @@ Array [
                   "type": "return",
                   "value": "{\\"style\\":{\\"border\\":\\"5px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -184,10 +216,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "properties.bordered: false",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -207,6 +241,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -217,6 +260,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -248,10 +295,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"style\\":{\\"border\\":\\"5px solid blue\\"},\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "properties.headerStyle: border: 5px solid blue",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -273,6 +322,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -283,6 +341,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -314,10 +376,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": true,
       "id": "properties.hoverable: true",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -337,6 +401,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -347,6 +420,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -378,10 +455,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "properties.inner: true",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -401,6 +480,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -411,6 +499,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -442,10 +534,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "properties.size: small",
+      "onClick": [Function],
       "size": "small",
       "title": <RenderHtml
         html="Card block small"
@@ -465,6 +559,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -475,6 +578,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -506,10 +613,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "properties.title",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html="Card block"
@@ -529,6 +638,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -539,6 +657,10 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
@@ -570,10 +692,12 @@ Array [
       >
         content
       </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
       "extra": undefined,
       "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
       "hoverable": undefined,
       "id": "with html in title",
+      "onClick": [Function],
       "size": undefined,
       "title": <RenderHtml
         html=<div style="color:green">
@@ -595,6 +719,15 @@ Array [
                     "styleObjectOnly": true,
                   },
                 ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": undefined,
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
               ],
               "results": Array [
                 Object {
@@ -605,6 +738,89 @@ Array [
                   "type": "return",
                   "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
                 },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\"},null]}",
+                },
+              ],
+            },
+            "registerEvent": [Function],
+            "registerMethod": [Function],
+            "triggerEvent": [Function],
+          }
+        }
+      />,
+      "type": null,
+    },
+    Object {},
+  ],
+]
+`;
+
+exports[`Mock render - with onClick event - value[0] - default 1`] = `
+Array [
+  Array [
+    Object {
+      "bodyStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "bordered": undefined,
+      "children": <div
+        style={
+          Object {
+            "border": "1px solid red",
+            "padding": 10,
+          }
+        }
+      >
+        content
+      </div>,
+      "className": "{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}",
+      "extra": undefined,
+      "headStyle": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+      "hoverable": undefined,
+      "id": "with onClick event",
+      "onClick": [Function],
+      "size": undefined,
+      "title": <RenderHtml
+        html="Card block"
+        methods={
+          Object {
+            "makeCssClass": [MockFunction] {
+              "calls": Array [
+                Array [
+                  undefined,
+                  Object {
+                    "styleObjectOnly": true,
+                  },
+                ],
+                Array [
+                  undefined,
+                  Object {
+                    "styleObjectOnly": true,
+                  },
+                ],
+                Array [
+                  Array [
+                    Object {
+                      "cursor": "pointer",
+                      "outline": "none",
+                    },
+                    undefined,
+                  ],
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+                },
+                Object {
+                  "type": "return",
+                  "value": "{\\"options\\":{\\"styleObjectOnly\\":true}}",
+                },
+                Object {
+                  "type": "return",
+                  "value": "{\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]}",
+                },
               ],
             },
             "registerEvent": [Function],
diff --git a/packages/blocks/blocksAntd/tests/__snapshots__/Card.test.js.snap b/packages/blocks/blocksAntd/tests/__snapshots__/Card.test.js.snap
index 47ba9a192..2d227cce5 100644
--- a/packages/blocks/blocksAntd/tests/__snapshots__/Card.test.js.snap
+++ b/packages/blocks/blocksAntd/tests/__snapshots__/Card.test.js.snap
@@ -2,8 +2,9 @@
 
 exports[`Render areas.extra: - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
   id="areas.extra:"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -55,8 +56,9 @@ exports[`Render areas.extra: - value[0] 1`] = `
 
 exports[`Render default - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
   id="default"
+  onClick={[Function]}
 >
   <div
     className="ant-card-body"
@@ -78,8 +80,9 @@ exports[`Render default - value[0] 1`] = `
 
 exports[`Render properties.bodyStyle: border: 5px solid blue - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
   id="properties.bodyStyle: border: 5px solid blue"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -117,8 +120,9 @@ exports[`Render properties.bodyStyle: border: 5px solid blue - value[0] 1`] = `
 
 exports[`Render properties.bordered: false - value[0] 1`] = `
 <div
-  className="ant-card"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]}"
   id="properties.bordered: false"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -156,8 +160,9 @@ exports[`Render properties.bordered: false - value[0] 1`] = `
 
 exports[`Render properties.headerStyle: border: 5px solid blue - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
   id="properties.headerStyle: border: 5px solid blue"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -195,8 +200,9 @@ exports[`Render properties.headerStyle: border: 5px solid blue - value[0] 1`] =
 
 exports[`Render properties.hoverable: true - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered ant-card-hoverable"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered ant-card-hoverable"
   id="properties.hoverable: true"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -234,8 +240,9 @@ exports[`Render properties.hoverable: true - value[0] 1`] = `
 
 exports[`Render properties.inner: true - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered ant-card-type-inner"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered ant-card-type-inner"
   id="properties.inner: true"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -273,8 +280,9 @@ exports[`Render properties.inner: true - value[0] 1`] = `
 
 exports[`Render properties.size: small - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered ant-card-small"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered ant-card-small"
   id="properties.size: small"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -312,8 +320,9 @@ exports[`Render properties.size: small - value[0] 1`] = `
 
 exports[`Render properties.title - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
   id="properties.title"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -351,8 +360,49 @@ exports[`Render properties.title - value[0] 1`] = `
 
 exports[`Render with html in title - value[0] 1`] = `
 <div
-  className="ant-card ant-card-bordered"
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\"},null]} ant-card-bordered"
   id="with html in title"
+  onClick={[Function]}
+>
+  <div
+    className="ant-card-head"
+    style="{\\"options\\":{\\"styleObjectOnly\\":true}}"
+  >
+    <div
+      className="ant-card-head-wrapper"
+    >
+      <div
+        className="ant-card-head-title"
+      >
+        <span
+          className="{}"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="ant-card-body"
+    style="{\\"options\\":{\\"styleObjectOnly\\":true}}"
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid red",
+          "padding": 10,
+        }
+      }
+    >
+      content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Render with onClick event - value[0] 1`] = `
+<div
+  className="ant-card {\\"style\\":[{\\"outline\\":\\"none\\",\\"cursor\\":\\"pointer\\"},null]} ant-card-bordered"
+  id="with onClick event"
+  onClick={[Function]}
 >
   <div
     className="ant-card-head"
@@ -427,3 +477,7 @@ exports[`Test Schema properties.title 2`] = `null`;
 exports[`Test Schema with html in title 1`] = `true`;
 
 exports[`Test Schema with html in title 2`] = `null`;
+
+exports[`Test Schema with onClick event 1`] = `true`;
+
+exports[`Test Schema with onClick event 2`] = `null`;