@redneckz/wildless-cms-uni-blocks 0.6.45 → 0.6.46

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -22,13 +22,7 @@ export const CarouselCard = JSX<CarouselCardProps>(
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
         <div className="relative bg-white z-10 py-6 px-10 border border-solid border-green-light">
-          <Headline
-            className="!p-0"
-            title={title}
-            description={description}
-            headlineVersion="M"
-            align="center"
-          />
+          <Headline className="!p-0" title={title} description={description} headlineVersion="M" />
           {button ? <div className="mt-6">{renderButton({ button })}</div> : null}
         </div>
       </div>

package/mobile/src/components/CarouselLinks/CarouselLinks.tsx

@@ -24,7 +24,7 @@ export const CarouselLinks = JSX<CarouselLinksProps>(
             title={title}
             as="h1"
             description={description}
-            align="left"
+            align="text-left"
             className="p-0"
             bgColorHeadline="secondary"
           />

package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx

@@ -10,7 +10,7 @@ import { List } from '../../ui-kit/List/List';
 import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Text } from '../../ui-kit/Text/Text';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { CarouselProductCardContent, ListProps } from './CarouselProductCardContent';
 
 export interface CarouselProductCardProps extends CarouselProductCardContent, UniBlockProps {}

package/mobile/src/components/Catalog/Catalog.tsx

@@ -30,7 +30,6 @@ export const Catalog = JSX<CatalogProps>(
           title={title}
           description={description}
           headlineVersion="M"
-          align="center"
           {...rest}
         />
         <div

package/mobile/src/components/ContactsBlock/ContactsBlock.tsx

@@ -41,7 +41,7 @@ const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProp
             title={title}
             description={description}
             headlineVersion="XS"
-            align="left"
+            align="text-left"
             bgColorHeadline={version}
           />
           {additionalDescription ? (

package/mobile/src/components/Gallery/GalleryCardInner.tsx

@@ -7,7 +7,7 @@ import { renderButton } from '../../ui-kit/Button/ButtonSection';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import { getIconWithVersion } from '../../utils/getIconWithVersion';
-import { HEADLINE_SMALL_VERSION } from '../Headline/constants';
+import { HEADLINE_SMALL_VERSION } from '../Headline/headlineVersionStyles';
 import type { GalleryCardProps, GalleryItemProps } from './GalleryContent';
 
 export const GalleryCardInner = JSX<GalleryCardProps>(

package/mobile/src/components/Gallery/GalleryContainer.tsx

@@ -19,7 +19,7 @@ export interface GalleryCardData {
 export const GalleryContainer = JSX<GalleryContainerProps>(
   ({ headlineVersion = 'M', cards = [], version = 'normal', activeIndex, ...rest }) => (
     <div>
-      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} align="center" />
+      <Headline {...rest} className="!p-0" headlineVersion={headlineVersion} />
       <div
         className={`flex mt-8 ${
           cards?.length <= galleryLengthForScrollMap[version] ? 'justify-center' : ''

package/mobile/src/components/GracePeriod/GracePeriod.tsx

@@ -19,7 +19,6 @@ export const GracePeriod = JSX<GracePeriodProps>(
         title={title}
         description={description}
         headlineVersion="M"
-        align="center"
         {...rest}
       />
       {calendar ? renderCalendar(calendar) : null}

package/mobile/src/components/Headline/Headline.tsx

@@ -1,36 +1,33 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { AlignText } from '../../model/AlignText';
-
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
-import { HEADLINE_BLOCK_STYLE_MAPS } from './constants';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import type { HeadlineContent } from './HeadlineContent';
+import { headlineStyles } from './headlineStyles';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
 
 export const Headline = JSX<HeadlineProps>(
   ({
-    bgColorHeadline = 'transparent',
     className = '',
     title,
     description,
     image,
-    align = 'left',
+    bgColorHeadline = 'transparent',
+    align = 'text-left',
   }) => {
-    const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+    const style = headlineStyles[bgColorHeadline];
 
     return (
-      <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
+      <section className={`px-4 py-6 flex flex-col gap-2.5 ${style.wrapper} ${className}`}>
         {title ? (
-          <Heading
-            headingType="h2"
-            className={`${STYLE_MAPS.text} ${AlignText[align]}`}
-            title={title}
-          />
+          <Heading headingType="h2" className={`${style.titleColor} ${align}`} title={title} />
         ) : null}
         {description ? (
-          <p className={`text-m ${STYLE_MAPS.description} ${AlignText[align]}`}>{description}</p>
+          <Paragraph color={style.descriptionColor || style.titleColor} size="text-m" align={align}>
+            {description}
+          </Paragraph>
         ) : null}
         {image?.src && (
           <div className="mt-2.5 mx-auto flex justify-center">

package/mobile/src/components/Headline/HeadlineContent.ts

@@ -1,8 +1,8 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Заголовок
@@ -10,7 +10,7 @@ import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
 export type HeadlineContent = HeadlineProps & {
   /** @title Изображение (моб.) */
   image?: Picture;
-  align?: AlignType;
+  align?: TextAlign;
   bgColorHeadline?: BlockVersionWithTransparent;
   /** @hidden */
   as?: HeadingTagType;

package/mobile/src/components/Headline/headlineStyles.ts

@@ -0,0 +1,25 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+
+export const headlineStyles: Record<
+  BlockVersionWithTransparent,
+  {
+    wrapper: string;
+    titleColor: TextColor;
+    descriptionColor?: TextColor;
+  }
+> = {
+  transparent: {
+    wrapper: 'bg-transparent',
+    titleColor: 'text-primary-text',
+  },
+  primary: {
+    wrapper: 'bg-white',
+    titleColor: 'text-primary-text',
+  },
+  secondary: {
+    wrapper: 'bg-primary-main',
+    titleColor: 'text-white',
+    descriptionColor: 'text-white/80',
+  },
+};

package/mobile/src/components/Headline/headlineVersionStyles.ts

@@ -0,0 +1,55 @@
+import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
+import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
+import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+
+export const headlineVersionStyles: Record<
+  HeadlineVersion,
+  {
+    wrapper: string;
+    title: HeadingCommonProps;
+    descriptionSize: TextSize | TitleSize;
+  }
+> = {
+  XXL: {
+    wrapper: 'gap-[18px]',
+    title: { headingType: 'h0', as: 'h1' },
+    descriptionSize: 'text-h5',
+  },
+  XL: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h1', as: 'h1' },
+    descriptionSize: 'text-xl-light',
+  },
+  L: {
+    wrapper: 'gap-4',
+    title: { headingType: 'h2', as: 'h2' },
+    descriptionSize: 'text-xl-light',
+  },
+  M: {
+    wrapper: 'gap-3',
+    title: { headingType: 'h3', as: 'h3' },
+    descriptionSize: 'text-xl-light',
+  },
+  S: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h4', as: 'h4' },
+    descriptionSize: 'text-xl-light',
+  },
+  XS: {
+    wrapper: 'gap-2',
+    title: { headingType: 'h5', as: 'h5' },
+    descriptionSize: 'text-l-light',
+  },
+};
+
+// TODO Move to Gallery and rename
+export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {
+  H6: 'text-h6',
+  XL_L: 'text-xl-light',
+  XL_R: 'text-xl',
+  L_L: 'text-l-light',
+  L_R: 'text-l',
+  M: 'text-m-light',
+  S: 'text-s-light',
+  XS: 'text-xs-light',
+};

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

@@ -0,0 +1,19 @@
+{
+  "content": {
+    "version": "primary",
+    "gap": "XS"
+  },
+  "style": ["col-span-12"],
+  "type": "HorizontalLayout",
+  "blocks": [
+    {
+      "type": "Headline",
+      "content": {
+        "title": "Заголовок блока",
+        "description": "Описание блока",
+        "headlineVersion": "M"
+      },
+      "style": ["col-span-12"]
+    }
+  ]
+}

package/mobile/src/components/HorizontalLayout/HorizontalLayout.tsx

@@ -0,0 +1,42 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
+import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import type { HorizontalLayoutContent } from './HorizontalLayoutContent';
+
+export interface HorizontalLayoutProps extends HorizontalLayoutContent, UniBlockProps {}
+
+export const HorizontalLayout: JSXBlock<HorizontalLayoutProps> = JSX<HorizontalLayoutProps>(
+  ({
+    className = '',
+    gap = 'XS',
+    isPadding = false,
+    version = 'transparent',
+    options,
+    ...rest
+  }) => {
+    const paddingStyle = isPadding ? 'p-12' : '';
+
+    return (
+      <BlockWrapper
+        className={[
+          'grid grid-cols-12',
+          paddingStyle,
+          GapStyleMap[gap],
+          LayoutBackgroundStyleMap[version],
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        {...rest}
+      >
+        {renderChildren({ ...rest, options: options })}
+      </BlockWrapper>
+    );
+  },
+);
+
+HorizontalLayout.childrenTypes = {
+  exclude: ['HorizontalLayout'],
+};

package/mobile/src/components/HorizontalLayout/HorizontalLayout.ui.json

@@ -0,0 +1 @@
+{}

package/mobile/src/components/HorizontalLayout/HorizontalLayoutContent.ts

@@ -0,0 +1,17 @@
+import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
+
+/**
+ * @title Отсуп между компонентами
+ * @enumNames ["Самый большой", "Очень большой", "Большой", "Средний", "Маленький", "Самый маленький", "Без отступа"]
+ */
+export type GapVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S' | 'XS' | '';
+
+/**
+ * @title Горизонтальный компоновщик
+ */
+export interface HorizontalLayoutContent {
+  version?: BlockVersionWithTransparent;
+  gap?: GapVersion;
+  /** @title Внутренний отступ компоновщика */
+  isPadding?: boolean;
+}

package/mobile/src/components/LinkDocs/LinkDocs.tsx

@@ -25,7 +25,6 @@ export const LinkDocs = JSX<LinkDocsProps>(
         className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
         title={title}
         description={description}
-        align="center"
         {...rest}
       />
       {orientation === 'vertical' ? (

package/mobile/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,8 +1,8 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { LinkProps } from '../../model/LinkProps';
-import type { AlignType } from '../../model/AlignType';
 import type { ListOrientation } from '../../model/ListOrientation';
 import type { Picture } from '../../model/Picture';
-import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
 /**
  * @title Отображение списка
@@ -43,5 +43,5 @@ export type LinkDocsContent = HeadlineCommonProps & {
   orientation?: ListOrientation; // TODO: мобильный проп
   /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
   hasBorder?: boolean;
-  align?: AlignType;
+  align?: TextAlign;
 };

package/mobile/src/components/PictureText/PictureText.tsx

@@ -35,7 +35,6 @@ export const PictureText = JSX<PictureTextProps>(
         description={description}
         headlineVersion="M"
         bgColorHeadline={version}
-        align="center"
         {...rest}
       />
       <div className={'flex justify-center gap-[122px] mt-[30px]'}>

package/mobile/src/components/ProductTile/ProductTile.tsx

@@ -41,7 +41,7 @@ export const ProductTile = JSX<ProductTileProps>(
           description={description}
           headlineVersion={headlineVersion}
           bgColorHeadline={version}
-          align="left"
+          align="text-left"
           {...rest}
         />
         {renderBenefits(benefits, version, image)}

package/mobile/src/components/PromoTile/PromoTile.tsx

@@ -36,7 +36,7 @@ export const PromoTile = JSX<PromoTileProps>(
               className={`!p-0 max-w-[600px]`}
               headlineVersion={getTileHeadingType(className)}
               bgColorHeadline={version}
-              align="left"
+              align="text-left"
               as="h2"
               {...rest}
             />

package/mobile/src/components/VerticalLayout/VerticalLayout.tsx

@@ -1,10 +1,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
 import type { AlignType } from '../../model/AlignType';
-import { BlockVersionWithTransparent } from '../../model/BlockVersion';
+import { GapStyleMap, LayoutBackgroundStyleMap } from '../../model/BlockVersion';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import type { GapVersion, VerticalLayoutContent } from './VerticalLayoutContent';
+import type { VerticalLayoutContent } from './VerticalLayoutContent';
 
 export interface VerticalLayoutProps extends VerticalLayoutContent, UniBlockProps {}
 
@@ -14,22 +14,6 @@ const alignStyle: Record<AlignType, string> = {
   right: 'items-end',
 };
 
-const gapStyleMap: Record<GapVersion, string> = {
-  XXL: 'gap-12',
-  XL: 'gap-10',
-  L: 'gap-8',
-  M: 'gap-4',
-  S: 'gap-2',
-  XS: 'gap-1',
-  '': '',
-};
-
-const backgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
-  transparent: '',
-  primary: 'bg-white',
-  secondary: 'bg-primary-main',
-};
-
 export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutProps>(
   ({
     className = '',
@@ -49,9 +33,9 @@ export const VerticalLayout: JSXBlock<VerticalLayoutProps> = JSX<VerticalLayoutP
         className={[
           'flex flex-col [&>*]:max-w-full',
           paddingStyle,
-          gapStyleMap[gap],
+          GapStyleMap[gap],
           align && alignStyle[align],
-          backgroundStyleMap[version],
+          LayoutBackgroundStyleMap[version],
           className,
         ]
           .filter(Boolean)

package/mobile/src/model/AlignText.ts

@@ -1,6 +1,7 @@
+import type { TextAlign } from '../ui-kit/Text/TextProps';
 import type { AlignType } from './AlignType';
 
-export const AlignText: Record<AlignType, string> = {
+export const AlignText: Record<AlignType, TextAlign> = {
   left: 'text-left',
   center: 'text-center',
   right: 'text-right',

package/mobile/src/model/BlockVersion.ts

@@ -1,3 +1,5 @@
+import { GapVersion } from '../components/HorizontalLayout/HorizontalLayoutContent';
+
 /**
  * @title Цвет блока
  * @enumNames ["Основная", "Второстепенная"]
@@ -25,3 +27,19 @@ export const VersionWithTransparentStyleMap: Record<BlockVersionWithTransparent,
   primary: 'bg-white text-primary-text',
   secondary: 'bg-primary-main text-white',
 };
+
+export const GapStyleMap: Record<GapVersion, string> = {
+  XXL: 'gap-12',
+  XL: 'gap-10',
+  L: 'gap-8',
+  M: 'gap-4',
+  S: 'gap-2',
+  XS: 'gap-1',
+  '': '',
+};
+
+export const LayoutBackgroundStyleMap: Record<BlockVersionWithTransparent, string> = {
+  transparent: '',
+  primary: 'bg-white',
+  secondary: 'bg-primary-main',
+};

package/mobile/src/services/BlockRouter/BlockRouter.ts

@@ -16,6 +16,8 @@ interface EventMap {
 }
 
 const normalizeAnchor = (rawAnchor?: string) => rawAnchor?.replace('#', '');
+const getURLWithAnchor = (rawAnchor?: string) =>
+  `${globalThis.location?.pathname}#${normalizeAnchor(rawAnchor)}`;
 
 export class BlockRouter {
   public static readonly inst = new BlockRouter();
@@ -38,14 +40,14 @@ export class BlockRouter {
   }
 
   push(rawAnchor: string) {
-    globalThis.history?.pushState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+    globalThis.history?.pushState(null, '', getURLWithAnchor(rawAnchor));
   }
 
   replace(rawAnchor: string) {
-    globalThis.history?.replaceState(null, '', `#${normalizeAnchor(rawAnchor)}`);
+    globalThis.history?.replaceState(null, '', getURLWithAnchor(rawAnchor));
   }
 
   reset() {
-    globalThis.history?.replaceState(null, '', '#');
+    globalThis.history?.replaceState(null, '', getURLWithAnchor());
   }
 }

package/mobile/src/ui-kit/Img/ImgAsPicture.tsx

@@ -11,12 +11,13 @@ const sourcesComparator = (a: Picture, b: Picture) => {
 };
 
 export const ImgAsPicture = JSX<ImageProps<Picture>>(
-  ({ className = '', image, imageClassName = '', isMobile = false }) => {
+  ({ className = '', image, imageClassName = '', isMobile = false, pathPrefix = '' }) => {
     if (!image || (!image?.sources && !image?.src)) {
       return null;
     }
 
     const pictureStyles = isMobile ? 'flex' : 'flex-none';
+    const normalizedPathPrefix = normalizePathPrefix(pathPrefix);
 
     return (
       <picture className={`${pictureStyles} ${className}`}>
@@ -26,14 +27,18 @@ export const ImgAsPicture = JSX<ImageProps<Picture>>(
               .map(({ src, format, media }, index) => (
                 <source
                   key={`${index}_${src}`}
-                  srcSet={src}
+                  srcSet={addPathPrefixToSrcSet(src, normalizedPathPrefix)}
                   type={formatToMimeType(format)}
                   media={media ? `(max-width: ${media}px)` : ''}
                   {...image.size}
                 />
               ))
           : null}
-        {renderImg(image, imageClassName, isMobile)}
+        {renderImg(
+          { ...image, src: `${normalizedPathPrefix}${image.src}` },
+          imageClassName,
+          isMobile,
+        )}
       </picture>
     );
   },
@@ -61,6 +66,15 @@ const renderImg = (image: Picture, imageClassName = '', isMobile = false) => {
   );
 };
 
+const normalizePathPrefix = (pathPrefix = '') =>
+  pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
+
+const addPathPrefixToSrcSet = (srcset = '', pathPrefix = '') =>
+  srcset
+    .split(',')
+    .map((src) => `${pathPrefix}${src.trim()}`)
+    .join(', ');
+
 export function formatToMimeType(format: ImgSource['format']): string | undefined {
   return format ? `image/${String(format)}` : undefined;
 }

package/mobile/src/ui-kit/Img/ImgInner.tsx

@@ -6,7 +6,7 @@ import { ImgAsPicture } from './ImgAsPicture';
 import type { Image, ImageProps } from './ImgProps';
 
 export const ImgInner = JSX<ImageProps<Image>>(
-  ({ className = '', image, imageClassName = '', isMobile, ...iconProps }) => {
+  ({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
     if (!image) {
       return null;
     }
@@ -31,6 +31,7 @@ export const ImgInner = JSX<ImageProps<Image>>(
         imageClassName={imageClassName}
         image={image as Picture}
         isMobile={isMobile}
+        pathPrefix={pathPrefix}
       />
     );
   },

package/mobile/src/ui-kit/Img/ImgProps.ts

@@ -10,4 +10,5 @@ export interface ImageProps<T> extends ImageContent<T>, IconCompatibilityFields
   className?: string;
   imageClassName?: string;
   isMobile?: boolean;
+  pathPrefix?: string;
 }

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

@@ -131,7 +131,7 @@ const renderRegion =
             close && close();
           }}
         >
-          {region.name}
+          {region.name || ''}
         </button>
       </div>
     );
@@ -159,10 +159,12 @@ const ForeignOffice = JSX<ForeignOffice>(({ icon, ...rest }) => {
 
   return (
     <div className="flex gap-x-3">
-      <Img image={icon} />
-      <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
-        {text}
-      </a>
+      {icon ? <Img pathPrefix="/wcms-resources/" image={icon} /> : null}
+      {text ? (
+        <a className="hover:text-primary-hover" href={href} target={target} onClick={onClick}>
+          {text}
+        </a>
+      ) : null}
     </div>
   );
 });

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

@@ -1,10 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ParagraphProps } from './ParagraphProps';
 
-export const Paragraph = JSX<ParagraphProps>((props) => {
-  const { size = '', color = '', align = '', font = '', children } = props;
-
-  const textClasses = `font-sans ${size} ${color} ${align} ${font}`;
-
-  return <p className={textClasses}>{children}</p>;
-});
+export const Paragraph = JSX<ParagraphProps>(({ size, color, align, font, children }) => (
+  <p className={['font-sans', size, color, align, font].filter(Boolean).join(' ')}>{children}</p>
+));

package/mobile/src/ui-kit/Text/TextProps.ts

@@ -44,6 +44,7 @@ export type TextColor =
   | 'text-secondary-light'
   | 'text-error'
   | 'text-white'
+  | 'text-white/80'
   | 'text-green';
 
 /**

package/package.json

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