@influitive/profile-card - npm Package Compare versions

Comparing version 3.0.8 to 3.0.9

lib/actions/profile-card.js

@@ -10,2 +10,4 @@ "use strict";
 
+var _localization = _interopRequireDefault(require("../localization"));
+
 var _analytics = _interopRequireDefault(require("../analytics"));
@@ -79,3 +81,3 @@
       profileCardId: profileCardId,
-      errorMsg: 'Profile details could not be loaded.'
+      errorMsg: _localization.default.t('Profile details could not be loaded.')
     }
@@ -82,0 +84,0 @@ };

lib/components/actions.js

@@ -10,2 +10,6 @@ "use strict";
 
+var _reactI18next = require("react-i18next");
+
+var _localization = _interopRequireDefault(require("../localization"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -78,3 +82,3 @@
         href: "/inbox/".concat(_this.props.id)
-      }, "Message");
+      }, _this.props.t('Message'));
     });
@@ -87,3 +91,3 @@
         onClick: _this._trackProfileView
-      }, "View Profile");
+      }, _this.props.t('View Profile'));
     });
@@ -103,2 +107,10 @@
   _createClass(Footer, [{
+    key: "getDefaultProps",
+    value: function getDefaultProps() {
+      return {
+        i18n: _localization.default,
+        useSuspense: false
+      };
+    }
+  }, {
     key: "render",
@@ -114,8 +126,11 @@ value: function render() {
 
-exports.default = Footer;
-
 _defineProperty(Footer, "propsTypes", {
   id: _propTypes.default.string.isRequired,
   disableViewProfile: _propTypes.default.bool.isRequired,
-  disableMessage: _propTypes.default.bool.isRequired
-});
+  disableMessage: _propTypes.default.bool.isRequired,
+  t: _propTypes.default.string.isRequired
+});
+
+var _default = (0, _reactI18next.withNamespaces)()(Footer);
+
+exports.default = _default;

lib/components/details.js

@@ -10,2 +10,6 @@ "use strict";
 
+var _reactI18next = require("react-i18next");
+
+var _localization = _interopRequireDefault(require("../localization"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -114,3 +118,3 @@
       if ((0, _lodash.default)(_this.props.details.title)) return '';
-      return 'at ';
+      return _this.props.t('at ');
     });
@@ -122,3 +126,3 @@
         variant: "small"
-      }, "Level: ", _this.props.details.level);
+      }, _this.props.t('Level:'), " ", _this.props.details.level);
     });
@@ -130,2 +134,10 @@
   _createClass(Details, [{
+    key: "getDefaultProps",
+    value: function getDefaultProps() {
+      return {
+        i18n: _localization.default,
+        useSuspense: false
+      };
+    }
+  }, {
     key: "render",
@@ -149,7 +161,10 @@ value: function render() {
 
-exports.default = Details;
-
 _defineProperty(Details, "propsTypes", {
   details: _propTypes.default.object.isRequired,
-  theme: _propTypes.default.object.isRequired
-});
+  theme: _propTypes.default.object.isRequired,
+  t: _propTypes.default.string.isRequired
+});
+
+var _default = (0, _reactI18next.withNamespaces)()(Details);
+
+exports.default = _default;

lib/components/loading.js

@@ -12,2 +12,6 @@ "use strict";
 
+var _styledSystem = require("styled-system");
+
+var _skeletonPreloader = require("@influitive/secret-garden/lib/skeleton-preloader");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,7 +39,27 @@
 
-var LoadingContainer =
+var SkeletonPreloader =
 /*#__PURE__*/
 (0, _styled.default)('div', {
   target: "e9yu2q60"
-})("text-align:center;");
+})(_skeletonPreloader.pulsatingAnimation);
+var Avatar =
+/*#__PURE__*/
+(0, _styled.default)(_skeletonPreloader.PreloaderElement, {
+  target: "e9yu2q61"
+})("border-radius:100%;height:60px;overflow:hidden;width:60px;");
+var Attributes =
+/*#__PURE__*/
+(0, _styled.default)(_skeletonPreloader.PreloaderElement, {
+  target: "e9yu2q62"
+})("height:60px;margin-left:", (0, _styledSystem.themeGet)('spacing.4'), "px;width:194px;");
+var DetailsContainer =
+/*#__PURE__*/
+(0, _styled.default)('div', {
+  target: "e9yu2q63"
+})("display:flex;");
+var Action =
+/*#__PURE__*/
+(0, _styled.default)(_skeletonPreloader.PreloaderElement, {
+  target: "e9yu2q64"
+})("float:right;height:36px;margin:", (0, _styledSystem.themeGet)('spacing.2'), "px 0 0 ", (0, _styledSystem.themeGet)('spacing.1'), "px;width:60px;");
 
