@semcore/progress-bar 3.0.2 → 3.0.5
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.
- package/CHANGELOG.md +18 -0
- package/README.md +67 -0
- package/lib/cjs/ProgressBar.js +18 -18
- package/lib/cjs/ProgressBar.js.map +1 -1
- package/lib/cjs/style/progress-bar.shadow.css +4 -4
- package/lib/es6/ProgressBar.js +18 -18
- package/lib/es6/ProgressBar.js.map +1 -1
- package/lib/es6/style/progress-bar.shadow.css +4 -4
- package/package.json +2 -2
- package/src/ProgressBar.jsx +2 -2
- package/src/style/progress-bar.shadow.css +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,24 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.5] - 2022-07-07
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.33.0 ~> 3.34.0], `@semcore/flex-box` [4.5.5 ~> 4.5.6]).
|
|
10
|
+
|
|
11
|
+
## [3.0.4] - 2022-06-09
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- Theme prop doesn't work when styles has been post-processed
|
|
16
|
+
|
|
17
|
+
## [3.0.3] - 2022-06-02
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.32.2 ~> 3.33.0], `@semcore/flex-box` [4.5.4 ~> 4.5.5]).
|
|
22
|
+
|
|
5
23
|
## [3.0.2] - 2022-05-31
|
|
6
24
|
|
|
7
25
|
### Changed
|
package/README.md
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @semcore/progress-bar
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/@semcore/progress-bar)
|
|
4
|
+
[](https://www.npmjs.com/package/@semcore/progress-bar)
|
|
5
|
+
[](https://github.com/semrush/intergalactic/blob/master/LICENSE)
|
|
6
|
+
|
|
7
|
+
> This component is part of the Intergalactic design system
|
|
8
|
+
|
|
9
|
+
### 📖 [Component documentation](https://developer.semrush.com/intergalactic/components/progress-bar/)
|
|
10
|
+
|
|
11
|
+
### 🏠 [Design system](https://developer.semrush.com/intergalactic/)
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @semcore/ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```jsx
|
|
22
|
+
import ProgressBar from '@semcore/ui/progress-bar';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<details>
|
|
26
|
+
<summary>Alternative installation and use</summary>
|
|
27
|
+
|
|
28
|
+
**We do not recommend this usage path due to possible dependency and update issues.**
|
|
29
|
+
|
|
30
|
+
### Install
|
|
31
|
+
|
|
32
|
+
You can only install one package from the design system
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm install @semcore/progress-bar @semcore/core
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
`@semcore/core` - _is the basic package by which we create our components, and it contains all of the common logic
|
|
39
|
+
of the components that is discussed below. There should only be one version of the package in the project._
|
|
40
|
+
|
|
41
|
+
### Usage
|
|
42
|
+
|
|
43
|
+
You can use the package the same way but without `/ui/` in the import path.
|
|
44
|
+
|
|
45
|
+
</details>
|
|
46
|
+
|
|
47
|
+
```jsx
|
|
48
|
+
import ProgressBar from '@semcore/progress-bar';
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## 👤 Author
|
|
52
|
+
|
|
53
|
+
[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
|
|
54
|
+
|
|
55
|
+
## 🤝 Contributing
|
|
56
|
+
|
|
57
|
+
Contributions, issues and feature requests are welcome!
|
|
58
|
+
|
|
59
|
+
Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
|
|
60
|
+
|
|
61
|
+
## Show your support
|
|
62
|
+
|
|
63
|
+
Give a ⭐️ if this project helped you!
|
|
64
|
+
|
|
65
|
+
## 📝 License
|
|
66
|
+
|
|
67
|
+
This project is [MIT](https://github.com/semrush/intergalactic/blob/master/LICENSE) licensed.
|
package/lib/cjs/ProgressBar.js
CHANGED
|
@@ -46,25 +46,25 @@ var style = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SProgressBar_17u6v_gg_{position:relative;width:100%;overflow:hidden}.___SValue_17u6v_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;-webkit-animation-name:loading_1in57e1;animation-name:loading_1in57e1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_17u6v_gg_._size_s_17u6v_gg_,.___SValue_17u6v_gg_._size_s_17u6v_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_17u6v_gg_._size_m_17u6v_gg_,.___SValue_17u6v_gg_._size_m_17u6v_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_17u6v_gg_._size_l_17u6v_gg_,.___SValue_17u6v_gg_._size_l_17u6v_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_17u6v_gg_._theme_dark_17u6v_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_17u6v_gg_._theme_invert_17u6v_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1in57e1;animation-name:loading_1in57e1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_17u6v_gg_._theme_custom_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_{width:var(--width_1in57e1);-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_.__theme_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}@media (prefers-reduced-motion){.___SValue_17u6v_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1in57e1_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SProgressBar": "
|
|
55
|
-
"__SValue": "
|
|
56
|
-
"_size_s": "
|
|
57
|
-
"_size_m": "
|
|
58
|
-
"_size_l": "
|
|
59
|
-
"_theme_dark": "
|
|
60
|
-
"_theme_invert": "
|
|
61
|
-
"@loading": "
|
|
62
|
-
"_animation": "
|
|
63
|
-
"_theme_custom": "
|
|
64
|
-
"
|
|
65
|
-
"--duration": "--
|
|
66
|
-
"--width": "--
|
|
67
|
-
"_theme": "
|
|
54
|
+
"__SProgressBar": "___SProgressBar_17u6v_gg_",
|
|
55
|
+
"__SValue": "___SValue_17u6v_gg_",
|
|
56
|
+
"_size_s": "_size_s_17u6v_gg_",
|
|
57
|
+
"_size_m": "_size_m_17u6v_gg_",
|
|
58
|
+
"_size_l": "_size_l_17u6v_gg_",
|
|
59
|
+
"_theme_dark": "_theme_dark_17u6v_gg_",
|
|
60
|
+
"_theme_invert": "_theme_invert_17u6v_gg_",
|
|
61
|
+
"@loading": "loading_1in57e1",
|
|
62
|
+
"_animation": "__animation_17u6v_gg_",
|
|
63
|
+
"_theme_custom": "_theme_custom_17u6v_gg_",
|
|
64
|
+
"--colorBg": "--colorBg_1in57e1",
|
|
65
|
+
"--duration": "--duration_1in57e1",
|
|
66
|
+
"--width": "--width_1in57e1",
|
|
67
|
+
"_theme": "__theme_17u6v_gg_"
|
|
68
68
|
});
|
|
69
69
|
|
|
70
70
|
function isCustomTheme(theme) {
|
|
@@ -112,7 +112,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
112
112
|
"use:theme": useTheme,
|
|
113
113
|
"use:animation": !value,
|
|
114
114
|
"use:duration": "".concat(duration, "ms"),
|
|
115
|
-
"
|
|
115
|
+
"colorBg": (0, _color["default"])(theme)
|
|
116
116
|
}, _ref))), /*#__PURE__*/_react["default"].createElement(Children, _ref3.cn("Children", {})));
|
|
117
117
|
}
|
|
118
118
|
}]);
|
|
@@ -143,7 +143,7 @@ function Value(props) {
|
|
|
143
143
|
return _ref4 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SValue, _ref4.cn("SValue", _objectSpread({}, (0, _core.assignProps)({
|
|
144
144
|
"use:width": width,
|
|
145
145
|
"use:duration": "".concat(duration, "ms"),
|
|
146
|
-
"
|
|
146
|
+
"colorBg": (0, _color["default"])(theme)
|
|
147
147
|
}, _ref2))));
|
|
148
148
|
}
|
|
149
149
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","useTheme","Component","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNC,YANZ;AACA,2BAAqD,KAAKL,OAA1D;AAAA,UAAQM,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BL,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMO,QAAQ,GAAGZ,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAO,mBAAQU,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACP,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Box","Children","styles","useTheme","Component","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASA,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNC,YANZ;AACA,2BAAqD,KAAKL,OAA1D;AAAA,UAAQM,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BL,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMO,QAAQ,GAAGZ,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAO,mBAAQU,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACP,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,mBAKW,uBAAaL,KAAb;AALX,+BAOE,gCAAC,QAAD,2BAPF,CADF;AAWD;;;EAnC2BY,e;;iCAAxBV,e,iBACiB,a;iCADjBA,e,WAEWW,K;iCAFXX,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3Bc,IAAAA,QAAQ,eAAE,gCAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GAMAT,YANZ;AACA,MAAQE,MAAR,GAA2CM,KAA3C,CAAQN,MAAR;AAAA,MAAgBN,KAAhB,GAA2CY,KAA3C,CAAgBZ,KAAhB;AAAA,MAAuBJ,KAAvB,GAA2CgB,KAA3C,CAAuBhB,KAAvB;AAAA,MAA8BK,QAA9B,GAA2CW,KAA3C,CAA8BX,QAA9B;AACA,MAAMa,KAAK,aAAMd,KAAN,MAAX;AAEA,iBAAO,mBAAQM,MAAR,CAAP,eACE,gCAAC,MAAD;AAAA,iBAEaQ,KAFb;AAAA,8BAGmBb,QAHnB;AAAA,eAIW,uBAAaL,KAAb;AAJX,cADF;AAQD;;AAED,IAAMmB,WAAW,GAAG,sBAAgBjB,eAAhB,EAAiC;AACnDa,EAAAA,KAAK,EAALA;AADmD,CAAjC,CAApB;eAIeI,W","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n static displayName = 'ProgressBar';\n static style = style;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size } = this.asProps;\n return {\n value,\n duration,\n size,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -83,8 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
background-image: var(
|
|
86
|
+
background-color: var(--colorBg);
|
|
87
|
+
background-image: var(--colorBg);
|
|
88
88
|
}
|
|
89
89
|
SProgressBar[animation] {
|
|
90
90
|
animation-duration: var(--duration);
|
|
@@ -95,8 +95,8 @@ SValue {
|
|
|
95
95
|
animation-duration: var(--duration);
|
|
96
96
|
}
|
|
97
97
|
SValue[theme] {
|
|
98
|
-
background-color: var(
|
|
99
|
-
background-image: var(
|
|
98
|
+
background-color: var(--colorBg);
|
|
99
|
+
background-image: var(--colorBg);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@media (prefers-reduced-motion) {
|
package/lib/es6/ProgressBar.js
CHANGED
|
@@ -26,25 +26,25 @@ var style = (
|
|
|
26
26
|
/*__reshadow_css_start__*/
|
|
27
27
|
_sstyled.insert(
|
|
28
28
|
/*__inner_css_start__*/
|
|
29
|
-
".
|
|
29
|
+
".___SProgressBar_17u6v_gg_{position:relative;width:100%;overflow:hidden}.___SValue_17u6v_gg_{position:absolute;top:0;left:0;background-image:linear-gradient(-45deg,#008f74 25%,#009f81 0,#009f81 50%,#008f74 0,#008f74 76%,#009f81 0);overflow:hidden;-webkit-animation-name:loading_1in57e1;animation-name:loading_1in57e1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;transition-property:width;transition-timing-function:linear;transition-duration:1s}.___SProgressBar_17u6v_gg_._size_s_17u6v_gg_,.___SValue_17u6v_gg_._size_s_17u6v_gg_{height:4px;border-radius:6px;background-size:8px 8px}.___SProgressBar_17u6v_gg_._size_m_17u6v_gg_,.___SValue_17u6v_gg_._size_m_17u6v_gg_{height:8px;border-radius:6px;background-size:12px 12px}.___SProgressBar_17u6v_gg_._size_l_17u6v_gg_,.___SValue_17u6v_gg_._size_l_17u6v_gg_{height:12px;border-radius:6px;background-size:16px 16px}.___SProgressBar_17u6v_gg_._theme_dark_17u6v_gg_{background-color:hsla(0,0%,100%,.2)}.___SProgressBar_17u6v_gg_._theme_invert_17u6v_gg_{background-color:#e0e1e9}@-webkit-keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}@keyframes loading_1in57e1{0%{background-position:0 0}to{background-position:60px 0}}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{background-image:linear-gradient(-45deg,#cacbd2 25%,#e0e1e9 0,#e0e1e9 50%,#cacbd2 0,#cacbd2 76%,#e0e1e9 0);-webkit-animation-name:loading_1in57e1;animation-name:loading_1in57e1;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.___SProgressBar_17u6v_gg_._theme_custom_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_{width:var(--width_1in57e1);-webkit-animation-duration:var(--duration_1in57e1);animation-duration:var(--duration_1in57e1)}.___SValue_17u6v_gg_.__theme_17u6v_gg_{background-color:var(--colorBg_1in57e1);background-image:var(--colorBg_1in57e1)}@media (prefers-reduced-motion){.___SValue_17u6v_gg_{-webkit-animation-name:none;animation-name:none}.___SProgressBar_17u6v_gg_.__animation_17u6v_gg_{-webkit-animation-name:none;animation-name:none}}"
|
|
30
30
|
/*__inner_css_end__*/
|
|
31
|
-
, "
|
|
31
|
+
, "1in57e1_gg_")
|
|
32
32
|
/*__reshadow_css_end__*/
|
|
33
33
|
, {
|
|
34
|
-
"__SProgressBar": "
|
|
35
|
-
"__SValue": "
|
|
36
|
-
"_size_s": "
|
|
37
|
-
"_size_m": "
|
|
38
|
-
"_size_l": "
|
|
39
|
-
"_theme_dark": "
|
|
40
|
-
"_theme_invert": "
|
|
41
|
-
"@loading": "
|
|
42
|
-
"_animation": "
|
|
43
|
-
"_theme_custom": "
|
|
44
|
-
"
|
|
45
|
-
"--duration": "--
|
|
46
|
-
"--width": "--
|
|
47
|
-
"_theme": "
|
|
34
|
+
"__SProgressBar": "___SProgressBar_17u6v_gg_",
|
|
35
|
+
"__SValue": "___SValue_17u6v_gg_",
|
|
36
|
+
"_size_s": "_size_s_17u6v_gg_",
|
|
37
|
+
"_size_m": "_size_m_17u6v_gg_",
|
|
38
|
+
"_size_l": "_size_l_17u6v_gg_",
|
|
39
|
+
"_theme_dark": "_theme_dark_17u6v_gg_",
|
|
40
|
+
"_theme_invert": "_theme_invert_17u6v_gg_",
|
|
41
|
+
"@loading": "loading_1in57e1",
|
|
42
|
+
"_animation": "__animation_17u6v_gg_",
|
|
43
|
+
"_theme_custom": "_theme_custom_17u6v_gg_",
|
|
44
|
+
"--colorBg": "--colorBg_1in57e1",
|
|
45
|
+
"--duration": "--duration_1in57e1",
|
|
46
|
+
"--width": "--width_1in57e1",
|
|
47
|
+
"_theme": "__theme_17u6v_gg_"
|
|
48
48
|
});
|
|
49
49
|
|
|
50
50
|
function isCustomTheme(theme) {
|
|
@@ -93,7 +93,7 @@ var ProgressBarRoot = /*#__PURE__*/function (_Component) {
|
|
|
93
93
|
"use:theme": useTheme,
|
|
94
94
|
"use:animation": !value,
|
|
95
95
|
"use:duration": "".concat(duration, "ms"),
|
|
96
|
-
"
|
|
96
|
+
"colorBg": resolveColor(theme)
|
|
97
97
|
}, _ref))), /*#__PURE__*/React.createElement(Children, _ref3.cn("Children", {})));
|
|
98
98
|
}
|
|
99
99
|
}]);
|
|
@@ -127,7 +127,7 @@ function Value(props) {
|
|
|
127
127
|
return _ref4 = sstyled(styles), /*#__PURE__*/React.createElement(SValue, _ref4.cn("SValue", _objectSpread({}, _assignProps2({
|
|
128
128
|
"use:width": width,
|
|
129
129
|
"use:duration": "".concat(duration, "ms"),
|
|
130
|
-
"
|
|
130
|
+
"colorBg": resolveColor(theme)
|
|
131
131
|
}, _ref2))));
|
|
132
132
|
}
|
|
133
133
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","useTheme","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,0BAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNV,GANZ;AACA,2BAAqD,KAAKM,OAA1D;AAAA,UAAQK,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BJ,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMM,QAAQ,GAAGX,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAOL,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACN,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../src/ProgressBar.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","isCustomTheme","theme","includes","ProgressBarRoot","asProps","value","duration","size","SProgressBar","Children","styles","useTheme","style","children","Value","props","SValue","width","ProgressBar"],"mappings":";;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,MAAyB,0BAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAASC,aAAT,CAAuBC,KAAvB,EAA8B;AAC5B,SAAO,CAAC,CAAC,MAAD,EAAS,QAAT,EAAmBC,QAAnB,CAA4BD,KAA5B,CAAR;AACD;;IAEKE,e;;;;;;;;;;;;;WAUJ,yBAAgB;AACd,0BAAkC,KAAKC,OAAvC;AAAA,UAAQC,KAAR,iBAAQA,KAAR;AAAA,UAAeC,QAAf,iBAAeA,QAAf;AAAA,UAAyBC,IAAzB,iBAAyBA,IAAzB;AACA,aAAO;AACLF,QAAAA,KAAK,EAALA,KADK;AAELC,QAAAA,QAAQ,EAARA,QAFK;AAGLC,QAAAA,IAAI,EAAJA;AAHK,OAAP;AAKD;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAMNV,GANZ;AACA,2BAAqD,KAAKM,OAA1D;AAAA,UAAQK,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BJ,QAA1B,kBAA0BA,QAA1B;AAAA,UAAoCL,KAApC,kBAAoCA,KAApC;AAAA,UAA2CI,KAA3C,kBAA2CA,KAA3C;AACA,UAAMM,QAAQ,GAAGX,aAAa,CAACC,KAAD,CAAb,GAAuB,QAAvB,GAAkCA,KAAnD;AAEA,qBAAOL,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,YAAD;AAAA,qBAEaC,QAFb;AAAA,yBAGiB,CAACN,KAHlB;AAAA,kCAImBC,QAJnB;AAAA,mBAKWP,YAAY,CAACE,KAAD;AALvB,+BAOE,oBAAC,QAAD,2BAPF,CADF;AAWD;;;;EAnC2BN,S;;gBAAxBQ,e,iBACiB,a;;gBADjBA,e,WAEWS,K;;gBAFXT,e,kBAGkB;AAAA,SAAO;AAC3BG,IAAAA,QAAQ,EAAE,IADiB;AAE3BC,IAAAA,IAAI,EAAE,GAFqB;AAG3BN,IAAAA,KAAK,EAAE,QAHoB;AAI3BY,IAAAA,QAAQ,eAAE,oBAAC,WAAD,CAAa,KAAb;AAJiB,GAAP;AAAA,C;;AAmCxB,SAASC,KAAT,CAAeC,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMC,MAAM,GAMAlB,GANZ;AACA,MAAQY,MAAR,GAA2CK,KAA3C,CAAQL,MAAR;AAAA,MAAgBL,KAAhB,GAA2CU,KAA3C,CAAgBV,KAAhB;AAAA,MAAuBJ,KAAvB,GAA2Cc,KAA3C,CAAuBd,KAAvB;AAAA,MAA8BK,QAA9B,GAA2CS,KAA3C,CAA8BT,QAA9B;AACA,MAAMW,KAAK,aAAMZ,KAAN,MAAX;AAEA,iBAAOT,OAAO,CAACc,MAAD,CAAd,eACE,oBAAC,MAAD;AAAA,iBAEaO,KAFb;AAAA,8BAGmBX,QAHnB;AAAA,eAIWP,YAAY,CAACE,KAAD;AAJvB,cADF;AAQD;;AAED,IAAMiB,WAAW,GAAGxB,eAAe,CAACS,eAAD,EAAkB;AACnDW,EAAAA,KAAK,EAALA;AADmD,CAAlB,CAAnC;AAIA,eAAeI,WAAf","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor from '@semcore/utils/lib/color';\n\nimport style from './style/progress-bar.shadow.css';\n\nfunction isCustomTheme(theme) {\n return !['dark', 'invert'].includes(theme);\n}\n\nclass ProgressBarRoot extends Component {\n static displayName = 'ProgressBar';\n static style = style;\n static defaultProps = () => ({\n duration: 1000,\n size: 'm',\n theme: 'invert',\n children: <ProgressBar.Value />,\n });\n\n getValueProps() {\n const { value, duration, size } = this.asProps;\n return {\n value,\n duration,\n size,\n };\n }\n\n render() {\n const SProgressBar = Root;\n const { Children, styles, duration, theme, value } = this.asProps;\n const useTheme = isCustomTheme(theme) ? 'custom' : theme;\n\n return sstyled(styles)(\n <SProgressBar\n render={Box}\n use:theme={useTheme}\n use:animation={!value}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n >\n <Children />\n </SProgressBar>,\n );\n }\n}\n\nfunction Value(props) {\n const SValue = Root;\n const { styles, value, theme, duration } = props;\n const width = `${value}%`;\n\n return sstyled(styles)(\n <SValue\n render={Box}\n use:width={width}\n use:duration={`${duration}ms`}\n colorBg={resolveColor(theme)}\n />,\n );\n}\n\nconst ProgressBar = createComponent(ProgressBarRoot, {\n Value,\n});\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
|
|
@@ -83,8 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
background-image: var(
|
|
86
|
+
background-color: var(--colorBg);
|
|
87
|
+
background-image: var(--colorBg);
|
|
88
88
|
}
|
|
89
89
|
SProgressBar[animation] {
|
|
90
90
|
animation-duration: var(--duration);
|
|
@@ -95,8 +95,8 @@ SValue {
|
|
|
95
95
|
animation-duration: var(--duration);
|
|
96
96
|
}
|
|
97
97
|
SValue[theme] {
|
|
98
|
-
background-color: var(
|
|
99
|
-
background-image: var(
|
|
98
|
+
background-color: var(--colorBg);
|
|
99
|
+
background-image: var(--colorBg);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@media (prefers-reduced-motion) {
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/progress-bar",
|
|
3
3
|
"description": "SEMRush ProgressBar Component",
|
|
4
|
-
"version": "3.0.
|
|
4
|
+
"version": "3.0.5",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
9
|
-
"author": "
|
|
9
|
+
"author": "UI-kit team <ui-kit-team@semrush.com>",
|
|
10
10
|
"license": "MIT",
|
|
11
11
|
"scripts": {
|
|
12
12
|
"build": "build --source=js",
|
package/src/ProgressBar.jsx
CHANGED
|
@@ -39,7 +39,7 @@ class ProgressBarRoot extends Component {
|
|
|
39
39
|
use:theme={useTheme}
|
|
40
40
|
use:animation={!value}
|
|
41
41
|
use:duration={`${duration}ms`}
|
|
42
|
-
|
|
42
|
+
colorBg={resolveColor(theme)}
|
|
43
43
|
>
|
|
44
44
|
<Children />
|
|
45
45
|
</SProgressBar>,
|
|
@@ -57,7 +57,7 @@ function Value(props) {
|
|
|
57
57
|
render={Box}
|
|
58
58
|
use:width={width}
|
|
59
59
|
use:duration={`${duration}ms`}
|
|
60
|
-
|
|
60
|
+
colorBg={resolveColor(theme)}
|
|
61
61
|
/>,
|
|
62
62
|
);
|
|
63
63
|
}
|
|
@@ -83,8 +83,8 @@ SProgressBar[animation] {
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
SProgressBar[theme='custom'] {
|
|
86
|
-
background-color: var(
|
|
87
|
-
background-image: var(
|
|
86
|
+
background-color: var(--colorBg);
|
|
87
|
+
background-image: var(--colorBg);
|
|
88
88
|
}
|
|
89
89
|
SProgressBar[animation] {
|
|
90
90
|
animation-duration: var(--duration);
|
|
@@ -95,8 +95,8 @@ SValue {
|
|
|
95
95
|
animation-duration: var(--duration);
|
|
96
96
|
}
|
|
97
97
|
SValue[theme] {
|
|
98
|
-
background-color: var(
|
|
99
|
-
background-image: var(
|
|
98
|
+
background-color: var(--colorBg);
|
|
99
|
+
background-image: var(--colorBg);
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
@media (prefers-reduced-motion) {
|