clay-sticker - npm Package Compare versions

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

lib/ClaySticker.js

@@ -60,12 +60,18 @@ 'use strict';
 	/**
+  * CSS classes to be applied to the element.
+  * @instance
+  * @memberof ClaySticker
+  * @type {?string|undefined}
+  * @default undefined
+  */
+	elementClasses: _metalState.Config.string(),
+
+	/**
   * Render ClayIcon in the ClaySticker element.
   * @instance
   * @memberof ClaySticker
-  * @type {?Object|undefined}
+  * @type {?string|undefined}
   * @default undefined
   */
-	icon: _metalState.Config.shapeOf({
-		spritemap: _metalState.Config.string().required(),
-		symbol: _metalState.Config.string().required()
-	}),
+	icon: _metalState.Config.string(),
 
@@ -123,3 +129,3 @@ /**
   * @memberof ClaySticker
-  * @type {?string|undefined}
+  * @type {?string}
   * @default rounded
@@ -130,2 +136,11 @@ */
 	/**
+  * The path to the SVG spritemap file containing the icons.
+  * @instance
+  * @memberof ClaySticker
+  * @type {?string|undefined}
+  * @default undefined
+  */
+	spritemap: _metalState.Config.string(),
+
+	/**
   * Sticker style. Available sizes are: `danger`, `dark`, `info`, `light`,
@@ -135,6 +150,6 @@ * `primary`, `secondary`, `success`, `warning`.
   * @memberof ClaySticker
-  * @type {?string|undefined}
-  * @default default
+  * @type {?string}
+  * @default primary
   */
-	style: _metalState.Config.oneOf(['danger', 'dark', 'info', 'light', 'primary', 'secondary', 'success', 'warning']).value('primary')
+	style: _metalState.Config.oneOf(['danger', 'dark', 'info', 'light', 'primary', 'secondary', 'success', 'unstyled', 'warning']).value('primary')
 };
@@ -141,0 +156,0 @@

lib/ClaySticker.soy.js

