feat: brand footer

src/components/BrandFooter/BrandFooter.scss

@@ -0,0 +1,106 @@
+@import '../../../../styles/mixins.scss';
+@import '../../../../styles/variables.scss';
+
+$block: '.#{$ns}brand-footer';
+
+#{$block} {
+    $borderHeight: 1px;
+
+    @include text-body-2();
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 72px;
+    margin-top: var(--header-height);
+    color: var(--g-color-text-secondary);
+    border-top: $borderHeight solid var(--g-color-line-generic);
+    transition: color 0.5s ease-out, border-color 0.5s ease-out;
+
+    &::after {
+        position: absolute;
+        top: -$borderHeight;
+        right: 0;
+        left: 0;
+        height: $borderHeight;
+        background: linear-gradient(
+            270deg,
+            rgba(228, 106, 68, 0.6) 0%,
+            rgba(242, 159, 85, 0.6) 46.62%,
+            rgba(255, 212, 102, 0.6) 100%
+        );
+        opacity: 0;
+        transition: opacity 0.5s ease-out;
+        content: '';
+    }
+
+    &:hover {
+        color: var(--g-color-text-primary);
+        border-color: transparent;
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    &__content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $indentXXXS;
+        padding-top: 1px;
+    }
+
+    &__text {
+        align-self: flex-end;
+    }
+
+    &__brand-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+
+        & > svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    &__brand-name {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 90px;
+        height: 20px;
+
+        & > svg {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'md')) {
+        @include text-body-1();
+
+        height: 52px;
+
+        &__content {
+            padding: 0;
+        }
+
+        &__brand-icon {
+            width: 20px;
+            height: 20px;
+        }
+
+        &__brand-name {
+            width: 72px;
+            height: 16px;
+            margin-top: 0;
+        }
+    }
+}

src/components/BrandFooter/BrandFooter.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import {Link} from '@gravity-ui/uikit';
+
+import {BrandIcon} from '../../icons/BrandIcon';
+import {BrandName} from '../../icons/BrandName';
+import type {ClassNameProps} from '../../models';
+import {block} from '../../utils';
+
+import {i18n} from './i18n';
+
+import './BrandFooter.scss';
+
+const b = block('brand-footer');
+
+const BrandFooter = ({className}: ClassNameProps) => (
+    <Link className={b(null, className)} href="https://gravity-ui.com">
+        <div className={b('content')}>
+            <span className={b('text')}>{i18n('created-on')}</span>
+            <div className={b('brand-icon')}>
+                <BrandIcon />
+            </div>
+            <div className={b('brand-name')}>
+                <BrandName />
+            </div>
+        </div>
+    </Link>
+);
+
+export default BrandFooter;

src/components/BrandFooter/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Created on"
+}

src/components/BrandFooter/i18n/index.ts

