@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.0

package/mobile/src/components/Footer/Footer.tsx

@@ -5,13 +5,11 @@ import { projectSettings } from '../../ProjectSettings';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
-import { Img } from '../../ui-kit/Img/Img';
-import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
-import { LinkList } from '../LinkList/LinkList';
-import { MobileAppTile } from '../MobileAppTile/MobileAppTile';
+import { LinkList } from '../../ui-kit/LinkList/LinkList';
+import { style } from '../../utils/style';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
-import type { FooterContent, SubMenuItem } from './FooterContent';
+import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
@@ -27,36 +25,29 @@ export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
     useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
 
   return (
-    <BlockWrapper tag="footer" className={`px-4 py-[26px] ${className}`} {...rest}>
-      <Contacts className="overflow-hidden" items={contacts} hasButton />
-      <div className="m-0 p-0">
+    <BlockWrapper tag="footer" className={style('px-4 py-6', className)} {...rest}>
+      <div className="mb-4 pb-5 border-b border-main-divider">
         {sitemap.topItems?.map((item, i) => (
-          <RollupItem key={String(i)} label={item?.text}>
-            <LinkList documents={item.items} />
+          <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>
+            <LinkList items={item.items} className="my-3" />
           </RollupItem>
         ))}
       </div>
-      <div className="mt-4">{sitemap?.dispositions?.map(renderSubMenuItem)}</div>
-      <MobileAppTile
-        title="Мобильное приложение"
-        description="Загрузить для IOS и Android"
-        {...rest}
+      <Contacts className="overflow-hidden" items={contacts} />
+      <SocialMedia className="mb-4" media={socialMedia} />
+      <Button
+        className="w-full mb-4"
+        text="Google Play"
+        version="secondary"
+        href="/"
+        target="_blank"
       />
-      <SearchBar className="grow" />
-      <SocialMedia className="pt-6 pb-6" media={socialMedia} />
-      <HorizontalNavigation title={horizontalNavigationTitle} links={relatedEnterprises} />
-      <TextInformation links={documents} />
+      <HorizontalNavigation
+        className="pt-4 pb-7 border-y border-main-divider"
+        title={horizontalNavigationTitle}
+        links={relatedEnterprises}
+      />
+      <TextInformation />
     </BlockWrapper>
   );
 });
-
-const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
-  const { icon, href, text } = menu;
-
-  return (
-    <Button version="link" key={`footer-${i}`} href={href} className="flex text-s mb-4 w-6">
-      {icon ? <Img className="pr-1" image={icon} width="24" height="24" /> : null}
-      <span className="pl-2.5 font-medium text-primary-text">{text}</span>
-    </Button>
-  );
-};

package/mobile/src/components/Footer/HorizontalNavigation.tsx

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { TitleProps } from '../../model/HeadlineType';
+import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { HorizontalNavigationLink } from './HorizontalNavigationLink';
 
@@ -8,11 +9,11 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
     <div className={className}>
-      <span className="text-primary-text text-s font-medium">{title}</span>
+      <Text size="text-h6">{title}</Text>
       {links?.length ? (
-        <div className="flex flex-col gap-2 pt-3">
+        <div className="flex flex-col gap-6 mt-7">
           {links.map((_, i) => (
-            <HorizontalNavigationLink key={String(i)} index={i} className="text-s" {..._} />
+            <HorizontalNavigationLink key={String(i)} index={i} {..._} />
           ))}
         </div>
       ) : null}

