reactive-bulma 2.2.0 → 2.3.0

package/dist/cjs/types/components/molecules/Notification/index.d.ts

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

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

@@ -1,2 +1,3 @@
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as ColumnGroup } from './ColumnGroup';
+export { default as Notification } from './Notification';

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { BasicProps } from './commonProps';
+import { ElementProps, ComposedElementProps } from './commonProps';
 import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
 import { inputTypes } from '../types/domTypes';
-export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
     children?: string | React.ReactElement | React.ReactElement[];
     /** `Styling` Set column's size */
@@ -12,7 +12,7 @@ export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<
     /** `Styling` Set if the column only will take the space it needs */
     isNarrow?: boolean;
 }
-export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<'button'> {
+export interface ButtonProps extends ElementProps, React.ComponentPropsWithoutRef<'button'> {
     /** `Attribute` The text will be shown in the `Button` */
     text?: string;
     /** `Attribute` Will disable the button */
@@ -38,7 +38,7 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithoutRef<'progress'> {
+export interface ProgressBarProps extends ElementProps, React.ComponentPropsWithoutRef<'progress'> {
     /** `Attribute` Sets colored bar at the level against `max` value (`100` by default) */
     value?: number;
     /** `Attribute` Sets the entire bar length comparing with current `value` */
@@ -50,11 +50,11 @@ export interface ProgressBarProps extends BasicProps, React.ComponentPropsWithou
     /** `Styling` Will change `value` for a animated loading */
     isLoading?: boolean;
 }
-export interface BlockProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+export interface BlockProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the block */
     children?: string | React.ReactElement | React.ReactElement[];
 }
-export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'span'> {
+export interface TagProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'span'> {
     /** `Attribute` `Required` The text will be shown in the `Tag` */
     text: string;
     /** `Attribute` Will add a delete button (for both single or addon cases) */
@@ -76,7 +76,7 @@ export interface TagProps extends BasicProps, React.ComponentPropsWithoutRef<'sp
     /** `Function` Click function for `delete` option, alone does not nothing, but can be reused for other components */
     onDeleteClick?: () => void;
 }
-export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'figure'> {
+export interface ImageProps extends ComposedElementProps, React.ComponentPropsWithoutRef<'figure'> {
     /** `Attribute` `Required` The image source that will be shown */
     src: string;
     /** `Styling` Will add round borders to image's shape */
@@ -84,11 +84,11 @@ export interface ImageProps extends BasicProps, React.ComponentPropsWithoutRef<'
     /** `Styling` Sets image size based on one of fixed ratios/fixed sizes */
     isRounded?: boolean;
 }
-export interface BoxProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
+export interface BoxProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
     /** `Attribute` Reffers to the component or array of components that will be shown inside the box */
     children?: string | React.ReactElement | React.ReactElement[];
 }
-export interface TitleSectionProps extends BasicProps, React.ComponentPropsWithoutRef<'p'> {
+export interface TitleSectionProps extends ElementProps, React.ComponentPropsWithoutRef<'p'> {
     /** `Attribute` Sets the text you want to show */
     text: string;
     /** `Styling` Set text size */
@@ -104,7 +104,7 @@ export interface TitleProps {
     /** `Attribute` Subtitle title configuration object */
     secondary?: TitleSectionProps;
 }
-export interface IconProps extends BasicProps {
+export interface IconProps extends ComposedElementProps {
     /** `Attribute` `Required` Sets the icon key work based on [Material Design icon list](https://pictogrammers.com/library/mdi/) */
     iconLabel: string;
     /** `Attribute` Sets the text you want to show next to the icon */
@@ -118,7 +118,7 @@ export interface IconProps extends BasicProps {
     /** `Styling` Animates the icon spinning 360° */
     isSpinning?: boolean;
 }
-export interface InputProps extends BasicProps {
+export interface InputProps extends ElementProps {
     /** `Attribute` `Required` What type of input will be used */
     type: inputTypes;
     /** `Attribute` The value that will be shown on the input */
@@ -150,7 +150,7 @@ export interface TextAreaProps extends Omit<InputProps, 'isRounded' | 'type'> {
     /** `Styling` Will disable characteristic sizable property by removing its control on bottom-right corner */
     isFixedSize?: boolean;
 }
-export interface DeleteProps extends BasicProps {
+export interface DeleteProps extends ElementProps {
     /** `Styling` Set icons's size */
     size?: Exclude<basicSizeType, 'is-normal'>;
     /** `Function` Click function. Alone does not nothing, but can be reused for other components */
@@ -161,7 +161,7 @@ export interface SelectOption {
     name: string;
     selected?: boolean;
 }
-export interface SelectProps extends BasicProps {
+export interface SelectProps extends ComposedElementProps {
     /** `Attribute` Indicates the options contained on the select */
     options?: SelectOption[];
     /** `Attribute` Indicates how many options will be shown at first glance (before looking for the whole list */
@@ -181,7 +181,7 @@ export interface SelectProps extends BasicProps {
     /** `Function` Click function. Alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface FileProps extends BasicProps {
+export interface FileProps extends ComposedElementProps {
     /** `Attribute` The name of the file to be uploaded */
     fileName?: string;
     /** `Attribute` The icon displayed in file's button" */
@@ -201,15 +201,15 @@ export interface FileProps extends BasicProps {
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onClick?: () => void;
 }
-export interface CheckBoxProps extends BasicProps {
+export interface CheckBoxProps extends ComposedElementProps {
     /** `Attribute` Sets checkbox's text that will be shown next to its control */
-    content?: string | React.ReactElement;
+    content?: string | React.ReactElement | React.ReactElement[];
     /** `Attribute` Will disable the checkbox */
     isDisabled?: boolean;
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style'> {
+export interface RadioButtonItemProps extends Pick<ElementProps, 'testId' | 'style'> {
     /** `Attribute` `Required` Sets checkbox's text*/
     label: string;
     /** `Attribute` Sets the name that will relate this checkbox with the others */
@@ -221,7 +221,7 @@ export interface RadioButtonItemProps extends Pick<BasicProps, 'testId' | 'style
     /** `Function` Click function, alone does not nothing, but can be reused for other components */
     onChange?: () => void;
 }
-export interface RadioButtonProps extends BasicProps {
+export interface RadioButtonProps extends ComposedElementProps {
     /** `Attribute` `Required` Indicates the options contained to be selected */
     options: RadioButtonItemProps[];
     /** `Attribute` `Required` Sets the name that will relate this checkbox with the others */

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

@@ -1,18 +1,4 @@
 /// <reference types="react" />
-export interface BasicProps {
-    /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
-    testId?: string;
-    /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
-    containerTestId?: string;
-    /** `Attribute` Custom CSS classes, applicable for specific scenarios */
-    cssClasses?: string;
-    /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
-    containerCssClasses?: string;
-    /** `Attribute` Custom styling applicable for specific scenarios */
-    style?: React.CSSProperties;
-    /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
-    containerStyle?: React.CSSProperties;
-}
 export interface ContainerProps {
     /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
     containerTestId?: string;
@@ -29,5 +15,5 @@ export interface ElementProps {
     /** `Attribute` Custom styling applicable for specific scenarios */
     style?: React.CSSProperties;
 }
-export interface ComponentProps extends BasicProps, ElementProps {
+export interface ComposedElementProps extends ElementProps, ContainerProps {
 }

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { ElementProps } from './commonProps';
-import { ButtonProps, ColumnProps } from './atomProps';
-import { columnGapType } from '../types/styleTypes';
+import { ButtonProps, ColumnProps, DeleteProps } from './atomProps';
+import { basicColorType, columnGapType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
@@ -23,3 +24,13 @@ export interface ColumnGroupProps extends ElementProps {
     /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
     gap?: columnGapType | null;
 }
+export interface NotificationProps extends ElementProps {
+    /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
+    children?: string | React.ReactElement | React.ReactElement[];
+    /** `Atribute` Includes a `Delete` config object that will be shown */
+    deleteButton?: DeleteProps;
+    /** `Styling` Color based on bulma's color tokens */
+    color?: basicColorType;
+    /** `Styling` Will adjust the selected color with a ligther style */
+    isLightColor?: boolean;
+}

package/dist/esm/index.js

@@ -3228,5 +3228,21 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
     return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map((_columnItem, i) => (React.createElement(Column, Object.assign({ key: `column-group-item-${i}` }, _columnItem))))));
 };
 
-export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
+    const notificationClasses = parseClasses([
+        'notification',
+        color,
+        isLightColor ? 'is-light' : null,
+        cssClasses
+    ]);
+    const notificationTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'notification',
+        parsedClasses: notificationClasses
+    });
+    return (React.createElement("section", { "data-testid": notificationTestId, className: notificationClasses, style: style !== null && style !== void 0 ? style : undefined },
+        deleteButton ? React.createElement(Delete, Object.assign({}, deleteButton)) : null,
+        children));
+};
+
+export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, Notification, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map