@@ -56,3 +80,3 @@ var Loading =
     value: function render() {
-      return _react.default.createElement(LoadingContainer, null, "...");
+      return _react.default.createElement(SkeletonPreloader, null, _react.default.createElement(DetailsContainer, null, _react.default.createElement(Avatar, null), _react.default.createElement(Attributes, null)), _react.default.createElement(Action, null), _react.default.createElement(Action, null));
     }
@@ -59,0 +83,0 @@ }]);

lib/components/profile-card.js

@@ -20,6 +20,2 @@ "use strict";
 
-var _themeProvider = _interopRequireDefault(require("@influitive/secret-garden/lib/theme-provider"));
-
-var _fromHub = require("../from-hub");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,16 +45,2 @@
 
-var themeOverrides = {};
-
-if (_fromHub.hubPrimaryColor) {
-  themeOverrides['colors'] = {
-    primary: [_fromHub.hubPrimaryColor]
-  };
-}
-
-if (_fromHub.hubCustomFont.enabled && _fromHub.hubCustomFont.url) {
-  themeOverrides['fonts'] = {
-    family: [_fromHub.hubCustomFont.name]
-  };
-}
-
 var UnstyledButton =
@@ -111,5 +93,3 @@ /*#__PURE__*/
       if ((0, _lodash.default)(this.props.profileDetails)) return null;
-      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_themeProvider.default, {
-        theme: themeOverrides
-      }, _react.default.createElement(_popover.default, {
+      return _react.default.createElement(_popover.default, {
         place: this.props.position || 'below',
@@ -119,3 +99,3 @@ onOuterAction: this.props.hideProfile,
         isOpen: this.props.profileDetails.isOpen
-      }, this.renderToWrapper())));
+      }, this.renderToWrapper());
     }
@@ -122,0 +102,0 @@ }]);

lib/containers/profile-card.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _themeProvider = _interopRequireDefault(require("@influitive/secret-garden/lib/theme-provider"));
+
 var _profileCard = require("../actions/profile-card");
@@ -19,2 +21,4 @@
 
+var _fromHub = require("../from-hub");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,2 +48,16 @@
 
+var themeOverrides = {};
+
+if (_fromHub.hubPrimaryColor) {
+  themeOverrides['colors'] = {
+    primary: [_fromHub.hubPrimaryColor]
+  };
+}
+
+if (_fromHub.hubCustomFont.enabled && _fromHub.hubCustomFont.url) {
+  themeOverrides['fonts'] = {
+    family: [_fromHub.hubCustomFont.name]
+  };
+}
+
 var ProfileCard =
@@ -92,3 +110,5 @@ /*#__PURE__*/
       if (this.props.anonymous) {
-        return this.props.children;
+        return _react.default.createElement(_themeProvider.default, {
+          theme: themeOverrides
+        }, this.props.children);
       }
@@ -102,3 +122,5 @@
           profileDetails = _this$props4.profileDetails;
-      return _react.default.createElement(_profileCard2.default, {
+      return _react.default.createElement(_themeProvider.default, {
+        theme: themeOverrides
+      }, _react.default.createElement(_profileCard2.default, {
         "data-fs": this.props['data-fs'],
@@ -112,3 +134,3 @@ "data-qa": this.props['data-qa'],
         toggleProfile: this.handleToggleProfile
-      }, this.props.children);
+      }, this.props.children));
     }
@@ -115,0 +137,0 @@ }]);

