@micromag/element-share-options 0.3.352 → 0.3.354

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 +30 -11
  3. package/lib/index.js +30 -11
  4. package/package.json +3 -3
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-element-share-options-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.25rem}.micromag-element-share-options-button{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:transparent;color:#fff;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-weight:400;justify-content:center;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-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)}@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.05);-ms-transform:scale(1.05);transform:scale(1.05);-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.05);-ms-transform:scale(1.05);transform:scale(1.05);-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{-ms-flex-negative:0;display:block;flex-shrink:0;position:relative}.micromag-element-share-options-icon,.micromag-element-share-options-spacer{height:100%;width:45px}.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{-ms-flex-positive:1;-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;flex-grow:1;font-size:inherit;justify-content:center;line-height:1;margin-left:.25em;margin-right:.25em;padding:.25rem;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.micromag-element-share-options-labelText{-ms-flex-negative:0;flex-shrink:0;margin-left:.25em;margin-right:.25em}
1
+ .micromag-element-share-options-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-element-share-options-item+.micromag-element-share-options-item{margin-top:.5rem}.micromag-element-share-options-button{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:transparent;color:#fff;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;font-weight:400;justify-content:center;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%;-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)}@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.05);-ms-transform:scale(1.05);transform:scale(1.05);-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.05);-ms-transform:scale(1.05);transform:scale(1.05);-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{-ms-flex-negative:0;display:block;flex-shrink:0;position:relative}.micromag-element-share-options-icon,.micromag-element-share-options-spacer{height:100%;width:45px}.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{-ms-flex-positive:1;-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;flex-grow:1;font-size:inherit;justify-content:center;line-height:1;margin-left:.25em;margin-right:.25em;padding:.25rem;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center}.micromag-element-share-options-labelText{-ms-flex-negative:0;flex-shrink:0;margin-left:.25em;margin-right:.25em}
package/es/index.js CHANGED
@@ -58,6 +58,7 @@ var propTypes = {
58
58
  options: PropTypes.arrayOf(PropTypes.string),
59
59
  buttonsStyle: PropTypes$1.boxStyle,
60
60
  buttonsTextStyle: PropTypes$1.textStyle,
61
+ iconSize: PropTypes.number,
61
62
  theme: PropTypes$1.viewerTheme,
62
63
  onShare: PropTypes.func,
63
64
  onClose: PropTypes.func,
@@ -73,6 +74,7 @@ var defaultProps = {
73
74
  options: null,
74
75
  buttonsStyle: null,
75
76
  buttonsTextStyle: null,
77
+ iconSize: 45,
76
78
  theme: null,
77
79
  onShare: null,
78
80
  onClose: null,
@@ -89,6 +91,7 @@ var ShareOptions = function ShareOptions(_ref) {
89
91
  options = _ref.options,
90
92
  buttonsStyle = _ref.buttonsStyle,
91
93
  buttonsTextStyle = _ref.buttonsTextStyle,
94
+ iconSize = _ref.iconSize,
92
95
  theme = _ref.theme,
93
96
  onShare = _ref.onShare,
94
97
  onClose = _ref.onClose,
@@ -141,13 +144,13 @@ var ShareOptions = function ShareOptions(_ref) {
141
144
  var shareIconProps = useMemo(function () {
142
145
  return {
143
146
  className: styles.icon,
144
- size: 50,
147
+ size: iconSize,
145
148
  bgStyle: {
146
149
  fill: 'none'
147
150
  },
148
151
  iconFillColor: 'currentColor'
149
152
  };
150
- }, []);
153
+ }, [iconSize]);
151
154
  var shareOptions = [{
152
155
  id: 'facebook',
153
156
  button: /*#__PURE__*/React.createElement(FacebookShareButton, Object.assign({}, shareButtonProps, {
@@ -161,7 +164,10 @@ var ShareOptions = function ShareOptions(_ref) {
161
164
  }), /*#__PURE__*/React.createElement(FacebookIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
162
165
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
163
166
  }, "Facebook"), /*#__PURE__*/React.createElement("div", {
164
- className: styles.spacer
167
+ className: styles.spacer,
168
+ style: {
169
+ width: "".concat(iconSize, "px")
170
+ }
165
171
  }))
166
172
  }, {
167
173
  id: 'twitter',
@@ -176,7 +182,10 @@ var ShareOptions = function ShareOptions(_ref) {
176
182
  }), /*#__PURE__*/React.createElement(TwitterIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
177
183
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
178
184
  }, "Twitter"), /*#__PURE__*/React.createElement("div", {
179
- className: styles.spacer
185
+ className: styles.spacer,
186
+ style: {
187
+ width: "".concat(iconSize, "px")
188
+ }
180
189
  }))
181
190
  }, {
182
191
  id: 'linkedin',
@@ -191,7 +200,10 @@ var ShareOptions = function ShareOptions(_ref) {
191
200
  }), /*#__PURE__*/React.createElement(LinkedinIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
192
201
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
193
202
  }, "LinkedIn"), /*#__PURE__*/React.createElement("div", {
194
- className: styles.spacer
203
+ className: styles.spacer,
204
+ style: {
205
+ width: "".concat(iconSize, "px")
206
+ }
195
207
  }))
