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

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

@@ -1,18 +1,23 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { ProductBlockInner } from './ProductBlockInner';
 import type { UniBlockProps } from '../../types';
 import type { ProductBlockContent } from './ProductBlockContent';
-import { ProductBlockInner } from './ProductBlockInner';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+const productBlockStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-white text-primary-text',
+  secondary: 'bg-primary-main text-white',
+};
 
 export interface ProductBlockProps extends ProductBlockContent, UniBlockProps {}
 
-export const ProductBlock = JSX<ProductBlockProps>(
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  (props /* Get rid of image and benefits */) => {
-    const { className } = props;
-    return (
-      <section className={`font-sans bg-white px-4 py-6 ${className || ''}`}>
-        <ProductBlockInner {...props} />
-      </section>
-    );
-  },
-);
+export const ProductBlock = JSX<ProductBlockProps>((props /* Get rid of image and benefits */) => {
+  const { className = '', version = 'primary' } = props;
+  return (
+    <section
+      className={`font-sans bg-white px-4 py-6 ${productBlockStyleMap[version]} ${className}`}
+    >
+      <ProductBlockInner {...props} />
+    </section>
+  );
+});

package/src/components/ProductBlock/ProductBlockContent.ts

@@ -20,6 +20,10 @@ export type ProductBlockInnerContent = HeadingContent &
      */
     benefits?: Benefit[];
     version?: BlockVersion;
+    /** @title Буллиты */
+    isDotted?: boolean;
+    /** @title Лейбл (моб.) */
+    label?: string;
     /**
      * @title Стиль для текстовой части
      * @hidden

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

@@ -7,6 +7,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { BaseTile } from '../BaseTile/BaseTile';
 import type { ProductBlockInnerContent } from './ProductBlockContent';
+import type { BlockVersion } from '../../model/BlockVersion';
 import { renderBenefit } from './renderBenefit';
 
 export type ProductBlockInnerProps = ProductBlockInnerContent & UniBlockProps;
@@ -23,10 +24,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     image,
     items,
     version = 'primary',
+    isDotted = true,
+    label,
   }) => {
     return (
-      <div className={`w-full text-primary-text ${className}`}>
+      <div className={`w-full ${className}`}>
         <div>
+          {label ? renderLabel(label, version) : null}
           <BaseTile
             context={context}
             title={
@@ -54,7 +58,14 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             {benefits?.filter((items) => items.label)?.length ? (
               <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
-            {items?.length ? <List className="mt-3" items={items} /> : null}
+            {items?.length ? (
+              <List
+                className="mt-3 text-m-md"
+                items={items}
+                version={version}
+                isDotted={isDotted}
+              />
+            ) : null}
           </BaseTile>
         </div>
         {renderImage(image)}
@@ -65,8 +76,17 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
 
 function renderImage(image) {
   return image?.src ? (
-    <div className="mt-5">
-      <Img image={{ className: 'block', ...image }} />
-    </div>
+    <Img imageClassName="mt-5 mx-auto block" image={{ className: 'block', ...image }} />
   ) : null;
 }
+
+const labelStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-main border-secondary-hover',
+  secondary: 'text-white/80',
+};
+
+const renderLabel = (label: string, version: BlockVersion) => (
+  <div className={`m-xs px-2.5 py-1.5 mb-5 rounded-md border-2 w-fit ${labelStyleMap[version]}`}>
+    {label}
+  </div>
+);

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -23,6 +23,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     image,
     items,
     version = 'primary',
+    isDotted = true,
     textBlockClassName = '',
   }) => {
     const textColor = version === 'secondary' ? 'text-white' : '';
@@ -43,7 +44,13 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               </div>
             ) : null}
             {items?.length ? (
-              <List className="mt-5" items={items} itemClassName="mb-[10px]" version={version} />
+              <List
+                className="mt-5"
+                items={items}
+                itemClassName="mb-[10px]"
+                version={version}
+                isDotted={isDotted}
+              />
             ) : null}
           </BaseTile>
         </div>

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

@@ -11,7 +11,7 @@ const benefitDescStyleMap: Record<BlockVersion, string> = {
   secondary: 'text-white',
 };
 
-export function renderBenefit(benefit: Benefit, i: number, version: string) {
+export function renderBenefit(benefit: Benefit, i: number, version: BlockVersion) {
   return (
     <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
       {benefit.icon && (
@@ -21,6 +21,7 @@ export function renderBenefit(benefit: Benefit, i: number, version: string) {
           width="24"
           height="24"
           asSVG
+          color={version}
         />
       )}
       <div className={`font-medium text-m-title-xs m-0 ${benefitTitleStyleMap[version]}`}>

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -27,6 +27,9 @@ export interface ProductGalleryContent {
    * @hidden //! temporary not used
    */
   duration?: number;
