reactive-bulma 1.6.0 → 1.8.0

package/README.md

@@ -1,5 +1,7 @@
-# Reactive bulma ![reactive-bulma version](https://img.shields.io/github/package-json/v/nicolasomar/reactive-bulma?label=npm&logo=npm&labelColor=535353&color=success&style=flat-square) ![reactive-bulma Coverage](https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat-square) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma) [![Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma)
-Component library based on React, typescript and bulma
+# Reactive bulma ![reactive-bulma | npm version](https://img.shields.io/github/package-json/v/nicolasomar/reactive-bulma?label=npm&logo=npm&labelColor=535353&color=success&style=flat)
+
+## ![reactive-bulma | code coverage](https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat) [![reactive-bulma | Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma) [![reactive-bulma | Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma) [![reactive-bulma | Security Rating](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma) [![reactive-bulma | Technical Debt](https://sonarcloud.io/api/project_badges/measure?project=NicolasOmar_reactive-bulma&metric=sqale_index)](https://sonarcloud.io/summary/new_code?id=NicolasOmar_reactive-bulma)
+Component library based on React, Typescript, Bulma and Rollup
 
 ## What do I need?
 Before cloning this repo, I recommend installing the following software:
@@ -26,8 +28,8 @@ npm run build
 ## Folder structure
 Once you have cloned the repo, it will show you the following folders:
 - `.github:` [Github Actions](https://github.com/features/actions/) files used to run post-merge.commits like unit test coverage collection.
-- `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) git-hook files.
-- `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration.
+- `.husky:` Dedicated to [Husky](https://typicode.github.io/husky/) configuration files.
+- `.storybook:` Dedicated to [Storybook](https://storybook.js.org/) configuration files.
 - `src:`
   - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/) (`atoms` -> `molecules` -> `organisms`).
 
@@ -43,7 +45,7 @@ To know more about actual roadmap, please go to section `Find out more` -> `Road
 I will maintain only one deployable site based on [Storybook](https://storybook.js.org/) with automated [Netlify](https://netlify.com/) deployments with each push to `main` branch. The mentioned site is on section `Find out more` -> `Storybook site`.
 
 ## Find out more
-| [Roadmap](https://docs.google.com/document/d/1kWX-dDTD-cQUeB_Vbu0K6xRvtHaSA38h76yQnhiCe9U) | [Project Status](https://github.com/users/NicolasOmar/projects/3) | [Storybook site](https://my-pets-storybook.netlify.app/) | [Npm Package](https://www.npmjs.com/package/reactive-bulma)
+| [Roadmap](https://docs.google.com/document/d/1kWX-dDTD-cQUeB_Vbu0K6xRvtHaSA38h76yQnhiCe9U) | [Project Status](https://github.com/users/NicolasOmar/projects/3) | [Storybook site](https://reactivebulma.netlify.app/) | [Npm Package](https://www.npmjs.com/package/reactive-bulma)
 | :--- | :--- | :--- | :--- |
 | Document with entire list of stories, splitted by versions | Project board for project status tracking | Site dedicated to show and test all the created components | Public package site in npm
 

package/dist/cjs/index.js

@@ -2840,15 +2840,40 @@ function requireReact_development () {
 
 var React = /*@__PURE__*/getDefaultExportFromCjs(reactExports);
 
-const Button = ({ text = '' }) => (React.createElement("button", { "data-testid": 'test-button', className: 'button' }, text));
+const parseClasses = (_classes) => _classes.filter(_class => _class).join(' ');
+
+const Button = ({ text = null, type = 'button', style = null, color = 'is-primary', isLightColor = false, isInvertedColor = false, isOutlined = false, isRounded = false, isLoading = false, isDisabled = false, isStatic = false, size = null, onClick = null }) => {
+    const buttonClasses = parseClasses([
+        'button',
+        color,
+        isLightColor ? 'is-light' : null,
+        isInvertedColor ? 'is-inverted' : null,
+        isOutlined ? 'is-outlined' : null,
+        isRounded ? 'is-rounded' : null,
+        isLoading ? 'is-loading' : null,
+        isStatic ? 'is-static' : null,
+        size
+    ]);
+    return (React.createElement("button", { "data-testid": 'test-button', type: type, className: buttonClasses, style: style !== null && style !== void 0 ? style : undefined, disabled: isDisabled !== null && isDisabled !== void 0 ? isDisabled : false, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }, text));
+};
 
 const Column = ({ size = null, offset = null, isNarrow = false, children = null }) => {
-    const classes = ['column', size, offset, isNarrow ? 'is-narrow' : null]
-        .filter(_class => _class)
-        .join(' ');
+    const classes = parseClasses([
+        'column',
+        size,
+        offset,
+        isNarrow ? 'is-narrow' : null
+    ]);
     return (React.createElement("section", { "data-testid": 'test-column', className: classes }, children));
 };
 
+const ProgressBar = ({ value = 0, max = 100, style = null, color = 'is-primary', size = null, isLoading = false }) => {
+    const progressClasses = parseClasses(['progress', color, size]);
+    const fixedValue = value > max || value < 0 ? 0 : value;
+    return (React.createElement("progress", { "data-testid": 'test-progress-bar', className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
+};
+
 exports.Button = Button;
 exports.Column = Column;
+exports.ProgressBar = ProgressBar;
 //# sourceMappingURL=index.js.map