reactive-bulma 2.1.1 → 2.2.0

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

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

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

@@ -1 +1,2 @@
 export { default as ButtonGroup } from './ButtonGroup';
+export { default as ColumnGroup } from './ColumnGroup';

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

@@ -1,10 +1,25 @@
 import { ElementProps } from './commonProps';
-import { ButtonProps } from './atomProps';
+import { ButtonProps, ColumnProps } from './atomProps';
+import { columnGapType } from '../types/styleTypes';
 export interface ButtonGroupProps extends ElementProps {
-    /** `Atribute` Array of button objects that will be shown */
+    /** `Atribute` `Required` Array of `Button` objects that will be shown */
     buttonList: ButtonProps[];
     /** `Styling` Will group the list of buttonList in a single line */
     isAttached?: boolean;
     /** `Styling` Sets group position on the container */
     position?: 'left' | 'centered' | 'right';
 }
+export interface ColumnGroupProps extends ElementProps {
+    /** `Atribute` `Required` Array of `Column` objects that will be shown */
+    listOfColumns: ColumnProps[];
+    /** `Styling` Will adjust column structure display layout in case you want to work on mobiles */
+    isMobileLayout?: boolean;
+    /** `Styling` Will reorder column display in multiple lines each time exceeds viewport width */
+    isMultiline?: boolean;
+    /** `Styling` Will center the list of columns vertically */
+    isVerticallyCentered?: boolean;
+    /** `Styling` Will center the list of columns horizontally */
+    isHorizontallyCentered?: boolean;
+    /** `Styling` Will adjust the space between the columns. In case to set null, it will remove those gaps */
+    gap?: columnGapType | null;
+}

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

@@ -6,3 +6,4 @@ export type textColorType = 'has-text-white' | 'has-text-black' | 'has-text-ligh
 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';
 export type basicSizeType = 'is-small' | 'is-normal' | 'is-medium' | 'is-large';
 export type iconColorModeType = 'light' | 'dark';
+export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';

package/dist/esm/index.js

@@ -3197,9 +3197,36 @@ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonLis
         const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
             !hasSelectedButton;
         const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
-        return (React.createElement(Button, Object.assign({ key: `button-list-item-${i}` }, buttonConfig)));
+        return (React.createElement(Button, Object.assign({ key: `button-group-item-${i}` }, buttonConfig)));
     })));
 };
 
-export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
+const parseGapCssClass = (gapPropValue) => {
+    switch (gapPropValue) {
+        case null:
+            return 'is-gapless';
+        case undefined:
+            return 'is-3';
+        default:
+            return gapPropValue;
+    }
+};
+const ColumnGroup = ({ testId = null, cssClasses = null, style = null, listOfColumns, isMobileLayout = null, isMultiline = null, isVerticallyCentered = null, isHorizontallyCentered = null, gap = undefined }) => {
+    const columnGroupClasses = parseClasses([
+        'columns',
+        isMultiline ? 'is-multiline' : null,
+        isMobileLayout ? 'is-mobile' : null,
+        isVerticallyCentered ? 'is-vcentered' : null,
+        isHorizontallyCentered ? 'is-centered' : null,
+        parseGapCssClass(gap),
+        cssClasses
+    ]);
+    const columnGroupTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'columns',
+        parsedClasses: columnGroupClasses
+    });
+    return (React.createElement("section", { "data-testid": columnGroupTestId, className: columnGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, listOfColumns.map((_columnItem, i) => (React.createElement(Column, Object.assign({ key: `column-group-item-${i}` }, _columnItem))))));
+};
+
+export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, ColumnGroup, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
 //# sourceMappingURL=index.js.map