@stokr/components-library 2.3.4 → 2.3.6-beta.1

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 (13) hide show
  1. package/dist/components/ChartLegend/ChartLegend.js +7 -1
  2. package/dist/components/ChartLegend/ChartLegend.stories.js +5 -0
  3. package/dist/components/ChartLegend/ChartLegend.styles.js +3 -1
  4. package/dist/components/Input/Input.js +13 -4
  5. package/dist/components/Input/Input.styles.js +6 -2
  6. package/dist/components/Input/InputPassword.js +1 -1
  7. package/dist/components/Input/Select.js +16 -7
  8. package/dist/components/Input/Select.styles.js +4 -8
  9. package/dist/components/StokrLoader/StokrLoader.js +13 -2
  10. package/dist/components/Text/Text.styles.js +6 -2
  11. package/dist/components/TransactionInfo/TransactionInfo.js +4 -1
  12. package/dist/utils/formatCurrencyValue.js +6 -2
  13. package/package.json +1 -1
package/dist/components/ChartLegend/ChartLegend.js CHANGED
@@ -41,7 +41,12 @@ var ChartLegend = function ChartLegend(props) {
41
41
  }
42
42
  }, /*#__PURE__*/_react.default.createElement(_ChartLegend.ColorLabel, {
43
43
  itemColor: item.color
44
- }), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), /*#__PURE__*/_react.default.createElement(_ChartLegend.MarketDataCol, {
44
+ }), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, {
45
+ onClick: function onClick(e) {
46
+ item.onNameClick && item.onNameClick(e, item);
47
+ },
48
+ isLink: !!item.onNameClick
49
+ }, item.name), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.subname)), /*#__PURE__*/_react.default.createElement(_ChartLegend.NameCol, null, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, null, item.value), /*#__PURE__*/_react.default.createElement(_ChartLegend.SmallText, null, item.info)), /*#__PURE__*/_react.default.createElement(_ChartLegend.MarketDataCol, {
45
50
  isPositive: item.isPositive
46
51
  }, /*#__PURE__*/_react.default.createElement(_ChartLegend.LargeText, {
47
52
  isPositive: item.isPositive
@@ -57,6 +62,7 @@ ChartLegend.propTypes = {
57
62
  data: _propTypes.default.arrayOf(_propTypes.default.shape({
58
63
  value: _propTypes.default.number.isRequired,
59
64
  name: _propTypes.default.string,
65
+ onNameClick: _propTypes.default.func,
60
66
  color: _propTypes.default.string,
61
67
  subname: _propTypes.default.string,
62
68
  info: _propTypes.default.string,
package/dist/components/ChartLegend/ChartLegend.stories.js CHANGED
@@ -82,6 +82,11 @@ ChartLegendFull.args = {
82
82
  color: 'red',
83
83
  subname: 'Sub Name',
84
84
  info: 'information',
85
+ onNameClick: function onNameClick(e, data) {
86
+ e.preventDefault();
87
+ e.stopPropagation();
88
+ alert('name is clicked');
89
+ },
85
90
  price: 10000,
86
91
  isPositive: false,
87
92
  marketValue: '20 %',
package/dist/components/ChartLegend/ChartLegend.styles.js CHANGED
@@ -47,10 +47,12 @@ exports.ValueCol = ValueCol;
47
47
  var LargeText = _styledComponents.default.div.withConfig({
48
48
  displayName: "ChartLegendstyles__LargeText",
49
49
  componentId: "sc-gh1vwu-7"
50
- })(["font-weight:300;font-size:22px;line-height:28px;", " ", ""], function (props) {
50
+ })(["font-weight:300;font-size:22px;line-height:28px;", " ", " ", ""], function (props) {
51
51
  return props.isPositive && "\n color: ".concat(_theme.default.cProgressDone, ";\n ");
52
52
  }, function (props) {
53
53
  return props.isPositive === false && "\n color: ".concat(_theme.default.cWarning, ";\n ");
54
+ }, function (props) {
55
+ return props.isLink && "\n text-decoration:underline;\n text-decoration-thickness: from-font;\n ";
54
56
  });
55
57
  exports.LargeText = LargeText;
56
58
  var SmallText = _styledComponents.default.div.withConfig({
package/dist/components/Input/Input.js CHANGED
@@ -29,7 +29,11 @@ var Input = function Input(props) {
29
29
  touched = props.touched,
30
30
  readOnly = props.readOnly,
31
31
  inverted = props.inverted,
32
- dashboard = props.dashboard;
32
+ dashboard = props.dashboard,
33
+ disabled = props.disabled,
34
+ inputWrapStyle = props.inputWrapStyle,
35
+ wrapperStyle = props.wrapperStyle,
36
+ autoHeightLabel = props.autoHeightLabel;
33
37
  var _useState = (0, _react.useState)(false),
34
38
  _useState2 = _slicedToArray(_useState, 2),
35
39
  labelUp = _useState2[0],
@@ -66,15 +70,20 @@ var Input = function Input(props) {
66
70
  setLabelUp(focus || !!value);
67
71
  };
68
72
  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, {
69
- inverted: inverted
73
+ inverted: inverted,
74
+ style: wrapperStyle
70
75
  }, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
71
76
  isUp: labelUp,
72
77
  active: hasFocus,
73
78
  error: error && touched,
74
- htmlFor: id
79
+ htmlFor: id,
80
+ autoHeightLabel: autoHeightLabel
75
81
  }, label), /*#__PURE__*/_react.default.createElement(_Input.InputWrap, {
76
82
  error: error && touched,
77
- dashboard: dashboard
83
+ dashboard: dashboard,
84
+ disabled: disabled,
85
+ style: inputWrapStyle,
86
+ autoHeightLabel: autoHeightLabel
78
87
  }, /*#__PURE__*/_react.default.createElement("input", _extends({
79
88
  type: type,
80
89
  id: id,
package/dist/components/Input/Input.styles.js CHANGED
@@ -22,8 +22,10 @@ exports.Wrapper = Wrapper;
22
22
  var Label = _styledComponents.default.label.withConfig({
23
23
  displayName: "Inputstyles__Label",
24
24
  componentId: "sc-1osolkh-1"
25
- })(["z-index:11;display:block;position:absolute;left:0;top:-2px;font-weight:500;height:12px;font-size:11px;line-height:20px;letter-spacing:2px;text-transform:uppercase;color:", ";pointer-events:none;transform:translateY(15px);transition:transform 0.2s,font-size 0.2s;", " ", " ", ""], function (props) {
25
+ })(["z-index:11;display:block;position:absolute;left:0;top:-2px;font-weight:500;height:12px;font-size:11px;line-height:20px;letter-spacing:2px;text-transform:uppercase;color:", ";pointer-events:none;transform:translateY(15px);transition:transform 0.2s,font-size 0.2s;", " ", " ", " ", ""], function (props) {
26
26
  return _theme.default.cBlack;
27
+ }, function (props) {
28
+ return props.autoHeightLabel && "\n height:auto;\n position: relative;\n ";
27
29
  }, function (props) {
28
30
  return props.isUp && "\n font-size: 10px;\n transform: translateY(0);\n ";
29
31
  }, function (props) {
@@ -35,10 +37,12 @@ exports.Label = Label;
35
37
  var InputWrap = _styledComponents.default.div.withConfig({
36
38
  displayName: "Inputstyles__InputWrap",
37
39
  componentId: "sc-1osolkh-2"
38
- })(["position:relative;& > input{z-index:0;font-family:'Open sans';display:block;width:100%;height:40px;font-weight:600;font-size:12px;line-height:18px;padding:15px 0;padding-bottom:5px;box-shadow:none;border:0;outline:0;border-top:1px solid transparent;border-bottom:1px solid ", ";color:", ";background-color:transparent;transition:border-color 0.2s;&:focus,&:hover{border-top-color:transparent;border-bottom-color:", ";}&::placeholder{color:transparent;opacity:0;}}", " ", ""], function (props) {
40
+ })(["position:relative;& > input{z-index:0;font-family:'Open sans';display:block;width:100%;height:40px;font-weight:600;font-size:12px;line-height:18px;padding:15px 0;padding-bottom:5px;box-shadow:none;border:0;outline:0;border-top:1px solid transparent;border-bottom:1px solid ", ";color:", ";background-color:transparent;transition:border-color 0.2s;", " &:focus,&:hover{border-top-color:transparent;border-bottom-color:", ";}&::placeholder{color:transparent;opacity:0;}}", " ", ""], function (props) {
39
41
  return _theme.default.cGrey;
40
42
  }, function (props) {
41
43
  return _theme.default.cBlack;
44
+ }, function (props) {
45
+ return props.autoHeightLabel && "\n height:20px;\n padding-top:0;\n ";
42
46
  }, function (props) {
43
47
  return _theme.default.cPrimary;
44
48
  }, function (props) {
package/dist/components/Input/InputPassword.js CHANGED
@@ -126,7 +126,7 @@ var InputPassword = function InputPassword(props) {
126
126
  // <InfoIcon position="bottom" title={info} noMarginLeft />
127
127
  // </InfoIconWrapper>
128
128
  // )
129
- _react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_InputPassword.CapslockIndicator, null, isCapslockOn && 'SHOUT OUT! Caps lock is on')));
129
+ _react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(_InputPassword.CapslockIndicator, null, isCapslockOn && /*#__PURE__*/_react.default.createElement(_SvgIcons.CapsLockSvg, null))));
130
130
  };
131
131
  exports.InputPassword = InputPassword;
132
132
  InputPassword.propTypes = {
package/dist/components/Input/Select.js CHANGED
@@ -37,7 +37,8 @@ var SelectMenuListWithScroll = function SelectMenuListWithScroll(props) {
37
37
  var children = props.children;
38
38
  return /*#__PURE__*/_react.default.createElement(_Select.SelectMenuList, {
39
39
  autoHeight: true,
40
- autoHeightMax: 300
40
+ autoHeightMax: 300,
41
+ fullHeight: true
41
42
  }, children);
42
43
  };
43
44
  SelectMenuListWithScroll.propTypes = {
@@ -113,22 +114,30 @@ var Select = function Select(props) {
113
114
  control: function control() {
114
115
  return _Select.SelectControl;
115
116
  },
116
- menu: function menu() {
117
- return _Select.SelectMenu;
117
+ menu: function menu(baseStyle, state) {
118
+ return _objectSpread(_objectSpread({}, baseStyle), {}, {
119
+ marginTop: 0,
120
+ zIndex: 1000,
121
+ SelectMenu: _Select.SelectMenu
122
+ });
118
123
  },
119
- option: function option() {
120
- return _Select.SelectOption;
124
+ option: function option(baseStyle, state) {
125
+ return _objectSpread({
126
+ fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
127
+ cursor: 'pointer'
128
+ }, _Select.SelectOption);
121
129
  },
122
130
  selectContainer: function selectContainer() {
123
131
  return _Select.SelectContainer;
124
132
  },
125
133
  valueContainer: function valueContainer(baseStyle) {
126
134
  return _objectSpread(_objectSpread({}, baseStyle), {}, {
127
- padding: 0,
128
- marginLeft: '-2px'
135
+ padding: 0
136
+ //marginLeft: '-2px',
129
137
  });
130
138
  }
131
139
  },
140
+
132
141
  components: {
133
142
  DropdownIndicator: DropdownIndicator,
134
143
  IndicatorSeparator: null,
package/dist/components/Input/Select.styles.js CHANGED
@@ -15,24 +15,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
15
15
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
16
16
  var SelectControl = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &&& {\n z-index: 10 !important;\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n height: 40px;\n font-weight: 600;\n font-size: 12px;\n line-height: 18px;\n padding: 15px 0;\n padding-bottom: 5px;\n border-radius: 0;\n box-shadow: none;\n border: 0;\n border-top: 1px solid transparent;\n border-bottom: 1px solid #e1e1e1;\n color: #202020;\n background-color: transparent;\n transition: border-color 0.2s;\n cursor: pointer;\n\n &:hover {\n box-shadow: none;\n border-top-color: transparent;\n border-bottom-color: #0050ca;\n }\n\n &.active {\n z-index: 12 !important;\n }\n }\n"])));
17
17
  exports.SelectControl = SelectControl;
18
- var SelectMenu = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &&& {\n margin-top: -1px;\n border-radius: 0;\n box-shadow: none;\n border: 0;\n border-top: 1px solid #e1e1e1 !important;\n border-bottom: 1px solid #e1e1e1 !important;\n background-color: #ffffff;\n }\n"])));
18
+ var SelectMenu = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-top: -1px;\n border-radius: 0;\n box-shadow: none;\n border: 0;\n border-top: 1px solid #e1e1e1 !important;\n border-bottom: 1px solid #e1e1e1 !important;\n background-color: #ffffff;\n opacity: 999 !important;\n"])));
19
19
  exports.SelectMenu = SelectMenu;
20
20
  var SelectMenuList = (0, _styledComponents.default)(_ComponentScroll2.default).withConfig({
21
21
  displayName: "Selectstyles__SelectMenuList",
22
22
  componentId: "sc-1wc1ybn-0"
23
- })(["", "{right:6px;}"], _ComponentScroll.TrackV);
23
+ })(["&&&{overflow:hidden;", "{right:6px;}}"], _ComponentScroll.TrackV);
24
24
  exports.SelectMenuList = SelectMenuList;
25
- var SelectOption = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n &&& {\n cursor: pointer;\n padding: 8px 0 !important;\n padding-left: 2px !important;\n font-size: 12px;\n line-height: 18px;\n border: 0;\n background-color: transparent;\n color: #202020;\n\n ", "\n\n ", "\n\n &:hover {\n background-color: transparent;\n font-weight: bold;\n }\n }\n"])), function (props) {
26
- return props.isFocused && "\n font-weight: bold;\n ";
27
- }, function (props) {
28
- return props.isSelected && "\n font-weight: bold;\n ";
29
- });
25
+ var SelectOption = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n cursor: pointer;\n padding: 8px 0 !important;\n padding-left: 4px !important;\n font-size: 12px;\n line-height: 18px;\n border: 0;\n background-color: transparent;\n color: #202020;\n\n &:hover {\n background-color: transparent;\n font-weight: bold;\n }\n"])));
30
26
  exports.SelectOption = SelectOption;
31
27
  var SelectContainer = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n z-index: 100;\n ", "\n"])), function (props) {
32
28
  return props.selectProps.menuIsOpen && "\n z-index: 150 !important;\n ";
33
29
  });
34
30
  exports.SelectContainer = SelectContainer;
35
- var SelectValueContainer = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &&& {\n font-family: 'Open sans';\n padding: 0;\n margin-left: -2px;\n top: -4px;\n }\n"])));
31
+ var SelectValueContainer = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n &&& {\n padding-left: 0;\n margin-left: -2px;\n }\n"])));
36
32
  exports.SelectValueContainer = SelectValueContainer;
37
33
  var SelectIcon = _styledComponents.default.i.attrs({
38
34
  className: 'ion ion-ios-arrow-down'
package/dist/components/StokrLoader/StokrLoader.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.StokrLoader = StokrLoader;
8
- exports.loaderGif = exports.default = void 0;
8
+ exports.loaderGif = exports.default = exports.StokrLoaderBox = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
11
  var _media = _interopRequireDefault(require("./media"));
@@ -17,16 +17,27 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
17
17
  // Render a new image everytime, avoiding jump on the spinning
18
18
  var loaderGif = "https://res.cloudinary.com/stokr/image/upload/f_auto,q_auto/v1575035788/Static/stokr_loader_white_400x400_egnhgb.gif?a=".concat(Math.random());
19
19
  exports.loaderGif = loaderGif;
20
+ var CenterFullWidth = _styledComponents.default.div.withConfig({
21
+ displayName: "StokrLoader__CenterFullWidth",
22
+ componentId: "sc-1chowhw-0"
23
+ })(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
20
24
  function StokrLoader() {
21
25
  var fadeIn = (0, _styledComponents.keyframes)(["0%{opacity:0;}60%{opacity:1;}100%{opacity:1;}"]);
22
26
  var StyledStokrLoader = _styledComponents.default.div.withConfig({
23
27
  displayName: "StokrLoader__StyledStokrLoader",
24
- componentId: "sc-1chowhw-0"
28
+ componentId: "sc-1chowhw-1"
25
29
  })(["align-items:center;animation:", " 1.8s ease-in-out forwards;background:rgb(254,254,254);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:1000;", ";", ";", ";"], fadeIn, _media.default.mobileS(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n img {\n height: 15rem;\n width: 15rem;\n }\n "]))), _media.default.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n img {\n height: 18rem;\n width: 18rem;\n }\n "]))), _media.default.tablet(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n img {\n height: 30rem;\n width: 30rem;\n }\n "]))));
26
30
  return /*#__PURE__*/_react.default.createElement(StyledStokrLoader, null, /*#__PURE__*/_react.default.createElement("img", {
27
31
  src: loaderGif,
28
32
  alt: "\xA0"
29
33
  }));
30
34
  }
35
+ var StokrLoaderBox = function StokrLoaderBox() {
36
+ return /*#__PURE__*/_react.default.createElement(CenterFullWidth, null, /*#__PURE__*/_react.default.createElement("img", {
37
+ src: loaderGif,
38
+ alt: "\xA0"
39
+ }));
40
+ };
41
+ exports.StokrLoaderBox = StokrLoaderBox;
31
42
  var _default = StokrLoader;
32
43
  exports.default = _default;
package/dist/components/Text/Text.styles.js CHANGED
@@ -13,11 +13,15 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
13
13
  var Text = _styledComponents.default.div.withConfig({
14
14
  displayName: "Textstyles__Text",
15
15
  componentId: "sc-xkpyal-0"
16
- })(["display:block;", " ", " h1{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.18;letter-spacing:0.8px;text-transform:uppercase;margin-top:1em;margin-bottom:32px;", "}h2{font-family:'Open Sans';font-weight:300;font-size:34px;line-height:1.18em;letter-spacing:1.5px;margin-top:1em;margin-bottom:0.18em;", " ", "}h4{font-family:'Open Sans';font-weight:300;font-size:22px;line-height:1.27em;letter-spacing:0.8px;margin-top:1em;margin-bottom:0.27em;opacity:0.5;", "}h3{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;margin-top:1em;margin-bottom:0.27em;text-transform:uppercase;", "}h5{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;text-transform:uppercase;}p{font-family:'Open Sans';font-weight:300;font-size:16px;line-height:1.5em;letter-spacing:0.6px;margin:1em 0;", " ", " a{text-decoration:underline;transition:color 0.2s;color:", ";&:hover{color:", ";}}", "}ul{margin:16px;li{font-size:14px;font-weight:300;font-style:normal;font-stretch:normal;line-height:2;letter-spacing:0.6px;}@media screen and (max-width:479px){padding-left:15px;}}a{text-decoration:underline;}> *:first-child{margin-top:0;}> *:last-child{margin-bottom:0;}"], function (props) {
16
+ })(["display:block;", " ", " h1{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.18;letter-spacing:0.8px;text-transform:uppercase;margin-top:1em;margin-bottom:32px;", "}h2{font-family:'Open Sans';font-weight:300;font-size:34px;line-height:1.18em;letter-spacing:1.5px;margin-top:1em;margin-bottom:0.18em;", " ", "}h4{font-family:'Open Sans';font-weight:300;font-size:17px;line-height:1.27em;letter-spacing:0.8px;margin-top:1em;margin-bottom:0.27em;opacity:0.5;", " ", "}h3{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;margin-top:1em;margin-bottom:0.27em;text-transform:uppercase;", " @media screen and (max-width:991px) and (min-width:768px){", "}}h5{font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;text-transform:uppercase;}p{font-family:'Open Sans';font-weight:300;font-size:16px;line-height:1.5em;letter-spacing:0.6px;margin:1em 0;", " ", " a{text-decoration:underline;transition:color 0.2s;color:", ";&:hover{color:", ";}}", "}ul{margin:16px;li{font-size:14px;font-weight:300;font-style:normal;font-stretch:normal;line-height:2;letter-spacing:0.6px;}@media screen and (max-width:479px){padding-left:15px;}}> *:first-child{margin-top:0;}> *:last-child{margin-bottom:0;}"], function (props) {
17
17
  return props.fullWidth && 'width: 100%;';
18
18
  }, function (props) {
19
19
  return props.center && "\n text-align: center;\n ";
20
- }, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 34px;\n letter-spacing: 1.5px;\n margin-bottom: 45px;\n "]))), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 42px;\n "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 50px;\n "]))), _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n font-size: 34px;\n "]))), _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 34px;\n "]))), function (props) {
20
+ }, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 34px;\n letter-spacing: 1.5px;\n margin-bottom: 45px;\n "]))), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n font-size: 42px;\n "]))), _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n font-size: 50px;\n "]))), _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n //font-size: 34px;\n "]))), function (props) {
21
+ return props.blockchainLoadingMsg && "\n width: 100% !important;\n ";
22
+ }, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n font-size: 34px;\n "]))), function (props) {
23
+ return props.responsiveFont && "\n font-size: 22px;\n ";
24
+ }, function (props) {
21
25
  return props.small && "\n font-size:12px;\n ";
22
26
  }, _rwd.default.XLarge(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n font-size: 20px;\n\n ", "\n\n "])), function (props) {
23
27
  return props.small && "\n font-size:16px;\n ";
package/dist/components/TransactionInfo/TransactionInfo.js CHANGED
@@ -18,7 +18,10 @@ var TransactionInfo = function TransactionInfo(_ref) {
18
18
  name2 = _ref.name2,
19
19
  owner2 = _ref.owner2,
20
20
  green = _ref.green,
21
- red = _ref.red;
21
+ red = _ref.red,
22
+ sent = _ref.sent,
23
+ received = _ref.received,
24
+ tokenDecimals = _ref.tokenDecimals;
22
25
  return /*#__PURE__*/_react.default.createElement(_TransactionInfo.Container, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Account, null, /*#__PURE__*/_react.default.createElement(_TransactionInfo.Name, {
23
26
  green: green,
24
27
  red: red
package/dist/utils/formatCurrencyValue.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getCurrencySymbol = exports.formatCurrencyValue = void 0;
6
+ exports.getProjectCurrencySign = exports.getCurrencySymbol = exports.formatCurrencyValue = void 0;
7
7
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
8
8
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
9
9
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -48,4 +48,8 @@ var getCurrencySymbol = function getCurrencySymbol(currencySelected) {
48
48
  bmn1: 'BMN1'
49
49
  }[currencySelected] || currencySelected;
50
50
  };
51
- exports.getCurrencySymbol = getCurrencySymbol;
51
+ exports.getCurrencySymbol = getCurrencySymbol;
52
+ var getProjectCurrencySign = function getProjectCurrencySign(tokenCurrency) {
53
+ return tokenCurrency === 'EUR' ? '€' : tokenCurrency === 'USD' ? '$' : '';
54
+ };
55
+ exports.getProjectCurrencySign = getProjectCurrencySign;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stokr/components-library",
3
- "version": "2.3.4",
3
+ "version": "2.3.6-beta.1",
4
4
  "description": "STOKR - Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",