@redneckz/wildless-cms-uni-blocks 0.5.15 → 0.6.16

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

@@ -7,13 +7,14 @@ import { renderArrows } from '../../ui-kit/Button/renderArrows';
 import { galleryLengthForScrollMap } from './constants';
 import { GalleryContainer } from './GalleryContainer';
 import type { GalleryContent } from './GalleryContent';
+import { Button } from '../../ui-kit/Button/Button';
 
 export interface GalleryInnerProps extends GalleryContent, UniBlockProps {
   version?: GalleryVersion;
 }
 
 export const GalleryInner = JSX<GalleryInnerProps>(
-  ({ context, cards = [], className = '', version = 'normal', ...rest }) => {
+  ({ context, cards = [], className = '', version = 'normal', button, ...rest }) => {
     const [activeCardIndex, setActiveCardIndex] = useState(0);
 
     const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
@@ -30,7 +31,7 @@ export const GalleryInner = JSX<GalleryInnerProps>(
     return (
       <BlockWrapper
         context={context}
-        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden ${className}`}
+        className={`relative font-sans text-primary-text bg-white p-[42px] overflow-hidden flex flex-col ${className}`}
         {...rest}
       >
         <GalleryContainer
@@ -46,8 +47,14 @@ export const GalleryInner = JSX<GalleryInnerProps>(
           btnClass: ['left-8', 'right-8'],
           className: 'top-1/2',
         })}
-        <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
-        <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
+        {isGalleryScrollAvailable ? (
+          <div>
+            <div className="absolute top-0 left-0 bottom-0 w-[82px] bg-opacity-from-white" />
+            <div className="absolute top-0 right-0 bottom-0 w-[82px] bg-opacity-to-white" />
+          </div>
+        ) : null}
+
+        {button ? <Button className="mt-8 mx-auto" {...button} /> : null}
       </BlockWrapper>
     );
   },

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

@@ -1,9 +1,10 @@
 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 { ALIGN_TEXT, HEADLINE_BLOCK_STYLE_MAPS } from './constants';
+import { HEADLINE_BLOCK_STYLE_MAPS } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
 
 export interface HeadlineProps extends UniBlockProps, HeadlineContent {}
@@ -24,12 +25,12 @@ export const Headline = JSX<HeadlineProps>(
         {title ? (
           <Heading
             headingType="h2"
-            className={`${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
+            className={`${STYLE_MAPS.text} ${AlignText[align]}`}
             title={title}
           />
         ) : null}
         {description ? (
-          <p className={`text-m ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}`}>{description}</p>
+          <p className={`text-m ${STYLE_MAPS.description} ${AlignText[align]}`}>{description}</p>
         ) : null}
         {image?.src && (
           <div className="mt-2.5 mx-auto flex justify-center">

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

@@ -1,14 +1,7 @@
-import type { AlignType } from '../../model/AlignType';
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { HeadlineSmallVersion, HeadlineVersion } from '../../model/HeadlineType';
 import type { HeadingTagType, HeadingType } from '../../ui-kit/Heading/HeadingProps';
 
-export const ALIGN_TEXT: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
 type StyleType = {
   background: string;
   text: string;
@@ -74,6 +67,7 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
 };
 
 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',

package/mobile/src/components/MobileAppTile/MobileAppTileContent.ts

@@ -1,3 +1,4 @@
+import type { AlignType } from '../../model/AlignType';
 import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { Picture } from '../../model/Picture';
@@ -12,6 +13,11 @@ export type MobileAppTileContent = HeadlineCommonProps &
   HeadingCommonProps &
   ButtonContent &
   ListContent & {
+    /**
+     * @title Выравнивание заголовка
+     * @default left
+     */
+    alignTitle?: AlignType;
     // TODO: description для мобильной версии
     /** @title QR-код */
     qr?: Picture;

package/mobile/src/components/Tile/Tile.tsx

@@ -59,7 +59,7 @@ export const Tile = JSX<TileProps>((props) => {
           buttons?.length ? (
             <ButtonSection
               context={context}
-              buttons={buttons.map((button) => ({ ...button, className: 'w-[158px]' }))}
+              buttons={buttons.map((button) => ({ ...button, className: 'min-w-[158px]' }))}
               className="flex mt-8 gap-3"
             />
           ) : null

package/mobile/src/model/AlignText.ts

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

package/mobile/src/model/HeadlineType.ts

@@ -6,9 +6,9 @@ export type HeadlineVersion = 'XXL' | 'XL' | 'L' | 'M' | 'S';
 
 /**
  * @title Размер заголовка
- * @enumNames ["Самый большой тонкий", "Самый большой", "Очень большой тонкий", "Очень большой", "Большой", "Средний", "Маленький"]
+ * @enumNames ["Заголовок", "Самый большой тонкий", "Самый большой", "Очень большой тонкий", "Очень большой", "Большой", "Средний", "Маленький"]
  */
-export type HeadlineSmallVersion = 'XL_L' | 'XL_R' | 'L_L' | 'L_R' | 'M' | 'S' | 'XS';
+export type HeadlineSmallVersion = 'H6' | 'XL_L' | 'XL_R' | 'L_L' | 'L_R' | 'M' | 'S' | 'XS';
 
 export type TitleProps = {
   /** @title Заголовок */

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

@@ -13,29 +13,38 @@ interface DefaultFoldButtonProps {
 }
 
 export const DefaultFoldButton = JSX<DefaultFoldButtonProps>(
-  ({ className, label, icon, dataTheme = '', onClick }) => (
-    <button
-      className={`border-none bg-primary-main hover:bg-primary-hover px-0 py-5 mb-[1px] w-full font-sans text-white flex justify-center cursor-pointer ${
-        className || ''
-      }`}
-      data-theme={dataTheme}
-      onClick={onClick}
-    >
-      <span className="text-h4 pr-3">{label}</span>
-      {icon ? (
-        <Img
-          image={{
-            icon,
-            iconVersion: 'white',
-          }}
-          className="flex-shrink-0 my-auto"
-          width="20"
-          height="20"
-          asSVG
-        />
-      ) : null}
-    </button>
-  ),
+  ({ className = '', label, icon, dataTheme = '', onClick }) => {
+    const STATE_STYLE =
+      'hover:bg-primary-hover focus:border-primary-text active:bg-primary-active outline-none';
+    const DIMENSIONS_STYLE = 'flex justify-center w-full px-0 py-5 mb-[1px]';
+
+    return (
+      <button
+        className={[
+          'border border-transparent bg-primary-main font-sans text-white cursor-pointer',
+          STATE_STYLE,
+          DIMENSIONS_STYLE,
+          className,
+        ].join(' ')}
+        data-theme={dataTheme}
+        onClick={onClick}
+      >
+        <span className="text-h4 pr-3">{label}</span>
+        {icon ? (
+          <Img
+            image={{
+              icon,
+              iconVersion: 'white',
+            }}
+            className="flex-shrink-0 my-auto"
+            width="20"
+            height="20"
+            asSVG
+          />
+        ) : null}
+      </button>
+    );
+  },
 );
 
 export const renderDefaultFoldButton = ({ isUnfolded, onToggle }: FoldablePartProps) => {

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

@@ -1,5 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ListItemSize, ListItemVersion } from './ListProps';
+
 /**
  * @title Параметры элемента списка
  */
@@ -18,19 +19,21 @@ const LIST_DOT_STYLE_MAP: Record<ListItemVersion, string> = {
 };
 
 const DOT_SIZE_MAP = {
-  L: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-4 mt-3',
-  M: 'w-1.5 h-1.5 min-w-1.5 min-h-1.5 mr-3 mt-3',
-  S: 'w-1 h-1 min-w-1 min-h-1 mr-2 mt-2.5',
+  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',
 };
 
 export const ListItem = JSX<ListItemProps>(
   ({ className = '', isDotted = true, children, version = 'primary', size = 'M' }) => {
     return (
-      <div className={`font-sans flex items-start ${className}`} role="listitem">
+      <div className={`font-sans flex items-baseline ${className}`} role="listitem">
         {isDotted ? (
-          <div
-            className={`rounded-full inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}`}
-          />
+          <div>
+            <div
+              className={`rounded-full align-middle inline-block ${LIST_DOT_STYLE_MAP[version]} ${DOT_SIZE_MAP[size]}`}
+            />
+          </div>
         ) : null}
         <span>{children}</span>
       </div>

package/package.json

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

package/src/components/Accordion/Accordion.tsx

@@ -1,17 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { AlignType } from '../../model/AlignType';
+import { AlignText } from '../../model/AlignText';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import type { AccordionContent } from './AccordionContent';
 import { AccordionItemsList } from './AccordionItemsList';
 
-const ALIGN_TITLE: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
 export interface AccordionProps extends AccordionContent, UniBlockProps {}
 
 export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
@@ -33,7 +27,7 @@ export const Accordion: JSXBlock<AccordionProps> = JSX<AccordionProps>(
         <Heading
           headingType="h3"
           as="h2"
-          className={`mb-2.5 ${ALIGN_TITLE[accordionAlignTitle]}`}
+          className={`mb-2.5 ${AlignText[accordionAlignTitle]}`}
           title={title}
         />
       ) : null}

package/src/components/Blocks.ts

@@ -7,6 +7,7 @@ import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Catalog } from './Catalog/Catalog';
 import { ComparisonTable } from './ComparisonTable/ComparisonTable';
+import { ContactsBlock } from './ContactsBlock/ContactsBlock';
 import { ErrorBlock } from './ErrorBlock/ErrorBlock';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
@@ -46,6 +47,7 @@ export const Blocks = {
   ComparisonTable,
   Calculator,
   Catalog,
+  ContactsBlock,
   ExchangeRateTile,
   Footer,
   Gallery,

package/src/components/ContactsBlock/ContactsBlock.example.json

@@ -0,0 +1,51 @@
+{
+  "contactsBlockVersion": "secondary",
+  "info": [
+    {
+      "title": "Заголовок 1",
+      "description": "Описание 1",
+      "button": {
+        "href": "#",
+        "text": "Кнопка 1",
+        "target": "_blank",
+        "version": "secondary"
+      }
+    },
+    {
+      "title": "Заголовок 2",
+      "description": "Описание 2",
+      "button": {
+        "href": "#",
+        "text": "Кнопка 2",
+        "target": "_blank",
+        "version": "secondary"
+      }
+    }
+  ],
+  "contacts": [
+    [
+      {
+        "title": "Заголовок 3",
+        "description": "Описание 3",
+        "additionalDescription": "Доп описание 3"
+      },
+      {
+        "title": "Заголовок 4",
+        "description": "Описание 4",
+        "additionalDescription": "Доп описание 4"
+      }
+    ],
+    [
+      {
+        "title": "Заголовок 5",
+        "description": "Описание 5",
+        "additionalDescription": "Доп описание 5"
+      },
+      {
+        "title": "Заголовок 6",
+        "description": "Описание 6",
+        "additionalDescription": "Доп описание 6"
+      }
+    ]
+  ]
+}

package/src/components/ContactsBlock/ContactsBlock.fixture.tsx

@@ -0,0 +1,57 @@
+import { context } from '../../react/setup-fixture';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ContactsBlock } from './ContactsBlock';
+
+const button: ButtonProps = {
+  href: '#',
+  text: 'Перейти',
+  target: '_blank',
+  version: 'secondary',
+};
+
+export default {
+  default: (
+    <ContactsBlock
+      className="col-span-12"
+      info={[
+        {
+          title: 'Телеграм-канал РСХБ Инвестиции',
+          description:
+            'Всегда вовремя: главные новости, инвестиционные идеи, анонсы размещения облигаций',
+          button,
+        },
+        {
+          title: 'Подписка на аналитику',
+          description: 'E-mail рассылка: главное за неделю',
+          button,
+        },
+      ]}
+      contacts={[
+        [
+          {
+            title: '8 (800) 100-40-40',
+            description: 'Для консультаций',
+          },
+          {
+            title: '8 (800) 100-40-60',
+            description: 'Для подачи торговых поручений',
+            additionalDescription: 'Потребуется назвать уникальный код клиента и кодовое слово',
+          },
+        ],
+        [
+          {
+            title: 'invest@rshb.ru',
+            description: 'По брокерскому обслуживанию',
+            additionalDescription: 'Восстановление логина и номера соглашения',
+          },
+          {
+            title: 'broker@rshb.ru',
+            description: 'По брокерскому обслуживанию',
+            additionalDescription: 'Получение расчета финансового результата и справки 2-НДФЛ',
+          },
+        ],
+      ]}
+      context={context}
+    />
+  ),
+};

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -0,0 +1,70 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Button } from '../../ui-kit/Button/Button';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import type { ContactItemProps, ContactsBlockContent, InfoItemProps } from './ContactsBlockContent';
+
+export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps {}
+
+interface RenderContactsColumnProps {
+  contactsColumn?: ContactItemProps[];
+  index?: number;
+}
+
+const contactsBlockStyleMap = {
+  primary: 'bg-white',
+  secondary: 'bg-primary-main text-white',
+};
+
+export const ContactsBlock = JSX<ContactsBlockProps>(
+  ({ className = '', contacts, context, info, contactsBlockVersion = 'secondary', ...rest }) => {
+    return (
+      <BlockWrapper
+        context={context}
+        className={`${contactsBlockStyleMap[contactsBlockVersion]} flex p-12 ${className}`}
+        {...rest}
+      >
+        {info ? renderInfo(info) : null}
+        {contacts ? renderContacts(contacts) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderInfo = (info: InfoItemProps[]) => (
+  <div className="flex grow basis-0 pr-11">
+    {info.map(({ title, description, button }, index) => (
+      <div className="grow basis-0 pr-11 last:pr-0" key={String(index)}>
+        <Heading as="h5" headingType="h5" title={title} className="pb-2.5" />
+        <Description className="text-l-light pb-6" description={description} />
+        {button ? <Button {...button} /> : null}
+      </div>
+    ))}
+  </div>
+);
+
+const renderContacts = (contacts: ContactItemProps[][]) => (
+  <div className="flex grow basis-0">
+    {contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index }))}
+  </div>
+);
+
+const renderContactsColumn = ({ contactsColumn, index }: RenderContactsColumnProps) =>
+  contactsColumn ? (
+    <div className="flex flex-col grow basis-0 pr-11" key={String(index)}>
+      {contactsColumn.map(({ title, description, additionalDescription }, key) => (
+        <div className="pr-11 last:pr-0 last:mt-5" key={String(key)}>
+          <Heading as="h5" headingType="h5" title={title} />
+          <Description className="text-l-light mt-2.5" description={description} />
+          {additionalDescription ? (
+            <Description
+              className="text-m-light mt-1.5 opacity-80"
+              description={additionalDescription}
+            />
+          ) : null}
+        </div>
+      ))}
+    </div>
+  ) : null;

package/src/components/ContactsBlock/ContactsBlock.ui.json

@@ -0,0 +1,8 @@
+{
+  "content": {},
+  "style": {
+    "ui:options": {
+      "minCols": 12
+    }
+  }
+}

package/src/components/ContactsBlock/ContactsBlockContent.ts

@@ -0,0 +1,39 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+
+/**
+ * @title Контакты
+ */
+export interface ContactsBlockContent {
+  /**
+   * @title Данные
+   * @maxItems 2
+   * */
+  info?: InfoItemProps[];
+  /**
+   * @title Контакты
+   * @maxItems 2
+   * */
+  contacts?: ContactItemProps[][];
+  contactsBlockVersion?: 'secondary';
+}
+
+/**
+ * @title Элемент плитки
+ */
+export interface ContactItemProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Описание */
+  description?: string;
+  /** @title Заголовок */
+  title?: string;
+}
+
+/**
+ * @title Элемент плитки
+ */
+export interface InfoItemProps extends HeadlineCommonProps {
+  /** @title Кнопка */
+  button?: ButtonProps;
+}

package/src/components/ContentPage/renderContentPageHead.tsx

@@ -0,0 +1,38 @@
+import type { ContentPageMeta } from '../../model/ContentPageDef';
+
+export function renderContentPageHead(data: ContentPageMeta) {
+  const { title, main, og, twitter, jsonLd } = data;
+  const { description, keywords, canonical, robots } = main || {};
+
+  return [
+    <title key="title">{title}</title>,
+    <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1" />,
+    description ? <meta key="description" name="description" content={description} /> : null,
+    keywords ? <meta key="keywords" name="keywords" content={keywords.join(',')} /> : null,
+    robots ? <meta key="robots" name="robots" content={robots.join(',')} /> : null,
+    renderOpenGraph(og),
+    renderTwitter(twitter),
+    canonical ? <link key="canonical" rel="canonical" href={canonical} /> : null,
+    jsonLd ? (
+      <script key="jsonLd" type="application/ld+json">
+        {jsonLd}
+      </script>
+    ) : null,
+  ].filter(Boolean);
+}
+
+function renderOpenGraph(og: Record<string, string> | undefined) {
+  return og
+    ? Object.entries(og).map(([key, value]) => (
+        <meta key={key} property={`og:${key}`} content={value} />
+      ))
+    : null;
+}
+
+function renderTwitter(twitter: Record<string, string> | undefined) {
+  return twitter
+    ? Object.entries(twitter).map(([key, value]) => (
+        <meta key={key} name={`twitter:${key}`} content={value} />
+      ))
+    : null;
+}

package/src/components/Gallery/Gallery.example.json

@@ -4,7 +4,7 @@
   "orientation": "horizontal",
   "cards": [
     {
-      "image": {
+      "icon": {
         "format": "webp",
         "size": {
           "width": 150,
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "image": {
+      "icon": {
         "format": "webp",
         "size": {
           "width": 140,

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

@@ -32,19 +32,19 @@ const defaultItems = [
 
 const cards: GalleryCardProps[] = [
   {
-    image,
+    icon: image,
     title: 'Вклады в любой валюте',
     description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
     button: link,
   },
   {
-    image,
+    icon: image,
     title: 'Вклады в любой валюте',
     description: 'О Вклады до 1,4 млн застрахованы в государственной системе страхования вкладов',
     version: 'secondary',
   },
   {
-    image,
+    icon: image,
     title: 'Вклады в любой валюте',
     isDotted,
     items: defaultItems,