@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/src/components/CarouselLinks/CarouselLinks.fixture.mobile.tsx

@@ -0,0 +1,34 @@
+import '../../setup-fixture';
+
+import { CarouselLinks } from './CarouselLinks';
+
+const link = {
+  text: 'Аудиторские заключения',
+  href: '#',
+};
+const links = Array(9).fill(link);
+
+const description = `Акционерное общество «Российский Сельскохозяйственный банк»* —
+  один из крупнейших банков в России. Был основан в 2000 году в целях развития
+  национальной кредитно-финансовой системы агропромышленного сектора и
+  сельских территорий Российской Федерации.`;
+
+const additionalDescription = `Сегодня это универсальный коммерческий банк,
+  предоставляющий все виды банковских услуг и занимающий лидирующие позиции
+  в финансировании агропромышленного комплекса России.`;
+
+const MAX_LINKS_COUNT_MOBILE = 3;
+
+export default {
+  default: (
+    <CarouselLinks
+      links={links}
+      title="О Банке"
+      description={description}
+      additionalDescription={additionalDescription}
+      maxLinksCount={MAX_LINKS_COUNT_MOBILE}
+      version="secondary"
+      block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
+    />
+  ),
+};

package/src/components/CarouselLinks/CarouselLinks.fixture.tsx

@@ -17,6 +17,8 @@ const additionalDescription = `Сегодня это универсальный
   предоставляющий все виды банковских услуг и занимающий лидирующие позиции
   в финансировании агропромышленного комплекса России.`;
 
