@redneckz/wildless-cms-uni-blocks 0.4.0 → 0.4.2

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

@@ -1,83 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { Headline } from '../Headline/Headline';
-import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
-
-export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
-
-export const Insurance = JSX<InsuranceProps>(
-  ({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`}
-        context={context}
-        {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          align="center"
-        />
-        <div>
-          <div className="mx-auto flex justify-center gap-[122px] 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}
-              {renderInsuranceSumMonth(sum, monthLimit)}
-            </div>
-          </div>
-        </div>
-      </BlockWrapper>
-    );
-  },
-);
-
-function renderBenefit(benefit: InsuranceBenefit, i: number) {
-  return (
-    <div key={String(i)} className="flex items-center gap-4">
-      {benefit?.icon ? (
-        <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light"
-          image={benefit.icon}
-          asSVG
-        />
-      ) : null}
-      <div>
-        {benefit?.label ? <div className="text-h6">{benefit.label}</div> : null}
-        {benefit?.description ? (
-          <div className="mt-0.5 text-secondary-text text-m">{benefit.description}</div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
-  return sum || monthLimit ? (
-    <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
-      {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number.isFinite(monthLimit)
-        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-        : null}
-    </div>
-  ) : null;
-}
-
-function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
-  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-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
-    </div>
-  );
-}

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

@@ -1,29 +0,0 @@
-import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title Преимущество
- */
-export interface InsuranceBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-  icon?: Picture;
-}
-
-/**
- * @title Страховка
- */
-export type InsuranceContent = HeadlineCommonProps & {
-  image?: Picture;
-  /** @title Ежемесячный лимит */
-  monthLimit?: number;
-  /** @title Страховая сумма */
-  sum?: number;
-  /**
-   * @title Список преимуществ
-   * @maxItems 6
-   */
-  benefits?: InsuranceBenefit[];
-};

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

@@ -1,29 +0,0 @@
-{
-  "title": "Заголовок",
-  "description": "Описание",
-  "insurance": 500000,
-  "benefits": [
-    {
-      "label": "Заголовок 1",
-      "description": "Описание 1",
-      "icon": {
-        "icon": "ShieldTickIcon"
-      }
-    },
-    {
-      "label": "Заголовок 2",
-      "description": "Описание 2",
-      "icon": {
-        "icon": "ShieldTickIcon"
-      }
-    }
-  ],
-  "image": {
-    "format": "webp",
-    "size": {
-      "width": 400,
-      "height": 300
-    }
-  },
-  "sum": 500000
-}

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

@@ -1,70 +0,0 @@
-import type { Picture } from '../../model/Picture';
-import { context } from '../../react/setup-fixture';
-import type { InsuranceBenefit } from './InsuranceContent';
-import { Insurance } from './Insurance';
-
-const benefits: InsuranceBenefit[] = [
-  {
-    label: 'Телесное повреждение',
-    description: 'Описание',
-    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 {
-  'without monthly payment': (
-    <div className="container grid grid-cols-12">
-      <Insurance
-        context={context}
-        className="col-span-12"
-        title="Страховые риски и продукты"
-        description="Покрываемые риски программы «Защита вас и ваших близких»"
-        benefits={benefits}
-        image={image}
-        sum={500000}
-      />
-    </div>
-  ),
-  'with monthly payment': (
-    <div className="container grid grid-cols-12">
-      <Insurance
-        context={context}
-        className="col-span-12"
-        title="Страховые риски и продукты"
-        description="Покрываемые риски программы «Защита вас и ваших близких»"
-        benefits={benefits}
-        image={image}
-        sum={500000}
-        monthLimit={25000}
-      />
-    </div>
-  ),
-};

package/src/components/Insurance/Insurance.tsx

@@ -1,83 +0,0 @@
-import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
-import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Img } from '../../ui-kit/Img/Img';
-import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
-import { Headline } from '../Headline/Headline';
-import type { InsuranceBenefit, InsuranceContent } from './InsuranceContent';
-
-export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
-
-export const Insurance = JSX<InsuranceProps>(
-  ({ context, className = '', title, description, image, benefits, sum, monthLimit, ...rest }) => {
-    return (
-      <BlockWrapper
-        className={`px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`}
-        context={context}
-        {...rest}
-      >
-        <Headline
-          context={context}
-          className="!p-0"
-          title={title}
-          description={description}
-          headlineVersion="M"
-          align="center"
-        />
-        <div>
-          <div className="mx-auto flex justify-center gap-[122px] 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}
-              {renderInsuranceSumMonth(sum, monthLimit)}
-            </div>
-          </div>
-        </div>
-      </BlockWrapper>
-    );
-  },
-);
-
-function renderBenefit(benefit: InsuranceBenefit, i: number) {
-  return (
-    <div key={String(i)} className="flex items-center gap-4">
-      {benefit?.icon ? (
-        <Img
-          className="w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light"
-          image={benefit.icon}
-          asSVG
-        />
-      ) : null}
-      <div>
-        {benefit?.label ? <div className="text-h6">{benefit.label}</div> : null}
-        {benefit?.description ? (
-          <div className="mt-0.5 text-secondary-text text-m">{benefit.description}</div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-function renderInsuranceSumMonth(sum?: number, monthLimit?: number) {
-  return sum || monthLimit ? (
-    <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
-      {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-      {Number.isFinite(monthLimit)
-        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-        : null}
-    </div>
-  ) : null;
-}
-
-function renderValueBlock(title: string, sum = 0, isAnotherBlock = false) {
-  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-l-light">{title}</span>
-      <span className="text-primary-main text-h6">{addSpacesBetweenNumbers(sum)} ₽</span>
-    </div>
-  );
-}

package/src/components/Insurance/InsuranceContent.ts

@@ -1,29 +0,0 @@
-import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
-
-/**
- * @title Преимущество
- */
-export interface InsuranceBenefit {
-  /** @title Название */
-  label?: string;
-  /** @title Описание */
-  description?: string;
-  icon?: Picture;
-}
-
-/**
- * @title Страховка
- */
-export type InsuranceContent = HeadlineCommonProps & {
-  image?: Picture;
-  /** @title Ежемесячный лимит */
-  monthLimit?: number;
-  /** @title Страховая сумма */
-  sum?: number;
-  /**
-   * @title Список преимуществ
-   * @maxItems 6
-   */
-  benefits?: InsuranceBenefit[];
-};

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

@@ -1,44 +0,0 @@
-import type { BlockVersion } from '../../model/BlockVersion';
-import { Img } from '../../ui-kit/Img/Img';
-import type { BenefitItemProps } from './ProductBlockContent';
-
-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 function renderBenefit({ benefit, version = 'primary' }: BenefitItemProps, i: number) {
-  const isIconWhite = version === 'secondary';
-
-  return (
-    <div key={String(i)} className="flex gap-3 items-center mb-2.5 last:mb-0">
-      {benefit.icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version)}
-          image={{ ...benefit?.icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          width="24"
-          height="24"
-          asSVG
-        />
-      ) : null}
-      <div className={`text-l m-0 ${benefitTitleStyleMap[version]}`}>{benefit.label}</div>
-      {benefit.description && (
-        <div className={`text-s ${benefitDescStyleMap[version]}`}>{benefit.description}</div>
-      )}
-    </div>
-  );
-}
-
-function renderBenefitIconBgStyle(version) {
-  let bgColorStyle = 'text-primary-main';
-
-  if (version === 'secondary') {
-    bgColorStyle = 'text-black';
-  }
-
-  return `w-6 h-6 rounded-full box-border ${bgColorStyle}`;
-}