Skip to content

Commit 0aafcf5

Browse files
PahaN47PahaN47
authored
feat: brand footer (#1084)
* feat: brand footer * fix: style imports * fix: requested changes * fix: split brand icon
1 parent 3cf0683 commit 0aafcf5

File tree

12 files changed

+417
-13
lines changed

12 files changed

+417
-13
lines changed

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,12 @@ const Page: React.PropsWithChildren<PageProps> = ({content}) => (
3636

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

4647
interface PageConstructorProviderProps {

‎src/components/BrandFooter/BrandFooter.scss‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@import '../../../styles/mixins.scss';
2+
@import '../../../styles/variables.scss';
3+
4+
$block: '.#{$ns}brand-footer';
5+
6+
#{$block} {
7+
$borderHeight: 1px;
8+
9+
@include text-body-2();
10+
11+
position: relative;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
width: 100%;
16+
height: 72px;
17+
margin-top: var(--header-height);
18+
color: var(--g-color-text-secondary);
19+
border-top: $borderHeight solid var(--g-color-line-generic);
20+
transition: color 0.5s ease-out, border-color 0.5s ease-out;
21+
22+
&::after {
23+
position: absolute;
24+
top: -$borderHeight;
25+
right: 0;
26+
left: 0;
27+
height: $borderHeight;
28+
opacity: 0;
29+
transition: opacity 0.5s ease-out;
30+
content: '';
31+
}
32+
33+
&:hover {
34+
color: var(--g-color-text-primary);
35+
border-color: transparent;
36+
37+
&::after {
38+
opacity: 1;
39+
}
40+
}
41+
42+
&_theme {
43+
&_light::after {
44+
background: linear-gradient(
45+
270deg,
46+
rgba(228, 106, 68, 1) 0%,
47+
rgba(242, 159, 85, 1) 46.62%,
48+
rgba(255, 212, 102, 1) 100%
49+
);
50+
}
51+
52+
&_dark::after {
53+
background: linear-gradient(
54+
270deg,
55+
rgba(228, 106, 68, 0.6) 0%,
56+
rgba(242, 159, 85, 0.6) 46.62%,
57+
rgba(255, 212, 102, 0.6) 100%
58+
);
59+
}
60+
}
61+
62+
&__content {
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
gap: $indentXXXS;
67+
padding-top: 1px;
68+
}
69+
70+
&__text {
71+
align-self: flex-end;
72+
}
73+
74+
&__brand-icon {
75+
display: flex;
76+
align-items: center;
77+
justify-content: center;
78+
width: 24px;
79+
height: 24px;
80+
81+
& > svg {
82+
width: 100%;
83+
height: 100%;
84+
}
85+
}
86+
87+
&__brand-name {
88+
display: flex;
89+
align-items: center;
90+
justify-content: center;
91+
width: 90px;
92+
height: 20px;
93+
94+
& > svg {
95+
width: 100%;
96+
height: 100%;
97+
}
98+
}
99+
100+
@media (max-width: map-get($gridBreakpoints, 'md')) {
101+
@include text-body-1();
102+
103+
height: 52px;
104+
105+
&__content {
106+
padding: 0;
107+
}
108+
109+
&__brand-icon {
110+
width: 20px;
111+
height: 20px;
112+
}
113+
114+
&__brand-name {
115+
width: 72px;
116+
height: 16px;
117+
margin-top: 0;
118+
}
119+
}
120+
}

‎src/components/BrandFooter/BrandFooter.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
3+
import {Link} from '@gravity-ui/uikit';
4+
5+
import {useTheme} from '../../context/theme';
6+
import {BrandIconDark} from '../../icons/BrandIconDark';
7+
import {BrandIconLight} from '../../icons/BrandIconLight';
8+
import {BrandName} from '../../icons/BrandName';
9+
import type {ClassNameProps} from '../../models';
10+
import {Theme} from '../../models';
11+
import {block} from '../../utils';
12+
13+
import {i18n} from './i18n';
14+
15+
import './BrandFooter.scss';
16+
17+
const b = block('brand-footer');
18+
19+
const BrandFooter = ({className}: ClassNameProps) => {
20+
const theme = useTheme();
21+
22+
return (
23+
<Link className={b({theme}, className)} href="https://gravity-ui.com">
24+
<div className={b('content')}>
25+
<span className={b('text')}>{i18n('created-on')}</span>
26+
<div className={b('brand-icon')}>
27+
{theme === Theme.Light ? <BrandIconLight /> : <BrandIconDark />}
28+
</div>
29+
<div className={b('brand-name')}>
30+
<BrandName />
31+
</div>
32+
</div>
33+
</Link>
34+
);
35+
};
36+
37+
export default BrandFooter;

‎src/components/BrandFooter/i18n/en.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"created-on": "Created on"
3+
}

‎src/components/BrandFooter/i18n/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import {addComponentKeysets} from '@gravity-ui/uikit/i18n';
2+
3+
import {NAMESPACE} from '../../../utils/cn';
4+
5+
import en from './en.json';
6+
import ru from './ru.json';
7+
8+
export const i18n = addComponentKeysets({en, ru}, `${NAMESPACE}BrandFooter`);

‎src/components/BrandFooter/i18n/ru.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"created-on": "Создано на"
3+
}

