@stokr/components-library 2.3.26 → 2.3.27

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/dist/components/QRCode/QRCode.js +34 -25
  2. package/dist/components/QRCode/QRCode.stories.js +36 -5
  3. package/dist/utils/formatCurrencyValue.js +1 -1
  4. package/package.json +1 -1
package/dist/components/QRCode/QRCode.js CHANGED
@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
8
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _qrcode = require("qrcode.react");
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
- var _excluded = ["value", "size", "bgColor", "fgColor", "level", "padding", "withShadow"];
11
+ var _excluded = ["value", "size", "fgColor", "bgColor", "backgroundColor", "level", "padding", "withShadow"];
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
14
14
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -16,37 +16,44 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
16
16
  var QRCodeWrapper = _styledComponents.default.div.withConfig({
17
17
  displayName: "QRCode__QRCodeWrapper",
18
18
  componentId: "sc-1n3wz5w-0"
19
- })(["display:inline-block;padding:", "px;background-color:white;border-radius:8px;box-shadow:", ";"], function (_ref) {
19
+ })(["display:inline-block;padding:", "px;background-color:", ";border-radius:8px;box-shadow:", ";"], function (_ref) {
20
20
  var padding = _ref.padding;
21
21
  return padding;
22
22
  }, function (_ref2) {
23
- var withShadow = _ref2.withShadow;
24
- return withShadow ? '0 2px 8px rgba(0, 0, 0, 0.1)' : 'none';
23
+ var backgroundColor = _ref2.backgroundColor;
24
+ return backgroundColor;
25
+ }, function (_ref3) {
26
+ var withShadow = _ref3.withShadow;
27
+ return withShadow ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none';
25
28
  });
