@redneckz/wildless-cms-uni-blocks 0.3.8 → 0.3.11

package/src/components/Footer/TextInformation.mobile.tsx

@@ -8,13 +8,13 @@ export const TextInformation = JSX<FooterLink>(({ className, links, context }) =
   const { handlerDecorator } = context;
   return (
     <div className={`${className || ''}`}>
-      <div className="pt-5 pb-[5px]">
+      <div className="py-6">
         <span className="font-sans font-normal text-xs text-secondary-text">
           {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
         </span>
       </div>
       {links?.length ? (
-        <div className={`flex flex-col justify-start items-start gap-5 pt-[5px]`}>
+        <div className={`flex flex-col justify-start items-start gap-2`}>
           {links.map((_, i) => (
             <TextInformationLink
               key={String(i)}

package/src/components/Gallery/Gallery.example.json

@@ -13,7 +13,11 @@
       "title": "Заголовок 1",
       "description": "Описание 1",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -26,7 +30,11 @@
       "title": "Заголовок 2",
       "description": "Описание 2",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -39,7 +47,11 @@
       "title": "Заголовок 3",
       "description": "Описание 3",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     },
     {
       "image": {
@@ -52,7 +64,11 @@
       "title": "Заголовок 4",
       "description": "Описание 4",
       "href": "/credit-cards",
-      "items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
+      "items": [
+        {"text":"Элемент списка 1", "title": "Элемент заголовка 1"},
+        {"text":"Элемент списка 2", "title": "Элемент заголовка 2"},
+        {"text":"Элемент списка 3", "title": "Элемент заголовка 3"}
+      ]
     }
   ]
 }

package/src/components/Gallery/Gallery.fixture.mobile.tsx

@@ -19,6 +19,7 @@ const buttonPrimary: ButtonCommonProps = {
   text: 'Подробнее',
   target: '_blank',
   version: 'secondary',
+  icon: 'BankIcon',
 };
 const link: ButtonCommonProps = {
   href: '/credit-cards',

package/src/components/Gallery/Gallery.fixture.tsx

@@ -21,6 +21,14 @@ const buttonPrimary: ButtonCommonProps = {
   version: 'secondary',
 };
 
+const buttonPrimaryIcon: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+  icon: 'BankIcon',
+};
+
 const defaultItems = [
   { text: 'Качественные фермерские продукты напрямую от производителей' },
   { text: 'Самая большая база сельских туров по России' },
@@ -45,7 +53,7 @@ export const defaultProps: GalleryProps = {
       title: 'Более 1000 развлечений',
       description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
       image,
-      button: buttonPrimary,
+      button: buttonPrimaryIcon,
       items: defaultItems,
     },
     {

package/src/components/Gallery/Gallery.mobile.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import { BlockVersion } from '../../model/BlockVersion';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
 import type { GalleryCard } from './GalleryContent';
@@ -44,7 +45,6 @@ function renderCard(card: GalleryCard, key: number) {
     <div
       className={`box-border horizontal-list-item border-solid border rounded-md border-main-stroke p-4 flex flex-col
       ${blockStyle[card.version ?? 'primary']}`}
-      role="listitem"
       key={key}
     >
       <div>
@@ -57,11 +57,21 @@ function renderCard(card: GalleryCard, key: number) {
         {card.description ? renderDescription(card) : null}
         {card.items?.length ? renderItems(card.items) : null}
       </div>
-      {card?.button?.href ? <Button className="mt-3" {...card.button} /> : null}
+      {card?.button?.text ? renderButton(card.button) : null}
     </div>
   );
 }
 
+function renderButton(button) {
+  return (
+    <Button
+      className="mt-3"
+      appendLeft={button?.icon && <Icon name={button?.icon} width="24px" height="24px" asSVG />}
+      {...button}
+    />
+  );
+}
+
 function renderDescription(card: GalleryCard) {
   return (
     <div
@@ -77,8 +87,8 @@ function renderDescription(card: GalleryCard) {
 function renderItems(items: GalleryItem[]) {
   return (
     <section className="mt-3">
-      {items.map((item) => (
-        <div>
+      {items.map((item, i) => (
+        <div key={String(i)}>
           <span className="text-m-md font-medium">{item.title}</span>
           <span className="text-m-sm text-secondary-text pl-2">{item.text}</span>
         </div>

package/src/components/Gallery/GalleryCardInner.tsx

@@ -2,6 +2,7 @@ import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
 import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
 import { Img } from '../../ui-kit/Img/Img';
 import type { GalleryCard } from './GalleryContent';
 
@@ -22,12 +23,22 @@ export const GalleryCardInner = JSX<GalleryCard>(
           ) : null}
           {items?.length ? renderItems(items, version) : null}
         </div>
-        {button?.text && <Button className="mt-6" {...button} />}
+        {button?.text ? renderButton(button) : null}
       </div>
     );
   },
 );
 
+function renderButton(button) {
+  return (
+    <Button
+      className="mt-6 w-full"
+      appendLeft={button.icon && <Icon name={button.icon} width="24px" height="24px" asSVG />}
+      {...button}
+    />
+  );
+}
+
 function renderCardTitle(title: string, className: string) {
   return <div className={`font-medium text-xl m-0 ${className}`}>{title}</div>;
 }

package/src/components/Gallery/GalleryInner.tsx

@@ -38,19 +38,20 @@ export const GalleryInner = JSX<GalleryInnerProps>(
         />
         {showPrevButton && (
           <ArrowButton
-            className="absolute top-1/2 left-8 rotate-180"
+            className="absolute top-1/2 left-8 rotate-180 z-10 mt-[25px]"
             onClick={handlePrevClick}
             ariaLabel="Пролистать влево"
           />
         )}
         {showNextButton && (
           <ArrowButton
-            className="absolute top-1/2 right-1 z-10"
+            className="absolute top-1/2 right-8 z-10 mt-[25px]"
             onClick={handleNextClick}
             ariaLabel="Пролистать вправо"
           />
         )}
-        <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        <div className="absolute top-0 left-0 bottom-0 w-[84px] bg-opacity-from-white" />
+        <div className="absolute top-0 right-0 bottom-0 w-[100px] bg-opacity-to-white" />
       </section>
     );
   },

package/src/components/Header/Header.mobile.tsx

@@ -35,7 +35,7 @@ export const Header = JSX<HeaderProps>(
         <div className="container px-4 py-0 box-border">
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
           <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
-            <div className="flex">
+            <div className="flex no-scrollbar horizontal-list h-full items-center">
               {subItems?.map((_, i) =>
                 renderSubItem(
                   {

package/src/components/Header/HeaderBurger.tsx

@@ -1,5 +1,4 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Button } from '../../ui-kit/Button/Button';
 import { Icon } from '../../ui-kit/Icon/Icon';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import type { ContentPageContext } from '../ContentPage/ContentPageContext';
@@ -19,13 +18,19 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
-        <button className="absolute top-4 right-4 border-none bg-transparent" onClick={onClick}>
+        <button className="absolute top-4 right-4 border-none bg-transparent cursor-pointer" onClick={onClick}>
           <Icon name="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <Button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4">
-          <Icon name="GeolocationIcon" width="24" height="24" className="box-border mr-2" asSVG />
+        <button onClick={getCity} className="flex items-center text-sm text-secondary-text mb-4 bg-transparent cursor-pointer">
+          <Icon
+            name="GeolocationIcon"
+            width="20"
+            height="20"
+            className="text-primary-main box-border mr-2"
+            asSVG
+          />
           {city}
-        </Button>
+        </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>
         <SearchBar context={context} className="grow" />
@@ -37,9 +42,11 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 const renderBurgerSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
   return (
-    <Button key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4">
-      {icon ? <Icon className="pr-1" name={icon} width="24" height="24" asSVG /> : null}
+    <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
+      {icon ? (
+        <Icon className="text-primary-main pr-1" name={icon} width="24" height="24" asSVG />
+      ) : null}
       <span className="pl-0.5 font-medium">{text}</span>
-    </Button>
+    </a>
   );
 };

package/src/components/Header/HeaderTop.tsx

@@ -11,7 +11,7 @@ export interface HeaderTopProps {
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
     <div className="flex items-center">
-      <button className="pr-4 border-0 bg-transparent" onClick={onClick} aria-label="Открыть меню">
+      <button className="pr-4 border-0 bg-transparent cursor-pointer" onClick={onClick} aria-label="Открыть меню">
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"
@@ -24,7 +24,7 @@ export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
     <button
       className={`${
         bgColor === 'bg-white' ? 'text-primary-main' : 'text-white'
-      } text-sm  border-0 bg-transparent`}
+      } text-sm  border-0 bg-transparent cursor-pointer`}
     >
       Войти
     </button>

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -19,7 +19,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     hasBorder = true,
   }) => {
     return (
-      <section className={`font-sans py-6 px-4 bg-white ${className}`}>
+      <section className={`font-sans text-primary-text py-6 px-4 bg-white ${className}`}>
         {title ? (
           <Heading
             headingType="h2"
@@ -27,7 +27,9 @@ export const LinkDocs = JSX<LinkDocsProps>(
             title={title}
           />
         ) : null}
-        {subtitle ? <h3 className="mb-5 text-center text-m-md">{subtitle}</h3> : null}
+        {subtitle ? (
+          <h3 className="mt-0 font-normal mb-5 text-center text-m-md">{subtitle}</h3>
+        ) : null}
         {listMode === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (

package/src/components/LinkDocs/LinkDocs.tsx

@@ -34,7 +34,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     columnsMode = 'double',
   }) => {
     return (
-      <section className={`font-sans p-[50px] bg-white ${className}`}>
+      <section className={`font-sans text-primary-text p-12 bg-white ${className}`}>
         {title ? (
           <Heading
             headingType="h2"
@@ -46,7 +46,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
         ) : null}
         {subtitle ? (
           <h3
-            className={`text-base ${titleMarginsStyleMap[columnsMode]} ${
+            className={`text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${
               titleAlignStyleMap[align ?? 'center']
             }`}
           >

package/src/components/LinkList/LinkList.example.json

@@ -0,0 +1,21 @@
+{
+  "documents": [
+    {
+      "text": "Документ №1",
+      "href": "/documents/document1.doc"
+    },
+    {
+      "text": "Документ №2",
+      "href": "/documents/document2.rtf",
+      "target": "_blank"
+    },
+    {
+      "text": "Документ №3",
+      "href": "/abc3/map.jpeg"
+    },
+    {
+      "text": "Документ №4",
+      "href": "/abc/map.rar"
+    }
+  ]
+}

package/src/components/LinkList/LinkList.fixture.tsx

@@ -0,0 +1,13 @@
+import { mobileContext } from '../../setup-fixture';
+import { linkDocsContentExample } from './linkListContentExample';
+import { LinkList } from './LinkList';
+
+export default (
+  <div className="container grid grid-cols-12">
+    <LinkList
+      className="col-span-12"
+      context={mobileContext}
+      {...linkDocsContentExample}
+    />
+  </div>
+);

package/src/components/LinkList/LinkList.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { LinkListContent } from './LinkListContent';
+
+export interface LinkListProps extends LinkListContent, UniBlockProps {}
+
+export const LinkList = JSX<LinkListProps>(({ className = '', documents }) => {
+  return (
+    <section className={`font-sans bg-white mt-[10px] ${className}`}>
+      <ul className="flex flex-col text-sm text-secondary-text p-0">
+        {documents?.length ? renderLinkListItem(documents) : null}
+      </ul>
+    </section>
+  );
+});
+
+const renderLinkListItem = (documents) => {
+  return documents.map((doc, i) => {
+    const { text, ...linkProps } = doc;
+    return (
+      <li key={`list_item_${String(i)}`} className="mb-4 list-none">
+        <a className="hover:text-primary-main" role="link" {...linkProps}>
+          {text ? text : null}
+        </a>
+      </li>
+    );
+  });
+};

package/src/components/LinkList/LinkListContent.ts

@@ -0,0 +1,9 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+/**
+ * @title Список документов
+ */
+export interface LinkListContent {
+  /** @title Список */
+  documents?: LinkProps[];
+}

package/src/components/LinkList/linkListContentExample.ts

@@ -0,0 +1,22 @@
+import type { LinkListContent } from './LinkListContent';
+
+export const linkDocsContentExample: LinkListContent = {
+  documents: [
+    { text: 'target self', href: '/abc1/cooldoc/', target: '_self' },
+    { text: 'target blank', href: '/abc2/wtf/', target: '_blank' },
+    { text: 'GlassIcon', href: '/abc3/map/' },
+    { text: 'no icon', href: '/abc4' },
+    { text: 'документ 5', href: '/abc5' },
+    { text: 'документ 6', href: '/abc6/abc' },
+    { text: 'Text text text', href: '/abc7/yolo' },
+    {
+      text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
+      href: '/abc8/archive/',
+    },
+    { text: 'И ещё немного текста', href: '/abc9/' },
+    {
+      text: 'Форматируем, сортируем, смотрим как отображается...',
+      href: '/abc10/',
+    },
+  ],
+};

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -39,6 +39,11 @@ export const defaultProps: MiniGalleryProps = {
         'Время копить: ставка растет в зависимости от срока нахождения средств на Счете!',
       image,
     },
+    {
+      title: 'Более 8888 развлечений',
+      description: 'Порядок и условия предоставления в соответствии с 106 ФЗ',
+      image,
+    },
   ],
 };
 

package/src/components/MobileAppTile/MobileAppTile.mobile.tsx

@@ -20,8 +20,8 @@ export const MobileAppTile = JSX<MobileAppTileProps>(
               <Logo className="w-[33px]" bgColor="transparent" hideTitle />
             </div>
             <a href={href} target="_blank" className="flex flex-col justify-center pl-3">
-              <div className="text-sm font-medium">{title}</div>
-              <div className="text-xs text-secondary-text">{description}</div>
+              <div className="text-m-button font-medium mb-[3px]">{title}</div>
+              <div className="text-m-button text-secondary-text">{description}</div>
             </a>
           </div>
         ) : null}

package/src/components/ProductBlock/ProductBlock.example.json

@@ -14,5 +14,15 @@
       "version": "secondary"
     }
   ],
-  "version": "primary"
+  "version": "primary",
+  "benefits": [
+    {
+      "label": "Преимущество №1",
+      "icon": "ClockIcon"
+    },
+    {
+      "label": "Преимущество №2",
+      "icon": "SignDocsIcon"
+    }
+  ]
 }

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

@@ -1,6 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -18,45 +20,68 @@ const image: Picture = {
   ],
 };
 
+const benefits = [
+  {
+    label: 'До 5 млн ₽',
+    description: 'Кредитный лимит',
+    icon: 'EmptyWalletIcon',
+  },
+  {
+    label: 'От 16,9%',
+    description: 'Ставка по кредиту',
+    icon: 'PercentageSquareIcon',
+  },
+  {
+    label: 'До 5 лет',
+    description: 'Срок кредитования',
+    icon: 'CalendarIcon',
+  },
+];
+
+const buttons = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Оформить карту',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробнее',
+    target: '_blank',
+    version: 'secondary',
+  },
+] as ButtonWithIconProps;
+
+const items = [
+  'Совершайте любые личные покупки',
+  'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+  'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+];
+
 export default {
-  primary: (
+  default: (
+    <div className="container grid grid-cols-12">
+      <ProductBlock
+        className="col-span-12"
+        context={context}
+        title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
+        description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
+        image={image}
+      />
+    </div>
+  ),
+  items: (
     <div className="container grid grid-cols-12">
       <ProductBlock
         className="col-span-12"
         context={context}
         title={'Кредит до 5 000 000 Р\nбез залога и поручителей'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        items={items}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>