reactive-bulma 3.0.0 → 3.2.0

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

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

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

@@ -22,3 +22,4 @@ export { default as PaginationItem } from './PaginationItem';
 export { default as TabItem } from './TabItem';
 export { default as LevelHeader } from './LevelHeader';
 export { default as Tile } from './Tile';
+export { default as NavBarItem } from './NavBarItem';

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

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

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

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

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

@@ -17,3 +17,5 @@ export { default as TileBox } from './TileBox';
 export { default as Footer } from './Footer';
 export { default as Media } from './Media';
 export { default as Section } from './Section';
+export { default as NavBarBrand } from './NavBarBrand';
+export { default as NavBarDropdown } from './NavBarDropdown';

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

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

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

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

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

@@ -3,3 +3,5 @@ export { default as Panel } from './Panel';
 export { default as Level } from './Level';
 export { default as Hero } from './Hero';
 export { default as TileGroup } from './TileGroup';
+export { default as NavBar } from './NavBar';
+export { default as Card } from './Card';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ElementProps, ComposedElementProps, ClickeableProps } from './commonProps';
 import { BasicColorType, ColumnOffsetType, ColumnSizeType, FixedImageSizeType, IconColorModeType, ElementSizeType, SizeWithoutNormalType, TextColorType, TitleSizeType, RightLeftAlignType, CommonSizeType } from '../types/styleTypes';
-import { DropdownItemType, InputType, ChildrenType, TileContextType } from '../types/domTypes';
+import { DropdownItemType, InputType, ChildrenType, TileContextType, SingleChildType } from '../types/domTypes';
 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?: ChildrenType;
@@ -289,3 +289,9 @@ export interface TileProps extends ElementProps {
     /** `Styling` Used for hierarchy level as ancestor or parent. It selects its children in a vertical format (like a column) */
     isVertical?: boolean;
 }
+export interface NavBarItemProps extends ElementProps, ClickeableProps {
+    /** `Attribute` `Required` Reffers to the component or string that will be shown inside the item */
+    children: SingleChildType;
+    /** `Styling` Used for `NavBarDropdown` styling purpose only. Will mark the item as the one selected among its group */
+    isActive?: boolean;
+}

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

@@ -1,6 +1,6 @@
 import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
