@redneckz/wildless-cms-uni-blocks 0.3.29 → 0.3.32

package/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts

@@ -1,4 +1,5 @@
 import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 /** @title Кнопка под слайдом */
 interface ProductGalleryNav {
@@ -29,4 +30,5 @@ export interface ProductGalleryGreenContent {
   duration?: number;
   /** @title Слайды */
   slides?: ProductSlide[];
+  version?: BlockVersion;
 }

package/src/components/Recommendation/Recommendation.tsx

@@ -24,7 +24,7 @@ export const Recommendation = JSX<RecommendationProps>(
         className={`relative font-sans p-[50px] overflow-hidden ${blockClassName} ${className}`}
         id={anchor}
       >
-        {title ? <Heading headingType="h3" className="mb-8" title={title} /> : null}
+        {title ? <Heading headingType="h2" className="mb-8" title={title} /> : null}
         <div
           className="flex duration-1000 gap-4"
           style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}

package/src/components/Recommendation/RecommendationCard.tsx

@@ -25,7 +25,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           image={image?.src && <Img className="mt-auto ml-7" image={image} />}
         >
           {description ? <Description description={description} /> : null}
-          {items?.length ? <List items={items} version={version} /> : null}
+          {items?.length ? <List className="text-m-base" items={items} version={version} /> : null}
         </BaseTile>
       </section>
     );

package/src/components/StepsBlock/StepsBlock.fixture.tsx

@@ -14,10 +14,24 @@ const steps = [
     label: 'Получение наличных',
     description: 'Получите наличные в отделении банка',
   },
+  {
+    label: 'Последний шаг!',
+    description: 'Получите наличные в отделении банка',
+  },
 ];
 
 export default {
   default: (
+    <div className="container grid grid-cols-12">
+      <StepsBlock
+        className="col-span-12"
+        context={context}
+        title="Рассчитайте условия на онлайн-калькуляторе и оставьте заявку на потребительский кредит"
+        steps={steps.slice(0, 3)}
+      />
+    </div>
+  ),
+  '4 steps': (
     <div className="container grid grid-cols-12">
       <StepsBlock
         className="col-span-12"

package/src/components/StepsBlock/StepsBlock.mobile.tsx

@@ -16,6 +16,16 @@ type StyleType = {
   iconConnector: string;
 };
 
+const STEPS_SIZE_MAP: Record<SizeVersion, string> = {
+  normal: 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]',
+  small: 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]',
+};
+
+const STEPS_TILE_DESCRIPTION_HEIGHT_MAP: Record<SizeVersion, string> = {
+  normal: 'min-h-[70px]',
+  small: 'min-h-[50px]',
+};
+
 const STEPS_BLOCK_STYLE_MAPS: Record<BlockVersion, StyleType> = {
   primary: {
     background: 'bg-white',
@@ -88,7 +98,9 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
             <div className={`min-h-8 h-full w-[2px] ${style.iconConnector} ${margin}`} />
           )}
         </div>
-        <div className="flex flex-col justify-start relative">
+        <div
+          className={`flex flex-col justify-center h-fit ${STEPS_TILE_DESCRIPTION_HEIGHT_MAP[size]}`}
+        >
           {step.label && (
             <div className="font-medium text-m-title-xs m-0 text-left">{step.label}</div>
           )}
