reactive-bulma 2.17.0 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/dist/cjs/index.js +139 -3
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/atoms/NavBarItem/index.d.ts +4 -0
  4. package/dist/cjs/types/components/atoms/index.d.ts +1 -0
  5. package/dist/cjs/types/components/molecules/NavBarBrand/index.d.ts +4 -0
  6. package/dist/cjs/types/components/molecules/NavBarDropdown/index.d.ts +4 -0
  7. package/dist/cjs/types/components/molecules/Section/index.d.ts +4 -0
  8. package/dist/cjs/types/components/molecules/index.d.ts +3 -0
  9. package/dist/cjs/types/components/organisms/NavBar/index.d.ts +4 -0
  10. package/dist/cjs/types/components/organisms/index.d.ts +1 -0
  11. package/dist/cjs/types/interfaces/atomProps.d.ts +7 -1
  12. package/dist/cjs/types/interfaces/moleculeProps.d.ts +34 -3
  13. package/dist/cjs/types/interfaces/organismProps.d.ts +27 -5
  14. package/dist/cjs/types/types/domTypes.d.ts +2 -0
  15. package/dist/cjs/types/types/styleTypes.d.ts +2 -0
  16. package/dist/esm/index.js +135 -4
  17. package/dist/esm/index.js.map +1 -1
  18. package/dist/esm/types/components/atoms/NavBarItem/index.d.ts +4 -0
  19. package/dist/esm/types/components/atoms/index.d.ts +1 -0
  20. package/dist/esm/types/components/molecules/NavBarBrand/index.d.ts +4 -0
  21. package/dist/esm/types/components/molecules/NavBarDropdown/index.d.ts +4 -0
  22. package/dist/esm/types/components/molecules/Section/index.d.ts +4 -0
  23. package/dist/esm/types/components/molecules/index.d.ts +3 -0
  24. package/dist/esm/types/components/organisms/NavBar/index.d.ts +4 -0
  25. package/dist/esm/types/components/organisms/index.d.ts +1 -0
  26. package/dist/esm/types/interfaces/atomProps.d.ts +7 -1
  27. package/dist/esm/types/interfaces/moleculeProps.d.ts +34 -3
  28. package/dist/esm/types/interfaces/organismProps.d.ts +27 -5
  29. package/dist/esm/types/types/domTypes.d.ts +2 -0
  30. package/dist/esm/types/types/styleTypes.d.ts +2 -0
  31. package/dist/index.d.ts +75 -3
  32. package/package.json +6 -6
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { NavBarItemProps } from '../../../interfaces/atomProps';
3
+ declare const NavBarItem: React.FC<NavBarItemProps>;
4
+ export default NavBarItem;
@@ -22,3 +22,4 @@ export { default as PaginationItem } from './PaginationItem';
22
22
  export { default as TabItem } from './TabItem';
23
23
  export { default as LevelHeader } from './LevelHeader';
24
24
  export { default as Tile } from './Tile';
25
+ export { default as NavBarItem } from './NavBarItem';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { NavBarBrandProps } from '../../../interfaces/moleculeProps';
3
+ declare const NavBarBrand: React.FC<NavBarBrandProps>;
4
+ export default NavBarBrand;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { NavBarDropdownProps } from '../../../interfaces/moleculeProps';
3
+ declare const NavBarDropdown: React.FC<NavBarDropdownProps>;
4
+ export default NavBarDropdown;
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { SectionProps } from '../../../interfaces/moleculeProps';
3
+ declare const Section: React.FC<SectionProps>;
4
+ export default Section;
@@ -16,3 +16,6 @@ export { default as LevelItem } from '../molecules/LevelItem';
16
16
  export { default as TileBox } from './TileBox';
17
17
  export { default as Footer } from './Footer';
18
18
  export { default as Media } from './Media';
19
+ export { default as Section } from './Section';
20
+ export { default as NavBarBrand } from './NavBarBrand';
21
+ export { default as NavBarDropdown } from './NavBarDropdown';
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { NavBarProps } from '../../../interfaces/organismProps';
3
+ declare const NavBar: React.FC<NavBarProps>;
4
+ export default NavBar;
@@ -3,3 +3,4 @@ export { default as Panel } from './Panel';
3
3
  export { default as Level } from './Level';