+const MAX_LINKS_COUNT = 10;
+
 export default {
   default: (
     <CarouselLinks
@@ -24,6 +26,7 @@ export default {
       title="О Банке"
       description={description}
       additionalDescription={additionalDescription}
+      maxLinksCount={MAX_LINKS_COUNT}
       version="secondary"
       block={{ type: 'Carousel', blocks: new Array(3).fill(link).flat() }}
     />

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -3,22 +3,30 @@ import type { UniBlockProps } from '../../model/JSXBlock';
 import type { LinkProps } from '../../model/LinkProps';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
-import { style } from '../../utils/style';
 import { Carousel } from '../Carousel/Carousel';
 import { Headline } from '../Headline/Headline';
 import type { CarouselLinksContent } from './CarouselLinksContent';
+import { style } from '../../utils/style';
 
-export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
-
-const MAX_LINKS_COUNT = 10;
+export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {
+  maxLinksCount?: number;
+}
 
 export const CarouselLinks = JSX<CarouselLinksProps>(
-  ({ className, additionalDescription, description, links, title, ...rest }) => (
+  ({
+    className,
+    additionalDescription,
+    description,
+    links,
+    title,
+    maxLinksCount = 10,
+    ...rest
+  }) => (
     <BlockWrapper
-      className={style('flex w-full overflow-hidden justify-between', className)}
+      className={style('flex flex-col sm:flex-row w-full overflow-hidden', className)}
       {...rest}
     >
-      <div className="flex flex-col max-w-96 pr-xl text-white text-xl font-light">
+      <div className="mr-xl flex-auto">
         <Headline
           isPadding={false}
           title={title}
@@ -35,20 +43,18 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
           />
         ) : null}
       </div>
-      {links?.length ? renderLinks(links) : null}
+      {links?.length ? renderLinks(links, maxLinksCount) : null}
     </BlockWrapper>
   ),
 );
 
-const renderLinks = (links: LinkProps[]) => {
-  const itemCount = Math.ceil(links.length / MAX_LINKS_COUNT);
+const renderLinks = (links: LinkProps[], maxLinksCount: number) => {
+  const itemCount = Math.ceil(links.length / maxLinksCount);
 
   return (
     <Carousel
-      className="min-w-[832px] w-[832px]"
-      version=""
-      isBlur={false}
-      isCyclic={true}
+      className="sm:w-2/3 w-full p-0 sm:p-2xl"
+      version="secondary"
       itemCount={itemCount}
       arrowsPadded={false}
       showDots={true}
@@ -56,12 +62,12 @@ const renderLinks = (links: LinkProps[]) => {
       {new Array(itemCount).fill(null).map((_, groupIndex) => (
         <div
           key={String(groupIndex)}
-          className="w-[672px] min-w-[672px] ml-10 mr-10 flex flex-wrap self-start"
+          className={style('flex flex-wrap self-start sm:w-[672px] w-full sm:mx-5xl')}
         >
           {links
-            .slice(groupIndex * MAX_LINKS_COUNT, (groupIndex + 1) * MAX_LINKS_COUNT)
+            .slice(groupIndex * maxLinksCount, (groupIndex + 1) * maxLinksCount)
             .map((link, index) => (
-              <LinkButton key={String(index)} className="m-1" {...link} />
+              <LinkButton key={String(index)} className="sm:m-2xs" {...link} />
             ))}
         </div>
       ))}

package/src/components/CarouselLinks/CarouselLinksContent.ts

@@ -8,4 +8,6 @@ export type CarouselLinksContent = UniBlockContent &
   AdditionalDescriptionProps & {
     /** @title Ссылки */
     links?: LinkProps[];
+    /** @title Отступы вложенных компонентов */
+    isInnerPadding?: boolean;
   };

package/src/components/CarouselProductCard/CarouselProductCard.fixture.tsx

@@ -56,9 +56,10 @@ export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
   isButtonFullWidth: false,
 };
 
-const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;
+const CAROUSEL_PRODUCT_CARD = <CarouselProductCard className="col-span-4" {...PRODUCT_CARD} />;
 const CAROUSEL_PRODUCT_CARD_SECONDARY = (
   <CarouselProductCard
+    className="col-span-4"
     {...PRODUCT_CARD}
     version="secondary"
     isDotted={true}
@@ -66,7 +67,9 @@ const CAROUSEL_PRODUCT_CARD_SECONDARY = (
     isButtonFullWidth={false}
   />
 );
-const CAROUSEL_PRODUCT_CARD_SMALL = <CarouselProductCard {...PRODUCT_CARD_SMALL} />;
+const CAROUSEL_PRODUCT_CARD_SMALL = (
+  <CarouselProductCard className="col-span-4" {...PRODUCT_CARD_SMALL} />
+);
 
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -1,18 +1,18 @@
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
+import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
+import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { Img } from '../../ui-kit/Img/Img';
-import { JSX } from '@redneckz/uni-jsx';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import type { Picture } from '../../model/Picture';
 import { Text } from '../../ui-kit/Text/Text';
-import type { UniBlockProps } from '../../model/JSXBlock';
-import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
 import { style } from '../../utils/style';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import { alignTextStyle } from './alignTextStyle';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
@@ -39,12 +39,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style(
-          'h-full flex flex-col justify-between min-w-[260px]',
-          'box-border border-solid border border-gray',
-          align,
-          className,
-        )}
+        className={style('flex flex-col justify-between', align, className)}
         defaultPadding="p-0"
         version={version}
         {...rest}

package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx

@@ -7,34 +7,27 @@ import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
-import { style } from '../../utils/style';
 import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 import { cardDescriptionColor, cardTitleFont } from './programCardStyles';
 
 export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, UniBlockProps {}
 
 export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
-  ({ className = '', title, icon, list = [], href, target, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={style('border border-gray', className)}
-        defaultPadding="p-3xl sm:p-0"
-        {...rest}
-      >
-        <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
-          <div className="min-w-[200px] flex justify-center">
-            {icon?.src || icon?.icon ? <Img image={icon} /> : null}
-          </div>
-          <div className="sm:px-s p-5xl">
-            {title ? <Heading className="mb-xs sm:mb-m" headingType="h6" title={title} /> : null}
-            {list.length ? (
-              <div className="flex flex-col gap-xs sm:gap-s">{list?.map(renderList)}</div>
-            ) : null}
-          </div>
-        </LinkWrapper>
-      </BlockWrapper>
-    );
-  },
+  ({ className, title, icon, list = [], href, target, ...rest }) => (
+    <BlockWrapper className={className} defaultPadding="p-3xl sm:p-0" {...rest}>
+      <LinkWrapper className="sm:flex sm:items-center" href={href} target={target}>
+        <div className="flex justify-center px-xl">
+          {icon?.src || icon?.icon ? <Img image={icon} /> : null}
+        </div>
+        <div className="sm:px-s p-5xl">
+          {title ? <Heading className="mb-xs sm:mb-m" headingType="h6" title={title} /> : null}
+          {list.length ? (
+            <div className="flex flex-col gap-xs sm:gap-s">{list?.map(renderList)}</div>
+          ) : null}
+        </div>
+      </LinkWrapper>
+    </BlockWrapper>
+  ),
 );
 
 const renderList = (_: HeadlineCommonProps, i: number) => (

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.mobile.tsx

@@ -8,7 +8,6 @@ import { List } from '../../ui-kit/List/List';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
-import { BORDER_STYLE } from './cardStyle';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
@@ -28,11 +27,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   }) => {
     return (
       <BlockWrapper
-        className={style(
-          'relative box-border group-data-gray:bg-main-divider/50',
-          BORDER_STYLE,
-          className,
-        )}
+        className={style('relative group-data-gray:bg-main-divider/50', className)}
         defaultPadding="p-6xl"
         {...rest}
       >

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import type { Picture } from '../../model/Picture';
+import { BaseTile } from '../../ui-kit/BaseTile/BaseTile';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
@@ -8,14 +8,14 @@ import { List } from '../../ui-kit/List/List';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
 import { Headline } from '../Headline/Headline';
-import { BORDER_STYLE } from './cardStyle';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
   ({
-    className = '',
+    className,
+    padding,
     description,
     href,
     icon,
@@ -24,43 +24,37 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     target,
     title,
     align = 'text-left',
-    version = 'primary',
     ...rest
   }) => {
     return (
       <BlockWrapper
-        className={style(
-          'relative min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
-          BORDER_STYLE,
-          className,
-        )}
-        defaultPadding="p-m"
-        version={version}
+        className={style('relative min-h-[218px] group-data-gray:bg-main-divider/50', className)}
+        defaultPadding="p-0"
         {...rest}
       >
-        <LinkWrapper href={href} target={target}>
-          <Headline
-            className="mb-4"
-            title={title}
-            description={description}
-            headlineVersion="S"
-            isPadding={false}
-            align={align}
-          />
-          <div className="w-1/2 h-full flex flex-col flex-1 justify-end">
+        <LinkWrapper href={href} target={target} className="h-full">
+          <BaseTile
+            className="h-full"
+            defaultPadding="p-m"
+            padding={padding}
+            title={
+              title ? (
+                <Headline
+                  title={title}
+                  description={description}
+                  headlineVersion="S"
+                  isPadding={false}
+                  align={align}
+                />
+              ) : null
+            }
+            backImage={icon?.icon || icon?.src ? <Img image={icon} /> : null}
+            buttons={socialMedia.length ? <SocialMedia media={socialMedia} /> : null}
+          >
             {items.length ? <List items={items} listItemSize="S" /> : null}
-            {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
-          </div>
-          {renderIconBlock(icon)}
+          </BaseTile>
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
-
-const renderIconBlock = (icon: Picture | undefined) => (
-  <div className="absolute bottom-0 right-0">
-    {icon?.icon ? <Img image={icon} /> : null}
-    {icon?.src ? <Img image={icon} /> : null}
-  </div>
-);

package/src/components/CarouselRichTextCard/CarouselRichTextCard.fixture.tsx

@@ -20,7 +20,7 @@ export const RICH_CARD: CarouselRichTextCardContent = {
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <CarouselRichTextCard {...RICH_CARD} />
+      <CarouselRichTextCard className="col-span-4" {...RICH_CARD} />
     </div>
   ),
 };

package/src/components/CarouselRichTextCard/CarouselRichTextCard.tsx

@@ -2,14 +2,13 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { RichText } from '../../ui-kit/RichText/RichText';
-import { style } from '../../utils/style';
 import type { CarouselRichTextCardContent } from './CarouselRichTextCardContent';
 
 export interface CarouselRichTextCardProps extends CarouselRichTextCardContent, UniBlockProps {}
 
 export const CarouselRichTextCard = JSX<CarouselRichTextCardProps>(
   ({ className = '', __html, richVersion = 'striped', ...rest }) => (
-    <BlockWrapper className={style('border border-gray h-full min-w-96', className)} {...rest}>
+    <BlockWrapper className={className} {...rest}>
       <RichText __html={__html} richVersion={richVersion} />
     </BlockWrapper>
   ),

package/src/components/CarouselTariffsCard/CarouselTariffsCard.tsx

@@ -37,7 +37,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 
     return (
       <BlockWrapper
-        className={style('relative border border-gray flex flex-col', className)}
+        className={style('relative flex flex-col', className)}
         defaultPadding={getPaddingStyle(isHighlighting)}
         {...rest}
       >
@@ -46,7 +46,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
         {title ? (
           <Heading className={style('pt-xs', align)} headingType="h5" title={title} />
         ) : null}
-        {button ? <Button className="w-full mt-4" {...button} /> : null}
+        {button ? <Button className="w-full mt-m" {...button} /> : null}
         {cardCells.length ? (
           <Foldable
             renderFoldableSection={({ isUnfolded }) => (
@@ -64,7 +64,7 @@ export const CarouselTariffsCard = JSX<CarouselTariffsCardProps>(
 );
 
 const renderIconBlock = (icon?: Picture) => (
-  <div className="w-[267px] min-w-[267px] self-center">
+  <div className="basis-full self-center">
     {icon?.src || icon?.icon ? <Img image={icon} /> : null}
   </div>
 );

package/src/components/ComparisonTable/ComparisonTable.mobile.tsx

@@ -13,12 +13,12 @@ export const ComparisonTable = JSX<ComparisonTableProps>((props) => {
 
   return (
     <section
-      className={`bg-white font-sans px-4 py-6 overflow-hidden text-primary-text relative ${
+      className={`bg-white font-sans p-6xl overflow-hidden text-primary-text relative space-y-lg ${
         className || ''
       }`}
     >
       {title ? (
-        <Heading headingType="h3" className="font-medium text-center m-0 mb-5" title={title} />
+        <Heading headingType="h3" className="font-medium text-center" title={title} />
       ) : null}
       <div role="table">
         <TableInner {...props} />

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -57,7 +57,7 @@ const renderShowMoreToggleButton = ({
   isShowAllRow: boolean;
   onClick: () => void;
 }) => (
-  <div className="pr-12">
+  <div className="pr-6xl">
     <div className="flex w-full">
       <div className={FIRST_CELL_CLASSES} />
       <button

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -48,7 +48,7 @@ export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
           ) : null}
         </div>
         {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+          <div className="absolute top-0 right-0 bottom-0 w-20 bg-opacity-to-white" />
         ) : null}
       </div>
     );

package/src/components/ComparisonTable/ComparisonTableRows.tsx

@@ -31,7 +31,7 @@ export const ComparisonTableRows = JSX<ComparisonTableRowsProps>(
         {isScrollAvailable
           ? renderArrows({
               ...controls,
-              btnClass: ['top-[108px]', 'top-[44px]'],
+              btnClass: ['top-28', 'top-12'],
               className: 'right-7',
               isDisabled: true,
             })

package/src/components/ComparisonTable/HeaderCell.tsx

@@ -16,18 +16,13 @@ export interface HeaderCellProps {
 
 export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) => (
   <div
-    className={`w-80 box-border flex flex-col items-center rounded-t-md border-b-0 px-7 pt-7 pb-[46px] ${BORDER_CLASSES} ${GRADIENT}`}
+    className={`w-80 box-border flex flex-col gap-m items-center rounded-t-md border-b-0 p-2xl ${BORDER_CLASSES} ${GRADIENT}`}
     role="columnheader"
   >
     {icon && !image?.src && (
-      <Img
-        className="h-[63px] w-[63px] min-w-[63px] min-h-[63px] mb-4"
-        image={icon}
-        width="63"
-        height="63"
-      />
+      <Img className="h-16 w-16 min-w-16 min-h-16" image={icon} width="64" height="64" />
     )}
-    {image?.src && <Img className="mb-[18px]" image={image} />}
+    {image?.src && <Img image={image} />}
     {title ? (
       <Heading headingType="h4" as="h3" className="text-center text-white" title={title} />
     ) : null}
@@ -36,9 +31,9 @@ export const HeaderCell = JSX<HeaderCellProps>(({ icon, image, title, link }) =>
         <Button
           href={link.href}
           target={link.target}
-          className="mt-4 w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
+          className="w-full text-primary-main bg-white hover:bg-secondary-hover active:bg-secondary-active"
         >
-          <div className="text-xs font-light font-medium py-[11px]">{link.text}</div>
+          <div className="text-xs font-light font-medium py-s">{link.text}</div>
         </Button>
       </div>
     )}

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -42,11 +42,11 @@ const renderBlocksColumn = ({ column, index }: RenderContactsColumnProps) =>
       {column.map(({ title = '', description, additionalDescription, button }, key) => (
         <div className="mt-xl first:mt-0" key={String(key)}>
           <Headline
-            className="!p-0"
             title={title}
             description={description}
             headlineVersion="XS"
             align="text-left"
+            isPadding={false}
           />
           {additionalDescription ? (
             <div className="mt-xs opacity-80">