package/mobile/src/components/Footer/HorizontalNavigationLink.tsx

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
 import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { horizontalNavigationLinkStyles } from './horizontalNavigationLinkStyles';
 
 interface HorizontalNavigationLinkProps extends LinkProps {
   className: string;
@@ -15,7 +17,7 @@ export const HorizontalNavigationLink = JSX<Partial<HorizontalNavigationLinkProp
 
     return (
       <a
-        className={`text-secondary-text hover:text-primary-main inline-block no-underline ${className}`}
+        className={style(horizontalNavigationLinkStyles, className)}
         href={href}
         target={target}
         onClick={onClick}

package/mobile/src/components/Footer/MediaButton.tsx

@@ -4,6 +4,7 @@ import { Button } from '../../ui-kit/Button/Button';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
 import { style } from '../../utils/style';
+import { buttonStylesWithText } from './buttonStylesWithText';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -48,16 +49,6 @@ interface MediaButtonProps extends ButtonProps, IconProps {
   buttonSize?: ButtonSize;
 }
 
-const buttonSizeStyles = {
-  default: 'w-14 h-14',
-  small: 'w-12 h-12',
-};
-
-const buttonStylesWithText = (text: string, buttonSize: string) =>
-  text
-    ? ''
-    : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
-
 export const MediaButton = JSX<MediaButtonProps>(
   ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
     const { href, version, text = '' } = rest;

package/mobile/src/components/Footer/TextInformation.tsx

@@ -1,22 +1,22 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Text } from '../../ui-kit/Text/Text';
 import type { FooterLink } from './FooterLink';
 import { TextInformationLink } from './TextInformationLink';
+import { textInformationTextSize } from './textInformationTextSize';
 
-export const TextInformation = JSX<FooterLink>(({ className = '', links }) => {
-  return (
-    <div className={className}>
-      <div className="py-6">
-        <span className="text-xs-light text-secondary-text">
-          {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
-        </span>
-      </div>
-      {links?.length ? (
-        <div className={`flex flex-col justify-start items-start gap-2`}>
-          {links.map((_, i) => (
-            <TextInformationLink key={String(i)} index={i} {..._} />
-          ))}
-        </div>
-      ) : null}
+export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
+  <div className={className}>
+    <div className="pt-5 sm:py-4">
+      <Text size={textInformationTextSize} color="text-secondary-text">
+        {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
+      </Text>
     </div>
-  );
-});
+    {links?.length ? (
+      <div className="flex justify-start items-start gap-5 pt-2.5">
+        {links.map((_, i) => (
+          <TextInformationLink key={String(i)} index={i} {..._} />
+        ))}
+      </div>
+    ) : null}
+  </div>
+));

package/mobile/src/components/Footer/buttonStylesWithText.ts

@@ -0,0 +1,15 @@
+import { style } from '../../utils/style';
+import { ButtonSize } from './MediaButton';
+
+const buttonSizeStyles = {
+  default: 'w-24 h-14',
+  small: 'w-12 h-12',
+};
+
+export const buttonStylesWithText = (text: string, buttonSize: ButtonSize) =>
+  text
+    ? ''
+    : style(
+        'group/media flex items-center justify-center box-border',
+        buttonSizeStyles[buttonSize],
+      );

package/mobile/src/components/Footer/horizontalNavigationLinkStyles.ts

@@ -0,0 +1 @@
+export const horizontalNavigationLinkStyles = '';

package/mobile/src/components/Footer/textInformationTextSize.ts

@@ -0,0 +1 @@
+export const textInformationTextSize = 'text-s';

package/mobile/src/components/Header/Header.tsx

@@ -12,7 +12,7 @@ import { isTopItemActive } from '../../services/sitemap/isTopItemActive';
 import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { HeaderItem } from '../../ui-kit/HeaderItem/HeaderItem';
-import { LinkList } from '../LinkList/LinkList';
+import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { HeaderBurger } from './HeaderBurger';
 import type { HeaderContent } from './HeaderContent';
@@ -67,7 +67,7 @@ export const Header = JSX<HeaderProps>(
             <div className="list-none m-0 p-0">
               {topItems?.map((item, i) => (
                 <RollupItem key={String(i)} label={item.text}>
-                  <LinkList documents={item.items} />
+                  <LinkList className="mt-2.5" items={item.items} />
                 </RollupItem>
               ))}
             </div>

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -60,12 +60,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
         ) : null}
 
         {items?.length ? (
-          <List
-            className="mt-9 text-l-light max-w-[657px]"
-            items={items}
-            itemClassName="mb-[7px]"
-            isDotted={isDotted}
-          />
+          <List className="mt-9 max-w-[657px]" items={items} isDotted={isDotted} listItemSize="M" />
         ) : null}
       </div>
     </BlockWrapper>

package/mobile/src/components/LinkDocs/LinkDocs.ui.json

@@ -1 +1,9 @@
-{}
+{
+  "content": {
+    "documents": {
+      "items": {
+        "ui:field": "document"
+      }
+    }
+  }
+}

package/mobile/src/components/MobileAppTile/MobileAppTile.tsx

@@ -3,6 +3,7 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { MobileAppTileContent } from './MobileAppTileContent';
 
 import { Logo } from '../../ui-kit/Logo/Logo';
+import { style } from '../../utils/style';
 
 export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
 
@@ -10,7 +11,10 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
   ({ className = '', title = 'Мобильное приложение', description, href = '#' }) => {
     return (
       <div
-        className={`col-span-12 rounded-md cursor-pointer p-4 mt-6 mb-6 bg-secondary-light font-sans ${className}`}
+        className={style(
+          'col-span-12 rounded-md cursor-pointer p-4 bg-secondary-light font-sans',
+          className,
+        )}
       >
         {href ? (
           <div className="flex">

package/mobile/src/components/MortgageFiltration/MortgageFiltration.tsx

@@ -0,0 +1,29 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useForm } from '../../hooks/useForm';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BaseFiltrationInner } from '../../ui-kit/BaseFiltration/BaseFiltrationInner';
+import { renderFiltrationForm } from '../../ui-kit/BaseFiltration/renderFiltrationForm';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import type { MortgageFiltrationContent } from './MortgageFiltrationContent';
+
+interface MortgageFiltrationProps extends MortgageFiltrationContent, UniBlockProps {}
+
+const initialFiltrationState = {};
+
+export const MortgageFiltration: JSXBlock<MortgageFiltrationProps> = JSX<MortgageFiltrationProps>(
+  ({ className, filtrationSchema = {}, resetButton, ...rest }) => {
+    const [filtrationState, { field, reset }] = useForm(initialFiltrationState);
+
+    return (
+      <BlockWrapper className={style(className)} version="transparent" {...rest}>
+        {renderFiltrationForm({ field, reset, filtrationSchema, resetButton })}
+        <BaseFiltrationInner filtrationState={filtrationState} {...rest} />
+      </BlockWrapper>
+    );
+  },
+);
+
+MortgageFiltration.childrenTypes = ['ProductTile'];
+MortgageFiltration.childSchema = (content?: MortgageFiltrationContent) =>
+  content?.filtrationSchema || {};

package/mobile/src/components/MortgageFiltration/MortgageFiltrationContent.ts

@@ -0,0 +1,23 @@
+import type {
+  BaseFiltrationInnerContent,
+  StringArray,
+} from '../../ui-kit/BaseFiltration/BaseFiltrationContent';
+
+export type MortgageFiltrationSchema = {
+  /** @title Тип недвижимости */
+  propertyType?: StringArray;
+  /** @title Этап строительства */
+  stage?: StringArray;
+  /** @title Категории */
+  categories?: StringArray;
+  /** @title Дополнительно */
+  extraOptions?: StringArray;
+};
+
+/**
+ * @title Подборщик ипотек
+ */
+export interface MortgageFiltrationContent extends BaseFiltrationInnerContent {
+  /** @title Параметры фильтрации */
+  filtrationSchema?: MortgageFiltrationSchema;
+}

package/mobile/src/components/ProductBlock/ProductBlock.tsx

@@ -1,17 +1,24 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
 import type { ProductBlockContent } from './ProductBlockContent';
 import { ProductBlockInner } from './ProductBlockInner';
+import { renderBackwardButton } from './renderBackwardButton';
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
-export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
-  const { className = '', ...rest } = props;
-
-  return (
-    <BlockWrapper className={`px-4 py-6 ${className}`} {...rest}>
-      <ProductBlockInner {...props} />
-    </BlockWrapper>
-  );
-});
+export const ProductBlock = JSX<ProductBlockProps>(({ className, backwardButton, ...rest }) => (
+  <BlockWrapper
+    className={style('overflow-hidden p-default flex flex-col gap-10 box-border', className)}
+    {...rest}
+  >
+    {backwardButton?.text
+      ? renderBackwardButton(
+          backwardButton,
+          !rest.version || rest.version === 'primary' ? 'primary' : 'white',
+        )
+      : null}
+    <ProductBlockInner className="grow" {...rest} />
+  </BlockWrapper>
+));

package/mobile/src/components/ProductBlock/ProductBlockContent.ts

@@ -2,7 +2,6 @@ import type { BulletsProps } from '../../model/Bullets';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { IconVersion } from '../../model/IconVersion';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { LinkProps } from '../../model/LinkProps';
 import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { BackwardButtonProps, ButtonContent } from '../../ui-kit/Button/ButtonProps';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
@@ -15,11 +14,6 @@ export type ProductBlockInnerContent = HeadlineProps &
   ButtonContent &
   ImageContent &
   BulletsProps & {
-    /**
-     * @title Количество преимуществ в строке
-     * @enumNames ["2", "3"]
-     */
-    benefitsCountOfRow?: 2 | 3;
     /**
      * @title Список преимуществ
      * @minItems 2
@@ -29,11 +23,6 @@ export type ProductBlockInnerContent = HeadlineProps &
     benefitsVersion?: IconVersion;
     /** @title Лейбл (моб.) */
     label?: string;
-    /**
-     * @title Стиль для текстовой части
-     * @hidden
-     */
-    textBlockClassName?: string;
     /** @title Картинка справа/текст слева */
     directionRight?: boolean;
   };
@@ -43,8 +32,6 @@ export type ProductBlockInnerContent = HeadlineProps &
  */
 export type ProductBlockContent = UniBlockContent &
   ProductBlockInnerContent & {
-    /** @title Хлебные крошки */
-    breadcrumbs?: LinkProps[];
     /** @title Кнопка возврата */
     backwardButton?: BackwardButtonProps;
   };

package/mobile/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,11 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
-import { Text } from '../../ui-kit/Text/Text';
+import { RichText } from '../../ui-kit/RichText/RichText';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { Headline } from '../Headline/Headline';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
@@ -15,51 +13,51 @@ export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
 
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   ({
-    className = '',
+    className,
+    version = 'primary',
     headlineVersion = 'L',
+    title,
+    description,
     benefits,
-    benefitsVersion = 'normal',
-    buttons,
-    image,
+    benefitsVersion,
     items,
     isDotted = true,
-    label,
-    title,
-    description,
-    ...rest
-  }) => (
-    <BlockWrapper className={`w-full ${className}`} {...rest}>
-      <div>
-        {label ? renderLabel(label) : null}
-        <Headline
-          className="!p-0 max-w-[600px]"
-          title={title}
-          description={description}
-          headlineVersion={headlineVersion}
-          align="text-left"
-        />
-        <BaseTile buttons={renderButtonsSection(buttons, { className: 'mt-5', isVertical: true })}>
-          {benefits?.filter((_) => _.label)?.length ? (
-            <div className="mt-3">{benefits.map(renderBenefit('primary', benefitsVersion))}</div>
-          ) : null}
-          {items?.length ? (
-            <List className="mt-3 text-m" items={items} isDotted={isDotted} />
-          ) : null}
-        </BaseTile>
-      </div>
-      {renderImage(image)}
-    </BlockWrapper>
-  ),
-);
-
-function renderImage(image?: Picture) {
-  return image?.src ? (
-    <Img imageClassName="mt-5 mx-auto block" image={{ className: 'block', ...image }} />
-  ) : null;
-}
+    __html,
+    buttons,
+    image,
+    directionRight = true,
+  }) => {
+    const benefitsWithLabel = benefits?.filter((_) => _.label);
+    const img = image?.src ? <Img className="mt-[-50px]" image={image} /> : null;
 
-const renderLabel = (label: string) => (
-  <div className="w-fit px-2.5 py-1.5 mb-5 rounded-md border-2 border-solid border-secondary-hover">
-    <Text color="text-primary-main group-data-secondary:text-white/80">{label}</Text>
-  </div>
+    return (
+      <BaseTile
+        className={className}
+        insetTitle={
+          <Headline
+            className="max-w-[600px] xl:max-w-[800px]"
+            title={title}
+            description={description}
+            headlineVersion={headlineVersion}
+            align="text-left"
+            isPadding={false}
+          />
+        }
+        {...(directionRight ? { rightImage: img } : { leftImage: img })}
+        buttons={renderButtonsSection(buttons)}
+      >
+        {benefitsWithLabel?.length ? (
+          <div className="flex flex-wrap gap-6">
+            {benefitsWithLabel.map(renderBenefit(version, benefitsVersion))}
+          </div>
+        ) : null}
+        {__html ? (
+          <div className="mt-5">
+            <RichText __html={__html} />
+          </div>
+        ) : null}
+        {items?.length ? <List className="mt-5" items={items} isDotted={isDotted} /> : null}
+      </BaseTile>
+    );
+  },
 );

