@redneckz/wildless-cms-uni-blocks 0.9.8 → 0.9.10

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

@@ -2,22 +2,18 @@ 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 { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
 import { List } from '../../ui-kit/List/List';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
 import { style } from '../../utils/style';
 import { SocialMedia } from '../Footer/SocialMedia';
+import { Headline } from '../Headline/Headline';
 import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
 
 const BORDER_STYLE =
   'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
 
-const setAdditionalIconStyles = (items: string[]) =>
-  items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
-
 export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
 
 export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
@@ -30,13 +26,14 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     socialMedia = [],
     target,
     title,
+    align = 'text-left',
     version = 'primary',
     ...rest
   }) => {
     return (
       <BlockWrapper
         className={style(
-          'relative p-12 min-w-[524px] h-full box-border group-data-gray:bg-main-divider/50',
+          'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}
@@ -44,42 +41,29 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
         {...rest}
       >
         <LinkWrapper href={href} target={target}>
-          {title ? (
-            <Heading headingType="h3" as="h3" className="text-center mb-8" title={title} />
-          ) : null}
-          <div className="mb-5">
-            {description ? (
-              <Paragraph
-                size="text-xl"
-                font="font-light"
-                color="group-data-gray:text-secondary-text"
-              >
-                {description}
-              </Paragraph>
+          <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">
+            {items.length ? (
+              <List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
             ) : null}
+            {socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
           </div>
-          <div className="flex">
-            <div
-              className={style(
-                'flex flex-col w-1/2',
-                items?.length ? 'justify-between' : 'justify-end',
-              )}
-            >
-              {items.length ? (
-                <List className="text-xl-light flex flex-col gap-2 mt-14" items={items} />
-              ) : null}
-              {socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
-            </div>
-            {renderIconBlock(icon, items)}
-          </div>
+          {renderIconBlock(icon)}
         </LinkWrapper>
       </BlockWrapper>
     );
   },
 );
 
-const renderIconBlock = (icon: Picture | undefined, items: string[]) => (
-  <div className={style('flex', setAdditionalIconStyles(items))}>
+const renderIconBlock = (icon: Picture | undefined) => (
+  <div className="absolute bottom-0 right-0">
     {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
     {icon?.src ? <Img image={icon} /> : null}
   </div>

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -5,6 +5,7 @@ import type { LinkCommonProps } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { ListContent } from '../../ui-kit/List/ListContent';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 export type RecommendationSocialMedia = LinkCommonProps &
   IconProps &
@@ -23,4 +24,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
   LinkCommonProps & {
     /** @title Соц сети */
     socialMedia?: RecommendationSocialMedia[];
+    align?: TextAlign;
   };

package/mobile/src/components/ErrorBlock/ErrorBlock.example.json

@@ -13,7 +13,9 @@
         "sources": [
           {
             "media": 1279,
-            "width": 276,
+            "size": {
+              "width": 276
+            },
             "format": "webp",
             "alignment": "center"
           }

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

@@ -62,17 +62,15 @@ const buttonStylesWithText = (text: string, buttonSize: string) =>
     : `group/media flex items-center justify-center box-border ${buttonSizeStyles[buttonSize]}`;
 
 export const MediaButton = JSX<MediaButtonProps>(
-  ({ iconVersion = 'color', buttonSize = 'default', rounded = false, icon, ...rest }) => {
-    const { href, version, text, appendLeft, appendRight, aboveText } = rest;
+  ({ buttonSize = 'default', rounded = false, icon, ...rest }) => {
+    const { href, version, text = '' } = rest;
 
     const { iconMapped, label } =
       ICONS_MAP.find(({ origins }) => origins.some((_) => href?.includes(_))) || {};
 
-    const iconCustom = icon ?? iconMapped;
+    const iconCustom = getFilteredIcon(icon) ?? iconMapped;
 
-    const iconWithVersion = iconCustom
-      ? { ...getIconWithVersion(iconCustom), iconVersion }
-      : undefined;
+    const iconWithVersion = iconCustom ? getIconWithVersion(iconCustom) : undefined;
 
     return (
       <Button
@@ -83,11 +81,8 @@ export const MediaButton = JSX<MediaButtonProps>(
           'hover:bg-primary-main hover:text-black',
           'group-data-secondary:bg-white border-main-divider group-data-secondary:hover:bg-secondary-hover',
           'group-data-gray:border-green',
-          buttonStylesWithText(text as string, buttonSize),
+          buttonStylesWithText(text, buttonSize),
         )}
-        aboveText={aboveText}
-        appendLeft={appendLeft}
-        appendRight={appendRight}
         aria-label={label}
         rel="noopener noreferrer"
         target="_blank"
@@ -108,3 +103,5 @@ export const MediaButton = JSX<MediaButtonProps>(
     );
   },
 );
+
+const getFilteredIcon = (icon: Picture | undefined) => (icon?.src || icon?.icon ? icon : undefined);

package/mobile/src/components/MobileAppTile/MobileAppTile.example.json

@@ -10,7 +10,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 360,
+          "size": {
+            "width": 360
+          },
           "format": "webp",
           "alignment": "center"
         }

package/mobile/src/components/PictureText/PictureText.example.json

@@ -11,7 +11,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 240,
+          "size": {
+            "width": 240
+          },
           "format": "webp",
           "alignment": "center"
         }

package/mobile/src/components/ProductBlock/ProductBlock.example.json

@@ -16,7 +16,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 164,
+          "size": {
+            "width": 164
+          },
           "format": "webp",
           "alignment": "northeast"
         }

package/mobile/src/components/ProductTile/ProductTile.example.json

@@ -11,7 +11,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 145,
+          "size": {
+            "width": 145
+          },
           "format": "webp",
           "alignment": "southeast"
         }

package/mobile/src/components/StepsBlock/StepsBlock.example.json

@@ -63,11 +63,13 @@
         }
       }
     ],
-    "button": {
-      "text": "Кнопка",
-      "target": "_blank",
-      "version": "primary"
-    },
+    "buttons": [
+      {
+        "text": "Кнопка",
+        "target": "_blank",
+        "version": "primary"
+      }
+    ],
     "isDotted": true
   }
 }

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

@@ -1,5 +1,15 @@
 {
   "content": {
+    "buttons": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "iconRight": {
+          "ui:field": "icon"
+        }
+      }
+    },
     "steps": {
       "items": {
         "icon": {

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

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { BulletsProps } from '../../model/Bullets';
 import type { ButtonCommonIconProps } from '../../model/Button';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { DefaultListItemType } from '../../model/DefaultListItemType';
 import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
@@ -33,8 +34,7 @@ export type Step = DefaultStep | RichTextStep;
  * @title Блок шаги
  */
 export type StepsBlockContent = UniBlockContent &
-  HeadlineCommonProps &
-  ButtonCommonIconProps & {
+  HeadlineCommonProps & {
     /** @title Линии */
     showLines?: boolean;
     /**
@@ -43,7 +43,15 @@ export type StepsBlockContent = UniBlockContent &
      * @maxItems 5
      */
     steps?: Step[];
+    /**
+     * @title Тема шагов
+     */
     stepVersion?: BlockVersion;
     /** @title Размер шагов */
     size?: SizeVersion; // TODO: mobile content
+    /**
+     * @title Кнопки
+     * @maxItems 2
+     */
+    buttons?: ButtonWithIconProps[];
   };

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

@@ -7,8 +7,9 @@ export type StyleType = {
 };
 
 export const STEPS_BLOCK_STYLE: StyleType = {
-  description: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
-  iconText: 'text-white group-data-primary:text-secondary-text',
+  description:
+    'text-white/80 text-l-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
+  iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
   iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
   iconConnector: 'bg-white group-data-primary:bg-secondary-light',
   dot: 'bg-white/80 group-data-primary:bg-secondary-text',

package/mobile/src/components/Tile/Tile.example.json

@@ -11,7 +11,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 276,
+          "size": {
+            "width": 276
+          },
           "format": "webp",
           "alignment": "southeast"
         }

package/mobile/src/components/VerticalLayout/VerticalLayoutContent.ts

@@ -1,5 +1,4 @@
 import type { AlignTypeWithStretch } from '../../model/AlignType';
-import type { ColorPalette } from '../../model/ContentPageDef';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
 
@@ -7,7 +6,6 @@ import type { GapVersion } from '../HorizontalLayout/HorizontalLayoutContent';
  * @title Вертикальный компоновщик
  */
 export type VerticalLayoutContent = UniBlockContent & {
-  colorPalette?: ColorPalette;
   align?: AlignTypeWithStretch;
   gap?: GapVersion;
   /** @title Внутренний отступ компоновщика */

package/package.json

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

package/src/components/ApplicationForm/ApplicationFormCredit.tsx

@@ -87,7 +87,7 @@ export const ApplicationFormCredit = JSX<ApplicationFormsProps>((props) => {
       {renderCreditParameters({ amount, term, handleChange })}
       <Heading headingType="h6" title="Данные организации" className="text-center mb-4" />
       {renderDataOrganization({ fullName, inn, name, phone, mail, annualRevenue, handleChange })}
-      <Heading headingType="h6" title="Офис банка" className="text-center mb-4" />
+      <Heading headingType="h6" title="Офис Банка" className="text-center mb-4" />
       {renderBankOffices({
         regions,
         region: selectedRegion,

package/src/components/Blocks.ts

@@ -42,7 +42,6 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
 import { PromoTile } from './PromoTile/PromoTile';
-import { Recommendation } from './Recommendation/Recommendation';
 import { RichTextBlock } from './RichTextBlock/RichTextBlock';
 import { RollupItem } from './RollupItem/RollupItem';
 import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
@@ -99,7 +98,6 @@ export const Blocks: BlocksRegistry = {
   ProductGallery,
   ProductTile,
   PromoTile,
-  Recommendation,
   RichTextBlock,
   RollupItem,
   SafeDepositRental,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -6,9 +6,15 @@ import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture'
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
-import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
+import {
+  PRODUCT_CARD,
+  PRODUCT_CARD_SMALL,
+} from '../CarouselProductCard/CarouselProductCard.fixture';
 import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
-import { CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
+import {
+  CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
+  CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
+} from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
 import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
 import { Carousel } from './Carousel';
 
@@ -115,10 +121,20 @@ export default {
         isBlur={true}
         block={{
           type: 'Carousel',
-          blocks: new Array(6).fill({
-            type: 'CarouselProductCard',
-            content: PRODUCT_CARD,
-          }),
+          blocks: [
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD,
+            },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
+            {
+              type: 'CarouselProductCard',
+              content: PRODUCT_CARD_SMALL,
+            },
+          ],
         }}
         options={options}
       />
@@ -165,7 +181,7 @@ export default {
         className="col-span-12"
         isBlur={false}
         isCyclic={false}
-        visibleItemCount={2}
+        visibleItemCount={0}
         block={{
           type: 'Carousel',
           blocks: new Array(6).fill({
@@ -178,6 +194,26 @@ export default {
       />
     </div>
   ),
+  recommendationsSecondary: (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={false}
+        visibleItemCount={0}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselRecommendationCard',
+            content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
+            style: ['col-span-2'],
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
+
   events: (
     <div className="container grid grid-cols-12">
       <Carousel

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.fixture.tsx

@@ -1,19 +1,12 @@
 import { CarouselBankHistoryCard } from './CarouselBankHistoryCard';
+import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
 
-export const BANK_HISTORY_CARD = {
+export const BANK_HISTORY_CARD: CarouselBankHistoryCardContent = {
   title: '1796г.',
   description:
     "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
 };
 
-export const ACTIVE_BANK_HISTORY_CARD = {
-  title: '1796г.',
-  description:
-    "Россельхозбанк стал одним из ключевых участников Приоритетного национального проекта 'Развитие АПК' целью которого развитие агропромышленного сектора российской экономики",
-  isActive: true,
-};
-
 export default {
   default: <CarouselBankHistoryCard {...BANK_HISTORY_CARD} />,
-  active: <CarouselBankHistoryCard {...ACTIVE_BANK_HISTORY_CARD} />,
 };

package/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -20,12 +20,12 @@ export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
         {isActive ? (
           <div className="relative flex items-center w-full">
             <Headline
-              headlineVersion="S"
+              headlineVersion="M"
               title={title}
               description={description}
               align="text-left"
               className={style(
-                'absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue',
+                'absolute z-10 h-[385px] w-[440px] p-8 text-white shadow-dark-blue',
                 getActiveBlockPosition(orderNumber, blocksLength),
                 getBackgroundColor(orderNumber),
               )}
@@ -57,7 +57,6 @@ const getBackgroundColor = (orderNumber: number) => {
       return 'bg-green-light';
     case 2:
       return 'bg-yellow-light';
-
     default:
       return 'bg-primary-main';
   }
@@ -70,7 +69,6 @@ const getTextColor = (orderNumber: number) => {
       return 'gradient-color-text-on-yellow';
     case 2:
       return 'gradient-color-text-on-yellow';
-
     default:
       return 'gradient-color-text-on-green';
   }

package/src/components/CarouselEventCard/CarouselEventCard.tsx

@@ -19,11 +19,11 @@ export const CarouselEventCard = JSX<CarouselEventCardProps>(
           {icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
           {icon?.src ? <Img image={icon} /> : null}
           {title ? (
-            <Heading headingType="h6" as="h4" className="text-left mb-2" title={title} />
+            <Heading headingType="h6" as="h4" className="text-left pt-3 mb-2" title={title} />
           ) : null}
           {description ? (
             <div className="mb-4">
-              <Text font="font-light" size="text-s" color="text-secondary-text">
+              <Text font="font-light" size="text-m" color="text-secondary-text">
                 {description}
               </Text>
             </div>

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.example.json

@@ -7,7 +7,9 @@
     "sources": [
       {
         "media": 1279,
-        "width": 174,
+        "size": {
+          "width": 174
+        },
         "format": "webp",
         "alignment": "southeast"
       }

package/src/components/CarouselProductCard/CarouselProductCard.example.json

@@ -9,7 +9,9 @@
       "sources": [
         {
           "media": 1279,
-          "width": 84,
+          "size": {
+            "width": 84
+          },
           "format": "webp",
           "alignment": "center"
         }

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

@@ -46,6 +46,13 @@ export const PRODUCT_CARD: CarouselProductCardContent = {
   additionalDescription: 'Дополнительное описание',
 };
 
+export const PRODUCT_CARD_SMALL: CarouselProductCardContent = {
+  title: 'Более 5000 товаров Более 5000 товаров Более 5000 товаров',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+};
+
 const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;
 const CAROUSEL_PRODUCT_CARD_SECONDARY = (
   <CarouselProductCard
@@ -53,10 +60,13 @@ const CAROUSEL_PRODUCT_CARD_SECONDARY = (
     version="secondary"
     isDotted={true}
     button={buttonPrimaryIcon}
+    isFullWidth={false}
   />
 );
+const CAROUSEL_PRODUCT_CARD_SMALL = <CarouselProductCard {...PRODUCT_CARD_SMALL} />;
 
 export default {
   default: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD}</div>,
   secondary: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SECONDARY}</div>,
+  small: <div className="container grid grid-cols-12">{CAROUSEL_PRODUCT_CARD_SMALL}</div>,
 };

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -26,6 +26,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
     href,
     icon,
     isDotted = true,
+    isFullWidth = true,
     items = [],
     target,
     title,
@@ -50,7 +51,10 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
           {renderItems(items, isDotted, version)}
           {renderAdditionalDescription(additionalDescription)}
         </LinkWrapper>
-        {renderButtonsSection([button], { className: 'p-6 pt-0', isVertical: true })}
+        {renderButtonsSection([button], {
+          className: style('p-6 pt-0', isFullWidth ? '' : 'justify-center'),
+          isVertical: isFullWidth ? true : false,
+        })}
       </BlockWrapper>
     );
   },

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -27,4 +27,8 @@ export type CarouselProductCardContent = UniBlockContent &
     /** @title Список */
     items?: ListProps[];
     align?: TextAlign;
+    /**
+     * @title По всей ширине
+     */
+    isFullWidth?: boolean;
   };

package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json

@@ -9,8 +9,10 @@
       "sources": [
         {
           "media": 1279,
-          "width": 174,
-          "height": 174,
+          "size": {
+            "width": 174,
+            "height": 174
+          },
           "format": "webp",
           "alignment": "southeast"
         }
@@ -18,6 +20,7 @@
     },
     "title": "Заголовок 1",
     "description": "Описание 1",
+    "align": "text-left",
     "socialMedia": [
       {
         "href": "https://t.me",