@redneckz/wildless-cms-uni-blocks 0.4.7 → 0.5.0

package/mobile/src/components/Recommendation/RecommendationCard.tsx

@@ -33,22 +33,24 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           title={tileTitle}
           image={tileImage}
         >
-          {description ? <Description className="mb-2" description={description} /> : null}
-          {items?.length ? (
-            <List
-              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
-              items={items}
-              version={version}
-            />
-          ) : null}
-          {socialMedia ? (
-            <SocialMedia
-              className="pt-[42px] pb-0"
-              media={socialMedia}
-              version={version}
-              context={context}
-            />
-          ) : null}
+          <div className="h-full flex flex-col justify-between">
+            {description ? <Description className="mb-2" description={description} /> : null}
+            {items?.length ? (
+              <List
+                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
+                items={items}
+                version={version}
+              />
+            ) : null}
+            {socialMedia ? (
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={version}
+                context={context}
+              />
+            ) : null}
+          </div>
         </BaseTile>
       </section>
     );

package/mobile/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"
@@ -174,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"
           >
@@ -283,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>
@@ -316,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"
@@ -486,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>
@@ -650,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"
           >
@@ -765,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>
@@ -825,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"
           >
@@ -887,7 +895,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -910,7 +918,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -984,7 +992,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -1007,7 +1015,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -1203,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/mobile/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/mobile/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/mobile/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/mobile/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/mobile/src/ui-kit/Select/Select.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BaseTile/BaseTile.tsx

