@redneckz/wildless-cms-uni-blocks 0.12.6 → 0.12.8

package/mobile/src/components/Header/Header.tsx

@@ -18,12 +18,7 @@ const BG_COLOR_TO_BLOCK_VERSION: Record<BgColorVersion, BlockVersion> = {
 };
 
 export const Header = JSX<HeaderMobileProps>(
-  ({
-    bgColor = 'bg-white',
-    version = BG_COLOR_TO_BLOCK_VERSION[bgColor],
-    mobileHeaderType = 'none',
-    ...rest
-  }) => {
+  ({ bgColor = 'bg-white', version = BG_COLOR_TO_BLOCK_VERSION[bgColor], ...rest }) => {
     const fallback: Fallback | undefined = rest.options?.page?.fallback;
     const { logo, internetBankUrl } = useSWRResource<SitemapData>(
       projectSettings.SITEMAP || 'sitemap',
@@ -38,7 +33,6 @@ export const Header = JSX<HeaderMobileProps>(
             logo={logo}
             internetBankUrl={internetBankUrl}
             version={version}
-            mobileHeaderType={mobileHeaderType}
             {...rest}
           />
         </div>

package/mobile/src/components/Header/HeaderContent.ts

@@ -25,24 +25,10 @@ export type Logo = ImageContent & {
   title?: string;
 };
 
-/**
- * @title Мобильный тип шапки
- * @enumNames ["Не выбрано", "Название", "Кнопка возврата"]
- */
-export type MobileHeaderType = 'none' | 'withTitle' | 'backwardButton';
-
-export interface MobileHeaderProps {
-  mobileHeaderType?: MobileHeaderType;
-  /** @title Название (мобильная версия) */
-  mobileTitle?: string;
-  /** @title Кнопка возврата (мобильная версия) */
-  mobileBackwardButtonTitle?: string;
-}
-
 /**
  * @title Шапка (для мобильных горизонтальная прокрутка shift+mouseScroll)
  */
-export interface HeaderContent extends MobileHeaderProps {
+export interface HeaderContent {
   /** @hidden */
   showSubMenu?: boolean;
   /** @hidden */

package/mobile/src/components/Header/HeaderTop.tsx

@@ -5,15 +5,15 @@ import { Logo } from '../../ui-kit/Logo/Logo';
 import { Button } from '../../ui-kit/Button/Button';
 import { style } from '../../utils/style';
 import type { BlockVersion } from '../../model/BlockVersion';
-import type { MobileHeaderProps, MobileHeaderType } from './HeaderContent';
 import { Img } from '../../ui-kit/Img/Img';
+import { useRouter } from '../../hooks/useRouter';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 
-export interface HeaderTopProps extends MobileHeaderProps {
+export interface HeaderTopProps {
   bgColor?: BgColorVersion;
   logo?: LogoType;
   internetBankUrl?: string;
   version?: BlockVersion;
-  mobileHeaderType?: MobileHeaderType;
 }
 
 const BUTTON_STYLE = {
@@ -21,51 +21,42 @@ const BUTTON_STYLE = {
   transparent: 'text-white hover:text-primary-hover',
 };
 
-export const HeaderTop = JSX<HeaderTopProps>(
-  ({
-    bgColor,
-    logo,
-    internetBankUrl,
-    version,
-    mobileHeaderType,
-    mobileTitle,
-    mobileBackwardButtonTitle,
-  }) => {
-    const isTypeNone = mobileHeaderType === 'none';
-    const isTypeWithTitle = mobileHeaderType === 'withTitle';
+export const HeaderTop = JSX<HeaderTopProps>(({ bgColor, logo, internetBankUrl, version }) => {
+  const router = useRouter();
+  const isRootLocation = router.pathname === '/';
+  const onClick = useCallback(() => {
+    router.back();
+  }, []);
 
-    return (
-      <div className="flex items-center justify-between w-full">
-        {isTypeNone || isTypeWithTitle ? (
-          <Logo bgColor={bgColor} logo={logo} showTitle={isTypeNone} />
-        ) : null}
-        {isTypeWithTitle ? mobileTitle : null}
-        {mobileHeaderType === 'backwardButton' ? (
-          <Button className="flex items-center text-l">
-            <Img
-              className="w-6 h-6"
-              image={{
-                icon: 'ChevronLeft',
-                iconVersion: 'black',
-              }}
-            />
-            {mobileBackwardButtonTitle}
-          </Button>
-        ) : null}
-        {internetBankUrl ? (
-          <Button
-            href={internetBankUrl}
-            ariaLabel="Войти"
-            target="_blank"
-            className={style(
-              'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
-              BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
-            )}
-          >
-            Войти
-          </Button>
-        ) : null}
-      </div>
-    );
-  },
-);
+  return (
+    <div className="flex items-center justify-between w-full">
+      {isRootLocation ? (
+        <Logo bgColor={bgColor} logo={logo} />
+      ) : (
+        <Button className="flex items-center text-l" ariaLabel="Вернуться назад" onClick={onClick}>
+          <Img
+            className="w-6 h-6"
+            image={{
+              icon: 'ChevronLeft',
+              iconVersion: 'black',
+            }}
+          />
+          Вернуться назад
+        </Button>
+      )}
+      {internetBankUrl ? (
+        <Button
+          href={internetBankUrl}
+          ariaLabel="Войти"
+          target="_blank"
+          className={style(
+            'p-3 my-1 text-s whitespace-nowrap text-primary-main hover:text-primary-hover',
+            BUTTON_STYLE[version === 'transparent' ? 'transparent' : 'default'],
+          )}
+        >
+          Войти
+        </Button>
+      ) : null}
+    </div>
+  );
+});

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

@@ -3,16 +3,6 @@
     "title": "Заголовок",
     "description": "Описание",
     "align": "center",
-    "bgColorHeadline": "transparent",
-    "headlineVersion": "M",
-    "image": {
-      "format": "webp",
-      "size": {
-        "width": 180,
-        "height": 180
-      },
-      "alt": "",
-      "title": ""
-    }
+    "headlineVersion": "M"
   }
 }

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

@@ -45,6 +45,7 @@ export const Headline = JSX<HeadlineProps>(
         {description ? (
           <Paragraph
             size={versionStyle.descriptionSize as TextSize}
+            font={versionStyle.descriptionWeight}
             align={align}
             {...descriptionStyle}
           >

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

@@ -1,14 +1,12 @@
 import type { HeadlineProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
 import type { HeadingTagType } from '../../ui-kit/Heading/HeadingProps';
-import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 
 /**
  * @title Заголовок
  */
 export type HeadlineContent = UniBlockContent &
-  HeadlineProps &
-  ImageContent & {
+  HeadlineProps & {
     /** @hidden */
     as?: HeadingTagType;
     /** @title Внутренний отступ блока */

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

@@ -1,43 +1,50 @@
 import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingCommonProps } from '../../ui-kit/Heading/HeadingProps';
-import type { TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
+import type { FontWeight, TextSize, TitleSize } from '../../ui-kit/Text/TextProps';
 
 export const headlineVersionStyles: Record<
   HeadlineVersion,
   {
     title: HeadingCommonProps;
     descriptionSize: TextSize | TitleSize;
+    descriptionWeight: FontWeight;
     descriptionStyle: string;
   }
 > = {
   XXL: {
     title: { headingType: 'h0', as: 'h1' },
     descriptionSize: 'text-h5',
+    descriptionWeight: 'font-normal',
     descriptionStyle: 'mt-m',
   },
   XL: {
     title: { headingType: 'h1', as: 'h1' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   L: {
     title: { headingType: 'h2', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-s',
   },
   M: {
     title: { headingType: 'h3', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-text',
   },
   S: {
     title: { headingType: 'h4', as: 'h2' },
-    descriptionSize: 'text-xl-light',
+    descriptionSize: 'text-xl',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
   XS: {
     title: { headingType: 'h5', as: 'h2' },
-    descriptionSize: 'text-l-light',
+    descriptionSize: 'text-l',
+    descriptionWeight: 'font-light',
     descriptionStyle: 'mt-xs',
   },
 };

package/mobile/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -74,7 +74,7 @@ function renderNavButton({ title, i, isActive, onClick }: NavButtonProps) {
       key={String(i)}
       onClick={onClick}
       aria-label={title}
-      className={`box-border px-4 py-3 text-m-light ${btnClassName}`}
+      className={`box-border px-4 py-3 text-m font-light ${btnClassName}`}
     >
       {title}
     </button>

package/mobile/src/components/InvestmentInfo/InvestmentInfo.tsx

@@ -45,7 +45,7 @@ export const InvestmentInfo = JSX<InvestmentInfoProps>((props) => {
 
   return (
     <BlockWrapper className={className} {...rest}>
-      <div className="container text-m-light">
+      <div className="container text-m font-light">
         {columns?.length ? (
           <div>
             <div className="flex items-end relative pl-9 pr-5 text-white">

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

@@ -0,0 +1,44 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { VNode } from '../../model/VNode';
+import { Text } from '../../ui-kit/Text/Text';
+import type { LinkDoc } from './LinkDocsContent';
+
+export interface LinkDocItemProps extends LinkDoc {
+  icon?: VNode;
+}
+
+export const LinkDocItem = JSX<LinkDocItemProps>(({ icon, text, fileSize, ...linkProps }) => (
+  <a
+    className="flex box-border gap-3 group/item h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+    role="link"
+    {...linkProps}
+  >
+    {icon}
+    {text ? (
+      <Text size="text-l" font="font-light">
+        {text}
+        <Text color="text-secondary-text">
+          {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+        </Text>
+      </Text>
+    ) : null}
+  </a>
+));
+
+const formatSuffix = (ext?: string, fileSize?: string) => {
+  const prefix = ext || fileSize ? ',' : '';
+  const extension = ext ? ` ${ext}` : '';
+  const size = fileSize ? ` (${fileSize})` : '';
+
+  return prefix + extension + size;
+};
+
+const getExtFromHref = (href: string) => {
+  if (!href) {
+    return '';
+  }
+
+  const index = href.lastIndexOf('.');
+
+  return index !== -1 ? href.substring(index + 1) : '';
+};

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

@@ -14,21 +14,25 @@
     },
     "documents": [
       {
+        "docType": "Link",
         "text": "Документ №1",
         "href": "/documents/document1.doc",
         "fileSize": "123КБ"
       },
       {
+        "docType": "Link",
         "text": "Документ №2",
         "href": "/documents/document2.rtf",
         "target": "_blank"
       },
       {
+        "docType": "Link",
         "text": "Документ №3",
         "href": "/abc3/map.jpeg",
         "fileSize": "2МБ"
       },
       {
+        "docType": "Link",
         "text": "Документ №4",
         "href": "/abc/map.rar"
       }

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

@@ -1,10 +1,20 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Router, useRouter } from '../../hooks/useRouter';
 import type { UniBlockProps } from '../../model/JSXBlock';
+import type { Picture } from '../../model/Picture';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Img } from '../../ui-kit/Img/Img';
+import { adjustHref } from '../../utils/adjustHref';
+import { style } from '../../utils/style';
 import { Headline } from '../Headline/Headline';
-import type { LinkDocsContent } from './LinkDocsContent';
-import { LinkDocsListItem } from './LinkDocsListItem';
+import { LinkDocItem } from './LinkDocItem';
+import type { DocBlockDef, LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
+import { linkIconStyle } from './linkIconStyle';
+
+const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
+  double: 'sm:flex-wrap sm:flex-row',
+  single: 'sm:flex-col',
+};
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -13,40 +23,59 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     title,
     description,
-    icon = { icon: 'DocDownloadIcon', iconVersion: 'black' },
+    align = 'text-center',
     documents,
-    align,
+    icon = { icon: 'DocIcon' },
+    columnsMode = 'double',
     ...rest
-  }) => (
-    <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
-      <Headline
-        isPadding={false}
-        title={title}
-        description={description}
-        align={align}
-        headlineVersion="M"
-      />
-      {documents?.length ? (
-        <div className="mt-5 flex flex-col gap-6" role="list">
-          {documents.map((doc, i) => (
-            <div key={String(i)} role="listitem">
-              <LinkDocsListItem
-                doc={doc}
-                icon={
-                  icon ? (
-                    <Img
-                      className="min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md"
-                      image={icon}
-                      width="24"
-                      height="24"
-                    />
-                  ) : null
-                }
-              />
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </BlockWrapper>
-  ),
+  }) => {
+    const router = useRouter();
+
+    return (
+      <BlockWrapper className={className} defaultPadding="p-default" {...rest}>
+        <Headline
+          className="!p-0"
+          title={title}
+          description={description}
+          align={align}
+          headlineVersion="M"
+          as="h2"
+        />
+        {documents?.length ? (
+          <div
+            className={style(
+              'mt-5 sm:mt-8 flex flex-col gap-6',
+              linkColumnsModeStyleMap[columnsMode],
+            )}
+            role="list"
+          >
+            {documents.map(renderLinkDocItem(router, columnsMode, icon))}
+          </div>
+        ) : null}
+      </BlockWrapper>
+    );
+  },
 );
+
+const renderLinkDocItem =
+  (router: Router, columnsMode: LinkColumnsMode, icon: Picture) =>
+  (docBlockDef: DocBlockDef, i: number) => {
+    const href =
+      docBlockDef?.docType === 'Attachment'
+        ? adjustHref(router)(docBlockDef?.attachment?.src)
+        : docBlockDef?.href;
+
+    return (
+      <div
+        key={String(i)}
+        className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+        role="listitem"
+      >
+        <LinkDocItem
+          {...docBlockDef}
+          href={href}
+          icon={icon ? <Img className={linkIconStyle} image={icon} width="24" height="24" /> : null}
+        />
+      </div>
+    );
+  };

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

@@ -2,7 +2,14 @@
   "content": {
     "documents": {
       "items": {
-        "ui:field": "document"
+        "docType": {
+          "ui:widget": "hidden"
+        },
+        "attachment": {
+          "src": {
+            "ui:widget": "FileWidget"
+          }
+        }
       }
     }
   }

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

@@ -1,6 +1,8 @@
+import { Attachment } from '../../model/Attachment';
+import { EmptyOption } from '../../model/EmptyOptionType';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { UniBlockContent } from '../../model/JSXBlock';
-import type { LinkProps } from '../../model/LinkProps';
+import type { LinkProps, Target } from '../../model/LinkProps';
 import type { IconProps } from '../../model/Picture';
 import type { TextAlign } from '../../ui-kit/Text/TextProps';
 
@@ -13,14 +15,40 @@ import type { TextAlign } from '../../ui-kit/Text/TextProps';
  */
 export type LinkColumnsMode = 'single' | 'double';
 
-/**
- * @title Элемент списка
- */
-export interface LinkDocsItem extends LinkProps {
+export interface LinkDoc extends LinkProps {
   /** @title размер файла */
   fileSize?: string;
 }
 
+export interface AttachmentDoc {
+  /** @title Текст */
+  text?: string;
+  /** @title */
+  attachment?: Attachment;
+  /** @title размер файла */
+  fileSize?: string;
+  /** @default "" */
+  target?: Target;
+}
+
+/**
+ * @title Ссылка на документ
+ * @default {"docType": "Link"}
+ */
+export type LinkDocDef = LinkDoc & {
+  docType: 'Link';
+};
+
+/**
+ * @title Файл
+ * @default {"docType": "Attachment"}
+ */
+export type AttachmentDocDef = AttachmentDoc & {
+  docType: 'Attachment';
+};
+
+export type DocBlockDef = EmptyOption | LinkDocDef | AttachmentDocDef;
+
 /**
  * @title Список документов
  */
@@ -28,7 +56,7 @@ export type LinkDocsContent = UniBlockContent &
   HeadlineCommonProps &
   IconProps & {
     /** @title Список */
-    documents?: LinkDocsItem[];
+    documents?: DocBlockDef[];
     columnsMode?: LinkColumnsMode;
     /** @title Выравнивание */
     align?: TextAlign;

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

@@ -4,20 +4,32 @@ export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
   description: 'Ответы на часто задаваемые вопросы',
   documents: [
-    { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
-    { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
-    { text: 'GlassIcon', href: '/abc3/map.jpeg' },
-    { text: 'no icon', href: '/abc4' },
-    { text: 'документ 5', href: '/abc5' },
-    { text: 'документ 6', href: '/abc6/abc.pdf' },
-    { text: 'Text text text', href: '/abc7/yolo.png' },
     {
+      docType: 'Attachment',
+      text: 'target self',
+      attachment: { src: '/abc1/cooldoc.doc' },
+      target: '_self',
+    },
+    { docType: 'Link', text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },
+    { docType: 'Link', text: 'GlassIcon', href: '/abc3/map.jpeg' },
+    { docType: 'Link', text: 'no icon', href: '/abc4' },
+    { docType: 'Link', text: 'документ 5', href: '/abc5' },
+    { docType: 'Link', text: 'документ 6', href: '/abc6/abc.pdf' },
+    { docType: 'Link', text: 'Text text text', href: '/abc7/yolo.png' },
+    {
+      docType: 'Link',
       text: 'Some more generic text to stretch item, and even more, more text, and more generic text, and even more, more text, and even more',
       href: '/abc8/archive.zip',
       fileSize: '2.3МБ',
     },
-    { text: 'И ещё немного текста', href: '/abc9/rarniw.rar', fileSize: '666МБ' },
     {
+      docType: 'Link',
+      text: 'И ещё немного текста',
+      href: '/abc9/rarniw.rar',
+      fileSize: '666МБ',
+    },
+    {
+      docType: 'Link',
       text: 'Форматируем, сортируем, смотрим как отображается...',
       href: '/abc10/',
       fileSize: '65ГБ',

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

@@ -0,0 +1 @@
+export const linkIconStyle = 'min-w-11 min-h-11 h-fit p-2.5 bg-main-divider rounded-md';

package/mobile/src/components/MobileAppTile/renderList.tsx

@@ -2,9 +2,9 @@ import { List } from '../../ui-kit/List/List';
 
 export const renderList = (items?: string[]) => {
   return items?.length ? (
-    <List items={items} className="text-l-light mb-2 last:mb-0" />
+    <List items={items} className="text-l font-light mb-2 last:mb-0" />
   ) : (
-    <span className="text-m-light text-secondary-text">
+    <span className="text-m font-light text-secondary-text">
       Наведите камеру телефона на QR-код и скачайте приложение
     </span>
   );

package/mobile/src/components/OfficeMap/OfficeMap.tsx

@@ -57,7 +57,7 @@ export const OfficeMap = JSX<UniBlockProps>(({ className = '' }) => {
           <div className="text-h2">{name}</div>
           {renderCurrentDaySchedule(currentWeekDay)}
         </div>
-        <div className="flex text-l-light pt-4">
+        <div className="flex text-l font-light pt-4">
           <Icon name="GeolocationIcon" width="24" height="24" className="pr-1" />
           {address}
         </div>