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

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

@@ -1,6 +1,8 @@
 import type { Picture } from '../../model/Picture';
 import { context } from '../../setup-fixture';
 import { ProductBlock } from './ProductBlock';
+import type { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 const image: Picture = {
   src: 'money-1.png',
@@ -12,6 +14,53 @@ const image: Picture = {
   },
 };
 
+const breadcrumbs = [
+  {
+    text: 'Главная',
+    href: '/',
+  },
+  {
+    text: 'Кредитные карты',
+    href: '/credit',
+  },
+  {
+    text: 'Кредитная карта Своя Union Pay',
+  },
+];
+
+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',
+  },
+];
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -21,50 +70,9 @@ export default {
         title={'Потребительский кредит наличными'}
         headingType="h2"
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={[
-          {
-            text: 'Главная',
-            href: '/',
-          },
-          {
-            text: 'Кредитные карты',
-            href: '/credit',
-          },
-          {
-            text: 'Кредитная карта Своя Union Pay',
-          },
-        ]}
-        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',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>
@@ -78,51 +86,9 @@ export default {
         headingType="h2"
         version={'secondary'}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
-        breadcrumbs={[
-          {
-            text: 'Главная',
-            href: '/',
-          },
-          {
-            text: 'Кредитные карты',
-            href: '/credit',
-          },
-          {
-            text: 'Кредитная карта Своя Union Pay',
-            href: '#',
-          },
-        ]}
-        benefits={[
-          {
-            label: 'До 5 млн ₽',
-            description: 'Кредитный лимит',
-            icon: 'EmptyWalletWhiteIcon',
-          },
-          {
-            label: 'От 16,9%',
-            description: 'Ставка по кредиту',
-            icon: 'PercentageSquareWhiteIcon',
-          },
-          {
-            label: 'До 5 лет',
-            description: 'Срок кредитования',
-            icon: 'CalendarWhiteIcon',
-          },
-        ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'secondary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'primary',
-          },
-        ]}
+        breadcrumbs={breadcrumbs}
+        benefits={benefits as Benefit[]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>
@@ -134,27 +100,14 @@ export default {
         context={context}
         title={'Оплата проходит \nв 180 странах мира'}
         headingType="h2"
-        breadcrumbs={[]}
+        breadcrumbs={breadcrumbs}
         description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
         items={[
           'Совершайте любые личные покупки',
           'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
           'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
         ]}
-        buttons={[
-          {
-            href: 'https://rshb.ru',
-            text: 'Оформить карту',
-            target: '_blank',
-            version: 'primary',
-          },
-          {
-            href: 'https://rshb.ru',
-            text: 'Подробнее',
-            target: '_blank',
-            version: 'secondary',
-          },
-        ]}
+        buttons={buttons as ButtonWithIconProps[]}
         image={image}
       />
     </div>

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

@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px] ${title ? 'mb-3' : ''}`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -48,11 +48,11 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description && <Description description={description} />}
-            {benefits?.length ? (
-              <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
+            {description ? <Description className="mt-3" description={description} /> : null}
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="mt-3">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}
-            {items?.length ? <List items={items} /> : null}
+            {items?.length ? <List className="mt-3" items={items} /> : null}
           </BaseTile>
         </div>
         {renderImage(image)}

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -25,7 +25,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
     version = 'primary',
   }) => {
     return (
-      <div className={`flex grow justify-between items-stretch text-primary-text ${className}`}>
+      <div className={`flex grow justify-between items-stretch ${className}`}>
         <div className={'flex flex-col'}>
           <BaseTile
             context={context}
@@ -34,7 +34,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
                 <Heading
                   headingType={headingType}
                   title={title}
-                  className={`whitespace-pre-wrap max-w-[600px]`}
+                  className="whitespace-pre-wrap max-w-[600px]"
                 />
               )
             }
@@ -45,14 +45,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             }
           >
             {description && (
-              <Description className="mt-4 max-w-[600px]" description={description} />
+              <Description className="text-m-base mt-4 max-w-[600px]" description={description} />
             )}
-            {benefits?.length ? (
-              <div className="flex gap-6 mt-6 mb-3.5">
+            {benefits?.filter((items) => items.label)?.length ? (
+              <div className="flex gap-6 mt-6">
                 {benefits.map((_, i) => renderBenefit(_, i, version))}
               </div>
             ) : null}
-            {items?.length ? <List className="mt-5" items={items} /> : null}
+            {items?.length ? (
+              <List className="mt-5" items={items} itemClassName="mb-[10px]" version={version} />
+            ) : null}
           </BaseTile>
         </div>
         {image?.src && <Img className="mt-auto" image={image} />}

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

@@ -147,6 +147,8 @@ export default {
             {
               productBlock: {
                 title: 'Акция «Кредит на все, что хочется!»',
+                description:
+                  'Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт.',
                 items: [
                   'Потребительский кредит по специальной процентной ставке',
                   'Получите деньги без залога и поручительства',

package/src/components/ProductGallery/ProductGallery.tsx

@@ -62,15 +62,15 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, duration }) {
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-5 grow basis-0`}
+      className={`font-sans group relative overflow-hidden border-0 bg-inherit cursor-pointer text-left px-0 pt-4 pb-[23px] grow basis-0`}
     >
       <div className="border-0 border-r border-solid border-main-divider px-6">
         <div
-          className={`text-sm font-medium pb-1 group-hover:text-primary-text ${btnTitleClassName}`}
+          className={`text-sm font-medium pb-[3px] group-hover:text-primary-text ${btnTitleClassName}`}
         >
           {slide?.title}
         </div>
-        <div className="text-xs text-secondary-text pb-[2px]">{slide.desc}</div>
+        <div className="text-xs text-secondary-text">{slide.desc}</div>
       </div>
       <div
         className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}

