@micromag/element-share-options 0.3.181 → 0.3.186

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +29 -11
  3. package/lib/index.js +28 -10
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-share-options-shareButton{display:inline-block;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.5rem}.micromag-element-share-options-shareButton{width:100%;position:relative;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:left;font-weight:400;color:#fff;background-color:#1c1c1c;-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1), -webkit-transform .3s cubic-bezier(0,.6,.5,1);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-element-share-options-shareButton:active{-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-element-share-options-icon{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.micromag-element-share-options-label{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding:.5rem .25rem}.micromag-element-share-options-labelText{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:1rem}
1
+ .micromag-element-share-options-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.5rem}.micromag-element-share-options-button{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:left;font-weight:400;color:#fff;background-color:rgba(0,0,0,0);-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1), -webkit-transform .3s cubic-bezier(0,.6,.5,1);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}@media (hover:hover){.micromag-element-share-options-button:hover .micromag-element-share-options-icon,.micromag-element-share-options-button:hover .micromag-element-share-options-label{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);-webkit-transition:-webkit-transform .3s cubic-bezier(.21,2.59,0,.9);transition:-webkit-transform .3s cubic-bezier(.21,2.59,0,.9);-o-transition:transform .3s cubic-bezier(.21,2.59,0,.9);transition:transform .3s cubic-bezier(.21,2.59,0,.9);transition:transform .3s cubic-bezier(.21,2.59,0,.9), -webkit-transform .3s cubic-bezier(.21,2.59,0,.9)}}.micromag-element-share-options-button:active .micromag-element-share-options-icon,.micromag-element-share-options-button:active .micromag-element-share-options-label{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67)}.micromag-element-share-options-icon{position:relative;display:block;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.micromag-element-share-options-icon,.micromag-element-share-options-label{-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);-o-transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1), -webkit-transform .3s cubic-bezier(0,.6,.5,1)}.micromag-element-share-options-label{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;font-weight:700;padding:.5rem .25rem;margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-element-share-options-labelText{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:1rem}
package/es/index.js CHANGED
@@ -8,7 +8,7 @@ import { FormattedMessage } from 'react-intl';
8
8
  import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon, WhatsappShareButton, WhatsappIcon, FacebookMessengerShareButton, FacebookMessengerIcon, EmailShareButton, EmailIcon } from 'react-share';
9
9
  import { PropTypes as PropTypes$1 } from '@micromag/core';
10
10
  import { Button } from '@micromag/core/components';
11
- import { getStyleFromText, getStyleFromBox, copyToClipboard } from '@micromag/core/utils';
11
+ import { getStyleFromColor, getStyleFromText, getStyleFromBox, copyToClipboard } from '@micromag/core/utils';
12
12
 
