reactive-bulma 1.21.0 → 2.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Nicolás Omar González Passerino
+Copyright (c) 2023 Nicolás Omar González Passerino
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -25,10 +25,12 @@ Component library based on React, Bulma, Typescript and Rollup
 - [Versioning](#versioning)
 - [Roadmap](#roadmap)
 - [Changelog](#changelog)
+- [Contributing](#contributing)
 - [Credit](#credit)
 - [License](#license)
 
 ## Purpose
+
 After studying [an Udemy course about Typescript](https://github.com/NicolasOmar/typescript-practice), I wanted to start a new project to practice my new knowledge in a meaningful tool. Therefore, I started this project to understand how to create a component library and investigate the best ways to maintain and nourish it as any professional-level alternatives.
 
 ## Status
@@ -47,6 +49,7 @@ After studying [an Udemy course about Typescript](https://github.com/NicolasOmar
 [![GitHub commit activity][badge-github-commits]][link-github-commit-activity]
 [![GitHub last commit][badge-github-last-commit]][link-github-commit-history]
 [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
+[![Contributor Covenant][badge-code-of-conduct]][link-code-of-conduct]
 
 [badge-npm-version]: https://img.shields.io/github/package-json/v/nicolasomar/reactive-bulma?label=npm%20version&logo=npm&labelColor=535353&color=success&style=flat
 [badge-npm-size]: https://img.shields.io/bundlephobia/min/reactive-bulma?label=bundle%20size&labelColor=535353&logo=npm&style=flat
@@ -62,7 +65,7 @@ After studying [an Udemy course about Typescript](https://github.com/NicolasOmar
 [badge-soundcloud-security]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating
 [badge-soundcloud-tech-debt]: https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index
 [link-soundcloud-status]: https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma
-[badge-snyk-status]: https://img.shields.io/snyk/vulnerabilities/github/nicolasomar/reactive-bulma?logo=snyk
+[badge-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma/badge.svg
 [link-snyk-status]: https://snyk.io/test/github/nicolasomar/reactive-bulma
 [badge-github-repo-stars]: https://img.shields.io/github/stars/nicolasomar/reactive-bulma?label=stars&logo=github&labelColor=535353&style=flat
 [badge-github-commits]: https://img.shields.io/github/commit-activity/m/nicolasomar/reactive-bulma?logo=github
@@ -72,6 +75,8 @@ After studying [an Udemy course about Typescript](https://github.com/NicolasOmar
 [link-github-commit-history]: https://github.com/NicolasOmar/reactive-bulma/commits/main
 [badge-semantic-commits]: https://img.shields.io/badge/using-conventional%20commits-e10079?logo=conventional-commits
 [link-semantic-commits]: https://github.com/semantic-release/semantic-release
+[badge-code-of-conduct]: https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg
+[link-code-of-conduct]: code_of_conduct.md
 
 ## Dependencies
 
@@ -138,6 +143,7 @@ Reactive bulma's documentation, included in this repo in the root directory, is
 Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
 
 ## Usage
+
 ```jsx
 import React from 'react'
 import { Button } from 'reactive-bulma'
@@ -193,6 +199,11 @@ In case you want the detailed list of current and future features, go to the [ro
 
 The [changelog](https://github.com/NicolasOmar/reactive-bulma/blob/main/CHANGELOG.md) (powered by `semantic-release`) is regularly updated to reflect what's changed in each new release.
 
+## Contributing
+
+If you're interested in contributing to Reactive Bulma, please read [our contributing docs](./CONTRIBUTING.md) before submitting a pull request.
+
+
 ## Credit
 
 Bulma was beautifully crafted by [@jgthms](https://github.com/jgthms)

package/dist/cjs/index.js

@@ -2862,7 +2862,7 @@ const parseTestId = (config) => {
     return `test-${config.tag}${fixedClassString.replace(/ /gm, (_a = config.separator) !== null && _a !== void 0 ? _a : '')}`;
 };
 
-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 }) => {
+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 }) => {
     const buttonClasses = parseClasses([
         'button',
         color,
@@ -2872,6 +2872,7 @@ const Button = ({ testId = null, cssClasses = null, style = null, type = 'button
         isRounded ? 'is-rounded' : null,
         isLoading ? 'is-loading' : null,
         isStatic ? 'is-static' : null,
+        isSelected ? 'is-selected' : null,
         size,
         cssClasses
     ]);
@@ -3172,9 +3173,40 @@ const RadioButton = ({ containerTestId = null, containerCssClasses = null, conta
     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))));
 };
 
+const ButtonGroup = ({ testId = null, cssClasses = null, style = null, buttonList, isAttached = false, position = 'left' }) => {
+    const buttonGroupClasses = parseClasses([
+        'buttons',
+        isAttached ? 'has-addons' : null,
+        !position || position === 'left' ? null : `is-${position}`,
+        cssClasses
+    ]);
+    const buttonGroupTestId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'buttons',
+        parsedClasses: buttonGroupClasses,
+        rules: [
+            {
+                regExp: /has-|is-/gm,
+                replacer: '-'
+            },
+            {
+                regExp: /buttons/gm,
+                replacer: ''
+            }
+        ]
+    });
+    return (React.createElement("section", { "data-testid": buttonGroupTestId, className: buttonGroupClasses, style: style !== null && style !== void 0 ? style : undefined }, buttonList.map((currentButtonItem, i, originalButtonList) => {
+        const hasSelectedButton = originalButtonList.some(({ isSelected }) => isSelected);
+        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)));
+    })));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Checkbox = CheckBox;
 exports.Column = Column;
 exports.Delete = Delete;