@redneckz/wildless-cms-uni-blocks 0.6.38 → 0.6.40

package/src/components/Carousel/Carousel.tsx

@@ -30,23 +30,25 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     });
 
     return (
-      <BlockWrapper className={`relative font-sans ${className}`} {...rest}>
-        <SwipeListContainer
-          containerRef={containerRef}
-          visibleItemCount={visibleItemCount}
-          snapAlign="snap-start"
-          gap={ITEMS_GAP}
-          onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
-        >
-          {renderChildren(rest)}
-        </SwipeListContainer>
-        {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
-          <div>
-            <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
-            <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
-          </div>
-        ) : null}
-        {renderScrollButtons(scroll)}
+      <BlockWrapper className={`font-sans p-12 ${className}`} {...rest}>
+        <div className="relative max-w-full">
+          <SwipeListContainer
+            containerRef={containerRef}
+            visibleItemCount={visibleItemCount}
+            snapAlign="snap-start"
+            gap={ITEMS_GAP}
+            onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
+          >
+            {renderChildren(rest)}
+          </SwipeListContainer>
+          {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
+            <div>
+              <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
+              <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
+            </div>
+          ) : null}
+          {renderScrollButtons(scroll)}
+        </div>
       </BlockWrapper>
     );
   },
@@ -54,8 +56,9 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 
 Carousel.childrenTypes = [
   'CarouselCard',
+  'CarouselCatalogCard',
   'CarouselTariffsCard',
-  'CarouselLinks',
+  'CarouselProductCard',
   'CarouselProgramsCard',
   'CarouselInvestmentCard',
 ];

package/src/components/Carousel/CarouselContent.ts

@@ -6,7 +6,7 @@ export interface CarouselContent {
    * @title Количество видимых карточек
    * @enumNames ["auto", "1", "2", "3"]
    */
-  visibleItemCount?: 0 | 1 | 2 | 3;
+  visibleItemCount?: 0 | 1 | 2 | 3 | 4;
   /** @title Добавление  блюра */
   isBlur?: boolean;
   /** @title Цикличность */

package/src/components/CarouselCatalogCard/CarouselCatalogCard.example.json

@@ -0,0 +1,17 @@
+{
+  "title": "Заголовок карточки 1",
+  "description": "Описание карточки",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 230,
+      "height": 230
+    }
+  },
+  "button": {
+    "href": "",
+    "text": "Подробнее",
+    "target": "_self",
+    "version": "primary"
+  }
+}

package/src/components/CarouselCatalogCard/CarouselCatalogCard.fixture.tsx

@@ -0,0 +1,43 @@
+import type { Picture } from '../../model/Picture';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselCatalogCard } from './CarouselCatalogCard';
+
+const payRing: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 230,
+    height: 230,
+  },
+  title: 'pay-ring',
+};
+
+const colors: ProductColorVersion[] = ['black', 'white'];
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+  icon: {
+    icon: 'AppleIcon',
+  },
+};
+
+export const CATALOG_CARD = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  image: payRing,
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CarouselCatalogCard {...CATALOG_CARD} />
+    </div>
+  ),
+};

package/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -0,0 +1,62 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+import type { CarouselCatalogCardContent } from './CarouselCatalogCardContent';
+
+export interface CarouselCatalogCardProps extends CarouselCatalogCardContent {
+  className?: string;
+  version?: BlockVersion;
+}
+
+const cardStyleMap: Record<ProductColorVersion, string> = {
+  black: 'bg-black',
+  white: 'bg-white',
+};
+
+export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
+  ({ className = '', title, description, image, price, button, colors, version = 'primary' }) => (
+    <section
+      className={`border box-border border-main-stroke p-7 min-w-[392px] flex flex-col justify-left ${VersionStyleMap[version]} ${className}`}
+      role="listitem"
+    >
+      {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}
+      {title ? (
+        <Heading headingType="h6" as="h4" className="text-left mb-1.5" title={title} />
+      ) : null}
+      {description ? (
+        <div className="mb-4">
+          <Paragraph size="text-m" align="text-left" font="font-light">
+            {description}
+          </Paragraph>
+        </div>
+      ) : null}
+      {colors?.length ? (
+        <div className="flex mb-4 text-s-light text-secondary-text">
+          <div className="mr-1.5">
+            <Text>Доступные цвета: </Text>
+          </div>
+          {colors.map(renderColorOption)}
+        </div>
+      ) : null}
+      {price ? (
+        <Text size="text-h3" align="text-left">
+          {price}&nbsp;₽
+        </Text>
+      ) : null}
+      {button ? renderButton({ button, buttonClassName: 'mt-5 w-full' }) : null}
+    </section>
+  ),
+);
+
+const renderColorOption = (color: ProductColorVersion, i: number) => (
+  <span
+    key={String(i)}
+    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+  />
+);

