reactive-bulma 1.8.0 → 1.10.0

package/dist/cjs/index.js

@@ -2841,8 +2841,12 @@ function requireReact_development () {
 var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
 
 const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
+const parseTestId = (config) => `test-${config.tag}${config.parsedClasses
+    .replace(`${config.tag}`, '')
+    .replace(/is-/gm, '-')
+    .replace(/ /gm, config.separator || '')}`;
 
-const Button = ({ text = null, type = 'button', style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
+const Button = ({ text = null, type = 'button', testId = null, style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
     const buttonClasses = parseClasses([
         'button',
         color,
@@ -2854,26 +2858,63 @@ const Button = ({ text = null, type = 'button', style = null, color = 'is-primar
         isStatic ? 'is-static' : null,
         size
     ]);
-    return (React.createElement("button", { "data-testid": 'test-button', type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'button', parsedClasses: buttonClasses });
+    return (React.createElement("button", { "data-testid": _testId, type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
 };
 
-const Column = ({ size = null, offset = null, isNarrow = false, children = null }) => {
-    const classes = parseClasses([
+const Column = ({ testId = null, style = null, size = null, offset = null, isNarrow = false, children = null }) => {
+    const columnClasses = parseClasses([
         'column',
         size,
         offset,
         isNarrow ? 'is-narrow' : null
     ]);
-    return (React.createElement("section", { "data-testid": 'test-column', className: classes }, children));
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
+    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style || undefined }, children));
 };
 
-const ProgressBar = ({ value = 0, max = 100, style = null, color = 'is-primary', size = null, isLoading = false }) => {
-    const progressClasses = parseClasses(['progress', color, size]);
+const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
     const fixedValue = value > max || value < 0 ? 0 : value;
-    return (React.createElement("progress", { "data-testid": 'test-progress-bar', className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
+    const progressClasses = parseClasses(['progress', color, size]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'progress',
+        parsedClasses: progressClasses
+    });
+    return (React.createElement("progress", { "data-testid": _testId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
+};
+
+const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style || undefined }, children)) : null;
+
+const Tag = ({ text, testId = null, style = null, color = null, isLight = null, isRounded = null, size = null, withDelete = false, withAddon = false, addonText = null, addonColor = null, onDeleteClick = null }) => {
+    const tagLabel = withAddon ? 'tags' : 'tag';
+    const tagClasses = parseClasses([
+        'tag',
+        color,
+        isLight && !withAddon ? 'is-light' : null,
+        isRounded && !withAddon ? 'is-rounded' : null,
+        size
+    ]);
+    const tagsWrapperClasses = parseClasses([
+        'tags',
+        'has-addons',
+        size ? size.replace('is-', 'are-') : null
+    ]);
+    const addonTagClasses = parseClasses(['tag', addonColor]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: tagLabel,
+        parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
+        separator: withAddon ? '-' : ''
+    });
+    return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style || undefined, className: tagsWrapperClasses },
+        React.createElement("span", { className: tagClasses }, text),
+        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick || undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style || undefined, className: tagClasses },
+        text,
+        withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick || undefined })) : null));
 };
 
+exports.Block = Block;
 exports.Button = Button;
 exports.Column = Column;
 exports.ProgressBar = ProgressBar;
+exports.Tag = Tag;
 //# sourceMappingURL=index.js.map