@redneckz/wildless-cms-uni-blocks 0.3.58 → 0.3.60

package/mobile/src/components/Insurance/Insurance.tsx

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { InsuranceContent } from './InsuranceContent';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+
+export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
+
+export const Insurance = JSX<InsuranceProps>(
+  ({ className = '', title, description, image, benefits, insuranceSum, monthLimit }) => {
+    return (
+      <section className={`px-[100px] py-[50px] bg-white text-primary-text ${className}`}>
+        {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
+        {description ? <div className="text-center text-md mt-3">{description}</div> : null}
+        <div>
+          <div className="mt-5 mx-auto flex justify-center gap-[120px] mt-[30px]">
+            {image?.src ? <Img image={image} /> : null}
+            <div className="w-[558px] m-auto">
+              {benefits ? (
+                <div className="flex flex-col gap-4">{benefits.map(renderBenefit)}</div>
+              ) : null}
+
+              <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
+                {insuranceSum
+                  ? renderValueBlock('Страховая сумма:', insuranceSum, Boolean(monthLimit))
+                  : null}
+                {monthLimit
+                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(insuranceSum))
+                  : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex items-center gap-5">
+      {benefit?.icon ? (
+        <Img
+          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-secondary-light"
+          image={benefit.icon}
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
+      <div className="flex">
+        <div className="text-title-2xs">{benefit.label}</div>
+      </div>
+    </div>
+  );
+}
+
+function renderValueBlock(title, sum, isAnotherBlock) {
+  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+  return (
+    <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
+      <span className="text-secondary-text text-base">{title}</span>
+      <span className="text-primary-main text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
+    </div>
+  );
+}

package/mobile/src/components/Insurance/InsuranceContent.ts

@@ -0,0 +1,14 @@
+import type { Picture } from '../../model/Picture';
+import type { BenefitsBlockContent } from '../BenefitsBlock/BenefitsBlockContent';
+
+export type InsuranceContent = BenefitsBlockContent & {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  insuranceSum?: number;
+  image?: Picture;
+};

package/mobile/src/components/Insurance/Insuranse.example.json

@@ -0,0 +1,36 @@
+{
+  "title": "Страховые риски и продукты",
+  "description": "Описание",
+  "insurance": 500000,
+  "limit": null,
+  "image": {
+    "src": "insurance.png",
+    "title": "страхование",
+    "format": "webp",
+    "alt": "страхование",
+    "size": {
+      "width": 400,
+      "height": 300
+    },
+    "sources": [
+      {
+        "src": "insurance.png 1x, insurance-2x.png 2x",
+        "format": "png"
+      }
+    ]
+  },
+  "benefits": [
+    {
+      "label": "Пункт 1",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    },
+    {
+      "label": "Пункт 2",
+      "icon": {
+        "icon": "ShieldTickIcon"
+      }
+    }
+  ]
+}

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -8,7 +8,7 @@ import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { TextBenefit } from '../BenefitsBlock/BenefitsBlockContent';
 import type { ProductTileContent } from './ProductTileContent';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
@@ -25,6 +25,7 @@ export const ProductTile = JSX<ProductTileProps>(
     title,
     headingType = 'h3',
     description,
+    additionalDescription,
     benefits,
     buttons,
     image,
@@ -60,23 +61,31 @@ export const ProductTile = JSX<ProductTileProps>(
           {description ? (
             <Description className="mt-4 max-w-[600px]" description={description} />
           ) : null}
-          <div className="flex mt-5 mb-1">
-            {benefits?.length ? (
-              <div className="mr-8">{benefits.map(renderBenefitLabel)}</div>
-            ) : null}
-            {benefits?.length ? (
-              <div className="pt-1">
-                {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
-              </div>
-            ) : null}
-          </div>
+          {renderBenefits(benefits, version)}
+
+          {additionalDescription
+            ? renderAdditionalDescription(additionalDescription, version)
+            : null}
         </BaseTile>
       </section>
     );
   },
 );
 
-function renderBenefitLabel(benefit: Benefit, i: number) {
+function renderBenefits(benefits: TextBenefit[] = [], version: BlockVersion) {
+  return (
+    <div className="flex mt-5 mb-1">
+      {benefits.length ? <div className="mr-8">{benefits.map(renderBenefitLabel)}</div> : null}
+      {benefits.length ? (
+        <div className="pt-1">
+          {benefits.map((_, i) => renderBenefitDescription(_, i, version))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function renderBenefitLabel(benefit: TextBenefit, i: number) {
   return (
     <div key={String(i)} className={`text-xl font-medium ${i ? 'mt-2.5' : ''}`}>
       {benefit.label}
@@ -84,7 +93,7 @@ function renderBenefitLabel(benefit: Benefit, i: number) {
   );
 }
 
-function renderBenefitDescription(benefit: Benefit, i: number, version = 'primary') {
+function renderBenefitDescription(benefit: TextBenefit, i: number, version = 'primary') {
   const labelStyleMap: Record<BlockVersion, string> = {
     primary: 'text-secondary-text',
     secondary: 'text-white',
@@ -95,3 +104,11 @@ function renderBenefitDescription(benefit: Benefit, i: number, version = 'primar
     </div>
   );
 }
+
+function renderAdditionalDescription(additionalDescription: string, version = 'primary') {
+  const descStyleMap: Record<BlockVersion, string> = {
+    primary: 'text-secondary-text',
+    secondary: 'text-white',
+  };
+  return <div className={`text-sm mt-2.5 ${descStyleMap[version]}`}>{additionalDescription}</div>;
+}

package/mobile/src/components/ProductTile/ProductTileContent.ts

@@ -19,4 +19,6 @@ export type ProductTileContent = HeadingContent &
      * @maxItems 7
      */
     benefits?: TextBenefit[];
+    /** @title Дополнительное описание */
+    additionalDescription?: string;
   };

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

@@ -59,7 +59,11 @@ export const Tile = JSX<TileProps>((props) => {
         }
         buttons={
           buttons?.length ? (
-            <ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
+            <ButtonSection
+              context={context}
+              buttons={buttons.map((button) => ({ ...button, className: 'w-[158px]' }))}
+              className="flex mt-9 gap-3"
+            />
           ) : null
         }
         image={image?.src && <Img className="mt-auto ml-7" image={image} />}

package/mobile/src/types.ts

@@ -44,16 +44,10 @@ export interface ContentPageMeta {
   jsonLd?: string;
 }
 
-export interface CustomPageTemplate {
-  content?: Record<string, any>;
-  type?: string;
-}
-
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
   blocks?: BlockDef[];
   slots?: SlotsMap;
-  customPageTmpl?: CustomPageTemplate;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }

package/mobile/src/ui-kit/Button/ButtonInner.tsx

@@ -7,7 +7,7 @@ interface ButtonInnerProps extends ButtonWithIconProps {
 }
 
 export const ButtonInner = JSX<ButtonInnerProps>((props) => {
-  const { text, aboveText, appendLeft } = props;
+  const { text, aboveText, appendLeft, appendRight } = props;
   return (
     <div className={getButtonStyle(props)}>
       {appendLeft ? appendLeft : null}
@@ -17,6 +17,7 @@ export const ButtonInner = JSX<ButtonInnerProps>((props) => {
           <div className="text-button text-left">{text}</div>
         </div>
       ) : null}
+      {appendRight ? appendRight : null}
     </div>
   );
 });

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

@@ -29,6 +29,8 @@ export interface ButtonWithIconProps extends ButtonProps {
   aboveText?: string;
   /** @hidden */
   appendLeft?: any;
+  /** @hidden */
+  appendRight?: any;
   /** @title Закругленные углы */
   rounded?: boolean;
   /** @hidden */

package/mobile/src/ui-kit/Button/ButtonSection.tsx

@@ -11,7 +11,7 @@ export const ButtonSection = JSX<ButtonSectionProps>(({ context, className = '',
   const { handlerDecorator } = context;
   const router = context.useRouter();
   return buttons?.length ? (
-    <div className={`${className}`}>
+    <div className={className}>
       {buttons.map((button, index) =>
         renderButton(useLink({ router, handlerDecorator }, button), index),
       )}

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

@@ -14,7 +14,7 @@ export const Icon = JSX<IconProps>(
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
-    const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : '';
+    const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : 'text-primary-main';
 
     if (asSVG) {
       return (

package/package.json

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

package/src/components/Blocks.ts

@@ -10,6 +10,7 @@ import { Gallery } from './Gallery/Gallery';
 import { GracePeriod } from './GracePeriod/GracePeriod';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
+import { Insurance } from './Insurance/Insurance';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
@@ -42,6 +43,7 @@ export const Blocks = {
   GracePeriod,
   Header,
   Headline,
+  Insurance,
   LinkDocs,
   MiniGallery,
   MobileAppTile,

package/src/components/ContentPage/ContentPage.page.json

@@ -2149,6 +2149,45 @@
         ]
       }
     },
+    {
+      "type": "Insurance",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Страховые риски и продукты",
+        "description": "Описание",
+        "insuranceSum": 500000,
+        "image": {
+          "src": "insurance.png",
+          "title": "страхование",
+          "format": "webp",
+          "alt": "Страховые риски и продукты",
+          "size": {
+            "width": 400,
+            "height": 300
+          },
+          "sources": [
+            {
+              "src": "insurance.png 1x, insurance-2x.png 2x",
+              "format": "png"
+            }
+          ]
+        },
+        "benefits": [
+          {
+            "label": "Ликвидация организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          },
+          {
+            "label": "Сокращение численности работников организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Footer",
       "style": ["col-span-12"],

package/src/components/GroupBlock/GroupBlock.tsx

@@ -33,9 +33,7 @@ export const GroupBlock = JSX<GroupBlockProps>(
           <GroupBlockTabs currentTag={currentTag} onTabClick={setCurrentTag} tabs={tabsNewMap} />
         ) : null}
         {groupBlocks.length ? (
-          <div className="list-none">
-            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
-          </div>
+          <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
         ) : null}
       </section>
     );

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -15,13 +15,13 @@ export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
   const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
 
   return (
-    <div className={`mb-2 box-border flex gap-x-1 h-12 ${className}`} role="tablist">
+    <div className={`mb-2 box-border flex gap-x-1 ${className}`} role="tablist">
       {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
     </div>
   );
 });
 
-const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-m-sm';
 
 const renderTab =
   (onTabClick: TabClickHandler, isShowCounter: boolean, currentTag?: string) =>
@@ -30,12 +30,12 @@ const renderTab =
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
     const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
     const counterBlockStyle = `${badgeStyle} 
-      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-light text-secondary-text'}`;
 
     return (
       <div
         key={String(i)}
-        className={`flex h-full w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        className={`flex h-full w-full h-12 flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
         role="tab"
         onClick={() => onTabClick(tab.tag)}
         aria-selected={String(isActive)}

package/src/components/Header/Header.fixture.tsx

@@ -4,4 +4,5 @@ import { Header } from './Header';
 export default {
   default: <Header context={context} defaultLocation="Москва" />,
   transparent: <Header context={context} defaultLocation="Москва" bgColor="transparent" />,
+  'no submenu': <Header context={context} defaultLocation="Москва" showSubMenu={false} />,
 };

package/src/components/Header/Header.tsx

@@ -22,6 +22,7 @@ export const Header = JSX<HeaderProps>(
   ({
     className = '',
     defaultLocation = 'Москва',
+    showSubMenu = true,
     bgColor = 'bg-white',
     context,
     topItems,
@@ -58,7 +59,9 @@ export const Header = JSX<HeaderProps>(
             />
           </div>
           <div className={`mt-6 h-[1px] ${BORDER_COLORS[bgColor]}`} />
-          <HeaderSubMenu context={context} subItems={activeTopItem?.items} bgColor={bgColor} />
+          {showSubMenu && activeTopItem?.items?.length ? (
+            <HeaderSubMenu context={context} subItems={activeTopItem.items} bgColor={bgColor} />
+          ) : null}
         </div>
       </header>
     );

package/src/components/Header/HeaderContent.ts

@@ -29,6 +29,12 @@ export interface HeaderContent extends SitemapProps {
    * @default Москва
    */
   defaultLocation?: string;
+  /**
+   * @title Показывать подменю
+   * @hidden
+   * @default true
+   */
+  showSubMenu?: boolean;
   /**
    * @title Фон элемента
    * @hidden

package/src/components/Header/HeaderSubMenu.tsx

@@ -8,6 +8,11 @@ import { isSSR } from '../../utils/isSSR';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
 import { headerSubMenuObserver } from './HeaderSubMenuObserver';
 
+const DOT_BG_COLORS_MAP: Record<BgColorVersion, string> = {
+  'bg-white': 'bg-primary-text',
+  transparent: 'bg-white',
+};
+
 export interface HeaderSubMenuProps {
   context: ContentPageContext;
   subItems?: LinkProps[];
@@ -51,6 +56,7 @@ export const HeaderSubMenu = JSX<HeaderSubMenuProps>(({ context, subItems, bgCol
         subMenuIsShow,
         toggleSubMenu,
         subItems,
+        bgColor,
         router,
         handlerDecorator,
       })}
@@ -63,6 +69,7 @@ const renderDotsSubMenu = ({
   subMenuIsShow,
   toggleSubMenu,
   subItems,
+  bgColor,
   router,
   handlerDecorator,
 }) => (
@@ -77,9 +84,7 @@ const renderDotsSubMenu = ({
       onClick={toggleSubMenu}
       aria-label={`${subMenuIsShow ? 'Скрыть другие разделы' : 'Показать другие разделы'}`}
     >
-      {Array(3)
-        .fill(0)
-        .map((_, i) => renderDot(i))}
+      {Array(3).fill(bgColor).map(renderDot)}
     </button>
     <div
       className={`flex flex-col rounded-md bg-white p-6 pb-2 ${subMenuIsShow ? '' : 'hidden'}`}
@@ -103,6 +108,6 @@ const renderDotsSubMenuItems = (subItems, router, handlerDecorator) =>
     </a>
   ));
 
-const renderDot = (i: number) => (
-  <div key={String(i)} className="w-[3px] h-[3px] rounded bg-black mr-1" />
+const renderDot = (bgColor: BgColorVersion, i: number) => (
+  <div key={String(i)} className={`w-[3px] h-[3px] rounded mr-1 ${DOT_BG_COLORS_MAP[bgColor]}`} />
 );

package/src/components/Insurance/Insurance.fixture.tsx

@@ -0,0 +1,65 @@
+import { Insurance } from './Insurance';
+import { context } from '../../setup-fixture';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Picture } from '../../model/Picture';
+
+const benefits: Benefit[] = [
+  {
+    label: 'Телесное повреждение',
+    icon: { icon: 'ShieldTickIcon' },
+  },
+  {
+    label: 'Госпитализация застрахованного',
+    icon: { icon: 'ShieldTickIcon' },
+  },
+  {
+    label: 'Сокращение численности работников организации',
+    icon: { icon: 'ShieldTickIcon' },
+  },
+  {
+    label: 'Смерть застрахованного',
+    icon: { icon: 'ShieldTickIcon' },
+  },
+];
+
+const image: Picture = {
+  src: 'insurance.png',
+  format: 'webp',
+  alt: 'Страховые риски и продукты',
+  size: {
+    width: 400,
+    height: 300,
+  },
+  sources: [
+    {
+      src: 'insurance.png 1x, insurance-2x.png 2x',
+      format: 'png',
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Insurance
+        context={context}
+        className="col-span-12"
+        title="Страховые риски и продукты"
+        description="Покрываемые риски программы «Защита вас и ваших близких»"
+        benefits={benefits}
+        image={image}
+        insuranceSum={500000}
+      />
+      <Insurance
+        context={context}
+        className="col-span-12"
+        title="Страховые риски и продукты"
+        description="Покрываемые риски программы «Защита вас и ваших близких»"
+        benefits={benefits}
+        image={image}
+        insuranceSum={500000}
+        monthLimit={25000}
+      />
+    </div>
+  ),
+};

package/src/components/Insurance/Insurance.tsx

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { InsuranceContent } from './InsuranceContent';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+
+export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
+
+export const Insurance = JSX<InsuranceProps>(
+  ({ className = '', title, description, image, benefits, insuranceSum, monthLimit }) => {
+    return (
+      <section className={`px-[100px] py-[50px] bg-white text-primary-text ${className}`}>
+        {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
+        {description ? <div className="text-center text-md mt-3">{description}</div> : null}
+        <div>
+          <div className="mt-5 mx-auto flex justify-center gap-[120px] mt-[30px]">
+            {image?.src ? <Img image={image} /> : null}
+            <div className="w-[558px] m-auto">
+              {benefits ? (
+                <div className="flex flex-col gap-4">{benefits.map(renderBenefit)}</div>
+              ) : null}
+
+              <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
+                {insuranceSum
+                  ? renderValueBlock('Страховая сумма:', insuranceSum, Boolean(monthLimit))
+                  : null}
+                {monthLimit
+                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(insuranceSum))
+                  : null}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  },
+);
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex items-center gap-5">
+      {benefit?.icon ? (
+        <Img
+          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-secondary-light"
+          image={benefit.icon}
+          width="24"
+          height="24"
+          asSVG
+        />
+      ) : null}
+      <div className="flex">
+        <div className="text-title-2xs">{benefit.label}</div>
+      </div>
+    </div>
+  );
+}
+
+function renderValueBlock(title, sum, isAnotherBlock) {
+  const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+  return (
+    <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
+      <span className="text-secondary-text text-base">{title}</span>
+      <span className="text-primary-main text-title-2xs">{addSpacesBetweenNumbers(sum)} ₽</span>
+    </div>
+  );
+}

package/src/components/Insurance/InsuranceContent.ts

@@ -0,0 +1,14 @@
+import type { Picture } from '../../model/Picture';
+import type { BenefitsBlockContent } from '../BenefitsBlock/BenefitsBlockContent';
+
+export type InsuranceContent = BenefitsBlockContent & {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  insuranceSum?: number;
+  image?: Picture;
+};