@govuk-react/icons - npm Package Compare versions

Comparing version 0.1.19 to 0.1.21

es/ArrowLeft/index.js

@@ -0,20 +1,18 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
+import SVG from '../SVGBase/index';
 
 var ArrowLeft = function ArrowLeft(_ref) {
-  var colour = _ref.colour,
-      title = _ref.title;
-  return React.createElement("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "17",
-    height: "13",
-    style: {
-      display: 'block'
-    },
-    fill: colour,
-    viewBox: "0 0 17 13"
-  }, React.createElement("title", null, title), React.createElement("path", {
+  var fill = _ref.fill,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, ["fill", "title"]);
+
+  return React.createElement(SVG, _extends({
+    title: title,
+    fill: fill
+  }, rest), React.createElement("path", {
     d: "m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
@@ -25,10 +23,10 @@ }));
 ArrowLeft.propTypes = process.env.NODE_ENV !== "production" ? {
-  colour: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  fill: PropTypes.string
 } : {};
 ArrowLeft.defaultProps = {
-  colour: 'inherit',
-  title: 'arrow left'
+  title: 'arrow left',
+  fill: 'currentColor'
 };
 export default ArrowLeft;
 //# sourceMappingURL=index.js.map

es/ArrowLeft/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import ArrowRight from '.';
-storiesOf('Search', module).add('Search', function () {
-  return React.createElement(ArrowRight, {
-    title: "example"
-  }, "ArrowRight example");
+import ArrowLeft from '.';
+storiesOf('Icons', module).add('ArrowLeft', function () {
+  return React.createElement(ArrowLeft, {
+    title: "ArrowLeft example",
+    fill: "red"
+  }, "ArrowLeft example");
 });
 //# sourceMappingURL=stories.js.map

es/ArrowRight/index.js

@@ -7,21 +7,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import PropTypes from 'prop-types';
+import SVG from '../SVGBase/index';
 
 var ArrowRight = function ArrowRight(_ref) {
-  var colour = _ref.colour,
+  var fill = _ref.fill,
       title = _ref.title,
-      rest = _objectWithoutProperties(_ref, ["colour", "title"]);
+      rest = _objectWithoutProperties(_ref, ["fill", "title"]);
 
-  return React.createElement("svg", _extends({
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "100%",
-    height: "100%",
-    style: {
-      display: 'block'
-    },
-    fill: colour,
-    viewBox: "0 0 17 13"
-  }, rest), React.createElement("title", null, title), React.createElement("path", {
+  return React.createElement(SVG, _extends({
+    title: title,
+    fill: fill
+  }, rest), React.createElement("path", {
     d: "m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
@@ -32,10 +24,10 @@ }));
 ArrowRight.propTypes = process.env.NODE_ENV !== "production" ? {
-  colour: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  fill: PropTypes.string
 } : {};
 ArrowRight.defaultProps = {
-  colour: 'inherit',
-  title: 'arrow right'
+  title: 'arrow right',
+  fill: 'currentColor'
 };
 export default ArrowRight;
 //# sourceMappingURL=index.js.map

es/ArrowRight/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import ArrowRight from '.';
-storiesOf('Search', module).add('Search', function () {
+storiesOf('Icons', module).add('Arrow Right', function () {
   return React.createElement(ArrowRight, {
-    title: "example"
+    title: "example",
+    fill: "green"
   }, "ArrowRight example");
 });
 //# sourceMappingURL=stories.js.map

es/Search/index.js

@@ -0,19 +1,19 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 import React from 'react';
 import PropTypes from 'prop-types';
+import SVG from '../SVGBase/index';
 
 var Search = function Search(_ref) {
-  var colour = _ref.colour;
-  return React.createElement("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "100%",
-    height: "100%",
-    style: {
-      display: 'block'
-    },
-    fill: colour,
-    viewBox: "0 0 56.966 56.966"
-  }, React.createElement("title", null, "Search"), React.createElement("path", {
+  var fill = _ref.fill,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, ["fill", "title"]);
+
+  return React.createElement(SVG, _extends({
+    viewBox: "0 0 57 57",
+    title: title,
+    fill: fill
+  }, rest), React.createElement("path", {
     d: "M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
@@ -24,8 +24,10 @@ }));
 Search.propTypes = process.env.NODE_ENV !== "production" ? {
-  colour: PropTypes.string
+  title: PropTypes.string,
+  fill: PropTypes.string
 } : {};
 Search.defaultProps = {
-  colour: '#000'
+  title: 'Search',
+  fill: 'currentColor'
 };
 export default Search;
 //# sourceMappingURL=index.js.map

es/Search/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import Search from '.';
-storiesOf('Search', module).add('Search', function () {
-  return React.createElement(Search, null, "Search example");
+storiesOf('Icons', module).add('Search', function () {
+  return React.createElement(Search, {
+    viewBox: "0 0 57 57",
+    fill: "blue"
+  }, "Search example");
 });
 //# sourceMappingURL=stories.js.map

lib/ArrowLeft/index.js

@@ -10,20 +10,19 @@ "use strict";
 
+var _index = _interopRequireDefault(require("../SVGBase/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 var ArrowLeft = function ArrowLeft(_ref) {
-  var colour = _ref.colour,
-      title = _ref.title;
-  return _react.default.createElement("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "17",
-    height: "13",
-    style: {
-      display: 'block'
-    },
-    fill: colour,
-    viewBox: "0 0 17 13"
-  }, _react.default.createElement("title", null, title), _react.default.createElement("path", {
+  var fill = _ref.fill,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, ["fill", "title"]);
+
+  return _react.default.createElement(_index.default, _extends({
+    title: title,
+    fill: fill
+  }, rest), _react.default.createElement("path", {
     d: "m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"
@@ -34,8 +33,8 @@ }));
 ArrowLeft.propTypes = process.env.NODE_ENV !== "production" ? {
-  colour: _propTypes.default.string,
-  title: _propTypes.default.string
+  title: _propTypes.default.string,
+  fill: _propTypes.default.string
 } : {};
 ArrowLeft.defaultProps = {
-  colour: 'inherit',
-  title: 'arrow left'
+  title: 'arrow left',
+  fill: 'currentColor'
 };
@@ -42,0 +41,0 @@ var _default = ArrowLeft;

lib/ArrowLeft/stories.js

@@ -11,7 +11,8 @@ "use strict";
 
-(0, _react2.storiesOf)('Search', module).add('Search', function () {
+(0, _react2.storiesOf)('Icons', module).add('ArrowLeft', function () {
   return _react.default.createElement(_.default, {
-    title: "example"
-  }, "ArrowRight example");
+    title: "ArrowLeft example",
+    fill: "red"
+  }, "ArrowLeft example");
 });
 //# sourceMappingURL=stories.js.map

lib/ArrowRight/index.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _index = _interopRequireDefault(require("../SVGBase/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,19 +20,10 @@
 var ArrowRight = function ArrowRight(_ref) {
-  var colour = _ref.colour,
+  var fill = _ref.fill,
       title = _ref.title,
-      rest = _objectWithoutProperties(_ref, ["colour", "title"]);
+      rest = _objectWithoutProperties(_ref, ["fill", "title"]);
 
-  return _react.default.createElement("svg", _extends({
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "100%",
-    height: "100%",
-    style: {
-      display: 'block'
-    },
-    fill: colour,
-    viewBox: "0 0 17 13"
-  }, rest), _react.default.createElement("title", null, title), _react.default.createElement("path", {
+  return _react.default.createElement(_index.default, _extends({
+    title: title,
+    fill: fill
+  }, rest), _react.default.createElement("path", {
     d: "m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"
@@ -41,8 +34,8 @@ }));
 ArrowRight.propTypes = process.env.NODE_ENV !== "production" ? {
-  colour: _propTypes.default.string,
-  title: _propTypes.default.string
+  title: _propTypes.default.string,
+  fill: _propTypes.default.string
 } : {};
 ArrowRight.defaultProps = {
-  colour: 'inherit',
-  title: 'arrow right'
+  title: 'arrow right',
+  fill: 'currentColor'
 };
@@ -49,0 +42,0 @@ var _default = ArrowRight;

lib/ArrowRight/stories.js

@@ -11,7 +11,8 @@ "use strict";
 
-(0, _react2.storiesOf)('Search', module).add('Search', function () {
+(0, _react2.storiesOf)('Icons', module).add('Arrow Right', function () {
   return _react.default.createElement(_.default, {
-    title: "example"
+    title: "example",
+    fill: "green"
   }, "ArrowRight example");
 });
 //# sourceMappingURL=stories.js.map

lib/Search/index.js

@@ -10,19 +10,20 @@ "use strict";
 
+var _index = _interopRequireDefault(require("../SVGBase/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
 var Search = function Search(_ref) {
-  var colour = _ref.colour;
-  return _react.default.createElement("svg", {
-    version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "100%",
-    height: "100%",
-    style: {
-      display: 'block'
-    },
-    fill: colour,
-    viewBox: "0 0 56.966 56.966"
-  }, _react.default.createElement("title", null, "Search"), _react.default.createElement("path", {
+  var fill = _ref.fill,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, ["fill", "title"]);
+
+  return _react.default.createElement(_index.default, _extends({
+    viewBox: "0 0 57 57",
+    title: title,
+    fill: fill
+  }, rest), _react.default.createElement("path", {
     d: "M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z"
@@ -33,6 +34,8 @@ }));
 Search.propTypes = process.env.NODE_ENV !== "production" ? {
-  colour: _propTypes.default.string
+  title: _propTypes.default.string,
+  fill: _propTypes.default.string
 } : {};
 Search.defaultProps = {
-  colour: '#000'
+  title: 'Search',
+  fill: 'currentColor'
 };
@@ -39,0 +42,0 @@ var _default = Search;

lib/Search/stories.js

@@ -11,5 +11,8 @@ "use strict";
 
-(0, _react2.storiesOf)('Search', module).add('Search', function () {
-  return _react.default.createElement(_.default, null, "Search example");
+(0, _react2.storiesOf)('Icons', module).add('Search', function () {
+  return _react.default.createElement(_.default, {
+    viewBox: "0 0 57 57",
+    fill: "blue"
+  }, "Search example");
 });
 //# sourceMappingURL=stories.js.map

package.json

 {
   "name": "@govuk-react/icons",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "dependencies": {
-    "@govuk-react/constants": "^0.1.19",
+    "@govuk-react/constants": "^0.1.21",
     "govuk-colours": "^1.0.3"
@@ -17,2 +17,3 @@ },
     "@storybook/react": "^3.3.14",
+    "cross-env": "^5.1.4",
     "enzyme": "^3.3.0",
@@ -19,0 +20,0 @@ "react-dom": "^16.2.0",

src/ArrowLeft/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowLeft = ({ colour, title }) => (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="17"
-    height="13"
-    style={{ display: 'block' }}
-    fill={colour}
-    viewBox="0 0 17 13"
-  >
-    <title>{title}</title>
+import SVG from '../SVGBase/index';
+
+const ArrowLeft = ({ fill, title, ...rest }) => (
+  <SVG title={title} fill={fill} {...rest}>
     <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z" />
-  </svg>
+  </SVG>
 );
 
 ArrowLeft.propTypes = {
-  colour: PropTypes.string,
   title: PropTypes.string,
+  fill: PropTypes.string,
 };
 
 ArrowLeft.defaultProps = {
-  colour: 'inherit',
   title: 'arrow left',
+  fill: 'currentColor',
 };
 
 export default ArrowLeft;

src/ArrowLeft/stories.js

 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import ArrowRight from '.';
+import ArrowLeft from '.';
 
-storiesOf('Search', module).add('Search', () => (
-  <ArrowRight title="example">ArrowRight example</ArrowRight>
+storiesOf('Icons', module).add('ArrowLeft', () => (
+  <ArrowLeft title="ArrowLeft example" fill="red">ArrowLeft example</ArrowLeft>
 ));

src/ArrowRight/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ArrowRight = ({ colour, title, ...rest }) => (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="100%"
-    height="100%"
-    style={{ display: 'block' }}
-    fill={colour}
-    viewBox="0 0 17 13"
-    {...rest}
-  >
-    <title>{title}</title>
+import SVG from '../SVGBase/index';
+
+const ArrowRight = ({ fill, title, ...rest }) => (
+  <SVG title={title} fill={fill} {...rest}>
     <path d="m10.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z" />
-  </svg>
+  </SVG>
 );
 
 ArrowRight.propTypes = {
-  colour: PropTypes.string,
   title: PropTypes.string,
+  fill: PropTypes.string,
 };
 
 ArrowRight.defaultProps = {
-  colour: 'inherit',
   title: 'arrow right',
+  fill: 'currentColor',
 };
 
 export default ArrowRight;

src/ArrowRight/stories.js

@@ -6,4 +6,4 @@ import React from 'react';
 
-storiesOf('Search', module).add('Search', () => (
-  <ArrowRight title="example">ArrowRight example</ArrowRight>
+storiesOf('Icons', module).add('Arrow Right', () => (
+  <ArrowRight title="example" fill="green">ArrowRight example</ArrowRight>
 ));

src/Search/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Search = ({ colour }) => (
-  <svg
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    x="0px"
-    y="0px"
-    width="100%"
-    height="100%"
-    style={{ display: 'block' }}
-    fill={colour}
-    viewBox="0 0 56.966 56.966"
-  >
-    <title>Search</title>
+import SVG from '../SVGBase/index';
+
+const Search = ({ fill, title, ...rest }) => (
+  <SVG viewBox="0 0 57 57" title={title} fill={fill} {...rest}>
     <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z" />
-  </svg>
+  </SVG>
 );
 
 Search.propTypes = {
-  colour: PropTypes.string,
+  title: PropTypes.string,
+  fill: PropTypes.string,
 };
 
 Search.defaultProps = {
-  colour: '#000',
+  title: 'Search',
+  fill: 'currentColor',
 };
 
 export default Search;

src/Search/stories.js

@@ -6,4 +6,4 @@ import React from 'react';
 
-storiesOf('Search', module).add('Search', () => (
-  <Search>Search example</Search>
+storiesOf('Icons', module).add('Search', () => (
+  <Search viewBox="0 0 57 57" fill="blue">Search example</Search>
 ));

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

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

78595

increased by57.39%

Number of package files

76

increased by28.81%

Lines of code

721

increased by24.53%

Worsened metrics

Dev dependency count

7

increased by16.67%

Number of low supply chain risk alerts

9

increased by28.57%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@govuk-react/constants@^0.1.21