-import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, InputProps, MenuItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
-import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType } from '../types/styleTypes';
+import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, IconProps, ImageProps, InputProps, MenuItemProps, NavBarItemProps, PaginationItemProps, TabItemProps, TileProps } from './atomProps';
+import { BasicColorType, RightCenteredAlignType, BreadcrumbSeparatorType, ColumnGapType, SizeWithoutNormalType, TabsFormatType, MediumAndLargeSizeType, RightLeftAlignType } from '../types/styleTypes';
 import { ChildrenType, SingleChildType, PanelBlockItemType } from '../types/domTypes';
 export interface ButtonGroupProps extends ElementProps {
     /** `Atribute` `Required` Array of `Button` objects that will be shown */
@@ -195,4 +195,29 @@ export interface SectionProps extends ElementProps {
     /** `Styling` Set button's size on bulma's size tokens */
     size?: MediumAndLargeSizeType;
 }
+export interface NavBarDropdownProps extends ComposedElementProps {
+    /** `Attribute` `Required` It will show the presentation text to be clicked or hovered in order to display its menu */
+    text: string;
+    /** `Attribute` `Required` A list of configuration objects that will render in dropdown's menu. Those can be items or dividers */
+    items: Array<NavBarItemProps | 'divider'>;
+    /** `Styling` Used for `NavBar` styling purpose only. Will set the dropdown on a specific position based on the proveded value */
+    position?: RightLeftAlignType;
+    /** `Styling` Used to display dropdown's menu when user clicks on its text */
+    isActive?: boolean;
+    /** `Styling` Similar to `isActive`, but will display when user hovers its pointer on its text */
+    isHoverable?: boolean;
+    /** `Styling` Sets dropdown's menu on top of the text instead default styling */
+    hasDropdownUp?: boolean;
+    /** `Styling` Sets dropdown's menu design like a box, also adds some animation when its diplayed */
+    hasBoxedMenu?: boolean;
+}
+interface BrandConfigProps extends Omit<NavBarItemProps, 'children'> {
+    children: ImageProps;
+}
+export interface NavBarBrandProps extends ElementProps {
+    /** `Attribute` `Required` Configuration object to inject a NavBarItem with a Image configuration as its children */
+    brandConfig: BrandConfigProps;
+    /** `Styling` It sets brand's burger button as active (changing looks from a burger to a cross) */
+    isBurgerActive?: boolean;
+}
 export {};

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

@@ -1,8 +1,8 @@
-import { ElementProps } from './commonProps';
-import { InputControlProps, LevelItemProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
+import { ClickeableProps, ElementProps } from './commonProps';
+import { InputControlProps, LevelItemProps, NavBarBrandProps, NavBarDropdownProps, PanelBlockProps, PanelTabsProps } from './moleculeProps';
+import { ImageProps, NavBarItemProps, TileProps } from './atomProps';
 import { BasicColorType, SizeWithHeightType } from '../types/styleTypes';
-import { ChildrenType } from '../types/domTypes';
-import { TileProps } from './atomProps';
+import { ChildrenType, NavBarFixedPositionType } from '../types/domTypes';
 export interface FormFieldHelperProps {
     text?: string;
     color?: BasicColorType;
@@ -55,3 +55,38 @@ export interface TileGroupProps extends ElementProps, Pick<TileProps, 'context'
     /** `Attribute` `Required` A list of `Title` configurations that will be displayed in a grid mode on the screen */
     groupConfig: TileProps[];
 }
+export interface NavBarMenuProps {
+    itemList: Array<NavBarItemProps | NavBarDropdownProps>;
+    showInMobile?: boolean;
+}
+export interface NavBarProps extends ElementProps {
+    /** `Attribute` Configuration object for navbar's left section, it needs of a `NavBarBrand` object to be displayed at NavBar's start */
+    brandConfig?: NavBarBrandProps;
+    /** `Attribute` Configuration object for navbar's left section, it needs of a list of `NavBarItem` or `NavBarDropdown` objects to be displayed */
+    itemsAtStart?: NavBarMenuProps;
+    /** `Attribute` Configuration object for navbar's right section, it needs of a list of `NavBarItem` or `NavBarDropdown` objects to be displayed */
+    itemsAtEnd?: NavBarMenuProps;
+    /** `Styling` Sets navbar's position at screen's top or bottom */
+    fixedPosition?: NavBarFixedPositionType;
+    /** `Styling` Color based on bulma's text color tokens */
+    color?: BasicColorType;
+    /** `Styling` Sets navbar's color as transparent */
+    isTransparent?: boolean;
+    /** `Styling` Adds a small padding around the navbar */
+    isSpaced?: boolean;
+    /** `Styling` Adds a small shadow on navbar's bottom */
+    hasShadow?: boolean;
+}
+export interface CardFooterProps extends ClickeableProps {
+    text: string;
+}
+export interface CardProps extends ElementProps {
+    /** `Attribute` It will shot a text on card's top, just a paragraph */
+    headerText?: string;
+    /** `Attribute` A single configuration object that will render an `Image` component */
+    image?: ImageProps;
+    /** `Attribute` `Required` Deisgnated section where you can include a string, a single or list of components (each one separated in its own `content` section) */
+    content: ChildrenType;
+    /** `Attribute` A list of footer links that will be rendered on card's bottom, below its content */
+    footerLinks?: CardFooterProps[];
+}

package/dist/cjs/types/types/domTypes.d.ts

@@ -13,3 +13,4 @@ export declare enum IconSizeEnum {
 export type TileContextType = 'is-child' | 'is-parent' | 'is-ancestor';
 export type HeroContentType = 'head' | 'body' | 'foot';
 export type MediaSectionType = 'left' | 'content' | 'right';
+export type NavBarFixedPositionType = 'top' | 'bottom';

package/dist/esm/index.js

@@ -3317,6 +3317,16 @@ const Tile = ({ testId = null, cssClasses = null, style = null, children, contex
     return (React.createElement("section", { "data-testid": tileTestId, className: tileClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
+const NavBarItem = ({ testId = null, cssClasses = null, style = null, children, isActive = false, onClick = null }) => {
+    const navBarItemClasses = parseClasses([
+        'navbar-item',
+        isActive ? 'is-active' : null,
+        cssClasses
+    ]);
+    const navBarItemTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-item', parsedClasses: navBarItemClasses });
+    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));
+};
+
 const generateKey = (max = 5000, min = 1) => {
     max = Math.floor(max);
     min = Math.ceil(min);
@@ -3733,6 +3743,94 @@ const Section = ({ testId = null, cssClasses = null, style = null, content, size
     return (React.createElement("section", { "data-testid": sectionTestId, className: sectionClasses, style: style !== null && style !== void 0 ? style : undefined }, content));
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const NavBarBrand = ({ testId = null, cssClasses = null, style = null, brandConfig, isBurgerActive = false }) => {
+    const navBarBrandClasses = parseClasses(['navbar-brand', cssClasses]);
+    const navBarBrandTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'navbar-brand', parsedClasses: navBarBrandClasses });
+    const navBarBurgerClasses = parseClasses([
+        'navbar-burger',
+        isBurgerActive ? 'is-active' : null
+    ]);
+    const navBarBurgerTestId = parseTestId({
+        tag: 'navbar-burger',
+        parsedClasses: navBarBurgerClasses
+    });
+    const { children } = brandConfig, brandItemConfig = __rest(brandConfig, ["children"]);
+    return (React.createElement("section", { "data-testid": navBarBrandTestId, className: navBarBrandClasses, style: style !== null && style !== void 0 ? style : undefined },
+        React.createElement(NavBarItem, Object.assign({}, brandItemConfig),
+            React.createElement(Image, Object.assign({}, children))),
+        React.createElement("a", { role: 'button', "data-testid": navBarBurgerTestId, className: navBarBurgerClasses, "aria-label": 'menu', "aria-expanded": 'false' },
+            React.createElement("span", { "aria-hidden": 'true' }),
+            React.createElement("span", { "aria-hidden": 'true' }),
+            React.createElement("span", { "aria-hidden": 'true' }))));
+};
+
+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)));
+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 }) => {
+    const navBarDropdownContainerClasses = parseClasses([
+        'navbar-item',
+        'has-dropdown',
+        position,
+        isActive ? 'is-active' : null,
+        isHoverable ? 'is-hoverable' : null,
+        hasDropdownUp ? 'has-dropdown-up' : null,
+        containerCssClasses
+    ]);
+    const navBarDropdownContainerTestId = containerTestId !== null && containerTestId !== void 0 ? containerTestId : parseTestId({
+        tag: 'navbar-dropdown-container',
+        parsedClasses: navBarDropdownContainerClasses,
+        rules: [
+            { regExp: /navbar-item|has-dropdown/gm, replacer: '' },
+            { regExp: /is-|has-/gm, replacer: '-' }
+        ]
+    });
+    const navBarDropdownClasses = parseClasses([
+        'navbar-dropdown',
+        hasBoxedMenu ? 'is-boxed' : null,
+        cssClasses
+    ]);
+    const navBarDropdownTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'navbar-dropdown',
+        parsedClasses: navBarDropdownClasses
+    });
+    return (React.createElement("section", { "data-testid": navBarDropdownContainerTestId, className: navBarDropdownContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined },
+        React.createElement("a", { className: 'navbar-link', "aria-hidden": 'true' }, text),
+        React.createElement("section", { "data-testid": navBarDropdownTestId, className: navBarDropdownClasses, style: style !== null && style !== void 0 ? style : undefined }, items.map(renderDropdownItem))));
+};
+
 const renderFieldLabel = (labelText) => labelText ? (React.createElement("label", { "data-testid": 'test-form-field-label', className: 'label' }, labelText)) : null;
 const renderFieldBody = (inputControlConfig, isGrouped) => {
     if (isGrouped) {
@@ -3835,5 +3933,49 @@ const TileGroup = ({ testId = null, cssClasses = null, style = null, context = '
     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))))));
 };
 
