@redneckz/wildless-cms-uni-blocks 0.4.1 → 0.4.3

package/mobile/src/components/Tabs/Tabs.tsx

@@ -4,9 +4,10 @@ import { EventBus } from '../../EventBus/EventBus';
 import type { UniBlockProps } from '../../types';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { renderTab } from './renderTab';
-import type { Tab, TabsContent } from './TabsContent';
+import type { Tab, TabsContent, TabType } from './TabsContent';
 
 export interface TabActivationEvent {
+  type?: TabType;
   label?: string;
 }
 
@@ -17,10 +18,10 @@ export const Tabs = JSX<TabsProps>((props) => {
 
   const [currentTab, setCurrentTab] = useState(tabs ? tabs[0] : undefined);
 
-  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.id }), [currentTab]);
+  useEffect(() => EventBus.inst.subject('tab', { label: currentTab?.ref }), [currentTab]);
 
   const handleClick = (selectedTab: Tab) => {
-    EventBus.inst.fire('tab', { label: selectedTab.id });
+    EventBus.inst.fire('tab', { type: selectedTab.type, label: selectedTab.ref });
     setCurrentTab(selectedTab);
   };
 
@@ -30,7 +31,7 @@ export const Tabs = JSX<TabsProps>((props) => {
       className={`mb-2 box-border flex gap-x-1 ${className}`}
       role="tablist"
     >
-      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter }))}
+      {tabs?.map(renderTab({ onClick: handleClick, currentTab, page, showCounter, context }))}
     </BlockWrapper>
   );
 });

package/mobile/src/components/Tabs/TabsContent.ts

@@ -1,9 +1,16 @@
+export type TabType = 'group' | 'link';
+
 /**
  *  @title Таб
  */
 export interface Tab {
-  /** @title Tег */
-  id?: string;
+  /** @title Тег или ссылка */
+  ref?: string;
+  /**
+   * @title Тип
+   * @enumNames ['Группирующий', 'Ссылочный']
+   */
+  type?: TabType;
   /** @title Название */
   title?: string;
 }

package/mobile/src/components/Tabs/renderGroupTab.tsx

@@ -0,0 +1,51 @@
+import { RenderTabProps } from './renderTab';
+import {
+  ACTIVE_LINK_CLASSES,
+  ACTIVE_TEXT_CLASSES,
+  INACTIVE_LINK_CLASSES,
+  INACTIVE_TEXT_CLASSES,
+  LINK_CLASSES,
+  TEXT_CLASSES,
+} from './tabItemClasses';
+import { Tab } from './TabsContent';
+
+const BADGE_CLASSES = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs ml-2';
+const ACTIVE_BADGE_CLASSES = 'bg-white/30 text-white';
+const INACTIVE_BADGE_CLASSES = 'bg-main-divider text-secondary-text group-hover:text-primary-main';
+
+export const renderGroupTab =
+  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  (tab: Tab, i: number) => {
+    const active = currentTab === tab;
+
+    const count = tab.ref
+      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.ref as string)).length
+      : page?.blocks?.length;
+
+    return (
+      <div
+        key={String(i)}
+        className={`${LINK_CLASSES} ${active ? ACTIVE_LINK_CLASSES : INACTIVE_LINK_CLASSES}`}
+        role="tab"
+        aria-selected={active}
+        onClick={() => onClick(tab)}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? renderTitle(tab.title, active) : null}
+          {showCounter && count ? renderCount(count, active) : null}
+        </div>
+      </div>
+    );
+  };
+
+const renderTitle = (title: string, active: boolean) => (
+  <h3 className={`${TEXT_CLASSES} ${active ? ACTIVE_TEXT_CLASSES : INACTIVE_TEXT_CLASSES}`}>
+    {title}
+  </h3>
+);
+
+const renderCount = (count: number, active: boolean) => (
+  <div className={`${BADGE_CLASSES} ${active ? ACTIVE_BADGE_CLASSES : INACTIVE_BADGE_CLASSES}`}>
+    {count}
+  </div>
+);

package/mobile/src/components/Tabs/renderLinkTab.tsx