package/src/components/CarouselCatalogCard/CarouselCatalogCard.ui.json

@@ -0,0 +1,10 @@
+{
+  "content": {
+    "image": {
+      "ui:field": "picture"
+    },
+    "price": {
+      "ui:field": "number"
+    }
+  }
+}

package/src/components/CarouselCatalogCard/CarouselCatalogCardContent.ts

@@ -0,0 +1,25 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ProductColorVersion } from '../../model/ProductColorVersion';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+
+/**
+ * @title Карточка каталога
+ */
+export type CarouselCatalogCardContent = HeadlineCommonProps &
+  ImageContent & {
+    /** @title Цена в рублях */
+    price?: number;
+    /** @title Доступные цвета */
+    colors?: ProductColorVersion[];
+    /**
+     * @title Кнопка
+     * @default {
+     *  "icon": { "format": "webp", "size": { "width": 24, "height": 24 } },
+     *  "iconRight" : { "format": "webp", "size": { "width": 24, "height": 24 } }
+     * }
+     */
+    button?: ButtonWithIconProps;
+    version?: BlockVersion;
+  };

package/src/components/CarouselInvestmentCard/CarouselInvestmentCard.tsx

@@ -1,15 +1,18 @@
-import { BaseTile } from '../BaseTile/BaseTile';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { JSX } from '@redneckz/uni-jsx';
+import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { BaseTile } from '../BaseTile/BaseTile';
 import type {
   CardColumnsMode,
   CardsListItem,
   CarouselInvestmentCardContent,
 } from './CarouselInvestmentCardContent';
-import { JSX } from '@redneckz/uni-jsx';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import { Img } from '../../ui-kit/Img/Img';
-import type { UniBlockProps } from '../../model/JSXBlock';
 
 export interface CarouselInvestmentCardProps extends CarouselInvestmentCardContent, UniBlockProps {}
 
