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

package/mobile/lib/ui-kit/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/ui-kit/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CACrB,CAAC,EACC,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,GAAG,GAAG,UAAU,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAC5C,KAAK,GAAG,GAAG,EACX,WAAW,EACX,KAAK,EACL,GAAG,QAAQ,EACZ,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,GAAG,eAAe,CAAC,GAAG,IAAI,EAAE,SAAS,IAAI,MAAM,CAAC;IAC7D,MAAM,WAAW,GAAG,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvE,IAAI,KAAK,EAAE;QACT,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,KAAM,QAAQ,iBAAc,MAAM,aACxD,KAAK,CAAC,CAAC,CAAC,0BAAQ,KAAK,GAAS,CAAC,CAAC,CAAC,IAAI,EACrC,GAAG,CAAC,CAAC,CAAC,yBAAO,GAAG,GAAQ,CAAC,CAAC,CAAC,IAAI,EAChC,cAAK,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,IAAI,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,OAAO,GAAI,IAC5E,CACP,CAAC;KACH;IAED,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,EACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,KACR,QAAQ,iBACA,MAAM,GAClB,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/ui-kit/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGxD,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CACrB,CAAC,EACC,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,GAAG,GAAG,UAAU,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAC5C,KAAK,GAAG,GAAG,EACX,WAAW,EACX,KAAK,EACL,GAAG,QAAQ,EACZ,EAAE,EAAE;IACH,MAAM,IAAI,GAAG,GAAG,eAAe,CAAC,GAAG,IAAI,EAAE,SAAS,IAAI,MAAM,CAAC;IAC7D,MAAM,WAAW,GAAG,WAAW,KAAK,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC;IAExF,IAAI,KAAK,EAAE;QACT,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,KAAM,QAAQ,iBAAc,MAAM,aACxD,KAAK,CAAC,CAAC,CAAC,0BAAQ,KAAK,GAAS,CAAC,CAAC,CAAC,IAAI,EACrC,GAAG,CAAC,CAAC,CAAC,yBAAO,GAAG,GAAQ,CAAC,CAAC,CAAC,IAAI,EAChC,cAAK,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,IAAI,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,OAAO,GAAI,IAC5E,CACP,CAAC;KACH;IAED,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,IAAI,EACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,KACR,QAAQ,iBACA,MAAM,GAClB,CACH,CAAC;AACJ,CAAC,CACF,CAAC"}

package/mobile/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/mobile/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/mobile/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/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/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.59",
+  "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/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;
+};

package/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/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 (