@redneckz/wildless-cms-uni-blocks 0.2.112 → 0.2.113

package/src/components/BaseTile/BaseTile.tsx

@@ -1,14 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useLink } from '../../hooks/useLink';
-import type { BlockVersion } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../types';
-import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
-import { Button } from '../../ui-kit/Button/Button';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import { Img } from '../../ui-kit/Img';
 import { Title } from '../../ui-kit/Title/Title';
-import { getColSpan } from '../../utils/getColSpan';
-import type { BaseTileCommonProps, BaseTileIconButton } from './BaseTileProps';
+import { BaseTileInner } from './BaseTileInner';
+import type { BaseTileCommonProps } from './BaseTileProps';
+import { getTitleSizeByClassName } from './getTitleSizeByClassName';
 
 export interface BaseTileProps extends BaseTileCommonProps, UniBlockProps {}
 
@@ -27,82 +22,25 @@ export const BaseTile = JSX<BaseTileProps>(
     items,
     version = 'primary',
   }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
     return (
       <div className={`font-sans flex flex-col grow h-full items-start`}>
         {title && (
           <Title
-            size={getTitleSize(titleSize, className)}
+            size={titleSize || getTitleSizeByClassName(className)}
             className={`${TITLE_CLASSES} ${version === 'primary' ? 'text-primary-text' : ''}`}
           >
             {title}
           </Title>
         )}
-        <div className="flex grow w-full justify-between">
-          <div className="flex flex-col justify-between items-start">
-            <div>
-              {description && (
-                <div className={`font-normal text-base mt-4 max-w-[600px]`}>{description}</div>
-              )}
-              {children}
-              {items?.length ? renderItems(items, version) : null}
-            </div>
-            {buttons?.length ? (
-              <div className="flex mt-9 gap-3">
-                {buttons.map((button, index) =>
-                  renderButton(useLink({ router, handlerDecorator }, button), index),
-                )}
-              </div>
-            ) : null}
-          </div>
-          {image?.src && <Img className="mt-auto ml-7" image={image} />}
-        </div>
+        <BaseTileInner
+          context={context}
+          buttons={buttons}
+          image={image}
+          children={children}
+          description={description}
+          items={items}
+        />
       </div>
     );
   },
 );
-
-function getTitleSize(titleSize, className = '') {
-  if (titleSize) {
-    return titleSize;
-  }
-
-  const colSpan = getColSpan(className);
-  if (colSpan <= 4) {
-    return 'S';
-  } else if (colSpan <= 8) {
-    return 'M';
-  } else {
-    return 'L';
-  }
-}
-
-function renderItems(items: string[] = [], version?: BlockVersion) {
-  return (
-    <section className="max-w-[600px] mt-5" role="list">
-      {items.map((_, i) => (
-        <BlockItem
-          key={String(i)}
-          className={i ? 'mt-2.5' : ''}
-          text={_}
-          white={version !== 'primary'}
-        />
-      ))}
-    </section>
-  );
-}
-
-function renderButton({ icon, asSVG, ...button }: BaseTileIconButton, i: number) {
-  if (!button?.text) return;
-
-  return icon ? (
-    <Button
-      key={String(i)}
-      appendLeft={<Icon name={icon} asSVG={asSVG} width="24" height="24" />}
-      {...button}
-    />
-  ) : (
-    <Button key={String(i)} {...button} />
-  );
-}

package/src/components/BaseTile/BaseTileInner.mobile.tsx

@@ -0,0 +1,31 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+import type { BaseTileMainProps } from './BaseTileProps';
+import { renderButton } from './renderButton';
+import { renderItems } from './renderItems';
+
+export interface BaseTileInnerProps extends BaseTileMainProps, UniBlockProps {}
+
+export const BaseTileInner = JSX<BaseTileInnerProps>(
+  ({ context, description, children, buttons, image, items, version = 'primary' }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <div>
+        {description && <div className={`font-normal text-base mt-3`}>{description}</div>}
+        {children}
+        {items?.length && renderItems(items, version)}
+        {buttons?.length && (
+          <div className="mt-[18px]">
+            {buttons.map((button, index) =>
+              renderButton(useLink({ router, handlerDecorator }, button), index),
+            )}
+          </div>
+        )}
+        {image?.src && <Img className="mt-auto ml-7" image={image} />}
+      </div>
+    );
+  },
+);

package/src/components/BaseTile/BaseTileInner.tsx

@@ -0,0 +1,37 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useLink } from '../../hooks/useLink';
+import type { UniBlockProps } from '../../types';
+import { Img } from '../../ui-kit/Img';
+import type { BaseTileMainProps } from './BaseTileProps';
+import { renderButton } from './renderButton';
+import { renderItems } from './renderItems';
+
+export interface BaseTileInnerProps extends BaseTileMainProps, UniBlockProps {}
+
+export const BaseTileInner = JSX<BaseTileInnerProps>(
+  ({ context, description, children, buttons, image, items, version = 'primary' }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+    return (
+      <div className={`flex grow w-full justify-between}`}>
+        <div className={`flex flex-col justify-between items-start}`}>
+          <div>
+            {description && (
+              <div className={`font-normal text-base mt-4 max-w-[600px]`}>{description}</div>
+            )}
+            {children}
+            {items?.length && renderItems(items, version)}
+          </div>
+          {buttons?.length && (
+            <div className="flex mt-9 gap-3">
+              {buttons.map((button, index) =>
+                renderButton(useLink({ router, handlerDecorator }, button), index),
+              )}
+            </div>
+          )}
+        </div>
+        {image?.src && <Img className="mt-auto ml-7" image={image} />}
+      </div>
+    );
+  },
+);