@@ -110,10 +122,7 @@ const renderStepTitle = (params: RenderStepTitleParams) => {
 const renderIconArea = (params: RenderStepTitleParams) => {
   const { step, size, i, version } = params;
   const style = styleMaps(version);
-  const iconAreaSize =
-    size === 'normal'
-      ? 'h-[70px] w-[70px] min-w-[70px] min-h-[70px]'
-      : 'h-[50px] w-[50px] min-w-[50px] min-h-[50px]';
+  const iconAreaSize = STEPS_SIZE_MAP[size];
 
   const iconSize = size === 'normal' ? '38' : '27';
   const iconTextSize = size === 'normal' ? 'text-m-title' : 'text-m-title-xs';

package/src/components/StepsBlock/StepsBlock.tsx

@@ -8,12 +8,17 @@ import type { Step, StepsBlockContent } from './StepsBlockContent';
 export interface StepsBlockProps extends StepsBlockContent, UniBlockProps {}
 
 export const StepsBlock = JSX<StepsBlockProps>(
-  ({ className, title, showLines = true, steps, anchor = null }) => {
+  ({ className = '', title, showLines = true, steps = [], anchor = null }) => {
+    const shortGaps = steps.length > 3;
+
     return (
       <section
-        className={`box-border font-sans text-primary-text bg-white px-20 py-[50px] flex flex-col items-center ${
-          className || ''
-        }`}
+        className={[
+          'box-border font-sans text-primary-text bg-white',
+          shortGaps ? 'px-20' : 'px-[70px]',
+          'py-[50px] flex flex-col items-center',
+          className,
+        ].join(' ')}
         id={anchor}
       >
         <Heading headingType="h2" className="max-w-[47rem] text-center" title={title} />
@@ -24,9 +29,11 @@ export const StepsBlock = JSX<StepsBlockProps>(
                 <div
                   className={`h-0.5 w-full bg-secondary-light ${!showLines ? 'opacity-0' : ''}`}
                 />,
-              )(steps.map((step, i) => renderStepIcon(step, i)))}
+              )(steps.map(renderStepIcon))}
+            </div>
+            <div className={`flex justify-between ${shortGaps ? 'gap-x-3' : 'gap-x-[101px]'}`}>
+              {steps.map(renderStepTitle)}
             </div>
-            <div className="flex justify-between gap-x-[101px]">{steps.map(renderStepTitle)}</div>
           </div>
         ) : null}
       </section>

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,4 +1,4 @@
-import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { IconName } from '../../icons/IconName';
 import type { SizeVersion } from '../../model/SizeVersion';
 import type { BlockVersion } from '../../model/BlockVersion';
 
@@ -26,9 +26,10 @@ export interface StepsBlockContent {
   /**
    * @title Шаги
    * @minItems 2
-   * @maxItems 3
+   * @maxItems 4
    */
   steps?: Step[];
+  /** @title Размер шагов (моб.) */
   size?: SizeVersion; // TODO: mobile content
   version?: BlockVersion; // TODO: mobile content
 }

package/src/components/TextBlock/TextBlockContent.ts

@@ -23,7 +23,7 @@ export interface TextBlockContent {
   iconVersion?: TextBlockIconVersion;
   image?: Picture;
   blockVersion?: TextBlockVersion;
-  /** @title Маркеры списка (моб.) */ // TODO: mobile prop
+  /** @title Буллиты */ // TODO: mobile prop
   isDotted?: boolean;
   /** @title Список (моб.) */ // TODO: mobile prop
   items?: string[];

package/src/ui-kit/BlocksList/EmbeddableBlocks.mobile.tsx

@@ -0,0 +1,15 @@
+import { Headline } from '../../components/Headline/Headline';
+import { LinkDocs } from '../../components/LinkDocs/LinkDocs';
+import { ProductBlock } from '../../components/ProductBlock/ProductBlock';
+import { TextBlock } from '../../components/TextBlock/TextBlock';
+import { Gallery } from '../../components/Gallery/Gallery';
+import { LinkList } from '../../components/LinkList/LinkList';
+
+export const EmbeddableBlocks = {
+  Headline,
+  LinkDocs,
+  TextBlock,
+  ProductBlock,
+  Gallery,
+  LinkList,
+};

package/src/ui-kit/BlocksList/renderBlocksList.tsx

@@ -2,27 +2,19 @@ import type { JSXBlock } from '../../components/ContentPage/ContentPage';
 import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
 import type { BlockDef, ColumnsCount } from './BlocksListProps';
 import { EmbeddableBlocks } from './EmbeddableBlocks';
-import { BlockVersion } from '../../model/BlockVersion';
 
 type EmbeddableBlocksProps = {
   blocks?: BlockDef[];
   context: ContentPageContext;
   columns?: ColumnsCount;
   className?: string;
-  version?: BlockVersion;
 };
 
-export const renderBlocksList = ({
-  blocks,
-  context,
-  className,
-  columns,
-  version,
-}: EmbeddableBlocksProps) =>
-  blocks?.length ? blocks.map(renderBlock({ context, className, columns, version })) : null;
+export const renderBlocksList = ({ blocks, context, className, columns }: EmbeddableBlocksProps) =>
+  blocks?.length ? blocks.map(renderBlock({ context, className, columns })) : null;
 
 export const renderBlock =
-  ({ context, columns, className, version }: EmbeddableBlocksProps) =>
+  ({ context, columns, className }: EmbeddableBlocksProps) =>
   (block: BlockDef, i: number) => {
     const type = block?.blockListType;
     if (!type || !(type in EmbeddableBlocks)) {
@@ -32,7 +24,7 @@ export const renderBlock =
     const EmbeddedBlock: JSXBlock = EmbeddableBlocks[type];
     return (
       <div className={`${className} ${columnsCountClass}`} key={`block_${i}`}>
-        <EmbeddedBlock context={context} {...block} blockVersion={version} className="!p-0" />
+        <EmbeddedBlock context={context} {...block} className="!p-0" />
       </div>
     );
   };

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

@@ -13,8 +13,8 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
       {appendLeft ? appendLeft : null}
       {isWithText(props) ? (
         <div>
-          <div className="text-m-2xs text-left">{aboveText}</div>
-          <div className="text-m-button font-medium text-left">{text}</div>
+          <div className="text-m-2xs font-light text-left">{aboveText}</div>
+          <div className="text-m-button text-left">{text}</div>
         </div>
       ) : null}
     </div>

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

@@ -22,8 +22,6 @@ export const Heading = JSX<HeadingProps>((props) => {
   const Tag = headingType;
 
   return (
-    <Tag className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>
-      {title}
-    </Tag>
+    <Tag className={`font-sans m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}>{title}</Tag>
   );
 });

package/src/ui-kit/SwipeListControl/SwipeListControl.fixture.mobile.tsx

@@ -1,16 +1,34 @@
 import { SwipeListControl } from './SwipeListControl';
 import { mobileContext } from '../../setup-fixture';
 
-const children = new Array(4).fill(0).map((_, i) => (
-  <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
-    {`Element #${i}`}
-  </div>
-));
+const generateChildren = (count: number) =>
+  new Array(count).fill(0).map((_, i) => (
+    <div key={String(i)} className="border border-main-stroke rounded-md text-center h-12">
+      {`Element #${i}`}
+    </div>
+  ));
 
 export default {
   default: (
     <div className="px-4 py-5 bg-white">
-      <SwipeListControl context={mobileContext}>{children}</SwipeListControl>
+      <SwipeListControl context={mobileContext}>{generateChildren(5)}</SwipeListControl>
+    </div>
+  ),
+  'w/o dots': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext} showDots={false}>
+        {generateChildren(5)}
+      </SwipeListControl>
+    </div>
+  ),
+  '1 element': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext}>{generateChildren(1)}</SwipeListControl>
+    </div>
+  ),
+  '2 elements': (
+    <div className="px-4 py-5 bg-white">
+      <SwipeListControl context={mobileContext}>{generateChildren(2)}</SwipeListControl>
     </div>
   ),
 };

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

@@ -22,7 +22,7 @@ export const SwipeListControlDots = JSX<SwipeListControlDotsProps>(
       const contentContainer = (e.currentTarget as HTMLElement).parentElement
         ?.previousElementSibling;
 
-      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth' });
+      contentContainer?.children[idx]?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
     };
 
     return showDots && children?.length ? (

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.spec.ts

@@ -17,8 +17,26 @@ const scrollPoints: [number, number][] = [
   [1414, 1914],
 ];
 
+const twoItemsScrollPointsProps = {
+  gap: 14,
+  padding: 16,
+  clientWidth: 414,
+  scrollWidth: 794,
+  childElementCount: 2,
+  itemWidth: 380,
+};
+
+const twoItemsScrollPoints: [number, number][] = [
+  [0, 380],
+  [380, 794],
+];
+
 describe('getScrollPoints', () => {
   it('should return array containing scroll breakpoints delimiting each child', () => {
     expect(getScrollPoints(props)).toEqual(scrollPoints);
   });
+
+  it('should correctly handle case with 2 items in container', () => {
+    expect(getScrollPoints(twoItemsScrollPointsProps)).toEqual(twoItemsScrollPoints);
+  });
 });

package/src/ui-kit/SwipeListControl/utils/getScrollPoints.ts

@@ -16,9 +16,17 @@ export const getScrollPoints = ({
   scrollWidth: number;
   childElementCount: number;
   itemWidth: number;
-}) => {
-  const scrollItemWidth = itemWidth + gap;
+}): [number, number][] => {
   const scrollableDistance = scrollWidth - clientWidth;
+
+  if (childElementCount === 2) {
+    return [
+      [0, scrollableDistance],
+      [scrollableDistance, scrollWidth],
+    ];
+  }
+
+  const scrollItemWidth = itemWidth + gap;
   const edgeScrollDistance = clientWidth - gap - padding;
 
   const lastScrollableIdx = childElementCount - 2;

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

@@ -19,7 +19,7 @@ const renderTab =
     return (
       <div
         key={String(index)}
-        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 ${
+        className={`flex h-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${
           isActive ? ACTIVE_TAB_STYLE : TAB_STYLE
         }`}
         role="tab"