@@ -0,0 +1,8 @@
+import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
+
+import {NAMESPACE} from '../../../utils/cn';
+
+import en from './en.json';
+import ru from './ru.json';
+
+export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}BrandFooter`);

src/components/BrandFooter/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "created-on": "Создано на"
+}

src/components/index.ts

@@ -1,43 +1,44 @@
 export {default as Anchor} from './Anchor/Anchor';
 export {default as AnimateBlock} from './AnimateBlock/AnimateBlock';
+export {default as Author} from './Author/Author';
 export {default as BackgroundImage} from './BackgroundImage/BackgroundImage';
 export {default as BackgroundMedia} from './BackgroundMedia/BackgroundMedia';
 export {default as BackLink} from './BackLink/BackLink';
 export {default as BalancedMasonry} from './BalancedMasonry/BalancedMasonry';
 export {default as BlockBase} from './BlockBase/BlockBase';
 export {default as Button} from './Button/Button';
 export {default as Buttons} from './Buttons/Buttons';
+export {default as BrandFooter} from './BrandFooter/BrandFooter';
 export {default as CardBase} from './CardBase/CardBase';
+export {default as ContentList} from './ContentList/ContentList';
+export {default as Control} from './Control/Control';
 export {default as ErrorWrapper} from './ErrorWrapper/ErrorWrapper';
 export {default as FileLink} from './FileLink/FileLink';
 export {default as Foldable} from './Foldable/Foldable';
 export {default as FullscreenImage} from './FullscreenImage/FullscreenImage';
+export {default as FullscreenMedia} from './FullscreenMedia/FullscreenMedia';
 export {default as FullWidthBackground} from './FullWidthBackground/FullWidthBackground';
 export {default as HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
+export {default as HTML} from './HTML/HTML';
+export {default as IconWrapper} from './IconWrapper/IconWrapper';
 export {default as Image} from './Image/Image';
 export {default as ImageBase} from './ImageBase/ImageBase';
+export {default as InnerForm} from './InnerForm/InnerForm';
 export {default as Link} from './Link/Link';
 export {default as Links} from './Links/Links';
 export {default as Media} from './Media/Media';
+export {default as MetaInfo} from './MetaInfo/MetaInfo';
 export {default as OutsideClick} from './OutsideClick/OutsideClick';
+export {default as OverflowScroller} from './OverflowScroller/OverflowScroller';
 export {default as ReactPlayer} from './ReactPlayer/ReactPlayer';
+export {default as RouterLink} from './RouterLink/RouterLink';
 export {default as Table} from './Table/Table';
 export {default as Title} from './Title/Title';
 export {default as ToggleArrow} from './ToggleArrow/ToggleArrow';
 export {default as UnpublishedLabel} from './UnpublishedLabel/UnpublishedLabel';
 export {default as VideoBlock} from './VideoBlock/VideoBlock';
 export {default as YFMWrapper} from './YFMWrapper/YFMWrapper';
 export {default as YandexForm} from './YandexForm/YandexForm';
-export {default as Control} from './Control/Control';
-export {default as OverflowScroller} from './OverflowScroller/OverflowScroller';
-export {default as Author} from './Author/Author';
-export {default as RouterLink} from './RouterLink/RouterLink';
-export {default as HTML} from './HTML/HTML';
-export {default as MetaInfo} from './MetaInfo/MetaInfo';
-export {default as FullscreenMedia} from './FullscreenMedia/FullscreenMedia';
-export {default as ContentList} from './ContentList/ContentList';
-export {default as InnerForm} from './InnerForm/InnerForm';
-export {default as IconWrapper} from './IconWrapper/IconWrapper';
 
 export type {RouterLinkProps} from './RouterLink/RouterLink';
 export type {ImageBaseProps} from './ImageBase/ImageBase';

src/containers/PageConstructor/PageConstructor.tsx

@@ -3,6 +3,7 @@ import React, {useContext, useMemo} from 'react';
 import '@diplodoc/transform/dist/js/yfm';
 
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
+import BrandFooter from '../../components/BrandFooter/BrandFooter';
 import RootCn from '../../components/RootCn';
 import {blockMap, navItemMap, subBlockMap} from '../../constructor-items';
 import {AnimateContext} from '../../context/animateContext';
@@ -50,6 +51,7 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    branded?: boolean;
     microdata?: {
         contentUpdatedDate?: string;
     };
@@ -62,6 +64,7 @@ export const Constructor = (props: PageConstructorProps) => {
         shouldRenderBlock,
         navigation,
         custom,
+        branded,
         microdata,
     } = props;
 
@@ -121,6 +124,7 @@ export const Constructor = (props: PageConstructorProps) => {
                             )}
                         </Grid>
                     </Layout>
+                    {branded && <BrandFooter />}
                 </div>
             </RootCn>
         </InnerContext.Provider>

src/containers/PageConstructor/__stories__/PageConstructor.stories.tsx

@@ -20,6 +20,7 @@ const WithFullWidthBackgroundMediaTemplate: StoryFn<PageConstructorProps> = (arg
 export const Default = DefaultTemplate.bind({});
 export const withNavigation = DefaultTemplate.bind({});
 export const WithFullWidthBackgroundMedia = WithFullWidthBackgroundMediaTemplate.bind({});
+export const Branded = DefaultTemplate.bind({});
 
 Default.args = data.default as PageConstructorProps;
 withNavigation.args = {
@@ -34,3 +35,7 @@ WithFullWidthBackgroundMedia.args = {
         background: data.withFullWidthBackgroundMedia.background,
     },
 } as PageConstructorProps;
+Branded.args = {
+    ...data.default,
+    branded: true,
+};