26
- var QRCode = function QRCode(_ref3) {
27
- var value = _ref3.value,
28
- _ref3$size = _ref3.size,
29
- size = _ref3$size === void 0 ? 128 : _ref3$size,
30
- _ref3$bgColor = _ref3.bgColor,
31
- bgColor = _ref3$bgColor === void 0 ? '#ffffff' : _ref3$bgColor,
32
- _ref3$fgColor = _ref3.fgColor,
33
- fgColor = _ref3$fgColor === void 0 ? '#000000' : _ref3$fgColor,
34
- _ref3$level = _ref3.level,
35
- level = _ref3$level === void 0 ? 'L' : _ref3$level,
36
- _ref3$padding = _ref3.padding,
37
- padding = _ref3$padding === void 0 ? 8 : _ref3$padding,
38
- _ref3$withShadow = _ref3.withShadow,
39
- withShadow = _ref3$withShadow === void 0 ? false : _ref3$withShadow,
40
- props = _objectWithoutProperties(_ref3, _excluded);
29
+ var QRCode = function QRCode(_ref4) {
30
+ var value = _ref4.value,
31
+ _ref4$size = _ref4.size,
32
+ size = _ref4$size === void 0 ? 128 : _ref4$size,
33
+ _ref4$fgColor = _ref4.fgColor,
34
+ fgColor = _ref4$fgColor === void 0 ? '#000000' : _ref4$fgColor,
35
+ _ref4$bgColor = _ref4.bgColor,
36
+ bgColor = _ref4$bgColor === void 0 ? '#ffffff' : _ref4$bgColor,
37
+ _ref4$backgroundColor = _ref4.backgroundColor,
38
+ backgroundColor = _ref4$backgroundColor === void 0 ? '#ffffff' : _ref4$backgroundColor,
39
+ _ref4$level = _ref4.level,
40
+ level = _ref4$level === void 0 ? 'L' : _ref4$level,
41
+ _ref4$padding = _ref4.padding,
42
+ padding = _ref4$padding === void 0 ? 8 : _ref4$padding,
43
+ _ref4$withShadow = _ref4.withShadow,
44
+ withShadow = _ref4$withShadow === void 0 ? false : _ref4$withShadow,
45
+ props = _objectWithoutProperties(_ref4, _excluded);
41
46
  return /*#__PURE__*/_react.default.createElement(QRCodeWrapper, _extends({
42
47
  padding: padding,
43
- withShadow: withShadow
48
+ withShadow: withShadow,
49
+ backgroundColor: backgroundColor
44
50
  }, props), /*#__PURE__*/_react.default.createElement(_qrcode.QRCodeSVG, {
45
51
  value: value,
46
52
  size: size,
47
- bgColor: bgColor,
48
53
  fgColor: fgColor,
49
- level: level
54
+ bgColor: bgColor,
55
+ level: level,
56
+ includeMargin: false
50
57
  }));
51
58
  };
52
59
  QRCode.propTypes = {
@@ -54,10 +61,12 @@ QRCode.propTypes = {
54
61
  value: _propTypes.default.string.isRequired,
55
62
  /** Size of the QR code in pixels */
56
63
  size: _propTypes.default.number,
57
- /** Background color */
58
- bgColor: _propTypes.default.string,
59
- /** Foreground color */
64
+ /** Foreground color (the QR code pattern itself) */
60
65
  fgColor: _propTypes.default.string,
66
+ /** Background color of the QR code itself */
67
+ bgColor: _propTypes.default.string,
68
+ /** Background color of the wrapper */
69
+ backgroundColor: _propTypes.default.string,
61
70
  /** Error correction level: 'L', 'M', 'Q', 'H' */
62
71
  level: _propTypes.default.oneOf(['L', 'M', 'Q', 'H']),
63
72
  /** Padding around the QR code in pixels */
package/dist/components/QRCode/QRCode.stories.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.WithShadow = exports.Large = exports.HighErrorCorrection = exports.Default = exports.CustomColors = void 0;
6
+ exports.default = exports.WithShadow = exports.Large = exports.HighErrorCorrection = exports.Default = exports.CustomColors = exports.CustomBackground = exports.ColorfulQR = exports.BlackBackgroundWhiteQR = void 0;
7
7
  var _react = _interopRequireDefault(require("react"));
8
8
  var _QRCode = _interopRequireDefault(require("./QRCode"));
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,10 +33,13 @@ var _default = {
33
33
  step: 2
34
34
  }
35
35
  },
36
+ fgColor: {
37
+ control: 'color'
38
+ },
36
39
  bgColor: {
37
40
  control: 'color'
38
41
  },
39
- fgColor: {
42
+ backgroundColor: {
40
43
  control: 'color'
41
44
  },
42
45
  level: {
@@ -56,12 +59,25 @@ exports.Default = Default;
56
59
  Default.args = {
57
60
  value: 'https://example.com',
58
61
  size: 128,
59
- bgColor: '#ffffff',
60
62
  fgColor: '#000000',
63
+ bgColor: '#ffffff',
64
+ backgroundColor: '#ffffff',
61
65
  level: 'L',
62
66
  padding: 8,
63
67
  withShadow: false
64
68
  };
69
+ var BlackBackgroundWhiteQR = Template.bind({});
70
+ exports.BlackBackgroundWhiteQR = BlackBackgroundWhiteQR;
71
+ BlackBackgroundWhiteQR.args = {
72
+ value: 'https://example.com',
73
+ size: 128,
74
+ fgColor: '#ffffff',
75
+ bgColor: '#000000',
76
+ backgroundColor: '#000000',
77
+ level: 'H',
78
+ padding: 16,
79
+ withShadow: true
80
+ };
65
81
  var WithShadow = Template.bind({});
66
82
  exports.WithShadow = WithShadow;
67
83
  WithShadow.args = _objectSpread(_objectSpread({}, Default.args), {}, {
@@ -70,8 +86,23 @@ WithShadow.args = _objectSpread(_objectSpread({}, Default.args), {}, {
70
86
  var CustomColors = Template.bind({});
71
87
  exports.CustomColors = CustomColors;
72
88
  CustomColors.args = _objectSpread(_objectSpread({}, Default.args), {}, {
73
- bgColor: '#f0f0f0',
74
- fgColor: '#0066cc'
89
+ fgColor: '#0066cc',
90
+ bgColor: '#f0f0f0'
91
+ });
92
+ var CustomBackground = Template.bind({});
93
+ exports.CustomBackground = CustomBackground;
94
+ CustomBackground.args = _objectSpread(_objectSpread({}, Default.args), {}, {
95
+ backgroundColor: '#f5f5f5',
96
+ padding: 16
97
+ });
98
+ var ColorfulQR = Template.bind({});
99
+ exports.ColorfulQR = ColorfulQR;
100
+ ColorfulQR.args = _objectSpread(_objectSpread({}, Default.args), {}, {
101
+ fgColor: '#ff6600',
102
+ bgColor: '#ffffff',
103
+ backgroundColor: '#e6f7ff',
104
+ padding: 20,
105
+ withShadow: true
75
106
  });
76
107
  var HighErrorCorrection = Template.bind({});
77
108
  exports.HighErrorCorrection = HighErrorCorrection;
package/dist/utils/formatCurrencyValue.js CHANGED
@@ -54,6 +54,6 @@ var getCurrencySymbol = function getCurrencySymbol(currencySelected) {
54
54
  };
55
55
  exports.getCurrencySymbol = getCurrencySymbol;
56
56
  var getProjectCurrencySign = function getProjectCurrencySign(tokenCurrency) {
57
- return tokenCurrency === 'EUR' ? '€' : tokenCurrency === 'USD' ? '$' : '';
57
+ return tokenCurrency === 'EUR' ? '€' : tokenCurrency === 'USD' ? '$' : tokenCurrency === 'BTC' ? '₿' : '';
58
58
  };
59
59
  exports.getProjectCurrencySign = getProjectCurrencySign;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.26",
3
+ "version": "2.3.27",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",