reactive-bulma 1.15.0 → 1.17.0

package/README.md

@@ -31,7 +31,7 @@ Component library based on React, Bulma, Typescript and Rollup
 
 ![Npm Version][badge-npm-version]
 ![Npm Bundle Size][badge-npm-size]
-![Npm Downloads][badge-npm-downloads]
+[![Npm Downloads][badge-npm-downloads]][link-npm-downloads]
 [![Netlify Status][badge-netlify-status]][link-netlify-status]
 [![Code Coverage][badge-code-coverage]][link-code-coverage]
 [![Quality Gate Status][badge-soundcloud-quality]][link-soundcloud-status]
@@ -47,6 +47,7 @@ Component library based on React, Bulma, Typescript and Rollup
 [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
 [badge-npm-downloads]: https://img.shields.io/npm/dm/reactive-bulma?label=downloads&labelColor=535353&style=flat&logo=npm
+[link-npm-downloads]: https://www.npmjs.com/package/reactive-bulma?activeTab=versions
 [badge-netlify-status]: https://api.netlify.com/api/v1/badges/3101f2b5-0e28-4734-b749-ebb0e3e413c6/deploy-status
 [link-netlify-status]: https://app.netlify.com/sites/reactivebulma/deploys
 [badge-code-coverage]: https://img.shields.io/codecov/c/github/nicolasomar/reactive-bulma?label=coverage&labelColor=535353&logo=codecov&style=flat
@@ -123,6 +124,7 @@ Reactive bulma's documentation, included in this repo in the root directory, is
 - Run `npm install` to install the Node.js dependencies, including Storybook (the site builder).
 - Run `npm start`.
 - Wait until a new tab opens with url <http://localhost:6006/> in your browser. 
+  - In case you want to initiate it on the background, you can run `npm run start:off`.
 
 Learn more about using `Storybook` by reading its [documentation](https://storybook.js.org/docs/react/get-started/install).
 

package/dist/cjs/index.js

@@ -2923,21 +2923,21 @@ const Tag = ({ text, testId = null, style = null, color = null, isLight = null,
     });
     return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagsWrapperClasses },
         React.createElement("span", { className: tagClasses }, text),
-        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick || undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
+        withDelete ? (React.createElement("a", { "data-testid": `${_testId}-delete`, className: 'tag is-delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : (React.createElement("span", { className: addonTagClasses }, addonText)))) : (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: tagClasses },
         text,
-        withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick || undefined })) : null));
+        withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick !== null && onDeleteClick !== void 0 ? onDeleteClick : undefined })) : null));
 };
 
 const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
 const renderTitleSection = (section) => {
-    var _a, _b;
+    var _a, _b, _c;
     const sectionClasses = parseClasses([
         section === null || section === void 0 ? void 0 : section.prop,
         (_a = section === null || section === void 0 ? void 0 : section.size) !== null && _a !== void 0 ? _a : 'is-6',
         (section === null || section === void 0 ? void 0 : section.prop) === 'title' && (section === null || section === void 0 ? void 0 : section.isSpaced) ? 'is-spaced' : null
     ]);
-    return section ? (React.createElement("p", { "data-testid": (_b = section === null || section === void 0 ? void 0 : section.testId) !== null && _b !== void 0 ? _b : `${section === null || section === void 0 ? void 0 : section.prop}-test`, className: sectionClasses, style: section.style || undefined }, section === null || section === void 0 ? void 0 : section.text)) : null;
+    return section ? (React.createElement("p", { "data-testid": (_b = section === null || section === void 0 ? void 0 : section.testId) !== null && _b !== void 0 ? _b : `${section === null || section === void 0 ? void 0 : section.prop}-test`, className: sectionClasses, style: (_c = section.style) !== null && _c !== void 0 ? _c : undefined }, section === null || section === void 0 ? void 0 : section.text)) : null;
 };
 const Title = ({ main, secondary }) => (React.createElement(React.Fragment, null,
     renderTitleSection(main),
@@ -3009,16 +3009,53 @@ const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonl
         tag: 'input',
         parsedClasses: inputClasses
     });
-    return (React.createElement("input", { "data-testid": _testId, type: type, value: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: inputClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+    return (React.createElement("input", { "data-testid": _testId, type: type, defaultValue: text !== null && text !== void 0 ? text : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: inputClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+};
+
+const TextArea = ({ testId = null, text = null, cols = null, rows = null, isDisabled = false, isReadonly = false, isFixedSize = false, style = null, color = null, size = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+    const textAreaClasses = parseClasses([
+        'textarea',
+        color,
+        size,
+        isHovered ? 'is-hovered' : null,
+        isFocused ? 'is-focused' : null,
+        isFixedSize ? 'has-fixed-size' : null
+    ]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'textarea',
+        parsedClasses: textAreaClasses,
+        rules: [
+            {
+                usedRegExp: /textarea/gm,
+                regExpReplacer: ''
+            },
+            {
+                usedRegExp: /is-|has-/gm,
+                regExpReplacer: '-'
+            }
+        ]
+    });
+    return (React.createElement("textarea", { "data-testid": _testId, defaultValue: text !== null && text !== void 0 ? text : undefined, cols: cols !== null && cols !== void 0 ? cols : undefined, rows: rows !== null && rows !== void 0 ? rows : undefined, disabled: isDisabled, readOnly: isReadonly, style: style !== null && style !== void 0 ? style : undefined, className: textAreaClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined, onChange: onChange !== null && onChange !== void 0 ? onChange : undefined }));
+};
+
+const Delete = ({ testId = null, style = null, size = null, onClick = null }) => {
+    const deleteClasses = parseClasses(['delete', size]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'delete',
+        parsedClasses: deleteClasses
+    });
+    return (React.createElement("button", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: deleteClasses, onClick: onClick !== null && onClick !== void 0 ? onClick : undefined }));
 };
 
 exports.Block = Block;
 exports.Box = Box;
 exports.Button = Button;
 exports.Column = Column;
+exports.Delete = Delete;
 exports.Icon = Icon;
 exports.Input = Input;
 exports.ProgressBar = ProgressBar;
 exports.Tag = Tag;
+exports.TextArea = TextArea;
 exports.Title = Title;
 //# sourceMappingURL=index.js.map