@govuk-react/hoc - npm Package Compare versions

Comparing version 0.1.28 to 0.2.0

es/asAnchor/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { BLUE, PURPLE, YELLOW } from 'govuk-colours';
@@ -20,3 +20,3 @@
   };
-  var StyledHoc = glamorous(Anchor)({
+  var StyledHoc = styled(Anchor)({
     color: BLUE,
@@ -23,0 +23,0 @@ padding: '3px',

es/asAnchor/test.js

@@ -15,3 +15,3 @@ import React from 'react';
   it('returns a component', function () {
-    expect(shallow(wrapper).html().toBeTruthy);
+    expect(shallow(wrapper).html()).toBeTruthy();
   });
@@ -18,0 +18,0 @@ it('matches wrapper snapshot', function () {

es/asPaginationItem/index.js

@@ -1,10 +0,10 @@
-var _glamorous$li, _glamorous$span;
+var _styled, _styled2;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { BLUE, GREY_4, PURPLE, YELLOW, WHITE } from 'govuk-colours';
 import { FONT_SIZE, LINE_HEIGHT, SPACING, MEDIA_QUERIES, NTA_LIGHT } from '@govuk-react/constants';
 import { ArrowRight as NextPageIcon, ArrowLeft as PrevPageIcon } from '@govuk-react/icons';
-var PaginationWrapper = glamorous.li((_glamorous$li = {
+var PaginationWrapper = styled('li')((_styled = {
   boxSizing: 'border-box',
@@ -20,6 +20,6 @@ margin: 0,
   width: '100%'
-}, _glamorous$li[MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled[MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: FONT_SIZE.SIZE_27,
   lineHeight: LINE_HEIGHT.SIZE_16
-}, _glamorous$li['> a'] = {
+}, _styled['> a'] = {
   boxSizing: 'border-box',
@@ -45,3 +45,3 @@ color: BLUE,
   }
-}, _glamorous$li), function (_ref) {
+}, _styled), function (_ref) {
   var previousPage = _ref.previousPage;
@@ -78,3 +78,3 @@ return {
 });
-var InnerWrap = glamorous.div({
+var InnerWrap = styled('div')({
   display: 'flex',
@@ -84,10 +84,10 @@ alignItems: 'center',
 });
-var PageTitle = glamorous.span((_glamorous$span = {
+var PageTitle = styled('span')((_styled2 = {
   fontSize: FONT_SIZE.SIZE_14,
   lineHeight: LINE_HEIGHT.SIZE_14,
   textDecoration: 'underline'
-}, _glamorous$span[MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled2[MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: FONT_SIZE.SIZE_16,
   lineHeight: LINE_HEIGHT.SIZE_16
-}, _glamorous$span));
+}, _styled2));
 
@@ -94,0 +94,0 @@ var asPaginationItem = function asPaginationItem(AnchorType) {

es/asPaginationItem/test.js

@@ -28,3 +28,3 @@ import React from 'react';
   it('returns a component', function () {
-    expect(shallow(wrapper).html().toBeTruthy);
+    expect(shallow(wrapper).html()).toBeTruthy();
   });
@@ -31,0 +31,0 @@ it('matches wrapper snapshot', function () {

es/withWhiteSpace/index.js

 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { SPACING_MAP, SPACING_MAP_INDEX, MEDIA_QUERIES } from '@govuk-react/constants';
@@ -7,3 +7,3 @@
   return function (Component) {
-    var StyledHoc = glamorous(Component)(function (_ref) {
+    var StyledHoc = styled(Component)(function (_ref) {
       var _ref2;
@@ -10,0 +10,0 @@

es/withWhiteSpace/test.js

@@ -21,3 +21,3 @@ import React from 'react';
   it('returns a component', function () {
-    expect(shallow(wrapper).html().toBeTruthy);
+    expect(shallow(wrapper).html()).toBeTruthy();
   });
@@ -24,0 +24,0 @@ it('matches wrapper snapshot', function () {

lib/asAnchor/index.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _glamorous = _interopRequireDefault(require("glamorous"));
+var _reactEmotion = _interopRequireDefault(require("react-emotion"));
 
@@ -31,3 +31,3 @@ var _govukColours = require("govuk-colours");
   };
-  var StyledHoc = (0, _glamorous.default)(Anchor)({
+  var StyledHoc = (0, _reactEmotion.default)(Anchor)({
     color: _govukColours.BLUE,
@@ -34,0 +34,0 @@ padding: '3px',

lib/asAnchor/test.js

@@ -26,3 +26,3 @@ "use strict";
   it('returns a component', function () {
-    expect((0, _enzyme.shallow)(wrapper).html().toBeTruthy);
+    expect((0, _enzyme.shallow)(wrapper).html()).toBeTruthy();
   });
@@ -29,0 +29,0 @@ it('matches wrapper snapshot', function () {

lib/asPaginationItem/index.js

@@ -10,3 +10,3 @@ "use strict";
 
-var _glamorous = _interopRequireDefault(require("glamorous"));
+var _reactEmotion = _interopRequireDefault(require("react-emotion"));
 
@@ -19,7 +19,7 @@ var _govukColours = require("govuk-colours");
 
-var _glamorous$li, _glamorous$span;
+var _styled, _styled2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var PaginationWrapper = _glamorous.default.li((_glamorous$li = {
+var PaginationWrapper = (0, _reactEmotion.default)('li')((_styled = {
   boxSizing: 'border-box',
@@ -35,6 +35,6 @@ margin: 0,
   width: '100%'
-}, _glamorous$li[_constants.MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled[_constants.MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: _constants.FONT_SIZE.SIZE_27,
   lineHeight: _constants.LINE_HEIGHT.SIZE_16
-}, _glamorous$li['> a'] = {
+}, _styled['> a'] = {
   boxSizing: 'border-box',
@@ -60,3 +60,3 @@ color: _govukColours.BLUE,
   }
-}, _glamorous$li), function (_ref) {
+}, _styled), function (_ref) {
   var previousPage = _ref.previousPage;
@@ -93,4 +93,3 @@ return {
 });
-
-var InnerWrap = _glamorous.default.div({
+var InnerWrap = (0, _reactEmotion.default)('div')({
   display: 'flex',
@@ -100,11 +99,10 @@ alignItems: 'center',
 });
-
-var PageTitle = _glamorous.default.span((_glamorous$span = {
+var PageTitle = (0, _reactEmotion.default)('span')((_styled2 = {
   fontSize: _constants.FONT_SIZE.SIZE_14,
   lineHeight: _constants.LINE_HEIGHT.SIZE_14,
   textDecoration: 'underline'
-}, _glamorous$span[_constants.MEDIA_QUERIES.LARGESCREEN] = {
+}, _styled2[_constants.MEDIA_QUERIES.LARGESCREEN] = {
   fontSize: _constants.FONT_SIZE.SIZE_16,
   lineHeight: _constants.LINE_HEIGHT.SIZE_16
-}, _glamorous$span));
+}, _styled2));
 
@@ -111,0 +109,0 @@ var asPaginationItem = function asPaginationItem(AnchorType) {

lib/asPaginationItem/test.js

@@ -40,3 +40,3 @@ "use strict";
   it('returns a component', function () {
-    expect((0, _enzyme.shallow)(wrapper).html().toBeTruthy);
+    expect((0, _enzyme.shallow)(wrapper).html()).toBeTruthy();
   });
@@ -43,0 +43,0 @@ it('matches wrapper snapshot', function () {

lib/withWhiteSpace/index.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _glamorous = _interopRequireDefault(require("glamorous"));
+var _reactEmotion = _interopRequireDefault(require("react-emotion"));
 
@@ -17,3 +17,3 @@ var _constants = require("@govuk-react/constants");
   return function (Component) {
-    var StyledHoc = (0, _glamorous.default)(Component)(function (_ref) {
+    var StyledHoc = (0, _reactEmotion.default)(Component)(function (_ref) {
       var _ref2;
@@ -20,0 +20,0 @@

lib/withWhiteSpace/test.js

@@ -35,3 +35,3 @@ "use strict";
   it('returns a component', function () {
-    expect((0, _enzyme.shallow)(wrapper).html().toBeTruthy);
+    expect((0, _enzyme.shallow)(wrapper).html()).toBeTruthy();
   });
@@ -38,0 +38,0 @@ it('matches wrapper snapshot', function () {

package.json

 {
   "name": "@govuk-react/hoc",
-  "version": "0.1.28",
+  "version": "0.2.0",
   "dependencies": {
-    "@govuk-react/constants": "^0.1.28",
-    "@govuk-react/icons": "^0.1.28",
+    "@govuk-react/constants": "^0.2.0",
+    "@govuk-react/icons": "^0.2.0",
     "govuk-colours": "^1.0.3"
   },
   "peerDependencies": {
-    "glamorous": ">=4",
+    "emotion": ">=9",
     "prop-types": ">=15",
-    "react": ">=15"
+    "react": ">=16.2.0",
+    "react-emotion": ">=9"
   },
@@ -24,3 +25,3 @@ "scripts": {
   "homepage": "https://github.com/penx/govuk-react#readme",
-  "description": "govuk-react: A port of the govuk-frontend components for React using Glamorous.",
+  "description": "govuk-react: A port of the govuk-frontend components for React using Emotion.",
   "private": false,
@@ -27,0 +28,0 @@ "publishConfig": {

src/asAnchor/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { BLUE, PURPLE, YELLOW } from 'govuk-colours';
@@ -23,3 +23,3 @@
 
-  const StyledHoc = glamorous(Anchor)({
+  const StyledHoc = styled(Anchor)({
     color: BLUE,
@@ -26,0 +26,0 @@ padding: '3px',

src/asAnchor/test.js

@@ -17,3 +17,3 @@ import React from 'react';
   it('returns a component', () => {
-    expect(shallow(wrapper).html().toBeTruthy);
+    expect(shallow(wrapper).html()).toBeTruthy();
   });
@@ -20,0 +20,0 @@

src/asPaginationItem/index.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { BLUE, GREY_4, PURPLE, YELLOW, WHITE } from 'govuk-colours';
@@ -15,3 +15,3 @@ import {
 
-const PaginationWrapper = glamorous.li(
+const PaginationWrapper = styled('li')(
   {
@@ -84,3 +84,3 @@ boxSizing: 'border-box',
 
-const InnerWrap = glamorous.div({
+const InnerWrap = styled('div')({
   display: 'flex',
@@ -91,3 +91,3 @@ alignItems: 'center',
 
-const PageTitle = glamorous.span({
+const PageTitle = styled('span')({
   fontSize: FONT_SIZE.SIZE_14,
@@ -94,0 +94,0 @@ lineHeight: LINE_HEIGHT.SIZE_14,

src/asPaginationItem/test.js

@@ -40,3 +40,3 @@ import React from 'react';
   it('returns a component', () => {
-    expect(shallow(wrapper).html().toBeTruthy);
+    expect(shallow(wrapper).html()).toBeTruthy();
   });
@@ -43,0 +43,0 @@

src/withWhiteSpace/index.js

 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import { SPACING_MAP, SPACING_MAP_INDEX, MEDIA_QUERIES } from '@govuk-react/constants';
 
 const withWhiteSpace = config => (Component) => {
-  const StyledHoc = glamorous(Component)(({
+  const StyledHoc = styled(Component)(({
     mb: marginBottom = config.marginBottom,
@@ -8,0 +8,0 @@ }) => ({

src/withWhiteSpace/test.js

@@ -25,3 +25,3 @@ import React from 'react';
   it('returns a component', () => {
-    expect(shallow(wrapper).html().toBeTruthy);
+    expect(shallow(wrapper).html()).toBeTruthy();
   });
@@ -28,0 +28,0 @@

No alert changes

Worsened metrics

Total package byte prevSize

135235

decreased by-0.03%

Dependency count

7

increased by16.67%

Dependency changes

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

• + Added@govuk-react/icons@0.2.7(transitive)

• + Addedemotion@11.0.0(transitive)

• + Addedreact-emotion@10.0.0(transitive)

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

• - Removed@govuk-react/icons@0.1.28(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedbowser@1.9.4(transitive)

• - Removedbrcast@3.0.2(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcss-in-js-utils@2.0.1(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfast-memoize@2.5.2(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedglamor@2.20.40(transitive)

• - Removedglamorous@5.0.0(transitive)

• - Removedhtml-element-attributes@1.3.1(transitive)

• - Removedhtml-tag-names@1.1.5(transitive)

• - Removedhyphenate-style-name@1.1.0(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedinline-style-prefixer@3.0.8(transitive)

• - Removedis-function@1.0.2(transitive)

• - Removedis-plain-object@2.0.4(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisobject@3.0.1(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact-html-attributes@1.4.6(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedsvg-tag-names@1.1.2(transitive)

• - Removedthrough@2.3.8(transitive)

• - Removedua-parser-js@0.7.40(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updated@govuk-react/constants@^0.2.0

• Updated@govuk-react/icons@^0.2.0