clay-icon - npm Package Compare versions

Comparing version 2.0.0-rc.1 to 2.0.0-rc.2

lib/ClayIcon.js

@@ -67,2 +67,11 @@ 'use strict';
 	/**
+  * Flag to indicate if the svg is focusable or not
+  * @instance
+  * @memberof ClayIcon
+  * @type {?bool}
+  * @default false
+  */
+	focusable: _metalState.Config.bool().value(false),
+
+	/**
   * Id to be applied to the element.
@@ -69,0 +78,0 @@ * @instance

lib/ClayIcon.soy.js

@@ -60,2 +60,4 @@ 'use strict';
     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 {boolean|null|undefined} */
+    var focusable = soy.asserts.assertType(opt_data.focusable == null || goog.isBoolean(opt_data.focusable) || opt_data.focusable === 1 || opt_data.focusable === 0, 'focusable', opt_data.focusable, 'boolean|null|undefined');
     /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -65,5 +67,10 @@ 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');
     var title = soy.asserts.assertType(opt_data.title == null || goog.isString(opt_data.title) || opt_data.title instanceof goog.soy.data.SanitizedContent, 'title', opt_data.title, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy24 = function attributes__soy24() {
+    var attributes__soy31 = function attributes__soy31() {
       incrementalDom.attr('aria-hidden', 'true');
       incrementalDom.attr('class', 'lexicon-icon lexicon-icon-' + symbol + (elementClasses ? ' ' + elementClasses : ''));
+      if (focusable) {
+        incrementalDom.attr('focusable', 'true');
+      } else {
+        incrementalDom.attr('focusable', 'false');
+      }
       if (id) {
@@ -74,3 +81,3 @@ incrementalDom.attr('id', id);
     incrementalDom.elementOpenStart('svg');
-    attributes__soy24();
+    attributes__soy31();
     incrementalDom.elementOpenEnd();
@@ -92,2 +99,3 @@ incrementalDom.elementOpen('title');
    *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  focusable: (boolean|null|undefined),
    *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -102,4 +110,4 @@ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-  exports.render.params = ["spritemap", "symbol", "elementClasses", "id", "title"];
-  exports.render.types = { "spritemap": "string", "symbol": "string", "elementClasses": "string", "id": "string", "title": "string" };
+  exports.render.params = ["spritemap", "symbol", "elementClasses", "focusable", "id", "title"];
+  exports.render.types = { "spritemap": "string", "symbol": "string", "elementClasses": "string", "focusable": "bool", "id": "string", "title": "string" };
   exports.templates = templates = exports;
@@ -106,0 +114,0 @@ return exports;

package.json

 {
   "name": "clay-icon",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "description": "Clay Icon Component",
@@ -42,3 +42,3 @@ "license": "BSD",
     "browserslist-config-clay-components": "^1.0.0-alpha.2",
-    "clay": "^2.0.0-rc.1",
+    "clay": "^2.0.0-rc.2",
     "metal-dom": "^2.13.2",
@@ -45,0 +45,0 @@ "metal-tools-soy": "^6.0.0",

src/__tests__/ClayIcon.js

@@ -63,2 +63,21 @@ import ClayIcon from '../ClayIcon';
 	});
+
+	it('should render an icon with focusable to true', () => {
+		clayIcon = new ClayIcon({
+			focusable: true,
+			spritemap: spritemap,
+			symbol: 'add-cell',
+		});
+
+		expect(clayIcon).toMatchSnapshot();
+	});
+
+	it('should render an icon with focusable to false by default', () => {
+		clayIcon = new ClayIcon({
+			spritemap: spritemap,
+			symbol: 'add-cell',
+		});
+
+		expect(clayIcon).toMatchSnapshot();
+	});
 });

src/ClayIcon.js

@@ -29,2 +29,11 @@ import Component from 'metal-component';
 	/**
+	 * Flag to indicate if the svg is focusable or not
+	 * @instance
+	 * @memberof ClayIcon
+	 * @type {?bool}
+	 * @default false
+	 */
+	focusable: Config.bool().value(false),
+
+	/**
 	 * Id to be applied to the element.
@@ -31,0 +40,0 @@ * @instance

src/ClayIcon.soy.js

@@ -41,2 +41,4 @@ /* jshint ignore:start */
   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 {boolean|null|undefined} */
+  var focusable = soy.asserts.assertType(opt_data.focusable == null || (goog.isBoolean(opt_data.focusable) || opt_data.focusable === 1 || opt_data.focusable === 0), 'focusable', opt_data.focusable, 'boolean|null|undefined');
   /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
@@ -46,5 +48,10 @@ 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');
   var title = soy.asserts.assertType(opt_data.title == null || (goog.isString(opt_data.title) || opt_data.title instanceof goog.soy.data.SanitizedContent), 'title', opt_data.title, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy24 = function() {
+  var attributes__soy31 = function() {
     incrementalDom.attr('aria-hidden', 'true');
     incrementalDom.attr('class', 'lexicon-icon lexicon-icon-' + symbol + (elementClasses ? ' ' + elementClasses : ''));
+    if (focusable) {
+      incrementalDom.attr('focusable', 'true');
+    } else {
+      incrementalDom.attr('focusable', 'false');
+    }
     if (id) {
@@ -55,3 +62,3 @@ incrementalDom.attr('id', id);
   incrementalDom.elementOpenStart('svg');
-      attributes__soy24();
+      attributes__soy31();
   incrementalDom.elementOpenEnd();
@@ -73,2 +80,3 @@ incrementalDom.elementOpen('title');
  *  elementClasses: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  focusable: (boolean|null|undefined),
  *  id: (!goog.soy.data.SanitizedContent|null|string|undefined),
@@ -83,4 +91,4 @@ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined),
 
-exports.render.params = ["spritemap","symbol","elementClasses","id","title"];
-exports.render.types = {"spritemap":"string","symbol":"string","elementClasses":"string","id":"string","title":"string"};
+exports.render.params = ["spritemap","symbol","elementClasses","focusable","id","title"];
+exports.render.types = {"spritemap":"string","symbol":"string","elementClasses":"string","focusable":"bool","id":"string","title":"string"};
 templates = exports;
@@ -87,0 +95,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

34961

increased by11.76%

Lines of code

421

increased by12.57%

No dependency changes