@foxriver76/iob-component-lib - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

build/components/molecules/InfoBox/InfoBox.d.ts

@@ -6,2 +6,4 @@ import React from 'react';
     text: string;
+    /** The type determines the color and symbol */
+    type: 'warning' | 'info' | 'error';
 }
@@ -8,0 +10,0 @@ export default class InfoBox extends React.Component<InfoBoxProps> {

build/components/molecules/InfoBox/InfoBox.js

@@ -31,4 +31,5 @@ "use strict";
     InfoBox.prototype.render = function () {
-        return (react_1["default"].createElement(material_1.Box, { className: "iom-info-box", sx: { borderColor: function (theme) { return theme.palette.primary.main; } } },
-            react_1["default"].createElement(icons_material_1.Info, { color: 'primary' }),
+        var _this = this;
+        return (react_1["default"].createElement(material_1.Box, { className: "iom-info-box", sx: { borderColor: function (theme) { return theme.palette[_this.props.type].main; } } },
+            this.props.type === 'info' ? react_1["default"].createElement(icons_material_1.Info, { color: 'primary' }) : react_1["default"].createElement(icons_material_1.Warning, { color: this.props.type }),
             react_1["default"].createElement(material_1.Typography, null, this.props.text)));
@@ -35,0 +36,0 @@ };

build/components/molecules/InfoBox/InfoBox.stories.d.ts

@@ -10,2 +10,3 @@ import type { StoryObj } from '@storybook/react';
         text: string;
+        type: "info";
     };
@@ -12,0 +13,0 @@ argTypes: {};

build/components/molecules/InfoBox/InfoBox.stories.js

@@ -13,3 +13,4 @@ "use strict";
     args: {
-        text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam'
+        text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam',
+        type: 'info'
     },
@@ -16,0 +17,0 @@ argTypes: {}

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
@@ -9,0 +9,0 @@ "release": "release-script --noPush -y",

README.md

@@ -9,3 +9,6 @@ # ioBroker React Component Library
 -->
+### 0.1.2 (2024-08-06)
+* (@foxriver76) added different types to the info box
+
 ### 0.1.1 (2024-08-06)
 * (@foxriver76) initial release

No alert changes

Improved metrics

Total package byte prevSize

10847

increased by5.52%

Lines of code

156

increased by4%

Number of lines in readme file

14

increased by27.27%

No dependency changes