@redneckz/wildless-cms-uni-blocks 0.5.1 → 0.5.3

package/bundle/bundle.umd.js

@@ -666,7 +666,7 @@
     const addSpacesBetweenNumbers = (number) => new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
 
     const PictureText = JSX(({ className = '', context, title, description, image, benefits, version = 'primary', sum, monthLimit, directionRight = false, ...rest }) => {
-        return (jsxs(BlockWrapper, { className: `relative font-sans p-14 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(Img, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
+        return (jsxs(BlockWrapper, { className: `relative font-sans py-12 px-28 ${VersionStyleMap[version]} ${className}`, context: context, ...rest, children: [jsx(Headline, { context: context, className: "!p-0", title: title, description: description, headlineVersion: "M", bgColorHeadline: version, align: "center" }), jsxs("div", { className: 'flex justify-center gap-[122px] mt-[30px]', children: [image?.src ? jsx(Img, { className: directionRight ? 'order-2' : '', image: image }) : null, jsxs("div", { className: "w-[558px] m-auto", children: [benefits?.length ? (jsx("div", { className: "flex flex-col gap-4", children: benefits.map(renderBenefit$2(version)) })) : null, renderInsuranceSumMonth(sum, monthLimit)] })] })] }));
     });
     const renderBenefit$2 = (version) => (benefit, i) => (jsx(BenefitItem, { icon: benefit.icon, label: benefit.label, description: benefit.description, version: version }, String(i)));
     function renderInsuranceSumMonth(sum, monthLimit) {
@@ -764,15 +764,16 @@
         return (jsxs("div", { className: getButtonStyle(props), children: [appendLeft ? appendLeft : null, isWithText(props) ? (jsxs("div", { children: [jsx("div", { className: "text-xs-light text-left", children: aboveText }), jsx("div", { className: `text-left ${aboveText ? 'text-s -mt-0.5' : 'text-l'}`, children: text })] })) : null, appendRight ? appendRight : null] }));
     });
     const getButtonStyle = (props) => {
-        const { version, aboveText, rounded } = props;
+        const { className = '', version, aboveText, rounded } = props;
         if (version === 'link') {
             return '';
         }
         const withTextStyle = `gap-2 ${aboveText ? 'py-2.5 px-7' : 'py-4 px-9'}`;
         return [
-            'flex items-center justify-center',
+            'group flex items-center justify-center',
             isWithText(props) ? withTextStyle : 'h-12 w-12',
             rounded ? 'rounded-full' : '',
+            className,
         ].join(' ');
     };
     const isWithText = ({ text, aboveText, appendLeft }) => Boolean(text || aboveText || !appendLeft);
@@ -780,11 +781,13 @@
     const buttonStyleMap = {
         primary: 'text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active',
         secondary: 'text-primary-main bg-main-divider hover:text-white hover:bg-primary-hover active:bg-primary-active',
+        white: 'text-primary-main bg-white hover:text-white hover:bg-primary-hover active:bg-white',
         link: '',
     };
     const buttonDisabledStyleMap = {
         primary: 'bg-secondary-dark text-secondary-text',
         secondary: 'bg-secondary-light text-secondary-text',
+        white: 'bg-white text-primary-text',
         link: '',
     };
     const buttonStyle = 'text-center font-sans select-none';
@@ -807,8 +810,11 @@
 
     const Button = JSX((props) => {
         const { text, aboveText, appendLeft, appendRight, children, disabled, rounded, ...rest } = props;
+        // its non valid HTML attribute. Must be excluded from "rest"
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { asSVG, iconRight, icon, ...usedProps } = rest;
         const buttonInner = children ?? (jsx(ButtonInner, { text: text, aboveText: aboveText, appendLeft: appendLeft, appendRight: appendRight, rounded: rounded }));
-        return disabled ? (jsx(DisabledButton, { rounded: rounded, ...rest, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...rest, children: buttonInner }));
+        return disabled ? (jsx(DisabledButton, { rounded: rounded, ...usedProps, children: buttonInner })) : (jsx(RegularButton, { rounded: rounded, ...usedProps, children: buttonInner }));
     });
     const RegularButton = JSX(({ className = '', ariaLabel, version, rounded, href, target, children, onClick, ...rest }) => {
         return (jsx("a", { className: getRegularButtonClasses({ className, version, rounded }), href: href, target: target, onClick: onClick, "aria-label": ariaLabel, role: href ? 'link' : 'button', ...rest, children: children }));
@@ -822,11 +828,12 @@
         const router = context.useRouter();
         return buttons && buttons?.length ? (jsx("div", { className: className, children: buttons.map((button, index) => renderButton$2(useLink({ router, handlerDecorator }, button), index)) })) : null;
     });
-    function renderButton$2({ icon, iconRight, ...button }, i) {
+    function renderButton$2({ icon, iconRight, version = 'primary', ...button }, i) {
         if (!button?.text) {
             return null;
         }
-        return icon ? (jsx(Button, { appendLeft: jsx(Img, { image: icon, width: "24", height: "24", asSVG: true }), appendRight: jsx(Img, { image: iconRight, width: "24", height: "24", asSVG: true }), ...button }, String(i))) : (jsx(Button, { ...button }, String(i)));
+        const imgStyle = version === 'primary' ? 'group-hover:text-black' : 'group-hover:text-white';
+        return icon ? (jsx(Button, { appendLeft: jsx(Img, { imageClassName: imgStyle, image: icon, width: "24", height: "24", asSVG: true }), appendRight: jsx(Img, { imageClassName: imgStyle, image: iconRight, width: "24", height: "24", asSVG: true }), version: version, ...button }, String(i))) : (jsx(Button, { version: version, ...button }, String(i)));
     }
 
     const LIST_STYLE_CLASSES = {
@@ -984,7 +991,7 @@
     }
 
     const ProductTile = JSX(({ context, className = '', title, headlineVersion = 'S', description, additionalDescription, benefits = [], buttons, image, version = 'primary', ...rest }) => {
-        return (jsxs(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)}`, ...rest, children: [jsx(Headline, { context: context, className: `!p-0 z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits, version), additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
+        return (jsxs(BlockWrapper, { context: context, className: `overflow-hidden font-sans p-9 box-border relative justify-between grid ${className} ${VersionStyleMap[version]} ${getTileRightPadding(className)} ${getTileMinHeight(className)}`, ...rest, children: [jsx(Headline, { context: context, className: `!p-0 !bg-transparent z-10 ${title || description ? 'mb-3.5' : ''}`, as: "h2", title: title, description: description, headlineVersion: headlineVersion, bgColorHeadline: version, align: "left" }), renderBenefits$1(benefits, version), additionalDescription ? renderAdditionalDescription(additionalDescription, version) : null, buttons?.length ? (jsx(ButtonSection, { context: context, buttons: buttons, className: "flex self-end mt-5 gap-4 z-10 text-l" })) : null, image?.src ? jsx(Img, { className: "absolute right-0 bottom-0", image: image }) : null] }));
     });
     // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
     const BENEFITS_WIDTH = 'max-w-[calc(100%-186px)]';
@@ -1009,7 +1016,7 @@
             primary: 'text-secondary-text',
             secondary: 'text-white',
         };
-        return (jsx("div", { className: `text-m-light mt-2.5 ${descStyleMap[version]}`, children: additionalDescription }));
+        return (jsx("div", { className: `text-m-light mt-2.5 z-10 ${descStyleMap[version]}`, children: additionalDescription }));
     }
 
     const ArrowButton = JSX(({ className, disabled, ...rest }) => (jsx(Button, { rounded: true, className: `group shadow-[0_4px_25px_rgba(0,0,0,0.07)] w-12 h-12 min-h-12 max-h-12 flex items-center justify-center ${disabled
@@ -1685,12 +1692,7 @@
                         })) }) }), jsx("div", { className: "w-full h-2 bg-primary-main" })] }));
     }
 