‎src/components/index.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,44 @@
11
export {default as Anchor} from './Anchor/Anchor';
22
export {default as AnimateBlock} from './AnimateBlock/AnimateBlock';
3+
export {default as Author} from './Author/Author';
34
export {default as BackgroundImage} from './BackgroundImage/BackgroundImage';
45
export {default as BackgroundMedia} from './BackgroundMedia/BackgroundMedia';
56
export {default as BackLink} from './BackLink/BackLink';
67
export {default as BalancedMasonry} from './BalancedMasonry/BalancedMasonry';
78
export {default as BlockBase} from './BlockBase/BlockBase';
89
export {default as Button} from './Button/Button';
910
export {default as Buttons} from './Buttons/Buttons';
11+
export {default as BrandFooter} from './BrandFooter/BrandFooter';
1012
export {default as CardBase} from './CardBase/CardBase';
13+
export {default as ContentList} from './ContentList/ContentList';
14+
export {default as Control} from './Control/Control';
1115
export {default as ErrorWrapper} from './ErrorWrapper/ErrorWrapper';
1216
export {default as FileLink} from './FileLink/FileLink';
1317
export {default as Foldable} from './Foldable/Foldable';
1418
export {default as FullscreenImage} from './FullscreenImage/FullscreenImage';
19+
export {default as FullscreenMedia} from './FullscreenMedia/FullscreenMedia';
1520
export {default as FullWidthBackground} from './FullWidthBackground/FullWidthBackground';
1621
export {default as HeaderBreadcrumbs} from './HeaderBreadcrumbs/HeaderBreadcrumbs';
22+
export {default as HTML} from './HTML/HTML';
23+
export {default as IconWrapper} from './IconWrapper/IconWrapper';
1724
export {default as Image} from './Image/Image';
1825
export {default as ImageBase} from './ImageBase/ImageBase';
26+
export {default as InnerForm} from './InnerForm/InnerForm';
1927
export {default as Link} from './Link/Link';
2028
export {default as Links} from './Links/Links';
2129
export {default as Media} from './Media/Media';
30+
export {default as MetaInfo} from './MetaInfo/MetaInfo';
2231
export {default as OutsideClick} from './OutsideClick/OutsideClick';
32+
export {default as OverflowScroller} from './OverflowScroller/OverflowScroller';
2333
export {default as ReactPlayer} from './ReactPlayer/ReactPlayer';
34+
export {default as RouterLink} from './RouterLink/RouterLink';
2435
export {default as Table} from './Table/Table';
2536
export {default as Title} from './Title/Title';
2637
export {default as ToggleArrow} from './ToggleArrow/ToggleArrow';
2738
export {default as UnpublishedLabel} from './UnpublishedLabel/UnpublishedLabel';
2839
export {default as VideoBlock} from './VideoBlock/VideoBlock';
2940
export {default as YFMWrapper} from './YFMWrapper/YFMWrapper';
3041
export {default as YandexForm} from './YandexForm/YandexForm';
31-
export {default as Control} from './Control/Control';
32-
export {default as OverflowScroller} from './OverflowScroller/OverflowScroller';
33-
export {default as Author} from './Author/Author';
34-
export {default as RouterLink} from './RouterLink/RouterLink';
35-
export {default as HTML} from './HTML/HTML';
36-
export {default as MetaInfo} from './MetaInfo/MetaInfo';
37-
export {default as FullscreenMedia} from './FullscreenMedia/FullscreenMedia';
38-
export {default as ContentList} from './ContentList/ContentList';
39-
export {default as InnerForm} from './InnerForm/InnerForm';
40-
export {default as IconWrapper} from './IconWrapper/IconWrapper';
4142

4243
export type {RouterLinkProps} from './RouterLink/RouterLink';
4344
export type {ImageBaseProps} from './ImageBase/ImageBase';

