clay-button - npm Package Compare versions

Comparing version 1.0.0-alpha.8 to 1.0.0-alpha.9

lib/ClayButton.js

@@ -105,15 +105,20 @@ 'use strict';
 	/**
-  * Render ClayIcon in the ClayButton element.
+  * Icon to be rendered in the button.
   * @instance
   * @memberof ClayButton
-  * @type {?Object|undefined}
+  * @type {?string|undefined}
   * @default undefined
   */
-	icon: _metalState.Config.shapeOf({
-		alignment: _metalState.Config.oneOf(['left', 'right']),
-		spritemap: _metalState.Config.string().required(),
-		symbol: _metalState.Config.string().required()
-	}),
+	icon: _metalState.Config.string(),
 
 	/**
+  * Render ClayIcon in the ClayButton element.
+  * @instance
+  * @memberof ClayButton
+  * @type {?string}
+  * @default left
+  */
+	iconAlignment: _metalState.Config.oneOf(['left', 'right']).value('left'),
+
+	/**
   * Id to be applied to the element.
@@ -165,9 +170,19 @@ * @instance
 	/**
-  * The css class that colors the button.
+  * The path to the SVG spritemap file containing the icons.
   * @instance
   * @memberof ClayButton
   * @type {?string|undefined}
+  * @default undefined
+  */
+	spritemap: _metalState.Config.string(),
+
+	/**
+  * The css class that colors the button. Style `unstyled` is only for internal
+  * purposes.
+  * @instance
+  * @memberof ClayButton
+  * @type {?string|undefined}
   * @default primary
   */
-	style: _metalState.Config.oneOf(['borderless', 'link', 'primary', 'secondary', 'unstyled']).value('primary'),
+	style: _metalState.Config.oneOf(['link', 'primary', 'secondary', 'unstyled']).value('primary'),
 
@@ -178,6 +193,6 @@ /**
   * @memberof ClayButton
-  * @type {?string|undefined}
-  * @default undefined
+  * @type {?string}
+  * @default button
   */
-	type: _metalState.Config.oneOf(['button', 'reset', 'submit']),
+	type: _metalState.Config.oneOf(['button', 'reset', 'submit']).value('button'),
 
@@ -184,0 +199,0 @@ /**

lib/ClayButton.soy.js

@@ -52,3 +52,4 @@ 'use strict';
    *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -59,2 +60,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),
@@ -71,2 +73,3 @@ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
     opt_ijData = opt_ijData_deprecated || opt_ijData;
+    var $$temp;
     opt_data = opt_data || {};
@@ -81,5 +84,7 @@ /** @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 {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
     /** @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 iconAlignment = soy.asserts.assertType(opt_data.iconAlignment == null || goog.isString(opt_data.iconAlignment) || opt_data.iconAlignment instanceof goog.soy.data.SanitizedContent, 'iconAlignment', opt_data.iconAlignment, '!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');
@@ -95,2 +100,4 @@ /** @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');
@@ -101,9 +108,9 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
     var value = soy.asserts.assertType(opt_data.value == null || goog.isString(opt_data.value) || opt_data.value instanceof goog.soy.data.SanitizedContent, 'value', opt_data.value, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy17 = function attributes__soy17() {
-      $attributes(opt_data, null, opt_ijData);
+    var attributes__soy19 = function attributes__soy19() {
+      $attributes({ ariaLabel: ariaLabel, block: block, disabled: disabled, elementClasses: elementClasses, icon: icon, id: id, label: label, monospaced: monospaced, name: name, size: size, style: style, type: ($$temp = type) == null ? 'button' : $$temp, value: value }, null, opt_ijData);
     };
     incrementalDom.elementOpenStart('button');
-    attributes__soy17();
+    attributes__soy19();
     incrementalDom.elementOpenEnd();
-    $content(opt_data, null, opt_ijData);
+    $content({ icon: icon, iconAlignment: ($$temp = iconAlignment) == null ? 'left' : $$temp, label: label, spritemap: spritemap }, null, opt_ijData);
     incrementalDom.elementClose('button');
@@ -118,3 +125,4 @@ }
    *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -125,2 +133,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),
@@ -138,4 +147,6 @@ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
    * @param {{
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
-   *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined)
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }} opt_data
@@ -151,12 +162,15 @@ * @param {Object<string, *>=} opt_ijData
     opt_data = opt_data || {};
-    /** @type {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
+    /** @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 iconAlignment = soy.asserts.assertType(opt_data.iconAlignment == null || goog.isString(opt_data.iconAlignment) || opt_data.iconAlignment instanceof goog.soy.data.SanitizedContent, 'iconAlignment', opt_data.iconAlignment, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {!goog.soy.data.SanitizedContent|function()|null|string|undefined} */
     var label = soy.asserts.assertType(opt_data.label == null || goog.isFunction(opt_data.label) || goog.isString(opt_data.label) || opt_data.label instanceof goog.soy.data.SanitizedContent, 'label', opt_data.label, '!goog.soy.data.SanitizedContent|function()|null|string|undefined');