-    const CurrencyMap = {
-        RUB: '₽',
-        USD: '$',
-        EUR: '€',
-    };
-    const CurrencyInput = JSX(({ className = '', label, currency = 'RUB', onChange, value = '', minValue = 0, maxValue = 300000, ...inputProps }) => {
+    const CurrencyInput = JSX(({ className = '', label, onChange, value = '', minValue = 0, maxValue = 300000, ...inputProps }) => {
         const handleChange = (e) => {
             if (!onChange) {
                 return;
@@ -1698,25 +1700,25 @@
             const newValue = e.target.value === '' ? '' : String(clamp(e.target.value, minValue, maxValue));
             onChange(newValue);
         };
-        return (jsxs("div", { className: className, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsxs("div", { className: "h-[56px] relative flex items-center", children: [jsx("input", { type: "number", className: "text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text", onChange: handleChange, value: value, min: minValue, max: maxValue, ...inputProps }), jsx("span", { className: "text-xl-light absolute right-4", children: CurrencyMap[currency] })] })] }));
+        return (jsxs("div", { className: className, children: [label ? jsx("label", { className: "block text-m-light mb-2", children: label }) : null, jsxs("div", { className: "h-[56px] relative flex items-center", children: [jsx("input", { type: "number", className: 'text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text', onChange: handleChange, value: value, min: minValue, max: maxValue, ...inputProps }), jsx("span", { className: "text-xl-light absolute right-4", children: "\u20BD" })] })] }));
     });
 
     const AMOUNT_KEY = 'amount';
-    const INPUT_LABEL = 'Сумма перевода';
-    const BUTTON_TEXT = 'Далее';
-    const PLACEHOLDER = '1500';
-    const TITLE = 'Укажите сумму перевода';
     const FORM_URL = 'https://www.rshb.ru/p2p/';
+    const DEFAULT_TITLE = 'Укажите сумму перевода';
+    const DEFAULT_LABEL = 'Сумма перевода';
+    const DEFAULT_PLACEHOLDER = '1500';
+    const DEFAULT_BUTTON_TEXT = 'Далее';
     const BUTTON_CLASS_PARAMS = {
         version: 'primary',
         className: 'w-full h-[56px] px-9 mt-6',
     };
-    const CardTransfer = JSX(({ className = '', title = TITLE, ...rest }) => {
+    const CardTransfer = JSX(({ className = '', title = DEFAULT_TITLE, label = DEFAULT_LABEL, placeholder = DEFAULT_PLACEHOLDER, buttonText = DEFAULT_BUTTON_TEXT, ...rest }) => {
         const [value, setValue] = useState('');
         const isDisabled = !Number(value);
-        return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: setValue, placeholder: PLACEHOLDER, label: INPUT_LABEL }), jsx("button", { type: "submit", className: isDisabled
+        return (jsxs(BlockWrapper, { className: `p-[50px] flex flex-col items-center font-sans bg-white ${className}`, ...rest, children: [title ? jsx(Heading, { className: "max-w-[684px] pb-9", headingType: "h2", title: title }) : null, jsxs("form", { className: "w-[468px]", method: "POST", action: FORM_URL, children: [jsx(CurrencyInput, { name: AMOUNT_KEY, value: value, onChange: setValue, placeholder: placeholder, label: label }), jsx("button", { type: "submit", className: isDisabled
                                 ? getDisabledButtonClasses(BUTTON_CLASS_PARAMS)
-                                : getRegularButtonClasses(BUTTON_CLASS_PARAMS), disabled: isDisabled, children: BUTTON_TEXT })] })] }));
+                                : getRegularButtonClasses(BUTTON_CLASS_PARAMS), disabled: isDisabled, children: buttonText })] })] }));
     });
 
     const iconVersionMap = {
@@ -1986,7 +1988,7 @@
         background: `url('/icons/ArrowDownIcon.svg') no-repeat right 16px top 50%`,
     };
     const Select = JSX(({ className = '', id, name, children, value, onChange }) => {
-        return (jsx("select", { className: `appearance-none ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), placeholder: "", children: children }));
+        return (jsx("select", { className: `appearance-none pl-0.5 ${className}`, style: selectStyle, id: id, name: name || id, value: value, onChange: (e) => onChange(e.target.value), placeholder: "", children: children }));
     });
 
     const SelectOption = JSX(({ className = '', value, selected, disabled = false, children }) => {
@@ -2706,7 +2708,7 @@
     const Radio = JSX(({ name, text, value, checked, onChange, className }) => (jsx("div", { className: className, children: jsxs("label", { className: "flex items-center relative cursor-pointer", children: [jsx("input", { className: "appearance-none flex justify-center items-center shrink-0 w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main", type: "radio", value: value, name: name, checked: checked, onChange: onChange }), text ? jsx("span", { className: "font-sans ml-3 cursor-pointer", children: text }) : null] }) })));
 
     const RenderRadioButtons = JSX(() => {
-        const [selectedOption, setSelectedOption] = useState('option1');
+        const [selectedOption, setSelectedOption] = useState('option2');
         const onChange = (_) => setSelectedOption(_.target.value);
         return (jsxs("div", { children: [jsx(Radio, { className: "mb-2", name: "contractType", text: "\u041F\u0440\u043E\u0441\u0442\u043E\u0435 \u0445\u0440\u0430\u043D\u0435\u043D\u0438\u0435", value: "option1", checked: selectedOption === 'option1', onChange: onChange }), jsx(Radio, { name: "contractType", text: "\u0421\u0434\u0435\u043B\u043A\u0430 \u0441 \u043D\u0435\u0434\u0432\u0438\u0436\u0438\u043C\u043E\u0441\u0442\u044C\u044E", value: "option2", checked: selectedOption === 'option2', onChange: onChange })] }));
     });
@@ -2869,7 +2871,7 @@
     const ACTIVE_TEXT_CLASSES = 'text-white';
     const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';
 
-    const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+    const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2 flex justify-center items-center';
     const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
     const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
     const renderGroupTab = ({ onClick, currentTab, showCounter, page }) => (tab, i) => {