@redneckz/wildless-cms-uni-blocks 0.4.6 → 0.4.8

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

@@ -41,7 +41,7 @@ exports[`Blocks BonusBenefitsBlock should render block "BonusBenefitsBlock" with
 
 exports[`Blocks Calculator should render block "Calculator" without content 1`] = `
 <section
-  class="box-border overflow-hidden relative font-sans w-100 text-primary-text "
+  class="box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white "
 >
   <div
     class="bg-white"
@@ -82,7 +82,7 @@ exports[`Blocks CardTransfer should render block "CardTransfer" without content
         class="h-[56px] relative flex items-center"
       >
         <input
-          class="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke"
+          class="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
           max="300000"
           min="0"
           name="amount"
@@ -145,6 +145,17 @@ exports[`Blocks ComparisonTable should render block "ComparisonTable" without co
 </section>
 `;
 
+exports[`Blocks ErrorBlock should render block "ErrorBlock" without content 1`] = `
+<section
+  class="flex flex-col justify-center items-center "
+  role="listitem"
+>
+  <div
+    class="flex justify-center mb-7"
+  />
+</section>
+`;
+
 exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without content 1`] = `
 <section
   class="bg-white text-primary-text font-sans p-9 box-border "
@@ -163,7 +174,9 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div>
+        <div
+          class="h-full"
+        >
           <div
             class="flex"
           >
@@ -272,7 +285,7 @@ exports[`Blocks Footer should render block "Footer" without content 1`] = `
         />
       </svg>
       <span
-        class="text-black font-light ml-2.5"
+        class="text-primary-text font-medium ml-2.5"
       >
         Россельхозбанк
       </span>
@@ -305,7 +318,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 h-full"
+              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text h-full"
         id="search-bar-input"
         name="search-bar-input"
         type="text"
@@ -475,7 +488,7 @@ exports[`Blocks Header should render block "Header" without content 1`] = `
           />
         </svg>
         <span
-          class="text-black font-light ml-2.5"
+          class="text-primary-text font-medium ml-2.5"
         >
           Россельхозбанк
         </span>
@@ -639,7 +652,9 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div>
+        <div
+          class="h-full"
+        >
           <div
             class="flex flex-1 items-center"
           >
@@ -666,6 +681,12 @@ exports[`Blocks Navigation should render block "Navigation" without content 1`]
 </section>
 `;
 
+exports[`Blocks OfficeServicesBlock should render block "OfficeServicesBlock" without content 1`] = `
+<section
+  class="font-sans bg-white p-12 flex flex-col "
+/>
+`;
+
 exports[`Blocks OtherProducts should render block "OtherProducts" without content 1`] = `
 <section
   class="font-sans text-primary-text "
@@ -748,7 +769,9 @@ exports[`Blocks ProductBlock should render block "ProductBlock" without content
           <div
             class="flex flex-col justify-between w-full"
           >
-            <div />
+            <div
+              class="h-full"
+            />
           </div>
         </div>
       </div>
@@ -808,7 +831,9 @@ exports[`Blocks PromoTile should render block "PromoTile" without content 1`] =
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div>
+        <div
+          class="h-full"
+        >
           <div
             class="mt-1.5"
           >
@@ -869,20 +894,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Город
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="Москва"
+                value=""
               >
-                Москва
-              </option>
-              <option
-                class=""
-                value="Краснодар"
-              >
-                Краснодар
+                Выберите значение
               </option>
             </select>
           </div>
@@ -897,32 +917,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Отделение
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="выберите отделение"
-              >
-                выберите отделение
-              </option>
-              <option
-                class=""
-                value="МоскваОфис1"
-              >
-                МоскваОфис1
-              </option>
-              <option
-                class=""
-                value="МоскваОфис2"
+                value=""
               >
-                МоскваОфис2
-              </option>
-              <option
-                class=""
-                value="МоскваОфис3"
-              >
-                МоскваОфис3
+                Выберите отделение
               </option>
             </select>
           </div>
@@ -985,29 +988,18 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
             <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"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
                 class=""
-                value="маленькая"
+                value=""
               >
-                маленькая
-              </option>
-              <option
-                class=""
-                value="средняя"
-              >
-                средняя
-              </option>
-              <option
-                class=""
-                value="большая"
-              >
-                большая
+                Выберите размер
               </option>
             </select>
           </div>
@@ -1022,26 +1014,15 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               Параметры ячейки, мм (ВхШхД)
             </span>
             <select
-              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer"
+              class="appearance-none h-14 border border-gray p-4 rounded-md text-s w-full cursor-pointer text-secondary-text"
+              placeholder=""
               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"
+                value=""
               >
-                300x400x500
+                Выберите параметр ячейки
               </option>
             </select>
           </div>
@@ -1063,7 +1044,8 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               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"
+                checked=""
+                class="appearance-none flex justify-center items-center shrink-0 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"
@@ -1080,8 +1062,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
               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"
+                class="appearance-none flex justify-center items-center shrink-0 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"
@@ -1146,7 +1127,7 @@ exports[`Blocks SafeDepositRental should render block "SafeDepositRental" withou
           <span
             class="text-h3"
           >
-            26 ₽
+            0 ₽
           </span>
         </div>
       </div>
@@ -1230,7 +1211,9 @@ exports[`Blocks Tile should render block "Tile" without content 1`] = `
       <div
         class="flex flex-col justify-between w-full"
       >
-        <div />
+        <div
+          class="h-full"
+        />
       </div>
     </div>
   </div>

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

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
-import { Img } from '../Img/Img';
 import type { BlockVersion } from '../../model/BlockVersion';
+import { Img } from '../Img/Img';
+import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
@@ -25,15 +25,18 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
   } = props;
 
   const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+  const listItemAlign = description ? 'items-start' : 'items-center';
 
   return (
-    <div className={`flex items-start gap-5 ${className}`}>
+    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
       {icon ? (
-        <Img
-          className={renderBenefitIconBgStyle(version, benefitsVersion)}
-          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
-          asSVG
-        />
+        <div className={renderBenefitIconBgStyle(version, benefitsVersion)}>
+          <Img
+            className="w-[24px] h-[24px]"
+            image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+            asSVG
+          />
+        </div>
       ) : null}
       <div className="gap-0.5">
         {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
@@ -54,5 +57,5 @@ function renderBenefitIconBgStyle(version, benefitsVersion) {
     bgColorStyle = 'bg-secondary-light text-primary-main';
   }
 
-  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+  return `w-[50px] h-[50px] min-w-[50px] rounded-full p-[10px] box-border flex items-center justify-center ${bgColorStyle}`;
 }

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

@@ -55,7 +55,7 @@ export const CurrencyInput = JSX<CurrencyInputProps>(
         <div className="h-[56px] relative flex items-center">
           <input
             type="number"
-            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke"
+            className="text-l pl-4 pr-8 w-full h-full rounded-md border border-solid border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text"
             onChange={handleChange}
             value={value}
             min={minValue}

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

@@ -45,7 +45,7 @@ export const Foldable = JSX<FoldableProps>(
 
     const buttonClassName =
       foldButtonClasses ||
-      'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
+      'border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
     const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
 
     return blocks ? (
@@ -58,7 +58,16 @@ export const Foldable = JSX<FoldableProps>(
             onClick={handleToggle}
           >
             <span className="pr-3">{getFoldButtonLabel}</span>
-            {icon ? <Icon name={icon} iconVersion="white" width="20" height="20" asSVG /> : null}
+            {icon ? (
+              <Icon
+                className="my-auto"
+                name={icon}
+                iconVersion="white"
+                width="20"
+                height="20"
+                asSVG
+              />
+            ) : null}
           </button>
         ) : null}
       </div>

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

@@ -10,7 +10,7 @@ export const Input = JSX<InputProps>(
 
     return (
       <input
-        className={className}
+        className={`border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${className}`}
         id={id}
         name={name || id}
         type={type}

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

@@ -41,7 +41,7 @@ export const InputRange = JSX<InputRangeProps>(
     return (
       <div className={className}>
         <label className="block relative">
-          {title ? <span className="text-m font-light">{title}</span> : null}
+          {title ? <span className="text-m-light">{title}</span> : null}
           <input
             className={`m-0 mt-2 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 hover:border-primary-hover focus:border-primary-focus ${DISABLED_INPUT_CLASSES}`}

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

@@ -25,7 +25,7 @@ const SVG_COLOR: Record<BgColorVersion, string> = {
   transparent: 'text-white',
 };
 const TEXT_COLOR: Record<BgColorVersion, string> = {
-  'bg-white': 'text-black',
+  'bg-white': 'text-primary-text',
   transparent: 'text-white',
 };
 
@@ -66,5 +66,5 @@ export const Logo = JSX<Partial<LogoProps>>(
 const renderTitle = (children, bgColor, title) => {
   const text = children || title || 'Россельхозбанк';
 
-  return <span className={`${TEXT_COLOR[bgColor]} font-light ml-2.5`}>{text}</span>;
+  return <span className={`${TEXT_COLOR[bgColor]} font-medium ml-2.5`}>{text}</span>;
 };

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

@@ -5,7 +5,7 @@ export const Radio = JSX<RadioProps>(({ name, text, value, checked, onChange, cl
   <div className={className}>
     <label className="flex items-center relative cursor-pointer">
       <input
-        className="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"
+        className="appearance-none flex justify-center items-center shrink-0 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"
         type="radio"
         value={value}
         name={name}

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

@@ -34,7 +34,7 @@ export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile =
       <input
         id="search-bar-input"
         className={`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 ${SearchBarInputClassName}`}
+              outline-none pr-[6%] border-main-stroke hover:border-primary-hover active:border-primary-text focus:border-primary-text ${SearchBarInputClassName}`}
         value={term}
         onChange={(e) => setTerm(e.target.value as string)}
         type="text"

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

@@ -22,6 +22,7 @@ export const Select = JSX<SelectProps>(
         name={name || id}
         value={value}
         onChange={(e) => onChange(e.target.value as string)}
+        placeholder=""
       >
         {children}
       </select>

package/src/ui-kit/Select/SelectOption.tsx

@@ -4,12 +4,13 @@ export interface SelectOptionProps {
   className?: string;
   value?: string;
   selected?: boolean;
+  disabled?: boolean;
 }
 
 export const SelectOption = JSX<SelectOptionProps>(
-  ({ className = '', value, selected, children }) => {
+  ({ className = '', value, selected, disabled = false, children }) => {
     return (
-      <option className={className} value={`${value}`} selected={selected}>
+      <option className={className} value={`${value}`} selected={selected} disabled={disabled}>
         {children}
       </option>
     );

package/mobile/src/components/SafeDepositRental/SafeDepositRental.example.json

@@ -1,3 +0,0 @@
-{
-  "title": "Аренда сейфовых ячеек"
-}

package/src/components/SafeDepositRental/SafeDepositRental.example.json

@@ -1,3 +0,0 @@
-{
-  "title": "Аренда сейфовых ячеек"
-}