-    var iconAlignment__soy45 = icon && icon.alignment ? icon.alignment : 'left';
-    if (icon && iconAlignment__soy45 == 'left') {
+    /** @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');
+    if (icon && iconAlignment == 'left' && spritemap) {
       $icon(opt_data, null, opt_ijData);
     }
     soyIdom.print(($$temp = label) == null ? '' : $$temp);
-    if (icon && iconAlignment__soy45 == 'right') {
+    if (icon && iconAlignment == 'right' && spritemap) {
       $icon(opt_data, null, opt_ijData);
@@ -168,4 +182,6 @@ }
    * @typedef {{
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
-   *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined)
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -180,3 +196,4 @@ */
    * @param {{
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)})
+   *  icon: (!goog.soy.data.SanitizedContent|string),
+   *  spritemap: (!goog.soy.data.SanitizedContent|string)
    * }} opt_data
@@ -190,6 +207,7 @@ * @param {Object<string, *>=} opt_ijData
     opt_ijData = opt_ijData_deprecated || opt_ijData;
-    opt_data = opt_data || {};
-    /** @type {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
-    $templateAlias1({ spritemap: icon.spritemap, symbol: icon.symbol }, null, opt_ijData);
+    /** @type {!goog.soy.data.SanitizedContent|string} */
+    var icon = soy.asserts.assertType(goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|string');
+    /** @type {!goog.soy.data.SanitizedContent|string} */
+    var spritemap = soy.asserts.assertType(goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|string');
+    $templateAlias1({ spritemap: spritemap, symbol: icon }, null, opt_ijData);
   }
@@ -199,3 +217,4 @@ exports.icon = $icon;
    * @typedef {{
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)})
+   *  icon: (!goog.soy.data.SanitizedContent|string),
+   *  spritemap: (!goog.soy.data.SanitizedContent|string)
    * }}