package/mobile/src/components/ProductBlock/renderBackwardButton.tsx

@@ -2,35 +2,32 @@ import type { ButtonVersion } from '../../model/ButtonVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import type { BackwardButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { Img } from '../../ui-kit/Img/Img';
-import { style } from '../../utils/style';
 
 export function renderBackwardButton(
-  button: BackwardButtonProps,
+  { text, href, target, icon }: BackwardButtonProps,
   version: ButtonVersion,
-  className?: string,
 ) {
-  const { text, href, target } = button;
   const iconVersion = version === 'primary' ? 'white' : 'black';
-  const backwardIcon = button?.icon || { icon: 'ArrowLeftIcon' };
+  const commonProps = { text, href, target, ariaLabel: text };
 
   return (
-    <div className={style('flex items-center', className)}>
+    <div className="flex items-center gap-3">
       <Button
+        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center"
         version={version}
         rounded
-        className="w-12 h-12 min-h-12 min-w-12 flex items-center justify-center mr-3"
-        ariaLabel={text}
-        href={href}
-        target={target}
+        {...commonProps}
       >
         <Img
           className="w-4 h-4"
-          image={{ ...backwardIcon, iconVersion: backwardIcon.iconVersion || iconVersion }}
+          image={{
+            ...icon,
+            icon: icon?.icon || 'ArrowLeftIcon',
+            iconVersion: icon?.iconVersion || iconVersion,
+          }}
         />
       </Button>
-      {text ? (
-        <Button version="link" text={text} href={href} target={target} ariaLabel={text} />
-      ) : null}
+      <Button version="link" {...commonProps} />
     </div>
   );
 }

package/mobile/src/components/ProductBlock/renderBenefit.tsx

@@ -1,18 +1,9 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 import type { IconVersion } from '../../model/IconVersion';
 import { BenefitItem } from '../../ui-kit/BenefitItem/BenefitItem';
+import type { BenefitItemProps } from '../../ui-kit/BenefitItem/BenefitItemProps';
 
 export const renderBenefit =
   (version: BlockVersion = 'primary', benefitsVersion: IconVersion = 'normal') =>
-  ({ icon, label, description }: BenefitItemProps, i: number) =>
-    (
-      <BenefitItem
-        key={String(i)}
-        icon={icon}
-        label={label}
-        description={description}
-        version={version}
-        benefitsVersion={benefitsVersion}
-      />
-    );
+  (props: BenefitItemProps, i: number) =>
+    <BenefitItem key={String(i)} version={version} benefitsVersion={benefitsVersion} {...props} />;