@@ -42,17 +45,29 @@ export const CarouselInvestmentCard = JSX<CarouselInvestmentCardProps>(
 
     return (
       <BlockWrapper
-        className={`relative text-left border border-solid box-border
-        p-9 w-[697px]
-        ${BorderVersionStyleMap[version]}
-        ${className}`}
+        className={[
+          'relative text-left border border-solid box-border p-9 w-[697px]',
+          VersionStyleMap[version],
+          BorderVersionStyleMap[version],
+          className,
+        ].join(' ')}
         {...rest}
       >
         <BaseTile title={tileTitle} image={tileImage}>
           <div className="flex justify-between mb-4">
-            {description ? <span className="text-h6 w-1/3">{description}</span> : null}
+            {description ? (
+              <div className="w-1/3">
+                <Text size="text-h6">{description}</Text>
+              </div>
+            ) : null}
             {additionalDescription ? (
-              <span className="text-m-light text-secondary-text">{additionalDescription}</span>
+              <Text
+                size="text-m"
+                font="font-light"
+                color={VersionAdditionalStyleMap[version] as TextColor}
+              >
+                {additionalDescription}
+              </Text>
             ) : null}
           </div>
           {cardsList.length ? (
@@ -73,10 +88,14 @@ const renderCardList = (cardsList: CardsListItem[], columnsMode: number) => {
   return visibleCardsList.map((item, i) => (
     <li key={String(i)} className={columnsMode === 2 ? 'basis-[calc(50%-20px)]' : ''}>
       {item?.parameter ? (
-        <span className={`pr-2.5 ${getItemListFontSize(columnsMode)}`}>{item.parameter}</span>
+        <div className="pr-2.5">
+          <Text size={getItemListFontSize(columnsMode)}>{item.parameter}</Text>
+        </div>
       ) : null}
       {item?.parameterDescription ? (
-        <span className="text-m-light text-secondary-text">{item.parameterDescription}</span>
+        <Text size="text-m" font="font-light" color="text-secondary-text">
+          {item.parameterDescription}
+        </Text>
       ) : null}
     </li>
   ));

package/src/components/CarouselInvestmentCard/CarouselInvestmentCardContent.ts

@@ -1,10 +1,6 @@
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { Picture } from '../../model/Picture';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title Карточка галереи инвестиций
- */
+import type { Picture } from '../../model/Picture';
 
 /**
  * @title Количество колонок
@@ -21,6 +17,10 @@ export interface CardsListItem {
   /** @title Описание */
   parameterDescription?: string;
 }
+
+/**
+ * @title Карточка галереи инвестиций
+ */
 export interface CarouselInvestmentCardContent extends HeadlineCommonProps {
   /** @title Доп. описание карточки  */
   additionalDescription?: string;

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

@@ -0,0 +1,21 @@
+{
+  "content": {
+    "icon": {
+      "format": "webp",
+      "size": {
+        "width": 140,
+        "height": 140
+      }
+    },
+    "title": "Заголовок 1",
+    "description": "Описание 1",
+    "href": "/credit-cards",
+    "version": "primary",
+    "isDotted": true,
+    "items": [
+      { "text": "Элемент списка 1", "title": "Элемент заголовка 1" },
+      { "text": "Элемент списка 2", "title": "Элемент заголовка 2" },
+      { "text": "Элемент списка 3", "title": "Элемент заголовка 3" }
+    ]
+  }
+}

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

@@ -0,0 +1,62 @@
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { CarouselProductCard } from './CarouselProductCard';
+import type { CarouselProductCardContent } from './CarouselProductCardContent';
+
+const isDotted = false;
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 140,
+    height: 140,
+  },
+  title: 'money',
+};
+
+const buttonPrimary: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
+const buttonPrimaryIcon: ButtonWithIconProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: { icon: 'BankIcon' },
+};
+
+const defaultItems = [
+  { text: 'Качественные фермерские продукты напрямую от производителей' },
+  { text: 'Самая большая база сельских туров по России' },
+  { text: 'Площадки для создания комфортной жизни за городом' },
+];
+
+export const PRODUCT_CARD: CarouselProductCardContent = {
+  title: 'Более 5000 товаров',
+  description: 'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
+  icon: image,
+  button: buttonPrimary,
+  isDotted,
+  items: defaultItems,
+  additionalDescription: 'Дополнительное описание',
+};
+
+const CAROUSEL_PRODUCT_CARD = <CarouselProductCard {...PRODUCT_CARD} />;
+const CAROUSEL_PRODUCT_CARD_SECONDARY = (
+  <CarouselProductCard
+    {...PRODUCT_CARD}
+    version="secondary"
+    isDotted={true}
+    button={buttonPrimaryIcon}
+  />
+);
+
+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>,
+};

package/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -0,0 +1,102 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { AlignText } from '../../model/AlignText';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
+import { renderButton } from '../../ui-kit/Button/ButtonSection';
+import { Img } from '../../ui-kit/Img/Img';
+import { List } from '../../ui-kit/List/List';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Text } from '../../ui-kit/Text/Text';
+import { getIconWithVersion } from '../../utils/getIconWithVersion';
+import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
+
+export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}
+
+const descriptionStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white/80',
+};
+
+const BORDER_STYLE = 'box-border border-solid border border-main-stroke ';
+
+export const CarouselProductCard = JSX<CarouselProductCardProps>(
+  ({
+    title,
+    headlineSmallVersion = 'H6',
+    description,
+    additionalDescription,
+    icon,
+    items = [],
+    button = {},
+    version = 'primary',
+    isDotted = true,
+    align = 'center',
+  }) => {
+    return (
+      <section
+        className={[
+          'flex flex-col justify-between items-stretch min-w-[260px] h-full w-full p-6',
+          BORDER_STYLE,
+          AlignText[align],
+          VersionStyleMap[version],
+        ].join(' ')}
+        role="listitem"
+      >
+        <div className="flex flex-col h-full">
+          {renderImage(icon, version)}
+          {renderCardTitle(headlineSmallVersion, title)}
+          {renderDescription(description, title)}
+          {renderItems(items, isDotted, version)}
+          {renderAdditionalDescription(additionalDescription, version)}
+        </div>
+        {renderButton({ button, buttonClassName: 'mt-6' })}
+      </section>
+    );
+  },
+);
+
+const renderImage = (image?: Picture, version?: BlockVersion) => (
+  <div className="flex justify-center">
+    {image?.src ? <Img className="mb-5" image={image} /> : null}
+    {image?.icon ? (
+      <Img
+        className={`w-[32px] h-[32px] min-w-[32px] mb-5 rounded-full`}
+        image={getIconWithVersion(image, version)}
+        asSVG
+      />
+    ) : null}
+  </div>
+);
+
+const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
+  title ? <Text size={HEADLINE_SMALL_VERSION[headlineSmallVersion]}>{title}</Text> : null;
+
+const renderDescription = (description?: string, title?: string) =>
+  description ? (
+    <div className={title ? 'mt-2' : ''}>
+      <Paragraph size="text-l">{description}</Paragraph>
+    </div>
+  ) : null;
+
+const renderAdditionalDescription = (additionalDescription?: string, version = 'primary') =>
+  additionalDescription ? (
+    <div className="mt-auto">
+      <Text size="text-m" font="font-light" color={descriptionStyleMap[version]}>
+        {additionalDescription}
+      </Text>
+    </div>
+  ) : null;
+
+const renderItems = (items: ListProps[], isDotted: boolean, version: BlockVersion = 'primary') =>
+  items?.length ? (
+    <List
+      className={`max-w-[308px] mt-2 text-s ${version === 'primary' ? '!text-secondary-text' : ''}`}
+      itemClassName="text-left"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      isDotted={isDotted}
+      version={version}
+    />
+  ) : null;