@@ -214,3 +233,3 @@ */
    *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -241,5 +260,5 @@ *  label: (!goog.soy.data.SanitizedContent|function()|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 {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
     /** @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');
@@ -260,10 +279,10 @@ /** @type {!goog.soy.data.SanitizedContent|function()|null|string|undefined} */
     var value = soy.asserts.assertType(opt_data.value == null || goog.isString(opt_data.value) || opt_data.value instanceof goog.soy.data.SanitizedContent, 'value', opt_data.value, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var classes__soy85 = '';
-    classes__soy85 += 'btn';
-    classes__soy85 += block ? ' btn-block' : '';
-    classes__soy85 += elementClasses ? ' ' + elementClasses : '';
-    classes__soy85 += monospaced ? ' btn-monospaced' : '';
-    classes__soy85 += size ? ' btn-' + size : '';
-    classes__soy85 += style ? ' btn-' + style : ' btn-primary';
-    incrementalDom.attr('class', classes__soy85);
+    var classes__soy92 = '';
+    classes__soy92 += 'btn';
+    classes__soy92 += block ? ' btn-block' : '';
+    classes__soy92 += elementClasses ? ' ' + elementClasses : '';
+    classes__soy92 += monospaced ? ' btn-monospaced' : '';
+    classes__soy92 += size ? ' btn-' + size : '';
+    classes__soy92 += style ? ' btn-' + style : ' btn-primary';
+    incrementalDom.attr('class', classes__soy92);
     if (ariaLabel) {
@@ -274,3 +293,3 @@ incrementalDom.attr('aria-label', ariaLabel);
     } else if (icon) {
-      incrementalDom.attr('aria-label', icon.symbol);
+      incrementalDom.attr('aria-label', icon);
     }
@@ -289,5 +308,3 @@ if (disabled) {
     }
-    if (type) {
-      incrementalDom.attr('type', type);
-    }
+    incrementalDom.attr('type', type);
   }
@@ -301,3 +318,3 @@ exports.attributes = $attributes;
    *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
-   *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+   *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -318,10 +335,10 @@ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
 
-  exports.render.params = ["ariaLabel", "block", "disabled", "elementClasses", "icon", "id", "label", "monospaced", "name", "size", "style", "type", "value"];
-  exports.render.types = { "ariaLabel": "string", "block": "bool", "disabled": "bool", "elementClasses": "string", "icon": "[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]", "id": "string", "label": "html|string", "monospaced": "bool", "name": "string", "size": "string", "style": "string", "type": "string", "value": "string" };
-  exports.content.params = ["icon", "label"];
-  exports.content.types = { "icon": "[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]", "label": "html|string" };
-  exports.icon.params = ["icon"];
-  exports.icon.types = { "icon": "[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]" };
+  exports.render.params = ["ariaLabel", "block", "disabled", "elementClasses", "icon", "iconAlignment", "id", "label", "monospaced", "name", "size", "spritemap", "style", "type", "value"];
+  exports.render.types = { "ariaLabel": "string", "block": "bool", "disabled": "bool", "elementClasses": "string", "icon": "string", "iconAlignment": "string", "id": "string", "label": "html|string", "monospaced": "bool", "name": "string", "size": "string", "spritemap": "string", "style": "string", "type": "string", "value": "string" };
+  exports.content.params = ["icon", "iconAlignment", "label", "spritemap"];
+  exports.content.types = { "icon": "string", "iconAlignment": "string", "label": "html|string", "spritemap": "string" };
+  exports.icon.params = ["icon", "spritemap"];
+  exports.icon.types = { "icon": "string", "spritemap": "string" };
   exports.attributes.params = ["ariaLabel", "block", "disabled", "elementClasses", "icon", "id", "label", "monospaced", "name", "size", "style", "type", "value"];
-  exports.attributes.types = { "ariaLabel": "string", "block": "bool", "disabled": "bool", "elementClasses": "string", "icon": "[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]", "id": "string", "label": "html|string", "monospaced": "bool", "name": "string", "size": "string", "style": "string", "type": "string", "value": "string" };
+  exports.attributes.types = { "ariaLabel": "string", "block": "bool", "disabled": "bool", "elementClasses": "string", "icon": "string", "id": "string", "label": "html|string", "monospaced": "bool", "name": "string", "size": "string", "style": "string", "type": "string", "value": "string" };
   exports.templates = templates = exports;
@@ -328,0 +345,0 @@ return exports;

package.json

 {
   "name": "clay-button",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "Metal Clay Button component.",
@@ -31,3 +31,3 @@ "license": "BSD",
     "clay-component": "^1.0.0-alpha.8",
-    "clay-icon": "^1.0.0-alpha.5",
+    "clay-icon": "^1.0.0-alpha.9",
     "metal": "^2.14.0",
@@ -34,0 +34,0 @@ "metal-component": "^2.14.0",

src/__tests__/ClayButton.js

@@ -42,2 +42,10 @@ import ClayButton from '../ClayButton';
 
+	it('should render a reset button', function() {
+		button = new ClayButton({
+			type: 'reset',
+		});
+
+		expect(button).toMatchSnapshot();
+	});
+
 	it('should render a disabled button', function() {
@@ -102,6 +110,4 @@ button = new ClayButton({
 		button = new ClayButton({
-			icon: {
-				spritemap: 'icons.svg',
-				symbol: 'plus',
-			},
+			icon: 'plus',
+			spritemap: 'icons.svg',
 		});
@@ -114,7 +120,5 @@
 		button = new ClayButton({
-			icon: {
-				spritemap: 'icons.svg',
-				symbol: 'plus',
-			},
+			icon: 'plus',
 			monospaced: true,
+			spritemap: 'icons.svg',
 		});
@@ -127,7 +131,5 @@
 		button = new ClayButton({
-			icon: {
-				spritemap: 'icons.svg',
-				symbol: 'plus',
-			},
+			icon: 'plus',
 			label: 'Label',
+			spritemap: 'icons.svg',
 		});
@@ -140,8 +142,5 @@
 		button = new ClayButton({
-			icon: {
-				alignment: 'right',
-				spritemap: 'icons.svg',
-				symbol: 'plus',
-			},
+			icon: 'plus',
 			label: 'Label',
+			spritemap: 'icons.svg',
 		});
@@ -152,2 +151,13 @@
 
+	it('should render a button with label and icon on right side', function() {
+		button = new ClayButton({
+			icon: 'plus',
+			iconAlignment: 'right',
+			label: 'Label',
+			spritemap: 'icons.svg',
+		});
+
+		expect(button).toMatchSnapshot();
+	});
+
 	it('should render a button with customData attributes', function() {
@@ -154,0 +164,0 @@ button = new ClayButton({

src/ClayButton.js

@@ -66,15 +66,20 @@ import 'clay-icon';
 	/**
-	 * Render ClayIcon in the ClayButton element.
+	 * Icon to be rendered in the button.
 	 * @instance
 	 * @memberof ClayButton
-	 * @type {?Object|undefined}
+	 * @type {?string|undefined}
 	 * @default undefined
 	 */
-	icon: Config.shapeOf({
-		alignment: Config.oneOf(['left', 'right']),
-		spritemap: Config.string().required(),
-		symbol: Config.string().required(),
-	}),
+	icon: Config.string(),
 
 	/**
+	 * Render ClayIcon in the ClayButton element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string}
+	 * @default left
+	 */
+	iconAlignment: Config.oneOf(['left', 'right']).value('left'),
+
+	/**
 	 * Id to be applied to the element.
@@ -126,15 +131,21 @@ * @instance
 	/**
-	 * The css class that colors the button.
+	 * The path to the SVG spritemap file containing the icons.
 	 * @instance
 	 * @memberof ClayButton
 	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	spritemap: Config.string(),
+
+	/**
+	 * The css class that colors the button. Style `unstyled` is only for internal
+	 * purposes.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
 	 * @default primary
 	 */
-	style: Config.oneOf([
-		'borderless',
-		'link',
-		'primary',
-		'secondary',
-		'unstyled',
-	]).value('primary'),
+	style: Config.oneOf(['link', 'primary', 'secondary', 'unstyled']).value(
+		'primary'
+	),
 
@@ -145,6 +156,6 @@ /**
 	 * @memberof ClayButton
-	 * @type {?string|undefined}
-	 * @default undefined
+	 * @type {?string}
+	 * @default button
 	 */
-	type: Config.oneOf(['button', 'reset', 'submit']),
+	type: Config.oneOf(['button', 'reset', 'submit']).value('button'),
 
@@ -151,0 +162,0 @@ /**

src/ClayButton.soy.js

@@ -33,3 +33,4 @@ /* jshint ignore:start */
  *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -40,2 +41,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),
@@ -52,2 +54,3 @@ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
   opt_ijData = opt_ijData_deprecated || opt_ijData;
+  var $$temp;
   opt_data = opt_data || {};
@@ -62,5 +65,7 @@ /** @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 {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
   /** @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 iconAlignment = soy.asserts.assertType(opt_data.iconAlignment == null || (goog.isString(opt_data.iconAlignment) || opt_data.iconAlignment instanceof goog.soy.data.SanitizedContent), 'iconAlignment', opt_data.iconAlignment, '!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');
@@ -76,2 +81,4 @@ /** @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');
@@ -82,9 +89,9 @@ /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
   var value = soy.asserts.assertType(opt_data.value == null || (goog.isString(opt_data.value) || opt_data.value instanceof goog.soy.data.SanitizedContent), 'value', opt_data.value, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy17 = function() {
-    $attributes(opt_data, null, opt_ijData);
+  var attributes__soy19 = function() {
+    $attributes({ariaLabel: ariaLabel, block: block, disabled: disabled, elementClasses: elementClasses, icon: icon, id: id, label: label, monospaced: monospaced, name: name, size: size, style: style, type: ($$temp = type) == null ? 'button' : $$temp, value: value}, null, opt_ijData);
   };
   incrementalDom.elementOpenStart('button');
-      attributes__soy17();
+      attributes__soy19();
   incrementalDom.elementOpenEnd();
-    $content(opt_data, null, opt_ijData);
+    $content({icon: icon, iconAlignment: ($$temp = iconAlignment) == null ? 'left' : $$temp, label: label, spritemap: spritemap}, null, opt_ijData);
   incrementalDom.elementClose('button');
@@ -99,3 +106,4 @@ }
  *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -106,2 +114,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),
@@ -120,4 +129,6 @@ *  type: (!goog.soy.data.SanitizedContent|null|string|undefined),
  * @param {{
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
- *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined)
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }} opt_data
@@ -133,12 +144,15 @@ * @param {Object<string, *>=} opt_ijData
   opt_data = opt_data || {};
-  /** @type {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
+  /** @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 iconAlignment = soy.asserts.assertType(opt_data.iconAlignment == null || (goog.isString(opt_data.iconAlignment) || opt_data.iconAlignment instanceof goog.soy.data.SanitizedContent), 'iconAlignment', opt_data.iconAlignment, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {!goog.soy.data.SanitizedContent|function()|null|string|undefined} */
   var label = soy.asserts.assertType(opt_data.label == null || goog.isFunction(opt_data.label) || (goog.isString(opt_data.label) || opt_data.label instanceof goog.soy.data.SanitizedContent), 'label', opt_data.label, '!goog.soy.data.SanitizedContent|function()|null|string|undefined');
-  var iconAlignment__soy45 = icon && icon.alignment ? icon.alignment : 'left';
-  if (icon && iconAlignment__soy45 == 'left') {
+  /** @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');
+  if (icon && iconAlignment == 'left' && spritemap) {
     $icon(opt_data, null, opt_ijData);
   }
   soyIdom.print(($$temp = label) == null ? '' : $$temp);
-  if (icon && iconAlignment__soy45 == 'right') {
+  if (icon && iconAlignment == 'right' && spritemap) {
     $icon(opt_data, null, opt_ijData);
@@ -150,4 +164,6 @@ }
  * @typedef {{
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
- *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined)
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  iconAlignment: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -163,3 +179,4 @@ */
  * @param {{
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)})
+ *  icon: (!goog.soy.data.SanitizedContent|string),
+ *  spritemap: (!goog.soy.data.SanitizedContent|string)
  * }} opt_data
@@ -173,6 +190,7 @@ * @param {Object<string, *>=} opt_ijData
   opt_ijData = opt_ijData_deprecated || opt_ijData;
-  opt_data = opt_data || {};
-  /** @type {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
-  $templateAlias1({spritemap: icon.spritemap, symbol: icon.symbol}, null, opt_ijData);
+  /** @type {!goog.soy.data.SanitizedContent|string} */
+  var icon = soy.asserts.assertType(goog.isString(opt_data.icon) || opt_data.icon instanceof goog.soy.data.SanitizedContent, 'icon', opt_data.icon, '!goog.soy.data.SanitizedContent|string');
+  /** @type {!goog.soy.data.SanitizedContent|string} */
+  var spritemap = soy.asserts.assertType(goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|string');
+  $templateAlias1({spritemap: spritemap, symbol: icon}, null, opt_ijData);
 }
@@ -182,3 +200,4 @@ exports.icon = $icon;
  * @typedef {{
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)})
+ *  icon: (!goog.soy.data.SanitizedContent|string),
+ *  spritemap: (!goog.soy.data.SanitizedContent|string)
  * }}
@@ -198,3 +217,3 @@ */
  *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -225,5 +244,5 @@ *  label: (!goog.soy.data.SanitizedContent|function()|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 {null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), 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|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}');
   /** @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');
@@ -244,10 +263,10 @@ /** @type {!goog.soy.data.SanitizedContent|function()|null|string|undefined} */
   var value = soy.asserts.assertType(opt_data.value == null || (goog.isString(opt_data.value) || opt_data.value instanceof goog.soy.data.SanitizedContent), 'value', opt_data.value, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var classes__soy85 = '';
-  classes__soy85 += 'btn';
-  classes__soy85 += block ? ' btn-block' : '';
-  classes__soy85 += elementClasses ? ' ' + elementClasses : '';
-  classes__soy85 += monospaced ? ' btn-monospaced' : '';
-  classes__soy85 += size ? ' btn-' + size : '';
-  classes__soy85 += style ? ' btn-' + style : ' btn-primary';
-  incrementalDom.attr('class', classes__soy85);
+  var classes__soy92 = '';
+  classes__soy92 += 'btn';
+  classes__soy92 += block ? ' btn-block' : '';
+  classes__soy92 += elementClasses ? ' ' + elementClasses : '';
+  classes__soy92 += monospaced ? ' btn-monospaced' : '';
+  classes__soy92 += size ? ' btn-' + size : '';
+  classes__soy92 += style ? ' btn-' + style : ' btn-primary';
+  incrementalDom.attr('class', classes__soy92);
   if (ariaLabel) {
@@ -258,3 +277,3 @@ incrementalDom.attr('aria-label', ariaLabel);
   } else if (icon) {
-    incrementalDom.attr('aria-label', icon.symbol);
+    incrementalDom.attr('aria-label', icon);
   }
@@ -273,5 +292,3 @@ if (disabled) {
   }
-  if (type) {
-    incrementalDom.attr('type', type);
-  }
+  incrementalDom.attr('type', type);
 }
@@ -285,3 +302,3 @@ exports.attributes = $attributes;
  *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
- *  icon: (null|undefined|{alignment: (!goog.soy.data.SanitizedContent|string), spritemap: (!goog.soy.data.SanitizedContent|string), symbol: (!goog.soy.data.SanitizedContent|string)}),
+ *  icon: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -302,10 +319,10 @@ *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
 
-exports.render.params = ["ariaLabel","block","disabled","elementClasses","icon","id","label","monospaced","name","size","style","type","value"];
-exports.render.types = {"ariaLabel":"string","block":"bool","disabled":"bool","elementClasses":"string","icon":"[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]","id":"string","label":"html|string","monospaced":"bool","name":"string","size":"string","style":"string","type":"string","value":"string"};
-exports.content.params = ["icon","label"];
-exports.content.types = {"icon":"[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]","label":"html|string"};
-exports.icon.params = ["icon"];
-exports.icon.types = {"icon":"[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]"};
+exports.render.params = ["ariaLabel","block","disabled","elementClasses","icon","iconAlignment","id","label","monospaced","name","size","spritemap","style","type","value"];
+exports.render.types = {"ariaLabel":"string","block":"bool","disabled":"bool","elementClasses":"string","icon":"string","iconAlignment":"string","id":"string","label":"html|string","monospaced":"bool","name":"string","size":"string","spritemap":"string","style":"string","type":"string","value":"string"};
+exports.content.params = ["icon","iconAlignment","label","spritemap"];
+exports.content.types = {"icon":"string","iconAlignment":"string","label":"html|string","spritemap":"string"};
+exports.icon.params = ["icon","spritemap"];
+exports.icon.types = {"icon":"string","spritemap":"string"};
 exports.attributes.params = ["ariaLabel","block","disabled","elementClasses","icon","id","label","monospaced","name","size","style","type","value"];
-exports.attributes.types = {"ariaLabel":"string","block":"bool","disabled":"bool","elementClasses":"string","icon":"[\n\t\talignment: string,\n\t\tspritemap: string,\n\t\tsymbol: string\n\t]","id":"string","label":"html|string","monospaced":"bool","name":"string","size":"string","style":"string","type":"string","value":"string"};
+exports.attributes.types = {"ariaLabel":"string","block":"bool","disabled":"bool","elementClasses":"string","icon":"string","id":"string","label":"html|string","monospaced":"bool","name":"string","size":"string","style":"string","type":"string","value":"string"};
 templates = exports;
@@ -312,0 +329,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

105090

increased by5.96%

Lines of code

1092

increased by5.61%

Dependency changes

• Updatedclay-icon@^1.0.0-alpha.9