196
208
  }, {
197
209
  id: 'whatsapp',
@@ -206,7 +218,10 @@ var ShareOptions = function ShareOptions(_ref) {
206
218
  }), /*#__PURE__*/React.createElement(WhatsappIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
207
219
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
208
220
  }, "Whatsapp"), /*#__PURE__*/React.createElement("div", {
209
- className: styles.spacer
221
+ className: styles.spacer,
222
+ style: {
223
+ width: "".concat(iconSize, "px")
224
+ }
210
225
  }))
211
226
  },
212
227
  // {
@@ -254,7 +269,10 @@ var ShareOptions = function ShareOptions(_ref) {
254
269
  "value": "Email"
255
270
  }]
256
271
  })), /*#__PURE__*/React.createElement("div", {
257
- className: styles.spacer
272
+ className: styles.spacer,
273
+ style: {
274
+ width: "".concat(iconSize, "px")
275
+ }
258
276
  }))
259
277
  }];
260
278
  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
@@ -273,9 +291,7 @@ var ShareOptions = function ShareOptions(_ref) {
273
291
  focusable: focusable,
274
292
  style: finalStyles,
275
293
  withoutBootstrapStyles: true
276
- }, /*#__PURE__*/React.createElement(ShareLinkIcon, Object.assign({
277
- size: 45
278
- }, shareIconProps)), /*#__PURE__*/React.createElement("div", {
294
+ }, /*#__PURE__*/React.createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React.createElement("div", {
279
295
  className: classNames([styles.label, _defineProperty({}, labelClassName, labelClassName !== null)])
280
296
  }, /*#__PURE__*/React.createElement("span", {
281
297
  className: styles.labelText
@@ -292,7 +308,10 @@ var ShareOptions = function ShareOptions(_ref) {
292
308
  "value": "Link copied!"
293
309
  }]
294
310
  }) : null)), /*#__PURE__*/React.createElement("div", {
295
- className: styles.spacer
311
+ className: styles.spacer,
312
+ style: {
313
+ width: "".concat(iconSize, "px")
314
+ }
296
315
  }))) : null, selectedOptions.map(function (_ref15) {
297
316
  var id = _ref15.id,
298
317
  button = _ref15.button;
package/lib/index.js CHANGED
@@ -69,6 +69,7 @@ var propTypes = {
69
69
  options: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
70
70
  buttonsStyle: core.PropTypes.boxStyle,
71
71
  buttonsTextStyle: core.PropTypes.textStyle,
72
+ iconSize: PropTypes__default["default"].number,
72
73
  theme: core.PropTypes.viewerTheme,
73
74
  onShare: PropTypes__default["default"].func,
74
75
  onClose: PropTypes__default["default"].func,
@@ -84,6 +85,7 @@ var defaultProps = {
84
85
  options: null,
85
86
  buttonsStyle: null,
86
87
  buttonsTextStyle: null,
88
+ iconSize: 45,
87
89
  theme: null,
88
90
  onShare: null,
89
91
  onClose: null,
@@ -100,6 +102,7 @@ var ShareOptions = function ShareOptions(_ref) {
100
102
  options = _ref.options,
101
103
  buttonsStyle = _ref.buttonsStyle,
102
104
  buttonsTextStyle = _ref.buttonsTextStyle,
105
+ iconSize = _ref.iconSize,
103
106
  theme = _ref.theme,
104
107
  onShare = _ref.onShare,
105
108
  onClose = _ref.onClose,
@@ -152,13 +155,13 @@ var ShareOptions = function ShareOptions(_ref) {
152
155
  var shareIconProps = React.useMemo(function () {
153
156
  return {
154
157
  className: styles.icon,
155
- size: 50,
158
+ size: iconSize,
156
159
  bgStyle: {
157
160
  fill: 'none'
158
161
  },
159
162
  iconFillColor: 'currentColor'
160
163
  };
161
- }, []);
164
+ }, [iconSize]);
162
165
  var shareOptions = [{
163
166
  id: 'facebook',
164
167
  button: /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookShareButton, Object.assign({}, shareButtonProps, {
@@ -172,7 +175,10 @@ var ShareOptions = function ShareOptions(_ref) {
172
175
  }), /*#__PURE__*/React__default["default"].createElement(reactShare.FacebookIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
173
176
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
174
177
  }, "Facebook"), /*#__PURE__*/React__default["default"].createElement("div", {
175
- className: styles.spacer
178
+ className: styles.spacer,
179
+ style: {
180
+ width: "".concat(iconSize, "px")
181
+ }
176
182
  }))
177
183
  }, {
178
184
  id: 'twitter',
@@ -187,7 +193,10 @@ var ShareOptions = function ShareOptions(_ref) {
187
193
  }), /*#__PURE__*/React__default["default"].createElement(reactShare.TwitterIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
188
194
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
189
195
  }, "Twitter"), /*#__PURE__*/React__default["default"].createElement("div", {
190
- className: styles.spacer
196
+ className: styles.spacer,
197
+ style: {
198
+ width: "".concat(iconSize, "px")
199
+ }
191
200
  }))
192
201
  }, {
193
202
  id: 'linkedin',
@@ -202,7 +211,10 @@ var ShareOptions = function ShareOptions(_ref) {
202
211
  }), /*#__PURE__*/React__default["default"].createElement(reactShare.LinkedinIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
203
212
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
204
213
  }, "LinkedIn"), /*#__PURE__*/React__default["default"].createElement("div", {
205
- className: styles.spacer
214
+ className: styles.spacer,
215
+ style: {
216
+ width: "".concat(iconSize, "px")
217
+ }
206
218
  }))
