@redneckz/wildless-cms-uni-blocks 0.6.39 → 0.6.41

package/src/components/VerticalLayout/VerticalLayout.example.json

@@ -1,8 +1,11 @@
 {
-  "title": "Вертикальный компоновщик",
-  "version": "transparent",
-  "align": "left",
-  "gap": "",
+  "content": {
+    "version": "transparent",
+    "isPadding": false,
+    "isInnerPadding": true,
+    "align": "left",
+    "gap": ""
+  },
   "blocks": [
     {
       "type": "Headline",

package/src/components/VerticalLayout/VerticalLayout.fixture.tsx

@@ -19,6 +19,25 @@ const options = {
   blocksRegistry: Blocks,
 } as BlockRendererOptions;
 
+const carouselProductCard = {
+  content: {
+    headlineSmallVersion: 'L_R',
+    align: 'left',
+    isDotted: true,
+    title: 'Новость 1',
+    version: 'primary',
+    additionalDescription: '12 сентября 2022',
+    icon: {
+      size: {
+        width: 150,
+        height: 150,
+      },
+    },
+  },
+  style: ['col-span-12'],
+  type: 'CarouselProductCard',
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -35,12 +54,12 @@ export default {
       />
     </div>
   ),
-  'transparent center': (
+  'white center': (
     <div className="container grid grid-cols-12">
       <VerticalLayout
         className="col-span-12"
         align="center"
-        version="transparent"
+        version="primary"
         block={{
           type: 'VerticalLayout',
           blocks: [
@@ -162,4 +181,42 @@ export default {
       />
     </div>
   ),
+  carousel: (
+    <div className="container grid grid-cols-12">
+      <VerticalLayout
+        align="center"
+        className="col-span-12"
+        version="primary"
+        gap="XL"
+        isPadding={true}
+        isInnerPadding={false}
+        block={{
+          type: 'VerticalLayout',
+          blocks: [
+            {
+              content: {
+                title: 'Заголовок',
+                align: 'center',
+                bgColorHeadline: 'transparent',
+                headlineVersion: 'M',
+              },
+              style: ['col-span-12'],
+              type: 'Headline',
+            },
+            {
+              content: {
+                isBlur: true,
+                visibleItemCount: 3,
+                isCycle: false,
+              },
+              style: ['col-span-12'],
+              type: 'Carousel',
+              blocks: new Array(6).fill(carouselProductCard),
+            },
+          ],
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };

package/src/components/VerticalLayout/VerticalLayout.tsx

@@ -15,10 +15,10 @@ const alignStyle: Record<AlignType, string> = {
 };
 
 const gapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-10',
-  XL: 'gap-8',
-  L: 'gap-4',
-  M: 'gap-3',
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
   S: 'gap-2',
   XS: 'gap-1',
   '': '',
@@ -31,22 +31,37 @@ const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
 };
 
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
-  ({ className = '', gap = '', align, version = 'transparent', ...rest }) => (
-    <BlockWrapper
-      className={[
-        'flex flex-col',
-        gapStyleMap[gap],
-        align && alignStyle[align],
-        backgroundStyleMap[version],
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      {...rest}
-    >
-      {renderChildren(rest)}
-    </BlockWrapper>
-  ),
+  ({
+    className = '',
+    gap = '',
+    align,
+    isPadding = false,
+    isInnerPadding = true,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+    const innerPaddingStyle = isInnerPadding ? '' : '!p-0';
+
+    return (
+      <BlockWrapper
+        className={[
+          'flex flex-col [&>*]:max-w-full',
+          paddingStyle,
+          gapStyleMap[gap],
+          align && alignStyle[align],
+          backgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: { ...options, className: innerPaddingStyle } })}
+      </BlockWrapper>
+    );
+  },
 );
 
 VerticalLayout.childrenTypes = {

package/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -16,4 +16,8 @@ export interface VerticalLayoutContent {
   version?: BlockVersionWithTransparent;
   align?: AlignType;
   gap?: GapVersion;
+  /** @title Внутренний отступ компоновщика */
+  isPadding?: boolean;
+  /** @title Отступы вложенных компонентов */
+  isInnerPadding?: boolean;
 }

package/src/model/BlockVersion.ts

@@ -15,6 +15,11 @@ export const VersionStyleMap: Record<BlockVersion, string> = {
   secondary: 'bg-primary-main text-white',
 };
 
+export const VersionAdditionalStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
 export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent, string> = {
   transparent: '',
   primary: 'bg-white text-primary-text',

package/src/model/LogoType.ts

@@ -0,0 +1,6 @@
+import type { Picture } from './Picture';
+
+export type LogoType = {
+  image?: Picture;
+  title?: string;
+};

package/src/services/sitemap/SitemapProps.ts

@@ -1,4 +1,5 @@
 import type { LinkProps } from '../../model/LinkProps';
+import type { LogoType } from '../../model/LogoType';
 import type { Picture } from '../../model/Picture';
 
 /**
@@ -22,10 +23,7 @@ export interface DispositionItem extends LinkProps {
 export interface SitemapDataProps {
   topItems?: TopMenuItem[];
   dispositions?: DispositionItem[];
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
   defaultLocation?: string;
   officesLink?: string;
 }

package/src/ui-kit/Button/ButtonSection.tsx

@@ -22,23 +22,23 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ className = '', buttons
 );
 
 export function renderButton({ button, buttonClassName, index }: RenderButtonProps) {
-  const { icon, iconRight, version, ...rest } = button;
+  const { icon, iconRight, version, text, ...rest } = button;
 
   const iconVersion = version === 'secondary' ? 'color' : 'white';
-
   const leftIcon = renderButtonIcon({ ...icon, iconVersion: iconVersion } as Picture);
   const rightIcon = renderButtonIcon({ ...iconRight, iconVersion: iconVersion } as Picture);
 
-  return (
+  return text ? (
     <Button
       key={index ? String(index) : ''}
       className={buttonClassName}
       appendLeft={leftIcon}
       appendRight={rightIcon}
       version={version}
+      text={text}
       {...rest}
     />
-  );
+  ) : null;
 }
 
 const renderButtonIcon = (icon: Picture) => {

package/src/ui-kit/Logo/Logo.mobile.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
-import { Img } from '../Img/Img';
+import type { LogoType } from '../../model/LogoType';
+import { renderImage } from './renderImage';
+import { renderTitle } from './renderTitle';
 
 export interface LogoProps {
   className: string;
@@ -8,44 +9,28 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   showTitle?: boolean;
+  logo?: LogoType;
 }
 
-const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'color',
-  transparent: 'white',
-};
-
-const SVG_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-main',
-  transparent: 'text-white',
-};
-
-const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-black',
-  transparent: 'text-white',
-};
-
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className = '', href, children, targetBlank, bgColor = 'bg-white', showTitle = true }) => {
+  ({
+    bgColor = 'bg-white',
+    children,
+    className = '',
+    href,
+    logo,
+    showTitle = true,
+    targetBlank,
+  }) => {
     return (
       <a
         className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
-        aria-label="Россельхозбанк"
+        aria-label={logo?.title || 'Россельхозбанк'}
       >
-        <Img
-          image={{ icon: 'LogoIcon', iconVersion: ICON_VERSION_MAP[bgColor] }}
-          className={`${SVG_COLOR[bgColor]}`}
-          width="34"
-          height="34"
-          asSVG
-        />
-        {showTitle ? (
-          <span className={`${TEXT_COLOR[bgColor]} text-s font-medium ml-2.5`}>
-            {children || 'Россельхозбанк'}
-          </span>
-        ) : null}
+        {renderImage(bgColor, logo?.image, { width: '34', height: '34' })}
+        {showTitle ? renderTitle(children || logo?.title, bgColor, 'text-s') : null}
       </a>
     );
   },

package/src/ui-kit/Logo/Logo.tsx

@@ -1,8 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { Picture } from '../../model/Picture';
-import type { VNode } from '../../model/VNode';
-import { Img } from '../Img/Img';
+import type { LogoType } from '../../model/LogoType';
+import { renderImage } from './renderImage';
+import { renderTitle } from './renderTitle';
 
 export interface LogoProps {
   className: string;
@@ -10,26 +9,9 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   showTitle?: boolean;
-  logo?: {
-    image?: Picture;
-    title?: string;
-  };
+  logo?: LogoType;
 }
 
-const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
-  'bg-white': 'color',
-  transparent: 'white',
-};
-
-const SVG_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-main',
-  transparent: 'text-white',
-};
-const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-primary-text',
-  transparent: 'text-white',
-};
-
 export const Logo = JSX<Partial<LogoProps>>(
   ({
     className = '',
@@ -47,28 +29,9 @@ export const Logo = JSX<Partial<LogoProps>>(
         target={targetBlank ? '_blank' : '_self'}
         aria-label={logo?.title || 'Россельхозбанк'}
       >
-        {logo?.image?.src ? (
-          <Img image={logo.image} className={SVG_COLOR[bgColor]} width="40" height="45" asSVG />
-        ) : (
-          <Img
-            image={{
-              icon: logo?.image?.icon || 'LogoIcon',
-              iconVersion: ICON_VERSION_MAP[bgColor],
-            }}
-            className={`${SVG_COLOR[bgColor]} w-10`}
-            width="40"
-            height="45"
-            asSVG
-          />
-        )}
-        {showTitle ? renderTitle(children, bgColor, logo?.title) : null}
+        {renderImage(bgColor, logo?.image, { width: '40', height: '45' })}
+        {showTitle ? renderTitle(children || logo?.title, bgColor) : null}
       </a>
     );
   },
 );
-
-const renderTitle = (children: VNode, bgColor: string, title?: string) => {
-  const text = children || title || 'Россельхозбанк';
-
-  return <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>{text}</span>;
-};

package/src/ui-kit/Logo/renderImage.tsx

@@ -0,0 +1,40 @@
+import { BgColorVersion } from '../../model/BgColorVersion';
+import type { Picture } from '../../model/Picture';
+import { Img } from '../Img/Img';
+
+const ICON_VERSION_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'color',
+  transparent: 'white',
+};
+
+const SVG_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-main',
+  transparent: 'text-white',
+};
+
+export const renderImage = (
+  bgColor: string,
+  image?: Picture,
+  size?: { width: string; height: string },
+) => {
+  return image?.src ? (
+    <Img
+      image={image}
+      className={SVG_COLOR[bgColor]}
+      width={size?.width}
+      height={size?.height}
+      asSVG
+    />
+  ) : (
+    <Img
+      image={{
+        icon: image?.icon || 'LogoIcon',
+        iconVersion: ICON_VERSION_MAP[bgColor],
+      }}
+      className={SVG_COLOR[bgColor]}
+      width={size?.width}
+      height={size?.height}
+      asSVG
+    />
+  );
+};

package/src/ui-kit/Logo/renderTitle.tsx

@@ -0,0 +1,15 @@
+import type { BgColorVersion } from '../../model/BgColorVersion';
+import type { VNode } from '../../model/VNode';
+
+const TEXT_COLOR: Record<BgColorVersion, string> = {
+  'bg-white': 'text-primary-text',
+  transparent: 'text-white',
+};
+
+export const renderTitle = (title: VNode, bgColor: string, className?: string) => {
+  return (
+    <span className={`${TEXT_COLOR[bgColor]} ml-2.5 font-medium ${className || ''}`}>
+      {title || 'Россельхозбанк'}
+    </span>
+  );
+};

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -16,13 +16,13 @@ interface SwipeListContainerProps extends SwipeContainerProps {
   className?: string;
   containerRef?: { current: HTMLDivElement | null };
   activeIndex?: number;
-  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3;
+  visibleItemCount?: SwipeListItemWidthAuto | 1 | 2 | 3 | 4;
   snapAlign?: 'snap-start' | 'snap-center' | 'snap-end';
   onVisibleItemsChange?: (itemsVisibilityList: ItemsVisibilityList) => void;
   onVisibleIndicesChange?: (indices: number[]) => void;
 }
 
-const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]'];
+const childStyleMap = ['min-w-[100%]', 'min-w-[50%]', 'min-w-[33.33%]', 'min-w-[25%]'];
 
 export const SwipeListContainer = JSX<SwipeListContainerProps>(
   ({