reactive-bulma 2.11.0 → 2.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +2 -2
- package/dist/cjs/index.js +124 -34
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/LevelHeader/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +1 -0
- package/dist/cjs/types/components/molecules/LevelItem/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/PanelBlock/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/PanelTabs/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +3 -1
- package/dist/cjs/types/components/{molecules → organisms}/FormField/index.d.ts +1 -1
- package/dist/cjs/types/components/organisms/Level/index.d.ts +4 -0
- package/dist/cjs/types/components/organisms/Panel/index.d.ts +4 -0
- package/dist/cjs/types/components/organisms/index.d.ts +3 -0
- package/dist/cjs/types/functions/generators.d.ts +4 -0
- package/dist/cjs/types/functions/parsers.d.ts +1 -4
- package/dist/cjs/types/functions/tests/generators.test.d.ts +1 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +8 -2
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +30 -15
- package/dist/cjs/types/interfaces/organismProps.d.ts +39 -0
- package/dist/cjs/types/types/domTypes.d.ts +3 -2
- package/dist/esm/index.js +119 -35
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/LevelHeader/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +1 -0
- package/dist/esm/types/components/molecules/LevelItem/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/PanelBlock/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/PanelTabs/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +3 -1
- package/dist/esm/types/components/{molecules → organisms}/FormField/index.d.ts +1 -1
- package/dist/esm/types/components/organisms/Level/index.d.ts +4 -0
- package/dist/esm/types/components/organisms/Panel/index.d.ts +4 -0
- package/dist/esm/types/components/organisms/index.d.ts +3 -0
- package/dist/esm/types/functions/generators.d.ts +4 -0
- package/dist/esm/types/functions/parsers.d.ts +1 -4
- package/dist/esm/types/functions/tests/generators.test.d.ts +1 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +8 -2
- package/dist/esm/types/interfaces/moleculeProps.d.ts +30 -15
- package/dist/esm/types/interfaces/organismProps.d.ts +39 -0
- package/dist/esm/types/types/domTypes.d.ts +3 -2
- package/dist/index.d.ts +87 -17
- package/package.json +11 -11
package/LICENSE
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
MIT License
|
2
2
|
|
3
|
-
Copyright (c)
|
3
|
+
Copyright (c) 2024 Nicolás Omar González Passerino
|
4
4
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
package/README.md
CHANGED
@@ -153,8 +153,6 @@ Reactive bulma's documentation, included in this repo in the root directory, is
|
|
153
153
|
|
154
154
|
Learn more about `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
|
155
155
|
|
156
|
-
Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
|
157
|
-
|
158
156
|
## Usage
|
159
157
|
|
160
158
|
```jsx
|
@@ -178,6 +176,8 @@ After some time, I understood that creating component files is a repetitive and
|
|
178
176
|
- 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/))
|
179
177
|
- At last, the script should create all base files to reduce time and focus on custom implementation.
|
180
178
|
|
179
|
+
Learn more about `Hygen` by reading its [documentation](https://www.hygen.io/docs/quick-start).
|
180
|
+
|
181
181
|
### How to update all dependencies
|
182
182
|
|
183
183
|
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
CHANGED
@@ -2861,13 +2861,6 @@ const parseTestId = (config) => {
|
|
2861
2861
|
}
|
2862
2862
|
return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
|
2863
2863
|
};
|
2864
|
-
const parseKey = (max = 5000, min = 1) => {
|
2865
|
-
max = Math.floor(max);
|
2866
|
-
min = Math.ceil(min);
|
2867
|
-
const secureRandomNumbers = new Uint32Array(1);
|
2868
|
-
window.crypto.getRandomValues(secureRandomNumbers);
|
2869
|
-
return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
|
2870
|
-
};
|
2871
2864
|
|
2872
2865
|
const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = null, isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, isSelected = false, size = null, onClick = null }) => {
|
2873
2866
|
const buttonClasses = parseClasses([
|
@@ -3159,7 +3152,7 @@ const CheckBox = ({ testId = null, containerTestId = null, cssClasses = null, co
|
|
3159
3152
|
content));
|
3160
3153
|
};
|
3161
3154
|
|
3162
|
-
//
|
3155
|
+
// FUNCTIONS
|
3163
3156
|
const renderRadioButton = (config, index) => {
|
3164
3157
|
const { testId = null, label, name, isChecked = false, isDisabled = false, style = null, onChange } = config;
|
3165
3158
|
const radioButtonTestId = testId !== null && testId !== void 0 ? testId : `test-radio-button-item-${index}`;
|
@@ -3283,20 +3276,29 @@ const PaginationItem = ({ testId = null, cssClasses = null, style = null, text,
|
|
3283
3276
|
};
|
3284
3277
|
|
3285
3278
|
const TabItem = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, icon = null, text, onClick = null }) => {
|
3286
|
-
const tabItemContainerClasses = parseClasses([
|
3287
|
-
'tabItem-container',
|
3288
|
-
null,
|
3289
|
-
containerCssClasses
|
3290
|
-
]);
|
3291
|
-
const tabItemClasses = parseClasses(['tabItem', cssClasses]);
|
3292
3279
|
const tabItemContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
|
3293
|
-
tag: '
|
3294
|
-
parsedClasses:
|
3280
|
+
tag: 'tab-item-container',
|
3281
|
+
parsedClasses: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : ''
|
3295
3282
|
});
|
3296
|
-
const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: '
|
3297
|
-
return (React.createElement("a", { "data-testid": tabItemContainerTestId, className:
|
3283
|
+
const tabItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tab-item', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
|
3284
|
+
return (React.createElement("a", { "data-testid": tabItemContainerTestId, className: containerCssClasses !== null && containerCssClasses !== void 0 ? containerCssClasses : undefined, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined },
|
3298
3285
|
icon ? React.createElement(Icon, Object.assign({}, icon)) : null,
|
3299
|
-
React.createElement("span", { "data-testid": tabItemTestId, className:
|
3286
|
+
React.createElement("span", { "data-testid": tabItemTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, text)));
|
3287
|
+
};
|
3288
|
+
|
3289
|
+
const LevelHeader = ({ testId = null, cssClasses = null, style = null, header, value }) => {
|
3290
|
+
const levelHeaderTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level-header', parsedClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : '' });
|
3291
|
+
return (React.createElement("section", { "data-testid": levelHeaderTestId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined },
|
3292
|
+
React.createElement("p", { className: 'heading' }, header),
|
3293
|
+
React.createElement("p", { className: 'title' }, value)));
|
3294
|
+
};
|
3295
|
+
|
3296
|
+
const generateKey = (max = 5000, min = 1) => {
|
3297
|
+
max = Math.floor(max);
|
3298
|
+
min = Math.ceil(min);
|
3299
|
+
const secureRandomNumbers = new Uint32Array(1);
|
3300
|
+
window.crypto.getRandomValues(secureRandomNumbers);
|
3301
|
+
return Math.floor(secureRandomNumbers[0] * (max - min) + min).toString();
|
3300
3302
|
};
|
3301
3303
|
|
3302
3304
|
const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
|
@@ -3325,7 +3327,7 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
|
|
3325
3327
|
const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
|
3326
3328
|
!hasSelectedButton;
|
3327
3329
|
const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
|
3328
|
-
return (React.createElement(Button, Object.assign({ key: `button-group-item-${
|
3330
|
+
return (React.createElement(Button, Object.assign({ key: `button-group-item-${generateKey()}` }, buttonConfig)));
|
3329
3331
|
})));
|
3330
3332
|
};
|
3331
3333
|
|
@@ -3353,7 +3355,7 @@ const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfCol
|
|
3353
3355
|
tag: 'columns',
|
3354
3356
|
parsedClasses: columnGroupClasses
|
3355
3357
|
});
|
3356
|
-
return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${
|
3358
|
+
return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map(columnItemConfig => (React.createElement(Column, Object.assign({ key: `column-group-item-${generateKey()}` }, columnItemConfig))))));
|
3357
3359
|
};
|
3358
3360
|
|
3359
3361
|
const Notification = ({ testId = null, cssClasses = null, style = null, children = null, deleteButton = null, color = null, isLightColor = null }) => {
|
@@ -3395,14 +3397,14 @@ const Breadcrumbs = ({ testId = 'breadcrumbs', containerTestId = null, cssClasse
|
|
3395
3397
|
]
|
3396
3398
|
});
|
3397
3399
|
return (React.createElement("nav", { "data-testid": breadcrumbsContainerTestId, className: breadcrumbsContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
|
3398
|
-
React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${
|
3400
|
+
React.createElement("ul", { "data-testid": testId, className: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined }, items.map(itemConfig => (React.createElement(BreadcrumbItem, Object.assign({ key: `breadcrumb-item-${generateKey()}` }, itemConfig)))))));
|
3399
3401
|
};
|
3400
3402
|
|
3401
3403
|
const renderDropdownMenu = (items) => (React.createElement("section", { className: 'dropdown-content' }, items.map((dropdownItemConfig, i) => {
|
3402
3404
|
const isFirstItemInMenu = items.length > 1 && i === 0;
|
3403
|
-
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${
|
3404
|
-
React.createElement(DropdownItem, { key: `dropdown-item-${
|
3405
|
-
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${
|
3405
|
+
return isFirstItemInMenu ? (React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))) : (React.createElement("section", { key: `dropdown-item-${generateKey()}-section` },
|
3406
|
+
React.createElement(DropdownItem, { key: `dropdown-item-${generateKey()}-divider`, type: 'divider', itemText: 'divider' }),
|
3407
|
+
React.createElement(DropdownItem, Object.assign({ key: `dropdown-item-${generateKey()}` }, dropdownItemConfig))));
|
3406
3408
|
})));
|
3407
3409
|
const Dropdown = ({ testId = null, cssClasses = null, style = null, inputText, dropdownPointer = 'dropdown-menu', listOfItems }) => {
|
3408
3410
|
const [isMenuActive, setIsMenuActive] = reactExports.useState(false);
|
@@ -3434,12 +3436,12 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
|
|
3434
3436
|
const menuListTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu-list', parsedClasses: menuListClasses });
|
3435
3437
|
return (React.createElement("ul", { "data-testid": menuListTestId, className: menuListClasses, style: style !== null && style !== void 0 ? style : undefined }, itemList.map(item => {
|
3436
3438
|
if ('subListTitle' in item) {
|
3437
|
-
return (React.createElement("li", { key: `sub-list-menu-item-${
|
3439
|
+
return (React.createElement("li", { key: `sub-list-menu-item-${generateKey()}` },
|
3438
3440
|
React.createElement(MenuItem, Object.assign({}, item.subListTitle)),
|
3439
|
-
React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${
|
3441
|
+
React.createElement("ul", null, item.subItems.map(subItem => (React.createElement(MenuItem, Object.assign({ key: `sub-list-menu-sub-item-${generateKey()}` }, subItem)))))));
|
3440
3442
|
}
|
3441
3443
|
else {
|
3442
|
-
return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${
|
3444
|
+
return (React.createElement(MenuItem, Object.assign({ key: `sub-list-item-${generateKey()}` }, item)));
|
3443
3445
|
}
|
3444
3446
|
})));
|
3445
3447
|
};
|
@@ -3447,9 +3449,9 @@ const MenuList = ({ testId = null, cssClasses = null, style = null, itemList })
|
|
3447
3449
|
const Menu = ({ testId = null, cssClasses = null, style = null, menuSections }) => {
|
3448
3450
|
const menuClasses = parseClasses(['menu', cssClasses]);
|
3449
3451
|
const menuTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'menu', parsedClasses: menuClasses });
|
3450
|
-
return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${
|
3451
|
-
React.createElement("p", { key: `section-label-${
|
3452
|
-
React.createElement(MenuList, { key: `section-menu-list-${
|
3452
|
+
return (React.createElement("aside", { "data-testid": menuTestId, className: menuClasses, style: style !== null && style !== void 0 ? style : undefined }, menuSections.map(section => (React.createElement(React.Fragment, { key: `section-${generateKey()}` },
|
3453
|
+
React.createElement("p", { key: `section-label-${generateKey()}`, className: 'menu-label' }, section.label),
|
3454
|
+
React.createElement(MenuList, { key: `section-menu-list-${generateKey()}`, itemList: section.itemList }))))));
|
3453
3455
|
};
|
3454
3456
|
|
3455
3457
|
const renderEllipsis = (hasEllipsis) => hasEllipsis ? (React.createElement("li", null,
|
@@ -3474,7 +3476,7 @@ const renderPages = (pages, hasEllipsis, ellipsisItems) => {
|
|
3474
3476
|
}
|
3475
3477
|
if (!hasEllipsis ||
|
3476
3478
|
(pageIndex > ellipsisItems && pageIndex < lastEllipsisItemIndex)) {
|
3477
|
-
return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${
|
3479
|
+
return (React.createElement(PaginationItem, Object.assign({ key: `pagination-item-${generateKey()}` }, pageItem)));
|
3478
3480
|
}
|
3479
3481
|
if (pageIndex === --length) {
|
3480
3482
|
return (React.createElement(React.Fragment, { key: `last-pagination-item` },
|
@@ -3546,7 +3548,7 @@ const Tabs = ({ testId = null, cssClasses = null, style = null, tabs, alignment
|
|
3546
3548
|
]);
|
3547
3549
|
const tabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'tabs', parsedClasses: tabsClasses });
|
3548
3550
|
return (React.createElement("section", { "data-testid": tabsTestId, className: tabsClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3549
|
-
React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${
|
3551
|
+
React.createElement("ul", null, tabs.map(tabConfig => (React.createElement("li", { key: `tab-item-${generateKey()}`, className: tabConfig.isActive ? 'is-active' : undefined }, React.createElement(TabItem, Object.assign({}, tabConfig))))))));
|
3550
3552
|
};
|
3551
3553
|
|
3552
3554
|
const renderIcon = (iconConfig) => iconConfig ? React.createElement(Icon, Object.assign({}, iconConfig)) : null;
|
@@ -3581,10 +3583,68 @@ const InputControl = ({ testId = null, cssClasses = null, style = null, inputCon
|
|
3581
3583
|
renderIcon(rightIcon ? Object.assign(Object.assign({}, rightIcon), { position: 'is-right' }) : undefined)));
|
3582
3584
|
};
|
3583
3585
|
|
3586
|
+
const convertConfigToComponent = ({ type, props }, testId, cssClasses, style, blockText) => {
|
3587
|
+
switch (type) {
|
3588
|
+
case 'icon': {
|
3589
|
+
const panelBlockIconClasses = parseClasses(['panel-icon', cssClasses]);
|
3590
|
+
const panelBlockIconTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-icon', parsedClasses: panelBlockIconClasses });
|
3591
|
+
return (React.createElement(React.Fragment, null,
|
3592
|
+
React.createElement("span", { "data-testid": panelBlockIconTestId, className: panelBlockIconClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3593
|
+
React.createElement(Icon, Object.assign({}, props))),
|
3594
|
+
blockText));
|
3595
|
+
}
|
3596
|
+
case 'control':
|
3597
|
+
return React.createElement(InputControl, Object.assign({}, props));
|
3598
|
+
case 'button':
|
3599
|
+
return React.createElement(Button, Object.assign({}, props));
|
3600
|
+
}
|
3601
|
+
};
|
3602
|
+
const PanelBlock = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, config, blockText = null, isActive = false, onClick }) => {
|
3603
|
+
const panelBlockLinkClasses = parseClasses([
|
3604
|
+
'panel-block',
|
3605
|
+
isActive ? 'is-active' : null,
|
3606
|
+
containerCssClasses
|
3607
|
+
]);
|
3608
|
+
const panelBlockLinkTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({ tag: 'panel-block', parsedClasses: panelBlockLinkClasses });
|
3609
|
+
return (React.createElement("a", { "data-testid": panelBlockLinkTestId, className: panelBlockLinkClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, convertConfigToComponent(config, testId, cssClasses, style, blockText)));
|
3610
|
+
};
|
3611
|
+
|
3612
|
+
const PanelTabs = ({ testId = null, cssClasses = null, style = null, tabList }) => {
|
3613
|
+
const panelTabsClasses = parseClasses(['panel-tabs', cssClasses]);
|
3614
|
+
const panelTabsTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel-tabs', parsedClasses: panelTabsClasses });
|
3615
|
+
return (React.createElement("section", { "data-testid": panelTabsTestId, className: panelTabsClasses, style: style !== null && style !== void 0 ? style : undefined }, tabList.map(tabItem => {
|
3616
|
+
var _a;
|
3617
|
+
return (React.createElement("a", { key: `tab-item-${generateKey()}`, className: tabItem.isActive ? 'is-active' : undefined, "aria-hidden": 'true', onClick: (_a = tabItem.onClick) !== null && _a !== void 0 ? _a : undefined }, tabItem.text));
|
3618
|
+
})));
|
3619
|
+
};
|
3620
|
+
|
3621
|
+
const LevelItem = ({ testId = null, cssClasses = null, style = null, content, isCentered = false }) => {
|
3622
|
+
const levelItemClasses = parseClasses([
|
3623
|
+
'level-item',
|
3624
|
+
isCentered ? 'has-text-centered' : null,
|
3625
|
+
cssClasses
|
3626
|
+
]);
|
3627
|
+
const levelItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
|
3628
|
+
tag: 'level-item',
|
3629
|
+
parsedClasses: levelItemClasses,
|
3630
|
+
rules: [
|
3631
|
+
{
|
3632
|
+
regExp: /is-|has-/gm,
|
3633
|
+
replacer: '-'
|
3634
|
+
},
|
3635
|
+
{
|
3636
|
+
regExp: /level-item/gm,
|
3637
|
+
replacer: ''
|
3638
|
+
}
|
3639
|
+
]
|
3640
|
+
});
|
3641
|
+
return (React.createElement("section", { "data-testid": levelItemTestId, className: levelItemClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
|
3642
|
+
};
|
3643
|
+
|
3584
3644
|
const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
|
3585
3645
|
const renderFieldBody = (inputControlConfig, isGrouped) => {
|
3586
3646
|
if (isGrouped) {
|
3587
|
-
return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${
|
3647
|
+
return Array.isArray(inputControlConfig) ? (inputControlConfig.map((_singleConfig, i) => (React.createElement(InputControl, Object.assign({ key: `grouped-input-control-${generateKey()}`, testId: `test-grouped-input-control-${i}` }, _singleConfig))))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
|
3588
3648
|
}
|
3589
3649
|
else {
|
3590
3650
|
return Array.isArray(inputControlConfig) ? (React.createElement(InputControl, Object.assign({}, inputControlConfig[0]))) : (React.createElement(InputControl, Object.assign({}, inputControlConfig)));
|
@@ -3624,6 +3684,30 @@ const FormField = ({ testId = null, cssClasses = null, style = null, labelText =
|
|
3624
3684
|
renderFieldHelper(helperConfig)))));
|
3625
3685
|
};
|
3626
3686
|
|
3687
|
+
const generateHeader = (headerText) => (React.createElement("p", { className: 'panel-heading' }, headerText));
|
3688
|
+
const Panel = ({ testId = null, cssClasses = null, style = null, headerText, panelTabs = null, blockList, color = null }) => {
|
3689
|
+
const panelClasses = parseClasses(['panel', color, cssClasses]);
|
3690
|
+
const panelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'panel', parsedClasses: panelClasses });
|
3691
|
+
return (React.createElement("article", { "data-testid": panelTestId, className: panelClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3692
|
+
generateHeader(headerText),
|
3693
|
+
panelTabs ? React.createElement(PanelTabs, Object.assign({}, panelTabs)) : null,
|
3694
|
+
blockList.map(blockConfig => (React.createElement(PanelBlock, Object.assign({ key: `panel-block-item-${generateKey()}` }, blockConfig))))));
|
3695
|
+
};
|
3696
|
+
|
3697
|
+
const renderLevelSection = (levelItemList) => levelItemList.map(_levelItemConfig => (React.createElement(LevelItem, Object.assign({ key: `level-item-${generateKey()}` }, _levelItemConfig))));
|
3698
|
+
const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null, centerSide = null, rightSide = null, isMobile = false }) => {
|
3699
|
+
const levelClasses = parseClasses([
|
3700
|
+
'level',
|
3701
|
+
isMobile ? 'is-mobile' : null,
|
3702
|
+
cssClasses
|
3703
|
+
]);
|
3704
|
+
const levelTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'level', parsedClasses: levelClasses });
|
3705
|
+
return (React.createElement("nav", { "data-testid": levelTestId, className: levelClasses, style: style !== null && style !== void 0 ? style : undefined },
|
3706
|
+
leftSide ? (React.createElement("section", { className: 'level-left' }, renderLevelSection(leftSide))) : null,
|
3707
|
+
centerSide ? renderLevelSection(centerSide) : null,
|
3708
|
+
rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
|
3709
|
+
};
|
3710
|
+
|
3627
3711
|
exports.Block = Block;
|
3628
3712
|
exports.Box = Box;
|
3629
3713
|
exports.BreadcrumbItem = BreadcrumbItem;
|
@@ -3643,6 +3727,9 @@ exports.Icon = Icon;
|
|
3643
3727
|
exports.Image = Image;
|
3644
3728
|
exports.Input = Input;
|
3645
3729
|
exports.InputControl = InputControl;
|
3730
|
+
exports.Level = Level;
|
3731
|
+
exports.LevelHeader = LevelHeader;
|
3732
|
+
exports.LevelItem = LevelItem;
|
3646
3733
|
exports.Menu = Menu;
|
3647
3734
|
exports.MenuItem = MenuItem;
|
3648
3735
|
exports.MenuList = MenuList;
|
@@ -3651,6 +3738,9 @@ exports.Modal = Modal;
|
|
3651
3738
|
exports.Notification = Notification;
|
3652
3739
|
exports.Pagination = Pagination;
|
3653
3740
|
exports.PaginationItem = PaginationItem;
|
3741
|
+
exports.Panel = Panel;
|
3742
|
+
exports.PanelBlock = PanelBlock;
|
3743
|
+
exports.PanelTabs = PanelTabs;
|
3654
3744
|
exports.ProgressBar = ProgressBar;
|
3655
3745
|
exports.RadioButton = RadioButton;
|
3656
3746
|
exports.Select = Select;
|