docs: Add Card block docs

packages/blocks/blocksAntd/src/blocks/Card/Card.json

@@ -11,10 +11,6 @@
       "type": "object",
       "additionalProperties": false,
       "properties": {
-        "title": {
-          "type": "string",
-          "description": "Title to describe the input component, if no title is specified the block id is displayed."
-        },
         "bordered": {
           "type": "boolean",
           "default": true,
@@ -49,6 +45,10 @@
           "enum": ["default", "small"],
           "default": "default",
           "description": "Size of the card."
+        },
+        "title": {
+          "type": "string",
+          "description": "Title to show in the title area. Overwritten by blocks in the title content area."
         }
       }
     }

packages/docs/blocks/container/Card.yaml

@@ -0,0 +1,48 @@
+# Copyright 2020-2021 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.
+
+_ref:
+  path: templates/blocks/template.yaml.njk
+  vars:
+    block_type: Card
+    category: display
+    schema:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/Card/Card.json
+    description_content: |
+      A Card container places blocks on a white background with a card border.
+      The Card has `content`, `title` and `extra` areas. The `title` area replaces `properties.title` if defined.
+    default_properties:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/Card/Card.json
+        transformer: templates/blocks/defaultValueTransformer.js
+    properties_getter:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/Card/Card.json
+        transformer: templates/blocks/propertiesGetterTransformer.js
+    properties_form:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/Card/Card.json
+        transformer: templates/blocks/propertiesFormTransformer.js
+    schema_definition:
+      _ref:
+        path: ../blocks/blocksAntd/src/blocks/Card/Card.json
+        transformer: templates/blocks/schemaTransformer.js
+    areas:
+      - content
+      - extra
+      - title
+    examples:
+      - title: Basic
+        properties: '{"title": "A Card"}'

packages/docs/lowdefy.yaml

@@ -289,6 +289,17 @@ menus:
           - id: Title
             type: MenuLink
             pageId: Title
+
+      - id: blocks_container
+        type: MenuGroup
+        properties:
+          title: Container Blocks
+          icon: ContainerOutlined
+        links:
+          - id: Card
+            type: MenuLink
+            pageId: Card
+
       - id: connections
         type: MenuGroup
         properties:
@@ -576,6 +587,8 @@ pages:
   - _ref: blocks/display/Statistic.yaml
   - _ref: blocks/display/Title.yaml
 
+  - _ref: blocks/container/Card.yaml
+
   - _ref: connections/AWSS3.yaml
   - _ref: connections/AxiosHttp.yaml
   - _ref: connections/GoogleSheet.yaml

packages/docs/templates/blocks/template.yaml.njk

@@ -63,23 +63,24 @@ blocks:
       level: 2
       content:
         _var: block_type
+  {% if value_type %}
   - id: value_type
     type: Markdown
-    visible:
-      _not:
-        _eq:
-          - _var: value_type
-          - null
     properties:
-      content:
+      content: |
-        _nunjucks:
+        ```
-          template: |
+        value type: {{ value_type }}
-            ```
+        ```
-            value type: {{ value_type }}
+  {% endif %}
-            ```
+  {% if areas %}
-          on:
+  - id: areas_list
-            value_type:
+    type: Markdown
-              _var: value_type
+    properties:
+      content: |
+        ```
+        areas: {{ areas | join(', ') }}
+        ```
+  {% endif %}
   - id: description
     type: Markdown
     properties:
@@ -110,8 +111,27 @@ blocks:
           _state: block.required
         properties:
           _var: properties_getter
+        {% if areas %}
+        areas:
+          {% for area in areas %}
+          {{ area }}:
+            gutter: 0
+            style:
+              border: 1px dashed red
+            blocks:
+              - id: block_area_{{ area }}
+                type: Html
+                style:
+                  background: '#f0f2f5'
+                  textAlign: center
+                  padding: 2px 5px
+                  color: red
+                properties:
+                  html: {{ area }}
+          {% endfor %}
+        {% endif %}
       {% if methods %}
-      - id: block_divider
+      - id: method_divider
         type: Divider
         properties:
           title: Methods