package/src/components/CarouselProductCard/CarouselProductCard.ui.json

@@ -0,0 +1,18 @@
+{
+  "content": {
+    "additionalDescription": {
+      "ui:field": "hidden"
+    },
+    "icon": {
+      "ui:field": "picture"
+    },
+    "button": {
+      "icon": {
+        "ui:field": "icon"
+      },
+      "iconRight": {
+        "ui:field": "icon"
+      }
+    }
+  }
+}

package/src/components/CarouselProductCard/CarouselProductCardContent.ts

@@ -0,0 +1,51 @@
+import type { AlignType } from '../../model/AlignType';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineSmallProps } from '../../model/HeadlineType';
+import type { Picture } from '../../model/Picture';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Элемент списка
+ */
+export interface ListProps {
+  /** @title Текст */
+  text?: string;
+}
+
+/**
+ * @title Карточка продуктовой карусели
+ */
+export type CarouselProductCardContent = HeadlineSmallProps & {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 140
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 84,
+   *       "format": "webp",
+   *       "alignment": "center"
+   *   }]
+   * }
+   */
+  icon?: Picture;
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+  /**
+   * @title Буллиты
+   * @default true
+   */
+  isDotted?: boolean;
+  /** @title Список */
+  items?: ListProps[];
+  version?: BlockVersion;
+  /**
+   * @title Выравнивание
+   * @default center
+   */
+  align?: AlignType;
+};

package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx

@@ -1,6 +1,6 @@
 import type { Picture } from '../../model/Picture';
 import { CarouselProgramsCard } from './CarouselProgramsCard';
-import { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
+import type { CarouselProgramsCardContent } from './CarouselProgramsCardContent';
 
 const imageMonth: Picture = {
   src: 'coin.png',

package/src/components/CarouselProgramsCard/CarouselProgramsCardContent.ts

@@ -1,6 +1,6 @@
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
-import type { BlockVersion } from '../../model/BlockVersion';
 
 /**
  * @title Карточка программ карусели

package/src/components/ContactsBlock/ContactsBlock.example.json

@@ -16,7 +16,7 @@
       ],
       [
         {
-          "title": "Заголовок 2ff",
+          "title": "Заголовок 2",
           "description": "Описание 2",
           "button": {
             "href": "#",

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionAdditionalStyleMap } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
@@ -29,7 +30,7 @@ export const GalleryCardInner = JSX<GalleryCardProps>(
         {renderCardTitle(headlineSmallVersion, title)}
         {renderDescription(description, title)}
         {items?.length ? renderItems(items, isDotted, version) : null}
-        {renderAdditionalDescription(additionalDescription)}
+        {renderAdditionalDescription(additionalDescription, version)}
       </div>
       {button?.text
         ? renderButton({
@@ -60,9 +61,11 @@ const renderCardTitle = (headlineSmallVersion: string, title?: string) =>
 const renderDescription = (description?: string, title?: string) =>
   description ? <div className={`text-l ${title ? 'mt-2' : ''}`}>{description}</div> : null;
 
-const renderAdditionalDescription = (additionalDescription?: string) =>
+const renderAdditionalDescription = (additionalDescription?: string, version?: BlockVersion) =>
   additionalDescription ? (
-    <div className="text-m-light text-secondary-text mt-auto">{additionalDescription}</div>
+    <div className={`text-m-light mt-auto ${VersionAdditionalStyleMap[version ?? 'primary']}`}>
+      {additionalDescription}
+    </div>
   ) : null;
 
 const renderItems = (

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -123,11 +123,12 @@ export const PRODUCT_PENSION_TILE: ProductTileContent = {
 };
 
 export default {
-  credit: (
+  default: (
     <div className="container grid grid-cols-12">
       <ProductTile className="col-span-6" {...PRODUCT_TILE} />
     </div>
   ),
+  secondary: <ProductTile className="col-span-6" {...PRODUCT_TILE} version="secondary" />,
   pension: (
     <div className="container grid grid-cols-12">
       <ProductTile