@hig/icon-button - npm Package Compare versions

Comparing version 0.2.2 to 1.0.0

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Icon from '@hig/icon';
-import { AVAILABLE_NAMES } from '@hig/icons';
-export { names, AVAILABLE_NAMES } from '@hig/icons';
 
@@ -69,14 +66,9 @@ var types = Object.freeze({
 
+      var icon = React.cloneElement(this.props.icon, {
+        className: cx(this.props.icon.props.className, "hig__icon-button__icon")
+      });
       return React.createElement(
         Element,
         props,
-        React.createElement(
-          "span",
-          { className: "hig__icon-button__icon" },
-          React.createElement(Icon, {
-            svg: this.props.svg,
-            name: this.props.name,
-            nameOrSVG: this.props.icon
-          })
-        )
+        icon
       );
@@ -95,5 +87,5 @@ }
   /**
-   * Deprecated; use `name` or `svg` instead
+   * Icon or svg to be rendered
    */
-  icon: PropTypes.string,
+  icon: PropTypes.element,
   /**
@@ -104,5 +96,5 @@ * Url button will navigate to when clicked
   /**
-   * Name of the icon to be used
+   * Deprecated; use `icon` instead
    */
-  name: PropTypes.oneOf(AVAILABLE_NAMES),
+  name: PropTypes.oneOf([]),
   /**
@@ -129,3 +121,3 @@ * Called when user moves focus away from the button
   /**
-   * SVG markup used for the icon
+   * Deprecated; use `icon` instead
    */
@@ -158,6 +150,6 @@ svg: PropTypes.string,
       "type": {
-        "name": "string"
+        "name": "element"
       },
       "required": false,
-      "description": "Deprecated; use `name` or `svg` instead"
+      "description": "Icon or svg to be rendered"
     },
@@ -174,7 +166,6 @@ "link": {
         "name": "enum",
-        "computed": true,
-        "value": "AVAILABLE_ICON_NAMES"
+        "value": []
       },
       "required": false,
-      "description": "Name of the icon to be used"
+      "description": "Deprecated; use `icon` instead"
     },
@@ -221,3 +212,3 @@ "onBlur": {
       "required": false,
-      "description": "SVG markup used for the icon"
+      "description": "Deprecated; use `icon` instead"
     },
@@ -224,0 +215,0 @@ "title": {

build/index.js

@@ -11,4 +11,2 @@ 'use strict';
 var cx = _interopDefault(require('classnames'));
-var Icon = _interopDefault(require('@hig/icon'));
-var icons = require('@hig/icons');
 
@@ -76,14 +74,9 @@ var types = Object.freeze({
 
+      var icon = React__default.cloneElement(this.props.icon, {
+        className: cx(this.props.icon.props.className, "hig__icon-button__icon")
+      });
       return React__default.createElement(
         Element,
         props,
-        React__default.createElement(
-          "span",
-          { className: "hig__icon-button__icon" },
-          React__default.createElement(Icon, {
-            svg: this.props.svg,
-            name: this.props.name,
-            nameOrSVG: this.props.icon
-          })
-        )
+        icon
       );
@@ -102,5 +95,5 @@ }
   /**
-   * Deprecated; use `name` or `svg` instead
+   * Icon or svg to be rendered
    */
-  icon: PropTypes.string,
+  icon: PropTypes.element,
   /**
@@ -111,5 +104,5 @@ * Url button will navigate to when clicked
   /**
-   * Name of the icon to be used
+   * Deprecated; use `icon` instead
    */
-  name: PropTypes.oneOf(icons.AVAILABLE_NAMES),
+  name: PropTypes.oneOf([]),
   /**
@@ -136,3 +129,3 @@ * Called when user moves focus away from the button
   /**
-   * SVG markup used for the icon
+   * Deprecated; use `icon` instead
    */
@@ -165,6 +158,6 @@ svg: PropTypes.string,
       "type": {
-        "name": "string"
+        "name": "element"
       },
       "required": false,
-      "description": "Deprecated; use `name` or `svg` instead"
+      "description": "Icon or svg to be rendered"
     },
@@ -181,7 +174,6 @@ "link": {
         "name": "enum",
-        "computed": true,
-        "value": "AVAILABLE_ICON_NAMES"
+        "value": []
       },
       "required": false,
-      "description": "Name of the icon to be used"
+      "description": "Deprecated; use `icon` instead"
     },
