From 773d039f2472136f582c42923351454fb35e9b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9A=D1=81=D0=B5=D0=BD=D0=B8=D1=8F?=
 <31247233+kseniya57@users.noreply.github.com>
Date: Tue, 12 Mar 2024 18:35:51 +0300
Subject: [PATCH] feat(Footer): add footer components (#207)

Co-authored-by: kseniyakuzina <kseniyakuzina@yandex-team.ru>
---
 README.md                                     |   2 +
 src/components/Footer/MenuItem/MenuItem.scss  |  29 +++++
 src/components/Footer/MenuItem/MenuItem.tsx   |  21 ++++
 src/components/Footer/README.md               | 113 ++++++++++++++++++
 src/components/Footer/desktop/Footer.scss     |  66 ++++++++++
 src/components/Footer/desktop/Footer.tsx      |  94 +++++++++++++++
 .../desktop/__stories__/Footer.stories.tsx    |  39 ++++++
 .../desktop/__stories__/FooterShowcase.scss   |  28 +++++
 .../desktop/__stories__/FooterShowcase.tsx    |  18 +++
 .../Footer/desktop/__stories__/moc.ts         |  38 ++++++
 .../desktop/constants/moreItemsPopupProps.ts  |   5 +
 src/components/Footer/desktop/index.ts        |   1 +
 src/components/Footer/index.ts                |   3 +
 src/components/Footer/mobile/Footer.scss      |  73 +++++++++++
 src/components/Footer/mobile/Footer.tsx       |  95 +++++++++++++++
 .../__stories__/MobileFooter.stories.tsx      |  41 +++++++
 .../__stories__/MobileFooterShowcase.scss     |  28 +++++
 .../__stories__/MobileFooterShowcase.tsx      |  18 +++
 .../Footer/mobile/__stories__/moc.ts          |  38 ++++++
 src/components/Footer/mobile/index.ts         |   1 +
 src/components/Footer/types.ts                |  20 ++++
 src/components/index.ts                       |   1 +
 .../README.md                                 |  12 ++
 .../index.ts                                  |   1 +
 .../useOverflowingHorizontalListItems.ts      |  88 ++++++++++++++
 25 files changed, 873 insertions(+)
 create mode 100644 src/components/Footer/MenuItem/MenuItem.scss
 create mode 100644 src/components/Footer/MenuItem/MenuItem.tsx
 create mode 100644 src/components/Footer/README.md
 create mode 100644 src/components/Footer/desktop/Footer.scss
 create mode 100644 src/components/Footer/desktop/Footer.tsx
 create mode 100644 src/components/Footer/desktop/__stories__/Footer.stories.tsx
 create mode 100644 src/components/Footer/desktop/__stories__/FooterShowcase.scss
 create mode 100644 src/components/Footer/desktop/__stories__/FooterShowcase.tsx
 create mode 100644 src/components/Footer/desktop/__stories__/moc.ts
 create mode 100644 src/components/Footer/desktop/constants/moreItemsPopupProps.ts
 create mode 100644 src/components/Footer/desktop/index.ts
 create mode 100644 src/components/Footer/index.ts
 create mode 100644 src/components/Footer/mobile/Footer.scss
 create mode 100644 src/components/Footer/mobile/Footer.tsx
 create mode 100644 src/components/Footer/mobile/__stories__/MobileFooter.stories.tsx
 create mode 100644 src/components/Footer/mobile/__stories__/MobileFooterShowcase.scss
 create mode 100644 src/components/Footer/mobile/__stories__/MobileFooterShowcase.tsx
 create mode 100644 src/components/Footer/mobile/__stories__/moc.ts
 create mode 100644 src/components/Footer/mobile/index.ts
 create mode 100644 src/components/Footer/types.ts
 create mode 100644 src/hooks/useOverflowingHorizontalListItems/README.md
 create mode 100644 src/hooks/useOverflowingHorizontalListItems/index.ts
 create mode 100644 src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts

diff --git a/README.md b/README.md
index 9e457ed..d0d7f91 100644
--- a/README.md
+++ b/README.md
@@ -29,6 +29,8 @@ npm install --dev @gravity-ui/uikit@^3.0.2 @bem-react/classname@1.6.0 react@^16.
 - AsideFallback
 - Logo
 - MobileLogo
+- Footer
+- MobileFooter
 
 ## Optimization
 
diff --git a/src/components/Footer/MenuItem/MenuItem.scss b/src/components/Footer/MenuItem/MenuItem.scss
new file mode 100644
index 0000000..6837488
--- /dev/null
+++ b/src/components/Footer/MenuItem/MenuItem.scss
@@ -0,0 +1,29 @@
+@use '../../variables';
+
+@import '../../../../styles/mixins';
+
+$block: '.#{variables.$ns}footer-menu-item';
+
+#{$block} {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: stretch;
+
+    height: 100%;
+
+    .g-menu__item-content {
+        @include overflow-ellipsis(ellipsis);
+
+        @include text-body-1;
+        color: var(--g-color-text-secondary);
+    }
+
+    &[class]:hover {
+        background-color: inherit;
+
+        &[href] .g-menu__item-content {
+            color: var(--g-color-text-link-hover);
+        }
+    }
+}
diff --git a/src/components/Footer/MenuItem/MenuItem.tsx b/src/components/Footer/MenuItem/MenuItem.tsx
new file mode 100644
index 0000000..a163e61
--- /dev/null
+++ b/src/components/Footer/MenuItem/MenuItem.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import type {FC} from 'react';
+
+import {Menu} from '@gravity-ui/uikit';
+
+import {block} from '../../utils/cn';
+import {FooterMenuItem} from '../types';
+
+import './MenuItem.scss';
+
+const b = block('footer-menu-item');
+
+export type MenuItemProps = FooterMenuItem;
+
+export const MenuItem: FC<MenuItemProps> = ({text, className, ...menuItemProps}) => {
+    return (
+        <Menu.Item className={b(null, className)} {...menuItemProps}>
+            {text}
+        </Menu.Item>
+    );
+};
diff --git a/src/components/Footer/README.md b/src/components/Footer/README.md
new file mode 100644
index 0000000..e718ad3
--- /dev/null
+++ b/src/components/Footer/README.md
@@ -0,0 +1,113 @@
+## Footer and MobileFooter
+
+The page footer components. Use `Footer` for the desktop version and `MobileFooter` for the mobile version.
+Both components have the same properties.
+
+### PropTypes
+
+| Property                                                                                 | Type                | Required | Default | Description                   |
+| :--------------------------------------------------------------------------------------- | :------------------ | :------: | :------ | :---------------------------- |
+| className                                                                                | `String`            |          |         | Footer class name             |
+| [menuItems](https://github.com/gravity-ui/uikit/tree/main/src/components/Menu)           | `FooterMenuItem[]`  |          |         | List of footer menu items     |
+| withDivider                                                                              | `Boolean`           |          |         | Show top border on the footer |
+| moreButtonTitle                                                                          | `String`            |          |         | The more items button title   |
+| [view](#view)                                                                            | `normal` or `clear` |          |         | The footer view               |
+| [logo](https://preview.gravity-ui.com/navigation/?path=/story/components-logo--showcase) | `LogoProps`         |          |         | The service logo properties   |
+| logoWrapperClassName                                                                     | `string`            |          |         | The logo wrapper class name   |
+| copyright                                                                                | `string`            |          |         | The copyright                 |
+
+### view
+
+- normal - white background and all the configured elements
+- clear - transparent background and only the copyright
+
+### Usage
+
+See demos
+
+- Desktop: `src/components/Footer/desktop/__stories__/FooterShowcase.tsx`,
+- Mobile: `src/components/Footer/mobile/__stories__/MobileFooterShowcase.tsx`.
+
+### Examples
+
+#### Footer
+
+```tsx
+import { Footer } from '@gravity-ui/navigation';
+
+<Footer
+    className="page-footer"
+    withDivider={false}
+    moreButtonTitle="Show more"
+    copyright={`@ ${new Date().getFullYear()} "My Service"`}
+    logo={{
+        icon: logoIcon,
+        iconSize: 24,
+        text: 'My Service'
+    }}
+    menuItems={[
+        {
+            text: 'About Service',
+            href: 'https://gravity-ui.com/',
+            target: 'blank',
+        },
+        {
+            text: 'Documentation',
+            href: 'https://gravity-ui.com/',
+            target: 'blank',
+        },
+        {
+            text: 'Confidential',
+            href: 'https://gravity-ui.com/',
+            target: 'blank',
+        },
+    ]}
+/>
+
+<Footer
+    className="page-footer"
+    copyright={`@ ${new Date().getFullYear()} "My Service"`}
+    view="clear"
+/>
+```
+
+#### MobileFooter
+
+```tsx
+import { MobileFooter } from '@gravity-ui/navigation';
+
+<MobileFooter
+    className="page-footer"
+    withDivider={false}
+    moreButtonTitle="Show more"
+    copyright={`@ ${new Date().getFullYear()} "My Service"`}
+    logo={{
+        icon: logoIcon,
+        iconSize: 24,
+        text: 'My Service'
+    }}
+    menuItems={[
+        {
+            text: 'About Service',
+            href: 'https://gravity-ui.com/',
+            target: 'blank',
+        },
+        {
+            text: 'Documentation',
+            href: 'https://gravity-ui.com/',
+            target: 'blank',
+        },
+        {
+            text: 'Confidential',
+            href: 'https://gravity-ui.com/',
+            target: 'blank',
+        },
+    ]}
+/>
+
+<MobileFooter
+    className="page-footer"
+    copyright={`@ ${new Date().getFullYear()} "My Service"`}
+    view="clear"
+/>
+```
diff --git a/src/components/Footer/desktop/Footer.scss b/src/components/Footer/desktop/Footer.scss
new file mode 100644
index 0000000..0dbcef1
--- /dev/null
+++ b/src/components/Footer/desktop/Footer.scss
@@ -0,0 +1,66 @@
+@use '../../variables';
+
+@import '../../../../styles/mixins';
+
+$block: '.#{variables.$ns}footer';
+
+#{$block}_desktop {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: 0 var(--g-spacing-6) 0 var(--g-spacing-3);
+    gap: var(--g-spacing-6);
+    background: var(--g-color-base-background);
+
+    #{$block} {
+        &__menu {
+            display: flex;
+            flex: 1;
+            align-items: center;
+            align-self: stretch;
+            min-width: 0;
+
+            visibility: hidden;
+
+            &_measured {
+                visibility: visible;
+            }
+        }
+
+        &__list[class] {
+            background-color: inherit;
+            display: flex;
+
+            height: 100%;
+            padding: 0;
+        }
+
+        &__more-button svg {
+            color: var(--g-color-text-secondary);
+        }
+
+        &__right {
+            display: flex;
+            align-items: center;
+            gap: var(--g-spacing-5);
+        }
+
+        &__copyright {
+            @include text-body-1;
+            color: var(--g-color-text-secondary);
+            white-space: nowrap;
+
+            &_small {
+                @include text-caption-2;
+            }
+        }
+    }
+}
+
+#{$block}_with-divider {
+    border-top: 1px solid var(--g-color-line-generic);
+}
+
+#{$block}_view_clear {
+    background: transparent;
+}
diff --git a/src/components/Footer/desktop/Footer.tsx b/src/components/Footer/desktop/Footer.tsx
new file mode 100644
index 0000000..d0b77d8
--- /dev/null
+++ b/src/components/Footer/desktop/Footer.tsx
@@ -0,0 +1,94 @@
+import React, {useMemo, useRef} from 'react';
+import type {FC} from 'react';
+
+import {DropdownMenu, Menu} from '@gravity-ui/uikit';
+import type {DropdownMenuItem} from '@gravity-ui/uikit';
+
+import {useOverflowingHorizontalListItems} from '../../../hooks/useOverflowingHorizontalListItems';
+import {Logo} from '../../Logo';
+import {block} from '../../utils/cn';
+import {MenuItem} from '../MenuItem/MenuItem';
+import {FooterProps} from '../types';
+
+import {moreItemsPopupProps} from './constants/moreItemsPopupProps';
+
+import './Footer.scss';
+
+const b = block('footer');
+
+export const Footer: FC<FooterProps> = ({
+    className,
+    menuItems: providedMenuItems,
+    withDivider,
+    moreButtonTitle,
+    view = 'normal',
+    logo,
+    logoWrapperClassName,
+    copyright,
+}) => {
+    const menuContainerRef = useRef<HTMLDivElement>(null);
+
+    const menuItems = view === 'clear' ? undefined : providedMenuItems;
+
+    const {visibleItems, hiddenItems, measured} = useOverflowingHorizontalListItems({
+        containerRef: menuContainerRef,
+        items: menuItems,
+        itemSelector: `.${b('menu-item')}`,
+        moreButtonWidth: 28,
+    });
+
+    const moreButtonProps = useMemo(
+        () => ({
+            title: moreButtonTitle,
+        }),
+        [moreButtonTitle],
+    );
+
+    const dropdownMenuItems = useMemo(
+        () =>
+            hiddenItems.map(
+                (item) =>
+                    ({
+                        ...item,
+                        action: item.onClick,
+                    }) as DropdownMenuItem,
+            ),
+        [hiddenItems],
+    );
+
+    const shouldRenderLogo = view !== 'clear' && Boolean(logo);
+
+    return (
+        <footer className={b({desktop: true, 'with-divider': withDivider, view}, className)}>
+            <div className={b('menu', {measured})} ref={menuContainerRef}>
+                {visibleItems.length > 0 && (
+                    <Menu className={b('list')}>
+                        {visibleItems.map((item, index) => (
+                            <MenuItem
+                                key={index}
+                                {...item}
+                                className={b('menu-item', item.className)}
+                            />
+                        ))}
+                    </Menu>
+                )}
+                {dropdownMenuItems.length > 0 && (
+                    <DropdownMenu
+                        items={dropdownMenuItems}
+                        switcherWrapperClassName={b('more-button')}
+                        popupProps={moreItemsPopupProps}
+                        defaultSwitcherProps={moreButtonProps}
+                    />
+                )}
+            </div>
+            <div className={b('right')}>
+                <small className={b('copyright', {small: !menuItems?.length})}>{copyright}</small>
+                {shouldRenderLogo && (
+                    <div className={logoWrapperClassName}>
+                        <Logo {...logo!} />
+                    </div>
+                )}
+            </div>
+        </footer>
+    );
+};
diff --git a/src/components/Footer/desktop/__stories__/Footer.stories.tsx b/src/components/Footer/desktop/__stories__/Footer.stories.tsx
new file mode 100644
index 0000000..1f115b7
--- /dev/null
+++ b/src/components/Footer/desktop/__stories__/Footer.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import {Meta, StoryFn} from '@storybook/react';
+
+import {Footer} from '..';
+import {FooterProps} from '../../types';
+
+import {FooterShowcase} from './FooterShowcase';
+import {longMenuItems, menuItems} from './moc';
+
+import logoIcon from '../../../../../.storybook/assets/logo.svg';
+
+export default {
+    title: 'components/Footer',
+    component: Footer,
+    args: {
+        withDivider: false,
+        menuItems: menuItems,
+        moreButtonTitle: 'Show more',
+        copyright: `@ ${new Date().getFullYear()} "My Service"`,
+        logo: {
+            icon: logoIcon,
+            iconSize: 24,
+            text: 'My Service',
+        },
+    },
+} as Meta<typeof Footer>;
+
+const ShowcaseTemplate: StoryFn<FooterProps> = (args) => <FooterShowcase {...args} />;
+export const Showcase = ShowcaseTemplate.bind({});
+
+const ManyItemsTemplate: StoryFn<FooterProps> = (args) => (
+    <FooterShowcase {...args} menuItems={longMenuItems} />
+);
+export const ManyItems = ManyItemsTemplate.bind({});
+
+const ClearViewTemplate: StoryFn<FooterProps> = (args) => <FooterShowcase {...args} view="clear" />;
+
+export const ClearView = ClearViewTemplate.bind({});
diff --git a/src/components/Footer/desktop/__stories__/FooterShowcase.scss b/src/components/Footer/desktop/__stories__/FooterShowcase.scss
new file mode 100644
index 0000000..0b49f46
--- /dev/null
+++ b/src/components/Footer/desktop/__stories__/FooterShowcase.scss
@@ -0,0 +1,28 @@
+.footer-showcase {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    height: 100vh;
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    &__body {
+        flex: 1;
+    }
+
+    &_mobile {
+        border: none;
+
+        .footer-demo__footer {
+            position: fixed;
+            bottom: 36px;
+            right: 0;
+            left: 0;
+        }
+    }
+}
diff --git a/src/components/Footer/desktop/__stories__/FooterShowcase.tsx b/src/components/Footer/desktop/__stories__/FooterShowcase.tsx
new file mode 100644
index 0000000..37fe4f8
--- /dev/null
+++ b/src/components/Footer/desktop/__stories__/FooterShowcase.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {cn} from '../../../utils/cn';
+import type {FooterProps} from '../../types';
+import {Footer} from '../Footer';
+
+import './FooterShowcase.scss';
+
+const b = cn('footer-showcase');
+
+export function FooterShowcase({className, ...footerProps}: FooterProps) {
+    return (
+        <div className={b()}>
+            <div className={b('body')} />
+            <Footer className={b('footer', className)} {...footerProps} />
+        </div>
+    );
+}
diff --git a/src/components/Footer/desktop/__stories__/moc.ts b/src/components/Footer/desktop/__stories__/moc.ts
new file mode 100644
index 0000000..dc0f84c
--- /dev/null
+++ b/src/components/Footer/desktop/__stories__/moc.ts
@@ -0,0 +1,38 @@
+import {FooterMenuItem} from '../../types';
+
+export const menuItems: FooterMenuItem[] = [
+    {
+        text: 'About Service',
+        href: 'https://gravity-ui.com/',
+        target: 'blank',
+    },
+    {
+        text: 'Documentation',
+        href: 'https://gravity-ui.com/',
+        target: 'blank',
+    },
+    {
+        text: 'Confidential',
+        href: 'https://gravity-ui.com/',
+        target: 'blank',
+    },
+];
+
+export const longMenuItems = [
+    ...menuItems,
+    {
+        text: 'Long text of the menu item',
+    },
+    {
+        text: 'Very long text of the menu item',
+    },
+    {
+        text: 'Very very long text of the menu item',
+    },
+    {
+        text: 'Very very very long text of the menu item',
+    },
+    {
+        text: 'Very very very very long text of the menu item',
+    },
+];
diff --git a/src/components/Footer/desktop/constants/moreItemsPopupProps.ts b/src/components/Footer/desktop/constants/moreItemsPopupProps.ts
new file mode 100644
index 0000000..12860c8
--- /dev/null
+++ b/src/components/Footer/desktop/constants/moreItemsPopupProps.ts
@@ -0,0 +1,5 @@
+import {PopupProps} from '@gravity-ui/uikit';
+
+export const moreItemsPopupProps: PopupProps = {
+    placement: 'top-start',
+};
diff --git a/src/components/Footer/desktop/index.ts b/src/components/Footer/desktop/index.ts
new file mode 100644
index 0000000..ddcc5a9
--- /dev/null
+++ b/src/components/Footer/desktop/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/Footer/index.ts b/src/components/Footer/index.ts
new file mode 100644
index 0000000..98fe12c
--- /dev/null
+++ b/src/components/Footer/index.ts
@@ -0,0 +1,3 @@
+export * from './desktop';
+export * from './mobile';
+export type {FooterMenuItem, FooterProps} from './types';
diff --git a/src/components/Footer/mobile/Footer.scss b/src/components/Footer/mobile/Footer.scss
new file mode 100644
index 0000000..ed6491a
--- /dev/null
+++ b/src/components/Footer/mobile/Footer.scss
@@ -0,0 +1,73 @@
+@use '../../variables';
+
+@import '../../../../styles/mixins';
+
+$block: '.#{variables.$ns}footer';
+
+#{$block}_mobile {
+    display: flex;
+    flex-direction: column;
+    padding: var(--g-spacing-1) var(--g-spacing-6) var(--g-spacing-3) var(--g-spacing-3);
+    background: var(--g-color-base-background);
+
+    #{$block} {
+        &_with-divider {
+            border-top: 1px solid var(--g-color-line-generic);
+        }
+
+        &__menu {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: var(--g-spacing-1);
+
+            visibility: hidden;
+
+            &_measured {
+                visibility: visible;
+            }
+        }
+
+        &__list[class] {
+            background-color: inherit;
+            padding: 0;
+            display: flex;
+        }
+
+        &__menu-item {
+            padding: var(--g-spacing-2) var(--g-spacing-3);
+        }
+
+        &__bottom-row {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        &__copyright {
+            @include text-caption-2;
+            color: var(--g-color-text-secondary);
+            white-space: nowrap;
+            padding: 0 var(--g-spacing-3);
+        }
+    }
+}
+
+#{$block}__modal {
+    #{$block} {
+        &__menu-item {
+            height: 48px;
+
+            @include text-body-2;
+            color: var(--g-color-text-primary);
+        }
+    }
+}
+
+#{$block}_view_clear {
+    background: transparent;
+
+    #{$block}__bottom-row {
+        justify-content: flex-end;
+    }
+}
diff --git a/src/components/Footer/mobile/Footer.tsx b/src/components/Footer/mobile/Footer.tsx
new file mode 100644
index 0000000..0fd4a73
--- /dev/null
+++ b/src/components/Footer/mobile/Footer.tsx
@@ -0,0 +1,95 @@
+import React, {useCallback, useRef, useState} from 'react';
+import type {FC} from 'react';
+
+import {Ellipsis} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Sheet} from '@gravity-ui/uikit';
+
+import {useOverflowingHorizontalListItems} from '../../../hooks/useOverflowingHorizontalListItems';
+import {Logo} from '../../Logo';
+import {block} from '../../utils/cn';
+import {MenuItem} from '../MenuItem/MenuItem';
+import {FooterMenuItem, FooterProps} from '../types';
+
+import './Footer.scss';
+
+const b = block('footer');
+
+const modalId = 'footer-more-items';
+
+export const MobileFooter: FC<FooterProps> = ({
+    className,
+    menuItems: providedMenuItems,
+    withDivider,
+    moreButtonTitle,
+    view = 'normal',
+    logo,
+    logoWrapperClassName,
+    copyright,
+}) => {
+    const [moreItemsMenuVisible, setMoreItemsMenuVisible] = useState(false);
+    const menuContainerRef = useRef<HTMLDivElement>(null);
+
+    const handleOpenMoreItemsMenu = useCallback(() => {
+        setMoreItemsMenuVisible(true);
+    }, []);
+
+    const handleCloseMoreItemsMenu = useCallback(() => {
+        setMoreItemsMenuVisible(false);
+    }, []);
+
+    const menuItems = view === 'clear' ? undefined : providedMenuItems;
+
+    const {visibleItems, hiddenItems, measured} = useOverflowingHorizontalListItems({
+        containerRef: menuContainerRef,
+        items: menuItems,
+        itemSelector: `.${b('menu-item')}`,
+        moreButtonWidth: 28,
+    });
+
+    const renderMenu = (items: FooterMenuItem[]) => (
+        <Menu className={b('list')}>
+            {items.map((item, index) => (
+                <MenuItem key={index} {...item} className={b('menu-item', item.className)} />
+            ))}
+        </Menu>
+    );
+
+    const shouldRenderLogo = view !== 'clear' && Boolean(logo);
+
+    return (
+        <footer className={b({mobile: true, 'with-divider': withDivider, view}, className)}>
+            <div className={b('menu', {measured})} ref={menuContainerRef}>
+                {visibleItems.length > 0 && renderMenu(visibleItems)}
+                {hiddenItems.length > 0 && (
+                    <>
+                        <Button
+                            view="flat-secondary"
+                            size="l"
+                            onClick={handleOpenMoreItemsMenu}
+                            title={moreButtonTitle}
+                        >
+                            <Icon data={Ellipsis} size={16} />
+                        </Button>
+                        <Sheet
+                            id={modalId}
+                            visible={moreItemsMenuVisible}
+                            className={b('modal')}
+                            contentClassName={b('modal-content')}
+                            onClose={handleCloseMoreItemsMenu}
+                        >
+                            {renderMenu(hiddenItems)}
+                        </Sheet>
+                    </>
+                )}
+            </div>
+            <div className={b('bottom-row')}>
+                <small className={b('copyright')}>{copyright}</small>
+                {shouldRenderLogo && (
+                    <div className={logoWrapperClassName}>
+                        <Logo {...logo!} />
+                    </div>
+                )}
+            </div>
+        </footer>
+    );
+};
diff --git a/src/components/Footer/mobile/__stories__/MobileFooter.stories.tsx b/src/components/Footer/mobile/__stories__/MobileFooter.stories.tsx
new file mode 100644
index 0000000..10d67a1
--- /dev/null
+++ b/src/components/Footer/mobile/__stories__/MobileFooter.stories.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import {Meta, StoryFn} from '@storybook/react';
+
+import {MobileFooter} from '..';
+import {FooterProps} from '../../types';
+
+import {MobileFooterShowcase} from './MobileFooterShowcase';
+import {longMenuItems, menuItems} from './moc';
+
+import logoIcon from '../../../../../.storybook/assets/logo.svg';
+
+export default {
+    title: 'components/MobileFooter',
+    component: MobileFooter,
+    args: {
+        withDivider: false,
+        menuItems,
+        moreButtonTitle: 'Show more',
+        copyright: `@ ${new Date().getFullYear()} "My Service"`,
+        logo: {
+            icon: logoIcon,
+            iconSize: 24,
+            text: 'My Service',
+        },
+    },
+} as Meta<typeof MobileFooter>;
+
+const ShowcaseTemplate: StoryFn<FooterProps> = (args) => <MobileFooterShowcase {...args} />;
+export const Showcase = ShowcaseTemplate.bind({});
+
+const ManyItemsTemplate: StoryFn<FooterProps> = (args) => (
+    <MobileFooterShowcase {...args} menuItems={longMenuItems} />
+);
+export const ManyItems = ManyItemsTemplate.bind({});
+
+const ClearViewTemplate: StoryFn<FooterProps> = (args) => (
+    <MobileFooterShowcase {...args} view="clear" />
+);
+
+export const ClearView = ClearViewTemplate.bind({});
diff --git a/src/components/Footer/mobile/__stories__/MobileFooterShowcase.scss b/src/components/Footer/mobile/__stories__/MobileFooterShowcase.scss
new file mode 100644
index 0000000..a028033
--- /dev/null
+++ b/src/components/Footer/mobile/__stories__/MobileFooterShowcase.scss
@@ -0,0 +1,28 @@
+.mobile-footer-showcase {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    height: 100vh;
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    &__body {
+        flex: 1;
+    }
+
+    &_mobile {
+        border: none;
+
+        .footer-demo__footer {
+            position: fixed;
+            bottom: 36px;
+            right: 0;
+            left: 0;
+        }
+    }
+}
diff --git a/src/components/Footer/mobile/__stories__/MobileFooterShowcase.tsx b/src/components/Footer/mobile/__stories__/MobileFooterShowcase.tsx
new file mode 100644
index 0000000..1dbefd5
--- /dev/null
+++ b/src/components/Footer/mobile/__stories__/MobileFooterShowcase.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {cn} from '../../../utils/cn';
+import type {FooterProps} from '../../types';
+import {MobileFooter} from '../Footer';
+
+import './MobileFooterShowcase.scss';
+
+const b = cn('mobile-footer-showcase');
+
+export function MobileFooterShowcase({className, ...footerProps}: FooterProps) {
+    return (
+        <div className={b({mobile: true})}>
+            <div className={b('body')} />
+            <MobileFooter className={b('footer', className)} {...footerProps} />
+        </div>
+    );
+}
diff --git a/src/components/Footer/mobile/__stories__/moc.ts b/src/components/Footer/mobile/__stories__/moc.ts
new file mode 100644
index 0000000..dc0f84c
--- /dev/null
+++ b/src/components/Footer/mobile/__stories__/moc.ts
@@ -0,0 +1,38 @@
+import {FooterMenuItem} from '../../types';
+
+export const menuItems: FooterMenuItem[] = [
+    {
+        text: 'About Service',
+        href: 'https://gravity-ui.com/',
+        target: 'blank',
+    },
+    {
+        text: 'Documentation',
+        href: 'https://gravity-ui.com/',
+        target: 'blank',
+    },
+    {
+        text: 'Confidential',
+        href: 'https://gravity-ui.com/',
+        target: 'blank',
+    },
+];
+
+export const longMenuItems = [
+    ...menuItems,
+    {
+        text: 'Long text of the menu item',
+    },
+    {
+        text: 'Very long text of the menu item',
+    },
+    {
+        text: 'Very very long text of the menu item',
+    },
+    {
+        text: 'Very very very long text of the menu item',
+    },
+    {
+        text: 'Very very very very long text of the menu item',
+    },
+];
diff --git a/src/components/Footer/mobile/index.ts b/src/components/Footer/mobile/index.ts
new file mode 100644
index 0000000..ddcc5a9
--- /dev/null
+++ b/src/components/Footer/mobile/index.ts
@@ -0,0 +1 @@
+export * from './Footer';
diff --git a/src/components/Footer/types.ts b/src/components/Footer/types.ts
new file mode 100644
index 0000000..0c1efdd
--- /dev/null
+++ b/src/components/Footer/types.ts
@@ -0,0 +1,20 @@
+import {ReactNode} from 'react';
+
+import {MenuItemProps} from '@gravity-ui/uikit';
+
+import type {LogoProps} from '../types';
+
+export type FooterMenuItem = Omit<MenuItemProps, 'children'> & {
+    text: ReactNode;
+};
+
+export type FooterProps = {
+    className?: string;
+    menuItems?: FooterMenuItem[];
+    withDivider?: boolean;
+    moreButtonTitle?: string;
+    view?: 'normal' | 'clear';
+    logo?: LogoProps;
+    logoWrapperClassName?: string;
+    copyright: string;
+};
diff --git a/src/components/index.ts b/src/components/index.ts
index f02c9fe..8405b9e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -13,4 +13,5 @@ export * from './Settings';
 export * from './MobileHeader';
 export * from './Logo';
 export * from './MobileLogo';