package/src/components/BaseTile/BaseTileProps.ts

@@ -19,9 +19,14 @@ export interface BaseTileIconButton extends ButtonWithIconProps {
 }
 
 /**
- * @title Плитка
+ * @title Общий компонент плиток
  */
-export interface BaseTileCommonProps {
+export interface BaseTileCommonProps extends BaseTileTitleProps, BaseTileMainProps {}
+
+/**
+ * @title Заголовк плитки
+ */
+export interface BaseTileTitleProps {
   /** @title Заголовок */
   title?: string;
   /**
@@ -29,7 +34,8 @@ export interface BaseTileCommonProps {
    * @default M
    */
   titleSize?: TitleSize;
-  /** @title Описание */
+}
+export interface BaseTileMainProps {
   description?: string;
   image?: Picture;
   /** @title Список */

package/src/components/BaseTile/getTitleSizeByClassName.ts

@@ -0,0 +1,11 @@
+import { getColSpan } from '../../utils/getColSpan';
+export function getTitleSizeByClassName(className = '') {
+  const colSpan = getColSpan(className);
+  if (colSpan <= 4) {
+    return 'S';
+  } else if (colSpan <= 8) {
+    return 'M';
+  } else {
+    return 'L';
+  }
+}

package/src/components/BaseTile/renderButton.mobile.tsx

@@ -0,0 +1,20 @@
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { BaseTileIconButton } from './BaseTileProps';
+
+const PADDING_TOP_CLASSES = 'first:mt-0 mt-3';
+
+export function renderButton({ icon, ...button }: BaseTileIconButton, i: number) {
+  if (!button?.text) return;
+
+  return icon ? (
+    <Button
+      className={PADDING_TOP_CLASSES}
+      key={String(i)}
+      appendLeft={<Icon name={icon} width="24" height="24" />}
+      {...button}
+    />
+  ) : (
+    <Button className={PADDING_TOP_CLASSES} key={String(i)} {...button} />
+  );
+}

package/src/components/BaseTile/renderButton.tsx

@@ -0,0 +1,13 @@
+import { Button } from '../../ui-kit/Button/Button';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { BaseTileIconButton } from './BaseTileProps';
+
+export function renderButton({ icon, ...button }: BaseTileIconButton, i: number) {
+  if (!button?.text) return;
+
+  return icon ? (
+    <Button key={String(i)} appendLeft={<Icon name={icon} width="24" height="24" />} {...button} />
+  ) : (
+    <Button key={String(i)} {...button} />
+  );
+}

package/src/components/BaseTile/renderItems.mobile.tsx

@@ -0,0 +1,12 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+
+export function renderItems(items: string[] = [], version?: BlockVersion) {
+  return (
+    <section className="mt-3" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} className="mt-1.5 first:mt-0" text={_} version={version} />
+      ))}
+    </section>
+  );
+}

package/src/components/BaseTile/renderItems.tsx

@@ -0,0 +1,12 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { BlockItem } from '../../ui-kit/BlockItem/BlockItem';
+
+export function renderItems(items: string[] = [], version?: BlockVersion) {
+  return (
+    <section className="max-w-[600px] mt-5" role="list">
+      {items.map((_, i) => (
+        <BlockItem key={String(i)} className="mt-2.5 first:mt-0" text={_} version={version} />
+      ))}
+    </section>
+  );
+}

package/src/components/Blocks.mobile.ts

@@ -1,31 +1,21 @@
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
-import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
-import { MobileAppTile } from './MobileAppTile/MobileAppTile';
-import { Navigation } from './Navigation/Navigation';
-import { PictureText } from './PictureText/PictureText';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
-import { ProductTile } from './ProductTile/ProductTile';
+import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TextBlock } from './TextBlock/TextBlock';
-import { Tile } from './Tile/Tile';
 
 export const Blocks = {
   ExchangeRateTile,
   Footer,
-  Gallery,
   Header,
   Headline,
-  MobileAppTile,
-  PictureText,
   Placeholder,
   ProductBlock,
-  ProductTile,
+  ProductGallery,
   TextBlock,
-  Tile,
-  Navigation,
   StepsBlock,
 };

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

@@ -1,11 +1,11 @@
 import { mobileContext } from '../../setup-fixture';
 
 import type { ContentPageDef } from '../../types';
-import { Blocks } from '../Blocks.mobile';
+import { Blocks } from '../Blocks';
 import { ContentPage } from './ContentPage';
 import { toMobilePage } from './toMobilePage';
 
-import data from './ContentPage.page.json';
+import data from './ContentPage.page.mobile.json';
 
 export default {
   default: (