@redneckz/wildless-cms-uni-blocks 0.3.94 → 0.3.96

package/src/components/StepsBlock/StepsBlock.tsx

@@ -91,7 +91,7 @@ const renderStepIcon =
     return (
       <div key={String(i)} className="flex flex-col items-center text-center">
         <div
-          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 
+          className={`h-[100px] w-[100px] min-w-[100px] min-h-[100px] rounded-full p-[26px] box-border z-10 flex justify-center items-center
             ${styleMap.iconBackground} ${styleMap.title}`}
         >
           {checkIsIconRenderable(icon) ? (
@@ -124,14 +124,12 @@ const renderStepTitle =
     return (
       <div
         key={String(i)}
-        className="flex flex-col items-center justify-between text-center relative w-[276px] 
+        className="flex flex-col items-center justify-between text-center relative w-[276px]
         whitespace-pre-line overflow-hidden"
       >
-        {step?.label ? (
-          <div className="font-normal text-xl-light m-0 mt-4">{step.label}</div>
-        ) : null}
+        {step?.label ? <div className="text-xl m-0 mt-4">{step.label}</div> : null}
         {step?.description ? (
-          <div className={`font-light text-base ${styleMap.description} ${additionalMarginClass}`}>
+          <div className={`text-l-light ${styleMap.description} ${additionalMarginClass}`}>
             {step.description}
           </div>
         ) : null}

package/src/components/Tabs/renderTab.tsx

@@ -10,7 +10,7 @@ interface RenderTabProps {
 
 type OnTabClick = (tab: Tab) => void;
 
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
 
 export const renderTab =
   ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
@@ -18,7 +18,7 @@ export const renderTab =
     const isActive = currentTab === tab;
 
     const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = `text-m ${
+    const tabText = `text-m-light ${
       isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
     }`;
     const counterBlockStyle = `${badgeStyle}

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -25,7 +25,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
         {title ? (
           <Heading headingType="h2" className={`text-center ${headingMargin}`} title={title} />
         ) : null}
-        {description ? <div className="mb-5 text-center text-m-md">{description}</div> : null}
+        {description ? <div className="mb-5 text-center text-m">{description}</div> : null}
         {tiles?.length ? renderOrientationTable(orientation, tiles, context) : null}
       </section>
     );

package/src/components/TariffsTable/TariffsTableCell.tsx

@@ -31,8 +31,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-4" />
     )}
-    {label ? <div className="text-xl font-medium m-0">{label}</div> : null}
-    {description ? <div className="text-sm text-secondary-text">{description}</div> : null}
+    {label ? <div className="text-xl m-0">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text">{description}</div> : null}
     {list?.items?.length ? renderList(list) : null}
     {image ? <Img image={image} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
@@ -41,7 +41,7 @@ const renderCellInner = (
 
 const renderList = (list: TariffsTableList) => (
   <List
-    className="flex flex-col justify-between items-start text-sm"
+    className="flex flex-col justify-between items-start text-s"
     version="gray"
     items={list.items}
     isDotted={list.isDotted ?? true}

package/src/components/TariffsTable/TariffsTableRow.tsx

@@ -18,7 +18,7 @@ export const TariffsTableRow = JSX<TariffsTableRowProps>(
     return (
       <TableRowContainer>
         <div
-          className={`text-sm py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
+          className={`text-s py-5 ${FIRST_CELL_CLASSES} ${DIVIDER_CLASSES} ${
             !isLastRow ? 'border-solid' : ''
           }`}
         >

package/src/components/TariffsTable/TariffsTableTileCell.tsx

@@ -28,10 +28,8 @@ const renderCellInner = (
     {i > 0 && (
       <div className="border-main-divider border border-solid border-t-0 border-x-0 my-2" />
     )}
-    {label ? <div className="text-m-sm m-0">{label}</div> : null}
-    {description ? (
-      <div className="text-m-sm text-secondary-text mt-[3px]">{description}</div>
-    ) : null}
+    {label ? <div className="text-s m-0">{label}</div> : null}
+    {description ? <div className="text-s text-secondary-text mt-[3px]">{description}</div> : null}
     {list?.items?.length ? renderList(list) : null}
     {image ? <Img image={{ ...image, className: 'm-0' }} /> : null}
     {buttons?.length ? renderButtons(buttons) : null}
@@ -40,7 +38,7 @@ const renderCellInner = (
 
 const renderList = (list: TariffsTableList) => (
   <List
-    className="flex flex-col justify-between items-start text-m-sm"
+    className="flex flex-col justify-between items-start text-s"
     version="gray"
     items={list.items}
     isDotted={list.isDotted ?? true}

package/src/components/TextBlock/TextBlock.mobile.tsx

@@ -50,14 +50,14 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
           {title ? (
-            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
           ) : null}
           {description ? (
-            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
           {items?.length ? (
             <List
-              className="mt-1 text-m-md"
+              className="mt-1 text-m"
               items={items}
               isDotted={isDotted}
               version={listBlockVersion}
@@ -72,7 +72,7 @@ export const TextBlock = JSX<TextBlockProps>(
 function renderIcon(className: string) {
   return (
     <div className="mb-3">
-      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
     </div>
   );
 }

package/src/components/TextBlock/TextBlock.tsx

@@ -44,10 +44,10 @@ export const TextBlock = JSX<TextBlockProps>(
         {iconVersion === 'big' ? renderImage(image) : null}
         <div className="py-0.5">
           {title ? (
-            <div className={`font-medium text-base mb-1 ${textBlockStyleMap.title}`}>{title}</div>
+            <div className={`text-l font-medium mb-1 ${textBlockStyleMap.title}`}>{title}</div>
           ) : null}
           {description ? (
-            <div className={`text-sm ${textBlockStyleMap.description}`}>{description}</div>
+            <div className={`text-s ${textBlockStyleMap.description}`}>{description}</div>
           ) : null}
         </div>
       </BlockWrapper>
@@ -58,7 +58,7 @@ export const TextBlock = JSX<TextBlockProps>(
 function renderIcon(className: string) {
   return (
     <div className="pt-1.5 pl-1 pr-4">
-      <div className={`rounded-full h-4 w-4 text-center text-xs ${className}`}>i</div>
+      <div className={`rounded-full h-4 w-4 text-center text-xs-light ${className}`}>i</div>
     </div>
   );
 }

package/src/components/Tile/Tile.tsx

@@ -83,11 +83,6 @@ function renderList(items, version, isDotted: boolean) {
   const listVersion = version === 'primary' ? 'tile' : 'tile-white';
 
   return items?.length ? (
-    <List
-      items={items}
-      isDotted={isDotted}
-      itemClassName="text-h6 font-light mt-2"
-      version={listVersion}
-    />
+    <List items={items} isDotted={isDotted} itemClassName="text-h6 mt-2" version={listVersion} />
   ) : null;
 }

package/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Blocks Accordion should render block "Accordion" without content 1`] = `
 <section
-  class="p-[50px] font-sans bg-white text-primary-text "
+  class="p-[50px] mb-1 last:mb-0 font-sans bg-white text-primary-text "
 />
 `;
 
@@ -19,6 +19,9 @@ exports[`Blocks Bonus should render block "Bonus" without content 1`] = `
   <div
     class="container"
   >
+    <section
+      class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
+    />
     <div
       class="flex flex-wrap w-full mt-9"
     />
@@ -29,7 +32,11 @@ exports[`Blocks Bonus should render block "Bonus" without content 1`] = `
 exports[`Blocks BonusBenefitsBlock should render block "BonusBenefitsBlock" without content 1`] = `
 <section
   class="font-sans text-primary-text bg-white p-50 flex flex-col text-center "
-/>
+>
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
+  />
+</section>
 `;
 
 exports[`Blocks Calculator should render block "Calculator" without content 1`] = `
@@ -51,8 +58,11 @@ exports[`Blocks Catalog should render block "Catalog" without content 1`] = `
 <section
   class="bg-white relative font-sans p-12 overflow-hidden text-center "
 >
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
+  />
   <div
-    class="flex duration-1000 gap-3.5"
+    class="flex duration-1000 gap-3.5 mt-8"
     role="list"
     style="transform: translateX(-0px);"
   />
@@ -112,17 +122,17 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
                 <thead>
                   <tr>
                     <th
-                      class="text-left text-m text-secondary-text"
+                      class="text-left text-m-light text-secondary-text"
                     >
                       Валюта
                     </th>
                     <th
-                      class="text-left text-m text-secondary-text pl-11"
+                      class="text-left text-m-light text-secondary-text pl-11"
                     >
                       Купить
                     </th>
                     <th
-                      class="text-left text-m text-secondary-text pl-11"
+                      class="text-left text-m-light text-secondary-text pl-11"
                     >
                       Продать
                     </th>
@@ -241,7 +251,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       </div>
       <input
         class="h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-divider focus:border-primary-text font-light h-full"
+              outline-none pr-[6%] border-main-divider focus:border-primary-text h-full"
         id="search-bar-input"
         name="search-bar-input"
         type="text"
@@ -252,7 +262,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         role="button"
       >
         <div
-          class="font-normal text-sm px-9 py-[9px]"
+          class="text-s px-9 py-2.5"
         >
           Найти
         </div>
@@ -280,7 +290,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
           >
             <div>
               <div
-                class="text-xs text-left"
+                class="text-xs-light text-left"
               />
               <div
                 class="text-left text-l"
@@ -330,7 +340,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
       class="pt-5"
     >
       <span
-        class="font-light text-xs text-secondary-text"
+        class="text-xs-light text-secondary-text"
       >
         © 2000-2022 АО «Россельхозбанк» Генеральная лицензия Банка России № 3349 от 12.08.2015 г.
       </span>
@@ -347,11 +357,11 @@ exports[`Blocks Gallery should render block "Gallery" without content 1`] = `
     <div
       class="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent"
     />
-    <div
-      class="flex flex-col items-center mb-8"
+    <section
+      class="font-sans flex flex-col p-[50px] gap-4 bg-transparent !p-0"
     />
     <div
-      class="flex justify-center duration-1000"
+      class="flex mt-8 justify-center duration-1000"
       role="list"
       style="transform: translateX(-0px);"
     />
@@ -370,11 +380,8 @@ exports[`Blocks GracePeriod should render block "GracePeriod" without content 1`
 <section
   class="font-sans bg-white p-[50px] "
 >
-  <h3
-    class="font-sans m-0 text-h3 text-center"
-  />
-  <div
-    class="text-l-light-md text-center mt-3"
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
   />
 </section>
 `;
@@ -435,7 +442,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           rel="noopener noreferrer"
         >
           <span
-            class="text-primary-text hover:text-primary-main font-sans font-light text-sm"
+            class="text-primary-text hover:text-primary-main font-sans text-s-light"
           >
             Москва
           </span>
@@ -447,7 +454,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           rel="noopener noreferrer"
         >
           <span
-            class="text-primary-text hover:text-primary-main font-sans font-light text-sm"
+            class="text-primary-text hover:text-primary-main font-sans text-s-light"
           >
             Офисы и банкоматы
           </span>
@@ -562,11 +569,11 @@ exports[`Blocks MiniGallery should render block "MiniGallery" without content 1`
     <div
       class="absolute top-0 left-0 bottom-0 w-[84px] bg-gradient-to-r from-white to-transparent"
     />
-    <div
-      class="flex flex-col items-center mb-8"
+    <section
+      class="font-sans flex flex-col p-[50px] gap-4 bg-transparent !p-0"
     />
     <div
-      class="flex justify-center duration-1000"
+      class="flex mt-8 justify-center duration-1000"
       role="list"
       style="transform: translateX(-0px);"
     />
@@ -583,13 +590,13 @@ exports[`Blocks MiniGallery should render block "MiniGallery" without content 1`
 
 exports[`Blocks MobileAppTile should render block "MobileAppTile" without content 1`] = `
 <section
-  class="flex justify-between font-sans p-9 box-border relative
-        pr-[9.4rem] min-h-[360px]
+  class="flex justify-between font-sans p-9 box-border relative min-h-[320px]
+        min-h-[360px]
         bg-white text-primary-text
         "
 >
   <div
-    class="font-sans flex flex-col grow h-full items-start "
+    class="font-sans flex flex-col grow h-full items-start z-[1]"
   >
     <h3
       class="font-sans m-0 text-h4 whitespace-pre-wrap max-w-[509px] mb-6
@@ -608,7 +615,7 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
             class="flex flex-1 items-center"
           >
             <span
-              class="text-m text-secondary-text"
+              class="text-m-light text-secondary-text"
             >
               Наведите камеру телефона на QR-код и скачайте приложение
             </span>
@@ -625,7 +632,7 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
   class="font-sans text-primary-text rounded-[40px] flex items-center justify-between "
 >
   <h2
-    class="font-medium text-xl-light m-0"
+    class="text-xl font-medium m-0"
   />
 </section>
 `;
@@ -669,7 +676,7 @@ exports[`Blocks Placeholder should render block "Placeholder" without content 1`
     </div>
   </section>
   <figure
-    class="m-0 min-w-[600px]"
+    class="m-0 min-w-[80%]"
   >
     <div
       class="h-4 mt-2 bg-secondary-light"
@@ -825,6 +832,262 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
   <div
     class="flex justify-between align-top mb-6"
   >
+    <div
+      class="flex-1 mr-9"
+    >
+      <div
+        class="flex justify-between mb-6"
+      >
+        <div
+          class="w-full mr-4"
+        >
+          <div>
+            <span
+              class="block text-m-light mb-2"
+            >
+              Город
+            </span>
+            <select
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
+            >
+              <option
+                class=""
+                value="Москва"
+              >
+                Москва
+              </option>
+              <option
+                class=""
+                value="Краснодар"
+              >
+                Краснодар
+              </option>
+            </select>
+          </div>
+        </div>
+        <div
+          class="w-full"
+        >
+          <div>
+            <span
+              class="block text-m-light mb-2"
+            >
+              Отделение
+            </span>
+            <select
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
+            >
+              <option
+                class=""
+                value="МоскваОфис1"
+              >
+                МоскваОфис1
+              </option>
+              <option
+                class=""
+                value="МоскваОфис2"
+              >
+                МоскваОфис2
+              </option>
+              <option
+                class=""
+                value="МоскваОфис3"
+              >
+                МоскваОфис3
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div
+        class="mb-6"
+      >
+        <span
+          class="block text-m-light mb-[3px]"
+        >
+          Срок аренды
+        </span>
+        <div>
+          <label
+            class="block relative"
+          >
+            <input
+              class="m-0 mt-[5px] font-sans text-h3 w-full h-14 border border-solid border-main-stroke rounded-md
+                        outline-none p-0 pl-4 box-border text-primary-text"
+              value="26"
+            />
+            <div
+              class="absolute inset-x-0 bottom-[-4px] px-4 leading-[18px]"
+            >
+              <input
+                class="box-border w-full m-0 cursor-pointer slider"
+                max="365"
+                min="1"
+                step="1"
+                style="background-size: 6.87% 100%;"
+                type="range"
+                value="26"
+              />
+            </div>
+          </label>
+          <div
+            class="flex justify-between my-3"
+          >
+            <span
+              class="text-s leading-[14px] text-secondary-text pl-4"
+            >
+              От 1 дня
+            </span>
+            <span
+              class="text-s leading-[14px] text-secondary-text pl-4"
+            >
+              До 365 дней
+            </span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="flex justify-between mb-6"
+      >
+        <div
+          class="mr-4 w-full"
+        >
+          <div>
+            <span
+              class="block text-m-light mb-2"
+            >
+              Размер ячейки
+            </span>
+            <select
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
+            >
+              <option
+                class=""
+                value="маленькая"
+              >
+                маленькая
+              </option>
+              <option
+                class=""
+                value="средняя"
+              >
+                средняя
+              </option>
+              <option
+                class=""
+                value="большая"
+              >
+                большая
+              </option>
+            </select>
+          </div>
+        </div>
+        <div
+          class="w-full"
+        >
+          <div>
+            <span
+              class="block text-m-light mb-2"
+            >
+              Параметры ячейки, мм (ВхШхД)
+            </span>
+            <select
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
+            >
+              <option
+                class=""
+                value="125x225x375"
+              >
+                125x225x375
+              </option>
+              <option
+                class=""
+                value="200x300x400"
+              >
+                200x300x400
+              </option>
+              <option
+                class=""
+                value="300x400x500"
+              >
+                300x400x500
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <span
+        class="text-secondary-text text-l-light"
+      >
+        Тип договора
+      </span>
+      <div
+        class="flex justify-between items-center mt-5"
+      >
+        <div>
+          <div
+            class="mb-2"
+          >
+            <label
+              class="flex items-center relative cursor-pointer"
+            >
+              <input
+                checked=""
+                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                name="contractType"
+                type="radio"
+                value="option1"
+              />
+              <span
+                class="font-sans ml-3 cursor-pointer"
+              >
+                Простое хранение
+              </span>
+            </label>
+          </div>
+          <div>
+            <label
+              class="flex items-center relative cursor-pointer"
+            >
+              <input
+                class="appearance-none flex justify-center items-center w-5 h-5 border-2 border-primary-main rounded-full cursor-pointer after:block after:w-2.5 after:h-2.5 after:rounded-full checked:after:bg-primary-main"
+                name="contractType"
+                type="radio"
+                value="option2"
+              />
+              <span
+                class="font-sans ml-3 cursor-pointer"
+              >
+                Сделка с недвижимостью
+              </span>
+            </label>
+          </div>
+        </div>
+        <a
+          class="text-center font-sans select-none inline-block cursor-pointer no-underline focus:border-primary-focus focus:border text-white bg-primary-main hover:bg-primary-hover active:bg-primary-active rounded-md "
+          role="button"
+        >
+          <div
+            class="flex items-center justify-center gap-2 py-4 px-9 "
+          >
+            <div>
+              <div
+                class="text-xs-light text-left"
+              />
+              <div
+                class="text-left text-l"
+              >
+                Офисы на карте
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+    </div>
     <div
       class="flex flex-col justify-between"
     >
@@ -835,7 +1098,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           class="mr-11"
         >
           <span
-            class="block font-light text-m mb-1"
+            class="block text-m-light mb-1"
           >
             Аренда за
           </span>
@@ -849,7 +1112,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           class=""
         >
           <span
-            class="block font-light text-m mb-1"
+            class="block text-m-light mb-1"
           >
             Цена
           </span>
@@ -882,7 +1145,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           />
         </svg>
         <span
-          class="font-light text-white opacity-80 mt-2 inline-block"
+          class="text-s-light text-white opacity-80 mt-2 inline-block"
         >
           На рисунки изображена пачка
           <br />
@@ -892,7 +1155,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
     </div>
   </div>
   <p
-    class="text-button font-light text-secondary-text"
+    class="text-s-light text-secondary-text"
   >
     Аренда СЯ, в случае проведения процедуры купли-продажи, с использованием наличных денег или процедуры ипотечной сделки
   </p>