4
4
  export { default as Hero } from './Hero';
5
5
  export { default as TileGroup } from './TileGroup';
6
+ export { default as NavBar } from './NavBar';
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
3
3
  import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
4
- import { DropdownItemType, InputType, ChildrenType, TileContextType } from '../types/domTypes';
4
+ import { DropdownItemType, InputType, ChildrenType, TileContextType, SingleChildType } from '../types/domTypes';
5
5
  export interface ColumnProps extends ElementProps, React.ComponentPropsWithoutRef<'section'> {
6
6
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
7
7
  children?: ChildrenType;
@@ -289,3 +289,9 @@ export interface TileProps extends ElementProps {
289
289
  /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
290
290
  isVertical?: boolean;
291
291
  }
292
+ export interface NavBarItemProps extends ElementProps, ClickeableProps {
293
+ /** `Attribute` `Required` Reffers to the component or string that will be shown inside the item */
294
+ children: SingleChildType;
295
+ /** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
296
+ isActive?: boolean;
297
+ }
@@ -1,6 +1,6 @@
1
1
  import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
2
- import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
3
- import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType } from '../types/styleTypes';
2
+ import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
3
+ import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType } from '../types/styleTypes';
4
4
  import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
5
5
  export interface ButtonGroupProps extends ElementProps {
6
6
  /** `Atribute` `Required` Array of `Button` objects that will be shown */
@@ -41,7 +41,7 @@ export interface BreadcrumbsProps extends ComposedElementProps {
41
41
  alignment?: RightCenteredAlignType | null;
42
42
  /** `Styling` Will adjust element position on screen */
43
43
  separator?: BreadcrumbSeparatorType | null;
44
- /** `Styling` Set button's size on bulma's size tokens */
44
+ /** `Styling` Set breadcrumb's size on bulma's size tokens */
45
45
  size?: SizeWithoutNormalType;
46
46
  }
47
47
  export interface DropdownProps extends ElementProps {
@@ -189,4 +189,35 @@ export interface MediaProps extends ElementProps {
189
189
  /** `Attribute` Reffers to the component or string content that will be shown inside the component's right side */
190
190
  rightContent?: SingleChildType;
191
191
  }
192
+ export interface SectionProps extends ElementProps {
193
+ /** `Attribute` `Required` Reffers to the component or string content that will be shown inside the section */
194
+ content: SingleChildType;
195
+ /** `Styling` Set button's size on bulma's size tokens */
196
+ size?: MediumAndLargeSizeType;
197
+ }
198
+ export interface NavBarDropdownProps extends ComposedElementProps {
199
+ /** `Attribute` `Required` It will show the presentation text to be clicked or hovered in order to display its menu */
200
+ text: string;
201
+ /** `Attribute` `Required` A list of configuration objects that will render in dropdown's menu. Those can be items or dividers */
202
+ items: Array<NavBarItemProps | 'divider'>;
203
+ /** `Styling` Used for `NavBar` styling purpose only. Will set the dropdown on a specific position based on the proveded value */
204
+ position?: RightLeftAlignType;
205
+ /** `Styling` Used to display dropdown's menu when user clicks on its text */
206
+ isActive?: boolean;
207
+ /** `Styling` Similar to `isActive`, but will display when user hovers its pointer on its text */
208
+ isHoverable?: boolean;
209
+ /** `Styling` Sets dropdown's menu on top of the text instead default styling */
210
+ hasDropdownUp?: boolean;
211
+ /** `Styling` Sets dropdown's menu design like a box, also adds some animation when its diplayed */
212
+ hasBoxedMenu?: boolean;
213
+ }
214
+ interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
215
+ children: ImageProps;
216
+ }
217
+ export interface NavBarBrandProps extends ElementProps {
218
+ /** `Attribute` `Required` Configuration object to inject a NavBarItem with a Image configuration as its children */
219
+ brandConfig: BrandConfigProps;
220
+ /** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
221
+ isBurgerActive?: boolean;
222
+ }
192
223
  export {};
@@ -1,8 +1,8 @@
1
1
  import { ElementProps } from './commonProps';
2
- import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
3
- import { BasicColorType, SizeWithoutNormalType } from '../types/styleTypes';
4
- import { ChildrenType } from '../types/domTypes';
5
- import { TileProps } from './atomProps';
2
+ import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
3
+ import { BasicColorType, SizeWithHeightType } from '../types/styleTypes';
4
+ import { ChildrenType, NavBarFixedPositionType } from '../types/domTypes';
5
+ import { NavBarItemProps, TileProps } from './atomProps';
6
6
  export interface FormFieldHelperProps {
7
7
  text?: string;
8
8
  color?: BasicColorType;
@@ -47,7 +47,7 @@ export interface HeroProps extends ElementProps {
47
47
  /** `Attribute` Designated section for hero's footer, it will be visible only if container's `size` is setted to `is-fullheight` */
48
48
  footer?: ChildrenType;
49
49
  /** `Styling` Set hero's size */
50
- size?: SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
50
+ size?: SizeWithHeightType;
51
51
  /** `Styling` Color based on bulma's text color tokens */
52
52
  color?: BasicColorType;
53
53
  }
@@ -55,3 +55,25 @@ export interface TileGroupProps extends ElementProps, Pick<TileProps, 'context'
55
55
  /** `Attribute` `Required` A list of `Title` configurations that will be displayed in a grid mode on the screen */
56
56
  groupConfig: TileProps[];
57
57
  }
58
+ export interface NavBarMenuProps {
59
+ itemList: Array<NavBarItemProps | NavBarDropdownProps>;
60
+ showInMobile?: boolean;
61
+ }
62
+ export interface NavBarProps extends ElementProps {
63
+ /** `Attribute` Configuration object for navbar's left section, it needs of a `NavBarBrand` object to be displayed at NavBar's start */
64
+ brandConfig?: NavBarBrandProps;
65
+ /** `Attribute` Configuration object for navbar's left section, it needs of a list of `NavBarItem` or `NavBarDropdown` objects to be displayed */
66
+ itemsAtStart?: NavBarMenuProps;
67
+ /** `Attribute` Configuration object for navbar's right section, it needs of a list of `NavBarItem` or `NavBarDropdown` objects to be displayed */
68
+ itemsAtEnd?: NavBarMenuProps;
69
+ /** `Styling` Sets navbar's position at screen's top or bottom */
70
+ fixedPosition?: NavBarFixedPositionType;
71
+ /** `Styling` Color based on bulma's text color tokens */
72
+ color?: BasicColorType;
73
+ /** `Styling` Sets navbar's color as transparent */
74
+ isTransparent?: boolean;
75
+ /** `Styling` Adds a small padding around the navbar */
76
+ isSpaced?: boolean;
77
+ /** `Styling` Adds a small shadow on navbar's bottom */
78
+ hasShadow?: boolean;
79
+ }
@@ -11,4 +11,6 @@ export declare enum IconSizeEnum {
11
11
  'is-large' = 48
12
12
  }
13
13
  export type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';
14
+ export type HeroContentType = 'head' | 'body' | 'foot';
14
15
  export type MediaSectionType = 'left' | 'content' | 'right';
16
+ export type NavBarFixedPositionType = 'top' | 'bottom';
@@ -8,6 +8,8 @@ export type TextColorType = 'has-text-white' | 'has-text-black' | 'has-text-ligh
8
8
  export type FixedImageSizeType = 'is-16x16' | 'is-24x24' | 'is-32x32' | 'is-48x48' | 'is-64x64' | 'is-96x96' | 'is-128x128' | 'is-square' | 'is-1by1' | 'is-5by4' | 'is-4by3' | 'is-3by2' | 'is-5by3' | 'is-16by9' | 'is-2by1' | 'is-3by1' | 'is-4by5' | 'is-3by4' | 'is-2by3' | 'is-3by5' | 'is-9by16' | 'is-1by2' | 'is-1by3';
9
9
  export type ElementSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
10
10
  export type SizeWithoutNormalType = Exclude<ElementSizeType, 'is-normal'>;
11
+ export type SizeWithHeightType = SizeWithoutNormalType | 'is-halfheight' | 'is-fullheight';
12
+ export type MediumAndLargeSizeType = Exclude<SizeWithoutNormalType, 'is-small'>;
11
13
  export type IconColorModeType = 'light' | 'dark';
12
14
  export type ColumnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
13
15
  export type ElementAlignType = 'is-centered' | 'is-right' | 'is-left';
package/dist/esm/index.js CHANGED
@@ -3317,6 +3317,16 @@ const Tile = ({ testId = null, cssClasses = null, style = null, children, contex
3317
3317
  return (React.createElement("section", { "data-testid": tileTestId, className: tileClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
3318
3318
  };
3319
3319
 
3320
+ const NavBarItem = ({ testId = null, cssClasses = null, style = null, children, isActive = false, onClick = null }) => {
3321
+ const navBarItemClasses = parseClasses([
3322
+ 'navbar-item',
3323
+ isActive ? 'is-active' : null,
3324
+ cssClasses
3325
+ ]);
3326
+ const navBarItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-item', parsedClasses: navBarItemClasses });
3327
+ return (React.createElement("a", { "data-testid": navBarItemTestId, className: navBarItemClasses, style: style !== null && style !== void 0 ? style : undefined, "aria-hidden": 'true', onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, children));
3328
+ };
3329
+
3320
3330
  const generateKey = (max = 5000, min = 1) => {
3321
3331
  max = Math.floor(max);
3322
3332
  min = Math.ceil(min);
@@ -3727,6 +3737,100 @@ const Media = ({ testId = null, cssClasses = null, style = null, leftContent = n
3727
3737
  renderMediaSection(rightContent, 'right', mediaTestId)));
3728
3738
  };
3729
3739
 
3740
+ const Section = ({ testId = null, cssClasses = null, style = null, content, size = null }) => {
3741
+ const sectionClasses = parseClasses(['section', size, cssClasses]);
3742
+ const sectionTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'section', parsedClasses: sectionClasses });
3743
+ return (React.createElement("section", { "data-testid": sectionTestId, className: sectionClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
3744
+ };
3745
+
3746
+ /******************************************************************************
3747
+ Copyright (c) Microsoft Corporation.
3748
+
3749
+ Permission to use, copy, modify, and/or distribute this software for any
3750
+ purpose with or without fee is hereby granted.
3751
+
3752
+ THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
3753
+ REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
3754
+ AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
3755
+ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
3756
+ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
3757
+ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
3758
+ PERFORMANCE OF THIS SOFTWARE.
3759
+ ***************************************************************************** */
3760
+ /* global Reflect, Promise, SuppressedError, Symbol */
3761
+
3762
+
3763
+ function __rest(s, e) {
3764
+ var t = {};
3765
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
3766
+ t[p] = s[p];
3767
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
3768
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
3769
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
3770
+ t[p[i]] = s[p[i]];
3771
+ }
3772
+ return t;
3773
+ }
3774
+
3775
+ typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
3776
+ var e = new Error(message);
3777
+ return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
3778
+ };
3779
+
3780
+ const NavBarBrand = ({ testId = null, cssClasses = null, style = null, brandConfig, isBurgerActive = false }) => {
3781
+ const navBarBrandClasses = parseClasses(['navbar-brand', cssClasses]);
3782
+ const navBarBrandTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-brand', parsedClasses: navBarBrandClasses });
3783
+ const navBarBurgerClasses = parseClasses([
3784
+ 'navbar-burger',
3785
+ isBurgerActive ? 'is-active' : null
3786
+ ]);
3787
+ const navBarBurgerTestId = parseTestId({
3788
+ tag: 'navbar-burger',
3789
+ parsedClasses: navBarBurgerClasses
3790
+ });
3791
+ const { children } = brandConfig, brandItemConfig = __rest(brandConfig, ["children"]);
3792
+ return (React.createElement("section", { "data-testid": navBarBrandTestId, className: navBarBrandClasses, style: style !== null && style !== void 0 ? style : undefined },
3793
+ React.createElement(NavBarItem, Object.assign({}, brandItemConfig),
3794
+ React.createElement(Image, Object.assign({}, children))),
3795
+ React.createElement("a", { role: 'button', "data-testid": navBarBurgerTestId, className: navBarBurgerClasses, "aria-label": 'menu', "aria-expanded": 'false' },
3796
+ React.createElement("span", { "aria-hidden": 'true' }),
3797
+ React.createElement("span", { "aria-hidden": 'true' }),
3798
+ React.createElement("span", { "aria-hidden": 'true' }))));
3799
+ };
3800
+
3801
+ const renderDropdownItem = (dropdownItemConfig) => dropdownItemConfig === 'divider' ? (React.createElement("hr", { key: `navbar-dropdown-divider-${generateKey()}`, className: 'navbar-divider' })) : (React.createElement(NavBarItem, Object.assign({ key: `navbar-dropdown-item-${generateKey()}` }, dropdownItemConfig)));
3802
+ const NavBarDropdown = ({ testId = null, containerTestId = null, cssClasses = null, containerCssClasses = null, style = null, containerStyle = null, text, items, position = null, isActive = false, isHoverable = false, hasDropdownUp = false, hasBoxedMenu = false }) => {
3803
+ const navBarDropdownContainerClasses = parseClasses([
3804
+ 'navbar-item',
3805
+ 'has-dropdown',
3806
+ position,
3807
+ isActive ? 'is-active' : null,
3808
+ isHoverable ? 'is-hoverable' : null,
3809
+ hasDropdownUp ? 'has-dropdown-up' : null,
3810
+ containerCssClasses
3811
+ ]);
3812
+ const navBarDropdownContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
3813
+ tag: 'navbar-dropdown-container',
3814
+ parsedClasses: navBarDropdownContainerClasses,
3815
+ rules: [
3816
+ { regExp: /navbar-item|has-dropdown/gm, replacer: '' },
3817
+ { regExp: /is-|has-/gm, replacer: '-' }
3818
+ ]
3819
+ });
3820
+ const navBarDropdownClasses = parseClasses([
3821
+ 'navbar-dropdown',
3822
+ hasBoxedMenu ? 'is-boxed' : null,
3823
+ cssClasses
3824
+ ]);
3825
+ const navBarDropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3826
+ tag: 'navbar-dropdown',
3827
+ parsedClasses: navBarDropdownClasses
3828
+ });
3829
+ return (React.createElement("section", { "data-testid": navBarDropdownContainerTestId, className: navBarDropdownContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
3830
+ React.createElement("a", { className: 'navbar-link', "aria-hidden": 'true' }, text),
3831
+ React.createElement("section", { "data-testid": navBarDropdownTestId, className: navBarDropdownClasses, style: style !== null && style !== void 0 ? style : undefined }, items.map(renderDropdownItem))));
3832
+ };
3833
+
3730
3834
  const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
3731
3835
  const renderFieldBody = (inputControlConfig, isGrouped) => {
3732
3836
  if (isGrouped) {
@@ -3794,13 +3898,14 @@ const Level = ({ testId = null, cssClasses = null, style = null, leftSide = null
3794
3898
  rightSide ? (React.createElement("section", { className: 'level-right' }, renderLevelSection(rightSide))) : null));
3795
3899
  };
3796
3900
 
3901
+ const renderHeroSection = (content, type, testId, size) => type === 'body' || size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${testId}-${type}`, className: `hero-${type}` }, content)) : null;
3797
3902
  const Hero = ({ testId = null, cssClasses = null, style = null, header = null, body, footer = null, color = null, size = null }) => {
3798
3903
  const heroClasses = parseClasses(['hero', color, size, cssClasses]);
3799
3904
  const heroTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'hero', parsedClasses: heroClasses });
3800
3905
  return (React.createElement("section", { "data-testid": heroTestId, className: heroClasses, style: style !== null && style !== void 0 ? style : undefined },
3801
- size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-head`, className: 'hero-head' }, header)) : null,
3802
- React.createElement("section", { "data-testid": `${heroTestId}-body`, className: 'hero-body' }, body),
3803
- size === 'is-fullheight' ? (React.createElement("section", { "data-testid": `${heroTestId}-foot`, className: 'hero-foot' }, footer)) : null));
3906
+ renderHeroSection(header, 'head', heroTestId, size),
3907
+ renderHeroSection(body, 'body', heroTestId, size),
3908
+ renderHeroSection(footer, 'foot', heroTestId, size)));
3804
3909
  };
