@redneckz/wildless-cms-uni-blocks 0.12.11 → 0.12.13

package/src/components/ContentPage/ContentPage.tsx

@@ -1,14 +1,21 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import { renderBlocksList } from '../../BlockRenderer/renderBlockList';
+import { renderChildren } from '../../BlockRenderer/renderChildren';
 import { useBool } from '../../hooks/useBool';
+import { useLocation } from '../../hooks/useLocation';
+import { useSWRResource } from '../../hooks/useSWRResource';
 import type { BlockDecorator } from '../../model/BlockDecorator';
 import type { BlocksRegistry } from '../../model/BlocksRegistry';
 import type { ContentPageDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
+import { projectSettings } from '../../ProjectSettings';
 import { useBlockRouterProvider } from '../../services/BlockRouter/useBlockRouterProvider';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { CookiePopup } from '../../ui-kit/CookiePopup/CookiePopup';
 import { useDialogHandlers } from '../../ui-kit/Dialog/useDialogHandlers';
+import { LocationDialog } from '../../ui-kit/LocationDialog/LocationDialog';
+import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
 import { style } from '../../utils/style';
 import { LikeControl } from '../LikeControl/LikeControl';
 
@@ -18,64 +25,75 @@ interface ContentPageProps extends UniBlockProps {
   blockDecorator?: BlockDecorator;
 }
 
-export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>((props) => {
-  const { className = '', blocksRegistry, blockDecorator, data = {} } = props;
+export const ContentPage: JSXBlock<ContentPageProps> = JSX<ContentPageProps>(
+  ({ className, blocksRegistry, blockDecorator, data = {} }) => {
+    const { style: pageStyle, slots, likeControl, colorPalette = 'pc' } = data;
 
-  const { style: pageStyle, blocks, slots, likeControl, colorPalette = 'pc' } = data;
+    const options: BlockRendererOptions = {
+      key: '',
+      page: data,
+      blocksRegistry,
+      blockDecorator,
+      parent: data,
+    };
 
-  const options: BlockRendererOptions = {
-    key: '',
-    page: data,
-    blocksRegistry,
-    blockDecorator,
-    parent: data,
-  };
+    const sitemap = useSWRResource<SitemapData>(
+      projectSettings.SITEMAP || 'sitemap',
+      data?.fallback,
+    );
+    const [location, onChangeLocation] = useLocation(sitemap?.defaultLocation);
 
-  useBlockRouterProvider();
+    useBlockRouterProvider();
+    const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] =
+      useBool();
 
-  const [isSomeDialogOpened, { setTrue: setSomeDialogOpened, setFalse: resetSomeDialogOpened }] =
-    useBool();
+    useDialogHandlers({
+      onOpen: setSomeDialogOpened,
+      onClose: resetSomeDialogOpened,
+    });
 
-  useDialogHandlers({
-    onOpen: setSomeDialogOpened,
-    onClose: resetSomeDialogOpened,
-  });
-
-  return (
-    <section
-      className={style(
-        'relative',
-        pageStyle,
-        className,
-        isSomeDialogOpened ? 'overflow-hidden h-screen' : '',
-      )}
-      data-theme={colorPalette}
-    >
-      {slots?.header ? (
-        <div className="mb-5 shadow-[0_8px_32px_0px_#00000014]">
-          {renderBlocksList(slots?.header, {
+    return (
+      <section
+        className={style(
+          'relative @container',
+          pageStyle,
+          className,
+          isSomeDialogOpened ? 'overflow-hidden h-screen' : '',
+        )}
+        data-theme={colorPalette}
+      >
+        {slots?.header ? (
+          <div className="relative z-10 mb-5 shadow-[0_8px_32px_0px_#00000014]">
+            {renderBlocksList(slots?.header, {
+              ...options,
+              slotName: 'header',
+              extraProps: { sitemap, location },
+            })}
+          </div>
+        ) : null}
+        <div className="container @lg:grid @lg:grid-cols-12 @lg:gap-1">
+          {renderChildren({ block: data, options, extraProps: { className: 'scroll-mt-12' } })}
+          {renderBlocksList(slots?.footer, {
             ...options,
-            slotName: 'header',
+            slotName: 'footer',
+            extraProps: { sitemap, location },
           })}
         </div>
-      ) : null}
-      <div className="container grid grid-cols-12 gap-1">
-        {renderBlocksList(blocks, options)}
-        {slots?.footer
-          ? renderBlocksList(slots?.footer, {
-              ...options,
-              slotName: 'footer',
-            })
-          : null}
-      </div>
-      {likeControl ? renderLikeControl() : null}
-      <CookiePopup
-        termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
-        personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
-      />
-    </section>
-  );
-});
+        {likeControl ? renderLikeControl() : null}
+        <CookiePopup
+          termLink={{ href: '/pd-policy#cookie', target: '_blank' }}
+          personalDataPolicyLink={{ href: '/pd-policy', target: '_blank' }}
+        />
+        <SearchDialog topItems={sitemap?.topItems} />
+        <LocationDialog
+          currentLocation={location}
+          foreignOffices={sitemap?.foreignOffices}
+          onChangeLocation={onChangeLocation}
+        />
+      </section>
+    );
+  },
+);
 
 ContentPage.childrenTypes = [];
 ContentPage.slots = () => ['header', 'footer'];

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -1,10 +1,11 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { Img } from '../../ui-kit/Img/Img';
+import { Text } from '../../ui-kit/Text/Text';
 import type { ExchangeCurrencyItem } from './ExchangeCurrencyCalculator';
 import { formatCurrency } from './formatCurrency';
 
 const TABLE_HEAD_STYLE = 'text-left text-m font-light text-secondary-text';
-const TABLE_HEAD_STYLE_WITH_PL = `${TABLE_HEAD_STYLE} pl-5xl`;
+const TABLE_HEAD_STYLE_WITH_PADDING = `${TABLE_HEAD_STYLE} pl-5xl`;
 
 const CURRENCY_ICONS_MAP = {
   USD: 'DollarIcon',
@@ -20,9 +21,15 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
   <table className={`h-fit w-fit ${className}`}>
     <thead>
       <tr>
-        <th className={TABLE_HEAD_STYLE}>Валюта</th>
-        <th className={TABLE_HEAD_STYLE_WITH_PL}>Купить</th>
-        <th className={TABLE_HEAD_STYLE_WITH_PL}>Продать</th>
+        <th className={TABLE_HEAD_STYLE}>
+          <Text size="text-m">Валюта</Text>
+        </th>
+        <th className={TABLE_HEAD_STYLE_WITH_PADDING}>
+          <Text size="text-m">Купить</Text>
+        </th>
+        <th className={TABLE_HEAD_STYLE_WITH_PADDING}>
+          <Text size="text-m">Продать</Text>
+        </th>
       </tr>
     </thead>
     <tbody>{exchangeCurrencyItems.map(renderCurrencyRow)}</tbody>
@@ -37,13 +44,22 @@ const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
       <td className="pt-m">
         <div className="flex items-center">
           {currency ? (
-            <Img image={{ icon: CURRENCY_ICONS_MAP[currency] }} width="24" height="24" />
+            <Img
+              image={{ icon: CURRENCY_ICONS_MAP[currency] }}
+              width="24"
+              height="24"
+              className="mr-2"
+            />
           ) : null}
-          <span className="ml-xs">{currency}</span>
+          <Text size="text-h6">{currency}</Text>
         </div>
       </td>
-      <td className="pt-m pl-5xl">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</td>
-      <td className="pt-m pl-5xl">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</td>
+      <td className="pt-m pl-5xl">
+        <Text size="text-h6">{formatCurrency(exchangeCurrencyItem?.saleExchangeRate)}</Text>
+      </td>
+      <td className="pt-m pl-5xl">
+        <Text size="text-h6">{formatCurrency(exchangeCurrencyItem?.buyExchangeRate)}</Text>
+      </td>
     </tr>
   );
 };

package/src/components/ExchangeRateTile/CurrentLocation.tsx

@@ -1,14 +1,17 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { Img } from '../../ui-kit/Img/Img';
+import { Picture } from '../../model/Picture';
+import { RoundedIcon } from '../../ui-kit/Icon/RoundedIcon';
 
 interface CurrentLocationProps {
   className?: string;
   address?: string;
 }
 
+const icon: Picture = { icon: 'GpsIcon' };
+
 export const CurrentLocation = JSX<CurrentLocationProps>(({ className = '', address }) => (
   <div className={`flex gap-s ${className}`}>
-    <Img image={{ icon: 'GpsIcon' }} width="24" height="24" />
+    <RoundedIcon {...icon} iconBgVersion="primary" />
     <div className="space-y-2xs">
       {address ? <p className="text-primary-main text-l">{address}</p> : null}
       <p className="text-secondary-text text-m">Курс указан для заданного офиса</p>

package/src/components/ExchangeRateTile/ExchangeCurrencyCalculator.tsx

@@ -44,7 +44,7 @@ export const ExchangeCurrencyCalculator = JSX<ExchangeCurrencyCalculatorProps>(
     );
 
     return (
-      <div className={`grid gap-[18px] pt-2 ${className}`}>
+      <div className={`grid gap-m pt-2xl ${className}`}>
         {renderInput({
           placeholder: 'Хочу продать',
           rates: currencyRatesSell,

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

@@ -0,0 +1,19 @@
+import '../../setup-fixture';
+
+import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import { ExchangeRateTile } from './ExchangeRateTile';
+
+const button: ButtonProps = {
+  href: 'https://coins.rshb.ru/exchange',
+  text: 'Купить валюту',
+  target: '_blank',
+  version: 'primary',
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <ExchangeRateTile button={button} className="col-span-12" />
+    </div>
+  ),
+};

package/src/components/ExchangeRateTile/ExchangeRateTile.tsx

@@ -31,7 +31,7 @@ export const ExchangeRateTile = JSX<ExchangeRateTileProps>(
           className="h-full"
           title={<Heading headingType="h4" title={title} className="whitespace-pre-wrap" />}
         >
-          <div className="flex gap-6xl">
+          <div className="flex gap-6xl flex-wrap">
             <div>
               {currencyRates ? (
                 <CurrencyTable className="mb-xl" exchangeCurrencyItems={currencyRates} />

package/src/components/Footer/Contacts.tsx

@@ -2,45 +2,41 @@ import { JSX } from '@redneckz/uni-jsx';
 import { Button } from '../../ui-kit/Button/Button';
 import { Text } from '../../ui-kit/Text/Text';
 import type { ContactGroup, ContactInfo } from './FooterContent';
-import { style } from '../../utils/style';
 
 export interface ContactsProps {
   className?: string;
   items?: ContactGroup[];
-  hasButton?: boolean;
 }
 
-export const Contacts = JSX<ContactsProps>(({ className = '', items, hasButton }) => (
-  <div className={style('space-y-xl', className)}>
+export const Contacts = JSX<ContactsProps>(({ className = '', items }) => (
+  <div className={className}>
     {items?.length ? items.map(renderContactsGroup) : null}
-    {hasButton ? (
-      <Button
-        version="primary"
-        className="mb-6 w-full"
-        href="https://www.rshb.ru/feedback/question/"
-        target="_blank"
-        ariaLabel="Обратная связь"
-        text="Обратная связь"
-      />
-    ) : null}
+    <Button
+      version="primary"
+      className="w-full"
+      href="https://www.rshb.ru/feedback/question/"
+      target="_blank"
+      ariaLabel="Обратная связь"
+      text="Обратная связь"
+    />
   </div>
 ));
 
 const renderContactsGroup = (item: ContactGroup, i: number) => (
-  <div className="space-y-m" key={String(i)}>
-    <div className="">
+  <div className="mb-m" key={String(i)}>
+    <div className="mb-m">
       <Text size="text-l" font="font-medium">
         {item?.title}
       </Text>
     </div>
-    <div className="space-y-m">{item.items?.map(renderContact)}</div>
+    <div>{item.items?.map(renderContact)}</div>
   </div>
 );
 
 const renderContact = (item: ContactInfo, index: number) => (
-  <div className="space-y-2xs" key={String(index)}>
+  <div className="mb-m" key={String(index)}>
     <div>{renderText(item.type, item.text)}</div>
-    <div className="text-s font-light text-secondary-text">{item.description}</div>
+    <div className="mt-2xs text-s font-light text-secondary-text">{item.description}</div>
   </div>
 );
 

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

@@ -1,11 +1,13 @@
 import '../../setup-fixture';
 
+import type { SitemapData } from '../../services/sitemap/SitemapData';
+import sitemap from '../Header/sitemap.wcms-resource.json';
 import { Footer } from './Footer';
 
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Footer className="col-span-12" />
+      <Footer className="col-span-12" sitemap={sitemap as SitemapData} />
     </div>
   ),
 };

package/src/components/Footer/Footer.fixture.tsx

@@ -1,28 +1,15 @@
 import '../../setup-fixture';
 
+import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { SearchDialog } from '../../ui-kit/SearchDialog/SearchDialog';
+import sitemap from '../Header/sitemap.wcms-resource.json';
 import { Footer } from './Footer';
 
-const topItems = [
-  {
-    href: '/natural',
-    text: 'Частным клиентам',
-  },
-  {
-    text: 'Бизнес клиентам',
-    href: '/business',
-  },
-  {
-    text: 'Экосистема Своё',
-    href: '/svoe',
-  },
-];
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
-      <Footer className="col-span-12" />
-      <SearchDialog topItems={topItems} />
+      <Footer className="col-span-12" sitemap={sitemap as SitemapData} />
+      <SearchDialog topItems={(sitemap as SitemapData).topItems} />
     </div>
   ),
 };

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

@@ -1,48 +1,58 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useSWRResource } from '../../hooks/useSWRResource';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { LinkCommonProps } from '../../model/LinkProps';
 import { projectSettings } from '../../ProjectSettings';
-import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Button } from '../../ui-kit/Button/Button';
 import { LinkList } from '../../ui-kit/LinkList/LinkList';
 import { RollupItem } from '../RollupItem/RollupItem';
 import { Contacts } from './Contacts';
 import { findIconByHref } from './findIconByHref';
-import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
+import type { FooterProps } from './FooterProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
+import { Text } from '../../ui-kit/Text/Text';
 
-export interface FooterProps extends FooterContent, UniBlockProps {}
-
-export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
-  const fallback = rest.options?.page?.fallback;
-
-  const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
-  const { relatedEnterprises, contacts, socialMedia, mobileApps, horizontalNavigationTitle } =
-    useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
+export const Footer = JSX<FooterProps>(({ className, sitemap, ...rest }) => {
+  const {
+    relatedEnterprises,
+    contacts,
+    socialMedia,
+    mobileApps,
+    horizontalNavigationTitle,
+    documents,
+  } = useSWRResource<FooterDataProps>(
+    projectSettings.FOOTER || 'footer',
+    rest.options?.page?.fallback,
+  );
 
   return (
-    <BlockWrapper tag="footer" className={className} defaultPadding="px-4 py-6" {...rest}>
-      <div className="mb-4 pb-5 border-b border-main-divider">
-        {sitemap.topItems?.map((item, i) => (
+    <BlockWrapper tag="footer" className={className} {...rest}>
+      <div className="mb-lg pb-xs border-b border-main-divider">
+        {sitemap?.topItems?.map((item, i) => (
           <RollupItem key={String(i)} label={item?.text} labelIcon={item?.icon}>
-            <LinkList items={item.items} className="my-3" />
+            <LinkList items={item.items} />
           </RollupItem>
         ))}
       </div>
       <Contacts className="overflow-hidden" items={contacts} />
-      <SocialMedia className="mb-4" media={socialMedia} />
-      {mobileApps?.map(renderButton)}
+      <div className="mt-xl">
+        <SocialMedia className="mb-xl" media={socialMedia} buttonSize="stretched">
+          Соцсети
+        </SocialMedia>
+        <Text size="text-s" font="font-light" color="text-secondary-text">
+          Мобильное приложение
+        </Text>
+        <div className="mt-xs">{mobileApps?.map(renderButton)}</div>
+      </div>
       <HorizontalNavigation
-        className="pt-m pb-2xl border-y border-main-divider"
+        className="py-lg border-y border-main-divider"
         title={horizontalNavigationTitle}
         links={relatedEnterprises}
       />
-      <TextInformation />
+      <TextInformation links={documents} />
     </BlockWrapper>
   );
 });
@@ -53,7 +63,7 @@ const renderButton = ({ href = '/' }: LinkCommonProps, i: number) => {
   return (
     <Button
       key={String(i)}
-      className="w-full mb-4"
+      className="w-full mb-lg"
       text={label}
       version="secondary"
       href={href}

package/src/components/Footer/Footer.tsx

@@ -1,41 +1,35 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useSWRResource } from '../../hooks/useSWRResource';
-import type { UniBlockProps } from '../../model/JSXBlock';
 import { projectSettings } from '../../ProjectSettings';
-import type { SitemapData } from '../../services/sitemap/SitemapData';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
 import { Logo } from '../../ui-kit/Logo/Logo';
 import { SearchBar } from '../../ui-kit/SearchBar/SearchBar';
 import { Sitemap } from '../../ui-kit/Sitemap/Sitemap';
 import { Contacts } from './Contacts';
-import type { FooterContent } from './FooterContent';
 import type { FooterDataProps } from './FooterDataProps';
+import type { FooterProps } from './FooterProps';
 import { HorizontalNavigation } from './HorizontalNavigation';
 import { SocialMedia } from './SocialMedia';
 import { TextInformation } from './TextInformation';
 
-const LEFT_COL_WIDTH_FULL_HD = 'w-[204px]';
+const LEFT_COL_WIDTH = 'w-52';
 
-export interface FooterProps extends FooterContent, UniBlockProps {}
-
-export const Footer = JSX<FooterProps>(({ className = '', ...rest }) => {
-  const fallback = rest.options?.page?.fallback;
-
-  const sitemap = useSWRResource<SitemapData>(projectSettings.SITEMAP || 'sitemap', fallback);
+export const Footer = JSX<FooterProps>(({ className, sitemap, ...rest }) => {
   const { documents, relatedEnterprises, contacts, socialMedia, mobileApps, logo } =
-    useSWRResource<FooterDataProps>(projectSettings.FOOTER || 'footer', fallback);
+    useSWRResource<FooterDataProps>(
+      projectSettings.FOOTER || 'footer',
+      rest.options?.page?.fallback,
+    );
 
   return (
     <BlockWrapper tag="footer" className={className} {...rest}>
-      <div className="flex items-stretch gap-6xl xl:gap-3xl pb-3xl ">
-        <Logo className={LEFT_COL_WIDTH_FULL_HD} logo={logo} />
+      <div className="flex items-stretch gap-3xl pb-3xl ">
+        <Logo className={LEFT_COL_WIDTH} logo={logo} />
         <SearchBar className="grow" />
       </div>
-      <div className="flex items-stretch gap-6xl xl:gap-3xl">
-        <div
-          className={`${LEFT_COL_WIDTH_FULL_HD} flex flex-col shrink-0 overflow-hidden space-y-xl`}
-        >
-          <Contacts items={contacts} hasButton />
+      <div className="flex items-stretch gap-6xl">
+        <div className={`${LEFT_COL_WIDTH} flex flex-col shrink-0 overflow-hidden space-y-xl`}>
+          <Contacts items={contacts} />
           <SocialMedia media={socialMedia}>Соцсети</SocialMedia>
           <SocialMedia media={mobileApps}>Мобильное приложение</SocialMedia>
         </div>

package/src/components/Footer/FooterProps.ts

@@ -0,0 +1,7 @@
+import type { UniBlockProps } from '../../model/JSXBlock';
+import type { SitemapData } from '../../services/sitemap/SitemapData';
+import type { FooterContent } from './FooterContent';
+
+export interface FooterProps extends FooterContent, UniBlockProps {
+  sitemap?: SitemapData;
+}

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

@@ -9,11 +9,18 @@ export interface HorizontalNavigationProps extends FooterLink, TitleProps {}
 export const HorizontalNavigation = JSX<HorizontalNavigationProps>(
   ({ title, links, className = '' }) => (
     <div className={className}>
-      <Text size="text-h6">{title}</Text>
+      <Text size="text-l" font="font-normal">
+        {title}
+      </Text>
       {links?.length ? (
-        <div className="flex flex-col gap-6 mt-7">
+        <div className="flex flex-col gap-lg mt-lg">
           {links.map((_, i) => (
-            <HorizontalNavigationLink key={String(i)} index={i} {..._} />
+            <HorizontalNavigationLink
+              className="text-l font-light"
+              key={String(i)}
+              index={i}
+              {..._}
+            />
           ))}
         </div>
       ) : null}

package/src/components/Footer/HorizontalNavigation.tsx

@@ -9,7 +9,7 @@ export const HorizontalNavigation = JSX<HorizontalNavigationProps>(({ className
   return (
     <div className={className}>
       {links?.length ? (
-        <div className="flex justify-between items-center gap-5 py-5 border-solid border-x-0 border-y border-y-main-divider">
+        <div className="flex justify-between items-center gap-lg py-lg border-solid border-x-0 border-y border-y-main-divider">
           {links.map((_, i) => (
             <HorizontalNavigationLink
               key={String(i)}

package/src/components/Footer/MediaButton.tsx

@@ -7,7 +7,7 @@ import { style } from '../../utils/style';
 import { buttonStylesWithText } from './buttonStylesWithText';
 import { findIconByHref } from './findIconByHref';
 
-export type ButtonSize = 'default' | 'small';
+export type ButtonSize = 'default' | 'stretched';
 
 interface MediaButtonProps extends ButtonProps, IconProps {
   buttonSize?: ButtonSize;

package/src/components/Footer/SocialMedia.tsx

@@ -1,8 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 import { Text } from '../../ui-kit/Text/Text';
-import type { ButtonSize } from './MediaButton';
 import { MediaButton } from './MediaButton';
+import type { ButtonSize } from './MediaButton';
+import { style } from '../../utils/style';
 
 export interface SocialMediaProps {
   className?: string;
@@ -12,15 +13,17 @@ export interface SocialMediaProps {
 
 export const SocialMedia = JSX<SocialMediaProps>(
   ({ className = '', media, children, buttonSize }) => (
-    <div className="font-sans">
-      <div className={`flex gap-1 ${className}`}>
+    <div className="flex flex-col sm:flex-col-reverse gap-xs">
+      {children ? (
+        <Text size="text-s" font="font-light" color="text-secondary-text">
+          {children}
+        </Text>
+      ) : null}
+      <div className={style('flex gap-xs', className)}>
         {media?.map((_, index) => (
           <MediaButton key={String(index)} buttonSize={buttonSize} {..._} />
         ))}
       </div>
-      <Text size="text-s" font="font-light" color="text-secondary-text">
-        {children}
-      </Text>
     </div>
   ),
 );

package/src/components/Footer/TextInformation.tsx

@@ -5,13 +5,13 @@ import { TextInformationLink } from './TextInformationLink';
 
 export const TextInformation = JSX<FooterLink>(({ className = '', links }) => (
   <div className={className}>
-    <div className="pt-4 xl:pt-5">
+    <div className="pt-lg">
       <Text size="text-xs" font="font-light" color="text-secondary-text">
         {`\u00a9\u00A02000-${new Date().getFullYear()}\u00A0АО \u00ABРоссельхозбанк\u00BB Генеральная лицензия Банка России \u2116\u00A03349 от\u00A012.08.2015\u00A0г.`}
       </Text>
     </div>
     {links?.length ? (
-      <div className="flex justify-start items-start gap-5 pt-4">
+      <div className="flex flex-col sm:flex-row justify-start items-start gap-x-lg gap-y-xs pt-lg">
         {links.map((_, i) => (
           <TextInformationLink key={String(i)} index={i} {..._} />
         ))}

package/src/components/Footer/buttonSizeStyles.mobile.ts

@@ -0,0 +1,6 @@
+import { ButtonSize } from './MediaButton';
+
+export const buttonSizeStyles: { [key in ButtonSize]: string } = {
+  default: 'w-24 h-14',
+  stretched: 'flex-1 h-14',
+};

package/src/components/Footer/buttonSizeStyles.ts

@@ -0,0 +1,6 @@
+import { ButtonSize } from './MediaButton';
+
+export const buttonSizeStyles: { [key in ButtonSize]: string } = {
+  default: 'w-14 h-14',
+  stretched: 'flex-1 h-14',
+};