@fenderdigital/react-logo - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

es/__tests__/Logo.test.js

@@ -23,6 +23,4 @@ import React from 'react';
     const props = { appName: 'biff' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-com-primary');
     expect(component(props)).toMatchSnapshot();
@@ -33,6 +31,4 @@ });
     const props = { appName: 'com' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-com-primary');
     expect(component(props)).toMatchSnapshot();
@@ -43,6 +39,4 @@ });
     const props = { appName: 'play' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoPlayDark');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-play-primary');
     expect(component(props)).toMatchSnapshot();
@@ -53,6 +47,4 @@ });
     const props = { appName: 'shop' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoShop');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-shop-primary');
     expect(component(props)).toMatchSnapshot();
@@ -63,6 +55,4 @@ });
     const props = { appName: 'start' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-start-primary');
     expect(component(props)).toMatchSnapshot();
@@ -73,6 +63,4 @@ });
     const props = { appName: 'tone' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoTone');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-tone-primary');
     expect(component(props)).toMatchSnapshot();
@@ -84,6 +72,4 @@ });
       const props = { appName: 'play', type: 'secondary' };
-      const src = component(props)
-        .props()
-        .children.props.src().props['data-file-name'];
-      expect(src).toEqual('SvgLogoPlayLight');
+      const id = component(props).props()['data-id'];
+      expect(id).toEqual('logo-play-secondary');
       expect(component(props)).toMatchSnapshot();
@@ -94,6 +80,4 @@ });
       const props = { appName: 'tone', type: 'secondary' };
-      const src = component(props)
-        .props()
-        .children.props.src().props['data-file-name'];
-      expect(src).toEqual('SvgLogoTone');
+      const id = component(props).props()['data-id'];
+      expect(id).toEqual('logo-tone-primary');
       expect(component(props)).toMatchSnapshot();
@@ -100,0 +84,0 @@ });

es/logo-map.js

@@ -1,6 +0,2 @@
-import comPrimary from './images/logo-com.svg';
-import playPrimary from './images/logo-play-dark.svg';
-import playSecondary from './images/logo-play-light.svg';
-import shopPrimary from './images/logo-shop.svg';
-import tonePrimary from './images/logo-tone.svg';
+import { comPrimary, playPrimary, playSecondary, shopPrimary, tonePrimary } from './constants';
 
@@ -7,0 +3,0 @@ var logoMap = {

es/Logo.js

@@ -7,5 +7,12 @@ import React from 'react';
   if (logoMap[appName]) {
-    return logoMap[appName][type] || logoMap[appName]['primary'];
+    var imgType = logoMap[appName][type] ? type : 'primary';
+    return {
+      app: appName + '-' + imgType,
+      image: logoMap[appName][type] || logoMap[appName]['primary']
+    };
   }
-  return logoMap.com.primary;
+  return {
+    app: 'com-primary',
+    image: logoMap.com.primary
+  };
 };
@@ -16,6 +23,11 @@
       type = _ref.type;
+
+  var _getLogo = getLogo(appName, type),
+      app = _getLogo.app,
+      image = _getLogo.image;
+
   return React.createElement(
     'div',
-    { className: 'logo dib', 'data-id': 'logo' },
-    appName ? React.createElement('img', { alt: appName, 'data-id': 'logo-image', src: getLogo(appName, type) }) : null
+    { className: 'logo dib', 'data-id': 'logo-' + app },
+    appName ? React.createElement('img', { alt: 'logo-' + app, src: image }) : null
   );
@@ -22,0 +34,0 @@ };

lib/__tests__/Logo.test.js

@@ -23,6 +23,4 @@ import React from 'react';
     const props = { appName: 'biff' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-com-primary');
     expect(component(props)).toMatchSnapshot();
@@ -33,6 +31,4 @@ });
     const props = { appName: 'com' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-com-primary');
     expect(component(props)).toMatchSnapshot();
@@ -43,6 +39,4 @@ });
     const props = { appName: 'play' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoPlayDark');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-play-primary');
     expect(component(props)).toMatchSnapshot();
