feat(Footer): add footer docs

src/content/components/navigation/Footer/FooterComponent.scss

@@ -0,0 +1,22 @@
+@use '../../../../variables';
+
+$block: '.#{variables.$ns}navigation-footer';
+
+#{$block} {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
+    width: 100%;
+
+    *,
+    *::before,
+    *::after {
+        box-sizing: border-box;
+    }
+
+    &__body {
+        flex: 1;
+    }
+}

src/content/components/navigation/Footer/FooterComponent.tsx

@@ -0,0 +1,31 @@
+import {Footer, FooterProps, MobileFooter} from '@gravity-ui/navigation';
+import React from 'react';
+
+import {block} from '../../../../utils';
+
+import './FooterComponent.scss';
+import {logo, menuItems} from './constants';
+
+const b = block('navigation-footer');
+
+type FooterComponentProps = Pick<FooterProps, 'withDivider' | 'view' | 'copyright'> & {
+    mobile?: boolean;
+};
+
+export function FooterComponent({withDivider, view, copyright, mobile}: FooterComponentProps) {
+    const Component = mobile ? MobileFooter : Footer;
+
+    return (
+        <div className={b()}>
+            <div className={b('body')} />
+            <Component
+                className={b('footer')}
+                menuItems={menuItems}
+                copyright={copyright}
+                logo={logo}
+                withDivider={withDivider}
+                view={view}
+            />
+        </div>
+    );
+}

src/content/components/navigation/Footer/constants.ts

@@ -0,0 +1,28 @@
+import Aperture from '@gravity-ui/icons/svgs/aperture.svg';
+import {FooterMenuItem} from '@gravity-ui/navigation';
+
+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 logo = {
+    icon: Aperture,
+    iconSize: 24,
+    text: 'Gravity UI',
+    'aria-label': 'Gravity UI',
+    target: 'blank',
+};

src/content/components/navigation/Footer/index.ts

@@ -0,0 +1,38 @@
+import dynamic from 'next/dynamic';
+
+import {Repos} from '../../../../types/common';
+import {getGithubUrl, getReadmeUrl, mappingOptions} from '../../utils';
+
+const getterOptions = {repoName: Repos.Navigation, componentName: 'Footer'};
+
+export const footerConfig = {
+    id: 'footer',
+    title: 'Footer',
+    githubUrl: getGithubUrl(getterOptions),
+    content: {
+        readmeUrl: getReadmeUrl(getterOptions),
+    },
+    sandbox: {
+        expandedContainer: true,
+        component: dynamic(() => import('./FooterComponent').then((mod) => mod.FooterComponent)),
+        props: {
+            mobile: {
+                type: 'switch',
+                defaultValue: false,
+            },
+            withDivider: {
+                type: 'switch',
+                defaultValue: true,
+            },
+            view: {
+                type: 'select',
+                defaultValue: 'normal',
+                values: mappingOptions(['normal', 'clear']),
+            },
+            copyright: {
+                type: 'text',
+                defaultValue: `@ ${new Date().getFullYear()} "Gravity UI"`,
+            },
+        },
+    },
+};

src/content/components/navigation/index.ts

@@ -7,6 +7,7 @@ import {actionBarConfig} from './ActionBar';
 import {allPagesPanelConfig} from './AllPagesPanel';
 import {asideHeaderConfig} from './AsideHeader';
 import {drawerConfig} from './Drawer';
+import {footerConfig} from './Footer';
 import {hotkeysPanelConfig} from './HotkeysPanel';
 import {mobileHeaderConfig} from './MobileHeader';
 import {settingsConfig} from './Settings';
@@ -21,6 +22,7 @@ const components: Component[] = [
     hotkeysPanelConfig,
     mobileHeaderConfig,
     settingsConfig,
+    footerConfig,
 ];
 
 export const navigationComponents: Lib = {