@redneckz/wildless-cms-uni-blocks 0.6.31 → 0.6.33

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

@@ -9,20 +9,22 @@ const button: ButtonProps = {
   version: 'secondary',
 };
 
-const info = [
-  {
-    title: 'Телеграм-канал РСХБ Инвестиции',
-    description:
-      'Всегда вовремя: главные новости, инвестиционные идеи, анонсы размещения облигаций',
-    button,
-  },
-  {
-    title: 'Подписка на аналитику',
-    description: 'E-mail рассылка: главное за неделю',
-    button,
-  },
-];
 const contacts = [
+  [
+    {
+      title: 'Телеграм-канал РСХБ Инвестиции',
+      description:
+        'Всегда вовремя: главные новости, инвестиционные идеи, анонсы размещения облигаций',
+      button,
+    },
+  ],
+  [
+    {
+      title: 'Подписка на аналитику',
+      description: 'E-mail рассылка: главное за неделю',
+      button,
+    },
+  ],
   [
     {
       title: '8 (800) 100-40-40',
@@ -49,8 +51,12 @@ const contacts = [
 ];
 
 export default {
-  secondary: <ContactsBlock className="col-span-12" info={info} contacts={contacts} />,
+  secondary: <ContactsBlock className="col-span-12" contacts={contacts} />,
   primary: (
-    <ContactsBlock className="col-span-12" version="primary" info={info} contacts={contacts} />
+    <ContactsBlock
+      className="col-span-12"
+      version="primary"
+      contacts={contacts}
+    />
   ),
 };

package/src/components/ContactsBlock/ContactsBlock.tsx

@@ -1,68 +1,57 @@
 import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import { VersionStyleMap } from '../../model/BlockVersion';
 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';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
+import { Headline } from '../Headline/Headline';
+import type { ContactBlockProps, ContactsBlockContent } from './ContactsBlockContent';
 
 export interface ContactsBlockProps extends ContactsBlockContent, UniBlockProps {}
 
 interface RenderContactsColumnProps {
-  contactsColumn?: ContactItemProps[];
+  version?: BlockVersion;
+  column?: ContactBlockProps[];
   index?: number;
 }
 
-const contactsBlockStyleMap = {
-  primary: 'bg-white',
-  secondary: 'bg-primary-main text-white',
-};
-
 export const ContactsBlock = JSX<ContactsBlockProps>(
   ({ className = '', contacts, info, version = 'secondary', ...rest }) => {
     return (
-      <BlockWrapper
-        className={`${contactsBlockStyleMap[version]} flex p-12 ${className}`}
-        {...rest}
-      >
-        {info ? renderInfo(info) : null}
-        {contacts ? renderContacts(contacts) : null}
+      <BlockWrapper className={`${VersionStyleMap[version]} flex p-[50px] ${className}`} {...rest}>
+        {info?.length ? renderBlocks(info, version) : null}
+        {contacts?.length ? renderBlocks(contacts, version) : 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[][]) => (
+const renderBlocks = (info: ContactBlockProps[][], version?: BlockVersion) => (
   <div className="flex grow basis-0">
-    {contacts.map((contactsColumn, index) => renderContactsColumn({ contactsColumn, index }))}
+    {info.map((column, index) => renderBlocksColumn({ column, index, version }))}
   </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} />
+const renderBlocksColumn = ({ column, index, version }: RenderContactsColumnProps) =>
+  column ? (
+    <div className="flex flex-col grow basis-0 pr-11 last:pr-0" key={`col-${String(index)}`}>
+      {column.map(({ title = '', description, additionalDescription, button }, key) => (
+        <div className="mt-6 first:mt-0" key={String(key)}>
+          <Headline
+            className="!p-0"
+            title={title}
+            description={description}
+            headlineVersion="XS"
+            align="left"
+            bgColorHeadline={version}
+          />
           {additionalDescription ? (
-            <Description
-              className="text-m-light mt-1.5 opacity-80"
-              description={additionalDescription}
-            />
+            <div className="mt-1.5 opacity-80">
+              <Paragraph size="text-m-light">{additionalDescription}</Paragraph>
+            </div>
           ) : null}
+          {button ? <Button className="mt-6" {...button} /> : null}
         </div>
       ))}
     </div>

package/src/components/ContactsBlock/ContactsBlockContent.ts

@@ -2,6 +2,16 @@ import type { BlockVersion } from '../../model/BlockVersion';
 import type { HeadlineCommonProps } from '../../model/HeadlineType';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
 
+/**
+ * @title Элемент плитки
+ */
+export interface ContactBlockProps extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Кнопка */
+  button?: ButtonProps;
+}
+
 /**
  * @title Контакты
  */
@@ -10,31 +20,11 @@ export interface ContactsBlockContent {
    * @title Данные
    * @maxItems 2
    * */
-  info?: InfoItemProps[];
+  info?: ContactBlockProps[][];
   /**
    * @title Контакты
    * @maxItems 2
    * */
-  contacts?: ContactItemProps[][];
+  contacts?: ContactBlockProps[][];
   version?: BlockVersion;
 }
-
-/**
- * @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/Headline/Headline.tsx

@@ -2,7 +2,6 @@ import { JSX } from '@redneckz/uni-jsx';
 import { AlignText } from '../../model/AlignText';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { HEADLINE_BLOCK_STYLE_MAPS, HEADLINE_VERSION } from './constants';
 import type { HeadlineContent } from './HeadlineContent';
@@ -37,10 +36,9 @@ export const Headline = JSX<HeadlineProps>(
           />
         ) : null}
         {description ? (
-          <Description
-            className={`${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`}
-            description={description}
-          />
+          <p className={`${SIZE_MAPS.descriptionFont} ${STYLE_MAPS.text} ${AlignText[align]}`}>
+            {description}
+          </p>
         ) : null}
       </BlockWrapper>
     );

package/src/components/Headline/constants.ts

@@ -64,6 +64,12 @@ export const HEADLINE_VERSION: Record<HeadlineVersion, VersionStyleType> = {
     headingType: 'h4',
     as: 'h4',
   },
+  XS: {
+    descriptionFont: 'text-l-light',
+    gap: 'gap-2',
+    headingType: 'h5',
+    as: 'h5',
+  },
 };
 
 export const HEADLINE_SMALL_VERSION: Record<HeadlineSmallVersion, string> = {

package/src/components/InvestmentGallery/InvestmentGalleryCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { BorderVersionStyleMap } from '../../model/BorderVersion';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { BaseTile } from '../BaseTile/BaseTile';
@@ -51,9 +50,9 @@ export const InvestmentGalleryCard = JSX<RecommendationCardProps>(
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="flex flex-col justify-between">
             <div className="flex itens-center justify-between mb-4">
-              {description ? <Description className="text-h6" description={description} /> : null}
+              {description ? <span className="text-h6">{description}</span> : null}
               {additionalDescription ? (
-                <div className="text-m-light text-secondary-text"> {additionalDescription} </div>
+                <span className="text-m-light text-secondary-text"> {additionalDescription} </span>
               ) : null}
             </div>
             {cardList?.length ? (

package/src/components/Recommendation/RecommendationCard.tsx

@@ -1,7 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockVersion } from '../../model/BlockVersion';
 import { renderButton } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
@@ -30,7 +29,7 @@ export const RecommendationCard = JSX<RecommendationCardProps>(
       >
         <BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
           <div className="h-full flex flex-col justify-between">
-            {description ? <Description className="mb-2" description={description} /> : null}
+            {description ? <span className="mb-2">{description}</span> : null}
             {items?.length ? (
               <List
                 className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"

package/src/components/StepsBlock/renderStepContent.tsx

@@ -13,7 +13,7 @@ export const renderStepContent =
   }: {
     styleMap: StyleType;
     isMainButton: boolean;
-    version: BlockVersion;
+    version?: BlockVersion;
   }) =>
   (step: Step, i: number, { length }: { length: number }): VNode => {
     const { label, description, button, items, isDotted } = step;

package/src/components/TariffsTable/TariffsTable.mobile.tsx

@@ -45,7 +45,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
 );
 
 const getColData = (columns: TariffsTableColumn[] | undefined) =>
-  columns?.[0].data ? columns[0].data : [];
+  columns?.[0]?.data ? columns[0].data : [];
 
 const getTiles = (rowHeaders: TariffsTableRowHeader[] | undefined, colData: CellDef[][]) =>
   rowHeaders?.map((header, i) => ({

package/src/components/Tile/Tile.tsx

@@ -3,11 +3,11 @@ import { VersionStyleMap } from '../../model/BlockVersion';
 import type { UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { ButtonSection } from '../../ui-kit/Button/ButtonSection';
-import { Description } from '../../ui-kit/Description/Description';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import { List } from '../../ui-kit/List/List';
 import type { ListProps } from '../../ui-kit/List/ListProps';
+import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
 import { Tags } from '../../ui-kit/Tags/Tags';
 import { BaseTile } from '../BaseTile/BaseTile';
 import { getTileMinHeight } from '../BaseTile/getTileMinHeight';
@@ -66,7 +66,9 @@ export const Tile = JSX<TileProps>((props) => {
         image={image?.src ? <Img className="mt-auto ml-7" image={image} /> : null}
       >
         {description ? (
-          <Description className="max-w-[600px] text-xl-light mt-2.5" description={description} />
+          <div className="max-w-[600px] mt-2.5">
+            <Paragraph size="text-xl-light">{description}</Paragraph>
+          </div>
         ) : null}
         {children}
         {renderList({ version, isDotted, listItemSize }, items)}

package/src/icons/ArrowLeftIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка" isInverse="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка 'Влево'" isInverse="true" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M7 11.834L3 8.00065L7 4.16732" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
   <path d="M14 9.00195C14.5523 9.00195 15 8.55424 15 8.00195C15 7.44967 14.5523 7.00195 14 7.00195L14 9.00195ZM8 7.00195C7.44772 7.00195 7 7.44967 7 8.00195C7 8.55424 7.44772 9.00195 8 9.00195L8 7.00195ZM14 7.00195L8 7.00195L8 9.00195L14 9.00195L14 7.00195Z" fill="currentColor"/>
 </svg>

package/src/icons/ArrowRightIcon.svg

@@ -0,0 +1 @@
+<svg title="Стрелка 'Вправо'" isInverse="true" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14.43 5.93 20.5 12l-6.07 6.07M11.01 12h9.32M3.5 12h3.47" stroke="#42AB44" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/src/icons/ArrowUpIcon.svg

@@ -1,4 +1,4 @@
-<svg title="Стрелка вверх" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg title="Стрелка 'Вверх'" isInverse="true" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.3416 9.29163L11.1582 7.10829C10.5166 6.46662 9.46657 6.46662 8.8249 7.10829L3.3999 12.5416" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M16.6001 12.5416L15.7334 11.675" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>