package.json

 {
   "name": "@influitive/profile-card",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "dependencies": {
     "@influitive/jwt": "^2.1.2",
+    "@influitive/locize-launcher": "^0.2.0",
     "@influitive/runtime-deps": "3.0.0",
@@ -7,0 +8,0 @@ "@influitive/scripts": "^1.1.5",

src/actions/profile-card.js

 import axios from 'axios';
+import i18n from '../localization';
 import analytics from '../analytics';
@@ -66,3 +67,3 @@ import actions from './action-types';
       profileCardId,
-      errorMsg: 'Profile details could not be loaded.'
+      errorMsg: i18n.t('Profile details could not be loaded.')
     }
@@ -69,0 +70,0 @@ };

src/components/actions.js

 import React, { Component } from 'react';
+import { withNamespaces } from 'react-i18next';
+import i18n from '../localization';
 import PropTypes from 'prop-types';
@@ -18,7 +20,15 @@ import { analyticsLogEvent, analyticsTrackingDetails } from '../from-hub';
 
-export default class Footer extends Component {
+class Footer extends Component {
+  getDefaultProps() {
+    return {
+      i18n,
+      useSuspense: false
+    };
+  }
+
   static propsTypes = {
     id: PropTypes.string.isRequired,
     disableViewProfile: PropTypes.bool.isRequired,
-    disableMessage: PropTypes.bool.isRequired
+    disableMessage: PropTypes.bool.isRequired,
+    t: PropTypes.string.isRequired
   }
@@ -42,3 +52,3 @@
       <Action href={`/inbox/${this.props.id}`}>
-        Message
+        {this.props.t('Message')}
       </Action>
@@ -55,3 +65,3 @@ );
         onClick={this._trackProfileView}>
-        View Profile
+        {this.props.t('View Profile')}
       </Action>
@@ -69,1 +79,3 @@ );
 }
+
+export default withNamespaces()(Footer);

src/components/details.js

 import React, { Component } from 'react';
+import { withNamespaces } from 'react-i18next';
+import i18n from '../localization';
 import PropTypes from 'prop-types';
@@ -38,6 +40,14 @@ import isEmpty from 'lodash.isempty';
 
-export default class Details extends Component {
+class Details extends Component {
+  getDefaultProps() {
+    return {
+      i18n,
+      useSuspense: false
+    };
+  }
+
   static propsTypes = {
     details: PropTypes.object.isRequired,
-    theme: PropTypes.object.isRequired
+    theme: PropTypes.object.isRequired,
+    t: PropTypes.string.isRequired
   }
@@ -86,3 +96,3 @@
 
-    return 'at ';
+    return this.props.t('at ');
   }
@@ -93,5 +103,5 @@
 
-    return  (
+    return (
       <Attribute variant='small'>
-        Level: {this.props.details.level}
+        {this.props.t('Level:')} {this.props.details.level}
       </Attribute>
@@ -101,1 +111,3 @@ );
 }
+
+export default withNamespaces()(Details);

src/components/loading.js

 import React, { Component } from 'react';
 import styled from '@emotion/styled';
+import { themeGet } from 'styled-system';
+import { PreloaderElement, pulsatingAnimation } from '@influitive/secret-garden/lib/skeleton-preloader';
 
-const LoadingContainer = styled('div')`
-  text-align: center;
+const SkeletonPreloader = styled('div')`
+  ${pulsatingAnimation}
 `;
 
+const Avatar = styled(PreloaderElement)`
+  border-radius: 100%;
+  height: 60px;
+  overflow: hidden;
+  width: 60px;
+`;
+
+const Attributes = styled(PreloaderElement)`
+  height: 60px;
+  margin-left: ${themeGet('spacing.4')}px;
+  width: 194px;
+`;
+
+const DetailsContainer = styled('div')`
+  display: flex;
+`;
+
+const Action = styled(PreloaderElement)`
+  float: right;
+  height: 36px;
+  margin: ${themeGet('spacing.2')}px 0 0 ${themeGet('spacing.1')}px;
+  width: 60px;
+`;
+
 export default class Loading extends Component {
   render() {
-    return <LoadingContainer>...</LoadingContainer>;
+    return (
+      <SkeletonPreloader>
+        <DetailsContainer>
+          <Avatar/>
+          <Attributes/>
+        </DetailsContainer>
+        <Action/>
+        <Action/>
+      </SkeletonPreloader>
+    );
   }
 }

src/components/profile-card.js

@@ -7,15 +7,3 @@ import React, { Component } from 'react';
 import CardDetails from './card-details';
-import ThemeProvider from '@influitive/secret-garden/lib/theme-provider';
-import { hubPrimaryColor, hubCustomFont } from '../from-hub';
 
-const themeOverrides = {};
-
-if (hubPrimaryColor) {
-  themeOverrides['colors'] = { primary: [hubPrimaryColor] };
-}
-
-if (hubCustomFont.enabled && hubCustomFont.url) {
-  themeOverrides['fonts'] = { family: [hubCustomFont.name] };
-}
-
 const UnstyledButton = styled('button')`
@@ -56,13 +44,9 @@ cursor: pointer;
     return (
-      <React.Fragment>
-        <ThemeProvider theme={themeOverrides}>
-          <Popover
-            place={this.props.position || 'below'}
-            onOuterAction={this.props.hideProfile}
-            body={this.popoverContent()}
-            isOpen={this.props.profileDetails.isOpen}>
-            {this.renderToWrapper()}
-          </Popover>
-        </ThemeProvider>
-      </React.Fragment>
+      <Popover
+        place={this.props.position || 'below'}
+        onOuterAction={this.props.hideProfile}
+        body={this.popoverContent()}
+        isOpen={this.props.profileDetails.isOpen}>
+        {this.renderToWrapper()}
+      </Popover>
     );
@@ -69,0 +53,0 @@ }

