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

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 (

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

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { BgColorVersion } from '../../model/BgColorVersion';
 import { SVG } from '../SVG';
+import { Img } from '../Img/Img';
+import type { Picture } from '../../model/Picture';
 
 export interface LogoProps {
   className: string;
@@ -8,6 +10,10 @@ export interface LogoProps {
   targetBlank: boolean;
   bgColor?: string;
   hideTitle?: boolean;
+  logo?: {
+    image?: Picture;
+    title?: string;
+  };
 }
 
 const LOGO_PATHS = [
@@ -27,25 +33,38 @@ const TEXT_COLOR: Record<BgColorVersion, string> = {
 };
 
 export const Logo = JSX<Partial<LogoProps>>(
-  ({ className, href, children, targetBlank, bgColor = 'bg-white', hideTitle }) => {
+  ({
+    className = '',
+    href,
+    logo,
+    children = logo?.title,
+    targetBlank,
+    bgColor = 'bg-white',
+    hideTitle,
+  }) => {
     return (
       <a
-        className={`inline-flex items-center font-sans no-underline ${className || ''}`}
+        className={`inline-flex items-center font-sans no-underline ${className}`}
         href={href || 'https://rshb.ru/'}
         target={targetBlank ? '_blank' : '_self'}
-        aria-label="Россельхозбанк"
+        aria-label={logo?.title || 'Россельхозбанк'}
       >
-        <SVG
-          className={`${SVG_COLOR[bgColor]} w-10`}
-          viewBox="0 0 40 45"
-          paths={LOGO_PATHS.map((d) => ({ d }))}
-        />
-        {!hideTitle && (
-          <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>
-            {children || 'Россельхозбанк'}
-          </span>
+        {logo?.image?.src ? (
+          <Img image={logo.image} className={SVG_COLOR[bgColor]} width="40" height="45" asSVG />
+        ) : (
+          <SVG
+            className={`${SVG_COLOR[bgColor]} w-10`}
+            viewBox="0 0 40 45"
+            paths={LOGO_PATHS.map((d) => ({ d }))}
+          />
         )}
+        {hideTitle ? null : renderTitle(children, bgColor, logo?.title)}
       </a>
     );
   },
 );
+
+const renderTitle = (children, bgColor, title) => {
+  const text = children || title || 'Россельхозбанк';
+  return <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>{text}</span>;
+};