@commercetools-uikit/progress-bar 19.20.0 → 19.21.0
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.
|
@@ -40,6 +40,10 @@ var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
|
|
|
40
40
|
var Text__default = /*#__PURE__*/_interopDefault(Text);
|
|
41
41
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
42
42
|
|
|
43
|
+
const defaultStyles = {
|
|
44
|
+
height: '20',
|
|
45
|
+
labelWidth: 'scale'
|
|
46
|
+
};
|
|
43
47
|
const heightPerScale = {
|
|
44
48
|
'10': designSystem.designTokens.spacing25,
|
|
45
49
|
'20': designSystem.designTokens.spacing40
|
|
@@ -52,14 +56,14 @@ const progressPulse = react.keyframes`
|
|
|
52
56
|
background-position: -100% 0;
|
|
53
57
|
}
|
|
54
58
|
`;
|
|
55
|
-
const getLabelStyles = props => /*#__PURE__*/react.css("min-height:", heightPerScale[props.height ??
|
|
56
|
-
const getBackgroundBarStyles = props => /*#__PURE__*/react.css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designSystem.designTokens.colorNeutral90, ";border-radius:", designSystem.designTokens.spacingL, ";height:", heightPerScale[props.height ??
|
|
57
|
-
const getForegroundBarStyles = props => /*#__PURE__*/react.css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[props.height ??
|
|
59
|
+
const getLabelStyles = props => /*#__PURE__*/react.css("min-height:", heightPerScale[props.height ?? defaultStyles.height], ";max-width:", Constraints__default["default"].getMaxPropTokenValue(props.labelWidth || defaultStyles.labelWidth), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCUSIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGRlZmF1bHRTdHlsZXMgPSB7XG4gIGhlaWdodDogJzIwJyxcbiAgbGFiZWxXaWR0aDogJ3NjYWxlJyxcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCBjb25zdCBoZWlnaHRQZXJTY2FsZSA9IHtcbiAgJzEwJzogZGVzaWduVG9rZW5zLnNwYWNpbmcyNSxcbiAgJzIwJzogZGVzaWduVG9rZW5zLnNwYWNpbmc0MCxcbn07XG5cbmNvbnN0IHByb2dyZXNzUHVsc2UgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAxMDAlIDA7XG4gIH1cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTEwMCUgMDtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldExhYmVsU3R5bGVzID0gKFxuICBwcm9wczogVFByb2dyZXNzQmFyUHJvcHMgJiB7IHRleHRBbGlnbm1lbnQ6IHN0cmluZyB9XG4pID0+IGNzc2BcbiAgbWluLWhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKFxuICAgIHByb3BzLmxhYmVsV2lkdGggfHwgZGVmYXVsdFN0eWxlcy5sYWJlbFdpZHRoXG4gICl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJhY2tncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/ICdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCknXG4gICAgOiBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTB9O1xuICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nTH07XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRGb3JlZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogJHtwcm9wcy5wcm9ncmVzc30lO1xuICB0cmFuc2l0aW9uOiB3aWR0aCA1MDBtcyBlYXNlLWluLW91dDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgYmFja2dyb3VuZDogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyBkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlXG4gICAgOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRvIHJpZ2h0LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnl9LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fVxuICAgICAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */");
|
|
60
|
+
const getBackgroundBarStyles = props => /*#__PURE__*/react.css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designSystem.designTokens.colorNeutral90, ";border-radius:", designSystem.designTokens.spacingL, ";height:", heightPerScale[props.height ?? defaultStyles.height], ";overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:getBackgroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IHR5cGUgVFByb2dyZXNzQmFyUHJvcHMgfSBmcm9tICcuL3Byb2dyZXNzLWJhcic7XG5cbmV4cG9ydCBjb25zdCBkZWZhdWx0U3R5bGVzID0ge1xuICBoZWlnaHQ6ICcyMCcsXG4gIGxhYmVsV2lkdGg6ICdzY2FsZScsXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRTdHlsZXMubGFiZWxXaWR0aFxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgICB0byByaWdodCxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX0sXG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX1cbiAgICAgICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
|
|
61
|
+
const getForegroundBarStyles = props => /*#__PURE__*/react.css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[props.height ?? defaultStyles.height], ";background:", props.isInverted ? designSystem.designTokens.colorSurface : `linear-gradient(
|
|
58
62
|
to right,
|
|
59
63
|
${designSystem.designTokens.colorPrimary85},
|
|
60
64
|
${designSystem.designTokens.colorPrimary},
|
|
61
65
|
${designSystem.designTokens.colorPrimary85}
|
|
62
|
-
)`, ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/react.css(progressPulse, " 2s linear infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
66
|
+
)`, ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/react.css(progressPulse, " 2s linear infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBEUyIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGRlZmF1bHRTdHlsZXMgPSB7XG4gIGhlaWdodDogJzIwJyxcbiAgbGFiZWxXaWR0aDogJ3NjYWxlJyxcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCBjb25zdCBoZWlnaHRQZXJTY2FsZSA9IHtcbiAgJzEwJzogZGVzaWduVG9rZW5zLnNwYWNpbmcyNSxcbiAgJzIwJzogZGVzaWduVG9rZW5zLnNwYWNpbmc0MCxcbn07XG5cbmNvbnN0IHByb2dyZXNzUHVsc2UgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAxMDAlIDA7XG4gIH1cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTEwMCUgMDtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldExhYmVsU3R5bGVzID0gKFxuICBwcm9wczogVFByb2dyZXNzQmFyUHJvcHMgJiB7IHRleHRBbGlnbm1lbnQ6IHN0cmluZyB9XG4pID0+IGNzc2BcbiAgbWluLWhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKFxuICAgIHByb3BzLmxhYmVsV2lkdGggfHwgZGVmYXVsdFN0eWxlcy5sYWJlbFdpZHRoXG4gICl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJhY2tncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/ICdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCknXG4gICAgOiBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTB9O1xuICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nTH07XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRGb3JlZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogJHtwcm9wcy5wcm9ncmVzc30lO1xuICB0cmFuc2l0aW9uOiB3aWR0aCA1MDBtcyBlYXNlLWluLW91dDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgYmFja2dyb3VuZDogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyBkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlXG4gICAgOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRvIHJpZ2h0LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnl9LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fVxuICAgICAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */") : 'none', ";border-radius:", designSystem.designTokens.spacingL, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IHR5cGUgVFByb2dyZXNzQmFyUHJvcHMgfSBmcm9tICcuL3Byb2dyZXNzLWJhcic7XG5cbmV4cG9ydCBjb25zdCBkZWZhdWx0U3R5bGVzID0ge1xuICBoZWlnaHQ6ICcyMCcsXG4gIGxhYmVsV2lkdGg6ICdzY2FsZScsXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRTdHlsZXMubGFiZWxXaWR0aFxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgICB0byByaWdodCxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX0sXG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX1cbiAgICAgICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
|
|
63
67
|
|
|
64
68
|
function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
65
69
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
|
|
@@ -110,32 +114,48 @@ const layoutConfigMapping = {
|
|
|
110
114
|
wrappingComponent: SpacingsInline__default["default"]
|
|
111
115
|
}
|
|
112
116
|
};
|
|
113
|
-
const ProgressBar =
|
|
114
|
-
|
|
117
|
+
const ProgressBar = _ref => {
|
|
118
|
+
let _ref$progress = _ref.progress,
|
|
119
|
+
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
120
|
+
_ref$label = _ref.label,
|
|
121
|
+
label = _ref$label === void 0 ? null : _ref$label,
|
|
122
|
+
_ref$labelPosition = _ref.labelPosition,
|
|
123
|
+
labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
|
|
124
|
+
_ref$labelWidth = _ref.labelWidth,
|
|
125
|
+
labelWidth = _ref$labelWidth === void 0 ? defaultStyles.labelWidth : _ref$labelWidth,
|
|
126
|
+
_ref$isInverted = _ref.isInverted,
|
|
127
|
+
isInverted = _ref$isInverted === void 0 ? false : _ref$isInverted,
|
|
128
|
+
_ref$isAnimated = _ref.isAnimated,
|
|
129
|
+
isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated,
|
|
130
|
+
_ref$height = _ref.height,
|
|
131
|
+
height = _ref$height === void 0 ? defaultStyles.height : _ref$height,
|
|
132
|
+
_ref$barWidth = _ref.barWidth,
|
|
133
|
+
barWidth = _ref$barWidth === void 0 ? 6 : _ref$barWidth;
|
|
134
|
+
const layoutConfig = layoutConfigMapping[labelPosition || 'top'];
|
|
115
135
|
const BarWithProps = jsxRuntime.jsx(Bar, {
|
|
116
|
-
progress:
|
|
117
|
-
barWidth:
|
|
118
|
-
isInverted:
|
|
119
|
-
height:
|
|
120
|
-
isAnimated:
|
|
136
|
+
progress: progress,
|
|
137
|
+
barWidth: barWidth,
|
|
138
|
+
isInverted: isInverted,
|
|
139
|
+
height: height,
|
|
140
|
+
isAnimated: isAnimated
|
|
121
141
|
});
|
|
122
142
|
const LabelWithProps = jsxRuntime.jsx(ProgressBarLabel, {
|
|
123
|
-
label:
|
|
124
|
-
labelWidth:
|
|
125
|
-
labelPosition:
|
|
126
|
-
isInverted:
|
|
127
|
-
height:
|
|
143
|
+
label: label,
|
|
144
|
+
labelWidth: labelWidth,
|
|
145
|
+
labelPosition: labelPosition,
|
|
146
|
+
isInverted: isInverted,
|
|
147
|
+
height: height,
|
|
128
148
|
textAlignment: layoutConfig.textAlignment
|
|
129
149
|
});
|
|
130
150
|
const WrappingComponent = layoutConfig.wrappingComponent;
|
|
131
151
|
let firstComponent = LabelWithProps;
|
|
132
152
|
let secondComponent = BarWithProps;
|
|
133
|
-
if (
|
|
153
|
+
if (labelPosition === 'right' || labelPosition === 'bottom') {
|
|
134
154
|
firstComponent = BarWithProps;
|
|
135
155
|
secondComponent = LabelWithProps;
|
|
136
156
|
}
|
|
137
157
|
return jsxRuntime.jsxs(WrappingComponent, {
|
|
138
|
-
scale:
|
|
158
|
+
scale: height === '20' ? 'm' : 's',
|
|
139
159
|
alignItems: "center",
|
|
140
160
|
children: [firstComponent, secondComponent]
|
|
141
161
|
});
|
|
@@ -152,22 +172,11 @@ ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
152
172
|
height: _pt__default["default"].oneOf(['10', '20']),
|
|
153
173
|
barWidth: _pt__default["default"].oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale'])
|
|
154
174
|
} : {};
|
|
155
|
-
const defaultProps = {
|
|
156
|
-
progress: 0,
|
|
157
|
-
label: null,
|
|
158
|
-
labelPosition: 'top',
|
|
159
|
-
labelWidth: 'scale',
|
|
160
|
-
isInverted: false,
|
|
161
|
-
isAnimated: true,
|
|
162
|
-
height: '20',
|
|
163
|
-
barWidth: 6
|
|
164
|
-
};
|
|
165
175
|
ProgressBar.displayName = 'ProgressBar';
|
|
166
|
-
ProgressBar.defaultProps = defaultProps;
|
|
167
176
|
var ProgressBar$1 = ProgressBar;
|
|
168
177
|
|
|
169
178
|
// NOTE: This string will be replaced on build time with the package version.
|
|
170
|
-
var version = "19.
|
|
179
|
+
var version = "19.21.0";
|
|
171
180
|
|
|
172
181
|
exports["default"] = ProgressBar$1;
|
|
173
182
|
exports.version = version;
|
|
@@ -39,6 +39,10 @@ var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
|
|
|
39
39
|
var Text__default = /*#__PURE__*/_interopDefault(Text);
|
|
40
40
|
var isNil__default = /*#__PURE__*/_interopDefault(isNil);
|
|
41
41
|
|
|
42
|
+
const defaultStyles = {
|
|
43
|
+
height: '20',
|
|
44
|
+
labelWidth: 'scale'
|
|
45
|
+
};
|
|
42
46
|
const heightPerScale = {
|
|
43
47
|
'10': designSystem.designTokens.spacing25,
|
|
44
48
|
'20': designSystem.designTokens.spacing40
|
|
@@ -51,9 +55,9 @@ const progressPulse = react.keyframes`
|
|
|
51
55
|
background-position: -100% 0;
|
|
52
56
|
}
|
|
53
57
|
`;
|
|
54
|
-
const getLabelStyles = props => /*#__PURE__*/react.css("min-height:", heightPerScale[props.height ??
|
|
55
|
-
const getBackgroundBarStyles = props => /*#__PURE__*/react.css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designSystem.designTokens.colorNeutral90, ";border-radius:", designSystem.designTokens.spacingL, ";height:", heightPerScale[props.height ??
|
|
56
|
-
const getForegroundBarStyles = props => /*#__PURE__*/react.css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[props.height ??
|
|
58
|
+
const getLabelStyles = props => /*#__PURE__*/react.css("min-height:", heightPerScale[props.height ?? defaultStyles.height], ";max-width:", Constraints__default["default"].getMaxPropTokenValue(props.labelWidth || defaultStyles.labelWidth), ";" + ("" ), "" );
|
|
59
|
+
const getBackgroundBarStyles = props => /*#__PURE__*/react.css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designSystem.designTokens.colorNeutral90, ";border-radius:", designSystem.designTokens.spacingL, ";height:", heightPerScale[props.height ?? defaultStyles.height], ";overflow:hidden;" + ("" ), "" );
|
|
60
|
+
const getForegroundBarStyles = props => /*#__PURE__*/react.css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[props.height ?? defaultStyles.height], ";background:", props.isInverted ? designSystem.designTokens.colorSurface : `linear-gradient(
|
|
57
61
|
to right,
|
|
58
62
|
${designSystem.designTokens.colorPrimary85},
|
|
59
63
|
${designSystem.designTokens.colorPrimary},
|
|
@@ -109,53 +113,58 @@ const layoutConfigMapping = {
|
|
|
109
113
|
wrappingComponent: SpacingsInline__default["default"]
|
|
110
114
|
}
|
|
111
115
|
};
|
|
112
|
-
const ProgressBar =
|
|
113
|
-
|
|
116
|
+
const ProgressBar = _ref => {
|
|
117
|
+
let _ref$progress = _ref.progress,
|
|
118
|
+
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
119
|
+
_ref$label = _ref.label,
|
|
120
|
+
label = _ref$label === void 0 ? null : _ref$label,
|
|
121
|
+
_ref$labelPosition = _ref.labelPosition,
|
|
122
|
+
labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
|
|
123
|
+
_ref$labelWidth = _ref.labelWidth,
|
|
124
|
+
labelWidth = _ref$labelWidth === void 0 ? defaultStyles.labelWidth : _ref$labelWidth,
|
|
125
|
+
_ref$isInverted = _ref.isInverted,
|
|
126
|
+
isInverted = _ref$isInverted === void 0 ? false : _ref$isInverted,
|
|
127
|
+
_ref$isAnimated = _ref.isAnimated,
|
|
128
|
+
isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated,
|
|
129
|
+
_ref$height = _ref.height,
|
|
130
|
+
height = _ref$height === void 0 ? defaultStyles.height : _ref$height,
|
|
131
|
+
_ref$barWidth = _ref.barWidth,
|
|
132
|
+
barWidth = _ref$barWidth === void 0 ? 6 : _ref$barWidth;
|
|
133
|
+
const layoutConfig = layoutConfigMapping[labelPosition || 'top'];
|
|
114
134
|
const BarWithProps = jsxRuntime.jsx(Bar, {
|
|
115
|
-
progress:
|
|
116
|
-
barWidth:
|
|
117
|
-
isInverted:
|
|
118
|
-
height:
|
|
119
|
-
isAnimated:
|
|
135
|
+
progress: progress,
|
|
136
|
+
barWidth: barWidth,
|
|
137
|
+
isInverted: isInverted,
|
|
138
|
+
height: height,
|
|
139
|
+
isAnimated: isAnimated
|
|
120
140
|
});
|
|
121
141
|
const LabelWithProps = jsxRuntime.jsx(ProgressBarLabel, {
|
|
122
|
-
label:
|
|
123
|
-
labelWidth:
|
|
124
|
-
labelPosition:
|
|
125
|
-
isInverted:
|
|
126
|
-
height:
|
|
142
|
+
label: label,
|
|
143
|
+
labelWidth: labelWidth,
|
|
144
|
+
labelPosition: labelPosition,
|
|
145
|
+
isInverted: isInverted,
|
|
146
|
+
height: height,
|
|
127
147
|
textAlignment: layoutConfig.textAlignment
|
|
128
148
|
});
|
|
129
149
|
const WrappingComponent = layoutConfig.wrappingComponent;
|
|
130
150
|
let firstComponent = LabelWithProps;
|
|
131
151
|
let secondComponent = BarWithProps;
|
|
132
|
-
if (
|
|
152
|
+
if (labelPosition === 'right' || labelPosition === 'bottom') {
|
|
133
153
|
firstComponent = BarWithProps;
|
|
134
154
|
secondComponent = LabelWithProps;
|
|
135
155
|
}
|
|
136
156
|
return jsxRuntime.jsxs(WrappingComponent, {
|
|
137
|
-
scale:
|
|
157
|
+
scale: height === '20' ? 'm' : 's',
|
|
138
158
|
alignItems: "center",
|
|
139
159
|
children: [firstComponent, secondComponent]
|
|
140
160
|
});
|
|
141
161
|
};
|
|
142
162
|
ProgressBar.propTypes = {};
|
|
143
|
-
const defaultProps = {
|
|
144
|
-
progress: 0,
|
|
145
|
-
label: null,
|
|
146
|
-
labelPosition: 'top',
|
|
147
|
-
labelWidth: 'scale',
|
|
148
|
-
isInverted: false,
|
|
149
|
-
isAnimated: true,
|
|
150
|
-
height: '20',
|
|
151
|
-
barWidth: 6
|
|
152
|
-
};
|
|
153
163
|
ProgressBar.displayName = 'ProgressBar';
|
|
154
|
-
ProgressBar.defaultProps = defaultProps;
|
|
155
164
|
var ProgressBar$1 = ProgressBar;
|
|
156
165
|
|
|
157
166
|
// NOTE: This string will be replaced on build time with the package version.
|
|
158
|
-
var version = "19.
|
|
167
|
+
var version = "19.21.0";
|
|
159
168
|
|
|
160
169
|
exports["default"] = ProgressBar$1;
|
|
161
170
|
exports.version = version;
|
|
@@ -19,6 +19,10 @@ import { keyframes, css } from '@emotion/react';
|
|
|
19
19
|
import { designTokens } from '@commercetools-uikit/design-system';
|
|
20
20
|
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
21
21
|
|
|
22
|
+
const defaultStyles = {
|
|
23
|
+
height: '20',
|
|
24
|
+
labelWidth: 'scale'
|
|
25
|
+
};
|
|
22
26
|
const heightPerScale = {
|
|
23
27
|
'10': designTokens.spacing25,
|
|
24
28
|
'20': designTokens.spacing40
|
|
@@ -31,14 +35,14 @@ const progressPulse = keyframes`
|
|
|
31
35
|
background-position: -100% 0;
|
|
32
36
|
}
|
|
33
37
|
`;
|
|
34
|
-
const getLabelStyles = props => /*#__PURE__*/css("min-height:", heightPerScale[props.height ??
|
|
35
|
-
const getBackgroundBarStyles = props => /*#__PURE__*/css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designTokens.colorNeutral90, ";border-radius:", designTokens.spacingL, ";height:", heightPerScale[props.height ??
|
|
36
|
-
const getForegroundBarStyles = props => /*#__PURE__*/css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[props.height ??
|
|
38
|
+
const getLabelStyles = props => /*#__PURE__*/css("min-height:", heightPerScale[props.height ?? defaultStyles.height], ";max-width:", Constraints.getMaxPropTokenValue(props.labelWidth || defaultStyles.labelWidth), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getLabelStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBCUSIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGRlZmF1bHRTdHlsZXMgPSB7XG4gIGhlaWdodDogJzIwJyxcbiAgbGFiZWxXaWR0aDogJ3NjYWxlJyxcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCBjb25zdCBoZWlnaHRQZXJTY2FsZSA9IHtcbiAgJzEwJzogZGVzaWduVG9rZW5zLnNwYWNpbmcyNSxcbiAgJzIwJzogZGVzaWduVG9rZW5zLnNwYWNpbmc0MCxcbn07XG5cbmNvbnN0IHByb2dyZXNzUHVsc2UgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAxMDAlIDA7XG4gIH1cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTEwMCUgMDtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldExhYmVsU3R5bGVzID0gKFxuICBwcm9wczogVFByb2dyZXNzQmFyUHJvcHMgJiB7IHRleHRBbGlnbm1lbnQ6IHN0cmluZyB9XG4pID0+IGNzc2BcbiAgbWluLWhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKFxuICAgIHByb3BzLmxhYmVsV2lkdGggfHwgZGVmYXVsdFN0eWxlcy5sYWJlbFdpZHRoXG4gICl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJhY2tncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/ICdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCknXG4gICAgOiBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTB9O1xuICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nTH07XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRGb3JlZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogJHtwcm9wcy5wcm9ncmVzc30lO1xuICB0cmFuc2l0aW9uOiB3aWR0aCA1MDBtcyBlYXNlLWluLW91dDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgYmFja2dyb3VuZDogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyBkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlXG4gICAgOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRvIHJpZ2h0LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnl9LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fVxuICAgICAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */");
|
|
39
|
+
const getBackgroundBarStyles = props => /*#__PURE__*/css("width:100%;background-color:", props.isInverted ? 'rgba(255, 255, 255, 0.4)' : designTokens.colorNeutral90, ";border-radius:", designTokens.spacingL, ";height:", heightPerScale[props.height ?? defaultStyles.height], ";overflow:hidden;" + (process.env.NODE_ENV === "production" ? "" : ";label:getBackgroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlDdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IHR5cGUgVFByb2dyZXNzQmFyUHJvcHMgfSBmcm9tICcuL3Byb2dyZXNzLWJhcic7XG5cbmV4cG9ydCBjb25zdCBkZWZhdWx0U3R5bGVzID0ge1xuICBoZWlnaHQ6ICcyMCcsXG4gIGxhYmVsV2lkdGg6ICdzY2FsZScsXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRTdHlsZXMubGFiZWxXaWR0aFxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgICB0byByaWdodCxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX0sXG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX1cbiAgICAgICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
|
|
40
|
+
const getForegroundBarStyles = props => /*#__PURE__*/css("width:", props.progress, "%;transition:width 500ms ease-in-out;display:block;height:", heightPerScale[props.height ?? defaultStyles.height], ";background:", props.isInverted ? designTokens.colorSurface : `linear-gradient(
|
|
37
41
|
to right,
|
|
38
42
|
${designTokens.colorPrimary85},
|
|
39
43
|
${designTokens.colorPrimary},
|
|
40
44
|
${designTokens.colorPrimary85}
|
|
41
|
-
)`, ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/css(progressPulse, " 2s linear infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
45
|
+
)`, ";background-size:200% 100%;animation:", props.isAnimated && !props.isInverted ? /*#__PURE__*/css(progressPulse, " 2s linear infinite;" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBEUyIsImZpbGUiOiJwcm9ncmVzcy1iYXIuc3R5bGVzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgQ29uc3RyYWludHMgZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvY29uc3RyYWludHMnO1xuaW1wb3J0IHsgdHlwZSBUUHJvZ3Jlc3NCYXJQcm9wcyB9IGZyb20gJy4vcHJvZ3Jlc3MtYmFyJztcblxuZXhwb3J0IGNvbnN0IGRlZmF1bHRTdHlsZXMgPSB7XG4gIGhlaWdodDogJzIwJyxcbiAgbGFiZWxXaWR0aDogJ3NjYWxlJyxcbn0gYXMgY29uc3Q7XG5cbmV4cG9ydCBjb25zdCBoZWlnaHRQZXJTY2FsZSA9IHtcbiAgJzEwJzogZGVzaWduVG9rZW5zLnNwYWNpbmcyNSxcbiAgJzIwJzogZGVzaWduVG9rZW5zLnNwYWNpbmc0MCxcbn07XG5cbmNvbnN0IHByb2dyZXNzUHVsc2UgPSBrZXlmcmFtZXNgXG4gIDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiAxMDAlIDA7XG4gIH1cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTEwMCUgMDtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGdldExhYmVsU3R5bGVzID0gKFxuICBwcm9wczogVFByb2dyZXNzQmFyUHJvcHMgJiB7IHRleHRBbGlnbm1lbnQ6IHN0cmluZyB9XG4pID0+IGNzc2BcbiAgbWluLWhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKFxuICAgIHByb3BzLmxhYmVsV2lkdGggfHwgZGVmYXVsdFN0eWxlcy5sYWJlbFdpZHRoXG4gICl9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGdldEJhY2tncm91bmRCYXJTdHlsZXMgPSAocHJvcHM6IFRQcm9ncmVzc0JhclByb3BzKSA9PiBjc3NgXG4gIHdpZHRoOiAxMDAlO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke3Byb3BzLmlzSW52ZXJ0ZWRcbiAgICA/ICdyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNCknXG4gICAgOiBkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsOTB9O1xuICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5zcGFjaW5nTH07XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRGb3JlZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogJHtwcm9wcy5wcm9ncmVzc30lO1xuICB0cmFuc2l0aW9uOiB3aWR0aCA1MDBtcyBlYXNlLWluLW91dDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIGhlaWdodDogJHtoZWlnaHRQZXJTY2FsZVtwcm9wcy5oZWlnaHQgPz8gZGVmYXVsdFN0eWxlcy5oZWlnaHRdfTtcbiAgYmFja2dyb3VuZDogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyBkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlXG4gICAgOiBgbGluZWFyLWdyYWRpZW50KFxuICAgICAgICAgIHRvIHJpZ2h0LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnl9LFxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmNvbG9yUHJpbWFyeTg1fVxuICAgICAgICApYH07XG4gIGJhY2tncm91bmQtc2l6ZTogMjAwJSAxMDAlO1xuICBhbmltYXRpb246ICR7cHJvcHMuaXNBbmltYXRlZCAmJiAhcHJvcHMuaXNJbnZlcnRlZFxuICAgID8gY3NzYFxuICAgICAgICAke3Byb2dyZXNzUHVsc2V9IDJzIGxpbmVhciBpbmZpbml0ZVxuICAgICAgYFxuICAgIDogJ25vbmUnfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuYDtcbiJdfQ== */") : 'none', ";border-radius:", designTokens.spacingL, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getForegroundBarStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInByb2dyZXNzLWJhci5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDdUUiLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2NvbnN0cmFpbnRzJztcbmltcG9ydCB7IHR5cGUgVFByb2dyZXNzQmFyUHJvcHMgfSBmcm9tICcuL3Byb2dyZXNzLWJhcic7XG5cbmV4cG9ydCBjb25zdCBkZWZhdWx0U3R5bGVzID0ge1xuICBoZWlnaHQ6ICcyMCcsXG4gIGxhYmVsV2lkdGg6ICdzY2FsZScsXG59IGFzIGNvbnN0O1xuXG5leHBvcnQgY29uc3QgaGVpZ2h0UGVyU2NhbGUgPSB7XG4gICcxMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nMjUsXG4gICcyMCc6IGRlc2lnblRva2Vucy5zcGFjaW5nNDAsXG59O1xuXG5jb25zdCBwcm9ncmVzc1B1bHNlID0ga2V5ZnJhbWVzYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogMTAwJSAwO1xuICB9XG4gIDEwMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC0xMDAlIDA7XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRMYWJlbFN0eWxlcyA9IChcbiAgcHJvcHM6IFRQcm9ncmVzc0JhclByb3BzICYgeyB0ZXh0QWxpZ25tZW50OiBzdHJpbmcgfVxuKSA9PiBjc3NgXG4gIG1pbi1oZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG1heC13aWR0aDogJHtDb25zdHJhaW50cy5nZXRNYXhQcm9wVG9rZW5WYWx1ZShcbiAgICBwcm9wcy5sYWJlbFdpZHRoIHx8IGRlZmF1bHRTdHlsZXMubGFiZWxXaWR0aFxuICApfTtcbmA7XG5cbmV4cG9ydCBjb25zdCBnZXRCYWNrZ3JvdW5kQmFyU3R5bGVzID0gKHByb3BzOiBUUHJvZ3Jlc3NCYXJQcm9wcykgPT4gY3NzYFxuICB3aWR0aDogMTAwJTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtwcm9wcy5pc0ludmVydGVkXG4gICAgPyAncmdiYSgyNTUsIDI1NSwgMjU1LCAwLjQpJ1xuICAgIDogZGVzaWduVG9rZW5zLmNvbG9yTmV1dHJhbDkwfTtcbiAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ0x9O1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuXG5leHBvcnQgY29uc3QgZ2V0Rm9yZWdyb3VuZEJhclN0eWxlcyA9IChwcm9wczogVFByb2dyZXNzQmFyUHJvcHMpID0+IGNzc2BcbiAgd2lkdGg6ICR7cHJvcHMucHJvZ3Jlc3N9JTtcbiAgdHJhbnNpdGlvbjogd2lkdGggNTAwbXMgZWFzZS1pbi1vdXQ7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBoZWlnaHQ6ICR7aGVpZ2h0UGVyU2NhbGVbcHJvcHMuaGVpZ2h0ID8/IGRlZmF1bHRTdHlsZXMuaGVpZ2h0XX07XG4gIGJhY2tncm91bmQ6ICR7cHJvcHMuaXNJbnZlcnRlZFxuICAgID8gZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZVxuICAgIDogYGxpbmVhci1ncmFkaWVudChcbiAgICAgICAgICB0byByaWdodCxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX0sXG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5fSxcbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk4NX1cbiAgICAgICAgKWB9O1xuICBiYWNrZ3JvdW5kLXNpemU6IDIwMCUgMTAwJTtcbiAgYW5pbWF0aW9uOiAke3Byb3BzLmlzQW5pbWF0ZWQgJiYgIXByb3BzLmlzSW52ZXJ0ZWRcbiAgICA/IGNzc2BcbiAgICAgICAgJHtwcm9ncmVzc1B1bHNlfSAycyBsaW5lYXIgaW5maW5pdGVcbiAgICAgIGBcbiAgICA6ICdub25lJ307XG4gIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmdMfTtcbmA7XG4iXX0= */");
|
|
42
46
|
|
|
43
47
|
function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
44
48
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -89,32 +93,48 @@ const layoutConfigMapping = {
|
|
|
89
93
|
wrappingComponent: SpacingsInline
|
|
90
94
|
}
|
|
91
95
|
};
|
|
92
|
-
const ProgressBar =
|
|
93
|
-
|
|
96
|
+
const ProgressBar = _ref => {
|
|
97
|
+
let _ref$progress = _ref.progress,
|
|
98
|
+
progress = _ref$progress === void 0 ? 0 : _ref$progress,
|
|
99
|
+
_ref$label = _ref.label,
|
|
100
|
+
label = _ref$label === void 0 ? null : _ref$label,
|
|
101
|
+
_ref$labelPosition = _ref.labelPosition,
|
|
102
|
+
labelPosition = _ref$labelPosition === void 0 ? 'top' : _ref$labelPosition,
|
|
103
|
+
_ref$labelWidth = _ref.labelWidth,
|
|
104
|
+
labelWidth = _ref$labelWidth === void 0 ? defaultStyles.labelWidth : _ref$labelWidth,
|
|
105
|
+
_ref$isInverted = _ref.isInverted,
|
|
106
|
+
isInverted = _ref$isInverted === void 0 ? false : _ref$isInverted,
|
|
107
|
+
_ref$isAnimated = _ref.isAnimated,
|
|
108
|
+
isAnimated = _ref$isAnimated === void 0 ? true : _ref$isAnimated,
|
|
109
|
+
_ref$height = _ref.height,
|
|
110
|
+
height = _ref$height === void 0 ? defaultStyles.height : _ref$height,
|
|
111
|
+
_ref$barWidth = _ref.barWidth,
|
|
112
|
+
barWidth = _ref$barWidth === void 0 ? 6 : _ref$barWidth;
|
|
113
|
+
const layoutConfig = layoutConfigMapping[labelPosition || 'top'];
|
|
94
114
|
const BarWithProps = jsx(Bar, {
|
|
95
|
-
progress:
|
|
96
|
-
barWidth:
|
|
97
|
-
isInverted:
|
|
98
|
-
height:
|
|
99
|
-
isAnimated:
|
|
115
|
+
progress: progress,
|
|
116
|
+
barWidth: barWidth,
|
|
117
|
+
isInverted: isInverted,
|
|
118
|
+
height: height,
|
|
119
|
+
isAnimated: isAnimated
|
|
100
120
|
});
|
|
101
121
|
const LabelWithProps = jsx(ProgressBarLabel, {
|
|
102
|
-
label:
|
|
103
|
-
labelWidth:
|
|
104
|
-
labelPosition:
|
|
105
|
-
isInverted:
|
|
106
|
-
height:
|
|
122
|
+
label: label,
|
|
123
|
+
labelWidth: labelWidth,
|
|
124
|
+
labelPosition: labelPosition,
|
|
125
|
+
isInverted: isInverted,
|
|
126
|
+
height: height,
|
|
107
127
|
textAlignment: layoutConfig.textAlignment
|
|
108
128
|
});
|
|
109
129
|
const WrappingComponent = layoutConfig.wrappingComponent;
|
|
110
130
|
let firstComponent = LabelWithProps;
|
|
111
131
|
let secondComponent = BarWithProps;
|
|
112
|
-
if (
|
|
132
|
+
if (labelPosition === 'right' || labelPosition === 'bottom') {
|
|
113
133
|
firstComponent = BarWithProps;
|
|
114
134
|
secondComponent = LabelWithProps;
|
|
115
135
|
}
|
|
116
136
|
return jsxs(WrappingComponent, {
|
|
117
|
-
scale:
|
|
137
|
+
scale: height === '20' ? 'm' : 's',
|
|
118
138
|
alignItems: "center",
|
|
119
139
|
children: [firstComponent, secondComponent]
|
|
120
140
|
});
|
|
@@ -131,21 +151,10 @@ ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
131
151
|
height: _pt.oneOf(['10', '20']),
|
|
132
152
|
barWidth: _pt.oneOf([4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale'])
|
|
133
153
|
} : {};
|
|
134
|
-
const defaultProps = {
|
|
135
|
-
progress: 0,
|
|
136
|
-
label: null,
|
|
137
|
-
labelPosition: 'top',
|
|
138
|
-
labelWidth: 'scale',
|
|
139
|
-
isInverted: false,
|
|
140
|
-
isAnimated: true,
|
|
141
|
-
height: '20',
|
|
142
|
-
barWidth: 6
|
|
143
|
-
};
|
|
144
154
|
ProgressBar.displayName = 'ProgressBar';
|
|
145
|
-
ProgressBar.defaultProps = defaultProps;
|
|
146
155
|
var ProgressBar$1 = ProgressBar;
|
|
147
156
|
|
|
148
157
|
// NOTE: This string will be replaced on build time with the package version.
|
|
149
|
-
var version = "19.
|
|
158
|
+
var version = "19.21.0";
|
|
150
159
|
|
|
151
160
|
export { ProgressBar$1 as default, version };
|
|
@@ -37,9 +37,7 @@ export type TProgressBarProps = {
|
|
|
37
37
|
barWidth?: 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 'scale';
|
|
38
38
|
};
|
|
39
39
|
declare const ProgressBar: {
|
|
40
|
-
(
|
|
40
|
+
({ progress, label, labelPosition, labelWidth, isInverted, isAnimated, height, barWidth, }: TProgressBarProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
41
41
|
displayName: string;
|
|
42
|
-
defaultProps: TProgressBarProps;
|
|
43
42
|
};
|
|
44
|
-
export declare const defaultProps: TProgressBarProps;
|
|
45
43
|
export default ProgressBar;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-uikit/progress-bar",
|
|
3
3
|
"description": "A progress bar component used to visualize the progression of an extended operation",
|
|
4
|
-
"version": "19.
|
|
4
|
+
"version": "19.21.0",
|
|
5
5
|
"bugs": "https://github.com/commercetools/ui-kit/issues",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@babel/runtime": "^7.20.13",
|
|
23
23
|
"@babel/runtime-corejs3": "^7.20.13",
|
|
24
|
-
"@commercetools-uikit/constraints": "19.
|
|
25
|
-
"@commercetools-uikit/design-system": "19.
|
|
26
|
-
"@commercetools-uikit/spacings-inline": "19.
|
|
27
|
-
"@commercetools-uikit/spacings-stack": "19.
|
|
28
|
-
"@commercetools-uikit/text": "19.
|
|
29
|
-
"@commercetools-uikit/utils": "19.
|
|
24
|
+
"@commercetools-uikit/constraints": "19.21.0",
|
|
25
|
+
"@commercetools-uikit/design-system": "19.21.0",
|
|
26
|
+
"@commercetools-uikit/spacings-inline": "19.21.0",
|
|
27
|
+
"@commercetools-uikit/spacings-stack": "19.21.0",
|
|
28
|
+
"@commercetools-uikit/text": "19.21.0",
|
|
29
|
+
"@commercetools-uikit/utils": "19.21.0",
|
|
30
30
|
"@emotion/react": "^11.10.5",
|
|
31
31
|
"lodash": "4.17.21",
|
|
32
32
|
"prop-types": "15.8.1",
|