@lowdefy/blocks-antd 4.7.2 → 5.0.0

package/dist/blocks/TimelineList/TimelineList.js

@@ -14,10 +14,11 @@
   limitations under the License.
 */ import React from 'react';
 import { Timeline } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { get, mergeObjects, serializer, type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
 // TODO: need to pass value to list blocks to render item level settings.
-const TimelineList = ({ blockId, components: { Icon }, events, list, methods, properties })=>{
+const TimelineList = ({ blockId, classNames = {}, components: { Icon }, events, list, methods, properties, styles = {} })=>{
     // Temporary fix until list blocks get value from state
     const value = properties.data;
     const other = {};
@@ -26,26 +27,27 @@ const TimelineList = ({ blockId, components: { Icon }, events, list, methods, pr
     }
     return /*#__PURE__*/ React.createElement(Timeline, {
         id: blockId,
-        className: methods.makeCssClass([
-            {
-                padding: '5px 0px 0px 5px'
-            },
-            properties.style
-        ]),
+        className: classNames.element,
         pending: properties.pending,
         pendingDot: properties.pendingDotIcon && /*#__PURE__*/ React.createElement(Icon, {
             blockId: `${blockId}_pendingDotIcon`,
+            classNames: {
+                element: classNames.pendingDotIcon
+            },
             events: events,
-            properties: mergeObjects([
-                {
-                    style: {
-                        fontSize: 16
-                    }
-                },
-                properties.pendingDotIcon
-            ])
+            properties: properties.pendingDotIcon,
+            styles: {
+                element: {
+                    fontSize: 16,
+                    ...styles.pendingDotIcon
+                }
+            }
         }),
         reverse: properties.reverse,
+        style: {
+            padding: '5px 0px 0px 5px',
+            ...styles.element
+        },
         ...other
     }, (list || []).map((child, i)=>{
         let icon = serializer.copy(get(value, `${i}.${properties.iconField ?? 'icon'}`));
@@ -66,24 +68,24 @@ const TimelineList = ({ blockId, components: { Icon }, events, list, methods, pr
             label: get(value, `${i}.${properties.labelField ?? 'label'}`),
             dot: icon && /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_${i}_icon`,
+                classNames: {
+                    element: classNames.icon
+                },
                 events: events,
                 properties: mergeObjects([
                     {
-                        style,
                         color
                     },
                     icon
-                ])
+                ]),
+                styles: {
+                    element: {
+                        ...style,
+                        ...styles.icon
+                    }
+                }
             })
         }, child.content && child.content());
     }));
 };
-TimelineList.defaultProps = blockDefaultProps;
-TimelineList.meta = {
-    category: 'list',
-    icons: [],
-    styles: [
-        'blocks/TimelineList/style.less'
-    ]
-};
-export default TimelineList;
+export default withTheme('Timeline', withBlockDefaults(TimelineList));

package/dist/blocks/TimelineList/{schema.js → meta.js}

@@ -13,7 +13,17 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'list',
+    icons: [],
+    valueType: null,
+    slots: {
+        content: 'Blocks rendered for each timeline item.'
+    },
+    cssKeys: {
+        element: 'The TimelineList element.',
+        icon: 'The icon in the TimelineList items.',
+        pendingDotIcon: 'The pending dot icon in the TimelineList.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -24,13 +34,6 @@
                     displayType: 'yaml'
                 }
             },
-            style: {
-                type: 'object',
-                description: 'Css style object to apply to timeline.',
-                docs: {
-                    displayType: 'yaml'
-                }
-            },
             pendingDotIcon: {
                 type: [
                     'object',
@@ -80,6 +83,40 @@
                 ],
                 default: 'left',
                 description: 'By sending alternate the timeline will distribute the nodes to the left and right.'
+            },
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/timeline#design-token'
+                },
+                properties: {
+                    tailColor: {
+                        type: 'string',
+                        default: 'rgba(5, 5, 5, 0.06)',
+                        description: 'Color of the timeline connector line.'
+                    },
+                    tailWidth: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Width of the timeline connector line.'
+                    },
+                    dotBorderWidth: {
+                        type: 'number',
+                        default: 2,
+                        description: 'Border width of the timeline dot.'
+                    },
+                    dotBg: {
+                        type: 'string',
+                        description: 'Background color of the timeline dot.'
+                    },
+                    itemPaddingBottom: {
+                        type: 'number',
+                        default: 20,
+                        description: 'Bottom padding of each timeline item.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/Title/Title.js

@@ -14,18 +14,14 @@
   limitations under the License.
 */ import React from 'react';
 import { Typography } from 'antd';
-import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
+import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
+import withTheme from '../withTheme.js';
 const Title = Typography.Title;
-const TitleBlock = ({ blockId, components: { Icon }, events, properties, methods })=>{
-    return /*#__PURE__*/ React.createElement(Title, {
+const TitleBlock = ({ blockId, classNames = {}, components: { Icon }, events, properties, methods, styles = {} })=>{
+    const titleEl = /*#__PURE__*/ React.createElement(Title, {
         id: blockId,
-        className: methods.makeCssClass([
-            properties.color && {
-                color: `${properties.color} !important`
-            },
-            properties.style
-        ]),
+        className: classNames.element,
         code: properties.code,
         copyable: type.isObject(properties.copyable) ? {
             text: properties.copyable.text || properties.content,
@@ -41,19 +37,37 @@ const TitleBlock = ({ blockId, components: { Icon }, events, properties, methods
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copy-icon",
                     blockId: `${blockId}_copyable_before_icon`,
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
                     events: events,
-                    properties: properties.copyable.icon[0]
+                    properties: properties.copyable.icon[0],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 }),
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copied-icon",
                     blockId: `${blockId}_copyable_after_icon`,
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
                     events: events,
-                    properties: properties.copyable.icon[1]
+                    properties: properties.copyable.icon[1],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 })
             ] : /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_copyable_icon`,
+                classNames: {
+                    element: classNames.copyableIcon
+                },
                 events: events,
-                properties: properties.copyable.icon
+                properties: properties.copyable.icon,
+                styles: {
+                    element: styles.copyableIcon
+                }
             })),
             tooltips: properties.copyable.tooltips
         } : properties.copyable && {
@@ -91,19 +105,18 @@ const TitleBlock = ({ blockId, components: { Icon }, events, properties, methods
         italic: properties.italic,
         level: properties.level,
         mark: properties.mark,
+        style: {
+            ...styles.element,
+            ...properties.color && {
+                color: properties.color
+            }
+        },
         type: properties.type,
         underline: properties.underline
     }, renderHtml({
         html: properties.content,
         methods
     }));
+    return titleEl;
 };
-TitleBlock.defaultProps = blockDefaultProps;
-TitleBlock.meta = {
-    category: 'display',
-    icons: [],
-    styles: [
-        'blocks/Title/style.less'
-    ]
-};
-export default TitleBlock;
+export default withTheme('Typography', withBlockDefaults(TitleBlock));

package/dist/blocks/Title/{schema.js → meta.js}

@@ -13,7 +13,17 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ export default {
-    type: 'object',
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Title element.',
+        copyableIcon: 'The copyable icon in the Title.'
+    },
+    events: {
+        onExpand: 'Trigger action when ellipse expand is clicked.',
+        onCopy: 'Trigger action when copy text is clicked.'
+    },
     properties: {
         type: 'object',
         additionalProperties: false,
@@ -148,20 +158,113 @@
                 type: 'boolean',
                 default: false,
                 description: 'Apply underline style.'
-            }
-        }
-    },
-    events: {
-        type: 'object',
-        additionalProperties: false,
-        properties: {
-            onExpand: {
-                type: 'array',
-                description: 'Trigger action when ellipse expand is clicked.'
             },
-            onCopy: {
-                type: 'array',
-                description: 'Trigger action when copy text is clicked.'
+            theme: {
+                type: 'object',
+                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
+                docs: {
+                    displayType: 'yaml',
+                    link: 'https://ant.design/components/typography#design-token'
+                },
+                properties: {
+                    titleMarginBottom: {
+                        type: 'string',
+                        default: '0.5em',
+                        description: 'Margin bottom of title.'
+                    },
+                    titleMarginTop: {
+                        type: 'string',
+                        default: '1.2em',
+                        description: 'Margin top of title.'
+                    },
+                    fontSizeHeading1: {
+                        type: 'number',
+                        default: 38,
+                        description: 'Font size of h1 heading.'
+                    },
+                    fontSizeHeading2: {
+                        type: 'number',
+                        default: 30,
+                        description: 'Font size of h2 heading.'
+                    },
+                    fontSizeHeading3: {
+                        type: 'number',
+                        default: 24,
+                        description: 'Font size of h3 heading.'
+                    },
+                    fontSizeHeading4: {
+                        type: 'number',
+                        default: 20,
+                        description: 'Font size of h4 heading.'
+                    },
+                    fontSizeHeading5: {
+                        type: 'number',
+                        default: 16,
+                        description: 'Font size of h5 heading.'
+                    },
+                    lineHeightHeading1: {
+                        type: 'number',
+                        default: 1.2105,
+                        description: 'Line height of h1 heading.'
+                    },
+                    lineHeightHeading2: {
+                        type: 'number',
+                        default: 1.2667,
+                        description: 'Line height of h2 heading.'
+                    },
+                    lineHeightHeading3: {
+                        type: 'number',
+                        default: 1.3333,
+                        description: 'Line height of h3 heading.'
+                    },
+                    lineHeightHeading4: {
+                        type: 'number',
+                        default: 1.4,
+                        description: 'Line height of h4 heading.'
+                    },
+                    lineHeightHeading5: {
+                        type: 'number',
+                        default: 1.5,
+                        description: 'Line height of h5 heading.'
+                    },
+                    fontWeightStrong: {
+                        type: 'number',
+                        default: 600,
+                        description: 'Font weight for strong text.'
+                    },
+                    fontFamilyCode: {
+                        type: 'string',
+                        description: 'Font family for code style text.'
+                    },
+                    colorText: {
+                        type: 'string',
+                        description: 'Default text color.'
+                    },
+                    colorTextSecondary: {
+                        type: 'string',
+                        description: 'Secondary text color.'
+                    },
+                    colorSuccess: {
+                        type: 'string',
+                        description: 'Success text color.'
+                    },
+                    colorWarning: {
+                        type: 'string',
+                        description: 'Warning text color.'
+                    },
+                    colorError: {
+                        type: 'string',
+                        description: 'Danger/error text color.'
+                    },
+                    colorTextDisabled: {
+                        type: 'string',
+                        description: 'Disabled text color.'
+                    },
+                    colorLink: {
+                        type: 'string',
+                        description: 'Link color.'
+                    }
+                }
             }
         }
     }

package/dist/blocks/TitleInput/TitleInput.js

@@ -14,10 +14,11 @@
   limitations under the License.
 */ import React, { useState } from 'react';
 import { Typography } from 'antd';
-import { blockDefaultProps } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import withTheme from '../withTheme.js';
 const Title = Typography.Title;
-const TitleInput = ({ blockId, components: { Icon }, events, loading, methods, properties, value })=>{
+const TitleInput = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, styles = {}, value })=>{
     const [editing, setEdit] = useState(false);
     const editableEvents = {
         onStart: ()=>{
@@ -37,20 +38,21 @@ const TitleInput = ({ blockId, components: { Icon }, events, loading, methods, p
             });
         }
     };
-    return /*#__PURE__*/ React.createElement(Title, {
+    const titleEl = /*#__PURE__*/ React.createElement(Title, {
         id: blockId,
+        className: classNames.element,
         code: properties.code,
         italic: properties.italic,
         level: properties.level,
         mark: properties.mark,
+        style: {
+            ...styles.element,
+            ...properties.color && {
+                color: properties.color
+            }
+        },
         type: properties.type,
         underline: properties.underline,
-        className: methods.makeCssClass([
-            properties.color && {
-                color: `${properties.color} !important`
-            },
-            properties.style
-        ]),
         copyable: type.isObject(properties.copyable) ? {
             text: properties.copyable.text,
             onCopy: ()=>{
@@ -64,20 +66,38 @@ const TitleInput = ({ blockId, components: { Icon }, events, loading, methods, p
             icon: properties.copyable.icon && (type.isArray(properties.copyable.icon) ? [
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copy-icon",
-                    events: events,
                     blockId: `${blockId}_copyable_before_icon`,
-                    properties: properties.copyable.icon[0]
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
+                    events: events,
+                    properties: properties.copyable.icon[0],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 }),
                 /*#__PURE__*/ React.createElement(Icon, {
                     key: "copied-icon",
-                    events: events,
                     blockId: `${blockId}_copyable_after_icon`,
-                    properties: properties.copyable.icon[1]
+                    classNames: {
+                        element: classNames.copyableIcon
+                    },
+                    events: events,
+                    properties: properties.copyable.icon[1],
+                    styles: {
+                        element: styles.copyableIcon
+                    }
                 })
             ] : /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_copyable_icon`,
+                classNames: {
+                    element: classNames.copyableIcon
+                },
                 events: events,
-                properties: properties.copyable.icon
+                properties: properties.copyable.icon,
+                styles: {
+                    element: styles.copyableIcon
+                }
             })),
             tooltips: properties.copyable.tooltips
         } : properties.copyable,
@@ -99,8 +119,14 @@ const TitleInput = ({ blockId, components: { Icon }, events, loading, methods, p
         editable: type.isObject(properties.editable) ? {
             icon: properties.editable.icon && /*#__PURE__*/ React.createElement(Icon, {
                 blockId: `${blockId}_editable_icon`,
+                classNames: {
+                    element: classNames.editableIcon
+                },
                 events: events,
-                properties: properties.editable.icon
+                properties: properties.editable.icon,
+                styles: {
+                    element: styles.editableIcon
+                }
             }),
             tooltip: properties.editable.tooltip,
             editing: properties.editable.editing || editing,
@@ -109,14 +135,6 @@ const TitleInput = ({ blockId, components: { Icon }, events, loading, methods, p
             ...editableEvents
         } : properties.editable !== false && editableEvents
     }, !type.isNone(value) ? value.toString() : '');
+    return titleEl;
 };
-TitleInput.defaultProps = blockDefaultProps;
-TitleInput.meta = {
-    valueType: 'string',
-    category: 'input',
-    icons: [],
-    styles: [
-        'blocks/TitleInput/style.less'
-    ]
-};
-export default TitleInput;
+export default withTheme('Typography', withBlockDefaults(TitleInput));