@@ -11,8 +11,8 @@ export const BaseTile = JSX<BaseTileProps>(
         {title}
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
-            <div>{children}</div>
-            {buttons ? <div className="mt-auto">{buttons}</div> : null}
+            <div className="h-full">{children}</div>
+            {buttons ? <div className="mt-auto pt-8">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/Calculator/Calculator.tsx

@@ -42,7 +42,7 @@ export const Calculator = JSX<CalculatorProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text ${className}`}
+        className={`box-border overflow-hidden relative font-sans w-100 text-primary-text bg-white ${className}`}
         {...rest}
       >
         <div className="bg-white">

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

@@ -13,7 +13,7 @@ export default {
       className="bg-secondary-text"
       context={mobileContext}
       blocksRegistry={Blocks}
-      data={normalizePage(data as ContentPageDef)}
+      data={normalizePage(Blocks)(data as ContentPageDef)}
     />
   ),
 };

package/src/components/ContentPage/ContentPage.fixture.tsx

@@ -32,7 +32,7 @@ export default {
       className="bg-main"
       context={context}
       blocksRegistry={Blocks}
-      data={normalizePage(data as ContentPageDef) as ContentPageDef}
+      data={normalizePage(Blocks)(data as ContentPageDef)}
     />
   ),
   editor: (
@@ -41,7 +41,7 @@ export default {
         className="bg-transparent"
         context={context}
         blocksRegistry={Blocks}
-        data={normalizePage(data as ContentPageDef)}
+        data={normalizePage(Blocks)(data as ContentPageDef)}
         blockDecorator={blockDecorator}
       />
     </div>

package/src/components/ContentPage/filterBlocks.mobile.ts

@@ -0,0 +1,13 @@
+import { BlockDef } from '../../types';
+import { BlocksRegistry } from './ContentPage';
+import { isBlockInRegistry } from './isBlockInRegistry';
+import { normalizeBlock } from './normalizeBlock';
+
+export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
+  blocks
+    ?.filter(
+      (block) =>
+        isBlockInRegistry(block?.type || block?.mobile?.type, blocksRegistry) &&
+        !block.mobile?.hidden,
+    )
+    .map(normalizeBlock);

package/src/components/ContentPage/filterBlocks.ts

@@ -0,0 +1,7 @@
+import { BlockDef } from '../../types';
+import { BlocksRegistry } from './ContentPage';
+import { isBlockInRegistry } from './isBlockInRegistry';
+import { normalizeBlock } from './normalizeBlock';
+
+export const filterBlocks = (blocks: BlockDef[], blocksRegistry: BlocksRegistry) =>
+  blocks?.filter((block) => isBlockInRegistry(block?.type, blocksRegistry)).map(normalizeBlock);

package/src/components/ContentPage/isBlockInRegistry.ts

@@ -1,3 +1,5 @@
-export function isBlockInRegistry<T>(blockType: string | undefined, registry: Record<string, T>) {
+import { BlocksRegistry } from './ContentPage';
+
+export function isBlockInRegistry(blockType: string | undefined, registry: BlocksRegistry) {
   return (blockType || '') in registry;
 }

package/src/components/ContentPage/normalizePage.ts

@@ -1,35 +1,29 @@
-import type { BlockDef, ContentPageDef, Slot } from '../../types';
-import { Blocks } from '../Blocks';
-import { isBlockInRegistry } from './isBlockInRegistry';
-import { normalizeBlock } from './normalizeBlock';
+import type { ContentPageDef, Slot } from '../../types';
+import { BlocksRegistry } from './ContentPage';
+import { filterBlocks } from './filterBlocks';
 
-export function normalizePage<T extends ContentPageDef | undefined | null>(
-  contentPage: T,
-): ContentPageDef | undefined {
-  if (!contentPage) {
-    return undefined;
-  }
+export const normalizePage =
+  (blocksRegistry: BlocksRegistry) => (contentPage: ContentPageDef | undefined | null) => {
+    if (!contentPage) {
+      return undefined;
+    }
 
-  const { blocks, slots } = contentPage;
+    const { blocks = [], slots } = contentPage;
 
-  return {
-    ...contentPage,
-    blocks: getDesktopBlocks(blocks),
-    slots:
-      slots &&
-      Object.keys(slots).reduce(
-        (res, key) => ({
-          ...res,
-          [key]: {
-            ...slots[key],
-            blocks: getDesktopBlocks((slots[key] as Slot).blocks),
-          },
-        }),
-        {},
-      ),
+    return {
+      ...contentPage,
+      blocks: filterBlocks(blocks, blocksRegistry),
+      slots:
+        slots &&
+        Object.keys(slots).reduce(
+          (res, key) => ({
+            ...res,
+            [key]: {
+              ...slots[key],
+              blocks: filterBlocks((slots[key] as Slot).blocks || [], blocksRegistry),
+            },
+          }),
+          {},
+        ),
+    };
   };
-}
-
-function getDesktopBlocks(blocks?: BlockDef[]) {
-  return blocks?.filter((block) => isBlockInRegistry(block?.type, Blocks)).map(normalizeBlock);
-}

package/src/components/ErrorBlock/ErrorBlockContent.ts

@@ -1,6 +1,6 @@
+import type { EmptyOption } from '../../model/EmptyOptionType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { EmptyOption } from '../../model/EmptyOptionType';
 
 /**
  * @title Изображение
@@ -24,7 +24,7 @@ export type ErrorCodeDef = {
 export type ErrorContentDef = EmptyOption | ErrorImageDef | ErrorCodeDef;
 
 /**
- * @title Блок Ошибка
+ * @title Блок ошибки
  */
 export interface ErrorBlockContent {
   /** @title Заголовок */

package/src/components/Footer/HorizontalNavigation.tsx

@@ -21,7 +21,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
               <HorizontalNavigationLink
                 key={String(i)}
                 index={i}
-                className="font-l-light max-w-[292px]"
+                className="text-l-light max-w-[292px]"
                 {...useLink({ router, handlerDecorator }, _)}
               />
             ))}

package/src/components/OfficeServicesBlock/OfficeServicesBlock.fixture.tsx

@@ -8,7 +8,7 @@ export default {
         className="col-span-4"
         context={context}
         title="Услуги"
-        officesList={[
+        servicesList={[
           {
             text: 'Обслуживание физических лиц',
             icon: { icon: 'CardTickIcon' },

package/src/components/OfficeServicesBlock/OfficeServicesBlock.tsx

@@ -11,7 +11,7 @@ import type {
 export interface OfficeServicesBlockProps extends OfficeServicesBlockContent, UniBlockProps {}
 
 export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
-  ({ className = '', context, title, officesList, anchor = '' }) => {
+  ({ className = '', context, title, servicesList, anchor = '' }) => {
     return (
       <BlockWrapper
         context={context}
@@ -19,7 +19,7 @@ export const OfficeServicesBlock = JSX<OfficeServicesBlockProps>(
         className={`font-sans bg-white p-12 flex flex-col ${className}`}
       >
         {title ? <Heading headingType="h5" className="mb-2.5" title={title} /> : null}
-        {officesList?.length ? officesList.map(renderListItems) : null}
+        {servicesList?.length ? servicesList.map(renderListItems) : null}
       </BlockWrapper>
     );
   },

package/src/components/OfficeServicesBlock/OfficeServicesBlockContent.ts

@@ -21,6 +21,6 @@ export interface OfficeServicesBlockList {
 export interface OfficeServicesBlockContent {
   /** @title Заголовок */
   title?: string;
-  /** @title Список */
-  officesList?: OfficeServicesBlockList[];
+  /** @title Список услуг */
+  servicesList?: OfficeServicesBlockList[];
 }

package/src/components/Recommendation/RecommendationCard.tsx

@@ -33,22 +33,24 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
           title={tileTitle}
           image={tileImage}
         >
-          {description ? <Description className="mb-2" description={description} /> : null}
-          {items?.length ? (
-            <List
-              className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
-              items={items}
-              version={version}
-            />
-          ) : null}
-          {socialMedia ? (
-            <SocialMedia
-              className="pt-[42px] pb-0"
-              media={socialMedia}
-              version={version}
-              context={context}
-            />
-          ) : null}
+          <div className="h-full flex flex-col justify-between">
+            {description ? <Description className="mb-2" description={description} /> : null}
+            {items?.length ? (
+              <List
+                className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
+                items={items}
+                version={version}
+              />
+            ) : null}
+            {socialMedia ? (
+              <SocialMedia
+                className="pt-10 pb-0"
+                media={socialMedia}
+                version={version}
+                context={context}
+              />
+            ) : null}
+          </div>
         </BaseTile>
       </section>
     );

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"
@@ -174,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"
           >
@@ -283,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>
@@ -316,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"
@@ -486,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>
@@ -650,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"
           >
@@ -765,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>
@@ -825,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"
           >
@@ -887,7 +895,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -910,7 +918,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -984,7 +992,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -1007,7 +1015,7 @@ 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 text-secondary-text"
-              placeholder="12321321312"
+              placeholder=""
               style="background: url(/icons/ArrowDownIcon.svg) no-repeat 50%;"
             >
               <option
@@ -1203,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/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}