@redneckz/wildless-cms-uni-blocks 0.10.10 → 0.11.0

package/mobile/src/{components/Filtration/FiltrationContent.ts → ui-kit/BaseFiltration/BaseFiltrationContent.ts}

@@ -46,15 +46,42 @@ export type StringArray = {
   };
 };
 
+export type NumberValue = {
+  title?: Title;
+  /**
+   * @default number
+   * @hidden
+   */
+  type?: 'number';
+};
+
+export type NumberRange = {
+  title?: Title;
+  /**
+   * @default object
+   * @hidden
+   */
+  type?: 'object';
+  /** @title */
+  properties: {
+    /** @title Минимум */
+    min?: NumberValue;
+    /** @title Максимум */
+    max?: NumberValue;
+  };
+};
+
 export type FiltrationSchema = {
-  /** @title Тип недвижимости */
-  propertyType?: StringArray;
-  /** @title Этап строительства */
-  stage?: StringArray;
-  /** @title Категории */
-  categories?: StringArray;
-  /** @title Дополнительно */
-  extraOptions?: StringArray;
+  /** @title Валюта */
+  currency?: StringArray;
+  /** @title Опции */
+  options?: StringArray;
+  /** @title Выплата процентов */
+  percents?: StringArray;
+  /** @hidden */
+  sum?: NumberValue;
+  /** @hidden */
+  period?: NumberRange;
 };
 
 /**
@@ -72,7 +99,7 @@ export type ResetButton = {
  */
 export type NotFound = TitleProps & DescriptionProps;
 
