@redneckz/wildless-cms-uni-blocks 0.14.506 → 0.14.508

package/bin/migration-scripts/0.14.506.js

@@ -0,0 +1,19 @@
+import { deleteProp, traversePageBlocks } from '../utils.js';
+
+export const description = 'v0.14.506';
+
+export default traversePageBlocks(adjustClearContentFooter);
+
+function adjustClearContentFooter(block) {
+  const content = block?.content;
+
+  if (!content || !content.footer?.$ref) {
+    return;
+  }
+
+  Object.keys(content).forEach((key) => {
+    if (key !== 'footer') {
+      deleteProp(content, key);
+    }
+  });
+}

package/bundle/bundle.umd.js

@@ -1994,7 +1994,7 @@
     const INITIAL_MOBILE_MODE = false;
 
     const useMobileMode = () => {
-        const mq = `(max-width: 768px)`;
+        const mq = `(max-width: 1024px)`;
         const [isMobileMode, setIsMobileMode] = useState(INITIAL_MOBILE_MODE);
         useEffect(() => {
             const mqList = globalThis.matchMedia?.(mq);
@@ -2442,8 +2442,7 @@
         text,
     }));
 
-    /** @deprecated */
-    const AlignStyles = 'text-center';
+    const getAlignStyles = (isMobile = false) => (isMobile ? 'text-left' : 'text-center');
 
     const iconBgStyles = {
         '': 'bg-main-divider group-data-secondary:bg-white/30',
@@ -2459,10 +2458,11 @@
             }, className: style('rounded-icon object-fit flex justify-center items-center', iconBgStyles[iconBgVersion], className), children: jsx(Icon, { ...rest, width: "54%", height: "54%", name: icon }) })) : null;
     });
 
-    const defaultIconSize = 44;
-
-    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? jsx(Heading, { headingType: "h3", as: "h2", className: AlignStyles, title: title }) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] })));
-    const renderBenefit = ({ label, description, __html, icon, isDotted = false, iconBgVersion }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", defaultIconSize: defaultIconSize, iconBgVersion: iconBgVersion || '', ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), __html ? jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-s" }) : null] })) : null] }, String(i)));
+    const BenefitsBlock = JSX(({ className = '', title, benefitList, ...rest }) => {
+        const isMobileMode = useMobileMode();
+        return (jsxs(BlockWrapper, { className: className, defaultPadding: "p-6xl", ...rest, children: [title ? (jsx(Heading, { headingType: "h3", as: "h2", className: getAlignStyles(isMobileMode), title: title })) : null, benefitList?.length ? (jsx("div", { className: "flex flex-col @md:flex-row flex-wrap w-full @md:justify-center mt-xl gap-5xl", role: "list", children: benefitList.map(renderBenefit) })) : null] }));
+    });
+    const renderBenefit = ({ label, description, __html, icon, isDotted = false, iconBgVersion }, i) => (jsxs("div", { className: "flex gap-m items-center @md:basis-1/2 @md:max-w-[500px]", role: "listitem", children: [icon?.icon ? (jsx(RoundedIcon, { className: "shrink-0", iconBgVersion: iconBgVersion, ...icon })) : null, icon?.src ? jsx(Img, { className: "shrink-0", image: icon }) : null, label ? (jsxs("div", { className: "@sm:h-full space-y-xs", children: [jsx(Heading, { headingType: "h6", children: label }), jsx(Text, { size: "text-l", color: "text-secondary-text group-data-secondary:text-white/80", font: "font-light", children: description }), __html ? jsx(RichText, { __html: __html, isDotted: isDotted, itemSize: "list-s" }) : null] })) : null] }, String(i)));
 
     const bonusBenefitStyles = 'items-center';
 
