Skip to content

Commit 96c23f0

Browse files
makhnatkinmakhnatkin
committed
feat: add benefits grid templates
1 parent 868e5e1 commit 96c23f0

7 files changed

Lines changed: 419 additions & 15 deletions

File tree

‎demo/src/defaults/grid-block-templates.ts‎

Lines changed: 293 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,294 @@
1-
import type {GridBlockTemplate} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
1+
import type {
2+
GridBlockTemplate,
3+
GridBlockTemplateBlock,
4+
} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/templates/index.js';
25

3-
export const gridBlockTemplates: GridBlockTemplate[] = [];
6+
const benefitsContainerCss = `
7+
.grid {
8+
display: grid;
9+
gap: 48px;
10+
width: min(100%, 1280px);
11+
margin: 0 auto;
12+
padding: 0 16px 45px;
13+
box-sizing: border-box;
14+
}
15+
16+
a {
17+
color: inherit;
18+
text-decoration: none;
19+
}
20+
21+
img {
22+
display: block;
23+
}
24+
`;
25+
26+
const benefitsHeroBlock: GridBlockTemplateBlock = {
27+
content: `
28+
<div class="benefits-hero__content">
29+
<div class="benefits-hero__title">Бенефиты</div>
30+
<div class="benefits-hero__text">
31+
Здесь всё про ДМС, массаж,<br>
32+
жилищную программу, скидки<br>
33+
и другие преимущества
34+
</div>
35+
</div>`.trim(),
36+
css: `
37+
& {
38+
display: flex;
39+
min-height: 337px;
40+
padding: 24px;
41+
align-items: center;
42+
border-radius: 24px;
43+
background: url("https://jing.yandex-team.ru/files/irina-tsekh/benefits--23-12--bg.png") no-repeat center / contain;
44+
box-sizing: border-box;
45+
}
46+
47+
.benefits-hero__title {
48+
margin-bottom: 5px;
49+
color: #222a3a;
50+
font-size: 64px;
51+
font-weight: 600;
52+
line-height: 110%;
53+
}
54+
55+
.benefits-hero__text {
56+
color: #222a3a;
57+
font-size: 20px;
58+
font-weight: 400;
59+
line-height: 140%;
60+
}
61+
`.trim(),
62+
};
63+
64+
const benefitsBannerGridBlock: GridBlockTemplateBlock = {
65+
content: `
66+
<a class="benefits-banner benefits-banner_dms" href="https://wiki.yandex-team.ru/hr/kompensacii/straxovanie/" aria-label="ДМС"></a>
67+
<a class="benefits-banner benefits-banner_food" href="https://wiki.yandex-team.ru/hr/kompensacii/novaja-stranica-po-pitaniju01092020/" aria-label="Питание"></a>
68+
<a class="benefits-banner benefits-banner_sport" href="https://wiki.yandex-team.ru/hr/kompensacii/sport/" aria-label="Спорт"></a>
69+
<a class="benefits-banner benefits-banner_family" href="https://wiki.yandex-team.ru/hr/kompensacii/benefity-dlja-semejj-s-detmi/" aria-label="Семья"></a>
70+
<a class="benefits-banner benefits-banner_finance" href="https://wiki.yandex-team.ru/hr/kompensacii/fin/" aria-label="Финансы"></a>
71+
<a class="benefits-banner benefits-banner_discounts" href="https://wiki.yandex-team.ru/hr/kompensacii/skidkinew/" aria-label="Скидки"></a>`.trim(),
72+
css: `
73+
& {
74+
display: grid;
75+
grid-template-columns: repeat(2, minmax(0, 1fr));
76+
gap: 12px;
77+
}
78+
79+
.benefits-banner {
80+
display: block;
81+
height: 310px;
82+
background-position: center;
83+
background-repeat: no-repeat;
84+
background-size: contain;
85+
box-sizing: border-box;
86+
}
87+
88+
.benefits-banner_dms {
89+
background-image: url("https://jing.yandex-team.ru/files/mariaversh/Frame%202136138923.png");
90+
}
91+
92+
.benefits-banner_dms:hover {
93+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/3337--22-12--footer--img1-ve.png");
94+
}
95+
96+
.benefits-banner_food {
97+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/banner3-3.png");
98+
}
99+
100+
.benefits-banner_food:hover {
101+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/banner3-hover-1.png");
102+
}
103+
104+
.benefits-banner_sport {
105+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/banner4-2.png");
106+
}
107+
108+
.benefits-banner_sport:hover {
109+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/banner4-hover.png");
110+
}
111+
112+
.benefits-banner_family {
113+
background-image: url("https://jing.yandex-team.ru/files/mariaversh/Frame%202136138924.png");
114+
}
115+
116+
.benefits-banner_family:hover {
117+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/benefits--23-12--bg4.png");
118+
}
119+
120+
.benefits-banner_finance {
121+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/banner6-1.png");
122+
}
123+
124+
.benefits-banner_finance:hover {
125+
background-image: url("https://jing.yandex-team.ru/files/mariaversh/Frame%202136138918%20%283%29.png");
126+
}
127+
128+
.benefits-banner_discounts {
129+
background-image: url("https://jing.yandex-team.ru/files/mariaversh/Frame%202136138923%20%281%29.png");
130+
}
131+
132+
.benefits-banner_discounts:hover {
133+
background-image: url("https://jing.yandex-team.ru/files/irina-tsekh/benefits--23-12--bg4-v2.png");
134+
}
135+
`.trim(),
136+
};
137+
138+
const benefitsLinksBlock: GridBlockTemplateBlock = {
139+
content: `
140+
<a class="benefits-link" href="https://wiki.yandex-team.ru/HR/LgotyBelarus/" target="_blank">
141+
<span>Бенефиты в Беларуси</span>
142+
<img src="https://jing.yandex-team.ru/files/mariaversh/Frame%202136138398.png" alt="">
143+
</a>
144+
<a class="benefits-link" href="https://wiki.yandex-team.ru/hr/kompensacii/vseolgotaxdljahrbp/" target="_blank">
145+
<span>Вики для HR-партнеров</span>
146+
<img src="https://jing.yandex-team.ru/files/mariaversh/Frame%202136138398.png" alt="">
147+
</a>`.trim(),
148+
css: `
149+
& {
150+
display: grid;
151+
grid-template-columns: repeat(2, minmax(0, 1fr));
152+
gap: 12px;
153+
}
154+
155+
.benefits-link {
156+
display: flex;
157+
width: 100%;
158+
padding: 20px 24px;
159+
justify-content: space-between;
160+
align-items: center;
161+
border: 1px solid #cfcddd;
162+
border-radius: 64px;
163+
box-sizing: border-box;
164+
color: #222a3a;
165+
font-size: 32px;
166+
font-weight: 500;
167+
line-height: 120%;
168+
}
169+
170+
.benefits-link img {
171+
height: 40px;
172+
}
173+
`.trim(),
174+
};
175+
176+
const benefitsContactsBlock: GridBlockTemplateBlock = {
177+
content: `
178+
<div class="benefits-contact-card">
179+
<img src="https://jing.yandex-team.ru/files/mariaversh/Send%20_%2024.png" alt="">
180+
<div class="benefits-contact-card__title">Чат в Мессенджере</div>
181+
<a class="benefits-contact-card__link" href="https://ya.cc/helpy">robot-helpy</a>
182+
</div>
183+
<div class="benefits-contact-card">
184+
<img src="https://jing.yandex-team.ru/files/mariaversh/Mail%20_%2024.png" alt="">
185+
<div class="benefits-contact-card__title">Почта</div>
186+
<a class="benefits-contact-card__link" href="mailto:helpy@yandex-team.ru" target="_blank">helpy@yandex-team.ru</a>
187+
</div>
188+
<div class="benefits-contact-card">
189+
<img src="https://jing.yandex-team.ru/files/mariaversh/Call%20_%2024.png" alt="">
190+
<div class="benefits-contact-card__title">Телефон</div>
191+
<div class="benefits-contact-card__text">8 (800) 250-96-39, доб. 444</div>
192+
</div>
193+
<div class="benefits-contact-card">
194+
<img src="https://jing.yandex-team.ru/files/mariaversh/Call%20_%2024.png" alt="">
195+
<div class="benefits-contact-card__title">Портал</div>
196+
<a class="benefits-contact-card__link" href="https://helpy.yandex-team.ru/" target="_blank">helpy.yandex-team.ru</a>
197+
</div>`.trim(),
198+
css: `
199+
& {
200+
display: grid;
201+
grid-template-columns: repeat(4, minmax(0, 1fr));
202+
gap: 12px;
203+
}
204+
205+
.benefits-contact-card {
206+
display: flex;
207+
height: 185px;
208+
padding: 24px;
209+
flex-direction: column;
210+
justify-content: space-between;
211+
align-items: flex-start;
212+
border-radius: 24px;
213+
background-color: #f5f4fd;
214+
box-sizing: border-box;
215+
}
216+
217+
.benefits-contact-card img {
218+
height: 32px;
219+
}
220+
221+
.benefits-contact-card__title {
222+
color: #222a3a;
223+
font-size: 24px;
224+
font-weight: 500;
225+
line-height: 120%;
226+
}
227+
228+
.benefits-contact-card__link,
229+
.benefits-contact-card__text {
230+
color: #575e6e;
231+
font-size: 20px;
232+
font-weight: 400;
233+
line-height: 140%;
234+
}
235+
`.trim(),
236+
};
237+
238+
const benefitsFooterBlock: GridBlockTemplateBlock = {
239+
content:
240+
'<img class="benefits-footer-logo" src="https://jing.yandex-team.ru/files/mariaversh/YaTeam-2.png" alt="YaTeam">',
241+
css: `
242+
& {
243+
margin-bottom: 45px;
244+
}
245+
246+
.benefits-footer-logo {
247+
height: 32px;
248+
}
249+
`.trim(),
250+
};
251+
252+
const benefitsBlocks = [
253+
benefitsHeroBlock,
254+
benefitsBannerGridBlock,
255+
benefitsLinksBlock,
256+
benefitsContactsBlock,
257+
benefitsFooterBlock,
258+
];
259+
260+
const benefitsPageContent = `<div class="grid">
261+
<div class="block-1">${benefitsHeroBlock.content}</div>
262+
<div class="block-2">${benefitsBannerGridBlock.content}</div>
263+
<div class="block-3">${benefitsLinksBlock.content}</div>
264+
<div class="block-4">${benefitsContactsBlock.content}</div>
265+
<div class="block-5">${benefitsFooterBlock.content}</div>
266+
</div>`;
267+
268+
const blockTemplate = (
269+
id: string,
270+
title: string,
271+
block: GridBlockTemplateBlock,
272+
): GridBlockTemplate => ({
273+
id,
274+
title,
275+
type: 'block',
276+
content: block.content,
277+
block,
278+
});
279+
280+
export const gridBlockTemplates: GridBlockTemplate[] = [
281+
{
282+
id: 'benefits-page-theme',
283+
title: 'Benefits page theme',
284+
type: 'container',
285+
content: benefitsPageContent,
286+
containerCss: benefitsContainerCss.trim(),
287+
blocks: benefitsBlocks,
288+
},
289+
blockTemplate('benefits-hero', 'Benefits hero', benefitsHeroBlock),
290+
blockTemplate('benefits-banners', 'Benefits banner grid', benefitsBannerGridBlock),
291+
blockTemplate('benefits-links', 'Benefits links', benefitsLinksBlock),
292+
blockTemplate('benefits-contacts', 'Benefits contacts', benefitsContactsBlock),
293+
blockTemplate('benefits-footer', 'Benefits footer', benefitsFooterBlock),
294+
];