package/src/components/ProductGallery/ProductGalleryBlock.mobile.tsx

@@ -12,7 +12,7 @@ export interface ProductGalleryBlockProps extends UniBlockProps {
 export const ProductGalleryBlock = JSX<ProductGalleryBlockProps>(
   ({ block, headingType, context }) => {
     return (
-      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6" role="listitem">
+      <section className="flex grow-0 shrink-0 basis-full px-4 pt-6">
         <div className="flex grow">
           <ProductBlockInner context={context} headingType={headingType || 'h2'} {...block} />
         </div>

package/src/components/PromoTile/PromoTile.fixture.tsx

@@ -1,5 +1,6 @@
 import { context } from '../../setup-fixture';
 import { PromoTile } from './PromoTile';
+import { getCurrentDate } from '../../utils/getCurrentDate'
 
 export default {
   default: (
@@ -10,7 +11,7 @@ export default {
         title="Акции и спецпредложения"
         description="Пенсионный кредит по специальной процентной ставке"
         version="secondary"
-        date="2022-04-16"
+        date={getCurrentDate()}
         buttons={[
           {
             text: 'Все акции',

package/src/components/Tile/Tile.tsx

@@ -10,7 +10,7 @@ import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileHeadingType } from '../BaseTile/getTileHeadingType';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
-import type { TileContent } from '../Tile/TileContent';
+import type { TileContent } from './TileContent';
 
 export interface TileProps extends TileContent, UniBlockProps {
   role?: string;
@@ -37,7 +37,7 @@ export const Tile = JSX<TileProps>((props) => {
 
   return (
     <section
-      className={`font-sans p-9 box-border ${className} ${
+      className={`overflow-hidden font-sans p-9 box-border ${className} ${
         tileStyleMap[version]
       } ${getTileRightPadding(className)} ${getTileMinHeight(className)} `}
       role={role}

package/src/icons/OkIcon.svg

@@ -1,5 +1,6 @@
 <svg title="Лого «Одноклассники»" viewBox="0 0 12 20" xmlns="http://www.w3.org/2000/svg">
   <path
+    fill="currentColor"
     d="M5.986 10.341C3.05 10.341.61 7.995.61 5.22.61 2.347 3.05 0 5.987 0c3.036 0 5.375 2.346 5.375 5.22a5.048 5.048 0 0 1-1.578 3.628 5.451 5.451 0 0 1-3.78 1.494h-.018Zm0-7.324A2.186 2.186 0 0 0 3.797 5.22c0 1.196.946 2.106 2.19 2.106 1.293 0 2.189-.91 2.189-2.106.001-1.199-.896-2.203-2.19-2.203Zm2.14 11.586 3.037 2.825c.598.621.598 1.531 0 2.106-.646.621-1.643.621-2.14 0l-3.036-2.873-2.937 2.873c-.298.287-.697.43-1.146.43-.348 0-.746-.144-1.095-.43-.597-.575-.597-1.485 0-2.107l3.086-2.825a14.303 14.303 0 0 1-3.182-1.339c-.747-.383-.896-1.34-.498-2.059.498-.718 1.393-.909 2.19-.43a7.08 7.08 0 0 0 3.583.97 7.08 7.08 0 0 0 3.583-.97c.797-.479 1.742-.288 2.19.43.448.72.248 1.675-.45 2.06-.944.574-2.039 1.005-3.184 1.34Z"
   />
 </svg>

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

@@ -19,7 +19,7 @@ export const BlockItem = JSX<BlockItemProps>(
   ({ className = '', isDotted = true, text, children, version = 'primary' }) => {
     return (
       <div className={`font-sans flex items-start ${className}`} role="listitem">
-        {isDotted && <div className={getListStyle(version)} />}!!!!!
+        {isDotted && <div className={getListStyle(version)} />}
         <span className={TEXT_STYLE_MAP[version]}>{text || children}</span>
       </div>
     );

package/src/ui-kit/Button/Button.fixture.tsx

@@ -9,12 +9,8 @@ export default {
         <p>Private clients</p>
         <div className="flex gap-6" data-theme="pc">
           <Button href="https://www.rshb.ru/" target="_blank" text="Primary" version="primary" />
-          <Button
-            href="https://www.rshb.ru/"
-            target="_blank"
-            text="Secondary"
-            version="secondary"
-          />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Link" version="secondary" />
+          <Button href="https://www.rshb.ru/" target="_blank" text="Secondary" version="link" />
         </div>
       </div>
       <div>

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

@@ -6,7 +6,7 @@ export interface DescriptionProps extends DescriptionContent {
 }
 
 export const Description = JSX<DescriptionProps>((props) => {
-  const { className, description } = props;
+  const { className = '', description } = props;
 
-  return <div className={`font-normal text-m-md ${className || ''}`}>{description}</div>;
+  return <div className={`font-normal text-m-md ${className}`}>{description}</div>;
 });

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

@@ -6,22 +6,17 @@ export const InputRange = JSX<InputRangeProps>(
   ({ className, title, items = [], min = 1, max = 100, step = 1, value = min, onChange }) => {
     const handleChange = (value: string) => {
       if (!onChange) return;
-
       const sanitizedValue = Number(value.replace(/\D/g, ''));
       onChange(sanitizedValue);
     };
-
     const inputStyle = {
       backgroundSize: `${(((value - min) * 100) / (max - min)).toFixed(2)}% 100%`,
     };
-
     const handleBlur = () => {
       if (!onChange) return;
-
       if (value < min) onChange(min);
       if (value > max) onChange(max);
     };
-
     return (
       <div className={className}>
         <label className="block relative">
@@ -32,14 +27,12 @@ export const InputRange = JSX<InputRangeProps>(
           ) : null}
           <input
             className={`m-0 font-sans text-sm w-full h-12 border border-solid border-main-stroke rounded-md
-                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${
-                          title ? 'pt-4' : ''
-                        }`}
+                        outline-none p-0 pl-4 m-0 box-border text-primary-text ${ title ? 'pt-4' : '' }`}
             value={addSpacesBetweenNumbers(value)}
             onChange={(e) => handleChange(e.target.value)}
             onBlur={handleBlur}
           />
-          <div className="absolute inset-x-0 top-8 px-4">
+          <div className="absolute inset-x-0 top-[35px] px-4 leading-[18px]">
             <input
               className="box-border w-full m-0 cursor-pointer slider"
               type="range"
@@ -54,9 +47,7 @@ export const InputRange = JSX<InputRangeProps>(
         </label>
         <div className="flex justify-between my-3">
           {items.map((item, i) => (
-            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4">
-              {item}
-            </span>
+            <span key={String(i)} className="text-xs leading-[14px] text-secondary-text pl-4"> {item} </span>
           ))}
         </div>
       </div>

package/src/ui-kit/SearchBar/SearchBar.mobile.tsx

@@ -1,6 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 
 export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
@@ -23,24 +22,23 @@ export const SearchBar = JSX<UniBlockProps>(({ className, context }) => {
       <input
         id="search-bar-input"
         className={
-          'h-12 pl-12 w-full peer font-sans font-normal text-base text-black border border-solid rounded h-full box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
+          'h-12 pl-12 w-full peer placeholder-transparent font-sans font-normal text-base text-black border border-solid rounded box-border outline-none pr-[6%] border-main-divider focus:border-primary-text'
         }
         value={term}
         onChange={(e) => setTerm(e.target.value)}
         type="text"
         name="search-bar-input"
+        placeholder="some search"
       />
-      <Button
-        version="primary"
-        text="Найти"
-        className="w-auto invisible peer-focus:visible absolute top-1 right-1"
+      <button
+        className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer"
         onClick={(e) => {
           e.preventDefault();
-          console.log('click');
+          setTerm('');
         }}
       >
-        <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
-      </Button>
+        <Icon name="CloseIcon" width="24" height="24" />
+      </button>
     </form>
   );
 });

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

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { SwipeListControlDots } from './SwipeListControlDots';
+import { SwipeListControlList } from './SwipeListControlList';
 import type { SwipeListControlProps } from './SwipeListControlProps';
-import { getScrollPoints } from './utils/getScrollPoints';
 import { getIndexParts } from './utils/getIndexParts';
-import { SwipeListControlList } from './SwipeListControlList';
-import { SwipeListControlDots } from './SwipeListControlDots';
-import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
+import { getScrollPoints } from './utils/getScrollPoints';
 
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
@@ -14,6 +14,7 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
+    onSlideChange,
   }) => {
     const [activeIndex, setActiveIndex] = context.useState<number>(0);
     const [indexFraction, setIndexFraction] = context.useState<number>(0);
@@ -35,28 +36,35 @@ export const SwipeListControl = JSX<SwipeListControlProps>(
       });
 
       const { index, fraction } = getIndexParts(scrollLeft, scrollPoints);
+      if (index !== activeIndex && onSlideChange) {
+        onSlideChange();
+      }
       setActiveIndex(index);
       setIndexFraction(fraction);
     };
 
     return (
       <div className={className}>
-        <SwipeListControlList
-          gap={gap}
-          padding={padding}
-          activeIndex={activeIndex}
-          onScroll={handleScroll}
-        >
-          {children}
-        </SwipeListControlList>
-        <SwipeListControlDots
-          activeIndex={activeIndex}
-          indexFraction={indexFraction}
-          showDots={showDots}
-        >
-          {children}
-        </SwipeListControlDots>
+        {renderSwipeList({ gap, padding, activeIndex, handleScroll, children })}
+        {renderSwipelistDots({ activeIndex, indexFraction, showDots, children })}
       </div>
     );
   },
 );
+
+const renderSwipeList = ({ gap, padding, activeIndex, handleScroll, children }) => (
+  <SwipeListControlList
+    gap={gap}
+    padding={padding}
+    activeIndex={activeIndex}
+    onScroll={handleScroll}
+  >
+    {children}
+  </SwipeListControlList>
+);
+
+const renderSwipelistDots = ({ activeIndex, indexFraction, showDots, children }) => (
+  <SwipeListControlDots activeIndex={activeIndex} indexFraction={indexFraction} showDots={showDots}>
+    {children}
+  </SwipeListControlDots>
+);

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -16,4 +16,5 @@ export interface SwipeContainer {
 export interface SwipeListControlProps extends SwipeContainer, UniBlockProps {
   /** @title Точки-индикаторы */
   showDots?: boolean;
+  onSlideChange?: () => void;
 }

package/src/utils/getAccordionItems.ts

@@ -3,7 +3,7 @@ export const getAccordionItems = (items) =>
     label: item.text || '',
     blocks: [
       {
-        accordionBlockType: 'LinkDocs',
+        accordionBlockType: 'LinkList',
         documents: item.items || [],
       },
     ],

package/src/utils/getCurrentDate.ts

@@ -0,0 +1,3 @@
+export const getCurrentDate = () => {
+  return new Date().toJSON().slice(0, "YYYY-MM-DD".length);
+};