clay-badge - npm Package Compare versions

Comparing version 1.0.0-alpha.4 to 1.0.0-alpha.5

lib/ClayBadge.js

@@ -52,3 +52,3 @@ 'use strict';
  * @static
- * #type {!Object}
+ * @type {!Object}
  */
@@ -59,2 +59,11 @@
 	/**
+  * CSS classes to be applied to the element.
+  * @instance
+  * @memberof ClayBadge
+  * @type {?string|undefined}
+  * @default undefined
+  */
+	elementClasses: _metalState.Config.string(),
+
+	/**
   * Id to be applied to the element.
@@ -82,3 +91,3 @@ * @instance
   * @type {?string}
-  * default primary
+  * @default primary
   */
@@ -85,0 +94,0 @@ style: _metalState.Config.oneOf(['danger', 'dark', 'info', 'light', 'primary', 'secondary', 'success', 'warning']).value('primary')

lib/ClayBadge.soy.js

@@ -47,2 +47,3 @@ 'use strict';
    *  label: (!goog.soy.data.SanitizedContent|string),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -62,7 +63,9 @@ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var elementClasses = soy.asserts.assertType(opt_data.elementClasses == null || goog.isString(opt_data.elementClasses) || opt_data.elementClasses instanceof goog.soy.data.SanitizedContent, 'elementClasses', opt_data.elementClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var id = soy.asserts.assertType(opt_data.id == null || goog.isString(opt_data.id) || opt_data.id instanceof goog.soy.data.SanitizedContent, 'id', opt_data.id, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var style = soy.asserts.assertType(opt_data.style == null || goog.isString(opt_data.style) || opt_data.style instanceof goog.soy.data.SanitizedContent, 'style', opt_data.style, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy7 = function attributes__soy7() {
-      incrementalDom.attr('class', 'badge badge-' + (($$temp = style) == null ? 'primary' : $$temp));
+    var attributes__soy8 = function attributes__soy8() {
+      incrementalDom.attr('class', 'badge badge-' + (($$temp = style) == null ? 'primary' : $$temp) + (elementClasses ? ' ' + elementClasses : ''));
       if (id) {
@@ -73,3 +76,3 @@ incrementalDom.attr('id', id);
     incrementalDom.elementOpenStart('span');
-    attributes__soy7();
+    attributes__soy8();
     incrementalDom.elementOpenEnd();
@@ -83,2 +86,3 @@ soyIdom.print(label);
    *  label: (!goog.soy.data.SanitizedContent|string),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -93,4 +97,4 @@ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
 
-  exports.render.params = ["label", "id", "style"];
-  exports.render.types = { "label": "string", "id": "string", "style": "string" };
+  exports.render.params = ["label", "elementClasses", "id", "style"];
+  exports.render.types = { "label": "string", "elementClasses": "string", "id": "string", "style": "string" };
   exports.templates = templates = exports;
@@ -97,0 +101,0 @@ return exports;

package.json

 {
   "name": "clay-badge",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "Metal Clay Badge component.",
@@ -43,3 +43,3 @@ "license": "BSD",
     "browserslist-config-clay-components": "^1.0.0-alpha.2",
-    "clay": "^2.0.0-beta.2",
+    "clay": "^2.0.0-beta.4",
     "metal-dom": "^2.13.2",
@@ -46,0 +46,0 @@ "metal-tools-soy": "^4.2.1",

src/__tests__/ClayBadge.js

@@ -12,3 +12,3 @@ import ClayBadge from '../ClayBadge';
 
-	it('should generate the default markup', () => {
+	it('should render the default markup', () => {
 		badge = new ClayBadge({
@@ -21,5 +21,6 @@ label: 'Foo',
 
-	it('should render a badge with label', () => {
+	it('should render a badge with classes', () => {
 		badge = new ClayBadge({
-			label: 'Bar',
+			elementClasses: 'my-custom-class',
+			label: 'Foo',
 		});
@@ -32,4 +33,4 @@
 		badge = new ClayBadge({
+			id: 'myId',
 			label: 'Foo',
-			id: 'myBadge',
 		});
@@ -40,2 +41,10 @@
 
+	it('should render a badge with label', () => {
+		badge = new ClayBadge({
+			label: 'Bar',
+		});
+
+		expect(badge).toMatchSnapshot();
+	});
+
 	it('should render a `default color` badge', () => {
@@ -42,0 +51,0 @@ badge = new ClayBadge({

src/ClayBadge.js

@@ -16,6 +16,15 @@ import Component from 'metal-component';
  * @static
- * #type {!Object}
+ * @type {!Object}
  */
 ClayBadge.STATE = {
 	/**
+	 * CSS classes to be applied to the element.
+	 * @instance
+	 * @memberof ClayBadge
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	elementClasses: Config.string(),
+
+	/**
 	 * Id to be applied to the element.
@@ -43,3 +52,3 @@ * @instance
 	 * @type {?string}
-	 * default primary
+	 * @default primary
 	 */
@@ -46,0 +55,0 @@ style: Config.oneOf([

src/ClayBadge.soy.js

@@ -28,2 +28,3 @@ /* jshint ignore:start */
  *  label: (!goog.soy.data.SanitizedContent|string),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -43,7 +44,9 @@ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var elementClasses = soy.asserts.assertType(opt_data.elementClasses == null || (goog.isString(opt_data.elementClasses) || opt_data.elementClasses instanceof goog.soy.data.SanitizedContent), 'elementClasses', opt_data.elementClasses, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var id = soy.asserts.assertType(opt_data.id == null || (goog.isString(opt_data.id) || opt_data.id instanceof goog.soy.data.SanitizedContent), 'id', opt_data.id, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var style = soy.asserts.assertType(opt_data.style == null || (goog.isString(opt_data.style) || opt_data.style instanceof goog.soy.data.SanitizedContent), 'style', opt_data.style, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy7 = function() {
-    incrementalDom.attr('class', 'badge badge-' + (($$temp = style) == null ? 'primary' : $$temp));
+  var attributes__soy8 = function() {
+    incrementalDom.attr('class', 'badge badge-' + (($$temp = style) == null ? 'primary' : $$temp) + (elementClasses ? ' ' + elementClasses : ''));
     if (id) {
@@ -54,3 +57,3 @@ incrementalDom.attr('id', id);
   incrementalDom.elementOpenStart('span');
-      attributes__soy7();
+      attributes__soy8();
   incrementalDom.elementOpenEnd();
@@ -64,2 +67,3 @@ soyIdom.print(label);
  *  label: (!goog.soy.data.SanitizedContent|string),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -74,4 +78,4 @@ *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
 
-exports.render.params = ["label","id","style"];
-exports.render.types = {"label":"string","id":"string","style":"string"};
+exports.render.params = ["label","elementClasses","id","style"];
+exports.render.types = {"label":"string","elementClasses":"string","id":"string","style":"string"};
 templates = exports;
@@ -78,0 +82,0 @@ return exports;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29295

increased by12.18%

Lines of code

404

increased by8.89%

Worsened metrics

Number of package files

12

decreased by-7.69%

No dependency changes