-  /** @title Слайды */
+  /**
+   * @title Слайды
+   * @minItems 2
+   */
   slides?: ProductSlide[];
 }

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -1,9 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
-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 { TariffsTableCellData } from './TariffsTableContent';
+import { List } from '../../ui-kit/List/List';
+import type { TariffsTableCellData, TariffsTableList } from './TariffsTableContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export interface TariffsTableCellProps {
   cell: TariffsTableCellData[];
@@ -32,31 +33,31 @@ const renderCellInner = (
     )}
     {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
     {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
-    {list?.items?.length ? (
-      <div className="flex flex-col justify-between items-start">
-        <div role="list">
-          {list.items.map((text, idx) => (
-            <BlockItem
-              className="text-sm"
-              key={String(idx)}
-              text={text}
-              version="gray"
-              isDotted={list.isDotted ?? true}
-            />
-          ))}
-        </div>
-      </div>
-    ) : null}
+    {list?.items?.length ? renderList(list) : null}
     {image && <Img image={image} />}
-    {buttons?.length
-      ? buttons.map(({ icon, ...buttonProps }, idx) => (
-          <Button
-            className={`${idx > 0 ? 'ml-3' : ''} w-12 h-12`}
-            key={String(idx)}
-            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
-            {...buttonProps}
-          />
-        ))
-      : null}
+    {buttons?.length ? renderButtons(buttons) : null}
+  </div>
+);
+
+const renderList = (list: TariffsTableList) => (
+  <List
+    className="flex flex-col justify-between items-start text-sm"
+    version="gray"
+    items={list.items}
+    isDotted={list.isDotted ?? true}
+  />
+);
+
+const renderButtons = (buttons: ButtonWithIconProps[]) => (
+  <div>
+    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      <Button
+        className={`${idx > 0 && rounded ? 'ml-3' : ''} w-12 h-12`}
+        key={String(idx)}
+        rounded={rounded}
+        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        {...buttonProps}
+      />
+    ))}
   </div>
 );

package/src/components/TariffsTable/TariffsTableContent.ts

@@ -56,7 +56,7 @@ export type TariffsTableContent = HeadingContent &
     columns?: TariffsTableColumn[];
     /** @title Параметры */
     rowHeaders?: TariffsTableRowHeader[];
-    /** @title Направление таблицы (моб.) */
+    /** @title Отображать элементы в моб. версии (прокрутка shift+mouseScroll) */
     orientation?: ListOrientation;
   };
 

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -1,10 +1,15 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { TableTileHeader } from './TableTileHeader';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Img } from '../../ui-kit/Img/Img';
 import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
-import type { TariffsTableCellData, TariffsTableTileCellProps } from './TariffsTableContent';
+import { List } from '../../ui-kit/List/List';
+import type {
+  TariffsTableCellData,
+  TariffsTableList,
+  TariffsTableTileCellProps,
+} from './TariffsTableContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 export const TariffsTableTileCell = JSX<TariffsTableTileCellProps>(({ header, data }) => {
   return (
@@ -27,35 +32,32 @@ const renderCellInner = (
     {description ? (
       <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
     ) : null}
-    {list?.items?.length ? (
-      <div className="flex flex-col justify-between items-start">
-        <div role="list">
-          {list.items.map((text, idx) => (
-            <BlockItem
-              className="text-m-sm"
-              key={String(idx)}
-              text={text}
-              version="gray"
-              isDotted={list.isDotted ?? true}
-            />
-          ))}
-        </div>
-      </div>
-    ) : null}
+    {list?.items?.length ? renderList(list) : null}
     {image && <Img image={{ ...image, className: 'm-0' }} />}
-    {buttons?.length ? (
-      <div>
-        {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
-          <Button
-            className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
-            key={String(idx)}
-            rounded={rounded}
-            appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
-            {...buttonProps}
-            aria-label={icon}
-          />
-        ))}
-      </div>
-    ) : null}
+    {buttons?.length ? renderButtons(buttons) : null}
+  </div>
+);
+
+const renderList = (list: TariffsTableList) => (
+  <List
+    className="flex flex-col justify-between items-start text-m-sm"
+    version="gray"
+    items={list.items}
+    isDotted={list.isDotted ?? true}
+  />
+);
+
+const renderButtons = (buttons: ButtonWithIconProps[]) => (
+  <div>
+    {buttons.map(({ icon, rounded, ...buttonProps }, idx) => (
+      <Button
+        className={`mt-3 ${idx > 0 && rounded ? 'ml-2.5' : ''} ${icon ? 'w-12 h-12' : ''}`}
+        key={String(idx)}
+        rounded={rounded}
+        appendLeft={icon && <Icon name={icon} width="24px" height="24px" asSVG />}
+        {...buttonProps}
+        aria-label={icon}
+      />
+    ))}
   </div>
 );

