@redneckz/wildless-cms-uni-blocks 0.14.69 → 0.14.71

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

@@ -40,45 +40,43 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       isImageSecondary = false,
     } = {},
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
-        defaultPadding="p-0"
-        {...rest}
-      >
-        <LinkWrapper href={href} target={target} className="h-full">
-          <BaseTile
-            className="h-full"
-            defaultPadding="p-2xl"
-            padding={padding}
-            insetTitle={
-              <Headline
-                title={title}
-                description={description}
-                headlineVersion="XS"
-                isEmbedded={true}
-                align={align}
-              />
-            }
-            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
-            buttons={
-              socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
-              ) : null
-            }
-            isImageAlwaysOnRight={isImageAlwaysOnRight}
-            isImageSecondary={isImageSecondary}
-            imageAlign="center"
-          >
-            <BenefitsList benefits={benefits} />
-            <List items={items} isDotted={isDotted} listItemSize="S" />
-            {renderAdditionalDescription(additionalDescription, align)}
-          </BaseTile>
-        </LinkWrapper>
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
+      <LinkWrapper href={href} target={target} className="h-full">
+        <BaseTile
+          className="h-full"
+          defaultPadding="p-2xl"
+          padding={padding}
+          insetTitle={
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align={align}
+            />
+          }
+          {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
+          buttons={
+            socialMedia.length ? (
+              <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
+            ) : null
+          }
+          isImageAlwaysOnRight={isImageAlwaysOnRight}
+          isImageSecondary={isImageSecondary}
+          imageAlign="center"
+        >
+          <BenefitsList benefits={benefits} />
+          <List items={items} isDotted={isDotted} listItemSize="S" />
+          {renderAdditionalDescription(additionalDescription, align)}
+        </BaseTile>
+      </LinkWrapper>
+    </BlockWrapper>
+  ),
 );
 
 const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>

package/mobile/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,11 +1,7 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DefaultListItemType } from '../../model/DefaultListItemType';
-import {
-  type DescriptionProps,
-  type HeadlineCommonProps,
-  type LabelProps,
-} from '../../model/HeadlineType';
+import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
 import { type RichTextItem } from '../../model/RichTextItem';
@@ -42,7 +38,8 @@ export type Step = DefaultStep | RichTextStep;
  * @title Блок шаги
  */
 export type StepsBlockContent = UniBlockContent &
-  HeadlineCommonProps &
+  TitleProps &
+  DescriptionProps &
   ButtonsSectionContent & {
     /** @title Линии */
     showLines?: boolean;

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

@@ -65,6 +65,8 @@ export const BaseTile = JSX<BaseTileProps>(
               'grid gap-3xl',
               rightImage ? '@xl:grid-cols-2' : '',
               leftImage ? '' : 'grow',
+              'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
+              'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
             )}
           >
             <div className="grow space-y-lg min-w-fit">
@@ -107,7 +109,7 @@ const renderImageContainer = (
   image ? (
     <div
       className={style(
-        'shrink-1/2 justify-self-center',
+        'shrink-1/2 justify-self-center mt-auto @xl:mt-0',
         imageAlign && imageAlignmentMap[imageAlign],
         className,
       )}

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

@@ -29,7 +29,7 @@ export const LIST_VERSION_STYLE: Record<
 };
 
 export const List = JSX<ListProps>(
-  ({ className, isDotted = true, items = [], listItemSize = 'M' }) => {
+  ({ className, isDotted = true, items = [], listItemSize = 'M', dotClassName = '' }) => {
     const versionStyle = LIST_VERSION_STYLE[listItemSize];
 
     return items?.length ? (
@@ -42,7 +42,11 @@ export const List = JSX<ListProps>(
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem key={String(i)} isDotted={isDotted} dotClassName={versionStyle.dotStyle}>
+          <ListItem
+            key={String(i)}
+            isDotted={isDotted}
+            dotClassName={style(dotClassName || 'bg-primary-text', versionStyle.dotStyle)}
+          >
             {item}
           </ListItem>
         ))}

package/mobile/src/ui-kit/List/ListContent.ts

@@ -20,4 +20,6 @@ export type ListProps = ListContent &
   BulletsProps & {
     /** @hidden */
     className?: string;
+    /** @hidden */
+    dotClassName?: string;
   };

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -17,7 +17,7 @@ export const ListItem = JSX<ListItemProps>(({ className, isDotted, dotClassName,
       <div className="shrink-0">
         <div
           className={style(
-            'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+            'align-middle inline-block rounded-full group-data-secondary:bg-white',
             dotClassName,
           )}
         />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.69",
+  "version": "0.14.71",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -56,7 +56,7 @@ const renderBenefit = (
         >
           {description}
         </Text>
-        <List className="text-secondary-text" listItemSize="S" items={items} isDotted={isDotted} />
+        <List dotClassName="bg-secondary-text" listItemSize="S" items={items} isDotted={isDotted} />
       </div>
     ) : null}
   </div>

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -40,45 +40,43 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
       isImageSecondary = false,
     } = {},
     ...rest
-  }) => {
-    return (
-      <BlockWrapper
-        className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
-        defaultPadding="p-0"
-        {...rest}
-      >
-        <LinkWrapper href={href} target={target} className="h-full">
-          <BaseTile
-            className="h-full"
-            defaultPadding="p-2xl"
-            padding={padding}
-            insetTitle={
-              <Headline
-                title={title}
-                description={description}
-                headlineVersion="XS"
-                isEmbedded={true}
-                align={align}
-              />
-            }
-            {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
-            buttons={
-              socialMedia.length ? (
-                <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
-              ) : null
-            }
-            isImageAlwaysOnRight={isImageAlwaysOnRight}
-            isImageSecondary={isImageSecondary}
-            imageAlign="center"
-          >
-            <BenefitsList benefits={benefits} />
-            <List items={items} isDotted={isDotted} listItemSize="S" />
-            {renderAdditionalDescription(additionalDescription, align)}
-          </BaseTile>
-        </LinkWrapper>
-      </BlockWrapper>
-    );
-  },
+  }) => (
+    <BlockWrapper
+      className={style('relative min-h-28 group-data-gray:bg-main-divider/50', className)}
+      defaultPadding="p-0"
+      {...rest}
+    >
+      <LinkWrapper href={href} target={target} className="h-full">
+        <BaseTile
+          className="h-full"
+          defaultPadding="p-2xl"
+          padding={padding}
+          insetTitle={
+            <Headline
+              title={title}
+              description={description}
+              headlineVersion="XS"
+              isEmbedded={true}
+              align={align}
+            />
+          }
+          {...leftOrRightImage(isIcon(icon) ? <Img image={icon} /> : null, directionRight)}
+          buttons={
+            socialMedia.length ? (
+              <SocialMedia media={socialMedia} showButtonText={true} version={rest?.version} />
+            ) : null
+          }
+          isImageAlwaysOnRight={isImageAlwaysOnRight}
+          isImageSecondary={isImageSecondary}
+          imageAlign="center"
+        >
+          <BenefitsList benefits={benefits} />
+          <List items={items} isDotted={isDotted} listItemSize="S" />
+          {renderAdditionalDescription(additionalDescription, align)}
+        </BaseTile>
+      </LinkWrapper>
+    </BlockWrapper>
+  ),
 );
 
 const renderAdditionalDescription = (additionalDescription?: string, align?: TextAlign) =>

