@redneckz/wildless-cms-uni-blocks 0.6.41 → 0.6.43

package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -0,0 +1,45 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkCommonProps } from '../../model/LinkProps';
+import type { Picture } from '../../model/Picture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ListContent } from '../../ui-kit/List/ListContent';
+
+/**
+ * @title Карточка рекомендаций
+ */
+export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
+  /**
+   * @title Соц сети
+   * @minItems 3
+   * @default [
+   * { "href": "https://t.me" },
+   * { "href": "https://vk.com" },
+   * { "href": "https://ok.ru" },
+   * ]
+   */
+  socialMedia?: LinkCommonProps[];
+  /**
+   * @default {
+   *   "format": "webp",
+   *   "size": {
+   *       "width": 290
+   *   },
+   *   "sources": [{
+   *       "media": 1279,
+   *       "width": 174,
+   *       "format": "webp",
+   *       "alignment": "southeast"
+   *   }]
+   * }
+   */
+  image?: Picture;
+  /**
+   * @default {
+   * "text": "",
+   * "version": "secondary"
+   * }
+   */
+  button?: ButtonProps;
+  version?: BlockVersion;
+}

package/src/components/Header/Header.tsx

@@ -25,10 +25,11 @@ export const Header = JSX<HeaderProps>(
   ({ bgColor = 'bg-white', className = '', showSubMenu = true, ...rest }) => {
     const router = useRouter();
 
-    const { topItems, logo, defaultLocation, officesLink } = useSWRResource<SitemapDataProps>(
-      projectSettings.SITEMAP || 'sitemap',
-      rest.options?.page?.fallback,
-    );
+    const { topItems, logo, defaultLocation, foreignOffices, officesLink } =
+      useSWRResource<SitemapDataProps>(
+        projectSettings.SITEMAP || 'sitemap',
+        rest.options?.page?.fallback,
+      );
 
     const activeTopItem = showSubMenu ? getActiveItem(topItems, router) : null;
 
@@ -56,6 +57,7 @@ export const Header = JSX<HeaderProps>(
             {topMenu}
             <HeaderSecondaryMenu
               className="ml-auto"
+              foreignOffices={foreignOffices}
               defaultLocation={defaultLocation}
               officesLink={officesLink}
               bgColor={bgColor}

package/src/components/Header/HeaderBurger.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useGeolocation } from '../../hooks/useGeolocation';
+import { useLocation } from '../../hooks/useLocation';
 import type { VNode } from '../../model/VNode';
 import { Img } from '../../ui-kit/Img/Img';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
+import { Text } from '../../ui-kit/Text/Text';
 import type { DispositionItem } from './HeaderContent';
 
 export interface HeaderBurgerProps {
@@ -14,7 +15,7 @@ export interface HeaderBurgerProps {
 
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ burgerSubMenu, onClick, defaultLocation = '', children }) => {
-    const [city, getCity] = useGeolocation(defaultLocation);
+    const [location] = useLocation(defaultLocation);
 
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
@@ -24,10 +25,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
         >
           <Img image="CloseIcon" width="24" height="24" asSVG />
         </button>
-        <button
-          onClick={getCity}
-          className="flex items-center text-s text-secondary-text p-0 mb-4 bg-transparent cursor-pointer"
-        >
+        <button className="flex items-center text-s p-0 mb-4 bg-transparent cursor-pointer">
           <Img
             image="GeolocationIcon"
             width="20"
@@ -35,7 +33,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
             className="text-primary-main box-border mr-2"
             asSVG
           />
-          {city}
+          <Text color="text-secondary-text">{location.name}</Text>
         </button>
         {children}
         <div className="mb-7">{burgerSubMenu?.map(renderBurgerSubMenuItem)}</div>

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -1,8 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useGeolocation } from '../../hooks/useGeolocation';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useLocation } from '../../hooks/useLocation';
 import type { BgColorVersion } from '../../model/BgColorVersion';
 import type { IconVersion } from '../../model/IconVersion';
+import type { ForeignOffice } from '../../services/sitemap/SitemapProps';
 import { Img } from '../../ui-kit/Img/Img';
+import { Location } from '../../ui-kit/Location/Location';
 import { TopItem } from '../../ui-kit/TopItem/TopItem';
 import { HeaderSecondaryMenuButton } from './HeaderSecondaryMenuButton';
 
@@ -10,6 +13,7 @@ interface HeaderSecondaryMenuContent {
   defaultLocation?: string;
   officesLink?: string;
   bgColor?: BgColorVersion;
+  foreignOffices?: ForeignOffice[];
 }
 
 export interface HeaderSecondaryMenuProps extends HeaderSecondaryMenuContent {
@@ -30,8 +34,23 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 };
 
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
-  ({ className, officesLink, defaultLocation = 'Москва', bgColor = 'bg-white' }) => {
-    const [city, getCity] = useGeolocation(defaultLocation);
+  ({
+    className,
+    officesLink,
+    defaultLocation = 'Москва',
+    foreignOffices,
+    bgColor = 'bg-white',
+  }) => {
+    const [isShowLocationModal, setShowLocationModal] = useState<boolean>(false);
+
+    const [location, onChangeLocation] = useLocation(defaultLocation);
+
+    const showLocationModal = () => {
+      setShowLocationModal(true);
+    };
+    const hideLocationModal = () => {
+      setShowLocationModal(false);
+    };
 
     return (
       <div className={`flex items-center ${className || ''}`}>
@@ -39,9 +58,9 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
           className="mr-5"
           flat={true}
           href="#"
-          text={city}
+          text={location.name}
           ariaLabel="Местоположение"
-          onClick={getCity}
+          onClick={showLocationModal}
           bgColor={bgColor}
         />
         {officesLink ? (
@@ -76,6 +95,14 @@ export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
             asSVG
           />
         </HeaderSecondaryMenuButton>
+        {isShowLocationModal ? (
+          <Location
+            currentLocation={location}
+            foreignOffices={foreignOffices}
+            onChangeLocation={onChangeLocation}
+            close={hideLocationModal}
+          />
+        ) : null}
       </div>
     );
   },

package/src/components/MiniGallery/MiniGallery.ui.json

@@ -8,7 +8,7 @@
         "button": {
           "icon": {
             "ui:field": "icon"
-          },
+          }, 
           "iconRight": {
             "ui:field": "icon"
           }

package/src/components/ProductTile/ProductTile.example.json

@@ -12,14 +12,17 @@
     "version": "primary",
     "benefits": [
       {
+        "type": "default",
         "label": "Преимущество 1",
         "description": "Описание"
       },
       {
+        "type": "default",
         "label": "Преимущество 2",
         "description": "Описание"
       },
       {
+        "type": "default",
         "label": "Преимущество 3",
         "description": "Описание"
       }

package/src/components/ProductTile/ProductTile.fixture.tsx

@@ -2,7 +2,7 @@ import type { Picture } from '../../model/Picture';
 import '../../setup-fixture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 import { ProductTile } from './ProductTile';
-import type { ProductTileContent } from './ProductTileContent';
+import type { Benefit, ProductTileContent } from './ProductTileContent';
 
 const imageSize = {
   height: 242,
@@ -37,38 +37,45 @@ const building: Picture = {
   size: imageSize,
 };
 
-const benefits = [
+const benefits: Benefit[] = [
   {
+    type: 'default',
     label: 'до 5 млн Р',
     description: 'Кредитный лимит',
   },
   {
+    type: 'default',
     label: 'от 12,5%',
     description: 'Процентная ставка',
   },
   {
+    type: 'default',
     label: 'до 5 лет',
     description: 'Срок кредитования',
   },
 ];
 
-const benefits2 = [
+const benefits2: Benefit[] = [
   {
+    type: 'default',
     label: '1 год',
     description: 'срок программы',
   },
 ];
 
-const multilineBenefits = [
+const multilineBenefits: Benefit[] = [
   {
+    type: 'default',
     label: 'Широкий',
     description: 'выбор платёжных систем',
   },
   {
+    type: 'default',
     label: 'Специальные',
     description: 'условия по снятию наличных условия по снятию наличных',
   },
   {
+    type: 'default',
     label: '0,5 балла',
     description: '«Урожай» за 100 рублей «Урожай» за 100 рублей',
   },

package/src/components/ProductTile/ProductTile.tsx

@@ -1,14 +1,16 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
-import { VersionAdditionalStyleMap, VersionStyleMap } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Img } from '../../ui-kit/Img/Img';
 import { getTileRightPadding } from '../BaseTile/getTileRightPadding';
 import { Headline } from '../Headline/Headline';
-import type { ProductTileContent, TextBenefit } from './ProductTileContent';
+import type { Benefit, ProductTileContent } from './ProductTileContent';
+import { renderAdditionalDescription } from './renderAdditionalDescription';
+import { renderBenefit } from './renderBenefit';
+import { renderImage } from './renderImage';
 
 export interface ProductTileProps extends ProductTileContent, UniBlockProps {}
 
@@ -43,7 +45,7 @@ export const ProductTile = JSX<ProductTileProps>(
           {...rest}
         />
         {renderBenefits(benefits, version, image)}
-        {additionalDescription ? renderAdditionalDescription(additionalDescription, image) : null}
+        {renderAdditionalDescription(additionalDescription, image)}
         {buttons?.length ? (
           <ButtonSection buttons={buttons} className="mt-5 gap-4 z-10 text-l" />
         ) : null}
@@ -53,53 +55,20 @@ export const ProductTile = JSX<ProductTileProps>(
   ),
 );
 
-function renderBenefits(benefits: TextBenefit[], version: BlockVersion, image?: Picture) {
+function renderBenefits(benefits: Benefit[], version: BlockVersion, image?: Picture) {
+  if (!benefits.length) {
+    return null;
+  }
+
   // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const BENEFITS_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+  const benefitsWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
 
   return (
     <div
       className={`z-10 grid grid-cols-[max-content_1fr] auto-rows-auto gap-x-6 gap-y-2.5 items-baseline
-        ${BENEFITS_WIDTH}`}
+        ${benefitsWidth}`}
     >
       {benefits.length ? benefits.map(renderBenefit(version)) : null}
     </div>
   );
 }
-
-const renderBenefit =
-  (version: BlockVersion = 'primary') =>
-  (benefit: TextBenefit, i: number) => {
-    const { label = '', description = '' } = benefit;
-
-    return [
-      <div key={`label-${i}`} className="text-h6">
-        {label}
-      </div>,
-      <div key={`desc-${i}`} className={`text-m-light ${VersionAdditionalStyleMap[version]}`}>
-        {description}
-      </div>,
-    ];
-  };
-
-function renderAdditionalDescription(additionalDescription: string, image?: Picture) {
-  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
-  const DESCRIPTION_WIDTH = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
-
-  return (
-    <div className={`text-m-light mt-2.5 z-10 ${DESCRIPTION_WIDTH}`}>{additionalDescription}</div>
-  );
-}
-
-function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
-  if (!image?.src) {
-    return null;
-  }
-
-  return (
-    <Img
-      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
-      image={image}
-    />
-  );
-}

package/src/components/ProductTile/ProductTile.ui.json

@@ -1 +1,14 @@
-{}
+{
+  "content": {
+    "benefits": {
+      "items": {
+        "md": {
+          "ui:widget": "html"
+        },
+        "type": {
+          "ui:widget": "hidden"
+        }
+      }
+    }
+  }
+}

package/src/components/ProductTile/ProductTileContent.ts

@@ -2,8 +2,32 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { DescriptionProps, HeadlineProps, LabelProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
 import type { ButtonContent } from '../../ui-kit/Button/ButtonProps';
+import type { MarkdownTextProps } from '../../ui-kit/MarkdownText/MarkdownTextProps';
 
-export type TextBenefit = DescriptionProps & LabelProps;
+/**
+ * @title Стандартный
+ */
+type TextBenefit = DescriptionProps &
+  LabelProps & {
+    /** @default default */
+    type: 'default';
+  };
+
+/**
+ * @title Форматированный текст
+ */
+type MarkdownTextContent = MarkdownTextProps & {
+  /** @default md */
+  type: 'md';
+};
+
+/**
+ * @title Преимущество
+ * @default{
+ *  "type": "default"
+ * }
+ */
+export type Benefit = TextBenefit | MarkdownTextContent;
 
 /**
  * @title Продуктовая плитка
@@ -30,7 +54,7 @@ export type ProductTileContent = HeadlineProps &
      * @title Преимущества
      * @maxItems 7
      */
-    benefits?: TextBenefit[];
+    benefits?: Benefit[];
     /** @title Дополнительное описание */
     additionalDescription?: string;
     /** @title Картинка справа/текст слева */

package/src/components/ProductTile/renderAdditionalDescription.tsx

@@ -0,0 +1,30 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { Picture } from '../../model/Picture';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+
+const DESCRIPTION_STYLE_MAP: Record<BlockVersion, TextColor> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export function renderAdditionalDescription(
+  additionalDescription?: string,
+  image?: Picture,
+  version: BlockVersion = 'primary',
+) {
+  if (!additionalDescription) {
+    return null;
+  }
+
+  // picture width = 242px. Text can overlay picture 20px deep. Outer paddings_x = 36px. 242-36-20 = 186px
+  const descriptionWidth = image?.src ? 'max-w-[calc(100%-186px)]' : '100%';
+
+  return (
+    <div className={`mt-2.5 z-10 ${descriptionWidth}`}>
+      <Paragraph size="text-m" font="font-light" color={DESCRIPTION_STYLE_MAP[version]}>
+        {additionalDescription}
+      </Paragraph>
+    </div>
+  );
+}

package/src/components/ProductTile/renderBenefit.tsx

@@ -0,0 +1,39 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+import { MarkdownText } from '../../ui-kit/MarkdownText/MarkdownText';
+import { Text } from '../../ui-kit/Text/Text';
+import type { TextColor } from '../../ui-kit/Text/TextProps';
+import { assertUnreachable } from '../../utils/assertUnreachable';
+import type { Benefit } from './ProductTileContent';
+
+const LABEL_STYLE_MAP: Record<BlockVersion, TextColor> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export const renderBenefit =
+  (version: BlockVersion = 'primary') =>
+  // Linter doesn't understand that switch processes all cases
+  // eslint-disable-next-line consistent-return
+  (benefit: Benefit, i: number) => {
+    const { type } = benefit;
+
+    if (!(type === 'default' || type === 'md')) {
+      return null;
+    }
+
+    switch (type) {
+      case 'default':
+        return [
+          <Text key={`label-${i}`} size="text-h6">
+            {benefit.label}
+          </Text>,
+          <Text key={`desc-${i}`} size="text-m-light" color={LABEL_STYLE_MAP[version]}>
+            {benefit.description}
+          </Text>,
+        ];
+      case 'md':
+        return <MarkdownText md={benefit.md} />;
+      default:
+        assertUnreachable(benefit);
+    }
+  };

package/src/components/ProductTile/renderImage.tsx

@@ -0,0 +1,15 @@
+import type { Picture } from '../../model/Picture';
+import { Img } from '../../ui-kit/Img/Img';
+
+export function renderImage(image?: Picture, isImageOnRightSide?: boolean) {
+  if (!image?.src) {
+    return null;
+  }
+
+  return (
+    <Img
+      className={`absolute ${isImageOnRightSide ? 'right-0' : 'left-0'} bottom-0`}
+      image={image}
+    />
+  );
+}

package/src/components/Recommendation/Recommendation.example.json

@@ -28,11 +28,12 @@
         },
         "title": "Заголовок 2",
         "description": "Описание 2",
-        "socialMedia": [
-          { "href": "https://t.me" },
-          { "href": "https://vk.com" },
-          { "href": "https://ok.ru" }
-        ]
+        "button": {
+          "href": "",
+          "text": "Подробнее",
+          "target": "_self",
+          "version": "primary"
+        }
       },
       {
         "image": {

package/src/components/Recommendation/Recommendation.fixture.tsx

@@ -1,9 +1,8 @@
+import '../../setup-fixture';
+import { Recommendation, RecommendationProps } from './Recommendation';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import type { LinkProps } from '../../model/LinkProps';
 import type { Picture } from '../../model/Picture';
-import '../../setup-fixture';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { RecommendationProps } from './Recommendation';
-import { Recommendation } from './Recommendation';
 
 const cowCard: Picture = {
   src: 'cow-card.png',
@@ -51,6 +50,13 @@ const socialMedia: LinkProps[] = [
   { href: 'https://ok.ru' },
 ];
 
+const button: ButtonWithIconProps = {
+  href: 'https://rshb.ru',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'secondary',
+};
+
 export const defaultProps: RecommendationProps = {
   title: 'Мы в социальных сетях',
   recommendations: [
@@ -76,6 +82,7 @@ export const defaultProps: RecommendationProps = {
       title: 'Кредитные карты',
       description: 'Льготный период 120 дней',
       image: productBasket,
+      button,
     },
     {
       title: 'Кредитные карты',
@@ -111,12 +118,6 @@ export const shortProps: RecommendationProps = {
   ],
 };
 
-const button: ButtonProps = {
-  text: 'Подробнее',
-  href: '/credit-cards',
-  version: 'secondary',
-};
-
 export const buttonProps: RecommendationProps = {
   title: 'Также интересуются',
   recommendations: [

package/src/components/Recommendation/Recommendation.ui.json

@@ -4,6 +4,14 @@
       "items": {
         "image": {
           "ui:field": "picture"
+        },
+        "button": {
+          "icon": {
+            "ui:field": "icon"
+          }, 
+          "iconRight": {
+            "ui:field": "icon"
+          }
         }
       }
     }

package/src/components/Recommendation/RecommendationCard.tsx

@@ -41,7 +41,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
               <SocialMedia className="pt-10 pb-0" media={socialMedia} version={version} />
             ) : null}
             {button?.text ? (
-              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16' })}</div>
+              <div className="pt-2">{renderButton({ button, buttonClassName: 'mt-16 px-5' })}</div>
             ) : null}
           </div>
         </BaseTile>