reactive-bulma 3.1.0 → 3.2.0

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/index.d.ts

@@ -4,3 +4,4 @@ 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/organismProps.d.ts

@@ -1,8 +1,8 @@
-import { ElementProps } from './commonProps';
+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, NavBarFixedPositionType } from '../types/domTypes';
-import { NavBarItemProps, TileProps } from './atomProps';
 export interface FormFieldHelperProps {
     text?: string;
     color?: BasicColorType;
@@ -77,3 +77,16 @@ export interface NavBarProps extends ElementProps {
     /** `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/esm/index.js

@@ -3959,5 +3959,23 @@ const NavBar = ({ testId = null, cssClasses = null, style = null, brandConfig =
             renderNavBarMenuSection(itemsAtEnd, 'end', navBarTestId))));
 };
 
-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 };
+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