feat: brand footer

README.md

@@ -36,11 +36,12 @@ const Page: React.PropsWithChildren<PageProps> = ({content}) => (
 
 ```typescript
 interface PageConstructorProps {
-  content: PageContent; //Blocks data in JSON format.
+  content: PageContent; // Blocks data in JSON format.
   shouldRenderBlock?: ShouldRenderBlock; // A function that is invoked when rendering each block and  lets you set conditions for its display.
-  custom?: Custom; //Custom blocks (see `Customization`).
-  renderMenu?: () => React.ReactNode; //A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
+  custom?: Custom; // Custom blocks (see `Customization`).
+  renderMenu?: () => React.ReactNode; // A function that renders the page menu with navigation (we plan to add rendering for the default menu version).
   navigation?: NavigationData; // Navigation data for using navigation component in JSON format
+  isBranded?: boolean; // If true, adds a footer that links to https://gravity-ui.com/. Try BrandFooter component for more customization.
 }
 
 interface PageConstructorProviderProps {

src/components/BrandFooter/BrandFooter.scss

@@ -0,0 +1,120 @@
+@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;
+        opacity: 0;
+        transition: opacity 0.5s ease-out;
+        content: '';
+    }
+
+    &:hover {
+        color: var(--g-color-text-primary);
+        border-color: transparent;
+
+        &::after {
+            opacity: 1;
+        }
+    }
+
+    &_theme {
+        &_light::after {
+            background: linear-gradient(
+                270deg,
+                rgba(228, 106, 68, 1) 0%,
+                rgba(242, 159, 85, 1) 46.62%,
+                rgba(255, 212, 102, 1) 100%
+            );
+        }
+
+        &_dark::after {
+            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%
+            );
+        }
+    }
+
+    &__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,37 @@
+import React from 'react';
+
+import {Link} from '@gravity-ui/uikit';
+
+import {useTheme} from '../../context/theme';
+import {BrandIconDark} from '../../icons/BrandIconDark';
+import {BrandIconLight} from '../../icons/BrandIconLight';
+import {BrandName} from '../../icons/BrandName';
+import type {ClassNameProps} from '../../models';
+import {Theme} from '../../models';
+import {block} from '../../utils';
+
+import {i18n} from './i18n';
+
+import './BrandFooter.scss';
+
+const b = block('brand-footer');
+
+const BrandFooter = ({className}: ClassNameProps) => {
+    const theme = useTheme();
+
+    return (
+        <Link className={b({theme}, className)} href="https://gravity-ui.com">
+            <div className={b('content')}>
+                <span className={b('text')}>{i18n('created-on')}</span>
+                <div className={b('brand-icon')}>
+                    {theme === Theme.Light ? <BrandIconLight /> : <BrandIconDark />}
+                </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;
+    isBranded?: boolean;
     microdata?: {
         contentUpdatedDate?: string;
     };
@@ -62,6 +64,7 @@ export const Constructor = (props: PageConstructorProps) => {
         shouldRenderBlock,
         navigation,
         custom,
+        isBranded,
         microdata,
     } = props;
 
@@ -121,6 +124,7 @@ export const Constructor = (props: PageConstructorProps) => {
                             )}
                         </Grid>
                     </Layout>
+                    {isBranded && <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,
+    isBranded: true,
+};

src/icons/BrandIconDark.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+import {a11yHiddenSvgProps} from '../utils/svg';
+
+export const BrandIconDark: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        {...a11yHiddenSvgProps}
+        {...props}
+    >
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M19.8424 19.8433C24.3958 15.2896 24.3958 7.90683 19.8424 3.35327L16.5682 6.6277C19.244 9.40598 19.2329 13.8068 16.5192 16.5207C13.8055 19.2345 9.4048 19.2457 6.62664 16.5697L3.35327 19.8433C7.90663 24.3967 15.2891 24.3967 19.8424 19.8433Z"
+            fill="url(#paint0_radial_6_104)"
+        />
+        <mask
+            id="mask0_6_104"
+            style={{maskType: 'alpha'}}
+            maskUnits="userSpaceOnUse"
+            x="0"
+            y="0"
+            width="24"
+            height="24"
+        >
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.41502 3.41517C-0.555167 7.38553 -1.06365 13.5068 1.88957 18.0282L1.88935 18.0284C2.09935 18.3619 2.20437 18.5286 2.26492 18.6847C2.40503 19.0457 2.42515 19.3437 2.33483 19.7203C2.2958 19.883 2.19607 20.1022 1.9966 20.5404C1.33086 22.003 1.18697 23.0905 1.69269 23.5962C3.11985 25.0235 7.69004 22.767 15.2286 15.2282C22.7671 7.68935 25.0235 3.11896 23.5962 1.69173C23.0906 1.18604 22.0033 1.32985 20.5409 1.99546C20.1008 2.19578 19.8807 2.29593 19.7171 2.33502C19.3426 2.42443 19.0465 2.40464 18.6872 2.26616C18.532 2.20637 18.3665 2.10288 18.039 1.8973C13.5168 -1.06457 7.38862 -0.558613 3.41502 3.41517ZM13.0738 13.0737C15.8196 10.3278 17.6712 7.72746 16.3976 6.45378C13.6259 3.68193 9.15304 3.66091 6.40726 6.4068C3.66149 9.1527 3.68251 13.6257 6.45424 16.3976C7.72786 17.6712 10.3281 15.8196 13.0738 13.0737Z"
+                fill="#FF3377"
+            />
+        </mask>
+        <g mask="url(#mask0_6_104)">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.41502 3.41517C-0.555167 7.38553 -1.06365 13.5068 1.88957 18.0282L1.88935 18.0284C2.09935 18.3619 2.20437 18.5286 2.26492 18.6847C2.40503 19.0457 2.42515 19.3437 2.33483 19.7203C2.2958 19.883 2.19607 20.1022 1.9966 20.5404C1.33086 22.003 1.18697 23.0905 1.69269 23.5962C3.11985 25.0235 7.69004 22.767 15.2286 15.2282C22.7671 7.68935 25.0235 3.11896 23.5962 1.69173C23.0906 1.18604 22.0033 1.32985 20.5409 1.99546C20.1008 2.19578 19.8807 2.29593 19.7171 2.33502C19.3426 2.42443 19.0465 2.40464 18.6872 2.26616C18.532 2.20637 18.3665 2.10288 18.039 1.8973C13.5168 -1.06457 7.38862 -0.558613 3.41502 3.41517ZM13.0738 13.0737C15.8196 10.3278 17.6712 7.72746 16.3976 6.45378C13.6259 3.68193 9.15304 3.66091 6.40726 6.4068C3.66149 9.1527 3.68251 13.6257 6.45424 16.3976C7.72786 17.6712 10.3281 15.8196 13.0738 13.0737Z"
+                fill="#FF3377"
+            />
+            <g filter="url(#filter0_f_6_104)">
+                <path
+                    d="M3.66425 16.9431C1.23717 13.223 1.65507 8.18643 4.91797 4.91963C8.18443 1.64924 13.2224 1.2335 16.9393 3.67239C17.2067 3.84045 17.3423 3.92521 17.4693 3.97423C17.7646 4.08818 18.008 4.10447 18.3158 4.03088C18.4503 3.99874 18.6311 3.91633 18.9928 3.75149C20.1947 3.20385 21.8808 2.02762 22.4725 2.62002C23.3813 3.52987 20.6464 8.26011 14.4508 14.4631C8.25521 20.666 3.53061 23.5804 2.62184 22.6706C2.03011 22.0781 3.20502 20.2137 3.75214 19.0102C3.91609 18.6497 3.99806 18.4693 4.03013 18.3355C4.10438 18.0256 4.08784 17.7804 3.97268 17.4833C3.92291 17.355 3.83661 17.2178 3.66402 16.9433L3.66425 16.9431Z"
+                    fill="#FFFF00"
+                />
+            </g>
+        </g>
+        <defs>
+            <filter
+                id="filter0_f_6_104"
+                x="-1.54024"
+                y="-1.54195"
+                width="27.8346"
+                height="28.0273"
+                filterUnits="userSpaceOnUse"
+                colorInterpolationFilters="sRGB"
+            >
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="1.82578" result="effect1_foregroundBlur_6_104" />
+            </filter>
+            <radialGradient
+                id="paint0_radial_6_104"
+                cx="0"
+                cy="0"
+                r="1"
+                gradientUnits="userSpaceOnUse"
+                gradientTransform="translate(11.5717 11.7474) rotate(45.0013) scale(11.5058)"
+            >
+                <stop offset="0.646153" stopColor="#FFFF00" />
+                <stop offset="1" stopColor="#FF3377" />
+            </radialGradient>
+        </defs>
+    </svg>
+);