@@ -53,6 +47,4 @@ });
     const props = { appName: 'shop' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoShop');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-shop-primary');
     expect(component(props)).toMatchSnapshot();
@@ -63,6 +55,4 @@ });
     const props = { appName: 'start' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-start-primary');
     expect(component(props)).toMatchSnapshot();
@@ -73,6 +63,4 @@ });
     const props = { appName: 'tone' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoTone');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-tone-primary');
     expect(component(props)).toMatchSnapshot();
@@ -84,6 +72,4 @@ });
       const props = { appName: 'play', type: 'secondary' };
-      const src = component(props)
-        .props()
-        .children.props.src().props['data-file-name'];
-      expect(src).toEqual('SvgLogoPlayLight');
+      const id = component(props).props()['data-id'];
+      expect(id).toEqual('logo-play-secondary');
       expect(component(props)).toMatchSnapshot();
@@ -94,6 +80,4 @@ });
       const props = { appName: 'tone', type: 'secondary' };
-      const src = component(props)
-        .props()
-        .children.props.src().props['data-file-name'];
-      expect(src).toEqual('SvgLogoTone');
+      const id = component(props).props()['data-id'];
+      expect(id).toEqual('logo-tone-primary');
       expect(component(props)).toMatchSnapshot();
@@ -100,0 +84,0 @@ });

lib/logo-map.js

@@ -5,33 +5,13 @@ 'use strict';
 
-var _logoCom = require('./images/logo-com.svg');
+var _constants = require('./constants');
 
-var _logoCom2 = _interopRequireDefault(_logoCom);
-
-var _logoPlayDark = require('./images/logo-play-dark.svg');
-
-var _logoPlayDark2 = _interopRequireDefault(_logoPlayDark);
-
-var _logoPlayLight = require('./images/logo-play-light.svg');
-
-var _logoPlayLight2 = _interopRequireDefault(_logoPlayLight);
-
-var _logoShop = require('./images/logo-shop.svg');
-
-var _logoShop2 = _interopRequireDefault(_logoShop);
-
-var _logoTone = require('./images/logo-tone.svg');
-
-var _logoTone2 = _interopRequireDefault(_logoTone);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var logoMap = {
-  com: { primary: _logoCom2.default },
+  com: { primary: _constants.comPrimary },
   play: {
-    primary: _logoPlayDark2.default,
-    secondary: _logoPlayLight2.default
+    primary: _constants.playPrimary,
+    secondary: _constants.playSecondary
   },
-  shop: { primary: _logoShop2.default },
-  start: { primary: _logoCom2.default },
-  tone: { primary: _logoTone2.default }
+  shop: { primary: _constants.shopPrimary },
+  start: { primary: _constants.comPrimary },
+  tone: { primary: _constants.tonePrimary }
 };
@@ -38,0 +18,0 @@

lib/Logo.js

@@ -21,5 +21,12 @@ 'use strict';
   if (_logoMap2.default[appName]) {
-    return _logoMap2.default[appName][type] || _logoMap2.default[appName]['primary'];
+    var imgType = _logoMap2.default[appName][type] ? type : 'primary';
+    return {
+      app: appName + '-' + imgType,
+      image: _logoMap2.default[appName][type] || _logoMap2.default[appName]['primary']
+    };
   }
-  return _logoMap2.default.com.primary;
+  return {
+    app: 'com-primary',
+    image: _logoMap2.default.com.primary
+  };
 };
@@ -30,6 +37,11 @@
       type = _ref.type;
+
+  var _getLogo = getLogo(appName, type),
+      app = _getLogo.app,
+      image = _getLogo.image;
+
   return _react2.default.createElement(
     'div',
-    { className: 'logo dib', 'data-id': 'logo' },
-    appName ? _react2.default.createElement('img', { alt: appName, 'data-id': 'logo-image', src: getLogo(appName, type) }) : null
+    { className: 'logo dib', 'data-id': 'logo-' + app },
+    appName ? _react2.default.createElement('img', { alt: 'logo-' + app, src: image }) : null
   );