3805
3910
 
3806
3911
  const TileGroup = ({ testId = null, cssClasses = null, style = null, context = 'is-ancestor', size = null, isVertical = false, groupConfig }) => {
@@ -3828,5 +3933,31 @@ const TileGroup = ({ testId = null, cssClasses = null, style = null, context = '
3828
3933
  return (React.createElement(Tile, { testId: tileBoxTestId, cssClasses: cssClasses !== null && cssClasses !== void 0 ? cssClasses : undefined, style: style !== null && style !== void 0 ? style : undefined, context: context, size: size !== null && size !== void 0 ? size : undefined, isVertical: isVertical }, groupConfig.map(tileConfig => (React.createElement(Tile, Object.assign({ key: `tile-item-${generateKey()}` }, tileConfig))))));
3829
3934
  };
3830
3935
 
3831
- export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Footer, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Media, Menu, MenuItem, MenuList, Message, Modal, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
3936
+ const renderNavBarMenuSection = (menuSectionConfig, menuSection, testId) => menuSectionConfig ? (React.createElement("section", { "data-testid": `${testId}-${menuSection}`, className: `navbar-${menuSection}` }, menuSectionConfig.itemList.map(itemConfig => itemConfig.children !== undefined ? (React.createElement(NavBarItem, Object.assign({ key: `navbar-section${menuSection}-${generateKey()}` }, itemConfig))) : (React.createElement(NavBarDropdown, Object.assign({ key: `navbar-section${menuSection}-${generateKey()}` }, itemConfig)))))) : null;
3937
+ const NavBar = ({ testId = null, cssClasses = null, style = null, brandConfig = null, itemsAtStart = null, itemsAtEnd = null, fixedPosition = null, color = null, isTransparent = false, isSpaced = false, hasShadow = false }) => {
3938
+ const navBarClasses = parseClasses([
3939
+ 'navbar',
3940
+ fixedPosition,
3941
+ color,
3942
+ isTransparent ? 'is-transparent' : null,
3943
+ isSpaced ? 'is-spaced' : null,
3944
+ hasShadow ? 'has-shadow' : null,
3945
+ cssClasses
3946
+ ]);
3947
+ const navBarTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3948
+ tag: 'navbar',
3949
+ parsedClasses: navBarClasses,
3950
+ rules: [
3951
+ { regExp: /is-|has-/gm, replacer: '-' },
3952
+ { regExp: /navbar/gm, replacer: '' }
3953
+ ]
3954
+ });
3955
+ return (React.createElement("nav", { "data-testid": navBarTestId, className: navBarClasses, style: style !== null && style !== void 0 ? style : undefined },
3956
+ brandConfig ? (React.createElement("section", { "data-testid": 'navbar-brand', className: 'navbar-brand' }, React.createElement(NavBarBrand, Object.assign({}, brandConfig)))) : null,
3957
+ React.createElement("section", { className: 'navbar-menu' },
3958
+ renderNavBarMenuSection(itemsAtStart, 'start', navBarTestId),
3959
+ renderNavBarMenuSection(itemsAtEnd, 'end', navBarTestId))));
3960
+ };
3961
+
3962
+ export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, Dropdown, DropdownItem, DropdownTrigger, File, Footer, FormField, Hero, Icon, Image, Input, InputControl, Level, LevelHeader, LevelItem, Media, Menu, MenuItem, MenuList, Message, Modal, NavBar, NavBarBrand, NavBarDropdown, NavBarItem, Notification, Pagination, PaginationItem, Panel, PanelBlock, PanelTabs, ProgressBar, RadioButton, Section, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
3832
3963
  //# sourceMappingURL=index.js.map