@redneckz/wildless-cms-uni-blocks 0.2.86 → 0.2.87

package/src/components/LinkDocs/LinkDocs.tsx

@@ -0,0 +1,81 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Title } from '../../ui-kit/Title/Title';
+import { AlignType } from '../BaseTile/BaseTileProps';
+import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+
+const titleAlignStyleMap: Record<AlignType, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'mb-8',
+  single: '',
+};
+
+const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'gap-x-5 gap-y-[26px] flex-wrap',
+  single: 'gap-3.5 flex-col',
+};
+
+export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
+
+export const LinkDocs = JSX<LinkDocsProps>(
+  ({ className, title, align, documents, icon, columnsMode = 'double' }) => {
+    const containerClasses = linkColumnsModeStyleMap[columnsMode];
+
+    return (
+      <section className={`font-sans p-[50px] bg-white ${className}`}>
+        {title && (
+          <Title
+            className={`font-medium m-0 ${titleMarginsStyleMap[columnsMode]} ${
+              titleAlignStyleMap[align ?? 'center']
+            }`}
+          >
+            {title}
+          </Title>
+        )}
+        <div className={`flex ${containerClasses}`} role="list">
+          {documents?.length
+            ? documents.map(({ text, fileSize, ...linkProps }) => (
+                <a
+                  className={`group flex items-center text-sm
+              text-sm font-sans align-middle items-center text-primary-text no-underline group hover:text-primary-main
+              ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
+                  role="listitem"
+                  {...linkProps}
+                >
+                  {icon && <Icon className="mr-3.5" name={icon} width="24px" height="24px" />}
+                  <span>
+                    {text}
+                    <span className="text-secondary-text group-hover:text-primary-main">
+                      {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+                    </span>
+                  </span>
+                </a>
+              ))
+            : null}
+        </div>
+      </section>
+    );
+  },
+);
+
+const getExtFromHref = (href: string) => {
+  if (!href) return '';
+
+  const lastChunk = href.split('.').pop();
+  if (!lastChunk || lastChunk.includes('/')) return '';
+
+  return lastChunk;
+};
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+  return prefix + extension + size;
+};

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -0,0 +1,26 @@
+import { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../../ui-kit/Icon/IconProps';
+import { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+
+/** @title Режим отображения списка */
+export type LinkColumnsMode = 'single' | 'double';
+
+/**
+ * @title Элемент списка
+ */
+export interface LinkDocsItem extends LinkProps {
+  /** @title размер файла */
+  fileSize?: string;
+}
+
+/**
+ * @title Список документов
+ */
+export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'align' | 'title'> {
+  /** @title Название иконки */
+  icon?: IconName;
+  /** @title Список */
+  documents?: LinkDocsItem[];
+  /** @title Отображение списка */
+  columnsMode?: LinkColumnsMode;
+}

package/src/components/MobileBlocks.ts

@@ -2,7 +2,9 @@ import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer.mobile';
 import { Gallery } from './Gallery/Gallery.mobile';
 import { Header } from './Header/Header';
+import { Headline } from './Headline/Headline';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
+import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock.mobile';
 import { ProductTile } from './ProductTile/ProductTile';
@@ -10,16 +12,18 @@ import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
 
 export const MobileBlocks = {
-  Header,
+  ExchangeRateTile,
   Footer,
+  Gallery,
+  Header,
+  Headline,
+  MobileAppTile,
+  PictureText,
   Placeholder,
-  Tile,
-  ProductTile,
   ProductBlock,
+  ProductTile,
   TextBlock,
-  ExchangeRateTile,
-  MobileAppTile,
-  Gallery,
+  Tile,
   // TODO StepsBlock,
   // TODO BenefitsBlock,
   // TODO ProductGallery

package/src/components/PictureText/PictureText.example.json

@@ -0,0 +1,20 @@
+{
+  "title": "Продукт",
+  "description": "Описание",
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 300
+    }
+  },
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "DocumentText"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "DiscountShape"
+    }
+  ]
+}

package/src/components/PictureText/PictureText.fixture.tsx

@@ -0,0 +1,36 @@
+import { context } from '../../setup-fixture';
+
+import { PictureText } from './PictureText';
+import type { Picture } from '../../model/Picture';
+
+const image: Picture = {
+  src: 'legal-support-business.png',
+  format: 'webp',
+  size: {
+    width: 200,
+    height: 200,
+  },
+  alt: 'Варианты потребительского кредита',
+};
+
+export default {
+  default: (
+    <PictureText
+      context={context}
+      title={'Варианты потребительского кредита'}
+      benefits={[
+        {
+          label: 'Кредит по одному документу',
+          description: 'До 300 тыс ₽ по упрощённой процедуре получения кредита',
+          icon: 'DocumentText',
+        },
+        {
+          label: 'Кредит на общих условиях',
+          description: 'До 5 млн ₽ на общих условиях получения кредита',
+          icon: 'DiscountShape',
+        },
+      ]}
+      image={image}
+    />
+  ),
+};

package/src/components/PictureText/PictureText.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { PictureTextContent } from './PictureTextContent';
+
+import { Icon } from '../../ui-kit/Icon/Icon';
+import { Img } from '../../ui-kit/Img';
+import { Title } from '../../ui-kit/Title/Title';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+export interface PictureTextProps extends PictureTextContent, UniBlockProps {}
+
+export const PictureText = JSX<PictureTextProps>(({ className, title, image, benefits }) => {
+  return (
+    <section className={`relative font-sans text-primary-text bg-white p-14 ${className}`}>
+      <Title className="font-medium m-0 text-center">{title}</Title>
+      <div className={'flex justify-center mt-9'}>
+        {image?.src && <Img className="mr-6" image={image} />}
+        {benefits?.length ? (
+          <div className="flex flex-col">{benefits.map(renderBenefit)}</div>
+        ) : null}
+      </div>
+    </section>
+  );
+});
+
+function renderBenefit(benefit: Benefit, i: number) {
+  return (
+    <div key={String(i)} className="flex flex-row mb-8">
+      {benefit.icon && (
+        <Icon
+          className="w-[48px] h-[48px] bg-main rounded-full box-border p-[12px]"
+          name={benefit.icon}
+          width="48"
+          height="48"
+        />
+      )}
+      <div className="flex gap-1 flex-col h-full ml-5 max-w-[490px]">
+        <div className="font-medium text-primary-text text-xl m-0">{benefit.label}</div>
+        {benefit.description && (
+          <div className="font-normal text-sm text-secondary-text">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/PictureText/PictureTextContent.ts

@@ -0,0 +1,13 @@
+import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+
+/**
+ * @title Картинка с текстом
+ */
+export interface PictureTextContent
+  extends Pick<BaseTileCommonProps, 'title' | 'description' | 'image'> {
+  /**
+   * @title Список преимуществ
+   */
+  benefits?: Benefit[];
+}

package/src/components/ProductGallery/ProductGalleryContent.ts

@@ -11,7 +11,7 @@ interface ProductGalleryNav {
 /**
  * @title Слайд
  */
-export interface ProductSlideContent {
+export interface ProductSlide {
   nav: ProductGalleryNav;
   /** @title Содержимое слайда */
   productBlock: ProductBlockInnerCommonProps;
@@ -27,5 +27,5 @@ export interface ProductGalleryContent {
    */
   duration?: number;
   /** @title Слайды */
-  slides?: ProductSlideContent[];
+  slides?: ProductSlide[];
 }

package/src/icons/DiscountShape.svg

@@ -0,0 +1,7 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6599 20.01L13.1399 21.53C12.5199 22.15 11.4999 22.15 10.8799 21.53L9.3599 20.01C9.0999 19.75 8.58992 19.54 8.22992 19.54H6.0799C5.1999 19.54 4.47992 18.8199 4.47992 17.9399V15.79C4.47992 15.43 4.26992 14.92 4.00992 14.66L2.4899 13.14C1.8699 12.52 1.8699 11.5 2.4899 10.88L4.00992 9.35999C4.26992 9.09999 4.47992 8.58998 4.47992 8.22998V6.07996C4.47992 5.19996 5.1999 4.47998 6.0799 4.47998" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.33984 3.9899L10.8598 2.46988C11.4798 1.84988 12.4998 1.84988 13.1198 2.46988L14.6399 3.9899C14.8999 4.2499 15.4098 4.45987 15.7698 4.45987H17.9199C18.7999 4.45987 19.5198 5.17997 19.5198 6.05997V8.20987C19.5198 8.56987 19.7298 9.07988 19.9898 9.33988L21.5099 10.8599C22.1299 11.4799 22.1299 12.4999 21.5099 13.1199L19.9898 14.6399C19.7298 14.8999 19.5198 15.4099 19.5198 15.7699V17.92C19.5198 18.8 18.7999 19.5199 17.9199 19.5199" stroke="#1C1C1C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 15L15 9" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.4945 14.5H14.5035" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.49451 9.5H9.50349" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/icons/DocIcon.svg

@@ -1,4 +1,4 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg id="icon" width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd" d="M9.809 2.759A2.813 2.813 0 0 1 11.742 2h5.524C18.776 2 20 3.16 20 4.59v13.82c0 1.43-1.224 2.59-2.734 2.59H6.734C5.224 21 4 19.84 4 18.41v-5.95c0-.477.408-.864.911-.864.504 0 .912.387.912.864v5.95c0 .476.408.863.911.863h10.532c.503 0 .911-.387.911-.864V4.591c0-.477-.408-.864-.911-.864h-5.367v4.03c0 .955-.816 1.728-1.823 1.728H4.911c-.368 0-.7-.21-.842-.533a.83.83 0 0 1 .198-.941l5.542-5.252Zm.267 2.19L7.112 7.758h2.964v-2.81Z" fill="#1C1C1C" />
   <rect x="8" y="12" width="8" height="2" rx="1" fill="#42AB44" />
   <rect x="8" y="15" width="5" height="2" rx="1" fill="#42AB44" />

package/src/icons/DocumentText.svg

@@ -0,0 +1,6 @@
+<svg id="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V11.02" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 4.5V6.5C14.5 7.6 15.4 8.5 16.5 8.5H18.5" stroke="#1C1C1C" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 13H12" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 17H16" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -7,7 +7,9 @@ export enum IconMap {
   'CalendarIcon',
   'ClockIcon',
   'ComfortableCompIcon',
+  'DiscountShape',
   'DocIcon',
+  'DocumentText',
   'DollarIcon',
   'EmptyWalletIcon',
   'EuroIcon',
@@ -35,7 +37,9 @@ export enum IconMap {
  *    "Календарь",
  *    "Часы",
  *    "Кресло",
+ *    "Скидка",
  *    "Документ",
+ *    "Документ с текстом"
  *    "Доллар",
  *    "Кошелек",
  *    "Евро",

package/src/icons/MinusIcon.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 12h5M4 12h7" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/PlusIcon.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 18V6M15 12h5M4 12h7M12 20V4" stroke="#42AB44" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>