@@ -0,0 +1,25 @@
+import type { LinkProps } from '../../model/LinkProps';
+import {
+  INACTIVE_LINK_CLASSES,
+  INACTIVE_TEXT_CLASSES,
+  LINK_CLASSES,
+  TEXT_CLASSES,
+} from './tabItemClasses';
+
+export interface RenderLinkTabProps extends LinkProps {
+  active?: boolean;
+  onClick?: () => void;
+  i: number;
+}
+
+export const renderLinkTab = ({ text, onClick, href, target = '_self', i }: RenderLinkTabProps) => (
+  <a
+    key={String(i)}
+    className={`${LINK_CLASSES} ${INACTIVE_LINK_CLASSES}`}
+    target={target}
+    href={href}
+    onClick={onClick}
+  >
+    <span className={`${TEXT_CLASSES} ${INACTIVE_TEXT_CLASSES}`}>{text}</span>
+  </a>
+);

package/mobile/src/components/Tabs/renderTab.tsx

@@ -1,51 +1,31 @@
+import { useLink } from '../../hooks/useLink';
 import type { ContentPageDef } from '../../types';
+import { isURL } from '../../utils/url';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { renderGroupTab } from './renderGroupTab';
+import { renderLinkTab } from './renderLinkTab';
 import type { Tab } from './TabsContent';
 