207
219
  }, {
208
220
  id: 'whatsapp',
@@ -217,7 +229,10 @@ var ShareOptions = function ShareOptions(_ref) {
217
229
  }), /*#__PURE__*/React__default["default"].createElement(reactShare.WhatsappIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
218
230
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
219
231
  }, "Whatsapp"), /*#__PURE__*/React__default["default"].createElement("div", {
220
- className: styles.spacer
232
+ className: styles.spacer,
233
+ style: {
234
+ width: "".concat(iconSize, "px")
235
+ }
221
236
  }))
222
237
  },
223
238
  // {
@@ -265,7 +280,10 @@ var ShareOptions = function ShareOptions(_ref) {
265
280
  "value": "Email"
266
281
  }]
267
282
  })), /*#__PURE__*/React__default["default"].createElement("div", {
268
- className: styles.spacer
283
+ className: styles.spacer,
284
+ style: {
285
+ width: "".concat(iconSize, "px")
286
+ }
269
287
  }))
270
288
  }];
271
289
  var hasShareLink = options !== null ? options.includes('copylink') : true; // default is true
@@ -284,9 +302,7 @@ var ShareOptions = function ShareOptions(_ref) {
284
302
  focusable: focusable,
285
303
  style: finalStyles,
286
304
  withoutBootstrapStyles: true
287
- }, /*#__PURE__*/React__default["default"].createElement(ShareLinkIcon, Object.assign({
288
- size: 45
289
- }, shareIconProps)), /*#__PURE__*/React__default["default"].createElement("div", {
305
+ }, /*#__PURE__*/React__default["default"].createElement(ShareLinkIcon, shareIconProps), /*#__PURE__*/React__default["default"].createElement("div", {
290
306
  className: classNames__default["default"]([styles.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
291
307
  }, /*#__PURE__*/React__default["default"].createElement("span", {
292
308
  className: styles.labelText
@@ -303,7 +319,10 @@ var ShareOptions = function ShareOptions(_ref) {
303
319
  "value": "Link copied!"
304
320
  }]
305
321
  }) : null)), /*#__PURE__*/React__default["default"].createElement("div", {
306
- className: styles.spacer
322
+ className: styles.spacer,
323
+ style: {
324
+ width: "".concat(iconSize, "px")
325
+ }
307
326
  }))) : null, selectedOptions.map(function (_ref15) {
308
327
  var id = _ref15.id,
309
328
  button = _ref15.button;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/element-share-options",
3
- "version": "0.3.352",
3
+ "version": "0.3.354",
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.348",
56
+ "@micromag/core": "^0.3.354",
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": "3099c64dac06de1d4c647ac1d6c70b229268968e"
66
+ "gitHead": "ccf852d0a7df8f222365088e7de3843492e720e7"
67
67
  }