@@ -48,3 +48,4 @@ 'use strict';
    * @param {{
-   *  icon: (null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -56,2 +57,3 @@ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
    *  size: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
@@ -68,5 +70,7 @@ * }} opt_data
     opt_data = opt_data || {};
-    /** @type {null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}} */
-    var icon = soy.asserts.assertType(opt_data.icon == null || goog.isObject(opt_data.icon), 'icon', opt_data.icon, 'null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
     /** @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 icon = soy.asserts.assertType(opt_data.icon == null || goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!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');
@@ -84,5 +88,7 @@ /** @type {!goog.soy.data.SanitizedContent|function()|null|string|undefined} */
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var spritemap = soy.asserts.assertType(opt_data.spritemap == null || goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!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__soy12 = function attributes__soy12() {
-      incrementalDom.attr('class', 'sticker sticker-' + (($$temp = style) == null ? 'primary' : $$temp) + (position ? (outside ? ' sticker-outside' : '') + ' sticker-' + position : '') + (shape == 'circle' ? ' rounded-circle' : '') + (size ? ' sticker-' + size : ''));
+    var attributes__soy14 = function attributes__soy14() {
+      incrementalDom.attr('class', 'sticker sticker-' + (($$temp = style) == null ? 'primary' : $$temp) + (position ? (outside ? ' sticker-outside' : '') + ' sticker-' + position : '') + (shape == 'circle' ? ' rounded-circle' : '') + (size ? ' sticker-' + size : '') + (elementClasses ? ' ' + elementClasses : ''));
       if (id) {
@@ -93,6 +99,6 @@ incrementalDom.attr('id', id);
     incrementalDom.elementOpenStart('span');
-    attributes__soy12();
+    attributes__soy14();
     incrementalDom.elementOpenEnd();
-    if (icon) {
-      $templateAlias1({ spritemap: icon.spritemap, symbol: icon.symbol }, null, opt_ijData);
+    if (icon && spritemap) {
+      $templateAlias1({ spritemap: spritemap, symbol: icon }, null, opt_ijData);
     } else if (label) {
@@ -106,3 +112,4 @@ soyIdom.print(label);
    * @typedef {{
-   *  icon: (null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+   *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -114,2 +121,3 @@ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
    *  size: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
@@ -123,4 +131,4 @@ * }}
 
-  exports.render.params = ["icon", "id", "label", "outside", "position", "shape", "size", "style"];
-  exports.render.types = { "icon": "[\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]", "id": "string", "label": "html|string", "outside": "bool", "position": "string", "shape": "string", "size": "string", "style": "string" };
+  exports.render.params = ["elementClasses", "icon", "id", "label", "outside", "position", "shape", "size", "spritemap", "style"];
+  exports.render.types = { "elementClasses": "string", "icon": "string", "id": "string", "label": "html|string", "outside": "bool", "position": "string", "shape": "string", "size": "string", "spritemap": "string", "style": "string" };
   exports.templates = templates = exports;
@@ -127,0 +135,0 @@ return exports;

package.json

 {
   "name": "clay-sticker",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "Clay Sticker Component",
@@ -30,3 +30,3 @@ "license": "BSD",
   "dependencies": {
-    "clay-icon": "^1.0.0-alpha.4",
+    "clay-icon": "^1.0.0-alpha.5",
     "metal": "^2.14.0",
@@ -45,3 +45,3 @@ "metal-component": "^2.14.0",
     "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",
@@ -48,0 +48,0 @@ "metal-tools-soy": "^4.2.1",

src/__tests__/ClaySticker.js

@@ -12,3 +12,3 @@ import ClaySticker from '../ClaySticker';
 
-	it('should generate the default markup', () => {
+	it('should render the default markup', () => {
 		sticker = new ClaySticker();
@@ -19,8 +19,5 @@
 
-	it('should render a sticker with icon', () => {
+	it('should render a sticker with classes', () => {
 		sticker = new ClaySticker({
-			icon: {
-				spritemap: 'icons.svg',
-				symbol: 'plus',
-			},
+			elementClasses: 'my-custom-class',
 		});
@@ -33,3 +30,3 @@
 		sticker = new ClaySticker({
-			id: 'mySticker',
+			id: 'myId',
 		});
@@ -40,2 +37,11 @@
 
+	it('should render a sticker with icon', () => {
+		sticker = new ClaySticker({
+			icon: 'plus',
+			spritemap: 'icons.svg',
+		});
+
+		expect(sticker).toMatchSnapshot();
+	});
+
 	it('should render a sticker with label', () => {
@@ -205,2 +211,10 @@ sticker = new ClaySticker({
 
+	it('should render a `unstyled` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'unstyled',
+		});
+
+		expect(sticker).toMatchSnapshot();
+	});
+
 	it('should render a `warning color` sticker', () => {
@@ -207,0 +221,0 @@ sticker = new ClaySticker({

src/ClaySticker.js

@@ -21,12 +21,18 @@ import 'clay-icon';
 	/**
+	 * CSS classes to be applied to the element.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	elementClasses: Config.string(),
+
+	/**
 	 * Render ClayIcon in the ClaySticker element.
 	 * @instance
 	 * @memberof ClaySticker
-	 * @type {?Object|undefined}
+	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	icon: Config.shapeOf({
-		spritemap: Config.string().required(),
-		symbol: Config.string().required(),
-	}),
+	icon: Config.string(),
 
@@ -89,3 +95,3 @@ /**
 	 * @memberof ClaySticker
-	 * @type {?string|undefined}
+	 * @type {?string}
 	 * @default rounded
@@ -96,2 +102,11 @@ */
 	/**
+	 * The path to the SVG spritemap file containing the icons.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	spritemap: Config.string(),
+
+	/**
 	 * Sticker style. Available sizes are: `danger`, `dark`, `info`, `light`,
@@ -101,4 +116,4 @@ * `primary`, `secondary`, `success`, `warning`.
 	 * @memberof ClaySticker
-	 * @type {?string|undefined}
-	 * @default default
+	 * @type {?string}
+	 * @default primary
 	 */
@@ -113,2 +128,3 @@ style: Config.oneOf([
 		'success',
+		'unstyled',
 		'warning',
@@ -115,0 +131,0 @@ ]).value('primary'),

src/ClaySticker.soy.js

@@ -29,3 +29,4 @@ /* jshint ignore:start */
  * @param {{
- *  icon: (null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -37,2 +38,3 @@ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
  *  size: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
@@ -49,5 +51,7 @@ * }} opt_data
   opt_data = opt_data || {};
-  /** @type {null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}} */
-  var icon = soy.asserts.assertType(opt_data.icon == null || goog.isObject(opt_data.icon), 'icon', opt_data.icon, 'null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
   /** @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 icon = soy.asserts.assertType(opt_data.icon == null || (goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent), 'icon', opt_data.icon, '!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');
@@ -65,5 +69,7 @@ /** @type {!goog.soy.data.SanitizedContent|function()|null|string|undefined} */
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var spritemap = soy.asserts.assertType(opt_data.spritemap == null || (goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent), 'spritemap', opt_data.spritemap, '!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__soy12 = function() {
-    incrementalDom.attr('class', 'sticker sticker-' + (($$temp = style) == null ? 'primary' : $$temp) + (position ? (outside ? ' sticker-outside' : '') + ' sticker-' + position : '') + (shape == 'circle' ? ' rounded-circle' : '') + (size ? ' sticker-' + size : ''));
+  var attributes__soy14 = function() {
+    incrementalDom.attr('class', 'sticker sticker-' + (($$temp = style) == null ? 'primary' : $$temp) + (position ? (outside ? ' sticker-outside' : '') + ' sticker-' + position : '') + (shape == 'circle' ? ' rounded-circle' : '') + (size ? ' sticker-' + size : '') + (elementClasses ? ' ' + elementClasses : ''));
     if (id) {
@@ -74,6 +80,6 @@ incrementalDom.attr('id', id);
   incrementalDom.elementOpenStart('span');
-      attributes__soy12();
+      attributes__soy14();
   incrementalDom.elementOpenEnd();
-    if (icon) {
-      $templateAlias1({spritemap: icon.spritemap, symbol: icon.symbol}, null, opt_ijData);
+    if (icon && spritemap) {
+      $templateAlias1({spritemap: spritemap, symbol: icon}, null, opt_ijData);
     } else if (label) {
@@ -87,3 +93,4 @@ soyIdom.print(label);
  * @typedef {{
- *  icon: (null|undefined|{spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+ *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -95,2 +102,3 @@ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
  *  size: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  style: (!goog.soy.data.SanitizedContent|null|string|undefined)
@@ -104,4 +112,4 @@ * }}
 
-exports.render.params = ["icon","id","label","outside","position","shape","size","style"];
-exports.render.types = {"icon":"[\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]","id":"string","label":"html|string","outside":"bool","position":"string","shape":"string","size":"string","style":"string"};
+exports.render.params = ["elementClasses","icon","id","label","outside","position","shape","size","spritemap","style"];
+exports.render.types = {"elementClasses":"string","icon":"string","id":"string","label":"html|string","outside":"bool","position":"string","shape":"string","size":"string","spritemap":"string","style":"string"};
 templates = exports;
@@ -108,0 +116,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

51859

increased by10.16%

Lines of code

647

increased by9.29%

Dependency changes

• Updatedclay-icon@^1.0.0-alpha.5