react-custom-share - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/ShareBlock.js

@@ -27,4 +27,4 @@ 'use strict';
       text = _props$text === undefined ? '' : _props$text,
-      _props$themeClass = props.themeClass,
-      themeClass = _props$themeClass === undefined ? '' : _props$themeClass;
+      _props$className = props.className,
+      className = _props$className === undefined ? '' : _props$className;
 
@@ -34,3 +34,3 @@
     'div',
-    { className: 'rcs-shareblock ' + themeClass },
+    { className: '' + className },
     buttons.map(function (button) {
@@ -55,5 +55,5 @@ var network = button.network,
   text: _propTypes2.default.string,
-  themeClass: _propTypes2.default.string
+  className: _propTypes2.default.string
 };
 
 exports.default = ShareBlock;

dist/ShareButton.js

@@ -67,3 +67,2 @@ 'use strict';
           children = _props.children,
-          styleClass = _props.styleClass,
           className = _props.className;
@@ -70,0 +69,0 @@

dist/styles/ShareBlockStandard.js

@@ -7,8 +7,6 @@ 'use strict';
 
-var _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; };
+var _glamorous = require('glamorous');
 
-var _react = require('react');
+var _glamorous2 = _interopRequireDefault(_glamorous);
 
-var _react2 = _interopRequireDefault(_react);
-
 var _propTypes = require('prop-types');
@@ -18,4 +16,6 @@
 
-require('./css/ShareBlockStandard.css');
+var _react = require('react');
 
+var _react2 = _interopRequireDefault(_react);
+
 var _ShareBlock = require('../ShareBlock');
@@ -27,4 +27,11 @@
 
+var StyledShareBlock = (0, _glamorous2.default)(_ShareBlock2.default)({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'center'
+});
+
 var ShareBlockStandard = function ShareBlockStandard(props) {
-  return _react2.default.createElement(_ShareBlock2.default, _extends({ themeClass: 'rcs-shareblock--standard' }, props));
+  return _react2.default.createElement(StyledShareBlock, props);
 };
@@ -31,0 +38,0 @@

dist/styles/ShareButtonCircle.js

@@ -7,2 +7,6 @@ 'use strict';
 
+var _glamorous = require('glamorous');
+
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
 var _propTypes = require('prop-types');
@@ -16,2 +20,6 @@
 
+var _colors = require('./colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
 var _ShareButton = require('../ShareButton');
@@ -21,20 +29,4 @@
 
-var _glamorous = require('glamorous');
-
-var _glamorous2 = _interopRequireDefault(_glamorous);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var colors = {
-  Facebook: 'rgba(80, 124, 190, 1)',
-  Twitter: 'rgba(99, 205, 241, 1)',
-  GooglePlus: 'rgba(241, 98, 97, 1)',
-  Email: 'rgba(252, 201, 93, 1)',
-  Pinterest: 'rgba(241, 98, 97, 1)',
-  Linkedin: 'rgba(144, 202, 221, 1)'
-};
-
-// import buttonStyles from './css/ShareButtonCircle.module.css';
-// import networkStyles from './css/Networks.module.css';
-
 var StyledShareButton = (0, _glamorous2.default)(_ShareButton2.default)({
@@ -111,3 +103,3 @@ alignItems: 'center',
 }, function (props) {
-  return { background: colors[props.network] };
+  return { background: _colors2.default[props.network] };
 });
@@ -114,0 +106,0 @@

dist/styles/ShareButtonIconOnly.js

@@ -7,4 +7,10 @@ 'use strict';
 
-var _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; };
+var _glamorous = require('glamorous');
 
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -14,8 +20,6 @@
 
-var _propTypes = require('prop-types');
+var _colors = require('./colors');
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _colors2 = _interopRequireDefault(_colors);
 
-require('./css/ShareButtonIconOnly.css');
-
 var _ShareButton = require('../ShareButton');
@@ -27,9 +31,69 @@
 