‎packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {blockClass, gridScopeClass, inlineToRule, scopeCss} from '../css';
1+
import {blockClass, gridScopeClass, inlineToRule, scopeCss, templateCssToRules} from '../css';
22
import type {
33
GridBlock,
44
GridBlockBlockTemplate,
@@ -11,7 +11,7 @@ export const createGridBlockId = () => Math.random().toString(36).slice(2, 10);
1111

1212
export const templateToBlock = (template: GridBlockBlockTemplate): GridBlock => ({
1313
id: createGridBlockId(),
14-
css: inlineToRule(template.block.css),
14+
css: templateCssToRules(template.block.css),
1515
content: template.block.content,
1616
});
1717

@@ -22,10 +22,10 @@ export const rawTemplateBlockToBlock = (block: GridBlockTemplateBlock): GridBloc
2222
});
2323

2424
export const containerTemplateToAttrs = (template: GridBlockContainerTemplate) => ({
25-
customCss: inlineToRule(template.containerCss, '.grid'),
25+
customCss: templateCssToRules(template.containerCss, '.grid'),
2626
blocks: template.blocks.map((block) => ({
2727
id: createGridBlockId(),
28-
css: inlineToRule(block.css),
28+
css: templateCssToRules(block.css),
2929
content: block.content,
3030
})),
3131
});

‎packages/editor/src/extensions/additional/GridBlockTemplates/css.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,13 @@ export const inlineToRule = (declarations: string, selector = '&'): string => {
99
return decls === ';' ? '' : `${selector} {\n ${decls}\n}`;
1010
};
1111

12+
export const templateCssToRules = (css: string, selector = '&'): string => {
13+
const value = css.trim();
14+
if (!value) return '';
15+
16+
return value.includes('{') ? value : inlineToRule(value, selector);
17+
};
18+
1219
const scopeSelector = (selector: string, base: string) =>
1320
selector.includes('&') ? selector.replace(/&/g, base) : `${base} ${selector}`;
1421

0 commit comments

Comments
 (0)