essence-core - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lib/text/text.js

@@ -36,3 +36,3 @@ 'use strict';
         _this.state = {
-            classes: (0, _classnames2.default)(_this.props.className, _this.props.classes)
+            classes: (0, _classnames2.default)({ 'e-badge': props.badge ? true : false }, _this.props.className, _this.props.classes)
         };
@@ -46,3 +46,3 @@ return _this;
             this.setState({
-                classes: (0, _classnames2.default)(nextProps.className, nextProps.classes)
+                classes: (0, _classnames2.default)({ 'e-badge': nextProps.badge ? true : false }, nextProps.className, nextProps.classes)
             });
@@ -59,3 +59,3 @@ }
                         'a',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -67,3 +67,3 @@ );
                         'p',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -75,3 +75,3 @@ );
                         'label',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -83,3 +83,3 @@ );
                         'strong',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -91,3 +91,3 @@ );
                         'small',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -99,3 +99,3 @@ );
                         'caption',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -107,3 +107,3 @@ );
                         'h1',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -115,3 +115,3 @@ );
                         'h2',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -123,3 +123,3 @@ );
                         'h3',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -131,3 +131,3 @@ );
                         'h4',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -139,3 +139,3 @@ );
                         'h5',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -147,3 +147,3 @@ );
                         'h6',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -155,3 +155,3 @@ );
                         'sup',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -163,3 +163,3 @@ );
                         'sub',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -171,3 +171,3 @@ );
                         'em',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -179,3 +179,3 @@ );
                         'blockquote',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -187,3 +187,3 @@ );
                         'cite',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -195,3 +195,3 @@ );
                         'span',
-                        _extends({}, this.props, { className: this.state.classes }),
+                        _extends({}, this.props, { 'data-badge': this.props.badge, className: this.state.classes }),
                         this.props.children
@@ -198,0 +198,0 @@ );

package.json

 {
   "name": "essence-core",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Essence Core - Essence components",
@@ -5,0 +5,0 @@ "author": "Hetmann W. Iohan <[e-mail]>",

README.md

@@ -62,2 +62,5 @@ # Essence Core - Essence components
 <Text type={'span'} classes={'e-text-center e-headline'}>Text Typography Example</Text>
+
+{/* text data-badge */}
+<Text badge={'3'}>Text with Badge</Text>
 ```
@@ -64,0 +67,0 @@

src/text/text.jsx

@@ -6,7 +6,10 @@ import React from 'react';
 class Text extends React.Component {
-
 	constructor(props) {
         super(props);
         this.state = {
-        	classes: ClassNames(this.props.className, this.props.classes)
+        	classes: ClassNames(
+                {'e-badge': props.badge ? true : false},
+                this.props.className, 
+                this.props.classes
+            )
         };
@@ -17,3 +20,7 @@ }
         this.setState({
-            classes: ClassNames(nextProps.className, nextProps.classes)
+            classes: ClassNames(
+                {'e-badge': nextProps.badge ? true : false},
+                nextProps.className, 
+                nextProps.classes
+            )
         });
@@ -27,54 +34,54 @@ }
     		case 'a':
-    			return (<a {...this.props} className={this.state.classes}>{this.props.children}</a>);
+    			return (<a {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</a>);
     		break;
     		case 'p':
-    			return (<p {...this.props} className={this.state.classes}>{this.props.children}</p>);
+    			return (<p {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</p>);
     		break;
     		case 'label':
-    			return (<label {...this.props} className={this.state.classes}>{this.props.children}</label>);
+    			return (<label {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</label>);
     		break;
     		case 'strong':
-    			return (<strong {...this.props} className={this.state.classes}>{this.props.children}</strong>);
+    			return (<strong {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</strong>);
     		break;
     		case 'small':
-    			return (<small {...this.props} className={this.state.classes}>{this.props.children}</small>);
+    			return (<small {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</small>);
     		break;
     		case 'caption':
-    			return (<caption {...this.props} className={this.state.classes}>{this.props.children}</caption>);
+    			return (<caption {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</caption>);
     		break;
     		case 'h1':
-    			return (<h1 {...this.props} className={this.state.classes}>{this.props.children}</h1>);
+    			return (<h1 {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</h1>);
     		break;
     		case 'h2':
-    			return (<h2 {...this.props} className={this.state.classes}>{this.props.children}</h2>);
+    			return (<h2 {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</h2>);
     		break;
     		case 'h3':
-    			return (<h3 {...this.props} className={this.state.classes}>{this.props.children}</h3>);
+    			return (<h3 {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</h3>);
     		break;
     		case 'h4':
-    			return (<h4 {...this.props} className={this.state.classes}>{this.props.children}</h4>);
+    			return (<h4 {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</h4>);
     		break;
     		case 'h5':
-    			return (<h5 {...this.props} className={this.state.classes}>{this.props.children}</h5>);
+    			return (<h5 {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</h5>);
     		break;
     		case 'h6':
-    			return (<h6 {...this.props} className={this.state.classes}>{this.props.children}</h6>);
+    			return (<h6 {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</h6>);
     		break;
     		case 'sup':
-    			return (<sup {...this.props} className={this.state.classes}>{this.props.children}</sup>);
+    			return (<sup {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</sup>);
     		break;
     		case 'sub':
-    			return (<sub {...this.props} className={this.state.classes}>{this.props.children}</sub>);
+    			return (<sub {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</sub>);
     		break;
     		case 'em':
-                return (<em {...this.props} className={this.state.classes}>{this.props.children}</em>);
+                return (<em {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</em>);
             break;
             case 'blockquote':
-                return (<blockquote {...this.props} className={this.state.classes}>{this.props.children}</blockquote>);
+                return (<blockquote {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</blockquote>);
             break;
             case 'cite':
-    			return (<cite {...this.props} className={this.state.classes}>{this.props.children}</cite>);
+    			return (<cite {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</cite>);
     		break;
     		default:
-    			return (<span {...this.props} className={this.state.classes}>{this.props.children}</span>);
+    			return (<span {...this.props} data-badge={this.props.badge} className={this.state.classes}>{this.props.children}</span>);
     		break;
@@ -81,0 +88,0 @@ }

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9195396

increased by0.04%

Lines of code

937

increased by0.86%

Number of lines in readme file

99

increased by3.13%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes