reactive-bulma 2.12.0 → 2.13.0

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

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

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

@@ -20,3 +20,4 @@ export { default as MenuItem } from './MenuItem';
 export { default as Image } from './Image';
 export { default as PaginationItem } from './PaginationItem';
 export { default as TabItem } from './TabItem';
+export { default as LevelHeader } from './LevelHeader';

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

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

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

@@ -12,3 +12,4 @@ export { default as Tabs } from './Tabs';
 export { default as InputControl } from './InputControl';
 export { default as PanelBlock } from './PanelBlock';
 export { default as PanelTabs } from './PanelTabs';
+export { default as LevelItem } from '../molecules/LevelItem';

package/dist/cjs/types/components/organisms/Level/index.d.ts

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

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

@@ -1,2 +1,3 @@
 export { default as FormField } from './FormField';
 export { default as Panel } from './Panel';
+export { default as Level } from './Level';

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

@@ -271,3 +271,9 @@ export interface TabItemProps extends ComposedElementProps, ClickeableProps {
     /** `Styling` Used for `Tabs` styling purpose only. Will mark the tab as the one selected among its group */
     isActive?: boolean;
 }
+export interface LevelHeaderProps extends ElementProps {
+    /** `Attribute` `Required` A title in smaller size */
+    header: string;
+    /** `Attribute` `Required` Main value (numeric or text) to be shown in a bigger scale below `header` */
+    value: string | number;
+}

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

@@ -168,4 +168,10 @@ export interface PanelTabsProps extends ElementProps {
     /** `Attribute` `Required` A list of configuration objects that will render a set of tabs */
     tabList: PanelTabItem[];
 }
+export interface LevelItemProps extends ElementProps {
+    /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the level */
+    content: string | React.ReactElement;
+    /** `Styling` Centers item's content horizontally */
+    isCentered?: boolean;
+}
 export {};

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

@@ -1,5 +1,5 @@
 import { ElementProps } from './commonProps';
-import { InputControlProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
+import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
 import { basicColorType } from '../types/styleTypes';
 export interface FormFieldHelperProps {
     text?: string;
@@ -27,3 +27,13 @@ export interface PanelProps extends ElementProps {
     /** `Styling` Color based on bulma's text color tokens */
     color?: basicColorType;
 }
+export interface LevelProps extends ElementProps {
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's left side */
+    leftSide?: LevelItemProps[];
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's center */
+    centerSide?: LevelItemProps[];
+    /** `Attribute` A list of `LevelItem` configurations that will displayed in Level's right side */
+    rightSide?: LevelItemProps[];
+    /** `Styling` Will adjust the navigator on horizontal on mobile as well */
+    isMobile?: boolean;
+}

package/dist/esm/index.js

@@ -3284,6 +3284,13 @@ const TabItem = ({ testId = null, containerTestId = null, cssClasses = null, con
         React.createElement("span", { "data-testid": tabItemTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, text)));
 };
 
+const LevelHeader = ({ testId = null, cssClasses = null, style = null, header, value }) => {
+    const levelHeaderTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level-header', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
+    return (React.createElement("section", { "data-testid": levelHeaderTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement("p", { className: 'heading' }, header),
+        React.createElement("p", { className: 'title' }, value)));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3609,6 +3616,29 @@ const PanelTabs = ({ testId = null, cssClasses = null, style = null, tabList })
     })));
 };
 
+const LevelItem = ({ testId = null, cssClasses = null, style = null, content, isCentered = false }) => {
+    const levelItemClasses = parseClasses([
+        'level-item',
+        isCentered ? 'has-text-centered' : null,
+        cssClasses
+    ]);
+    const levelItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'level-item',
+        parsedClasses: levelItemClasses,
+        rules: [
+            {
+                regExp: /is-|has-/gm,
+                replacer: '-'
+            },
+            {
+                regExp: /level-item/gm,
+                replacer: ''
+            }
+        ]
+    });
+    return (React.createElement("section", { "data-testid": levelItemTestId, className: levelItemClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3662,5 +3692,19 @@ const Panel = ({ testId = null, cssClasses = null, style = null, headerText, pan
         blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
 };
 
-export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
+const renderLevelSection = (levelItemList) => levelItemList.map(_levelItemConfig => (React.createElement(LevelItem, Object.assign({ key: `level-item-${generateKey()}` }, _levelItemConfig))));
+const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null, centerSide = null, rightSide = null, isMobile = false }) => {
+    const levelClasses = parseClasses([
+        'level',
+        isMobile ? 'is-mobile' : null,
+        cssClasses
+    ]);
+    const levelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level', parsedClasses: levelClasses });
+    return (React.createElement("nav", { "data-testid": levelTestId, className: levelClasses, style: style !== null && style !== void 0 ? style : undefined },
+        leftSide ? (React.createElement("section", { className: 'level-left' }, renderLevelSection(leftSide))) : null,
+        centerSide ? renderLevelSection(centerSide) : null,
+        rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, FormField, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map