reactive-bulma 1.9.0 → 1.10.0

package/dist/cjs/types/components/atoms/Tag/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TagProps } from '../../../interfaces/atomProps';
+declare const Tag: React.FC<TagProps>;
+export default Tag;

package/dist/cjs/types/components/atoms/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Button } from './Button';
 export { default as Column } from './Column';
 export { default as ProgressBar } from './ProgressBar';
+export { default as Block } from './Block';
+export { default as Tag } from './Tag';

package/dist/cjs/types/functions/persers.d.ts

@@ -1 +1,3 @@
+import { ParseTestIdProps } from '../interfaces/functionProps';
 export declare const parseClasses: (_classes: Array<string | null>) => string;
+export declare const parseTestId: (config: ParseTestIdProps) => string;

package/dist/cjs/types/interfaces/atomProps.d.ts

@@ -1,11 +1,15 @@
-/// <reference types="react" />
+import React from 'react';
 import { basicColorType, columnOffsetType, columnSizeType, sizeType } from '../types/styleTypes';
-export interface ColumnProps extends React.ComponentPropsWithoutRef<'section'> {
+interface BasicProps {
+    testId?: string;
+    style?: React.CSSProperties;
+}
+export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
     size?: columnSizeType;
     offset?: columnOffsetType;
     isNarrow?: boolean;
 }
-export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button'> {
     text?: string;
     style?: React.CSSProperties;
     color?: basicColorType;
@@ -19,7 +23,7 @@ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
     size?: sizeType;
     onClick?: () => void;
 }
-export interface ProgressBarProps extends React.ComponentPropsWithoutRef<'progress'> {
+export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
     value?: number;
     max?: number;
     style?: React.CSSProperties;
@@ -27,6 +31,19 @@ export interface ProgressBarProps extends React.ComponentPropsWithoutRef<'progre
     size?: sizeType;
     isLoading?: boolean;
 }
-export interface BlockProps extends React.ComponentPropsWithoutRef<'section'> {
+export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
     testId?: string;
 }
+export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'span'> {
+    text: string;
+    color?: basicColorType;
+    isLight?: boolean;
+    isRounded?: boolean;
+    size?: Exclude<sizeType, 'is-normal'>;
+    withDelete?: boolean;
+    withAddon?: boolean;
+    addonText?: string;
+    addonColor?: basicColorType;
+    onDeleteClick?: () => void;
+}
+export {};

package/dist/cjs/types/interfaces/functionProps.d.ts

@@ -0,0 +1,5 @@
+export interface ParseTestIdProps {
+    tag: string;
+    parsedClasses: string;
+    separator?: string;
+}

package/dist/esm/index.js

@@ -2839,8 +2839,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,
@@ -2852,24 +2856,59 @@ 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));
 };
 
-export { Button, Column, ProgressBar };
+export { Block, Button, Column, ProgressBar, Tag };
 //# sourceMappingURL=index.js.map