uip-design-system - npm Package Compare versions

Comparing version 0.1.24 to 0.1.25

es/components/Icon/index.js

@@ -13,2 +13,10 @@ "use strict";
 
+var _invariant = require("invariant");
+
+var _invariant2 = _interopRequireDefault(_invariant);
+
+var _sizes = require("./sizes");
+
+var _sizes2 = _interopRequireDefault(_sizes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,24 +55,36 @@
 
+var icons = {
+  "arrow-down": ArrowDown
+};
+
+var validIcons = Object.keys(icons);
+
 var Icon = function Icon(_ref) {
   var name = _ref.name,
-      props = _objectWithoutProperties(_ref, ["name"]);
+      size = _ref.size,
+      props = _objectWithoutProperties(_ref, ["name", "size"]);
 
-  var Component = void 0;
-  switch (name) {
-    case "arrow-down":
-    default:
-      Component = ArrowDown;
+  var Component = icons[name];
+  var dimensions = {};
+
+  if (_sizes2.default[size]) {
+    dimensions.height = dimensions.width = _sizes2.default[size];
   }
-  return _react2.default.createElement(Component, props);
+
+  (0, _invariant2.default)(!!Component, "Icon " + name + " not found. Valid icons are " + validIcons.join(","));
+
+  return _react2.default.createElement(Component, _extends({}, props, dimensions));
 };
 
 Icon.propTypes = {
-  name: _react.PropTypes.oneOf(["arrow-down"]).isRequired,
-  fill: _react.PropTypes.string
+  name: _react.PropTypes.oneOf(validIcons).isRequired,
+  fill: _react.PropTypes.string,
+  size: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string])
 };
 
 Icon.defaultProps = {
-  fill: "#333"
+  fill: "#333",
+  size: "4"
 };
 
 exports.default = Icon;

lib/components/Icon/index.js

@@ -13,2 +13,10 @@ "use strict";
 
+var _invariant = require("invariant");
+
+var _invariant2 = _interopRequireDefault(_invariant);
+
+var _sizes = require("./sizes");
+
+var _sizes2 = _interopRequireDefault(_sizes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,24 +55,36 @@
 
+var icons = {
+  "arrow-down": ArrowDown
+};
+
+var validIcons = Object.keys(icons);
+
 var Icon = function Icon(_ref) {
   var name = _ref.name,
-      props = _objectWithoutProperties(_ref, ["name"]);
+      size = _ref.size,
+      props = _objectWithoutProperties(_ref, ["name", "size"]);
 
-  var Component = void 0;
-  switch (name) {
-    case "arrow-down":
-    default:
-      Component = ArrowDown;
+  var Component = icons[name];
+  var dimensions = {};
+
+  if (_sizes2.default[size]) {
+    dimensions.height = dimensions.width = _sizes2.default[size];
   }
-  return _react2.default.createElement(Component, props);
+
+  (0, _invariant2.default)(!!Component, "Icon " + name + " not found. Valid icons are " + validIcons.join(","));
+
+  return _react2.default.createElement(Component, _extends({}, props, dimensions));
 };
 
 Icon.propTypes = {
-  name: _react.PropTypes.oneOf(["arrow-down"]).isRequired,
-  fill: _react.PropTypes.string
+  name: _react.PropTypes.oneOf(validIcons).isRequired,
+  fill: _react.PropTypes.string,
+  size: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string])
 };
 
 Icon.defaultProps = {
-  fill: "#333"
+  fill: "#333",
+  size: "4"
 };
 
 exports.default = Icon;

package.json

 {
   "name": "uip-design-system",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "Design system for Urban Infrastructure Partner",
@@ -82,2 +82,3 @@ "main": "./lib/index.js",
     "bodymovin": "^4.5.3",
+    "invariant": "^2.2.2",
     "next": "beta",
@@ -84,0 +85,0 @@ "styled-components": "^1.3.0",

src/components/Icon/index.js

 import React, { PropTypes } from "react";
+import invariant from "invariant";
 import ArrowDown from "./arrow-down.svg";
+import sizes from "./sizes";
 
-const Icon = ({ name, ...props }) => {
-  let Component;
-  switch (name) {
-    case "arrow-down":
-    default:
-      Component = ArrowDown;
+const icons = {
+  "arrow-down": ArrowDown
+};
+
+const validIcons = Object.keys(icons);
+
+const Icon = ({ name, size, ...props }) => {
+  const Component = icons[name];
+  const dimensions = {};
+
+  if (sizes[size]) {
+    dimensions.height = dimensions.width = sizes[size];
   }
-  return <Component {...props} />;
+
+  invariant(
+    !!Component,
+    `Icon ${name} not found. Valid icons are ${validIcons.join(",")}`
+  );
+
+  return <Component {...props} {...dimensions} />;
 };
 
 Icon.propTypes = {
-  name: PropTypes.oneOf(["arrow-down"]).isRequired,
-  fill: PropTypes.string
+  name: PropTypes.oneOf(validIcons).isRequired,
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
 Icon.defaultProps = {
-  fill: "#333"
+  fill: "#333",
+  size: "4"
 };
 
 export default Icon;

src/components/Icon/Readme.md

 We have some icons generated from svg files. The svg files should not have any `fill` properties.
 
-    <Icon name="arrow-down" fill="#333" />
+    <div>
+      <Icon name="arrow-down" fill="#333" />
+    </div>
+
+The icons can have different size properties, ranging from 0 to 7. The default size is 4 (24px).
+
+    <div>
+      <Icon name="arrow-down" fill="#333" size="0" />
+      <Icon name="arrow-down" fill="#333" size="1" />
+      <Icon name="arrow-down" fill="#333" size="2" />
+      <Icon name="arrow-down" fill="#333" size="3" />
+      <Icon name="arrow-down" fill="#333" size="4" />
+      <Icon name="arrow-down" fill="#333" size="5" />
+      <Icon name="arrow-down" fill="#333" size="6" />
+      <Icon name="arrow-down" fill="#333" size="7" />
+    </div>

No alert changes

Improved metrics

Total package byte prevSize

15777326

increased by0.05%

Number of package files

256

increased by1.99%

Lines of code

13978

increased by1.11%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedinvariant@^2.2.2

• + Addedinvariant@2.2.4(transitive)