-interface RenderTabProps {
-  onClick: OnTabClick;
+export interface RenderTabProps {
+  onClick: (tab: Tab) => void;
   currentTab?: Tab;
   page?: ContentPageDef;
   showCounter?: boolean;
+  context: ContentPageContext;
 }
 
-type OnTabClick = (tab: Tab) => void;
-
-const badgeStyle = 'min-w-[22px] w-[22px] h-[22px] rounded-full text-xs-light ml-2';
-
 export const renderTab =
-  ({ onClick, currentTab, showCounter, page }: RenderTabProps) =>
+  ({ onClick, currentTab, showCounter, page, context }: RenderTabProps) =>
   (tab: Tab, i: number) => {
-    const isActive = currentTab === tab;
-
-    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
-    const tabText = `text-m-light ${
-      isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main'
-    }`;
-    const counterBlockStyle = `${badgeStyle}
-      ${
-        isActive
-          ? 'bg-white/30 text-white'
-          : 'bg-main-divider text-secondary-text group-hover:text-primary-main'
-      }`;
+    const { useRouter, handlerDecorator } = context;
+    const router = useRouter();
 
-    const count = tab.id
-      ? page?.blocks?.filter((block) => block?.labels?.includes(tab.id as string)).length
-      : page?.blocks?.length;
+    if (isURL(tab?.ref)) {
+      return renderLinkTab({
+        ...useLink({ router, handlerDecorator }, { href: tab.ref, text: tab.title }),
+        i,
+      });
+    }
 
-    return (
-      <div
-        key={String(i)}
-        className={`flex h-12 w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
-        role="tab"
-        aria-selected={isActive}
-        onClick={() => onClick(tab)}
-      >
-        <div className="flex flex-1 items-center justify-center">
-          {tab?.title ? <h3 className={tabText}>{tab?.title}</h3> : null}
-          {showCounter ? (
-            <div className={`flex items-center justify-center ${counterBlockStyle}`}>{count}</div>
-          ) : null}
-        </div>
-      </div>
-    );
+    return renderGroupTab({ onClick, currentTab, showCounter, page, context })(tab, i);
   };

package/mobile/src/components/Tabs/tabItemClasses.ts

@@ -0,0 +1,7 @@
+export const LINK_CLASSES = 'h-12 flex-1 flex items-center justify-center cursor-pointer';
+export const ACTIVE_LINK_CLASSES = 'bg-primary-main';
+export const INACTIVE_LINK_CLASSES = 'group bg-white';
+
+export const TEXT_CLASSES = 'font-sans text-m';
+export const ACTIVE_TEXT_CLASSES = 'text-white';
+export const INACTIVE_TEXT_CLASSES = 'text-secondary-text group-hover:text-primary-main';

package/mobile/src/components/__snapshots__/Blocks.spec.tsx.snap

@@ -109,7 +109,7 @@ exports[`Blocks ExchangeRateTile should render block "ExchangeRateTile" without
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div>
           <div
@@ -522,25 +522,6 @@ exports[`Blocks Headline should render block "Headline" without content 1`] = `
 />
 `;
 
-exports[`Blocks Insurance should render block "Insurance" without content 1`] = `
-<section
-  class="px-[100px] py-[50px] bg-white text-primary-text font-sans "
->
-  <section
-    class="font-sans flex flex-col p-[50px] gap-3 bg-transparent !p-0"
-  />
-  <div>
-    <div
-      class="mx-auto flex justify-center gap-[122px] mt-[30px]"
-    >
-      <div
-        class="w-[558px] m-auto"
-      />
-    </div>
-  </div>
-</section>
-`;
-
 exports[`Blocks InsuranceAmountBlock should render block "InsuranceAmountBlock" without content 1`] = `
 <section
   class="box-border py-[50px] overflow-hidden relative font-sans w-100 bg-white "
@@ -610,7 +591,7 @@ exports[`Blocks MobileAppTile should render block "MobileAppTile" without conten
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div>
           <div
@@ -655,12 +636,16 @@ exports[`Blocks PictureText should render block "PictureText" without content 1`
 <section
   class="relative font-sans p-14 bg-white text-primary-text "
 >
-  <h3
-    class="font-sans m-0 text-h2 text-center"
+  <section
+    class="font-sans flex flex-col p-[50px] gap-3 bg-white !p-0"
   />
   <div
-    class="flex justify-center mt-9"
-  />
+    class="flex justify-center gap-[122px] mt-[30px]"
+  >
+    <div
+      class="w-[558px] m-auto"
+    />
+  </div>
 </section>
 `;
 
@@ -721,7 +706,7 @@ exports[`Blocks ProductBlock should render block "ProductBlock" without content
           class="flex grow w-full justify-between"
         >
           <div
-            class="flex flex-col justify-between w-full"
+            class="flex flex-col w-full"
           >
             <div />
           </div>
@@ -743,7 +728,7 @@ exports[`Blocks ProductGallery should render block "ProductGallery" without cont
     style="transform: translateX(-000%);"
   />
   <div
-    class="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border"
+    class="flex items-center absolute bottom-6 left-0 right-0 px-[26px] box-border h-28"
   />
 </section>
 `;
@@ -759,7 +744,7 @@ exports[`Blocks ProductTile should render block "ProductTile" without content 1`
       class="font-sans flex flex-col p-[50px] gap-2 bg-white !p-0"
     />
     <div
-      class="flex mt-4"
+      class="flex mt-3.5"
     />
   </div>
 </section>
@@ -787,7 +772,7 @@ exports[`Blocks PromoTile should render block "PromoTile" without content 1`] =
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div>
           <div
@@ -1203,7 +1188,7 @@ exports[`Blocks Tile should render block "Tile" without content 1`] = `
       class="flex grow w-full justify-between"
     >
       <div
-        class="flex flex-col justify-between w-full"
+        class="flex flex-col w-full"
       >
         <div />
       </div>

package/mobile/src/ui-kit/BenefitItem/BenefitItem.tsx

@@ -0,0 +1,58 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BenefitItemProps, BenefitItemCommonProps } from './BenefitItemProps';
+import { Img } from '../Img/Img';
+import type { BlockVersion } from '../../model/BlockVersion';
+
+export interface BenefitGeneralProps extends BenefitItemProps, BenefitItemCommonProps {}
+
+const titleStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-primary-text',
+  secondary: 'text-white',
+};
+const descStyleMap: Record<BlockVersion, string> = {
+  primary: 'text-secondary-text',
+  secondary: 'text-white',
+};
+
+export const BenefitItem = JSX<BenefitGeneralProps>((props) => {
+  const {
+    className = '',
+    icon,
+    label,
+    description,
+    version = 'primary',
+    benefitsVersion = 'normal',
+  } = props;
+
+  const isIconWhite = benefitsVersion === 'white' || version === 'secondary';
+
+  return (
+    <div className={`flex items-center gap-5 ${className}`}>
+      {icon ? (
+        <Img
+          className={renderBenefitIconBgStyle(version, benefitsVersion)}
+          image={{ ...icon, iconVersion: isIconWhite ? 'white' : 'normal' }}
+          asSVG
+        />
+      ) : null}
+      <div className="gap-0.5">
+        {label ? <div className={`text-h6 ${titleStyleMap[version]}`}>{label}</div> : null}
+        {description ? (
+          <div className={`text-m-light ${descStyleMap[version]}`}>{description}</div>
+        ) : null}
+      </div>
+    </div>
+  );
+});
+
+function renderBenefitIconBgStyle(version, benefitsVersion) {
+  let bgColorStyle = 'bg-primary-main text-black';
+
+  if (version === 'secondary') {
+    bgColorStyle = 'bg-white/30 text-black';
+  } else if (benefitsVersion === 'normal') {
+    bgColorStyle = 'bg-secondary-light text-primary-main';
+  }
+
+  return `w-[50px] h-[50px] rounded-full p-[10px] box-border ${bgColorStyle}`;
+}

package/mobile/src/ui-kit/BenefitItem/BenefitItemProps.ts

@@ -0,0 +1,27 @@
+import type { Picture } from '../../model/Picture';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { IconVersion } from '../../model/IconVersion';
+
+export interface BenefitItemCommonProps {
+  benefitsVersion?: IconVersion;
+  /** @hidden */
+  version?: BlockVersion;
+  /** @hidden */
+  className?: string;
+}
+
+export type BenefitItemProps = {
+  icon?: Picture;
+  /** @title Название */
+  label?: string;
+  /** @title Описание */
+  description?: string;
+};
+
+/**
+ * @title Преимущество
+ */
+export type BenefitsProps = BenefitItemCommonProps & {
+  /** @title Список преимуществ */
+  benefits?: BenefitItemProps[];
+};

package/mobile/src/ui-kit/BlockWrapper.tsx

@@ -22,7 +22,12 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     useEffect(
       () =>
         EventBus.inst.subscribe('tab', (event) => {
-          setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+          if (event.type === 'group') {
+            setShouldRenderBlock(!labels?.length || !event.label || labels.includes(event.label));
+          } else {
+            setShouldRenderBlock(true);
+            scrollToBlock(event.label);
+          }
         }),
       [labels],
     );
@@ -46,3 +51,9 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     );
   },
 );
+
+function scrollToBlock(label?: string) {
+  setTimeout(() =>
+    globalThis.document.getElementById(`#${label}`)?.scrollIntoView({ behavior: 'smooth' }),
+  );
+}

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

@@ -46,7 +46,7 @@ export const Foldable = JSX<FoldableProps>(
 
     const buttonClassName =
       foldButtonClasses ||
-      'border-none bg-primary-main px-0 py-[26px] mb-[1px] w-full font-sans text-white text-l flex justify-center cursor-pointer';
+      'border-none bg-primary-main hover:bg-primary-hover px-0 py-[26px] mb-[1px] w-full font-sans text-white text-h4 flex justify-center cursor-pointer';
     const getFoldButtonLabel = isActive ? 'Скрыть' : foldButtonLabel;
 
     return blocks ? (

package/package.json

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

package/src/components/BaseTile/BaseTile.tsx

@@ -10,9 +10,9 @@ export const BaseTile = JSX<BaseTileProps>(
       <div className={`font-sans flex flex-col grow h-full items-start ${className}`}>
         {title}
         <div className="flex grow w-full justify-between">
-          <div className="flex flex-col justify-between w-full">
+          <div className="flex flex-col w-full">
             <div>{children}</div>
-            {buttons ? <div>{buttons}</div> : null}
+            {buttons ? <div className="mt-9">{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BenefitsBlock/BenefitsBlock.tsx

@@ -4,7 +4,7 @@ import type { UniBlockProps } from '../../types';
 import { Heading } from '../../ui-kit/Heading/Heading';
 import { Img } from '../../ui-kit/Img/Img';
 import type { BenefitItemProps, BenefitsBlockContent } from './BenefitsBlockContent';
-import { DescriptionType, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
+import { DescriptionDef, ListBenefitDef, TextBenefitDef } from './BenefitsBlockContent';
 
 export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
 
@@ -53,7 +53,7 @@ const renderStep = (benefit: BenefitItemProps, i: number) => {
   );
 };
 
-const renderDescription = (description?: DescriptionType) => {
+const renderDescription = (description?: DescriptionDef) => {
   const benefitType = description ? description?.benefitType : null;
   if (!benefitType) {
     return null;

package/src/components/BenefitsBlock/BenefitsBlockContent.ts

@@ -32,7 +32,7 @@ export type ListBenefitDef = {
 /**
  * @title Вид контента
  */
-export type DescriptionType = EmptyOption | TextBenefitDef | ListBenefitDef;
+export type DescriptionDef = EmptyOption | TextBenefitDef | ListBenefitDef;
 
 /**
  * @title Преимущество
@@ -41,7 +41,7 @@ export interface BenefitItemProps {
   /** @title Название */
   label?: string;
   /** @title Описание */
-  description?: DescriptionType;
+  description?: DescriptionDef;
   icon?: Picture;
 }
 

package/src/components/BlockContent.ts

@@ -8,7 +8,6 @@ import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
 import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
-import type { InsuranceContent } from './Insurance/InsuranceContent';
 import type { InsuranceAmountBlockContent } from './InsuranceAmountBlock/InsuranceAmountBlockContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -57,5 +56,4 @@ export type BlockContent =
   | LinkListContent
   | GroupBlockContent
   | BonusBenefitsBlockContent
-  | InsuranceContent
   | SafeDepositRentalContent;

package/src/components/Blocks.ts

@@ -12,7 +12,6 @@ import { GracePeriod } from './GracePeriod/GracePeriod';
 import { GroupBlock } from './GroupBlock/GroupBlock';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
-import { Insurance } from './Insurance/Insurance';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock/InsuranceAmountBlock';
 import { LinkDocs } from './LinkDocs/LinkDocs';
 import { MiniGallery } from './MiniGallery/MiniGallery';
@@ -47,7 +46,6 @@ export const Blocks = {
   GracePeriod,
   Header,
   Headline,
-  Insurance,
   InsuranceAmountBlock,
   LinkDocs,
   MiniGallery,

package/src/components/ContentPage/ContentPage.page.json

@@ -1947,12 +1947,51 @@
           "alt": "Варианты потребительского кредита",
           "format": "webp",
           "size": {
-            "width": 200,
-            "height": 200
+            "width": 400,
+            "height": 300
           }
         }
       }
     },
+    {
+      "type": "PictureText",
+      "style": ["col-span-12"],
+      "content": {
+        "title": "Страховые риски и продукты",
+        "description": "Описание",
+        "sum": 500000,
+        "image": {
+          "src": "insurance.png",
+          "title": "страхование",
+          "format": "webp",
+          "alt": "Страховые риски и продукты",
+          "size": {
+            "width": 400,
+            "height": 300
+          },
+          "sources": [
+            {
+              "src": "insurance.png 1x, insurance-2x.png 2x",
+              "format": "png"
+            }
+          ]
+        },
+        "benefits": [
+          {
+            "label": "Ликвидация организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          },
+          {
+            "label": "Сокращение численности работников организации",
+            "icon": {
+              "icon": "ShieldTickIcon"
+            }
+          }
+        ]
+      }
+    },
     {
       "type": "Recommendation",
       "style": ["col-span-12"],
@@ -2144,45 +2183,6 @@
         ]
       }
     },
-    {
-      "type": "Insurance",
-      "style": ["col-span-12"],
-      "content": {
-        "title": "Страховые риски и продукты",
-        "description": "Описание",
-        "sum": 500000,
-        "image": {
-          "src": "insurance.png",
-          "title": "страхование",
-          "format": "webp",
-          "alt": "Страховые риски и продукты",
-          "size": {
-            "width": 400,
-            "height": 300
-          },
-          "sources": [
-            {
-              "src": "insurance.png 1x, insurance-2x.png 2x",
-              "format": "png"
-            }
-          ]
-        },
-        "benefits": [
-          {
-            "label": "Ликвидация организации",
-            "icon": {
-              "icon": "ShieldTickIcon"
-            }
-          },
-          {
-            "label": "Сокращение численности работников организации",
-            "icon": {
-              "icon": "ShieldTickIcon"
-            }
-          }
-        ]
-      }
-    },
     {
       "type": "InsuranceAmountBlock",
       "style": ["col-span-12"],

package/src/components/Footer/MediaButton.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { Picture } from '../../model/Picture';
 import { Img } from '../../ui-kit/Img/Img';
 

package/src/components/Footer/SocialMedia.mobile.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';

package/src/components/Footer/SocialMedia.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useLink } from '../../hooks/useLink';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { LinkProps } from '../../model/LinkProps';
 import type { UniBlockProps } from '../../types';
 import { MediaButton } from './MediaButton';

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

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { BlockVersion } from '../../model/BlockVersion';
+import type { BlockVersion } from '../../model/BlockVersion';
 import type { ListOrientation } from '../../model/ListOrientation';
 import { Button } from '../../ui-kit/Button/Button';
 import { Heading } from '../../ui-kit/Heading/Heading';