@@ -228,3 +220,3 @@ "onBlur": {
       "required": false,
-      "description": "SVG markup used for the icon"
+      "description": "Deprecated; use `icon` instead"
     },
@@ -254,6 +246,4 @@ "title": {
 
-exports.names = icons.names;
-exports.AVAILABLE_NAMES = icons.AVAILABLE_NAMES;
 exports.default = IconButton;
 exports.types = types;
 exports.AVAILABLE_TYPES = AVAILABLE_TYPES;

CHANGELOG.md

@@ -0,1 +1,34 @@
+# [@hig/icon-button-v1.0.0](https://github.com/Autodesk/hig/compare/@hig/icon-button@0.2.2...@hig/icon-button@1.0.0) (2018-12-04)
+
+
+### BREAKING
+
+* **icon/icon-button:** Removes [@hig](https://github.com/hig)/icon and refactor [@hig](https://github.com/hig)/icon-button to use [@hig](https://github.com/hig)/icons ([49d78f4](https://github.com/Autodesk/hig/commit/49d78f4))
+
+
+### Bug Fixes
+
+* **storybook:** Add back Icon stories ([f38f2d4](https://github.com/Autodesk/hig/commit/f38f2d4))
+
+
+### BREAKING CHANGES
+
+* **icon/icon-button:** Removes @hig/icon
+* **icon/icon-button:** Use icon prop instead of name or svg in @hig/icon-button to render Icon/svg
+* **icon/icon-button:** No longer export `names` from @hig/icon-button
+
+Usage:
+```
+import { Assets24 } from "@hig/icons"
+
+function MyComponent() {
+  return (
+    <IconButton
+      icon={<Assets24 />}
+      onClick={() => console.log('Clicked it.')}
+    />
+  );
+}
+```
+
 # [@hig/icon-button-v0.2.2](https://github.com/Autodesk/hig/compare/@hig/icon-button@0.2.1...@hig/icon-button@0.2.2) (2018-10-16)
@@ -2,0 +35,0 @@

package.json

 {
   "name": "@hig/icon-button",
-  "version": "0.2.2",
+  "version": "1.0.0",
   "description": "HIG IconButton component",
@@ -22,4 +22,2 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icon": "^0.2.1",
-    "@hig/icons": "^0.2.1",
     "classnames": "^2.2.5",
@@ -29,4 +27,5 @@ "prop-types": "^15.6.1"
   "devDependencies": {
-    "@hig/babel-preset": "^0.1.0",
+    "@hig/babel-preset": "^0.1.1",
     "@hig/eslint-config": "^0.1.0",
+    "@hig/icons": "^0.2.1",
     "@hig/jest-preset": "^0.1.0",
@@ -33,0 +32,0 @@ "@hig/scripts": "^0.1.2",

README.md

@@ -25,6 +25,8 @@ # Icon Button
 ```jsx
+import { Assets24 } from "@hig/icons"
+
 function MyComponent() {
   return (
     <IconButton
-      name="assets"
+      icon={<Assets24 />}
       onClick={() => console.log('Clicked it.')}
@@ -44,3 +46,3 @@ />
     <IconButton
-      svg={myIcon}
+      icon={myIcon}
       onClick={() => console.log('Clicked it.')}
@@ -47,0 +49,0 @@ />

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

-40%

Number of low quality alerts

1

-50%

Number of lines in readme file

51

4.08%

Worsened metrics

Total package byte prevSize

24572

-2.83%

Dev dependency count

7

16.67%

Lines of code

575

-8.44%

Dependency changes

• - Removed

  @hig/icon@^0.2.1

• - Removed

  @hig/icons@^0.2.1

• - Removed

  @hig/icon@0.2.1
  (transitive)

• - Removed

  @hig/icons@0.2.1
  (transitive)