@govuk-react/icons - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0-alpha.0

es/ArrowLeft/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var wrapper = React.createElement(ArrowRight, null, "Example");
-describe(ArrowRight, function () {
+describe('ArrowRight', function () {
   it('renders without crashing', function () {
@@ -9,0 +9,0 @@ var div = document.createElement('div');

es/ArrowRight/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var wrapper = React.createElement(ArrowRight, null, "Example");
-describe(ArrowRight, function () {
+describe('ArrowRight', function () {
   it('renders without crashing', function () {
@@ -9,0 +9,0 @@ var div = document.createElement('div');

es/ButtonArrow/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var wrapper = React.createElement(ButtonArrow, null, "Example");
-describe(ButtonArrow, function () {
+describe('ButtonArrow', function () {
   it('renders without crashing', function () {
@@ -9,0 +9,0 @@ var div = document.createElement('div');

es/IconImportant/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var wrapper = React.createElement(IconImportant, null, "Example");
-describe(IconImportant, function () {
+describe('IconImportant', function () {
   it('renders without crashing', function () {
@@ -9,0 +9,0 @@ var div = document.createElement('div');

es/Search/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var wrapper = React.createElement(Search, null, "Example");
-describe(Search, function () {
+describe('Search', function () {
   it('renders without crashing', function () {
@@ -9,0 +9,0 @@ var div = document.createElement('div');

es/Spinner/index.js

@@ -8,35 +8,10 @@ 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 styled from 'react-emotion';
-import { keyframes } from 'emotion';
+import styled, { keyframes } from 'styled-components';
 import SVG from '../SVGBase/index';
+var fadeInOut = keyframes(["0%{opacity:0.250075;}0.01%{opacity:0.25;}0.03%{opacity:1;}100%{opacity:0.250075;}"]);
+var Rect = styled.rect.withConfig({
+  displayName: "Spinner__Rect",
+  componentId: "sc-1pm4zwa-0"
+})(["animation:", " 1s infinite linear;"], fadeInOut);
 
-var animationStyles = function animationStyles() {
-  var fadeInOut =
-  /*#__PURE__*/
-  keyframes({
-    '0%': {
-      opacity: '0.250075'
-    },
-    '0.01%': {
-      opacity: '0.25'
-    },
-    '0.03%': {
-      opacity: '1'
-    },
-    '100%': {
-      opacity: '0.250075'
-    }
-  }, "label:fadeInOut;");
-  return {
-    animation: fadeInOut + " 1s infinite linear"
-  };
-};
-
-var Rect =
-/*#__PURE__*/
-styled('rect', {
-  target: "elgrh6d0",
-  label: "Rect"
-})(animationStyles);
-
 var Spinner = function Spinner(_ref) {
@@ -43,0 +18,0 @@ var className = _ref.className,

es/Spinner/test.js

@@ -10,3 +10,3 @@ import React from 'react';
 }, "Example");
-describe(Spinner, function () {
+describe('Spinner', function () {
   it('renders without crashing', function () {
@@ -13,0 +13,0 @@ var div = document.createElement('div');

es/SVGBase/test.js

@@ -6,3 +6,3 @@ import React from 'react';
 var wrapper = React.createElement(SVG, null, "Example");
-describe(SVG, function () {
+describe('SVG', function () {
   it('renders without crashing', function () {
@@ -9,0 +9,0 @@ var div = document.createElement('div');

lib/ArrowLeft/test.js

@@ -15,3 +15,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('ArrowRight', function () {
   it('renders without crashing', function () {
@@ -18,0 +18,0 @@ var div = document.createElement('div');

lib/ArrowRight/test.js

@@ -15,3 +15,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('ArrowRight', function () {
   it('renders without crashing', function () {
@@ -18,0 +18,0 @@ var div = document.createElement('div');

lib/ButtonArrow/test.js

@@ -15,3 +15,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('ButtonArrow', function () {
   it('renders without crashing', function () {
@@ -18,0 +18,0 @@ var div = document.createElement('div');

lib/IconImportant/test.js

@@ -15,3 +15,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('IconImportant', function () {
   it('renders without crashing', function () {
@@ -18,0 +18,0 @@ var div = document.createElement('div');

lib/Search/test.js

@@ -15,3 +15,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('Search', function () {
   it('renders without crashing', function () {
@@ -18,0 +18,0 @@ var div = document.createElement('div');

lib/Spinner/index.js

@@ -10,8 +10,8 @@ "use strict";
 
-var _reactEmotion = _interopRequireDefault(require("react-emotion"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _emotion = require("emotion");
-
 var _index = _interopRequireDefault(require("../SVGBase/index"));
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,30 +23,8 @@
 
-var animationStyles = function animationStyles() {
-  var fadeInOut =
-  /*#__PURE__*/
-  (0, _emotion.keyframes)({
-    '0%': {
-      opacity: '0.250075'
-    },
-    '0.01%': {
-      opacity: '0.25'
-    },
-    '0.03%': {
-      opacity: '1'
-    },
-    '100%': {
-      opacity: '0.250075'
-    }
-  }, "label:fadeInOut;");
-  return {
-    animation: fadeInOut + " 1s infinite linear"
-  };
-};
+var fadeInOut = (0, _styledComponents.keyframes)(["0%{opacity:0.250075;}0.01%{opacity:0.25;}0.03%{opacity:1;}100%{opacity:0.250075;}"]);
 
-var Rect =
-/*#__PURE__*/
-(0, _reactEmotion.default)('rect', {
-  target: "elgrh6d0",
-  label: "Rect"
-})(animationStyles);
+var Rect = _styledComponents.default.rect.withConfig({
+  displayName: "Spinner__Rect",
+  componentId: "sc-1pm4zwa-0"
+})(["animation:", " 1s infinite linear;"], fadeInOut);
 
@@ -53,0 +31,0 @@ var Spinner = function Spinner(_ref) {

lib/Spinner/test.js

@@ -19,3 +19,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('Spinner', function () {
   it('renders without crashing', function () {
@@ -22,0 +22,0 @@ var div = document.createElement('div');

lib/SVGBase/test.js

@@ -15,3 +15,3 @@ "use strict";
 
-describe(_.default, function () {
+describe('SVG', function () {
   it('renders without crashing', function () {
@@ -18,0 +18,0 @@ var div = document.createElement('div');

package.json

 {
   "name": "@govuk-react/icons",
-  "version": "0.5.1",
+  "version": "0.6.0-alpha.0",
   "dependencies": {
-    "@govuk-react/constants": "^0.5.1",
+    "@govuk-react/constants": "^0.6.0-alpha.0",
     "govuk-colours": "^1.0.3"
   },
   "peerDependencies": {
-    "emotion": ">=9",
     "react": ">=16.2.0",
-    "react-emotion": ">=9"
+    "styled-components": ">=4"
   },
@@ -23,3 +22,3 @@ "scripts": {
   "homepage": "https://github.com/govuk-react/govuk-react#readme",
-  "description": "govuk-react: A port of the govuk-frontend components for React using Emotion.",
+  "description": "govuk-react: A port of the govuk-frontend components for React using styled-components.",
   "private": false,
@@ -26,0 +25,0 @@ "publishConfig": {

src/ArrowLeft/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(ArrowRight, () => {
+describe('ArrowRight', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

src/ArrowRight/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(ArrowRight, () => {
+describe('ArrowRight', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

src/ButtonArrow/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(ButtonArrow, () => {
+describe('ButtonArrow', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

src/IconImportant/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(IconImportant, () => {
+describe('IconImportant', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

src/Search/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(Search, () => {
+describe('Search', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

src/Spinner/index.js

@@ -5,18 +5,16 @@ // https://govuk-loader-prototype.herokuapp.com/components/loader
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
-import { keyframes } from 'emotion';
+import styled, { keyframes } from 'styled-components';
 
 import SVG from '../SVGBase/index';
 
-const animationStyles = () => {
-  const fadeInOut = keyframes({
-    '0%': { opacity: '0.250075' },
-    '0.01%': { opacity: '0.25' },
-    '0.03%': { opacity: '1' },
-    '100%': { opacity: '0.250075' },
-  });
-  return { animation: `${fadeInOut} 1s infinite linear` };
-};
+const fadeInOut = keyframes`
+  0% { opacity: 0.250075; }
+  0.01% { opacity: 0.25; }
+  0.03% { opacity: 1; }
+  100% { opacity: 0.250075; }
+`;
 
-const Rect = styled('rect')(animationStyles);
+const Rect = styled.rect`
+  animation: ${fadeInOut} 1s infinite linear;
+`;
 
@@ -23,0 +21,0 @@ const Spinner = ({

src/Spinner/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(Spinner, () => {
+describe('Spinner', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

src/SVGBase/test.js

@@ -8,3 +8,3 @@ import React from 'react';
 
-describe(SVG, () => {
+describe('SVG', () => {
   it('renders without crashing', () => {
@@ -11,0 +11,0 @@ const div = document.createElement('div');

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

156815

increased by15.02%

Dependency count

4

decreased by-20%

Worsened metrics

Lines of code

1385

decreased by-3.21%

Dependency changes

• + Added@emotion/is-prop-valid@1.2.2(transitive)

• + Added@emotion/memoize@0.8.1(transitive)

• + Added@emotion/unitless@0.8.1(transitive)

• + Added@govuk-react/constants@0.6.0(transitive)

• + Added@types/stylis@4.2.5(transitive)

• + Addedcamelize@1.0.1(transitive)

• + Addedcss-color-keywords@1.0.0(transitive)

• + Addedcss-to-react-native@3.2.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addednanoid@3.3.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.4.38(transitive)

• + Addedpostcss-value-parser@4.2.0(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• + Addedshallowequal@1.1.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedstyled-components@6.1.13(transitive)

• + Addedstylis@4.3.2(transitive)

• + Addedtslib@2.6.2(transitive)

• - Removed@govuk-react/constants@0.5.1(transitive)

• - Removedemotion@11.0.0(transitive)

• - Removedreact-emotion@10.0.0(transitive)

• Updated@govuk-react/constants@^0.6.0-alpha.0