@redneckz/wildless-cms-uni-blocks 0.3.23 → 0.3.26

package/mobile/src/components/Tile/Tile.tsx

@@ -70,5 +70,7 @@ export const Tile = JSX<TileProps>((props) => {
 });
 
 function renderList(items, version) {
-  return items?.length ? <List items={items} version={version} /> : null;
+  return items?.length ? (
+    <List items={items} itemClassName="mt-2.5 first:mt-0" version={version} />
+  ) : null;
 }

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

@@ -6,6 +6,7 @@ import { IconTitleMap } from '../../icons/IconName';
 const svgColorsMap: Record<IconColor, string> = {
   none: '',
   primary: 'text-primary-main',
+  secondary: 'text-primary-text',
 };
 
 export const Icon = JSX<IconProps>(
@@ -22,7 +23,12 @@ export const Icon = JSX<IconProps>(
 
     if (asSVG) {
       return (
-        <svg className={`${svgColorsMap[color]} ${className}`} {...imgProps} aria-hidden="true">
+        <svg
+          className={`${svgColorsMap[color]} ${className}`}
+          {...imgProps}
+          aria-hidden="true"
+          style={color === 'secondary' ? { filter: 'invert(1)' } : null}
+        >
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
           <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -4,9 +4,9 @@ export type { IconName };
 
 /**
  * @title Цвет иконки (svg)
- * @enumNames ["Нет", "Основной"]
+ * @enumNames ["Нет", "Основной", "Второстепенный"]
  */
-export type IconColor = 'none' | 'primary';
+export type IconColor = 'none' | 'primary' | 'secondary';
 
 export interface IconProps {
   className?: string;

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

@@ -1,12 +1,18 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { ListItem } from './ListItem';
-import { ListProps } from './ListProps';
+import type { ListProps, ListItemVersion } from './ListProps';
+
+const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+  gray: 'text-secondary-text',
+};
 
 export const List = JSX<ListProps>((props) => {
-  const { className = '', itemClassName, isDotted, items, version } = props;
+  const { className = '', itemClassName, isDotted, items, version = 'primary' } = props;
 
   return (
-    <section className={`${className}`} role="list">
+    <section className={`${TEXT_STYLE_MAP[version]} ${className}`} role="list">
       {items?.length
         ? items.map((_, i) => (
             <ListItem

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { ListItemVersion } from './ListProps';
+import type { ListItemVersion } from './ListProps';
 
 /**
  * @title Параметры элемента списка
@@ -13,13 +13,7 @@ export interface ListItemProps {
 
 const LIST_STYLE_CLASSES = 'rounded-full inline-block mr-3 mt-2';
 
-const TEXT_STYLE_MAP: Record<ListItemVersion, string> = {
-  primary: 'text-primary-text',
-  secondary: 'text-white',
-  gray: 'text-secondary-text',
-};
-
-const LIST_STYLE_MAP: Record<ListItemVersion, string> = {
+const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
   primary: 'bg-primary-main',
   secondary: 'bg-white',
   gray: 'bg-secondary-text',
@@ -30,14 +24,13 @@ export const ListItem = JSX<ListItemProps>(
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
         {isDotted && <div className={getListStyle(version)} />}
-        <span className={`text-m-md ${TEXT_STYLE_MAP[version]}`}>{children}</span>
+        <span>{children}</span>
       </div>
     );
   },
 );
 
 const getListStyle = (version: ListItemVersion) => {
-  const size =
-    version === 'gray' ? 'w-[6px] h-[6px] min-w-[6px] min-h-[6px]' : 'w-2 h-2 min-w-2 min-h-2';
-  return `${LIST_STYLE_CLASSES} ${LIST_STYLE_MAP[version]} ${size}`;
+  const size = version === 'gray' ? 'w-1.5 h-1.5 min-w-1.5 min-h-1.5' : 'w-2 h-2 min-w-2 min-h-2';
+  return `${LIST_STYLE_CLASSES} ${LIST_DOT_STYLE_MAP[version]} ${size}`;
 };

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

@@ -2,6 +2,7 @@ import type { ListContent } from './ListContent';
 
 /**
  * @title Версия списка
+ * @enumNames ["Основной", "Второстепенный", "Серый"]
  */
 export type ListItemVersion = 'primary' | 'secondary' | 'gray';
 
@@ -10,6 +11,7 @@ export type ListItemVersion = 'primary' | 'secondary' | 'gray';
  */
 export interface ListProps extends ListContent {
   className?: string;
+  /** @title Буллиты */
   isDotted?: boolean;
   version?: ListItemVersion;
   itemClassName?: string;

package/package.json

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

package/src/components/Blocks.mobile.ts

@@ -8,6 +8,7 @@ import { Headline } from './Headline/Headline';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
@@ -30,4 +31,5 @@ export const Blocks = {
   StepsBlock,
   TariffsTable,
   TextBlock,
+  Placeholder,
 };

package/src/components/ComparisonTable/ComparisonTable.example.json

@@ -1,5 +1,6 @@
 {
   "title": "Сравнительная таблица",
+  "orientation": "horizontal",
   "rowHeaders": [
     {
       "title": "Параметр 1"

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

@@ -143,7 +143,7 @@ export default {
         isColoredFirstColumn={true}
         context={context}
         rowHeaders={rowHeaders}
-        useSwiper={true}
+        orientation={'horizontal'}
         columns={Array(2).fill(columns).flat()}
         visibleRowLength={2}
       />

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

@@ -16,7 +16,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     columns,
     visibleRowLength = 0,
     isColoredFirstColumn = false,
-    useSwiper = false,
+    orientation = 'horizontal',
   }) => {
     const tableData =
       columns?.map(({ data, header }) => ({
@@ -50,7 +50,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           isColoredFirstColumn,
           columnsViewState,
           handleToggleColumn,
-          useSwiper,
+          orientation,
           setColumnsViewState,
         })}
       </section>
@@ -65,41 +65,62 @@ const renderColumns = ({
   isColoredFirstColumn,
   columnsViewState,
   handleToggleColumn,
-  useSwiper,
+  orientation = 'horizontal',
   setColumnsViewState,
 }) => (
   <div role="table">
-    {tableData?.length ? (
-      useSwiper ? (
-        <SwipeListControl
-          context={context}
-          onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
-        >
-          {tableData.map(
-            renderColumn({
-              context,
-              visibleRowLength,
-              isColoredFirstColumn,
-              columnsViewState,
-              handleToggleColumn,
-            }),
-          )}
-        </SwipeListControl>
-      ) : (
-        tableData.map(
-          renderColumn({
-            context,
-            visibleRowLength,
-            isColoredFirstColumn,
-            columnsViewState,
-            handleToggleColumn,
-          }),
-        )
-      )
-    ) : null}
+    {tableData?.length
+      ? renderInnerTable({
+          orientation,
+          context,
+          columnsViewState,
+          setColumnsViewState,
+          tableData,
+          visibleRowLength,
+          isColoredFirstColumn,
+          handleToggleColumn,
+        })
+      : null}
   </div>
 );
 
+const renderInnerTable = ({
+  orientation,
+  context,
+  columnsViewState,
+  setColumnsViewState,
+  tableData,
+  visibleRowLength,
+  isColoredFirstColumn,
+  handleToggleColumn,
+}) =>
+  orientation === 'horizontal' ? (
+    tableData.map(
+      renderColumn({
+        context,
+        visibleRowLength,
+        isColoredFirstColumn,
+        columnsViewState,
+        handleToggleColumn,
+      }),
+    )
+  ) : (
+    <SwipeListControl
+      context={context}
+      onSlideChange={onSlideChange(columnsViewState, setColumnsViewState)}
+    >
+      {tableData.map(
+        renderColumn({
+          context,
+          visibleRowLength,
+          isColoredFirstColumn,
+          columnsViewState,
+          handleToggleColumn,
+        }),
+      )}
+    </SwipeListControl>
+  );
+
 const renderColumn =
   ({ context, visibleRowLength, isColoredFirstColumn, columnsViewState, handleToggleColumn }) =>
   (columnData, i) =>

package/src/components/ComparisonTable/ComparisonTableContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @hidden
@@ -81,6 +82,6 @@ export interface ComparisonTableContent {
   isColoredFirstColumn?: boolean;
   /** @title Отображать заданное количество строк */
   visibleRowLength?: number;
-  /** @title Использовать свайпер (моб.) */
-  useSwiper?: boolean;
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  orientation?: ListOrientation;
 }

package/src/components/ContentPage/ContentPage.tsx

@@ -91,7 +91,6 @@ function renderBlock(
   if (!(type && type in blocksRegistry)) {
     console.warn(`No block with "${type}" is registered`);
   }
-
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
   return blockDecorator(
     {

package/src/components/CreditCalculator/CreditCalculator.example.json

@@ -0,0 +1,19 @@
+{
+  "tabs": [
+    {
+      "title": "Вкладка 1",
+      "description": "Описание",
+      "icon": "CardIcon"
+    },
+    {
+      "title": "Вкладка 2",
+      "description": "Описание",
+      "icon": "ChartSquareIcon"
+    },
+    {
+      "title": "Вкладка 3",
+      "description": "Описание",
+      "icon": "DiscountShapeIcon"
+    }
+  ]
+}

package/src/components/Gallery/Gallery.example.json

@@ -1,6 +1,7 @@
 {
   "title": "Галерея",
   "description": "Описание",
+  "orientation": "horizontal",
   "cards": [
     {
       "image": {

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

@@ -3,6 +3,7 @@ import { context } from '../../setup-fixture';
 import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
 import { Gallery } from './Gallery';
 import { GalleryCard } from './GalleryContent';
+import { ListOrientation } from '../../model/ListOrientation';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -82,7 +83,7 @@ const cards: GalleryCard[] = [
 const defaultProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  isScroll: false,
+  orientation: 'horizontal' as ListOrientation,
   context,
   cards: cards,
 };
@@ -90,7 +91,7 @@ const defaultProps = {
 const scrollProps = {
   title: 'Вы можете оплатить бонусными баллами',
   description: 'Удобный каталог с большим ассортиментом товаров и сервисов',
-  isScroll: true,
+  orientation: 'horizontal' as ListOrientation,
   context,
   cards: cards,
 };

package/src/components/Gallery/Gallery.mobile.tsx

@@ -8,6 +8,7 @@ import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl
 import type { GalleryCard } from './GalleryContent';
 import { GalleryItem } from './GalleryContent';
 import type { GalleryProps } from './GalleryProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 const blockStyle: Record<BlockVersion, string> = {
   primary: 'bg-white',
@@ -15,7 +16,7 @@ const blockStyle: Record<BlockVersion, string> = {
 };
 
 export const Gallery = JSX<GalleryProps>(
-  ({ context, title, description, cards = [], className, isScroll = true }) => {
+  ({ context, title, description, cards = [], className, orientation = 'horizontal' }) => {
     return (
       <section
         className={`relative font-sans text-primary-text bg-white px-4 py-6 overflow-hidden ${className}`}
@@ -34,14 +35,14 @@ export const Gallery = JSX<GalleryProps>(
             </div>
           ) : null}
         </div>
-        {renderCardsLayout(isScroll, cards, context)}
+        {renderCardsLayout(orientation, cards, context)}
       </section>
     );
   },
 );
 
-function renderCardsLayout(isScroll: boolean, cards: GalleryCard[], context) {
-  return isScroll ? (
+function renderCardsLayout(orientation: ListOrientation, cards: GalleryCard[], context) {
+  return orientation === 'horizontal' ? (
     <SwipeListControl context={context}>{cards?.map(renderCard)}</SwipeListControl>
   ) : (
     <div className="grid gap-[14px]">{cards?.map(renderCard)}</div>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -1,16 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BlockVersion } from '../../model/BlockVersion';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
-import type { GalleryCard } from './GalleryContent';
+import { List } from '../../ui-kit/List/List';
+import type { GalleryCard, GalleryItem } from './GalleryContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version }) => {
     const titleStyleClasses = getTitleStyle(version, description, items);
     return (
-      <div>
+      <div className="h-full flex flex-col justify-between">
         <div>
           {image?.src ? (
             <div className="flex justify-center">
@@ -43,21 +43,16 @@ function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }
 
-function renderItems(items, version) {
+function renderItems(items: GalleryItem[], version: BlockVersion = 'primary') {
   return (
-    <section className={`max-w-[308px] mt-2`} role="list">
-      {items
-        .filter((item) => item?.text)
-        .map((item, i) => renderItem(item.text as string, i, version))}
-    </section>
-  );
-}
-
-function renderItem(item: string, i: number, version?: BlockVersion) {
-  return (
-    <BlockItem key={String(i)} version={version ?? 'primary'}>
-      <span className="text-sm">{item}</span>
-    </BlockItem>
+    <List
+      className={`max-w-[308px] mt-2 text-sm ${
+        version === 'primary' ? '!text-secondary-text' : ''
+      }`}
+      itemClassName="mt-1 first:mt-0"
+      items={items.filter((item) => item?.text).map((item) => item.text as string)}
+      version={version}
+    />
   );
 }
 

package/src/components/Gallery/GalleryContent.ts

@@ -1,6 +1,7 @@
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Элемент списка
@@ -41,6 +42,6 @@ export interface GalleryContent {
    * @minItems 3
    */
   cards?: GalleryCard[];
-  /** @title Горизонтальная прокрутка (для мобильных прокрутка shift+mouseScroll) */
-  isScroll?: boolean; //TODO: for mobile
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  orientation?: ListOrientation; //TODO: for mobile
 }

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,6 +1,7 @@
 import type { LinkProps } from '../../model/LinkProps';
 import type { IconName } from '../../ui-kit/Icon/IconProps';
 import type { AlignType } from '../BaseTile/BaseTileProps';
+import type { ListOrientation } from '../../model/ListOrientation';
 
 /**
  * @title Отображение списка
@@ -11,15 +12,6 @@ import type { AlignType } from '../BaseTile/BaseTileProps';
  */
 export type LinkColumnsMode = 'single' | 'double';
 
-/**
- * @title Отображение списка (моб.)
- * @enumNames [
- *    "Вертикально",
- *    "Горизонтально",
- *    ]
- */
-export type LinkListMode = 'vertical' | 'horizontal';
-
 /**
  * @title Элемент списка
  */
@@ -41,7 +33,8 @@ export interface LinkDocsContent {
   /** @title Список */
   documents?: LinkDocsItem[];
   columnsMode?: LinkColumnsMode;
-  listMode?: LinkListMode; // TODO: мобильный проп
+  /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
+  listMode?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
   align?: AlignType;

package/src/components/MiniGallery/MiniGalleryContent.ts

@@ -2,6 +2,6 @@ import type { GalleryContent } from '../Gallery/GalleryContent';
 
 /**
  * @title Мини-галерея
- * @minItems 3
+ * @minItems 4
  */
 export type MiniGalleryContent = GalleryContent;

package/src/components/OtherProducts/OtherProductsItem.tsx

@@ -26,7 +26,7 @@ export const OtherProductsItem = JSX<BlockItemProps>(
           />
         ) : null}
         <button
-          className="border-none bg-primary-main px-0 py-[25px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
+          className="border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-base flex justify-center cursor-pointer"
           onClick={handleToggle}
         >
           <span className="pr-3">{isActive ? 'Скрыть' : label}</span>

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

@@ -9,6 +9,7 @@
     }
   },
   "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"],
+  "isDotted": true,
   "buttons": [
     {
       "text": "Кнопка",

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

@@ -4,6 +4,11 @@ import { ProductBlock } from './ProductBlock';
 import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
+const title = 'Кредит до 5 000 000 Р\nбез залога и поручителей';
+const description =
+  'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.';
+const label = 'Самое лучшее предложение';
+
 const image: Picture = {
   src: 'money-1.png',
   format: 'webp',
@@ -20,7 +25,7 @@ const image: Picture = {
   ],
 };
 
-const benefits = [
+const benefits: Benefit[] = [
   {
     label: 'До 5 млн ₽',
     description: 'Кредитный лимит',
@@ -38,7 +43,7 @@ const benefits = [
   },
 ];
 
-const buttons = [
+const buttons: ButtonWithIconProps[] = [
   {
     href: 'https://rshb.ru',
     text: 'Оформить карту',
@@ -51,7 +56,7 @@ const buttons = [
     target: '_blank',
     version: 'secondary',
   },
-] as ButtonWithIconProps;
+];
 
 const items = [
   'Совершайте любые личные покупки',
@@ -59,30 +64,61 @@ const items = [
   'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
 ];
 
+const props = { title, description, image, buttons };
+
 export default {
   default: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock className="col-span-12" context={context} {...props} benefits={benefits} />
+    </div>
+  ),
+  items: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock className="col-span-12" context={context} {...props} items={items} />
+    </div>
+  ),
+  'primary with label': (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={benefits as Benefit[]}
-        buttons={buttons as ButtonWithIconProps[]}
-        image={image}
+        {...props}
+        benefits={benefits}
+        label={label}
       />
     </div>
   ),
-  items: (
+  secondary: (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
-        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
-        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        {...props}
+        benefits={benefits}
+        version="secondary"
+      />
+    </div>
+  ),
+  'secondary with items': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...props}
         items={items}
-        buttons={buttons as ButtonWithIconProps[]}
-        image={image}
+        version="secondary"
+      />
+    </div>
+  ),
+  'secondary with label': (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        {...props}
+        benefits={benefits}
+        label={label}
+        version="secondary"
       />
     </div>
   ),