@@ -3739,10 +3739,13 @@
 
     const DepositoryFilter = JSX(({ field, onClearFilter, filtrationState }) => (jsxs("div", { className: "grid grid-cols-12 mb-3xl @lg:space-x-xl", children: [jsx(SearchInput, { className: "col-span-12 @lg:col-span-4 mt-auto", placeholder: "\u041F\u043E\u0438\u0441\u043A", ...field('query') }), jsx(DatePicker, { className: "col-span-12 @lg:col-span-3 mt-4 @lg:mt-0", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u043E\u0442", maxDate: filtrationState.endDate, ...field('startDate') }), jsx(DatePicker, { className: "col-span-12 @lg:col-span-3 mt-4 @lg:mt-0", label: "\u041F\u0435\u0440\u0438\u043E\u0434 \u0434\u043E", minDate: filtrationState.startDate, ...field('endDate') }), jsx("div", { className: "col-span-12 @lg:col-span-2 mt-8 @lg:mt-auto", children: jsx(Button, { type: "reset", className: "w-full", version: "secondary", onClick: onClearFilter, children: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C" }) })] })));
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const renderRoundedIcon = (_icon, _iconBgVersion) => null;
+
     const DepositoryItem = ({ title, timestamp, publicId }) => {
         const link = useLink();
         const { href } = link({ href: `/api/v1/depository/${publicId}/file` });
-        return (jsxs("div", { className: "grid grid-cols-12 py-lg border-gray border-opacity-50 border-b", children: [jsx("div", { className: "col-span-4 @lg:col-span-2", children: timestamp ? (jsx(Text, { size: "text-m", "font-weight": "font-light", children: formatDate(timestamp) })) : null }), jsx("div", { className: "col-span-8 @lg:col-span-10 text-h6 hover:text-primary-active", children: jsx("a", { href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title }) })] }, publicId));
+        return (jsxs("div", { className: "flex gap-3 items-center py-lg border-gray border-opacity-50 border-b", children: [renderRoundedIcon(), jsxs("div", { className: "flex flex-col gap-x-6xl lg:flex-row lg:items-center", children: [timestamp ? (jsx(Text, { size: "text-m", "font-weight": "font-light", children: formatDate(timestamp) })) : null, jsx("a", { className: "text-h6 hover:text-primary-active", href: href, download: true, "aria-label": "\u0421\u043A\u0430\u0447\u0430\u0442\u044C", children: title })] })] }, publicId));
     };
 
     const DEPOSITARY_URL = '/api/v1/depository';
@@ -4476,7 +4479,7 @@
         const { href, target, text, onClick } = link(rest);
         return (jsxs("a", { className: style('relative inline-block bg-transparent text-center no-underline', className), href: href, target: target, "data-item-name": dataItemName, onClick: onClick, ...getAspectsAttributes(data), children: [jsx("span", { className: getTextStyle$1(active), children: text || children }), active ? (jsx("div", { className: "absolute left-0 right-0 -bottom-3 h-0.5 bg-primary-main group-data-transparent:bg-white" })) : null] }));
     });
