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

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

@@ -34,7 +34,7 @@ export const Header = JSX<HeaderProps>(
       <header className={`${bgColor} ${className}`}>
         <div className="container px-4 py-0">
           <HeaderTop onClick={toggleBurgerMenu} bgColor={bgColor} />
-          <nav className="flex items-center m-0 p-0 overflow-x-scroll overflow-y-hidden w-full h-[50px]">
+          <nav className="flex items-center m-0 p-0 overflow-y-hidden w-full h-[50px]">
             <div className="flex">
               {subItems?.map((_, i) =>
                 renderSubItem(

package/src/components/Header/HeaderTop.tsx

@@ -11,7 +11,7 @@ export interface HeaderTopProps {
 export const HeaderTop = JSX<HeaderTopProps>(({ onClick, bgColor }) => (
   <div className="flex items-center justify-between border-0 border-b border-main-divider h-[50px]">
     <div className="flex items-center">
-      <button className="pr-4" onClick={onClick}>
+      <button className="pr-4" onClick={onClick} aria-label="Открыть меню">
         <Icon
           name={bgColor === 'bg-white' ? 'BurgerIcon' : 'BurgerIconWhite'}
           width="24"

package/src/components/Headline/Headline.fixture.tsx

@@ -1,9 +1,7 @@
 import { context } from '../../setup-fixture';
 
 import { Headline } from './Headline';
-import { Headline as MobileHeadline } from './Headline';
 import { HeadlineContent } from './HeadlineContent';
-import { Picture } from '../../model/Picture';
 
 export const HEADLINE: HeadlineContent = {
   title: 'Своя кредитная карта',
@@ -12,15 +10,6 @@ export const HEADLINE: HeadlineContent = {
   bgColor: 'transparent',
 };
 
-const image: Picture = {
-  src: 'globe-1.png',
-  format: 'webp',
-  size: {
-    width: 180,
-    height: 180,
-  },
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -49,47 +38,4 @@ export default {
       />
     </div>
   ),
-  mobile: (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        image={image}
-      />
-    </div>
-  ),
-  'mobile title-img': (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        image={image}
-      />
-    </div>
-  ),
-  'mobile desc-img': (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        image={image}
-      />
-    </div>
-  ),
-  'mobile white': (
-    <div className="container grid grid-cols-12">
-      <MobileHeadline
-        className="col-span-12"
-        context={context}
-        title="Копите в нескольких валютах"
-        description="Откройте мультивалютный вклад, чтобы распределить свои вложения. Это до 4 счетов в разных валютах внутри одного вклада"
-        bgColor="bg-white"
-        image={image}
-      />
-    </div>
-  ),
 };

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

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img';
-import { Title } from '../../ui-kit/Title/Title';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -11,11 +11,7 @@ export const Headline = JSX<HeadlineProps>(
   ({ bgColor = 'transparent', className = '', title, description, image }) => {
     return (
       <section className={`px-4 py-6 ${bgColor} ${className}`}>
-        {title && (
-          <Title size="L" className="text-primary-text mt-0 font-medium">
-            {title}
-          </Title>
-        )}
+        {title && <Heading type="h2" className="text-primary-text" text={title} />}
         {description && (
           <p className={`font-normal text-m-md ${title ? 'mt-2.5' : ''}`}>{description}</p>
         )}

package/src/components/Headline/Headline.tsx

@@ -1,7 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
 
 import type { UniBlockProps } from '../../types';
-import { Title } from '../../ui-kit/Title/Title';
+import { Heading } from '../../ui-kit/Heading/Heading';
 import { AlignType } from '../BaseTile/BaseTileProps';
 import type { HeadlineContent } from './HeadlineContent';
 
@@ -18,11 +18,7 @@ export const Headline = JSX<HeadlineProps>(
     const textClasses = alignText[align];
     return (
       <section className={`p-[50px] ${bgColor} ${className}`}>
-        {title && (
-          <Title size="L" className={`text-primary-text mt-0 font-medium ${textClasses}`}>
-            {title}
-          </Title>
-        )}
+        {title && <Heading type="h2" className={`text-primary-text ${textClasses}`} text={title} />}
         {description && (
           <p className={`font-normal text-base mt-4 ${textClasses}`}>{description}</p>
         )}

package/src/components/Headline/HeadlineContent.ts

@@ -1,11 +1,14 @@
 import type { BgColorVersion } from '../../model/BgColorVersion';
-import type { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { Picture } from '../../model/Picture';
+import type { AlignType, BaseTileTitleProps } from '../BaseTile/BaseTileProps';
 
 /**
  * @title Заголовок
  */
-export interface HeadlineContent
-  extends Pick<BaseTileCommonProps, 'title' | 'titleSize' | 'description' | 'align' | 'image'> {
-  //TODO: image for mobile
+export interface HeadlineContent extends BaseTileTitleProps {
+  description?: string;
+  image?: Picture;
+  align?: AlignType;
+  // TODO: image for mobile
   bgColor?: BgColorVersion;
 }

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

@@ -1,5 +1,6 @@
 {
   "title": "Дополнительные документы",
+  "subtitle": "Ответы на часто задаваемые вопросы",
   "icon": "DocIcon",
   "documents": [
     {
@@ -22,5 +23,7 @@
       "href": "/abc/map.rar"
     }
   ],
-  "columnsMode": "double"
+  "columnsMode": "double",
+  "listMode": "vertical",
+  "hasBorder": true
 }

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

@@ -0,0 +1,36 @@
+import { mobileContext } from '../../setup-fixture';
+import { linkDocsContentExample } from './linkDocsContentExample';
+import { LinkDocs } from './LinkDocs';
+
+export default {
+  'vertical (default)': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs
+        className="col-span-12"
+        context={mobileContext}
+        subtitle="Откройте мультивалютный вклад, чтобы распределить свои вложения"
+        {...linkDocsContentExample}
+      />
+    </div>
+  ),
+  'vertical, no border': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs
+        className="col-span-12"
+        context={mobileContext}
+        hasBorder={false}
+        {...linkDocsContentExample}
+      />
+    </div>
+  ),
+  'horizontal, swipe list': (
+    <div className="container grid grid-cols-12">
+      <LinkDocs
+        className="col-span-12"
+        context={mobileContext}
+        {...linkDocsContentExample}
+        listMode={'horizontal'}
+      />
+    </div>
+  ),
+};

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,67 +1,36 @@
 import { context } from '../../setup-fixture';
+import { linkDocsContentExample } from './linkDocsContentExample';
 import { LinkDocs } from './LinkDocs';
-import type { LinkDocsContent } from './LinkDocsContent';
-
-export const LINK_DOCS: LinkDocsContent = {
-  title: 'Дополнительные документы',
-  icon: 'DocIcon',
-  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' },
-    {
-      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МБ' },
-    {
-      text: 'Форматируем, сортируем, смотрим как отображается...',
-      href: '/abc10/',
-      fileSize: '65ГБ',
-    },
-  ],
-};
-
-export const LINK_DOCS_ONE_COLUMN: LinkDocsContent = {
-  ...LINK_DOCS,
-  columnsMode: 'single',
-};
-
-export const LINK_DOCS_ANOTHER_ICON: LinkDocsContent = {
-  ...LINK_DOCS,
-  icon: 'GlassIcon',
-  title: '',
-};
-
-export const LINK_DOCS_NO_ICON: LinkDocsContent = {
-  ...LINK_DOCS,
-  icon: undefined,
-};
 
 export default {
   'two columns (default)': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS} />
+      <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} />
     </div>
   ),
   'one column': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ONE_COLUMN} />
+      <LinkDocs
+        className="col-span-12"
+        context={context}
+        {...linkDocsContentExample}
+        columnsMode="single"
+      />
     </div>
   ),
-  'another icon': (
+  'custom icon': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_ANOTHER_ICON} />
+      <LinkDocs
+        className="col-span-12"
+        context={context}
+        {...linkDocsContentExample}
+        icon="GlassIcon"
+      />
     </div>
   ),
-  'no icon and title': (
+  'no icon': (
     <div className="container grid grid-cols-12">
-      <LinkDocs className="col-span-12" context={context} {...LINK_DOCS_NO_ICON} />
+      <LinkDocs className="col-span-12" context={context} {...linkDocsContentExample} icon="" />
     </div>
   ),
 };

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

@@ -0,0 +1,40 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { LinkDocsContent } from './LinkDocsContent';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
+
+export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
+
+export const LinkDocs = JSX<LinkDocsProps>(
+  ({
+    className = '',
+    context,
+    title,
+    subtitle,
+    icon = 'DocIcon',
+    documents,
+    listMode = 'vertical',
+    hasBorder = true,
+  }) => {
+    return (
+      <section className={`py-6 px-4 bg-white ${className}`}>
+        {title ? (
+          <Heading type="h2" className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`} text={title} />
+        ) : null}
+        {subtitle ? <h3 className="mb-5 text-center text-m-base">{subtitle}</h3> : null}
+        {listMode === 'vertical' ? (
+          <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
+        ) : (
+          <LinkDocsHorizontalList
+            context={context}
+            hasBorder={hasBorder}
+            documents={documents}
+            icon={icon}
+          />
+        )}
+      </section>
+    );
+  },
+);

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,8 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkDocsList } from './LinkDocsList';
 import type { UniBlockProps } from '../../types';
-import { Icon } from '../../ui-kit/Icon/Icon';
-import { Title } from '../../ui-kit/Title/Title';
-import { AlignType } from '../BaseTile/BaseTileProps';
+import type { AlignType } from '../BaseTile/BaseTileProps';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 
 const titleAlignStyleMap: Record<AlignType, string> = {
@@ -17,66 +17,49 @@ const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
 };
 
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'gap-x-5 gap-y-[26px] flex-wrap',
-  single: 'gap-3.5 flex-col',
+  double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
+  single: 'flex gap-3.5 flex-col',
 };
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
-  ({ className = '', title, align, documents, icon, columnsMode = 'single' }) => {
-    const containerClasses = linkColumnsModeStyleMap[columnsMode];
-
+  ({
+    className = '',
+    title,
+    subtitle,
+    align,
+    documents,
+    icon = 'DocIcon',
+    columnsMode = 'double',
+  }) => {
     return (
       <section className={`font-sans p-[50px] bg-white ${className}`}>
-        {title && (
-          <Title
-            className={`font-medium mt-0 ${titleMarginsStyleMap[columnsMode]} ${
+        {title ? (
+          <Heading
+            type="h2"
+            className={`${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${
+              titleAlignStyleMap[align ?? 'center']
+            }`}
+            text={title}
+          />
+        ) : null}
+        {subtitle ? (
+          <h3
+            className={`text-base ${titleMarginsStyleMap[columnsMode]} ${
               titleAlignStyleMap[align ?? 'center']
             }`}
           >
-            {title}
-          </Title>
-        )}
-        <div className={`flex ${containerClasses}`} role="list">
-          {documents?.length
-            ? documents.map(({ text, fileSize, ...linkProps }, i) => (
-                <a
-                  key={String(i)}
-                  className={`group flex text-sm align-middle h-fit
-                   text-primary-text no-underline hover:text-primary-main
-                   ${columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}`}
-                  role="listitem"
-                  {...linkProps}
-                >
-                  {icon && <Icon className="mr-2.5 h-fit" name={icon} width="24px" height="24px" />}
-                  <span className="self-center">
-                    {text}
-                    <span className="text-secondary-text group-hover:text-primary-main">
-                      {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
-                    </span>
-                  </span>
-                </a>
-              ))
-            : null}
-        </div>
+            {subtitle}
+          </h3>
+        ) : null}
+        <LinkDocsList
+          className={linkColumnsModeStyleMap[columnsMode]}
+          columnsMode={columnsMode}
+          documents={documents}
+          icon={icon}
+        />
       </section>
     );
   },
 );
-
-const getExtFromHref = (href: string) => {
-  if (!href) return '';
-
-  const lastChunk = href.split('.').pop();
-  if (!lastChunk || lastChunk.includes('/')) return '';
-
-  return lastChunk;
-};
-
-const formatSuffix = (ext?: string, fileSize?: string) => {
-  const prefix = ext || fileSize ? ',' : '';
-  const extension = ext ? ` ${ext}` : '';
-  const size = fileSize ? ` (${fileSize})` : '';
-  return prefix + extension + size;
-};

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -1,10 +1,25 @@
-import { LinkProps } from '../../model/LinkProps';
-import type { IconName } from '../../ui-kit/Icon/IconProps';
-import { BaseTileCommonProps } from '../BaseTile/BaseTileProps';
+import type { LinkProps } from '../../model/LinkProps';
+import type { IconName } from '../../icons/IconName';
+import type { AlignType } from '../BaseTile/BaseTileProps';
 
-/** @title Режим отображения списка */
+/**
+ * @title Отображение списка
+ * @enumNames [
+ *    "Одна колонка",
+ *    "Две колонки",
+ *    ]
+ */
 export type LinkColumnsMode = 'single' | 'double';
 
+/**
+ * @title Отображение списка (моб.)
+ * @enumNames [
+ *    "Вертикально",
+ *    "Горизонтально",
+ *    ]
+ */
+export type LinkListMode = 'vertical' | 'horizontal';
+
 /**
  * @title Элемент списка
  */
@@ -16,11 +31,18 @@ export interface LinkDocsItem extends LinkProps {
 /**
  * @title Список документов
  */
-export interface LinkDocsContent extends Pick<BaseTileCommonProps, 'title' | 'align'> {
-  /** @title Отображение списка */
-  columnsMode?: LinkColumnsMode;
+export interface LinkDocsContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Подзаголовок */
+  subtitle?: string;
   /** @title Название иконки */
   icon?: IconName;
   /** @title Список */
   documents?: LinkDocsItem[];
+  columnsMode?: LinkColumnsMode;
+  listMode?: LinkListMode; // TODO: мобильный проп
+  /** @title Рамка элементов (моб.) */ // TODO: мобильный проп
+  hasBorder?: boolean;
+  align?: AlignType;
 }

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -0,0 +1,28 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { SwipeListControl } from '../../ui-kit/SwipeListControl/SwipeListControl';
+import { LinkDocsListItem } from './LinkDocsListItem';
+import type { LinkDocsVerticalListProps } from './LinkDocsVerticalList';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+
+export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
+  context: ContentPageContext;
+}
+
+export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
+  ({ context, hasBorder = true, documents, icon }) => {
+    return (
+      <SwipeListControl context={context} className="text-m-sm text-primary-main">
+        {documents?.length
+          ? documents.map((doc, i) => (
+              <LinkDocsListItem
+                key={String(i)}
+                className={hasBorder ? 'rounded-md border-main-stroke border p-4' : ''}
+                doc={doc}
+                icon={icon}
+              />
+            ))
+          : null}
+      </SwipeListControl>
+    );
+  },
+);

package/src/components/LinkDocs/LinkDocsList.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItem } from './LinkDocsListItem';
+import type { IconName } from '../../icons/IconName';
+import type { LinkColumnsMode, LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListProps {
+  className?: string;
+  documents?: LinkDocsItem[];
+  columnsMode?: LinkColumnsMode;
+  icon?: IconName;
+}
+
+export const LinkDocsList = JSX<LinkDocsListProps>(
+  ({ className, documents, columnsMode = 'double', icon }) => {
+    return documents?.length ? (
+      <div className={className} role="list">
+        {documents.map((doc, i) => (
+          <div
+            key={String(i)}
+            className={columnsMode === 'double' ? 'basis-[calc(50%-20px)]' : ''}
+            role="listitem"
+          >
+            <LinkDocsListItem
+              className="group flex text-sm align-middle h-fit w-fit text-primary-text no-underline hover:text-primary-main"
+              doc={doc}
+              icon={icon}
+            />
+          </div>
+        ))}
+      </div>
+    ) : null;
+  },
+);

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

@@ -0,0 +1,12 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItemBase } from './LinkDocsListItemBase';
+import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
+  <LinkDocsListItemBase
+    className={`flex h-full ${className}`}
+    iconClassName="mr-2.5 min-w-6 min-h-6"
+    doc={doc}
+    icon={icon}
+  />
+));

package/src/components/LinkDocs/LinkDocsListItem.tsx

@@ -0,0 +1,14 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LinkDocsListItemBase } from './LinkDocsListItemBase';
+import type { LinkDocsListItemProps } from './LinkDocsListItemBase';
+
+export const LinkDocsListItem = JSX<LinkDocsListItemProps>(({ className = '', doc, icon }) => (
+  <LinkDocsListItemBase
+    className={className}
+    iconClassName="mr-4 min-w-6 min-h-6 text-primary-text"
+    textClassName="self-center"
+    suffixClassName="text-secondary-text group-hover:text-primary-main"
+    doc={doc}
+    icon={icon}
+  />
+));

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -0,0 +1,51 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Icon } from '../../ui-kit/Icon/Icon';
+import type { IconName } from '../../icons/IconName';
+import type { LinkDocsItem } from './LinkDocsContent';
+
+export interface LinkDocsListItemProps {
+  className?: string;
+  doc: LinkDocsItem;
+  icon?: IconName;
+}
+
+export interface LinkDocsListItemBaseProps extends LinkDocsListItemProps {
+  iconClassName?: string;
+  textClassName?: string;
+  suffixClassName?: string;
+}
+
+export const LinkDocsListItemBase = JSX<LinkDocsListItemBaseProps>(
+  ({ className, iconClassName, textClassName, suffixClassName, doc, icon }) => {
+    const { text, fileSize, ...linkProps } = doc;
+    return (
+      <a className={className} role="link" {...linkProps}>
+        {icon ? (
+          <Icon className={iconClassName} name={icon} width="24px" height="24px" asSVG />
+        ) : null}
+        {text ? (
+          <span className={textClassName}>
+            {text}
+            <span className={suffixClassName}>
+              {linkProps?.href && formatSuffix(getExtFromHref(linkProps.href), fileSize)}
+            </span>
+          </span>
+        ) : 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) : '';
+};