-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, Section, Select, TabItem, Tabs, Tag, TextArea, Tile, TileBox, TileGroup, Title };
+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;
+const NavBar = ({ testId = null, cssClasses = null, style = null, brandConfig = null, itemsAtStart = null, itemsAtEnd = null, fixedPosition = null, color = null, isTransparent = false, isSpaced = false, hasShadow = false }) => {
+    const navBarClasses = parseClasses([
+        'navbar',
+        fixedPosition,
+        color,
+        isTransparent ? 'is-transparent' : null,
+        isSpaced ? 'is-spaced' : null,
+        hasShadow ? 'has-shadow' : null,
+        cssClasses
+    ]);
+    const navBarTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'navbar',
+        parsedClasses: navBarClasses,
+        rules: [
+            { regExp: /is-|has-/gm, replacer: '-' },
+            { regExp: /navbar/gm, replacer: '' }
+        ]
+    });
+    return (React.createElement("nav", { "data-testid": navBarTestId, className: navBarClasses, style: style !== null && style !== void 0 ? style : undefined },
+        brandConfig ? (React.createElement("section", { "data-testid": 'navbar-brand', className: 'navbar-brand' }, React.createElement(NavBarBrand, Object.assign({}, brandConfig)))) : null,
+        React.createElement("section", { className: 'navbar-menu' },
+            renderNavBarMenuSection(itemsAtStart, 'start', navBarTestId),
+            renderNavBarMenuSection(itemsAtEnd, 'end', navBarTestId))));
+};
+
+const Card = ({ testId = null, cssClasses = null, style = null, headerText = null, image = null, content, footerLinks = null }) => {
+    const cardClasses = parseClasses(['card', cssClasses]);
+    const cardTestId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'card', parsedClasses: cardClasses });
+    return (React.createElement("section", { "data-testid": cardTestId, className: cardClasses, style: style !== null && style !== void 0 ? style : undefined },
+        headerText ? (React.createElement("header", { "data-testid": `${cardTestId}-header`, className: 'card-header' },
+            React.createElement("p", { className: 'card-header-title' }, headerText),
+            React.createElement("button", { className: 'card-header-icon', "aria-label": 'more options' },
+                React.createElement("span", { className: 'icon' },
+                    React.createElement("i", { className: 'fas fa-angle-down', "aria-hidden": 'true' }))))) : null,
+        image ? (React.createElement("section", { "data-testid": `${cardTestId}-image`, className: 'card-image' },
+            React.createElement(Image, Object.assign({}, image)))) : null,
+        React.createElement("section", { "data-testid": `${cardTestId}-content`, className: 'card-content' }, Array.isArray(content) ? (content.map((_contentConfig, i) => (React.createElement("section", { key: `card-content-item-${generateKey()}`, "data-testid": `${cardTestId}-content-item-${i}`, className: 'content' }, _contentConfig)))) : (React.createElement("section", { className: 'content' }, content))),
+        footerLinks ? (React.createElement("section", { className: 'card-footer' }, footerLinks.map((_footerConfig, i) => {
+            var _a;
+            return (React.createElement("a", { key: `card-footer-item-${generateKey()}`, "data-testid": `${cardTestId}-footer-item-${i}`, className: 'card-footer-item', "aria-hidden": 'true', onClick: (_a = _footerConfig.onClick) !== null && _a !== void 0 ? _a : undefined }, _footerConfig.text));
+        }))) : null));
+};
+
+export { Block, Box, BreadcrumbItem, Breadcrumbs, Button, ButtonGroup, Card, 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 };
 //# sourceMappingURL=index.js.map