reactive-bulma 1.14.0 → 1.16.0

package/README.md

@@ -29,20 +29,20 @@ Component library based on React, Bulma, Typescript and Rollup
 
 ## Status
 
- ![Npm Version][badge-npm-version]
- ![Npm Bundle Size][badge-npm-size]
- ![Npm Downloads][badge-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]
- [![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
- [![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
- [![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
- [![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
- ![GitHub Repo stars][badge-github-repo-stars]
- ![GitHub commit activity][badge-github-commits]
- ![GitHub last commit][badge-github-last-commit]
- [![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
+![Npm Version][badge-npm-version]
+![Npm Bundle Size][badge-npm-size]
+![Npm Downloads][badge-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]
+[![Maintainability Rating][badge-soundcloud-maintanibility]][link-soundcloud-status]
+[![Security Rating][badge-soundcloud-security]][link-soundcloud-status]
+[![Technical Debt][badge-soundcloud-tech-debt]][link-soundcloud-status]
+[![Known Vulnerabilities][badge-snyk-status]][link-snyk-status]
+![GitHub Repo stars][badge-github-repo-stars]
+![GitHub commit activity][badge-github-commits]
+![GitHub last commit][badge-github-last-commit]
+[![Semantic Commits][badge-semantic-commits]][link-semantic-commits]
 
 [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
@@ -68,10 +68,11 @@ Component library based on React, Bulma, Typescript and Rollup
 
 ![react dependency][badge-dependency-react]
 ![bulma dependency][badge-dependency-bulma]
+![material design dependency][badge-dependency-material-design]
 ![typescript dependency][badge-dependency-typescript]
 ![rollup dependency][badge-dependency-rollup]
 ![storybook dependency][badge-dependency-storybook]
-![semantic-release dependency][badge-dependency-semantic-release]
+![semantic release dependency][badge-dependency-semantic-release]
 ![babel dependency][badge-dependency-babel]
 ![jest dependency][badge-dependency-jest]
 ![react testing library dependency][badge-dependency-react-testing]
@@ -81,9 +82,10 @@ Component library based on React, Bulma, Typescript and Rollup
 
 [badge-dependency-react]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/react/main?logo=react
 [badge-dependency-bulma]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/bulma/main?logo=bulma
+[badge-dependency-material-design]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@mdi/font/main?logo=materialdesignicons
 [badge-dependency-typescript]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/typescript/main?logo=typescript
 [badge-dependency-rollup]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/rollup/main?logo=rollup.js
-[badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@storybook/react/main?logo=storybook
+[badge-dependency-storybook]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/storybook/main?logo=storybook
 [badge-dependency-semantic-release]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/semantic-release/main?logo=semantic-release
 [badge-dependency-babel]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/@babel/core/main?logo=babel
 [badge-dependency-jest]: https://img.shields.io/github/package-json/dependency-version/nicolasomar/reactive-bulma/dev/jest/main?logo=jest
@@ -107,7 +109,10 @@ In case you have cloned the repo, it will show you the following folders:
 - `.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`).
+  - `components:` Location of all used components, using [Atomic Design hierarchy structure](https://atomicdesign.bradfrost.com/chapter-2/)
+    - `atoms` (from `v1.0.0`).
+    - `molecules` (from `v2.0.0`).
+    - `organisms` (from `v3.0.0`).
 
 ## Documentation
 

package/dist/cjs/index.js

@@ -2886,7 +2886,7 @@ const Column = ({ testId = null, style = null, size = null, offset = null, isNar
         isNarrow ? 'is-narrow' : null
     ]);
     const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({ tag: 'column', parsedClasses: columnClasses });
-    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style || undefined }, children));
+    return (React.createElement("section", { "data-testid": _testId, className: columnClasses, style: style !== null && style !== void 0 ? style : undefined }, children));
 };
 
 const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color = 'is-primary', size = null, isLoading = false }) => {
@@ -2899,7 +2899,7 @@ const ProgressBar = ({ value = 0, max = 100, testId = null, style = null, color
     return (React.createElement("progress", { "data-testid": _testId, className: progressClasses, style: style !== null && style !== void 0 ? style : undefined, value: isLoading ? undefined : value, max: max }, `${isLoading ? 0 : fixedValue}%`));
 };
 
-const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style || undefined }, children)) : null;
+const Block = ({ testId = 'test-block', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'block', style: style !== null && style !== void 0 ? style : undefined }, children)) : null;
 
 const Tag = ({ text, testId = null, style = null, color = null, isLight = null, isRounded = null, size = null, withDelete = false, withAddon = false, addonText = null, addonColor = null, onDeleteClick = null }) => {
     const tagLabel = withAddon ? 'tags' : 'tag';
@@ -2921,14 +2921,14 @@ const Tag = ({ text, testId = null, style = null, color = null, isLight = null,
         parsedClasses: withAddon ? tagsWrapperClasses : tagClasses,
         separator: withAddon ? '-' : ''
     });
-    return withAddon ? (React.createElement("section", { "data-testid": _testId, style: style || undefined, className: tagsWrapperClasses },
+    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 || undefined, className: tagClasses },
+        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 },
         text,
         withDelete ? (React.createElement("button", { "data-testid": `${_testId}-delete`, className: 'delete', onClick: onDeleteClick || undefined })) : null));
 };
 
-const Box = ({ testId = 'test-box', style = null, children = null }) => children ? (React.createElement("section", { "data-testid": testId, className: 'box', style: style || undefined }, children)) : 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;
@@ -2950,7 +2950,21 @@ var IconSizeEnum;
     IconSizeEnum[IconSizeEnum["is-large"] = 48] = "is-large";
 })(IconSizeEnum || (IconSizeEnum = {}));
 