‎src/containers/PageConstructor/PageConstructor.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, {useContext, useMemo} from 'react';
33
import '@diplodoc/transform/dist/js/yfm';
44

55
import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
6+
import BrandFooter from '../../components/BrandFooter/BrandFooter';
67
import RootCn from '../../components/RootCn';
78
import {blockMap, navItemMap, subBlockMap} from '../../constructor-items';
89
import {AnimateContext} from '../../context/animateContext';
@@ -50,6 +51,7 @@ export interface PageConstructorProps {
5051
custom?: CustomConfig;
5152
renderMenu?: () => React.ReactNode;
5253
navigation?: NavigationData;
54+
isBranded?: boolean;
5355
microdata?: {
5456
contentUpdatedDate?: string;
5557
};
@@ -62,6 +64,7 @@ export const Constructor = (props: PageConstructorProps) => {
6264
shouldRenderBlock,
6365
navigation,
6466
custom,
67+
isBranded,
6568
microdata,
6669
} = props;
6770

@@ -121,6 +124,7 @@ export const Constructor = (props: PageConstructorProps) => {
121124
)}
122125
</Grid>
123126
</Layout>
127+
{isBranded && <BrandFooter />}
124128
</div>
125129
</RootCn>
126130
</InnerContext.Provider>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const WithFullWidthBackgroundMediaTemplate: StoryFn<PageConstructorProps> = (arg
2020
export const Default = DefaultTemplate.bind({});
2121
export const withNavigation = DefaultTemplate.bind({});
2222
export const WithFullWidthBackgroundMedia = WithFullWidthBackgroundMediaTemplate.bind({});
23+
export const Branded = DefaultTemplate.bind({});
2324

2425
Default.args = data.default as PageConstructorProps;
2526
withNavigation.args = {
@@ -34,3 +35,7 @@ WithFullWidthBackgroundMedia.args = {
3435
background: data.withFullWidthBackgroundMedia.background,
3536
},
3637
} as PageConstructorProps;
38+
Branded.args = {
39+
...data.default,
40+
isBranded: true,
41+
};

‎src/icons/BrandIconDark.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import React from 'react';
2+
3+
import {a11yHiddenSvgProps} from '../utils/svg';
4+
5+
export const BrandIconDark: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
6+
<svg
7+
xmlns="http://www.w3.org/2000/svg"
8+
width="24"
9+
height="24"
10+
viewBox="0 0 24 24"
11+
fill="none"
12+
{...a11yHiddenSvgProps}
13+
{...props}
14+
>
15+
<path
16+
fillRule="evenodd"
17+
clipRule="evenodd"
18+
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"
19+
fill="url(#paint0_radial_6_104)"
20+
/>
21+
<mask
22+
id="mask0_6_104"
23+
style={{maskType: 'alpha'}}
24+
maskUnits="userSpaceOnUse"
25+
x="0"
26+
y="0"
27+
width="24"
28+
height="24"
29+
>
30+
<path
31+
fillRule="evenodd"
32+
clipRule="evenodd"
33+
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"
34+
fill="#FF3377"
35+
/>
36+
</mask>
37+
<g mask="url(#mask0_6_104)">
38+
<path
39+
fillRule="evenodd"
40+
clipRule="evenodd"
41+
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"
42+
fill="#FF3377"
43+
/>
44+
<g filter="url(#filter0_f_6_104)">
45+
<path
46+
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"
47+
fill="#FFFF00"
48+
/>
49+
</g>
50+
</g>
51+
<defs>
52+
<filter
53+
id="filter0_f_6_104"
54+
x="-1.54024"
55+
y="-1.54195"
56+
width="27.8346"
57+
height="28.0273"
58+
filterUnits="userSpaceOnUse"
59+
colorInterpolationFilters="sRGB"
60+
>
61+
<feFlood floodOpacity="0" result="BackgroundImageFix" />
62+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
63+
<feGaussianBlur stdDeviation="1.82578" result="effect1_foregroundBlur_6_104" />
64+
</filter>
65+
<radialGradient
66+
id="paint0_radial_6_104"
67+
cx="0"
68+
cy="0"
69+
r="1"
70+
gradientUnits="userSpaceOnUse"
71+
gradientTransform="translate(11.5717 11.7474) rotate(45.0013) scale(11.5058)"
72+
>
73+
<stop offset="0.646153" stopColor="#FFFF00" />
74+
<stop offset="1" stopColor="#FF3377" />
75+
</radialGradient>
76+
</defs>
77+
</svg>
78+
);

0 commit comments

Comments
 (0)