13
13
  var propTypes$1 = {
14
14
  className: PropTypes.string,
@@ -48,7 +48,7 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
48
48
  ShareLinkIcon.propTypes = propTypes$1;
49
49
  ShareLinkIcon.defaultProps = defaultProps$1;
50
50
 
51
- var styles = {"shareButton":"micromag-element-share-options-shareButton","item":"micromag-element-share-options-item","icon":"micromag-element-share-options-icon","label":"micromag-element-share-options-label","labelText":"micromag-element-share-options-labelText"};
51
+ var styles = {"button":"micromag-element-share-options-button","item":"micromag-element-share-options-item","icon":"micromag-element-share-options-icon","label":"micromag-element-share-options-label","labelText":"micromag-element-share-options-labelText"};
52
52
 
53
53
  var propTypes = {
54
54
  className: PropTypes.string,
@@ -60,6 +60,7 @@ var propTypes = {
60
60
  options: PropTypes.arrayOf(PropTypes.string),
61
61
  buttonsStyle: PropTypes$1.boxStyle,
62
62
  buttonsTextStyle: PropTypes$1.textStyle,
63
+ theme: PropTypes$1.viewerTheme,
63
64
  onShare: PropTypes.func,
64
65
  onClose: PropTypes.func,
65
66
  focusable: PropTypes.bool
@@ -74,13 +75,14 @@ var defaultProps = {
74
75
  options: null,
75
76
  buttonsStyle: null,
76
77
  buttonsTextStyle: null,
78
+ theme: null,
77
79
  onShare: null,
78
80
  onClose: null,
79
81
  focusable: true
80
82
  };
81
83
 
82
84
  var ShareOptions = function ShareOptions(_ref) {
83
- var _ref10;
85
+ var _ref13;
84
86
 
85
87
  var className = _ref.className,
86
88
  itemClassName = _ref.itemClassName,
@@ -91,10 +93,25 @@ var ShareOptions = function ShareOptions(_ref) {
91
93
  options = _ref.options,
92
94
  buttonsStyle = _ref.buttonsStyle,
93
95
  buttonsTextStyle = _ref.buttonsTextStyle,
96
+ theme = _ref.theme,
94
97
  onShare = _ref.onShare,
95
98
  onClose = _ref.onClose,
96
99
  focusable = _ref.focusable;
97
- var finalStyles = null;
100
+
101
+ var _ref2 = theme || {},
102
+ _ref2$menuTheme = _ref2.menuTheme,
103
+ menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
104
+
105
+ var _ref3 = menuTheme || {},
106
+ _ref3$colors = _ref3.colors,
107
+ colors = _ref3$colors === void 0 ? null : _ref3$colors;
108
+
109
+ var _ref4 = colors || {},
110
+ _ref4$primary = _ref4.primary,
111
+ brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
112
+
113
+ var colorStyles = getStyleFromColor(brandPrimaryColor, 'color');
114
+ var finalStyles = colorStyles;
98
115
 
99
116
  if (buttonsTextStyle !== null) {
100
117
  finalStyles = _objectSpread(_objectSpread({}, finalStyles), getStyleFromText(buttonsTextStyle));
@@ -124,7 +141,7 @@ var ShareOptions = function ShareOptions(_ref) {
124
141
  }, [onShare]);
125
142
  var shareButtonProps = useMemo(function () {
126
143
  return {
127
- className: classNames([styles.shareButton, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
144
+ className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
128
145
  url: url,
129
146
  onShareWindowClose: function onShareWindowClose() {
130
147
  if (onClose !== null) {
@@ -239,12 +256,13 @@ var ShareOptions = function ShareOptions(_ref) {
239
256
  }, /*#__PURE__*/React.createElement("div", {
240
257
  className: styles.options
241
258
  }, hasShareLink ? /*#__PURE__*/React.createElement("div", {
242
- className: classNames([styles.item, (_ref10 = {}, _defineProperty(_ref10, itemClassName, itemClassName !== null), _defineProperty(_ref10, styles.isLinkCopied, linkCopied), _ref10)])
259
+ className: classNames([styles.item, (_ref13 = {}, _defineProperty(_ref13, itemClassName, itemClassName !== null), _defineProperty(_ref13, styles.isLinkCopied, linkCopied), _ref13)])
243
260
  }, /*#__PURE__*/React.createElement(Button, {
244
- className: classNames([styles.shareButton, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
261
+ className: classNames([styles.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
245
262
  onClick: onClickCopy,
246
263
  focusable: focusable,
247
- style: finalStyles
264
+ style: finalStyles,
265
+ withoutBootstrapStyles: true
248
266
  }, /*#__PURE__*/React.createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
249
267
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
250
268
  }, /*#__PURE__*/React.createElement("span", {
@@ -261,9 +279,9 @@ var ShareOptions = function ShareOptions(_ref) {
261
279
  "type": 0,
262
280
  "value": "Link copied!"
263
281
  }]
264
- }) : null)))) : null, selectedOptions.map(function (_ref13) {
265
- var id = _ref13.id,
266
- button = _ref13.button;
282
+ }) : null)))) : null, selectedOptions.map(function (_ref16) {
283
+ var id = _ref16.id,
284
+ button = _ref16.button;
267
285
  return /*#__PURE__*/React.createElement("div", {
268
286
  key: id,
269
287
  className: classNames([styles.item, _defineProperty({}, itemClassName, itemClassName !== null)])
package/lib/index.js CHANGED
@@ -59,7 +59,7 @@ var ShareLinkIcon = function ShareLinkIcon(_ref) {
59
59
  ShareLinkIcon.propTypes = propTypes$1;
60
60
  ShareLinkIcon.defaultProps = defaultProps$1;
61
61
 
62
- var styles = {"shareButton":"micromag-element-share-options-shareButton","item":"micromag-element-share-options-item","icon":"micromag-element-share-options-icon","label":"micromag-element-share-options-label","labelText":"micromag-element-share-options-labelText"};
62
+ var styles = {"button":"micromag-element-share-options-button","item":"micromag-element-share-options-item","icon":"micromag-element-share-options-icon","label":"micromag-element-share-options-label","labelText":"micromag-element-share-options-labelText"};
63
63
 
64
64
  var propTypes = {
65
65
  className: PropTypes__default["default"].string,
@@ -71,6 +71,7 @@ var propTypes = {
71
71
  options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
72
72
  buttonsStyle: core.PropTypes.boxStyle,
73
73
  buttonsTextStyle: core.PropTypes.textStyle,
74
+ theme: core.PropTypes.viewerTheme,
74
75
  onShare: PropTypes__default["default"].func,
75
76
  onClose: PropTypes__default["default"].func,
76
77
  focusable: PropTypes__default["default"].bool
@@ -85,13 +86,14 @@ var defaultProps = {
85
86
  options: null,
86
87
  buttonsStyle: null,
87
88
  buttonsTextStyle: null,
89
+ theme: null,
88
90
  onShare: null,
89
91
  onClose: null,
90
92
  focusable: true
91
93
  };
92
94
 
93
95
  var ShareOptions = function ShareOptions(_ref) {
94
- var _ref10;
96
+ var _ref13;
95
97
 
96
98
  var className = _ref.className,
97
99
  itemClassName = _ref.itemClassName,
@@ -102,10 +104,25 @@ var ShareOptions = function ShareOptions(_ref) {
102
104
  options = _ref.options,
103
105
  buttonsStyle = _ref.buttonsStyle,
104
106
  buttonsTextStyle = _ref.buttonsTextStyle,
107
+ theme = _ref.theme,
105
108
  onShare = _ref.onShare,
106
109
  onClose = _ref.onClose,
107
110
  focusable = _ref.focusable;
108
- var finalStyles = null;
111
+
112
+ var _ref2 = theme || {},
113
+ _ref2$menuTheme = _ref2.menuTheme,
114
+ menuTheme = _ref2$menuTheme === void 0 ? null : _ref2$menuTheme;
115
+
116
+ var _ref3 = menuTheme || {},
117
+ _ref3$colors = _ref3.colors,
118
+ colors = _ref3$colors === void 0 ? null : _ref3$colors;
119
+
120
+ var _ref4 = colors || {},
121
+ _ref4$primary = _ref4.primary,
122
+ brandPrimaryColor = _ref4$primary === void 0 ? null : _ref4$primary;
123
+
124
+ var colorStyles = utils.getStyleFromColor(brandPrimaryColor, 'color');
125
+ var finalStyles = colorStyles;
109
126
 
110
127
  if (buttonsTextStyle !== null) {
111
128
  finalStyles = _objectSpread__default["default"](_objectSpread__default["default"]({}, finalStyles), utils.getStyleFromText(buttonsTextStyle));
@@ -135,7 +152,7 @@ var ShareOptions = function ShareOptions(_ref) {
135
152
  }, [onShare]);
136
153
  var shareButtonProps = React.useMemo(function () {
137
154
  return {
138
- className: classNames__default["default"]([styles.shareButton, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
155
+ className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
139
156
  url: url,
140
157
  onShareWindowClose: function onShareWindowClose() {
141
158
  if (onClose !== null) {
@@ -250,12 +267,13 @@ var ShareOptions = function ShareOptions(_ref) {
250
267
  }, /*#__PURE__*/React__default["default"].createElement("div", {
251
268
  className: styles.options
252
269
  }, hasShareLink ? /*#__PURE__*/React__default["default"].createElement("div", {
253
- className: classNames__default["default"]([styles.item, (_ref10 = {}, _defineProperty__default["default"](_ref10, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref10, styles.isLinkCopied, linkCopied), _ref10)])
270
+ className: classNames__default["default"]([styles.item, (_ref13 = {}, _defineProperty__default["default"](_ref13, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref13, styles.isLinkCopied, linkCopied), _ref13)])
254
271
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
255
- className: classNames__default["default"]([styles.shareButton, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
272
+ className: classNames__default["default"]([styles.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
256
273
  onClick: onClickCopy,
257
274
  focusable: focusable,
258
- style: finalStyles
275
+ style: finalStyles,
276
+ withoutBootstrapStyles: true
259
277
  }, /*#__PURE__*/React__default["default"].createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
260
278
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
261
279
  }, /*#__PURE__*/React__default["default"].createElement("span", {
@@ -272,9 +290,9 @@ var ShareOptions = function ShareOptions(_ref) {
272
290
  "type": 0,
273
291
  "value": "Link copied!"
274
292
  }]
275
- }) : null)))) : null, selectedOptions.map(function (_ref13) {
276
- var id = _ref13.id,
277
- button = _ref13.button;
293
+ }) : null)))) : null, selectedOptions.map(function (_ref16) {
294
+ var id = _ref16.id,
295
+ button = _ref16.button;
278
296
  return /*#__PURE__*/React__default["default"].createElement("div", {
279
297
  key: id,
280
298
  className: classNames__default["default"]([styles.item, _defineProperty__default["default"]({}, itemClassName, itemClassName !== null)])
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-share-options",
3
- "version": "0.3.181",
3
+ "version": "0.3.186",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@babel/runtime": "^7.13.10",
56
- "@micromag/core": "^0.3.181",
56
+ "@micromag/core": "^0.3.186",
57
57
  "classnames": "^2.2.6",
58
58
  "prop-types": "^15.7.2",
59
59
  "react-intl": "^5.12.1",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "8eadaa7f17c86bf2f8f80cb13bfdd3f6295d29d5"
66
+ "gitHead": "8ea13dcc630676332303b6be0089f21002f19d5d"
67
67
  }