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

package/src/components/CarouselLinks/CarouselLinks.tsx

@@ -0,0 +1,61 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { LinkProps } from '../../model/LinkProps';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { LinkButton } from '../../ui-kit/LinkButton/LinkButton';
+import { sliceArray } from '../../utils/sliceArray';
+import { Carousel } from '../Carousel/Carousel';
+import type { CarouselLinksContent } from './CarouselLinksContent';
+
+export interface CarouselLinksProps extends CarouselLinksContent, UniBlockProps {}
+
+const MAX_LINKS_COUNT = 12;
+
+export const CarouselLinks = JSX<CarouselLinksProps>(
+  ({ additionalDescription, block, description, links, title, className = '', ...rest }) => {
+    return (
+      <BlockWrapper
+        className={`bg-primary-main flex w-full p-10 overflow-hidden justify-between font-sans ${className}`}
+        {...rest}
+      >
+        <div className="flex flex-col max-w-96 pr-9 text-white text-xl-light">
+          {title ? <Heading title={title} as="h1" headingType="h0" className="pb-0.5" /> : null}
+          {description ? (
+            <Description description={description} className="text-xl-light pt-5" />
+          ) : null}
+          {additionalDescription ? (
+            <Description description={additionalDescription} className="pt-6" />
+          ) : null}
+        </div>
+        {links?.length ? renderLinks(links, block) : null}
+      </BlockWrapper>
+    );
+  },
+);
+
+const renderLinks = (links: LinkProps[], block: any) => {
+  const slicedLinks = sliceArray(links, MAX_LINKS_COUNT);
+
+  const slides = slicedLinks.map((slide) => (
+    <div className="w-[672px] min-w-[672px] ml-20 mr-20 flex flex-wrap self-start">
+      {slide.map((link, index) => (
+        <LinkButton className="m-1" key={String(index)} {...link} />
+      ))}
+    </div>
+  ));
+
+  return (
+    <Carousel
+      className="min-w-[832px] w-[832px]"
+      isBlur={false}
+      cardFullViewCount={1}
+      cardWidth={'832'}
+      isCyclic={true}
+      block={{ type: 'Carousel', blocks: slides }}
+    >
+      {slides}
+    </Carousel>
+  );
+};

package/src/components/CarouselLinks/CarouselLinksContent.ts

@@ -0,0 +1,10 @@
+import type { HeadlineCommonProps } from '../../model/HeadlineType';
+import type { LinkProps } from '../../model/LinkProps';
+
+/** @title Карусель с ссылками */
+export interface CarouselLinksContent extends HeadlineCommonProps {
+  /** @title Дополнительное описание */
+  additionalDescription?: string;
+  /** @title Ссылки */
+  links?: LinkProps[];
+}

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

@@ -2,26 +2,30 @@
   "content": {
     "version": "secondary",
     "info": [
-      {
-        "title": "Заголовок 1",
-        "description": "Описание 1",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 1",
-          "target": "_blank",
-          "version": "secondary"
+      [
+        {
+          "title": "Заголовок 1",
+          "description": "Описание 1",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 1",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      },
-      {
-        "title": "Заголовок 2",
-        "description": "Описание 2",
-        "button": {
-          "href": "#",
-          "text": "Кнопка 2",
-          "target": "_blank",
-          "version": "secondary"
+      ],
+      [
+        {
+          "title": "Заголовок 2ff",
+          "description": "Описание 2",
+          "button": {
+            "href": "#",
+            "text": "Кнопка 2",
+            "target": "_blank",
+            "version": "secondary"
+          }
         }
-      }
+      ]
     ],
     "contacts": [
       [

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,58 @@
 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 { 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}
             />
           ) : 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/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/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/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>