+export * from './Footer';
 export * from './types';
diff --git a/src/hooks/useOverflowingHorizontalListItems/README.md b/src/hooks/useOverflowingHorizontalListItems/README.md
new file mode 100644
index 0000000..a02efee
--- /dev/null
+++ b/src/hooks/useOverflowingHorizontalListItems/README.md
@@ -0,0 +1,12 @@
+## useOverflowingContainerListItems
+
+A hook for defining which list items should be shown and which ones should be hidden in the drop-down list
+
+### PropTypes
+
+| Property        | Type                     | Required | Default | Description              |
+| :-------------- | :----------------------- | :------: | :------ | :----------------------- |
+| containerRef    | `RefObject<HTMLElement>` |          |         | List container ref       |
+| items           | `Array`                  |          |         | List items               |
+| itemSelector    | `String`                 |          |         | List item selector       |
+| moreButtonWidth | `Number`                 |          |         | The width of more button |
diff --git a/src/hooks/useOverflowingHorizontalListItems/index.ts b/src/hooks/useOverflowingHorizontalListItems/index.ts
new file mode 100644
index 0000000..0c608f7
--- /dev/null
+++ b/src/hooks/useOverflowingHorizontalListItems/index.ts
@@ -0,0 +1 @@
+export * from './useOverflowingHorizontalListItems';
diff --git a/src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts b/src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts
new file mode 100644
index 0000000..fda08bf
--- /dev/null
+++ b/src/hooks/useOverflowingHorizontalListItems/useOverflowingHorizontalListItems.ts
@@ -0,0 +1,88 @@
+import {useLayoutEffect, useMemo, useState} from 'react';
+import type {RefObject} from 'react';
+
+import debounceFn from 'lodash/debounce';
+
+export type UseOverflowingContainerListItemsProps<ItemType extends unknown> = {
+    containerRef: RefObject<HTMLElement>;
+    items?: ItemType[];
+    itemSelector: string;
+    moreButtonWidth?: number;
+};
+
+export function useOverflowingHorizontalListItems<ItemType>({
+    containerRef,
+    items,
+    itemSelector,
+    moreButtonWidth = 0,
+}: UseOverflowingContainerListItemsProps<ItemType>) {
+    const [containerWidth, setContainerWidth] = useState<number>(0);
+    const [itemWidths, setItemWidths] = useState<number[]>([]);
+
+    useLayoutEffect(() => {
+        if (!containerRef.current) {
+            return;
+        }
+
+        const measureItemSizes = () => {
+            const itemElements = Array.from(
+                containerRef.current?.querySelectorAll(itemSelector) ?? [],
+            );
+            setItemWidths(itemElements.map((item) => item.clientWidth));
+        };
+
+        measureItemSizes();
+    }, [containerRef, itemSelector]);
+
+    useLayoutEffect(() => {
+        const footerMenu = containerRef.current;
+        if (!footerMenu) {
+            return;
+        }
+
+        const updateContainerSize = (entries: ResizeObserverEntry[]) => {
+            if (entries.length > 0) {
+                setContainerWidth(entries[0].contentRect.width);
+            }
+        };
+
+        const updateContainerSizeDebounced = debounceFn(updateContainerSize, 100);
+        const footerMenuResizeObserver = new ResizeObserver(updateContainerSizeDebounced);
+
+        footerMenuResizeObserver.observe(footerMenu);
+    }, [containerRef]);
+
+    const isMeasured = containerWidth > 0;
+
+    const {visibleItems, hiddenItems} = useMemo(() => {
+        if (!isMeasured) {
+            return {
+                visibleItems: items ?? [],
+                hiddenItems: [],
+            };
+        }
+
+        const itemsCount = itemWidths.length;
+        let visibleItemsCount = 0;
+        let remainingContainerWidth = containerWidth;
+        for (const width of itemWidths) {
+            remainingContainerWidth -= width;
+            if (remainingContainerWidth < moreButtonWidth) {
+                const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;
+                const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;
+                if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {
+                    break;
+                }
+            }
+
+            visibleItemsCount++;
+        }
+
+        return {
+            visibleItems: items?.slice(0, visibleItemsCount) ?? [],
+            hiddenItems: items?.slice(visibleItemsCount) ?? [],
+        };
+    }, [containerWidth, isMeasured, itemWidths, items, moreButtonWidth]);
+
+    return {visibleItems, hiddenItems, measured: isMeasured};
+}