package/src/components/StepsBlock/StepsBlock.tsx

@@ -21,7 +21,6 @@ const getPaddingX = (steps: number) => (steps < 5 ? 'px-24' : 'px-16');
 
 export const StepsBlock = JSX<StepsBlockProps>(
   ({
-    align = AlignStyles,
     buttons,
     className = '',
     description,
@@ -58,7 +57,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
           description={description}
           isEmbedded={true}
           className="w-full"
-          align={align}
+          align={AlignStyles}
         />
         {steps?.length ? (
           <div className="box-border space-y-lg">

package/src/components/StepsBlock/StepsBlockContent.ts

@@ -1,11 +1,7 @@
 import { type BlockVersion } from '../../model/BlockVersion';
 import { type BulletsProps } from '../../model/Bullets';
 import { type DefaultListItemType } from '../../model/DefaultListItemType';
-import {
-  type DescriptionProps,
-  type HeadlineCommonProps,
-  type LabelProps,
-} from '../../model/HeadlineType';
+import { type DescriptionProps, type LabelProps, type TitleProps } from '../../model/HeadlineType';
 import { type UniBlockContent } from '../../model/JSXBlock';
 import { type IconProps } from '../../model/Picture';
 import { type RichTextItem } from '../../model/RichTextItem';
@@ -42,7 +38,8 @@ export type Step = DefaultStep | RichTextStep;
  * @title Блок шаги
  */
 export type StepsBlockContent = UniBlockContent &
-  HeadlineCommonProps &
+  TitleProps &
+  DescriptionProps &
   ButtonsSectionContent & {
     /** @title Линии */
     showLines?: boolean;

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

@@ -65,6 +65,8 @@ export const BaseTile = JSX<BaseTileProps>(
               'grid gap-3xl',
               rightImage ? '@xl:grid-cols-2' : '',
               leftImage ? '' : 'grow',
+              'h-full', //? fix issue https://github.com/redneckz/temp_wcms/issues/1254
+              'auto-rows-[max-content_1fr]', //? fix issue https://github.com/redneckz/temp_wcms/issues/1324
             )}
           >
             <div className="grow space-y-lg min-w-fit">
@@ -107,7 +109,7 @@ const renderImageContainer = (
   image ? (
     <div
       className={style(
-        'shrink-1/2 justify-self-center',
+        'shrink-1/2 justify-self-center mt-auto @xl:mt-0',
         imageAlign && imageAlignmentMap[imageAlign],
         className,
       )}

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

@@ -29,7 +29,7 @@ export const LIST_VERSION_STYLE: Record<
 };
 
 export const List = JSX<ListProps>(
-  ({ className, isDotted = true, items = [], listItemSize = 'M' }) => {
+  ({ className, isDotted = true, items = [], listItemSize = 'M', dotClassName = '' }) => {
     const versionStyle = LIST_VERSION_STYLE[listItemSize];
 
     return items?.length ? (
@@ -42,7 +42,11 @@ export const List = JSX<ListProps>(
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem key={String(i)} isDotted={isDotted} dotClassName={versionStyle.dotStyle}>
+          <ListItem
+            key={String(i)}
+            isDotted={isDotted}
+            dotClassName={style(dotClassName || 'bg-primary-text', versionStyle.dotStyle)}
+          >
             {item}
           </ListItem>
         ))}

package/src/ui-kit/List/ListContent.ts

@@ -20,4 +20,6 @@ export type ListProps = ListContent &
   BulletsProps & {
     /** @hidden */
     className?: string;
+    /** @hidden */
+    dotClassName?: string;
   };

package/src/ui-kit/List/ListItem.tsx

@@ -17,7 +17,7 @@ export const ListItem = JSX<ListItemProps>(({ className, isDotted, dotClassName,
       <div className="shrink-0">
         <div
           className={style(
-            'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+            'align-middle inline-block rounded-full group-data-secondary:bg-white',
             dotClassName,
           )}
         />