-var ShareButtonIconOnly = function ShareButtonIconOnly(props) {
-  var networkClassModifier = props.network.toLowerCase();
+var StyledShareButton = (0, _glamorous2.default)(_ShareButton2.default)({
+  alignItems: 'center',
+  background: 'none',
+  border: 0,
+  borderRadius: '50%',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '44px',
+  justifyContent: 'center',
+  margin: '1px',
+  transition: '0.3s',
+  width: '44px',
 
-  return _react2.default.createElement(_ShareButton2.default, _extends({ styleClass: 'rcs-sharebutton--icon-only rcs-' + networkClassModifier }, props));
+  '> svg': {
+    height: '65%',
+    transition: 'transform 0.3s',
+    width: '65%'
+  },
+
+  ':hover': {
+    '> svg': {
+      fill: '#fff'
+    }
+  },
+
+  '@media (any-hover: none)': {
+    ':hover': {
+      background: 'none',
+      boxShadow: 'none'
+    }
+  },
+
+  '@media screen and (min-width: 330px)': {
+    margin: '5px'
+  },
+
+  '@media screen and (min-width: 600px)': {
+    margin: '7px'
+  },
+
+  '@media screen and (min-width: 1025px)': {
+    margin: '10px'
+  }
+}, function (props) {
+  return {
+    '> svg': {
+      fill: _colors2.default[props.network]
+    },
+
+    ':hover': {
+      background: _colors2.default[props.network],
+      boxShadow: '0 0 10px ' + _colors2.default[props.network]
+    },
+
+    '@media (any-hover: none)': {
+      ':hover > svg': {
+        fill: _colors2.default[props.network]
+      }
+    }
+  };
+});
+
+var ShareButtonCircle = function ShareButtonCircle(props) {
+  return _react2.default.createElement(StyledShareButton, props);
 };
 
-ShareButtonIconOnly.propTypes = {
+ShareButtonCircle.propTypes = {
   network: _propTypes2.default.string.isRequired,
@@ -41,2 +105,2 @@ url: _propTypes2.default.string.isRequired,
 
-exports.default = ShareButtonIconOnly;
+exports.default = ShareButtonCircle;

dist/styles/ShareButtonOutline.js

@@ -7,4 +7,10 @@ 'use strict';
 
-var _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; };
+var _glamorous = require('glamorous');
 
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -14,8 +20,6 @@
 
-var _propTypes = require('prop-types');
+var _colors = require('./colors');
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _colors2 = _interopRequireDefault(_colors);
 
-require('./css/ShareButtonOutline.css');
-
 var _ShareButton = require('../ShareButton');
@@ -27,9 +31,61 @@
 
-var ShareButtonOutline = function ShareButtonOutline(props) {
-  var networkClassModifier = props.network.toLowerCase();
+var StyledShareButton = (0, _glamorous2.default)(_ShareButton2.default)({
+  alignItems: 'center',
+  background: 'none',
+  border: 0,
+  borderRadius: '50%',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '44px',
+  justifyContent: 'center',
+  margin: '3px',
+  transition: '0.3s',
+  width: '44px',
 
-  return _react2.default.createElement(_ShareButton2.default, _extends({ styleClass: 'rcs-sharebutton--outline rcs-' + networkClassModifier }, props));
+  '> svg': {
+    fill: 'white',
+    filter: 'drop-shadow(0 0 2px rgba(0, 0, 0, 0.5))',
+    height: '80%',
+    transition: '0.3s',
+    width: '80%'
+  },
+
+  ':hover': {
+    '> svg': {
+      fill: '#fff'
+    }
+  },
+
+  '@media (any-hover: none)': {
+    ':hover > svg': {
+      fill: 'white',
+      filter: 'drop-shadow(0 0 2px rgba(0, 0, 0, 0.5))'
+    }
+  },
+
+  '@media screen and (min-width: 330px)': {
+    margin: '5px'
+  },
+
+  '@media screen and (min-width: 600px)': {
+    margin: '7px'
+  },
+
+  '@media screen and (min-width: 1025px)': {
+    margin: '10px'
+  }
+}, function (props) {
+  return {
+    ':hover > svg': {
+      fill: _colors2.default[props.network],
+      filter: 'none'
+    }
+  };
+});
+
+var ShareButtonCircle = function ShareButtonCircle(props) {
+  return _react2.default.createElement(StyledShareButton, props);
 };
 
-ShareButtonOutline.propTypes = {
+ShareButtonCircle.propTypes = {
   network: _propTypes2.default.string.isRequired,
@@ -41,2 +97,2 @@ url: _propTypes2.default.string.isRequired,
 
-exports.default = ShareButtonOutline;
+exports.default = ShareButtonCircle;

dist/styles/ShareButtonRectangle.js

@@ -7,4 +7,10 @@ 'use strict';
 
-var _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; };
+var _glamorous = require('glamorous');
 
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -14,8 +20,6 @@
 
-var _propTypes = require('prop-types');
+var _colors = require('./colors');
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _colors2 = _interopRequireDefault(_colors);
 
-require('./css/ShareButtonRectangle.css');
-
 var _ShareButton = require('../ShareButton');
@@ -27,9 +31,43 @@
 
-var ShareButtonRectangle = function ShareButtonRectangle(props) {
-  var networkClassModifier = props.network.toLowerCase();
+var StyledShareButton = (0, _glamorous2.default)(_ShareButton2.default)({
+  alignItems: 'center',
+  border: 0,
+  color: '#666',
+  cursor: 'pointer',
+  display: 'flex',
+  flexBasis: '44px',
+  flexGrow: 1,
+  justifyContent: 'center',
+  minHeight: '44px',
+  overflow: 'hidden',
+  transform: 'rotate(0) scale(1)',
 
-  return _react2.default.createElement(_ShareButton2.default, _extends({ styleClass: 'rcs-sharebutton--rectangle rcs-' + networkClassModifier }, props));
+  '> svg': {
+    fill: '#fff',
+    height: '24px',
+    transform: 'scale(1)',
+    transition: '0.3s',
+    width: '24px'
+  },
+
+  ':hover': {
+    '> svg': {
+      transform: 'rotate(-5deg) scale(3)'
+    }
+  },
+
+  '@media (any-hover: none)': {
+    ':hover > svg': {
+      transform: 'rotate(0) scale(1)'
+    }
+  }
+}, function (props) {
+  return { background: _colors2.default[props.network] };
+});
+
+var ShareButtonCircle = function ShareButtonCircle(props) {
+  return _react2.default.createElement(StyledShareButton, props);
 };
 
-ShareButtonRectangle.propTypes = {
+ShareButtonCircle.propTypes = {
   network: _propTypes2.default.string.isRequired,
@@ -41,2 +79,2 @@ url: _propTypes2.default.string.isRequired,
 
-exports.default = ShareButtonRectangle;
+exports.default = ShareButtonCircle;

dist/styles/ShareButtonRoundSquare.js

@@ -7,4 +7,10 @@ 'use strict';
 
-var _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; };
+var _glamorous = require('glamorous');
 
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
@@ -14,8 +20,6 @@
 
-var _propTypes = require('prop-types');
+var _colors = require('./colors');
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _colors2 = _interopRequireDefault(_colors);
 
-require('./css/ShareButtonRoundSquare.css');
-
 var _ShareButton = require('../ShareButton');
@@ -27,11 +31,57 @@
 
-var ShareButtonRoundSquare = function ShareButtonRoundSquare(props) {
-  var networkClassModifier = props.network.toLowerCase();
+var StyledShareButton = (0, _glamorous2.default)(_ShareButton2.default)({
+  alignItems: 'center',
+  background: 'currentColor',
+  border: 0,
+  borderRadius: '8%',
+  cursor: 'pointer',
+  display: 'flex',
+  height: '44px',
+  justifyContent: 'center',
+  margin: '3px',
+  transition: '0.3s',
+  width: '44px',
 
-  return _react2.default.createElement(_ShareButton2.default, _extends({
-    styleClass: 'rcs-sharebutton--round-square rcs-' + networkClassModifier
-  }, props));
+  '> svg': {
+    fill: '#fff',
+    height: '50%',
+    transform: 'rotate(0) scale(1)',
+    transition: '0.5s',
+    width: '50%'
+  },
+
+  ':hover': {
+    '> svg': {
+      filter: 'drop-shadow(0 0 3px rgba(255, 255, 255, 1))',
+      transform: 'rotate(360deg) scale(1.2)'
+    }
+  },
+
+  '@media (any-hover: none)': {
+    ':hover > svg': {
+      filter: 'none',
+      transform: 'rotate(0) scale(1)'
+    }
+  },
+
+  '@media screen and (min-width: 330px)': {
+    margin: '5px'
+  },
+
+  '@media screen and (min-width: 600px)': {
+    margin: '7px'
+  },
+
+  '@media screen and (min-width: 1025px)': {
+    margin: '10px'
+  }
+}, function (props) {
+  return { background: _colors2.default[props.network] };
+});
+
+var ShareButtonCircle = function ShareButtonCircle(props) {
+  return _react2.default.createElement(StyledShareButton, props);
 };
 
-ShareButtonRoundSquare.propTypes = {
+ShareButtonCircle.propTypes = {
   network: _propTypes2.default.string.isRequired,
@@ -43,2 +93,2 @@ url: _propTypes2.default.string.isRequired,
 
-exports.default = ShareButtonRoundSquare;
+exports.default = ShareButtonCircle;

package.json

 {
   "name": "react-custom-share",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Social sharing buttons for React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Worsened metrics

Total package byte prevSize

28816

decreased by-5.96%

Number of package files

16

decreased by-23.81%

Lines of code

689

decreased by-5.23%

No dependency changes