package/src/components/TextBlock/TextBlock.example.json

@@ -9,5 +9,6 @@
       "width": 43,
       "height": 43
     }
-  }
+  },
+  "isDotted": true
 }

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

@@ -75,6 +75,14 @@ export default {
               iconVersion="small"
               items={items}
             />
+            <TextBlock
+              context={mobileContext}
+              title="Все карты Россельхозбанка работают"
+              description="Если не планируете поездку за границу, продолжайте пользоваться картой Своя. Для поездок за границу"
+              blockVersion="secondary-light"
+              iconVersion="small"
+              items={items}
+            />
           </div>
         </div>
         <div>

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -55,10 +55,10 @@ export const TextBlock = JSX<TextBlockProps>(
           ) : null}
           {items?.length ? (
             <List
-              className="mt-1"
+              className="mt-1 text-m-md"
               items={items}
               isDotted={isDotted}
-              version={blockVersion.indexOf('secondary') !== -1 ? 'secondary' : 'gray'}
+              version={blockVersion === 'secondary' ? 'secondary' : 'gray'}
             />
           ) : null}
         </div>

package/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/src/icons/IconName.ts

@@ -1,9 +1,82 @@
-
 // Generated. Do not touch
 /* eslint-disable max-lines */
 
 export enum IconMap {
-  ActualBalanceIcon = "ActualBalanceIcon", AppleIcon = "AppleIcon", ArrowDownIcon = "ArrowDownIcon", ArrowsRewindRight = "ArrowsRewindRight", ArrowUpIcon = "ArrowUpIcon", AtmIcon = "AtmIcon", BankIcon = "BankIcon", BurgerIcon = "BurgerIcon", BurgerIconWhite = "BurgerIconWhite", Calendar2Icon = "Calendar2Icon", CalendarCircleIcon = "CalendarCircleIcon", CalendarIcon = "CalendarIcon", CalendarTickIcon = "CalendarTickIcon", CalendarWhiteIcon = "CalendarWhiteIcon", CardIcon = "CardIcon", CardPosIcon = "CardPosIcon", CardTickIcon = "CardTickIcon", CardWithGemIcon = "CardWithGemIcon", ChartSquareIcon = "ChartSquareIcon", ClockIcon = "ClockIcon", CloseIcon = "CloseIcon", ComfortableCompIcon = "ComfortableCompIcon", CreditCardsIcon = "CreditCardsIcon", DiscountShapeIcon = "DiscountShapeIcon", DocIcon = "DocIcon", DocIconMonoColor = "DocIconMonoColor", DocumentTextIcon = "DocumentTextIcon", DollarIcon = "DollarIcon", EarthIcon = "EarthIcon", EmptyWalletChangeIcon = "EmptyWalletChangeIcon", EmptyWalletIcon = "EmptyWalletIcon", EmptyWalletWhiteIcon = "EmptyWalletWhiteIcon", EuroIcon = "EuroIcon", GeolocationIcon = "GeolocationIcon", GlassIcon = "GlassIcon", GlobalIcon = "GlobalIcon", GpsIcon = "GpsIcon", GridIcon = "GridIcon", GridIconWhite = "GridIconWhite", InterestGrowthIcon = "InterestGrowthIcon", InterestIcon = "InterestIcon", JCBIcon = "JCBIcon", LoupeIcon = "LoupeIcon", MasterCardIcon = "MasterCardIcon", MinusIcon = "MinusIcon", MirIcon = "MirIcon", MoneyIcon = "MoneyIcon", MoneyInsuranceIcon = "MoneyInsuranceIcon", MonitorMobileIcon = "MonitorMobileIcon", NewDocIcon = "NewDocIcon", OfficeIcon = "OfficeIcon", OkIcon = "OkIcon", PassSendIcon = "PassSendIcon", PercentageRoundIcon = "PercentageRoundIcon", PercentageSquareIcon = "PercentageSquareIcon", PercentageSquareWhiteIcon = "PercentageSquareWhiteIcon", PersonalCardIcon = "PersonalCardIcon", PlayMarketIcon = "PlayMarketIcon", PlusIcon = "PlusIcon", Profile2UserIcon = "Profile2UserIcon", ProfileIcon = "ProfileIcon", RoundRubleIcon = "RoundRubleIcon", SafeIcon = "SafeIcon", ShieldTickIcon = "ShieldTickIcon", SignDocsIcon = "SignDocsIcon", SmallClockIcon = "SmallClockIcon", TelegramIcon = "TelegramIcon", UnionPayIcon = "UnionPayIcon", UserTickIcon = "UserTickIcon", VisaIcon = "VisaIcon", VKIcon = "VKIcon", WalletAdd2Icon = "WalletAdd2Icon", WalletAddIcon = "WalletAddIcon", WalletIcon = "WalletIcon", WalletWithMoneyIcon = "WalletWithMoneyIcon"
+  ActualBalanceIcon = 'ActualBalanceIcon',
+  AppleIcon = 'AppleIcon',
+  ArrowDownIcon = 'ArrowDownIcon',
+  ArrowsRewindRight = 'ArrowsRewindRight',
+  ArrowUpIcon = 'ArrowUpIcon',
+  AtmIcon = 'AtmIcon',
+  BankIcon = 'BankIcon',
+  BurgerIcon = 'BurgerIcon',
+  BurgerIconWhite = 'BurgerIconWhite',
+  Calendar2Icon = 'Calendar2Icon',
+  CalendarCircleIcon = 'CalendarCircleIcon',
+  CalendarIcon = 'CalendarIcon',
+  CalendarTickIcon = 'CalendarTickIcon',
+  CalendarWhiteIcon = 'CalendarWhiteIcon',
+  CardIcon = 'CardIcon',
+  CardPosIcon = 'CardPosIcon',
+  CardTickIcon = 'CardTickIcon',
+  CardWithGemIcon = 'CardWithGemIcon',
+  ChartSquareIcon = 'ChartSquareIcon',
+  ClockIcon = 'ClockIcon',
+  CloseIcon = 'CloseIcon',
+  ComfortableCompIcon = 'ComfortableCompIcon',
+  CreditCardsIcon = 'CreditCardsIcon',
+  DiscountShapeIcon = 'DiscountShapeIcon',
+  DocIcon = 'DocIcon',
+  DocIconMonoColor = 'DocIconMonoColor',
+  DocumentTextIcon = 'DocumentTextIcon',
+  DollarIcon = 'DollarIcon',
+  EarthIcon = 'EarthIcon',
+  EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
+  EmptyWalletIcon = 'EmptyWalletIcon',
+  EmptyWalletWhiteIcon = 'EmptyWalletWhiteIcon',
+  EuroIcon = 'EuroIcon',
+  GeolocationIcon = 'GeolocationIcon',
+  GlassIcon = 'GlassIcon',
+  GlobalIcon = 'GlobalIcon',
+  GpsIcon = 'GpsIcon',
+  GridIcon = 'GridIcon',
+  GridIconWhite = 'GridIconWhite',
+  InterestGrowthIcon = 'InterestGrowthIcon',
+  InterestIcon = 'InterestIcon',
+  JCBIcon = 'JCBIcon',
+  LoupeIcon = 'LoupeIcon',
+  MasterCardIcon = 'MasterCardIcon',
+  MinusIcon = 'MinusIcon',
+  MirIcon = 'MirIcon',
+  MoneyIcon = 'MoneyIcon',
+  MoneyInsuranceIcon = 'MoneyInsuranceIcon',
+  MonitorMobileIcon = 'MonitorMobileIcon',
+  NewDocIcon = 'NewDocIcon',
+  OfficeIcon = 'OfficeIcon',
+  OkIcon = 'OkIcon',
+  PassSendIcon = 'PassSendIcon',
+  PercentageRoundIcon = 'PercentageRoundIcon',
+  PercentageSquareIcon = 'PercentageSquareIcon',
+  PercentageSquareWhiteIcon = 'PercentageSquareWhiteIcon',
+  PersonalCardIcon = 'PersonalCardIcon',
+  PlayMarketIcon = 'PlayMarketIcon',
+  PlusIcon = 'PlusIcon',
+  Profile2UserIcon = 'Profile2UserIcon',
+  ProfileIcon = 'ProfileIcon',
+  RoundRubleIcon = 'RoundRubleIcon',
+  SafeIcon = 'SafeIcon',
+  ShieldTickIcon = 'ShieldTickIcon',
+  SignDocsIcon = 'SignDocsIcon',
+  SmallClockIcon = 'SmallClockIcon',
+  TelegramIcon = 'TelegramIcon',
+  UnionPayIcon = 'UnionPayIcon',
+  UserTickIcon = 'UserTickIcon',
+  VisaIcon = 'VisaIcon',
+  VKIcon = 'VKIcon',
+  WalletAdd2Icon = 'WalletAdd2Icon',
+  WalletAddIcon = 'WalletAddIcon',
+  WalletIcon = 'WalletIcon',
+  WalletWithMoneyIcon = 'WalletWithMoneyIcon',
 }
 
 export enum IconTitleMap {
@@ -92,4 +165,80 @@ export enum IconTitleMap {
  *   "Деньги", "Лого «Apple»", "ArrowDownIcon", "ArrowsRewindRight", "ArrowUpIcon", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
  * ]
  */
-export type IconName = "" | "ActualBalanceIcon" | "AppleIcon" | "ArrowDownIcon" | "ArrowsRewindRight" | "ArrowUpIcon" | "AtmIcon" | "BankIcon" | "BurgerIcon" | "BurgerIconWhite" | "Calendar2Icon" | "CalendarCircleIcon" | "CalendarIcon" | "CalendarTickIcon" | "CalendarWhiteIcon" | "CardIcon" | "CardPosIcon" | "CardTickIcon" | "CardWithGemIcon" | "ChartSquareIcon" | "ClockIcon" | "CloseIcon" | "ComfortableCompIcon" | "CreditCardsIcon" | "DiscountShapeIcon" | "DocIcon" | "DocIconMonoColor" | "DocumentTextIcon" | "DollarIcon" | "EarthIcon" | "EmptyWalletChangeIcon" | "EmptyWalletIcon" | "EmptyWalletWhiteIcon" | "EuroIcon" | "GeolocationIcon" | "GlassIcon" | "GlobalIcon" | "GpsIcon" | "GridIcon" | "GridIconWhite" | "InterestGrowthIcon" | "InterestIcon" | "JCBIcon" | "LoupeIcon" | "MasterCardIcon" | "MinusIcon" | "MirIcon" | "MoneyIcon" | "MoneyInsuranceIcon" | "MonitorMobileIcon" | "NewDocIcon" | "OfficeIcon" | "OkIcon" | "PassSendIcon" | "PercentageRoundIcon" | "PercentageSquareIcon" | "PercentageSquareWhiteIcon" | "PersonalCardIcon" | "PlayMarketIcon" | "PlusIcon" | "Profile2UserIcon" | "ProfileIcon" | "RoundRubleIcon" | "SafeIcon" | "ShieldTickIcon" | "SignDocsIcon" | "SmallClockIcon" | "TelegramIcon" | "UnionPayIcon" | "UserTickIcon" | "VisaIcon" | "VKIcon" | "WalletAdd2Icon" | "WalletAddIcon" | "WalletIcon" | "WalletWithMoneyIcon";
+export type IconName =
+  | ''
+  | 'ActualBalanceIcon'
+  | 'AppleIcon'
+  | 'ArrowDownIcon'
+  | 'ArrowsRewindRight'
+  | 'ArrowUpIcon'
+  | 'AtmIcon'
+  | 'BankIcon'
+  | 'BurgerIcon'
+  | 'BurgerIconWhite'
+  | 'Calendar2Icon'
+  | 'CalendarCircleIcon'
+  | 'CalendarIcon'
+  | 'CalendarTickIcon'
+  | 'CalendarWhiteIcon'
+  | 'CardIcon'
+  | 'CardPosIcon'
+  | 'CardTickIcon'
+  | 'CardWithGemIcon'
+  | 'ChartSquareIcon'
+  | 'ClockIcon'
+  | 'CloseIcon'
+  | 'ComfortableCompIcon'
+  | 'CreditCardsIcon'
+  | 'DiscountShapeIcon'
+  | 'DocIcon'
+  | 'DocIconMonoColor'
+  | 'DocumentTextIcon'
+  | 'DollarIcon'
+  | 'EarthIcon'
+  | 'EmptyWalletChangeIcon'
+  | 'EmptyWalletIcon'
+  | 'EmptyWalletWhiteIcon'
+  | 'EuroIcon'
+  | 'GeolocationIcon'
+  | 'GlassIcon'
+  | 'GlobalIcon'
+  | 'GpsIcon'
+  | 'GridIcon'
+  | 'GridIconWhite'
+  | 'InterestGrowthIcon'
+  | 'InterestIcon'
+  | 'JCBIcon'
+  | 'LoupeIcon'
+  | 'MasterCardIcon'
+  | 'MinusIcon'
+  | 'MirIcon'
+  | 'MoneyIcon'
+  | 'MoneyInsuranceIcon'
+  | 'MonitorMobileIcon'
+  | 'NewDocIcon'
+  | 'OfficeIcon'
+  | 'OkIcon'
+  | 'PassSendIcon'
+  | 'PercentageRoundIcon'
+  | 'PercentageSquareIcon'
+  | 'PercentageSquareWhiteIcon'
+  | 'PersonalCardIcon'
+  | 'PlayMarketIcon'
+  | 'PlusIcon'
+  | 'Profile2UserIcon'
+  | 'ProfileIcon'
+  | 'RoundRubleIcon'
+  | 'SafeIcon'
+  | 'ShieldTickIcon'
+  | 'SignDocsIcon'
+  | 'SmallClockIcon'
+  | 'TelegramIcon'
+  | 'UnionPayIcon'
+  | 'UserTickIcon'
+  | 'VisaIcon'
+  | 'VKIcon'
+  | 'WalletAdd2Icon'
+  | 'WalletAddIcon'
+  | 'WalletIcon'
+  | 'WalletWithMoneyIcon';

package/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/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/src/ui-kit/Img/Img.tsx

@@ -14,6 +14,9 @@ export const Img = JSX<ImageProps>(
       height: size?.height ? `${size?.height}px` : '100%',
     };
 
+    const title = image.title || '';
+    const alt = image.alt || title;
+
     return (
       <picture className={`flex-none ${className}`}>
         {image.sources?.length
@@ -24,8 +27,8 @@ export const Img = JSX<ImageProps>(
         <img
           className={imageClassName}
           src={image.src}
-          alt={image.alt || image.title}
-          title={image.title}
+          alt={alt}
+          title={title}
           style={style}
           {...size}
         />

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

@@ -0,0 +1,37 @@
+import '../../setup-fixture';
+import { List } from './List';
+
+const items = ['List Item #1', 'List Item #2', 'List Item #3', 'List Item #4'];
+
+export default {
+  'primary dotted (default)': (
+    <div className="bg-white p-12">
+      <List items={items} />
+    </div>
+  ),
+  'primary w/o dots': (
+    <div className="bg-white p-12">
+      <List items={items} isDotted={false} />
+    </div>
+  ),
+  'secondary dotted': (
+    <div className="bg-primary-main p-12">
+      <List items={items} version="secondary" />
+    </div>
+  ),
+  'secondary w/o dots': (
+    <div className="bg-primary-main p-12">
+      <List items={items} version="secondary" isDotted={false} />
+    </div>
+  ),
+  'gray dotted': (
+    <div className="bg-white p-12">
+      <List items={items} version="gray" />
+    </div>
+  ),
+  'gray w/o dots': (
+    <div className="bg-white p-12">
+      <List items={items} version="gray" isDotted={false} />
+    </div>
+  ),
+};