reactive-bulma 2.12.0 → 2.13.0

package/README.md

@@ -153,8 +153,6 @@ Reactive bulma's documentation, included in this repo in the root directory, is
 
 Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
 
-Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
-
 ## Usage
 
 ```jsx
@@ -178,6 +176,8 @@ After some time, I understood that creating component files is a repetitive and
 - Then, the assistant will ask in which folder you want to create it (based on its type following [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/))
 - At last, the script should create all base files to reduce time and focus on custom implementation.
 
+Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
+
 ### How to update all dependencies
 
 In case you wanted to make your own fork, I recommend you to updated at least weekly using a custom command `npm run update`, which will run the following commands in order:

package/dist/cjs/index.js

@@ -3286,6 +3286,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);
@@ -3611,6 +3618,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) {
@@ -3664,6 +3694,20 @@ const Panel = ({ testId = null, cssClasses = null, style = null, headerText, pan
         blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
 };
 
+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));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -3683,6 +3727,9 @@ exports.Icon = Icon;
 exports.Image = Image;
 exports.Input = Input;
 exports.InputControl = InputControl;
+exports.Level = Level;
+exports.LevelHeader = LevelHeader;
+exports.LevelItem = LevelItem;
 exports.Menu = Menu;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;