src/containers/profile-card.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import ThemeProvider from '@influitive/secret-garden/lib/theme-provider';
 import { hideProfile, initializeProfileCard, toggleProfile } from '../actions/profile-card';
 import ProfileCardComponent from '../components/profile-card';
+import { hubPrimaryColor, hubCustomFont } from '../from-hub';
 
+const themeOverrides = {};
+
+if (hubPrimaryColor) {
+  themeOverrides['colors'] = { primary: [hubPrimaryColor] };
+}
+
+if (hubCustomFont.enabled && hubCustomFont.url) {
+  themeOverrides['fonts'] = { family: [hubCustomFont.name] };
+}
+
 class ProfileCard extends Component {
@@ -41,3 +53,7 @@ static propsTypes = {
     if (this.props.anonymous) {
-      return this.props.children;
+      return (
+        <ThemeProvider theme={themeOverrides}>
+          {this.props.children}
+        </ThemeProvider>
+      );
     }
@@ -48,13 +64,15 @@
     return (
-      <ProfileCardComponent
-        data-fs={this.props['data-fs']}
-        data-qa={this.props['data-qa']}
-        disableMessage={disableMessage}
-        disableViewProfile={disableViewProfile}
-        hideProfile={this.handleHideProfile}
-        position={position}
-        profileDetails={profileDetails[profileCardId]}
-        toggleProfile={this.handleToggleProfile}>
-        {this.props.children}
-      </ProfileCardComponent>
+      <ThemeProvider theme={themeOverrides}>
+        <ProfileCardComponent
+          data-fs={this.props['data-fs']}
+          data-qa={this.props['data-qa']}
+          disableMessage={disableMessage}
+          disableViewProfile={disableViewProfile}
+          hideProfile={this.handleHideProfile}
+          position={position}
+          profileDetails={profileDetails[profileCardId]}
+          toggleProfile={this.handleToggleProfile}>
+          {this.props.children}
+        </ProfileCardComponent>
+      </ThemeProvider>
     );
@@ -61,0 +79,0 @@ }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

500143

increased by0.85%

Number of package files

51

increased by4.08%

Lines of code

2080

increased by6.01%

Worsened metrics

Dependency count

9

increased by12.5%

Number of low supply chain risk alerts

5

increased by400%

Dependency changes

• + Added@influitive/locize-launcher@^0.2.0