@popsure/dirty-swan 0.28.11 → 0.29.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.
- package/dist/cjs/index.js +26 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/button/index.d.ts +1 -1
- package/dist/cjs/lib/components/modal/index.d.ts +1 -1
- package/dist/esm/components/autocompleteAddress/index.js +1 -1
- package/dist/esm/components/autocompleteAddress/index.js.map +1 -1
- package/dist/esm/components/button/index.js +1 -0
- package/dist/esm/components/button/index.js.map +1 -1
- package/dist/esm/components/input/currency/index.js +15 -3
- package/dist/esm/components/input/currency/index.js.map +1 -1
- package/dist/esm/components/input/currency/index.test.js +90 -0
- package/dist/esm/components/input/currency/index.test.js.map +1 -1
- package/dist/esm/components/modal/bottomModal/index.js +6 -2
- package/dist/esm/components/modal/bottomModal/index.js.map +1 -1
- package/dist/esm/components/modal/bottomOrRegularModal/index.js +1 -0
- package/dist/esm/components/modal/bottomOrRegularModal/index.js.map +1 -1
- package/dist/esm/components/modal/regularModal/index.js +6 -2
- package/dist/esm/components/modal/regularModal/index.js.map +1 -1
- package/dist/esm/lib/components/button/index.d.ts +1 -1
- package/dist/esm/lib/components/modal/index.d.ts +1 -1
- package/dist/index.css +11 -8
- package/dist/index.css.map +1 -1
- package/dist/lib/scss/private/components/_buttons.scss +5 -0
- package/package.json +1 -1
- package/src/lib/components/autocompleteAddress/index.tsx +1 -1
- package/src/lib/components/button/index.stories.mdx +21 -0
- package/src/lib/components/button/index.tsx +7 -1
- package/src/lib/components/input/currency/index.test.tsx +52 -0
- package/src/lib/components/input/currency/index.tsx +17 -1
- package/src/lib/components/modal/bottomModal/index.tsx +5 -1
- package/src/lib/components/modal/bottomModal/style.module.scss +0 -1
- package/src/lib/components/modal/index.ts +1 -1
- package/src/lib/components/modal/regularModal/index.tsx +6 -2
- package/src/lib/components/modal/regularModal/style.module.scss +0 -1
- package/src/lib/scss/private/components/_buttons.scss +5 -0
- package/src/lib/scss/private/components/button.stories.mdx +16 -0
package/dist/cjs/index.js
CHANGED
|
@@ -5344,7 +5344,7 @@ var AutoCompleteAddress = function (_a) {
|
|
|
5344
5344
|
_b)) }, { children: [jsxRuntime.jsx("div", { className: styles$o.map, id: "map" }, void 0),
|
|
5345
5345
|
isLoading && (jsxRuntime.jsx("div", __assign({ className: styles$o['loading-spinner'] }, { children: jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m" }, void 0) }), void 0))] }), void 0),
|
|
5346
5346
|
jsxRuntime.jsx("div", __assign({ className: "wmx8" }, { children: manualAddressEntry === false ? (jsxRuntime.jsxs("div", __assign({ style: { position: 'relative' } }, { children: [jsxRuntime.jsx(Input, { className: "w100", id: "autocomplete", "data-cy": "autocomplete", type: "text", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.manualAddressEntry) || 'Search for address', ref: autocompleteElement }, "autocomplete-search"),
|
|
5347
|
-
hasLoadedGoogleAPI === false && (jsxRuntime.jsx("div", __assign({ className: styles$o['loading-spinner'] }, { children: jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m" }, void 0) }), void 0))] }), void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.street) || 'Street', value: (address === null || address === void 0 ? void 0 : address.street) || '', onChange: function (e) {
|
|
5347
|
+
hasLoadedGoogleAPI === false && (jsxRuntime.jsx("div", __assign({ "data-cy": "google-api-loader", className: styles$o['loading-spinner'] }, { children: jsxRuntime.jsx("div", { className: "ds-spinner ds-spinner__m" }, void 0) }), void 0))] }), void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", __assign({ className: "d-flex c-gap16 " + styles$o['input-line'] }, { children: [jsxRuntime.jsx(Input, { className: "w100", "data-cy": "autocomplete", type: "text", placeholder: (placeholders === null || placeholders === void 0 ? void 0 : placeholders.street) || 'Street', value: (address === null || address === void 0 ? void 0 : address.street) || '', onChange: function (e) {
|
|
5348
5348
|
var newAddress = __assign(__assign({}, address), { street: e.target.value, country: GERMANY_ALPHA_CODE });
|
|
5349
5349
|
setAddress(newAddress);
|
|
5350
5350
|
debouncedSetPlace(newAddress);
|
|
@@ -8613,6 +8613,7 @@ styleInject(css_248z$m);
|
|
|
8613
8613
|
var buttonTypeClassNameMap = {
|
|
8614
8614
|
primary: 'p-btn--primary',
|
|
8615
8615
|
secondary: 'p-btn--secondary',
|
|
8616
|
+
secondaryGrey: 'p-btn--secondary-grey',
|
|
8616
8617
|
outline: 'p-btn--outline',
|
|
8617
8618
|
outlineGrey: 'p-btn--outline-grey',
|
|
8618
8619
|
};
|
|
@@ -8692,7 +8693,9 @@ function reverseFormatInput(input) {
|
|
|
8692
8693
|
|
|
8693
8694
|
var CurrencyInput = function (_a) {
|
|
8694
8695
|
var value = _a.value, onChange = _a.onChange; _a.type; var props = __rest$1(_a, ["value", "onChange", "type"]);
|
|
8695
|
-
var
|
|
8696
|
+
var inputRef = require$$0.useRef(null);
|
|
8697
|
+
var _b = require$$0.useState(null), cursor = _b[0], setCursor = _b[1];
|
|
8698
|
+
var _c = require$$0.useState(''), shadowValue = _c[0], setShadowValue = _c[1];
|
|
8696
8699
|
var formattedShadowValue = formatInput(shadowValue
|
|
8697
8700
|
.replace(/ /g, '') // remove all whitespace
|
|
8698
8701
|
.replace(',', '.') // change commas to dot for decimal separator
|
|
@@ -8711,12 +8714,22 @@ var CurrencyInput = function (_a) {
|
|
|
8711
8714
|
onChange === null || onChange === void 0 ? void 0 : onChange(reverseFormatInput(shadowValue));
|
|
8712
8715
|
// eslint-disable-next-line
|
|
8713
8716
|
}, [shadowValue]);
|
|
8714
|
-
|
|
8717
|
+
require$$0.useEffect(function () {
|
|
8718
|
+
if (!inputRef.current || !cursor) {
|
|
8719
|
+
return;
|
|
8720
|
+
}
|
|
8721
|
+
var cursorDiff = String(formattedShadowValue).length - String(shadowValue).length;
|
|
8722
|
+
var newCursor = cursorDiff + cursor;
|
|
8723
|
+
inputRef.current.selectionStart = newCursor;
|
|
8724
|
+
inputRef.current.selectionEnd = newCursor;
|
|
8725
|
+
}, [cursor, formattedShadowValue, shadowValue]);
|
|
8726
|
+
return (jsxRuntime.jsx(Input, __assign({ prefix: "\u20AC", ref: inputRef, type: "string", value: formattedShadowValue, onChange: function (e) {
|
|
8727
|
+
setCursor(e.target.selectionStart);
|
|
8715
8728
|
setShadowValue(e.target.value);
|
|
8716
8729
|
} }, props), void 0));
|
|
8717
8730
|
};
|
|
8718
8731
|
|
|
8719
|
-
var css_248z$k = "@keyframes style-module_fade-in__1GZgs {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n }\n}\n@keyframes style-module_fade-out__30Bns {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n }\n}\n@keyframes style-module_appear-in__3U2lu {\n 0% {\n transform: translateY(100%);\n }\n 80% {\n transform: translateY(-2%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@keyframes style-module_disappear-out__6pOVr {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n.style-module_close__1GERU {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n animation-delay: 0.1s;\n animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n position: relative;\n background-color: white;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n width: 100%;\n animation-name: style-module_appear-in__3U2lu;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n top: 0;\n}\n.style-module_container--close__K506c {\n animation-name: style-module_disappear-out__6pOVr;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n height: 60px;\n display: flex;\n
|
|
8732
|
+
var css_248z$k = "@keyframes style-module_fade-in__1GZgs {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n }\n}\n@keyframes style-module_fade-out__30Bns {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n }\n}\n@keyframes style-module_appear-in__3U2lu {\n 0% {\n transform: translateY(100%);\n }\n 80% {\n transform: translateY(-2%);\n }\n 100% {\n transform: translateY(0);\n }\n}\n@keyframes style-module_disappear-out__6pOVr {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(100%);\n }\n}\n.style-module_close__1GERU {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n.style-module_overlay__AlX2J, .style-module_overlay--close__3E9GY {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__1GZgs 0.3s both;\n}\n.style-module_overlay--close__3E9GY {\n animation-delay: 0.1s;\n animation: style-module_fade-out__30Bns 0.3s both;\n}\n\n.style-module_container__aOENo, .style-module_container--close__K506c {\n position: relative;\n background-color: white;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n width: 100%;\n animation-name: style-module_appear-in__3U2lu;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n top: 0;\n}\n.style-module_container--close__K506c {\n animation-name: style-module_disappear-out__6pOVr;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_header__10iiH {\n height: 60px;\n display: flex;\n align-items: center;\n padding: 0 16px;\n}";
|
|
8720
8733
|
var styles$j = {"close":"style-module_close__1GERU","overlay":"style-module_overlay__AlX2J","overlay--close":"style-module_overlay--close__3E9GY","fade-in":"style-module_fade-in__1GZgs","fade-out":"style-module_fade-out__30Bns","container":"style-module_container__aOENo","container--close":"style-module_container--close__K506c","appear-in":"style-module_appear-in__3U2lu","disappear-out":"style-module_disappear-out__6pOVr","header":"style-module_header__10iiH"};
|
|
8721
8734
|
styleInject(css_248z$k);
|
|
8722
8735
|
|
|
@@ -8776,12 +8789,15 @@ var BottomModal = (function (_a) {
|
|
|
8776
8789
|
if (!isOpen) {
|
|
8777
8790
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
8778
8791
|
}
|
|
8779
|
-
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$j['overlay--close'] : styles$j.overlay, onClick: handleOnOverlayClick }, { children: jsxRuntime.jsxs("div", __assign({ className: (isClosing ? styles$j['container--close'] : styles$j.container) + " " + className, ref: containerRef, style: { top: containerXOffset + "px" }, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$j.header
|
|
8792
|
+
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$j['overlay--close'] : styles$j.overlay, onClick: handleOnOverlayClick }, { children: jsxRuntime.jsxs("div", __assign({ className: (isClosing ? styles$j['container--close'] : styles$j.container) + " " + className, ref: containerRef, style: { top: containerXOffset + "px" }, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: classNames(styles$j.header, {
|
|
8793
|
+
'jc-between': !!title,
|
|
8794
|
+
'jc-end': !title
|
|
8795
|
+
}) }, { children: [jsxRuntime.jsx("div", __assign({ className: "p-h4 " + styles$j.title }, { children: title }), void 0),
|
|
8780
8796
|
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$j.close, onClick: handleOnClose }, { children: jsxRuntime.jsx("img", { src: imageClose$1, alt: "Close" }, void 0) }), void 0))] }), void 0),
|
|
8781
8797
|
jsxRuntime.jsx("div", __assign({ className: styles$j.content }, { children: children }), void 0)] }), void 0) }), void 0));
|
|
8782
8798
|
});
|
|
8783
8799
|
|
|
8784
|
-
var css_248z$j = "@keyframes style-module_fade-in__nLzzO {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n}\n@keyframes style-module_fade-out__IuSV7 {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n}\n@keyframes style-module_appear-in__2ZMqz {\n 0% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n}\n@keyframes style-module_disappear-out__38TSV {\n 0% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n 100% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n}\n.style-module_overlay__1Zbce, .style-module_overlay--close__2dytn {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__nLzzO 0.3s both;\n}\n.style-module_overlay--close__2dytn {\n animation-delay: 0.1s;\n animation: style-module_fade-out__IuSV7 0.3s both;\n}\n\n.style-module_container__1XZj_, .style-module_container--close__3UYsJ {\n position: relative;\n display: flex;\n align-items: center;\n max-width: 592px;\n width: 100%;\n min-height: 100%;\n margin: 0 auto;\n animation-name: style-module_appear-in__2ZMqz;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n.style-module_container--close__3UYsJ {\n animation-name: style-module_disappear-out__38TSV;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_body__lbUih {\n background-color: white;\n border-radius: 8px;\n margin: 80px auto;\n}\n\n.style-module_header__2oEKp {\n display: flex;\n
|
|
8800
|
+
var css_248z$j = "@keyframes style-module_fade-in__nLzzO {\n 0% {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n 100% {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n}\n@keyframes style-module_fade-out__IuSV7 {\n from {\n background-color: rgba(0, 0, 0, 0.3);\n visibility: visible;\n }\n to {\n background-color: rgba(0, 0, 0, 0);\n visibility: hidden;\n }\n}\n@keyframes style-module_appear-in__2ZMqz {\n 0% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n}\n@keyframes style-module_disappear-out__38TSV {\n 0% {\n transform: translateY(0);\n opacity: 1;\n visibility: visible;\n }\n 100% {\n transform: translateY(24px);\n opacity: 0;\n visibility: hidden;\n }\n}\n.style-module_overlay__1Zbce, .style-module_overlay--close__2dytn {\n position: fixed;\n z-index: 100;\n overflow: auto;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n animation: style-module_fade-in__nLzzO 0.3s both;\n}\n.style-module_overlay--close__2dytn {\n animation-delay: 0.1s;\n animation: style-module_fade-out__IuSV7 0.3s both;\n}\n\n.style-module_container__1XZj_, .style-module_container--close__3UYsJ {\n position: relative;\n display: flex;\n align-items: center;\n max-width: 592px;\n width: 100%;\n min-height: 100%;\n margin: 0 auto;\n animation-name: style-module_appear-in__2ZMqz;\n animation-duration: 0.4s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n.style-module_container--close__3UYsJ {\n animation-name: style-module_disappear-out__38TSV;\n animation-duration: 0.4s;\n animation-delay: 0s;\n animation-fill-mode: both;\n animation-timing-function: ease-out;\n}\n\n.style-module_body__lbUih {\n background-color: white;\n border-radius: 8px;\n margin: 80px auto;\n}\n\n.style-module_header__2oEKp {\n display: flex;\n align-items: center;\n padding: 24px 24px 0 24px;\n}\n\n.style-module_close__p3Axi {\n border: none;\n background-color: transparent;\n cursor: pointer;\n}";
|
|
8785
8801
|
var styles$i = {"overlay":"style-module_overlay__1Zbce","overlay--close":"style-module_overlay--close__2dytn","fade-in":"style-module_fade-in__nLzzO","fade-out":"style-module_fade-out__IuSV7","container":"style-module_container__1XZj_","container--close":"style-module_container--close__3UYsJ","appear-in":"style-module_appear-in__2ZMqz","disappear-out":"style-module_disappear-out__38TSV","body":"style-module_body__lbUih","header":"style-module_header__2oEKp","close":"style-module_close__p3Axi"};
|
|
8786
8802
|
styleInject(css_248z$j);
|
|
8787
8803
|
|
|
@@ -8793,7 +8809,10 @@ var RegularModal = (function (_a) {
|
|
|
8793
8809
|
if (!isOpen) {
|
|
8794
8810
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {}, void 0);
|
|
8795
8811
|
}
|
|
8796
|
-
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$i['overlay--close'] : styles$i.overlay, onClick: handleOnOverlayClick }, { children: jsxRuntime.jsx("div", __assign({ className: (isClosing ? styles$i['container--close'] : styles$i.container) + " " + className }, { children: jsxRuntime.jsxs("div", __assign({ className: styles$i.body, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: styles$i.header
|
|
8812
|
+
return (jsxRuntime.jsx("div", __assign({ className: isClosing ? styles$i['overlay--close'] : styles$i.overlay, onClick: handleOnOverlayClick }, { children: jsxRuntime.jsx("div", __assign({ className: (isClosing ? styles$i['container--close'] : styles$i.container) + " " + className }, { children: jsxRuntime.jsxs("div", __assign({ className: styles$i.body, onClick: handleContainerClick }, { children: [jsxRuntime.jsxs("div", __assign({ className: classNames(styles$i.header, {
|
|
8813
|
+
'jc-between': !!title,
|
|
8814
|
+
'jc-end': !title
|
|
8815
|
+
}) }, { children: [title && jsxRuntime.jsx("div", __assign({ className: "p-h2 " + styles$i.title }, { children: title }), void 0),
|
|
8797
8816
|
dismissible && (jsxRuntime.jsx("button", __assign({ type: "button", className: styles$i.close, onClick: handleOnClose }, { children: jsxRuntime.jsx("img", { src: imageClose, alt: "Close" }, void 0) }), void 0))] }), void 0), children] }), void 0) }), void 0) }), void 0));
|
|
8798
8817
|
});
|
|
8799
8818
|
|