-const generateIconContainer = (icon, color) => React.createElement("span", { className: `icon-text${color ? ` ${color}` : ''}` }, icon);
+const generateIconContainer = (icon, color) => {
+    var _a;
+    const containerClasses = color ? `icon-text-${color}` : 'icon-text';
+    const containerTestId = parseTestId({
+        tag: 'icon-container',
+        parsedClasses: (_a = color === null || color === void 0 ? void 0 : color.toString()) !== null && _a !== void 0 ? _a : '',
+        rules: [
+            {
+                usedRegExp: /has-text/gm,
+                regExpReplacer: ''
+            }
+        ]
+    });
+    return (React.createElement("span", { "data-testid": containerTestId, className: containerClasses }, icon));
+};
 const Icon = ({ iconLabel, testId = null, text = null, style = null, color = null, size = null, colorMode = null, isSpinning = false }) => {
     const iconSpanClasses = parseClasses(['icon', color, size]);
     const iconClasses = parseClasses([
@@ -2976,18 +2990,62 @@ const Icon = ({ iconLabel, testId = null, text = null, style = null, color = nul
         separator: '-'
     });
     const _internalTestId = `${_testId}-i`;
-    const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style || undefined, className: iconSpanClasses },
+    const iconComponent = (React.createElement("span", { "data-testid": _testId, style: style !== null && style !== void 0 ? style : undefined, className: iconSpanClasses },
         React.createElement("i", { "data-testid": _internalTestId, className: iconClasses }),
         text ? React.createElement("span", null, text) : null));
     return text ? generateIconContainer(iconComponent, color) : iconComponent;
 };
 
+const Input = ({ testId = null, type, text = null, isDisabled = false, isReadonly = false, style = null, color = null, size = null, isRounded = null, isHovered = null, isFocused = null, onClick = null, onChange = null }) => {
+    const inputClasses = parseClasses([
+        'input',
+        color,
+        size,
+        isRounded ? 'is-rounded' : null,
+        isHovered ? 'is-hovered' : null,
+        isFocused ? 'is-focused' : null
+    ]);
+    const _testId = testId !== null && testId !== void 0 ? testId : parseTestId({
+        tag: 'input',
+        parsedClasses: inputClasses
+    });
+    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 }));
+};
+
 exports.Block = Block;
 exports.Box = Box;
 exports.Button = Button;
 exports.Column = Column;
 exports.Icon = Icon;
+exports.Input = Input;
 exports.ProgressBar = ProgressBar;
 exports.Tag = Tag;
+exports.TextArea = TextArea;
 exports.Title = Title;
 //# sourceMappingURL=index.js.map