-export interface FiltrationInnerContent {
+export interface BaseFiltrationInnerContent {
   /** @title Название сворачивающейся кнопки */
   label?: string;
   /**
@@ -83,11 +110,3 @@ export interface FiltrationInnerContent {
   resetButton?: ResetButton;
   notFound?: NotFound;
 }
-
-/**
- * @title Фильтрация
- */
-export interface FiltrationContent extends FiltrationInnerContent {
-  /** @title Параметры фильтрации */
-  filtrationSchema?: FiltrationSchema;
-}

package/mobile/src/{components/Filtration/FiltrationInner.tsx → ui-kit/BaseFiltration/BaseFiltrationInner.tsx}

@@ -2,24 +2,24 @@ import { JSX } from '@redneckz/uni-jsx';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
 import type { IconName } from '../../icons/IconName';
 import type { UniBlockProps } from '../../model/JSXBlock';
-import { DefaultFoldButton } from '../../ui-kit/Foldable/DefaultFoldButton';
-import { Foldable } from '../../ui-kit/Foldable/Foldable';
-import { FoldableSection } from '../../ui-kit/Foldable/FoldableSection';
-import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
-import { Text } from '../../ui-kit/Text/Text';
 import { style } from '../../utils/style';
-import { checkShouldRenderBlock } from './checkShouldRenderBlock';
-import type { FiltrationInnerContent, NotFound } from './FiltrationContent';
+import { BaseFiltrationInnerContent, NotFound } from '../BaseFiltration/BaseFiltrationContent';
+import { checkShouldRenderBlock } from '../BaseFiltration/checkShouldRenderBlock';
+import { DefaultFoldButton } from '../Foldable/DefaultFoldButton';
+import { Foldable } from '../Foldable/Foldable';
+import { FoldableSection } from '../Foldable/FoldableSection';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { Text } from '../Text/Text';
 
 const ICONS: IconName[] = ['ArrowDownIcon', 'ArrowUpIcon'];
 
 const resultsGridStyle = 'grid grid-cols-12 gap-1 border-box';
 
-interface FiltrationInnerProps extends FiltrationInnerContent, UniBlockProps {
+interface BaseFiltrationInnerProps extends BaseFiltrationInnerContent, UniBlockProps {
   filtrationState?: Record<string, any>;
 }
 
-export const FiltrationInner = JSX<FiltrationInnerProps>(
+export const BaseFiltrationInner = JSX<BaseFiltrationInnerProps>(
   ({ label = '', filtrationState = {}, topItemsCount = 0, block, notFound, ...rest }) => {
     const blocksToRender =
       block?.blocks?.filter((b) => checkShouldRenderBlock(filtrationState, b.content || {})) || [];

package/mobile/src/ui-kit/BaseFiltration/checkShouldRenderBlock.ts

@@ -0,0 +1,49 @@
+import { isEmpty } from '../../utils/isEmpty';
+
+const isSingularFieldMatch =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) || isEmpty(target[key]) || pattern[key] === target[key];
+
+const isMultipleFieldMatch =
+  <P extends Partial<Record<string, any[]>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    pattern[key]?.some((_) => target[key]?.includes(_));
+
+const isNumberFieldMatch =
+  <P extends Partial<Record<string, number>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    naturalNumber(pattern[key]) <= naturalNumber(target[key]);
+
+const isValueInRange =
+  <P extends Partial<Record<string, any>>, T extends P>(key: string, pattern: P) =>
+  (target: T) =>
+    isEmpty(pattern[key]) ||
+    isEmpty(target[key]) ||
+    (naturalNumber(pattern[key]?.min) >= naturalNumber(target[key]?.min) &&
+      naturalNumber(pattern[key]?.min) <= naturalNumber(target[key]?.max));
+
+export const checkShouldRenderBlock = (pattern: Record<string, any>, target: Record<string, any>) =>
+  Object.entries(pattern)
+    .map(([key, subPattern]) => {
+      if (typeof subPattern === 'number') {
+        return isNumberFieldMatch(key, pattern);
+      }
+
+      if (typeof subPattern === 'object') {
+        if ('min' in subPattern && 'max' in subPattern) {
+          return isValueInRange(key, pattern);
+        }
+      }
+
+      return Array.isArray(subPattern)
+        ? isMultipleFieldMatch(key, pattern)
+        : isSingularFieldMatch(key, pattern);
+    })
+    .every((predicate) => predicate(target));
+
+const naturalNumber = (n: any) => Number(n || 0);

package/mobile/src/ui-kit/BaseFiltration/renderFiltrationForm.tsx

@@ -0,0 +1,75 @@
+import type { FormFieldRegisterer } from '../../hooks/useForm';
+import type { VNode } from '../../model/VNode';
+import { Button } from '../Button/Button';
+import { SlideCheckboxGroup } from '../SlideCheckboxGroup/SlideCheckboxGroup';
+import { Text } from '../Text/Text';
+import type {
+  BaseFiltrationInnerContent,
+  NumberRange,
+  NumberValue,
+  StringArray,
+  StringEnum,
+} from './BaseFiltrationContent';
+
+type SchemaItem = StringArray | StringEnum | NumberRange | NumberValue;
+type FiltrationSchema = Record<string, SchemaItem>;
+
+interface RenderFiltrationFormProps {
+  field: FormFieldRegisterer<any>;
+  reset: () => void;
+  filtrationSchema: FiltrationSchema;
+  resetButton?: BaseFiltrationInnerContent['resetButton'];
+  children?: VNode;
+}
+
+export const renderFiltrationForm = ({
+  field,
+  reset,
+  filtrationSchema,
+  resetButton,
+  children,
+}: RenderFiltrationFormProps) => (
+  <form className="flex justify-between bg-white p-9 mb-1">
+    <div className="flex gap-11">
+      {children}
+      {Object.entries(filtrationSchema).map(renderFormItem(field))}
+    </div>
+    {resetButton ? (
+      <div>
+        <Button className="w-72 ml-3" onClick={reset} {...resetButton} />
+      </div>
+    ) : null}
+  </form>
+);
+
+const renderFormItem =
+  (field: FormFieldRegisterer<any>) =>
+  ([key, item]: [string, SchemaItem]) => {
+    const type = item?.type;
+
+    switch (type) {
+      case 'array':
+        return renderCheckboxes(key, field)(item);
+      default:
+        return null;
+    }
+  };
+
+const renderCheckboxes = (key: string, field: FormFieldRegisterer<any>) => (item?: StringArray) => {
+  const options =
+    item?.items?.enum?.map((e, i) => ({ value: e, title: item?.items?.enumNames?.[i] || '' })) ||
+    [];
+
+  return (
+    <div key={key}>
+      {item?.title ? (
+        <div className="mb-4">
+          <Text size="text-m" font="font-light" color="text-secondary-text">
+            {item.title}
+          </Text>
+        </div>
+      ) : null}
+      <SlideCheckboxGroup items={options} multiple {...field<string, string[] | undefined>(key)} />
+    </div>
+  );
+};

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

@@ -1,24 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { IconVersion } from '../../model/IconVersion';
+import { style } from '../../utils/style';
 import { Img } from '../Img/Img';
+import { Paragraph } from '../Paragraph/Paragraph';
+import { Text } from '../Text/Text';
 import type { BenefitItemCommonProps, BenefitItemProps } from './BenefitItemProps';
 
 export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
 
-export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
-  const {
-    className = '',
-    icon,
-    label,
-    description,
-    version = 'primary',
-    benefitsVersion = 'normal',
-  } = props;
-  const listItemAlign = description ? 'items-start' : 'items-center';
-
-  return (
-    <div className={`flex gap-5 ${listItemAlign} ${className}`}>
+export const BenefitItem = JSX<BenefitGeneralProps>(
+  ({ className, icon, label, description, version = 'primary', benefitsVersion = 'normal' }) => (
+    <div className={style('flex gap-5', description ? 'items-start' : 'items-center', className)}>
       {icon ? (
         <div className={getBenefitIconBgStyle(version, benefitsVersion)}>
           <Img
@@ -27,19 +20,24 @@ export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
           />
         </div>
       ) : null}
-      <div className="gap-0.5">
+      <div>
         {label ? (
-          <div className="text-h6 text-primary-text group-data-secondary:text-white">{label}</div>
+          <Text size="text-h6" color="text-primary-text group-data-secondary:text-white">
+            {label}
+          </Text>
         ) : null}
         {description ? (
-          <div className="text-m-light text-secondary-text group-data-secondary:text-white">
+          <Paragraph
+            size="text-m-light"
+            color="text-secondary-text group-data-secondary:text-white"
+          >
             {description}
-          </div>
+          </Paragraph>
         ) : null}
       </div>
     </div>
-  );
-});
+  ),
+);
 
 function getBenefitIconBgStyle(version: BlockVersion, benefitsVersion: IconVersion) {
   let bgColorStyle = 'bg-primary-main text-black';

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -20,15 +20,7 @@ export const blockStyles: Record<BlockVersion, string> = {
 };
 
 export const BlockWrapper = JSX<BlockWrapperProps>(
-  ({
-    className = '',
-    version = 'primary',
-    isTheme = true,
-    block,
-    tag = 'section',
-    role,
-    children,
-  }) => {
+  ({ className, version = 'primary', isTheme = true, block, tag = 'section', role, children }) => {
     const Tag: any = tag;
 
     const ref = useBlockIntersectionObserver(block);

package/mobile/src/ui-kit/Button/renderButtonsSection.tsx

@@ -15,7 +15,7 @@ export const renderButtonsSection = (
   { className = '', buttonClassName, isVertical }: ButtonsSectionOptions = {},
 ) =>
   buttons?.length && buttons.some((_) => _?.text || _?.icon?.icon) ? (
-    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'gap-4', className)}>
+    <div className={style('flex', isVertical ? 'flex-col gap-2' : 'flex-wrap gap-4', className)}>
       {buttons.map(renderButton(buttonClassName))}
     </div>
   ) : null;

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

@@ -19,7 +19,7 @@ export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
     return (
       <button
         className={style(
-          'flex justify-center w-full px-0 py-5 border border-transparent outline-none focus:border-primary-text',
+          'flex justify-center w-full px-0 py-4 border border-transparent outline-none focus:border-primary-text',
           disabled
             ? 'bg-main-divider text-main-disabled hover:bg-main-divider'
             : 'bg-primary-main text-white hover:bg-primary-hove',

package/mobile/src/ui-kit/Icon/IconProps.ts

@@ -2,6 +2,7 @@ import type { IconName } from '../../icons/IconName';
 import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
+export type IconBgVersion = 'primary' | 'secondary' | 'secondary-light';
 
 export interface IconCompatibilityFields {
   /** @title Альтернативный текст (alt) */
@@ -20,3 +21,7 @@ export type IconProps = IconCompatibilityFields & {
   name?: IconName;
   iconVersion?: IconVersion;
 };
+
+export interface RoundedIconProps extends IconProps {
+  iconBgVersion?: IconBgVersion;
+}

package/mobile/src/ui-kit/Icon/RoundedIcon.tsx

@@ -0,0 +1,16 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from './Icon';
+import type { IconBgVersion, RoundedIconProps } from './IconProps';
+import { style } from '../../utils/style';
+
+const iconBgStyles: Record<IconBgVersion, string> = {
+  primary: 'bg-main-divider',
+  secondary: 'bg-white/30',
+  'secondary-light': 'bg-secondary-light',
+};
+
+export const RoundedIcon = JSX<RoundedIconProps>(({ iconBgVersion = 'primary', ...rest }) => (
+  <div className={style('rounded-icon p-2.5 mr-3', iconBgStyles[iconBgVersion])}>
+    <Icon {...rest} />
+  </div>
+));

package/mobile/src/ui-kit/LinkList/LinkList.tsx

@@ -0,0 +1,25 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { LinkProps } from '../../model/LinkProps';
+import { style } from '../../utils/style';
+import { LinkListProps } from './LinkListProps';
+import { linkListStyles } from './linkListStyles';
+
+export const LinkList = JSX<LinkListProps>(({ className = '', items }) =>
+  items?.length ? (
+    <ul className={style('flex flex-col p-0', linkListStyles, className)}>
+      {items.map(renderLinkListItem)}
+    </ul>
+  ) : null,
+);
+
+const renderLinkListItem = (item: LinkProps, i: number) => {
+  const { text, ...linkProps } = item;
+
+  return (
+    <li key={`list_item_${String(i)}`} className="list-none mb-4 sm:mb-6 sm:last:mb-0">
+      <a className="hover:text-primary-main sm:font-light" role="link" {...linkProps}>
+        {text ? text : null}
+      </a>
+    </li>
+  );
+};

package/mobile/src/ui-kit/LinkList/LinkListProps.tsx

@@ -0,0 +1,6 @@
+import type { LinkProps } from '../../model/LinkProps';
+
+export interface LinkListProps {
+  items?: LinkProps[];
+  className?: string;
+}

package/mobile/src/ui-kit/LinkList/linkListStyles.ts

@@ -0,0 +1 @@
+export const linkListStyles = '';

package/mobile/src/ui-kit/List/List.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { ListItem } from './ListItem';
 import type { ListItemSize, ListProps } from './ListProps';
 
@@ -8,28 +9,26 @@ const TEXT_SIZE_MAP: Record<ListItemSize, string> = {
   L: 'text-h5',
 };
 
-const ITEM_INDENT_MAP = {
+const ITEM_INDENT_MAP: Record<ListItemSize, string> = {
   S: 'ml-2',
   M: 'ml-3',
   L: 'ml-4',
 };
 
 export const List = JSX<ListProps>(
-  ({ className = '', hasIndent, isDotted, itemClassName = '', items, listItemSize = 'M' }) =>
+  ({ className, hasIndent, isDotted, items, listItemSize = 'M' }) =>
     items?.length ? (
       <section
-        className={`text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text ${
-          TEXT_SIZE_MAP[listItemSize]
-        } ${hasIndent ? ITEM_INDENT_MAP[listItemSize] : ''} ${className}`}
+        className={style(
+          'flex flex-col gap-2 text-left text-primary-text group-data-secondary:text-white group-data-gray:text-secondary-text',
+          TEXT_SIZE_MAP[listItemSize],
+          hasIndent ? ITEM_INDENT_MAP[listItemSize] : '',
+          className,
+        )}
         role="list"
       >
         {items.map((item, i) => (
-          <ListItem
-            key={String(i)}
-            className={itemClassName}
-            isDotted={isDotted}
-            size={listItemSize}
-          >
+          <ListItem key={String(i)} isDotted={isDotted} size={listItemSize}>
             {item}
           </ListItem>
         ))}

package/mobile/src/ui-kit/List/ListItem.tsx

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import type { ListItemSize } from './ListProps';
 
 /**
@@ -12,18 +13,21 @@ export interface ListItemProps {
 }
 
 const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4',
-  M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3',
-  S: 'w-1 h-1 min-w-1 min-h-1 mr-2',
+  L: 'w-1.5 h-1.5 mr-4',
+  M: 'w-1.5 h-1.5 mr-3',
+  S: 'w-1 h-1 mr-2',
 };
 
 export const ListItem = JSX<ListItemProps>(
-  ({ className = '', isDotted = true, children, size = 'M' }) => (
-    <div className={`font-sans flex items-baseline ${className}`} role="listitem">
+  ({ className, isDotted = true, children, size = 'M' }) => (
+    <div className={style('font-sans flex', className)} role="listitem">
       {isDotted ? (
-        <div>
+        <div className="shrink-0">
           <div
-            className={`rounded-full align-middle inline-block bg-primary-text group-data-secondary:bg-white ${DOT_SIZE_MAP[size]}`}
+            className={style(
+              'align-middle inline-block rounded-full bg-primary-text group-data-secondary:bg-white',
+              DOT_SIZE_MAP[size],
+            )}
           />
         </div>
       ) : null}

package/mobile/src/ui-kit/List/ListProps.ts

@@ -16,7 +16,5 @@ export type ListProps = ListContent &
     className?: string;
     /** @title Отступ */
     hasIndent?: boolean;
-    /** @hidden */
-    itemClassName?: string;
     listItemSize?: ListItemSize;
   };

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

@@ -1,6 +1,38 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { SearchBarInner, SearchBarInnerProps } from './SearchBarInner';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { CloseButton } from '../Dialog/CloseButton';
+import { useDialog } from '../Dialog/useDialog';
+import { useDialogHandlers } from '../Dialog/useDialogHandlers';
+import { SEARCH_DIALOG_ID } from '../SearchDialog/SearchDialog';
+import { SearchInput } from '../SearchDialog/SearchInput';
 
-export const SearchBar = JSX<SearchBarInnerProps>((props) => (
-  <SearchBarInner {...props} isMobile={true} />
-));
+interface SearchBarProps {
+  className?: string;
+}
+
+const MIN_QUERY_LEN = 3;
+
+export const SearchBar = JSX<SearchBarProps>(({ className }) => {
+  const [value, setValue] = useState('');
+
+  const resetQueryOnDialogClose = useCallback(() => setValue(''), []);
+  useDialogHandlers({ onClose: resetQueryOnDialogClose });
+
+  const { open } = useDialog(SEARCH_DIALOG_ID);
+
+  const handleInitialInputChange = useCallback((_: string) => {
+    setValue(_);
+    if (isQueryLongEnough(_)) {
+      open(_);
+    }
+  }, []);
+
+  return (
+    <div className={className}>
+      <SearchInput value={value} onChange={handleInitialInputChange} />
+      <CloseButton className="absolute top-2 right-3 sm:hidden" onClick={resetQueryOnDialogClose} />
+    </div>
+  );
+});
+
+const isQueryLongEnough = (_: string) => _ && _.length >= MIN_QUERY_LEN;

package/mobile/src/ui-kit/SearchDialog/SearchInput.tsx

@@ -5,7 +5,6 @@ import { Img } from '../Img/Img';
 
 export interface SearchInputProps {
   className?: string;
-  isMobile?: boolean;
   value?: string;
   autoFocus?: boolean;
   onChange?: (value: string) => void;
@@ -13,7 +12,7 @@ export interface SearchInputProps {
 }
 
 export const SearchInput = JSX<SearchInputProps>(
-  ({ className, isMobile, value, autoFocus, onChange, onFocus }) => {
+  ({ className, value, autoFocus, onChange, onFocus }) => {
     const handleChange = useCallback(
       (ev: { target?: { value?: string } }) => {
         onChange && onChange(ev.target?.value || '');
@@ -30,7 +29,6 @@ export const SearchInput = JSX<SearchInputProps>(
           className={style(
             'h-12 pl-12 w-full text-l text-black outline-none box-border',
             'border border-solid rounded-md border-gray hover:border-primary-hover active:border-primary-text focus:border-primary-text',
-            isMobile ? '' : 'h-full',
           )}
           value={value}
           type="text"

package/mobile/src/utils/isEmpty.ts

@@ -0,0 +1,6 @@
+export const isEmpty = <T>(v: T): v is NonNullable<T> =>
+  v === null ||
+  v === undefined ||
+  v === '' ||
+  (Array.isArray(v) && v.length === 0) ||
+  (typeof v === 'object' && Object.keys(v).length === 0);

package/mobile/src/utils/joinList.ts

@@ -1,7 +1,7 @@
-export function joinList<E>(sep: E): (list: E[]) => E[] {
-  return (list) =>
+export const joinList =
+  <E>(sep: E) =>
+  (list: E[]): E[] =>
     list.reduce(
-      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: i }, el) : [el]),
+      (acc, el, i) => (acc.length ? acc.concat({ ...sep, key: `sep-${i}` }, el) : [el]),
       [] as E[],
     );
-}

package/package.json

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

package/src/components/BaseTile/BaseTile.tsx

@@ -1,16 +1,39 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { BaseTileCommonProps } from './BaseTileProps';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { VNode } from '../../model/VNode';
+import { style } from '../../utils/style';
 
-export const BaseTile = JSX<BaseTileCommonProps>(
-  ({ className = '', title = '', buttons, image, children }) => (
-    <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
+interface BaseTileProps extends UniBlockProps {
+  title?: VNode;
+  insetTitle?: VNode;
+  leftImage?: VNode;
+  rightImage?: VNode;
+  backImage?: VNode;
+  buttons?: VNode;
+}
+
+export const BaseTile = JSX<BaseTileProps>(
+  ({
+    className,
+    title = '',
+    insetTitle = '',
+    buttons,
+    leftImage,
+    rightImage,
+    backImage,
+    children,
+  }) => (
+    <div className={style('relative flex flex-col font-sans', className)}>
+      {backImage ? <div className="absolute bottom-0 right-0 z-0">{backImage}</div> : null}
       {title}
-      <div className="flex grow w-full justify-between">
-        <div className="flex flex-col justify-between w-full">
-          <div className="h-full">{children}</div>
-          {buttons ? <div className="mt-auto pt-8">{buttons}</div> : null}
+      <div className="grow relative flex flex-wrap justify-between items-stretch gap-8">
+        {leftImage}
+        <div className={style('flex flex-col gap-8', leftImage ? '' : 'grow')}>
+          {insetTitle}
+          <div className="grow">{children}</div>
+          {buttons}
         </div>
-        {image}
+        {rightImage ? <div className="sm:-order-1 md:-order-1">{rightImage}</div> : null}
       </div>
     </div>
   ),

package/src/components/Blocks.mobile.ts

@@ -8,7 +8,6 @@ import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { ImgBlock } from './ImgBlock/ImgBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
-import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
@@ -28,7 +27,6 @@ export const Blocks: BlocksRegistry = {
   Headline,
   ImgBlock,
   LinkDocs,
-  LinkList,
   MobileAppTile,
   Placeholder,
   ProductBlock,