@redneckz/wildless-cms-uni-blocks 0.2.96 → 0.2.97

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img';
@@ -8,8 +9,32 @@ import type { ProductBlockInnerCommonProps } from './ProductBlockContent';
 
 export interface ProductBlockInnerProps extends ProductBlockInnerCommonProps, UniBlockProps {}
 
+const benefitIconBgStyleMap: Record<BlockVersion, string> = {
+  primary: 'bg-main',
+  secondary: 'bg-white/30',
+};
+const benefitTitleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const benefitDescStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
 export const ProductBlockInner = JSX<ProductBlockInnerProps>(
-  ({ className, context, title, titleSize, description, benefits, buttons, image, items }) => {
+  ({
+    className,
+    context,
+    title,
+    titleSize,
+    description,
+    benefits,
+    buttons,
+    image,
+    items,
+    version = 'primary',
+  }) => {
     return (
       <div className={`flex grow justify-between items-stretch ${className || ''}`}>
         <div className={'flex flex-col'}>
@@ -20,9 +45,12 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             description={description}
             items={items}
             buttons={buttons}
+            version={version}
           >
             {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-3.5">{benefits.map(renderBenefit)}</div>
+              <div className="flex gap-6 mt-6 mb-3.5">
+                {benefits.map((_, i) => renderBenefit(_, i, version))}
+              </div>
             ) : null}
           </BaseTile>
         </div>
@@ -32,21 +60,25 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
   },
 );
 
-function renderBenefit(benefit: Benefit, i: number) {
+function renderBenefit(benefit: Benefit, i: number, version: string) {
   return (
     <div key={String(i)} className="flex gap-4 items-center">
       {benefit.icon && (
         <Icon
-          className="w-[50px] h-[50px] min-w-[50px] min-h-[50px] bg-main rounded-full p-[10px] box-border"
+          className={`w-[50px] h-[50px] min-w-[50px] min-h-[50px] rounded-full p-[10px] box-border ${benefitIconBgStyleMap[version]}`}
           name={benefit.icon}
           width="24"
           height="24"
         />
       )}
       <div className="flex gap-1 flex-col h-full max-w-[149px]">
-        <h4 className="font-medium text-primary-text text-xl m-0">{benefit.label}</h4>
+        <h4 className={`font-medium text-xl m-0 ${benefitTitleStyleMap[version]}`}>
+          {benefit.label}
+        </h4>
         {benefit.description && (
-          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+          <div className={`font-normal text-sm ${benefitDescStyleMap[version]}`}>
+            {benefit.description}
+          </div>
         )}
       </div>
     </div>

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

@@ -23,7 +23,7 @@
   ],
   "buttons": [
     {
-      "text": "Подробнее",
+      "text": "Кнопка",
       "version": "primary"
     }
   ]

package/src/components/ProductTile/ProductTileContent.ts

@@ -4,7 +4,7 @@ import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 /**
  * @title Продуктовая плитка
  */
-export interface ProductTileContent extends BaseTileCommonProps {
+export interface ProductTileContent extends Omit<BaseTileCommonProps, 'align'> {
   /** @title Преимущества */
-  benefits?: Benefit[];
+  benefits?: Omit<Benefit, 'icon'>[];
 }

package/src/components/TextBlock/TextBlockContent.ts

@@ -18,6 +18,7 @@ export type TextBlockIconVersion = 'none' | 'small' | 'big';
 export interface TextBlockContent {
   /** @title Заголовок */
   title?: string;
+  /** @title Описание */
   description?: string;
   iconVersion?: TextBlockIconVersion;
   image?: Picture;

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

@@ -13,7 +13,7 @@
   "items": ["Пункт 1", "Пункт 2", "Пункт 3"],
   "buttons": [
     {
-      "text": "Подробнее",
+      "text": "Кнопка",
       "version": "primary"
     }
   ],

package/src/components/Tile/TileContent.ts

@@ -3,4 +3,4 @@ import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
 /**
  * @title Плитка
  */
-export type TileContent = BaseTileCommonProps;
+export type TileContent = Omit<BaseTileCommonProps, 'align'>;

package/src/icons/AppleIcon.svg

@@ -1 +1 @@
-<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="#42AB44"/></svg>
+<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 24"><path d="M18.406 12.761c-.023-3.028 2.793-4.511 2.93-4.572-1.603-2.073-4.075-2.357-4.968-2.377-2.083-.204-4.098 1.117-5.174 1.117-1.076 0-2.725-1.097-4.488-1.056-2.266.04-4.395 1.198-5.563 3.007-2.404 3.698-.618 9.124 1.694 12.09 1.145 1.464 2.496 3.09 4.259 3.028 1.717-.06 2.358-.975 4.441-.975 2.06 0 2.656.975 4.465.935 1.854-.02 3.022-1.463 4.12-2.947 1.329-1.666 1.855-3.332 1.878-3.413 0 0-3.549-1.2-3.594-4.837Zm-3.389-8.92c.916-1.037 1.557-2.419 1.374-3.841-1.35.061-3.022.833-3.984 1.829-.847.894-1.625 2.337-1.42 3.698 1.512.102 3.069-.67 4.03-1.686Z" fill="currentColor"/></svg>

package/src/icons/CalendarWhiteIcon.svg

@@ -0,0 +1,17 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-miterlimit="10"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M8 2v3M16 2v3M3.5 9.09h17M3 13.01V8.5c0-3 1.5-5 5-5h8c3.5 0 5 2 5 5V17c0 3-1.5 5-5 5H8c-3.5 0-5-2-5-5"
+  />
+  <path
+    stroke="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M15.991 13h.018M15.991 17.006h.018M11.991 13h.018M11.991 17.006h.018M7.991 13h.018M7.991 17.006h.018"
+  />
+</svg>

package/src/icons/EmptyWalletWhiteIcon.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M2.5 14.07v-2.56c0-2.07 1.69-3.76 3.76-3.76h11.48c2.07 0 3.76 1.69 3.76 3.76v1.44h-2.02c-.56 0-1.07.22-1.44.6-.42.41-.66 1-.6 1.63.09 1.08 1.08 1.87 2.16 1.87h1.9v1.19c0 2.07-1.69 3.76-3.76 3.76H6.26c-2.07 0-3.76-1.69-3.76-3.76M12.28 2.17a1.9 1.9 0 0 1 2.57 1.78v3.8"
+  />
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M2.5 12.41V7.84c0-1.19.73-2.25 1.84-2.67l3.97-1.5M22.56 13.97v2.06c0 .55-.44 1-1 1.02H19.6c-1.08 0-2.07-.79-2.16-1.87-.06-.63.18-1.22.6-1.63.37-.38.88-.6 1.44-.6h2.08c.56.02 1 .47 1 1.02ZM7 12h7"
+  />
+</svg>

package/src/icons/GridIcon.svg

@@ -1,4 +1,4 @@
 <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 33">
-    <rect width="32" height="32" y=".5" rx="16"/>
+    <rect fill="#F5F7F9" width="32" height="32" y=".5" rx="16"/>
     <path fill="#1C1C1C" d="M13 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM13 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM11.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 11.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM16.5 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM18 21.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3ZM23 16.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM21.5 23a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"/>
-</svg>
+</svg>

package/src/icons/PercentageSquareWhiteIcon.svg

@@ -0,0 +1,16 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M2 13.05V15c0 5 2 7 7 7h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9M8.32 15.27l6.54-6.54"
+  />
+  <path
+    stroke="#fff"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M8.73 10.37a1.23 1.23 0 1 0 0-2.46 1.23 1.23 0 0 0 0 2.46ZM15.27 16.09a1.23 1.23 0 1 0 0-2.46 1.23 1.23 0 0 0 0 2.46Z"
+  />
+  </svg>

package/src/icons/PlayMarketIcon.svg

@@ -1 +1 @@
-<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M0 21.427V1.576C0 .883.447.284 1.094 0L13.85 11.498 1.089 23a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 0 21.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM3.959.598l13.938 7.253-2.945 2.654L3.958.598Z" fill="#42AB44"/></svg>
+<svg id="icon" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><path d="M0 21.427V1.576C0 .883.447.284 1.094 0L13.85 11.498 1.089 23a1.89 1.89 0 0 1-.795-.646A1.625 1.625 0 0 1 0 21.427Zm17.899-6.282-13.95 7.259 11.002-9.915 2.948 2.656Zm4.335-5.035c.237.162.428.37.561.61.133.239.203.502.205.77.002.267-.064.53-.193.771s-.317.452-.551.617l-2.964 1.542-3.241-2.922 3.24-2.92 2.944 1.532ZM3.959.598l13.938 7.253-2.945 2.654L3.958.598Z" fill="currentColor"/></svg>

package/src/model/ButtonVersion.ts

@@ -1,5 +1,6 @@
 /**
  * @title Цвет кнопки
+ * @default primary
  * @enumNames ["Основная", "Второстепенная"]
  */
 export type ButtonVersion = 'primary' | 'secondary';

package/src/model/LinkProps.ts

@@ -1,13 +1,14 @@
 /**
  * @title Таргет (target)
  * @enumNames [
+ *    "",
  *    "self (текущее окно или фрейм)",
  *    "blank (новое окно)",
  *    "parent (фрейм-родитель)",
  *    "top (текущее окно)"
  *  ]
  */
-export type Target = '_blank' | '_self' | '_parent' | '_top';
+export type Target = '' | '_self' | '_blank' | '_parent' | '_top';
 
 /**
  * @title Ссылка

package/src/ui-kit/Button/ButtonProps.ts

@@ -13,7 +13,10 @@ export interface ButtonAdditionalProps {
 }
 
 export interface ButtonProps extends ButtonAdditionalProps, LinkProps {
-  /** @title Текст */
+  /**
+   * @title Текст
+   * @default Кнопка
+   */
   text?: string;
   version?: ButtonVersion;
 }
@@ -25,4 +28,6 @@ export interface ButtonWithIconProps extends ButtonProps {
   appendLeft?: any;
   /** @hidden */
   rounded?: boolean;
+  /** @hidden */
+  asSVG?: boolean;
 }

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

@@ -3,7 +3,7 @@ import { projectSettings } from '../../ProjectSettings';
 import type { IconProps } from './IconProps';
 
 export const Icon = JSX<IconProps>(
-  ({ className, name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
+  ({ className = '', name, alt = `Icon ${name}`, title = alt, asSVG, ...imgProps }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
 
     if (asSVG) {

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

@@ -2,10 +2,12 @@
  * Icons sorted by name
  */
 export enum IconMap {
+  '',
   'ActualBalanceIcon',
   'AppleIcon',
   'CalendarCircleIcon',
   'CalendarIcon',
+  'CalendarWhiteIcon',
   'CardIcon',
   'CardPosIcon',
   'CardTickIcon',
@@ -17,6 +19,7 @@ export enum IconMap {
   'DollarIcon',
   'EmptyWalletChangeIcon',
   'EmptyWalletIcon',
+  'EmptyWalletWhiteIcon',
   'EuroIcon',
   'GlassIcon',
   'GridIcon',
@@ -31,6 +34,7 @@ export enum IconMap {
   'OkIcon',
   'PassSendIcon',
   'PercentageSquareIcon',
+  'PercentageSquareWhiteIcon',
   'PlayMarketIcon',
   'PlusIcon',
   'Profile2UserIcon',
@@ -48,10 +52,12 @@ export enum IconMap {
 /**
  * @title Иконка
  * @enumNames [
+ *    "",
  *    "Деньги",
  *    "Лого «Apple»",
  *    "Скруглённый календарь",
  *    "Календарь",
+ *    "Календарь белый",
  *    "Кред. карта",
  *    "Кред. карта под наклоном",
  *    "Кред. карта с галочкой",
@@ -63,6 +69,7 @@ export enum IconMap {
  *    "Доллар",
  *    "Пустой кошелёк с возвратом",
  *    "Пустой кошелёк",
+ *    "Пустой кошелёк белый",
  *    "Евро",
  *    "Зеркало",
  *    "Сетка",
@@ -77,6 +84,7 @@ export enum IconMap {
  *    "Лого «Одноклассники»",
  *    "Бизнес",
  *    "Проценты",
+ *    "Проценты белые",
  *    "Лого «PlayMarket»",
  *    "Плюс",
  *    "Профиль, 2 персоны",

package/src/ui-kit/Img.tsx

@@ -6,16 +6,29 @@ export interface TextWithImageProps {
   image: Picture;
 }
 
-export const Img = JSX<TextWithImageProps>(({ className, image }) => (
-  <picture className={`${className || ''}`}>
-    {image.sources?.length
-      ? image.sources.map(({ src, format }, index) => (
-          <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
-        ))
-      : null}
-    <img src={image.src} alt={image.alt || image.title} title={image.title} {...image?.size} />
-  </picture>
-));
+export const Img = JSX<TextWithImageProps>(({ className, image: { size, ...image } }) => {
+  const style = {
+    width: size?.width ? `${size?.width}px` : '100%',
+    height: size?.height ? `${size?.height}px` : '100%',
+  };
+
+  return (
+    <picture className={`flex-none ${className || ''}`}>
+      {image.sources?.length
+        ? image.sources.map(({ src, format }, index) => (
+            <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+          ))
+        : null}
+      <img
+        src={image.src}
+        alt={image.alt || image.title}
+        title={image.title}
+        style={style}
+        {...size}
+      />
+    </picture>
+  );
+});
 
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;