@@ -36,0 +48,0 @@ };

package.json

@@ -20,3 +20,3 @@ {
   },
-  "version": "1.0.4"
+  "version": "1.0.5"
 }

src/__tests__/Logo.test.js

@@ -23,6 +23,4 @@ import React from 'react';
     const props = { appName: 'biff' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-com-primary');
     expect(component(props)).toMatchSnapshot();
@@ -33,6 +31,4 @@ });
     const props = { appName: 'com' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-com-primary');
     expect(component(props)).toMatchSnapshot();
@@ -43,6 +39,4 @@ });
     const props = { appName: 'play' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoPlayDark');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-play-primary');
     expect(component(props)).toMatchSnapshot();
@@ -53,6 +47,4 @@ });
     const props = { appName: 'shop' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoShop');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-shop-primary');
     expect(component(props)).toMatchSnapshot();
@@ -63,6 +55,4 @@ });
     const props = { appName: 'start' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoCom');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-start-primary');
     expect(component(props)).toMatchSnapshot();
@@ -73,6 +63,4 @@ });
     const props = { appName: 'tone' };
-    const src = component(props)
-      .props()
-      .children.props.src().props['data-file-name'];
-    expect(src).toEqual('SvgLogoTone');
+    const id = component(props).props()['data-id'];
+    expect(id).toEqual('logo-tone-primary');
     expect(component(props)).toMatchSnapshot();
@@ -84,6 +72,4 @@ });
       const props = { appName: 'play', type: 'secondary' };
-      const src = component(props)
-        .props()
-        .children.props.src().props['data-file-name'];
-      expect(src).toEqual('SvgLogoPlayLight');
+      const id = component(props).props()['data-id'];
+      expect(id).toEqual('logo-play-secondary');
       expect(component(props)).toMatchSnapshot();
@@ -94,6 +80,4 @@ });
       const props = { appName: 'tone', type: 'secondary' };
-      const src = component(props)
-        .props()
-        .children.props.src().props['data-file-name'];
-      expect(src).toEqual('SvgLogoTone');
+      const id = component(props).props()['data-id'];
+      expect(id).toEqual('logo-tone-primary');
       expect(component(props)).toMatchSnapshot();
@@ -100,0 +84,0 @@ });

src/logo-map.js

@@ -1,6 +0,8 @@
-import comPrimary from './images/logo-com.svg';
-import playPrimary from './images/logo-play-dark.svg';
-import playSecondary from './images/logo-play-light.svg';
-import shopPrimary from './images/logo-shop.svg';
-import tonePrimary from './images/logo-tone.svg';
+import {
+  comPrimary,
+  playPrimary,
+  playSecondary,
+  shopPrimary,
+  tonePrimary,
+} from './constants';
 
@@ -7,0 +9,0 @@ const logoMap = {

src/Logo.js

@@ -7,14 +7,22 @@ import React from 'react';
   if (logoMap[appName]) {
-    return logoMap[appName][type] || logoMap[appName]['primary'];
+    const imgType = logoMap[appName][type] ? type : 'primary';
+    return {
+      app: `${appName}-${imgType}`,
+      image: logoMap[appName][type] || logoMap[appName]['primary'],
+    };
   }
-  return logoMap.com.primary;
+  return {
+    app: 'com-primary',
+    image: logoMap.com.primary,
+  };
 };
 
-const Logo = ({ appName, type }) => (
-  <div className="logo dib" data-id="logo">
-    {appName ? (
-      <img alt={appName} data-id="logo-image" src={getLogo(appName, type)} />
-    ) : null}
-  </div>
-);
+const Logo = ({ appName, type }) => {
+  const { app, image } = getLogo(appName, type);
+  return (
+    <div className="logo dib" data-id={`logo-${app}`}>
+      {appName ? <img alt={`logo-${app}`} src={image} /> : null}
+    </div>
+  );
+};
 
@@ -21,0 +29,0 @@ Logo.propTypes = {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

992001

increased by471.31%

Lines of code

890

increased by131.17%

Worsened metrics

Number of package files

18

decreased by-40%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes