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

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/ProductBlockInner.mobile.tsx

@@ -48,7 +48,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
               ) : null
             }
           >
-            {description && <Description description={description} />}
+            {description ? <Description className="mb-5" description={description} /> : null}
             {benefits?.length ? (
               <div className="mt-5">{benefits.map((_, i) => renderBenefit(_, i, version))}</div>
             ) : null}

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 mb-4 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 max-w-[600px]" description={description} />
             )}
             {benefits?.length ? (
               <div className="flex gap-6 mt-6 mb-3.5">
                 {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/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/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);
+};