-    const getTextStyle$1 = (active = false) => style('font-sans text-l font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
+    const getTextStyle$1 = (active = false) => style('font-sans text-l lg:font-light', active ? 'text-primary-main' : 'text-primary-text hover:text-primary-main', 'group-data-transparent:text-white group-data-transparent:hover:text-primary-hover');
 
     const HeaderSubMenuItem = JSX(({ observerOptions, onVisibilityChange, children, className, ...rest }) => {
         const observerCallback = useCallback((entries) => {
@@ -4491,15 +4494,14 @@
         return (jsx("span", { ref: ref, className: className, role: "menuitem", children: jsx(HeaderItem, { ...rest, children: children }) }));
     });
 
-    const getTextInternetButton = (button) => button?.text;
-
     const BUTTON_STYLE = {
         default: 'bg-main-divider text-primary-main rounded hover:text-primary-main',
         transparent: 'backdrop-opacity-30 bg-white/30 hover:text-primary-hover text-white',
     };
-    const InternetBankButton = JSX(({ version, ...rest }) => {
-        const text = getTextInternetButton(rest);
-        return text ? (jsx(LinkButton, { className: style('py-s px-lg font-light whitespace-nowrap', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), ...rest, children: text })) : null;
+    const InternetBankButton = JSX(({ version, text, mobileText, ...rest }) => {
+        const isMobileMode = useMobileMode();
+        const buttonText = isMobileMode ? mobileText : text;
+        return buttonText ? (jsx(LinkButton, { className: style('py-s px-lg font-light whitespace-nowrap', BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default']), ...rest, children: buttonText })) : null;
     });
 
     const HeaderSubMenu = JSX(({ subItems = [], version, internetBankButton, dropdownMenuAriaLabel, chatBotAriaLabel }) => {
@@ -5687,37 +5689,40 @@
         return (jsx(BlockWrapper, { defaultPadding: "p-0", ...rest, children: jsx(RichText, { __html: __html, richVersion: richVersion }) }));
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const renderRoundedIcon = (_icon, _iconBgVersion) => null;
-
     const rollupIconVersion = 'color';
 
     const AccordionFoldButton = JSX(({ label, labelIconBgVersion, icon, onToggle, labelIcon }) => (jsx(TextWithIcon, { tag: "button", className: style('border-none bg-transparent items-center group/button', labelIcon?.icon ? 'py-xs' : 'py-lg'), onClick: onToggle, textNode: jsxs("div", { className: "flex items-center text-start group-hover/button:text-primary-main gap-s", children: [renderRoundedIcon(), label ? (jsx(Text, { size: "text-h6", font: "font-normal", children: label })) : null] }), iconNode: icon ? jsx(Icon, { name: icon, iconVersion: rollupIconVersion, width: "24", height: "24" }) : null })));
 
-    const foldableSectionStyles = 'grid grid-cols-12 [&>*]:pb-m';
+    const getFoldableStyles = (isMobile = false) => isMobile ? 'flex flex-wrap group-last:last:pb-0' : 'grid grid-cols-12 [&>*]:pb-m';
 
-    const getIconName = (isUnfolded = false) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
+    const getIconName = (isUnfolded = false, isMobile = false) => isMobile ? getMobileName(isUnfolded) : getDesktopName(isUnfolded);
+    const getDesktopName = (isUnfolded = false) => (isUnfolded ? 'MinusIcon' : 'PlusIcon');
+    const getMobileName = (isUnfolded = false) => isUnfolded ? 'ArrowUpSolidIcon' : 'ArrowDownSolidIcon';
 
     const rollupItemStyles = 'border-0 border-b border-solid border-main-divider last:border-b-0';
 
     const RollupItem = UniBlock(({ className = '', isExpanded, isFoldButtonOnTop = true, label = 'Развернуть', labelIcon, labelIconBgVersion, foldButtonVersion = 'default', 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    version, role, ...rest }) => (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", role: role, ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-lg', foldableSectionStyles), isUnfolded: isUnfolded, children: renderChildren({
-                    ...rest,
-                    extraProps: { className: 'w-full', padding: 'p-0' },
-                }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
-                foldButtonVersion,
-                label,
-                labelIcon,
-                labelIconBgVersion,
-                isUnfolded,
-                onToggle,
-            }) }) })), {
+    version, role, ...rest }) => {
+        const isMobile = useMobileMode();
+        return (jsx(BlockWrapper, { className: style('w-full', rollupItemStyles, className), defaultPadding: "p-0", tag: "div", version: "transparent", role: role, ...rest, children: jsx(Foldable, { isFoldButtonOnTop: isFoldButtonOnTop, unfoldedByDefault: isExpanded, renderFoldableSection: ({ isUnfolded }) => (jsx(FoldableSection, { className: style('gap-lg', getFoldableStyles(isMobile)), isUnfolded: isUnfolded, children: renderChildren({
+                        ...rest,
+                        extraProps: { className: 'w-full', padding: 'p-0' },
+                    }) })), renderFoldButton: ({ isUnfolded, onToggle }) => renderFoldButton({
+                    foldButtonVersion,
+                    label,
+                    labelIcon,
+                    labelIconBgVersion,
+                    isUnfolded,
+                    onToggle,
+                    isMobile,
+                }) }) }));
+    }, {
         childrenTypes: { exclude: ['RollupItem'] },
     });
-    const renderFoldButton = ({ foldButtonVersion, label: defaultLabel, labelIcon, labelIconBgVersion, isUnfolded, onToggle, }) => {
+    const renderFoldButton = ({ foldButtonVersion, label: defaultLabel, labelIcon, labelIconBgVersion, isUnfolded, onToggle, isMobile = false, }) => {
         const label = defaultLabel || (isUnfolded ? 'Скрыть' : 'Развернуть');
-        const icon = getIconName(isUnfolded);
+        const icon = getIconName(isUnfolded, isMobile);
         return foldButtonVersion === 'accordion' ? (jsx(AccordionFoldButton, { label: label, labelIcon: labelIcon, labelIconBgVersion: labelIconBgVersion, icon: icon, onToggle: onToggle })) : (jsx(DefaultFoldButton, { label: label, icon: isUnfolded ? 'ArrowUpIcon' : 'ArrowDownIcon', onClick: onToggle }));
     };
 
@@ -5877,9 +5882,10 @@
         const shortGaps = stepsLength > 3;
         const styleMap = STEPS_BLOCK_STYLE;
         const lineOpacity = getLineOpacity(showLines);
+        const isMobileMode = useMobileMode();
         const paddingXNormal = stepsLength < STEP_BREAKPOINT ? 'px-24' : 'px-16';
         const paddingXSmall = stepsLength < STEP_BREAKPOINT ? 'px-28' : 'px-20';
-        return (jsxs(BlockWrapper, { className: style('box-border flex flex-col items-center overflow-hidden gap-y-3xl', className), defaultPadding: "p-6xl", version: version, ...rest, children: [jsx(Headline, { headlineVersion: "S", title: title, description: description, isEmbedded: true, className: "w-full", align: AlignStyles }), steps?.length ? (jsxs("div", { className: "box-border space-y-lg flex flex-col justify-center", children: [jsx("div", { className: style('flex items-center', size === 'normal' ? paddingXNormal : paddingXSmall), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between', shortGaps ? 'gap-x-s' : 'gap-x-20'), children: steps.map(renderStep({ styleMap, version })) })] })) : null, renderButtonsSection(buttons)] }));
+        return (jsxs(BlockWrapper, { className: style('box-border flex flex-col items-center overflow-hidden gap-y-3xl', className), defaultPadding: "p-6xl", version: version, ...rest, children: [jsx(Headline, { headlineVersion: "S", title: title, description: description, isEmbedded: true, className: "w-full", align: getAlignStyles(isMobileMode) }), steps?.length ? (jsxs("div", { className: "box-border space-y-lg flex flex-col justify-center", children: [jsx("div", { className: style('flex items-center', size === 'normal' ? paddingXNormal : paddingXSmall), children: joinList(jsx("div", { className: style('h-0.5 w-full bg-secondary-light flex-1', lineOpacity) }))(steps.map(renderStepIcon(styleMap, size, stepVersion))) }), jsx("div", { className: style('flex justify-between', shortGaps ? 'gap-x-s' : 'gap-x-20'), children: steps.map(renderStep({ styleMap, version })) })] })) : null, renderButtonsSection(buttons)] }));
     });
     const renderStepIcon = (styleMap, size, stepVersion) => ({ icon }, i) => {
         const iconVersion = stepVersion === 'secondary' ? 'white' : 'color';
@@ -6446,7 +6452,7 @@
         slots: () => [HEADER_SLOT, FOOTER_SLOT, STICKY_FOOTER_SLOT],
     });
 
-    const packageVersion = "0.14.505";
+    const packageVersion = "0.14.507";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;