reactive-bulma 2.0.0 → 2.1.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.
@@ -0,0 +1,4 @@
1
+ import React from 'react';
2
+ import { ButtonGroupProps } from '../../../interfaces/moleculeProps';
3
+ declare const ButtonGroup: React.FC<ButtonGroupProps>;
4
+ export default ButtonGroup;
@@ -0,0 +1 @@
1
+ export { default as ButtonGroup } from './ButtonGroup';
@@ -1,3 +1,4 @@
1
1
  import '../node_modules/bulma/css/bulma.min.css';
2
2
  import '../node_modules/@mdi/font/css/materialdesignicons.min.css';
3
3
  export * from './components/atoms';
4
+ export * from './components/molecules';
@@ -1,20 +1,7 @@
1
1
  import React from 'react';
2
+ import { BasicProps } from './commonProps';
2
3
  import { basicColorType, columnOffsetType, columnSizeType, fixedImageSizeType, iconColorModeType, basicSizeType, textColorType, titleSizeType } from '../types/styleTypes';
3
4
  import { inputTypes } from '../types/domTypes';
4
- interface BasicProps {
5
- /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
6
- testId?: string;
7
- /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
8
- containerTestId?: string;
9
- /** `Attribute` Custom CSS classes, applicable for specific scenarios */
10
- cssClasses?: string;
11
- /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
12
- containerCssClasses?: string;
13
- /** `Attribute` Custom styling applicable for specific scenarios */
14
- style?: React.CSSProperties;
15
- /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
16
- containerStyle?: React.CSSProperties;
17
- }
18
5
  export interface ColumnProps extends BasicProps, React.ComponentPropsWithoutRef<'section'> {
19
6
  /** `Attribute` Reffers to the component or array of components that will be shown inside the column */
20
7
  children?: string | React.ReactElement | React.ReactElement[];
@@ -44,6 +31,8 @@ export interface ButtonProps extends BasicProps, React.ComponentPropsWithoutRef<
44
31
  isLoading?: boolean;
45
32
  /** `Styling` Similar to `isDisabled`, but will remove any color style */
46
33
  isStatic?: boolean;
34
+ /** `Styling` Sets the button style when a User selects it (useful for an attached `ButtonGroup`) */
35
+ isSelected?: boolean;
47
36
  /** `Styling` Set button's size on bulma's size tokens */
48
37
  size?: basicSizeType;
49
38
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
@@ -240,4 +229,3 @@ export interface RadioButtonProps extends BasicProps {
240
229
  /** `Function` Click function, alone does not nothing, but can be reused for other components */
241
230
  onChange?: () => void;
242
231
  }
243
- export {};
@@ -0,0 +1,33 @@
1
+ /// <reference types="react" />
2
+ export interface BasicProps {
3
+ /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
4
+ testId?: string;
5
+ /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
6
+ containerTestId?: string;
7
+ /** `Attribute` Custom CSS classes, applicable for specific scenarios */
8
+ cssClasses?: string;
9
+ /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
10
+ containerCssClasses?: string;
11
+ /** `Attribute` Custom styling applicable for specific scenarios */
12
+ style?: React.CSSProperties;
13
+ /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
14
+ containerStyle?: React.CSSProperties;
15
+ }
16
+ export interface ContainerProps {
17
+ /** `Attribute` *For container case*. ID used to locate the element in unit test suites (like Jest) */
18
+ containerTestId?: string;
19
+ /** `Attribute` *For container case*. Custom CSS classes, applicable for specific scenarios */
20
+ containerCssClasses?: string;
21
+ /** `Attribute` *For container case*. Custom styling applicable for specific scenarios */
22
+ containerStyle?: React.CSSProperties;
23
+ }
24
+ export interface ElementProps {
25
+ /** `Attribute` ID used to locate the element in unit test suites (like Jest) */
26
+ testId?: string;
27
+ /** `Attribute` Custom CSS classes, applicable for specific scenarios */
28
+ cssClasses?: string;
29
+ /** `Attribute` Custom styling applicable for specific scenarios */
30
+ style?: React.CSSProperties;
31
+ }
32
+ export interface ComponentProps extends BasicProps, ElementProps {
33
+ }
@@ -0,0 +1,10 @@
1
+ import { ElementProps } from './commonProps';
2
+ import { ButtonProps } from './atomProps';
3
+ export interface ButtonGroupProps extends ElementProps {
4
+ /** `Atribute` Array of button objects that will be shown */
5
+ buttonList: ButtonProps[];
6
+ /** `Styling` Will group the list of buttonList in a single line */
7
+ isAttached?: boolean;
8
+ /** `Styling` Sets group position on the container */
9
+ position?: 'left' | 'centered' | 'right';
10
+ }
package/dist/esm/index.js CHANGED
@@ -2860,7 +2860,7 @@ const parseTestId = (config) => {
2860
2860
  return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
2861
2861
  };
2862
2862
 
2863
- const Button = ({ testId = null, cssClasses = null, style = null, type = 'button', text = null, isDisabled = false, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isStatic = false, size = null, onClick = null }) => {
2863
+ 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 }) => {
2864
2864
  const buttonClasses = parseClasses([
2865
2865
  'button',
2866
2866
  color,
@@ -2870,6 +2870,7 @@ const Button = ({ testId = null, cssClasses = null, style = null, type = 'button
2870
2870
  isRounded ? 'is-rounded' : null,
2871
2871
  isLoading ? 'is-loading' : null,
2872
2872
  isStatic ? 'is-static' : null,
2873
+ isSelected ? 'is-selected' : null,
2873
2874
  size,
2874
2875
  cssClasses
2875
2876
  ]);
@@ -3170,5 +3171,35 @@ const RadioButton = ({ containerTestId = null, containerCssClasses = null, conta
3170
3171
  return (React.createElement("section", { "data-testid": radioButtonContainerTestId, className: radioButtonContainerClasses, style: containerStyle !== null && containerStyle !== void 0 ? containerStyle : undefined }, options.map((_option, i) => renderRadioButton(Object.assign(Object.assign({}, _option), { name, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }), i))));
3171
3172
  };
3172
3173
 
3173
- export { Block, Box, Button, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
3174
+ const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
3175
+ const buttonGroupClasses = parseClasses([
3176
+ 'buttons',
3177
+ isAttached ? 'has-addons' : null,
3178
+ !position || position === 'left' ? null : `is-${position}`,
3179
+ cssClasses
3180
+ ]);
3181
+ const buttonGroupTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
3182
+ tag: 'buttons',
3183
+ parsedClasses: buttonGroupClasses,
3184
+ rules: [
3185
+ {
3186
+ regExp: /has-|is-/gm,
3187
+ replacer: '-'
3188
+ },
3189
+ {
3190
+ regExp: /buttons/gm,
3191
+ replacer: ''
3192
+ }
3193
+ ]
3194
+ });
3195
+ return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, i, originalButtonList) => {
3196
+ const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
3197
+ const shouldApplyColor = (hasSelectedButton && currentButtonItem.isSelected) ||
3198
+ !hasSelectedButton;
3199
+ const buttonConfig = Object.assign(Object.assign({}, currentButtonItem), { color: shouldApplyColor ? currentButtonItem.color : undefined });
3200
+ return (React.createElement(Button, Object.assign({ key: `button-list-item-${i}` }, buttonConfig)));
3201
+ })));
3202
+ };
3203
+
3204
+ export { Block, Box, Button, ButtonGroup, CheckBox as Checkbox, Column, Delete, File, Icon, Input, ProgressBar, RadioButton, Select, Tag, TextArea, Title };
3174
3205
  //# sourceMappingURL=index.js.map