@redneckz/wildless-cms-uni-blocks 0.3.16 → 0.3.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/blocks.schema.json +1 -1
- package/bundle/bundle.umd.js +43 -9
- package/bundle/bundle.umd.min.js +1 -1
- package/cosmos-static/icons/ArrowsRewindRight.svg +1 -0
- package/dist/components/BaseTile/BaseTile.js +1 -1
- package/dist/components/BaseTile/BaseTile.js.map +1 -1
- package/dist/components/Blocks.d.ts +1 -0
- package/dist/components/Blocks.js +2 -0
- package/dist/components/Blocks.js.map +1 -1
- package/dist/components/ComparisonTable/TableColumn.js +1 -1
- package/dist/components/ComparisonTable/TableColumn.js.map +1 -1
- package/dist/components/ProductBlock/ProductBlockContent.d.ts +7 -1
- package/dist/components/ProductBlock/ProductBlockInner.js +9 -2
- package/dist/components/ProductBlock/ProductBlockInner.js.map +1 -1
- package/dist/components/ProductGallery/ProductGalleryContent.d.ts +1 -1
- package/dist/components/ProductGalleryGreen/ProductGalleryGreen.d.ts +5 -0
- package/dist/components/ProductGalleryGreen/ProductGalleryGreen.js +32 -0
- package/dist/components/ProductGalleryGreen/ProductGalleryGreen.js.map +1 -0
- package/dist/components/ProductGalleryGreen/ProductGalleryGreenContent.d.ts +30 -0
- package/dist/components/ProductGalleryGreen/ProductGalleryGreenContent.js +2 -0
- package/dist/components/ProductGalleryGreen/ProductGalleryGreenContent.js.map +1 -0
- package/dist/components/TariffsTable/TariffsTable.js +3 -3
- package/dist/components/TariffsTable/TariffsTable.js.map +1 -1
- package/dist/icons/IconName.d.ts +3 -2
- package/dist/icons/IconName.js +1 -0
- package/dist/icons/IconName.js.map +1 -1
- package/dist/ui-kit/Heading/Heading.js +2 -2
- package/dist/ui-kit/Heading/Heading.js.map +1 -1
- package/lib/common.css +1 -1
- package/lib/components/BaseTile/BaseTile.js +1 -1
- package/lib/components/BaseTile/BaseTile.js.map +1 -1
- package/lib/components/Blocks.d.ts +1 -0
- package/lib/components/Blocks.js +2 -0
- package/lib/components/Blocks.js.map +1 -1
- package/lib/components/ComparisonTable/TableColumn.js +1 -1
- package/lib/components/ComparisonTable/TableColumn.js.map +1 -1
- package/lib/components/ProductBlock/ProductBlockContent.d.ts +7 -1
- package/lib/components/ProductBlock/ProductBlockInner.js +9 -2
- package/lib/components/ProductBlock/ProductBlockInner.js.map +1 -1
- package/lib/components/ProductGallery/ProductGalleryContent.d.ts +1 -1
- package/lib/components/ProductGalleryGreen/ProductGalleryGreen.d.ts +5 -0
- package/lib/components/ProductGalleryGreen/ProductGalleryGreen.fixture.d.ts +4 -0
- package/lib/components/ProductGalleryGreen/ProductGalleryGreen.js +30 -0
- package/lib/components/ProductGalleryGreen/ProductGalleryGreen.js.map +1 -0
- package/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.d.ts +30 -0
- package/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.js +2 -0
- package/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.js.map +1 -0
- package/lib/components/TariffsTable/TariffsTable.js +3 -3
- package/lib/components/TariffsTable/TariffsTable.js.map +1 -1
- package/lib/icons/IconName.d.ts +3 -2
- package/lib/icons/IconName.js +1 -0
- package/lib/icons/IconName.js.map +1 -1
- package/lib/ui-kit/Heading/Heading.js +2 -2
- package/lib/ui-kit/Heading/Heading.js.map +1 -1
- package/mobile/bundle/bundle.umd.js +2 -2
- package/mobile/bundle/bundle.umd.min.js +1 -1
- package/mobile/dist/components/BaseTile/BaseTile.js +1 -1
- package/mobile/dist/components/BaseTile/BaseTile.js.map +1 -1
- package/mobile/dist/components/ComparisonTable/TableColumn.js +1 -1
- package/mobile/dist/components/ComparisonTable/TableColumn.js.map +1 -1
- package/mobile/dist/components/ProductBlock/ProductBlockContent.d.ts +7 -1
- package/mobile/dist/components/ProductGallery/ProductGalleryContent.d.ts +1 -1
- package/mobile/dist/components/ProductGalleryGreen/ProductGalleryGreen.d.ts +5 -0
- package/mobile/dist/components/ProductGalleryGreen/ProductGalleryGreen.js +32 -0
- package/mobile/dist/components/ProductGalleryGreen/ProductGalleryGreen.js.map +1 -0
- package/mobile/dist/components/ProductGalleryGreen/ProductGalleryGreenContent.d.ts +30 -0
- package/mobile/dist/components/ProductGalleryGreen/ProductGalleryGreenContent.js +2 -0
- package/mobile/dist/components/ProductGalleryGreen/ProductGalleryGreenContent.js.map +1 -0
- package/mobile/dist/icons/IconName.d.ts +3 -2
- package/mobile/dist/icons/IconName.js +1 -0
- package/mobile/dist/icons/IconName.js.map +1 -1
- package/mobile/lib/components/BaseTile/BaseTile.js +1 -1
- package/mobile/lib/components/BaseTile/BaseTile.js.map +1 -1
- package/mobile/lib/components/ComparisonTable/TableColumn.js +1 -1
- package/mobile/lib/components/ComparisonTable/TableColumn.js.map +1 -1
- package/mobile/lib/components/ProductBlock/ProductBlockContent.d.ts +7 -1
- package/mobile/lib/components/ProductGallery/ProductGalleryContent.d.ts +1 -1
- package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreen.d.ts +5 -0
- package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreen.js +30 -0
- package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreen.js.map +1 -0
- package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.d.ts +30 -0
- package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.js +2 -0
- package/mobile/lib/components/ProductGalleryGreen/ProductGalleryGreenContent.js.map +1 -0
- package/mobile/lib/icons/IconName.d.ts +3 -2
- package/mobile/lib/icons/IconName.js +1 -0
- package/mobile/lib/icons/IconName.js.map +1 -1
- package/mobile/src/components/BaseTile/BaseTile.tsx +1 -1
- package/mobile/src/components/ComparisonTable/TableColumn.tsx +1 -1
- package/mobile/src/components/ProductBlock/ProductBlockContent.ts +7 -1
- package/mobile/src/components/ProductGallery/ProductGalleryContent.ts +1 -1
- package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.example.json +22 -0
- package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx +98 -0
- package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts +32 -0
- package/mobile/src/icons/ArrowsRewindRight.svg +16 -0
- package/mobile/src/icons/IconName.ts +3 -3
- package/package.json +1 -1
- package/src/components/BaseTile/BaseTile.tsx +1 -1
- package/src/components/Blocks.ts +2 -0
- package/src/components/ComparisonTable/TableColumn.tsx +1 -1
- package/src/components/ProductBlock/ProductBlockContent.ts +7 -1
- package/src/components/ProductBlock/ProductBlockInner.tsx +23 -15
- package/src/components/ProductGallery/ProductGallery.fixture.mobile.tsx +2 -2
- package/src/components/ProductGallery/ProductGallery.fixture.tsx +4 -4
- package/src/components/ProductGallery/ProductGalleryContent.ts +1 -1
- package/src/components/ProductGalleryGreen/ProductGalleryGreen.example.json +22 -0
- package/src/components/ProductGalleryGreen/ProductGalleryGreen.fixture.tsx +114 -0
- package/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx +98 -0
- package/src/components/ProductGalleryGreen/ProductGalleryGreenContent.ts +32 -0
- package/src/components/TariffsTable/TariffsTable.tsx +5 -5
- package/src/icons/ArrowsRewindRight.svg +16 -0
- package/src/icons/IconName.ts +149 -4
- package/src/ui-kit/Heading/Heading.tsx +2 -2
|
@@ -23,26 +23,16 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
|
|
|
23
23
|
image,
|
|
24
24
|
items,
|
|
25
25
|
version = 'primary',
|
|
26
|
+
textBlockClassName = '',
|
|
26
27
|
}) => {
|
|
28
|
+
const textColor = version === 'secondary' ? 'text-white' : '';
|
|
27
29
|
return (
|
|
28
30
|
<div className={`flex grow justify-between items-stretch ${className}`}>
|
|
29
|
-
<div className={
|
|
31
|
+
<div className={`flex flex-col ${textBlockClassName}`}>
|
|
30
32
|
<BaseTile
|
|
31
33
|
context={context}
|
|
32
|
-
title={
|
|
33
|
-
|
|
34
|
-
<Heading
|
|
35
|
-
headingType={headingType}
|
|
36
|
-
title={title}
|
|
37
|
-
className="whitespace-pre-wrap max-w-[600px]"
|
|
38
|
-
/>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
buttons={
|
|
42
|
-
buttons?.length ? (
|
|
43
|
-
<ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
|
|
44
|
-
) : null
|
|
45
|
-
}
|
|
34
|
+
title={getTitle(title, headingType, textColor)}
|
|
35
|
+
buttons={getButtons(context, buttons)}
|
|
46
36
|
>
|
|
47
37
|
{description && (
|
|
48
38
|
<Description className="mt-4 max-w-[600px]" description={description} />
|
|
@@ -62,3 +52,21 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
|
|
|
62
52
|
);
|
|
63
53
|
},
|
|
64
54
|
);
|
|
55
|
+
|
|
56
|
+
const getTitle = (title, headingType, textColor) => {
|
|
57
|
+
return (
|
|
58
|
+
title && (
|
|
59
|
+
<Heading
|
|
60
|
+
headingType={headingType}
|
|
61
|
+
title={title}
|
|
62
|
+
className={`whitespace-pre-wrap max-w-[600px] ${textColor}`}
|
|
63
|
+
/>
|
|
64
|
+
)
|
|
65
|
+
);
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
const getButtons = (context, buttons) => {
|
|
69
|
+
return buttons?.length ? (
|
|
70
|
+
<ButtonSection context={context} buttons={buttons} className="flex mt-9 gap-3" />
|
|
71
|
+
) : null;
|
|
72
|
+
};
|
|
@@ -93,7 +93,7 @@ export default {
|
|
|
93
93
|
{
|
|
94
94
|
nav: {
|
|
95
95
|
title: 'Выгодно покупать',
|
|
96
|
-
|
|
96
|
+
description: 'Дополнительные бонусные баллы за покупки',
|
|
97
97
|
},
|
|
98
98
|
productBlock: {
|
|
99
99
|
title: 'Дополнительные бонусные баллы за покупки!',
|
|
@@ -187,7 +187,7 @@ export default {
|
|
|
187
187
|
{
|
|
188
188
|
nav: {
|
|
189
189
|
title: 'Выгодно покупать',
|
|
190
|
-
|
|
190
|
+
description: 'Дополнительные бонусные баллы за покупки',
|
|
191
191
|
},
|
|
192
192
|
productBlock: {
|
|
193
193
|
title: 'Дополнительные бонусные баллы за покупки!',
|
|
@@ -41,7 +41,7 @@ export default {
|
|
|
41
41
|
{
|
|
42
42
|
nav: {
|
|
43
43
|
title: 'Деньги на любые цели',
|
|
44
|
-
|
|
44
|
+
description: 'Ставка от 12,5% годовых на срок до 5 лет',
|
|
45
45
|
},
|
|
46
46
|
productBlock: {
|
|
47
47
|
title: 'Ставка от 12,5% годовых на срок до 5 лет!',
|
|
@@ -65,7 +65,7 @@ export default {
|
|
|
65
65
|
{
|
|
66
66
|
nav: {
|
|
67
67
|
title: 'Для людей в возрасте',
|
|
68
|
-
|
|
68
|
+
description: 'Ставка от 12,5% годовых на срок до 3 лет',
|
|
69
69
|
},
|
|
70
70
|
productBlock: {
|
|
71
71
|
title: 'Ставка от 12,5% годовых на срок до 3 лет!',
|
|
@@ -89,7 +89,7 @@ export default {
|
|
|
89
89
|
{
|
|
90
90
|
nav: {
|
|
91
91
|
title: 'Выгодно покупать',
|
|
92
|
-
|
|
92
|
+
description: 'Дополнительные бонусные баллы за покупки',
|
|
93
93
|
},
|
|
94
94
|
productBlock: {
|
|
95
95
|
title: 'Дополнительные бонусные баллы за покупки!',
|
|
@@ -113,7 +113,7 @@ export default {
|
|
|
113
113
|
{
|
|
114
114
|
nav: {
|
|
115
115
|
title: 'Карты Unionpay',
|
|
116
|
-
|
|
116
|
+
description: 'Кэшбэк до 20% у партнеров',
|
|
117
117
|
},
|
|
118
118
|
productBlock: {
|
|
119
119
|
title: 'Карты Unionpay',
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"slides": [
|
|
3
|
+
{
|
|
4
|
+
"nav": {
|
|
5
|
+
"title": "Заголовок",
|
|
6
|
+
"description": "Описание"
|
|
7
|
+
},
|
|
8
|
+
"productBlock": {
|
|
9
|
+
"title": "Продуктовая галерея",
|
|
10
|
+
"image": {
|
|
11
|
+
"format": "webp",
|
|
12
|
+
"size": {
|
|
13
|
+
"width": 280
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"version": "primary",
|
|
17
|
+
"description": "Описание",
|
|
18
|
+
"items": ["Элемент списка 1", "Элемент списка 2", "Элемент списка 3"]
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
]
|
|
22
|
+
}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { context } from '../../setup-fixture';
|
|
2
|
+
|
|
3
|
+
import type { Picture } from '../../model/Picture';
|
|
4
|
+
import { ProductGalleryGreen } from './ProductGalleryGreen';
|
|
5
|
+
import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
|
|
6
|
+
|
|
7
|
+
const percentImage: Picture = {
|
|
8
|
+
src: '3-6-percent.png',
|
|
9
|
+
format: 'webp',
|
|
10
|
+
size: {
|
|
11
|
+
width: 338,
|
|
12
|
+
height: 420,
|
|
13
|
+
},
|
|
14
|
+
alt: 'Ставка от 3,6% годовых',
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const worker: Picture = {
|
|
18
|
+
src: 'money-2.png',
|
|
19
|
+
format: 'webp',
|
|
20
|
+
size: {
|
|
21
|
+
width: 280,
|
|
22
|
+
height: 280,
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
const creditCard: Picture = {
|
|
27
|
+
src: 'credit-card-1.png',
|
|
28
|
+
format: 'webp',
|
|
29
|
+
size: {
|
|
30
|
+
width: 280,
|
|
31
|
+
height: 280,
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const items = [
|
|
36
|
+
'Потребительский кредит по специальной процентной ставке',
|
|
37
|
+
'Получите деньги без залога и поручительства',
|
|
38
|
+
'Кредитный лимит до 5 млн рублей',
|
|
39
|
+
];
|
|
40
|
+
const buttons: ButtonWithIconProps[] = [
|
|
41
|
+
{
|
|
42
|
+
href: 'https://rshb.ru',
|
|
43
|
+
text: 'Подробнее',
|
|
44
|
+
target: '_blank',
|
|
45
|
+
version: 'secondary',
|
|
46
|
+
},
|
|
47
|
+
];
|
|
48
|
+
|
|
49
|
+
export default {
|
|
50
|
+
default: (
|
|
51
|
+
<div className="container grid grid-cols-12">
|
|
52
|
+
<ProductGalleryGreen
|
|
53
|
+
className="col-span-12"
|
|
54
|
+
context={context}
|
|
55
|
+
slides={[
|
|
56
|
+
{
|
|
57
|
+
nav: {
|
|
58
|
+
title: 'Кредит по одному документу',
|
|
59
|
+
description: 'Ставка от 5,5% годовых',
|
|
60
|
+
},
|
|
61
|
+
productBlock: {
|
|
62
|
+
title: 'Кредит по одному документу',
|
|
63
|
+
// description: 'Кредит наличными без залога и поручительства, только по паспорту',
|
|
64
|
+
headingType: 'h2',
|
|
65
|
+
items,
|
|
66
|
+
buttons,
|
|
67
|
+
image: percentImage,
|
|
68
|
+
backgroundText: '3,6',
|
|
69
|
+
},
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
nav: {
|
|
73
|
+
title: 'Для людей в возрасте',
|
|
74
|
+
description: 'Ставка до 7% годовых',
|
|
75
|
+
},
|
|
76
|
+
productBlock: {
|
|
77
|
+
title: 'Ставка от 12,5% годовых на срок до 3 лет!',
|
|
78
|
+
headingType: 'h2',
|
|
79
|
+
items,
|
|
80
|
+
buttons,
|
|
81
|
+
image: worker,
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
nav: {
|
|
86
|
+
title: 'Выгодно покупать',
|
|
87
|
+
description: 'Ставка от 5% годовых',
|
|
88
|
+
},
|
|
89
|
+
productBlock: {
|
|
90
|
+
title: 'Дополнительные бонусные баллы за покупки!',
|
|
91
|
+
headingType: 'h2',
|
|
92
|
+
items,
|
|
93
|
+
buttons,
|
|
94
|
+
image: creditCard,
|
|
95
|
+
},
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
nav: {
|
|
99
|
+
title: 'Карты Unionpay',
|
|
100
|
+
description: '120 дней льготный период',
|
|
101
|
+
},
|
|
102
|
+
productBlock: {
|
|
103
|
+
title: 'Карты Unionpay',
|
|
104
|
+
headingType: 'h2',
|
|
105
|
+
items,
|
|
106
|
+
buttons,
|
|
107
|
+
image: creditCard,
|
|
108
|
+
},
|
|
109
|
+
},
|
|
110
|
+
]}
|
|
111
|
+
/>
|
|
112
|
+
</div>
|
|
113
|
+
),
|
|
114
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
+
import type { UniBlockProps } from '../../types';
|
|
3
|
+
import { Icon } from '../../ui-kit/Icon/Icon';
|
|
4
|
+
import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
|
|
5
|
+
import { ProductBlockInner } from '../ProductBlock/ProductBlockInner';
|
|
6
|
+
import type { ProductGalleryGreenContent } from './ProductGalleryGreenContent';
|
|
7
|
+
|
|
8
|
+
export interface ProductGalleryProps extends ProductGalleryGreenContent, UniBlockProps {}
|
|
9
|
+
|
|
10
|
+
export const ProductGalleryGreen = JSX<ProductGalleryProps>(
|
|
11
|
+
({ className = '', context, slides = [] }) => {
|
|
12
|
+
const galleryNav = slides.map((s) => s.nav);
|
|
13
|
+
const galleryBlocks = slides.map((s) => s.productBlock);
|
|
14
|
+
const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
|
|
15
|
+
|
|
16
|
+
return (
|
|
17
|
+
<section
|
|
18
|
+
className={`box-border pt-[70px] relative font-sans overflow-hidden bg-primary-main w-100 ${className}`}
|
|
19
|
+
>
|
|
20
|
+
<div
|
|
21
|
+
className="flex duration-1000 pb-14"
|
|
22
|
+
style={{ transform: `translateX(-${activeSlideIndex}00%)` }}
|
|
23
|
+
role="list"
|
|
24
|
+
>
|
|
25
|
+
{galleryBlocks.map((_, i) => renderProductBlock(_, i, context))}
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
<div className="flex items-center absolute bottom-6 left-0 right-0 px-9 box-border">
|
|
29
|
+
{galleryNav.map((slide, i) =>
|
|
30
|
+
renderNavButton({
|
|
31
|
+
slide,
|
|
32
|
+
i,
|
|
33
|
+
activeSlideIndex,
|
|
34
|
+
onClick: () => setActiveSlideIndex(i),
|
|
35
|
+
}),
|
|
36
|
+
)}
|
|
37
|
+
</div>
|
|
38
|
+
</section>
|
|
39
|
+
);
|
|
40
|
+
},
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
function renderProductBlock(block: ProductBlockInnerContent, i: number, context) {
|
|
44
|
+
return (
|
|
45
|
+
<section
|
|
46
|
+
key={String(i)}
|
|
47
|
+
className="box-border relative flex grow-0 shrink-0 basis-full px-9"
|
|
48
|
+
role="listitem"
|
|
49
|
+
>
|
|
50
|
+
<div className="flex grow">
|
|
51
|
+
{block.backgroundText ? (
|
|
52
|
+
<div className="absolute text-[454px] font-bold text-white tracking-[-10px] leading-[299px] opacity-[.1] right-12 top-20 z-0">
|
|
53
|
+
{block.backgroundText}
|
|
54
|
+
</div>
|
|
55
|
+
) : null}
|
|
56
|
+
<ProductBlockInner
|
|
57
|
+
className="pl-2.5 pt-2.5 pb-1.5 pr-[6.25rem] z-[1]"
|
|
58
|
+
context={context}
|
|
59
|
+
textBlockClassName="mb-[154px]"
|
|
60
|
+
version="secondary"
|
|
61
|
+
{...block}
|
|
62
|
+
/>
|
|
63
|
+
<Icon
|
|
64
|
+
className="absolute right-[460px] top-[200px] z-0 mb-4"
|
|
65
|
+
name="ArrowsRewindRight"
|
|
66
|
+
width="230"
|
|
67
|
+
height="187"
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
</section>
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function renderNavButton({ slide, i, activeSlideIndex, onClick }) {
|
|
75
|
+
const isActiveBtn = i === activeSlideIndex;
|
|
76
|
+
const btnClassName = isActiveBtn
|
|
77
|
+
? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0'
|
|
78
|
+
: 'bg-white/10 min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300';
|
|
79
|
+
const btnTitleClassName = isActiveBtn ? 'text-primary-text' : 'text-white';
|
|
80
|
+
const btnDescClassName = isActiveBtn ? 'text-secondary-text' : 'text-white';
|
|
81
|
+
|
|
82
|
+
return (
|
|
83
|
+
<button
|
|
84
|
+
type="button"
|
|
85
|
+
key={String(i)}
|
|
86
|
+
onClick={onClick}
|
|
87
|
+
aria-label={slide?.title}
|
|
88
|
+
className={`box-border font-sans group relative overflow-hidden border-white/50 border-[1px] cursor-pointer text-left mb-6a mx-1 grow basis-0 backdrop-blur-sm
|
|
89
|
+
${btnClassName}
|
|
90
|
+
`}
|
|
91
|
+
>
|
|
92
|
+
<div className="border-0 px-6">
|
|
93
|
+
<div className={`text-sm font-medium pb-[3px] ${btnTitleClassName}`}>{slide?.title}</div>
|
|
94
|
+
<div className={`text-xs text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
|
|
95
|
+
</div>
|
|
96
|
+
</button>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import type { ProductBlockInnerContent } from '../ProductBlock/ProductBlockContent';
|
|
2
|
+
|
|
3
|
+
/** @title Кнопка под слайдом */
|
|
4
|
+
interface ProductGalleryNav {
|
|
5
|
+
/** @title Заголовок */
|
|
6
|
+
title: string;
|
|
7
|
+
/** @title Описание */
|
|
8
|
+
description: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/**
|
|
12
|
+
* @title Слайд
|
|
13
|
+
*/
|
|
14
|
+
export interface ProductSlide {
|
|
15
|
+
/** @title Превью содержимого слайда на навигации */
|
|
16
|
+
nav?: ProductGalleryNav;
|
|
17
|
+
/** @title Содержимое слайда */
|
|
18
|
+
productBlock: ProductBlockInnerContent;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* @title Продуктовая галерея
|
|
23
|
+
*/
|
|
24
|
+
export interface ProductGalleryGreenContent {
|
|
25
|
+
/**
|
|
26
|
+
* @title Задержка
|
|
27
|
+
* @hidden //! temporary not used
|
|
28
|
+
*/
|
|
29
|
+
duration?: number;
|
|
30
|
+
/** @title Слайды */
|
|
31
|
+
slides?: ProductSlide[];
|
|
32
|
+
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
+
import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
|
|
3
|
+
import type { UniBlockProps } from '../../types';
|
|
2
4
|
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
3
|
-
import { COLS_LENGTH_FOR_SCROLL } from './constants';
|
|
4
|
-
import { TariffsTableRow } from './TariffsTableRow';
|
|
5
5
|
import { TableArrowScrollControl } from '../../ui-kit/TableArrowScrollControl/TableArrowScrollControl';
|
|
6
|
-
import
|
|
6
|
+
import { COLS_LENGTH_FOR_SCROLL } from './constants';
|
|
7
7
|
import type {
|
|
8
8
|
TariffsTableCellData,
|
|
9
9
|
TariffsTableColumn,
|
|
10
10
|
TariffsTableContent,
|
|
11
11
|
TariffsTableRowHeader,
|
|
12
12
|
} from './TariffsTableContent';
|
|
13
|
-
import {
|
|
13
|
+
import { TariffsTableRow } from './TariffsTableRow';
|
|
14
14
|
|
|
15
15
|
export interface TariffsTableProps extends TariffsTableContent, UniBlockProps {}
|
|
16
16
|
|
|
@@ -46,7 +46,7 @@ export const TariffsTable = JSX<TariffsTableProps>(
|
|
|
46
46
|
{rowData?.length ? (
|
|
47
47
|
<div role="table">
|
|
48
48
|
<div className="relative">
|
|
49
|
-
{rowData.map((row, i) => (
|
|
49
|
+
{rowData.map((row, i, { length }) => (
|
|
50
50
|
<TariffsTableRow
|
|
51
51
|
key={String(i)}
|
|
52
52
|
row={row}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<svg viewBox="0 0 230 187" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g filter="url(#filter0_d_7050_138706)">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M92.24 52.16L14 104.32V0L92.24 52.16ZM216.119 52.16L137.879 104.32V0L216.119 52.16Z" fill="white"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<filter id="filter0_d_7050_138706" x="0.959999" y="0" width="228.199" height="186.907" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
7
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
8
|
+
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
|
9
|
+
<feOffset dy="69.5467"/>
|
|
10
|
+
<feGaussianBlur stdDeviation="6.52"/>
|
|
11
|
+
<feColorMatrix type="matrix" values="0 0 0 0 0.0196078 0 0 0 0 0.0117647 0 0 0 0 0.0156863 0 0 0 0.1 0"/>
|
|
12
|
+
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7050_138706"/>
|
|
13
|
+
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7050_138706" result="shape"/>
|
|
14
|
+
</filter>
|
|
15
|
+
</defs>
|
|
16
|
+
</svg>
|
package/src/icons/IconName.ts
CHANGED
|
@@ -1,8 +1,79 @@
|
|
|
1
|
-
|
|
2
1
|
// Generated. Do not touch
|
|
3
2
|
|
|
4
3
|
export enum IconMap {
|
|
5
|
-
ActualBalanceIcon =
|
|
4
|
+
ActualBalanceIcon = 'ActualBalanceIcon',
|
|
5
|
+
AppleIcon = 'AppleIcon',
|
|
6
|
+
ArrowsRewindRight = 'ArrowsRewindRight',
|
|
7
|
+
AtmIcon = 'AtmIcon',
|
|
8
|
+
BankIcon = 'BankIcon',
|
|
9
|
+
BurgerIcon = 'BurgerIcon',
|
|
10
|
+
BurgerIconWhite = 'BurgerIconWhite',
|
|
11
|
+
Calendar2Icon = 'Calendar2Icon',
|
|
12
|
+
CalendarCircleIcon = 'CalendarCircleIcon',
|
|
13
|
+
CalendarIcon = 'CalendarIcon',
|
|
14
|
+
CalendarTickIcon = 'CalendarTickIcon',
|
|
15
|
+
CalendarWhiteIcon = 'CalendarWhiteIcon',
|
|
16
|
+
CardIcon = 'CardIcon',
|
|
17
|
+
CardPosIcon = 'CardPosIcon',
|
|
18
|
+
CardTickIcon = 'CardTickIcon',
|
|
19
|
+
CardWithGemIcon = 'CardWithGemIcon',
|
|
20
|
+
ChartSquareIcon = 'ChartSquareIcon',
|
|
21
|
+
ClockIcon = 'ClockIcon',
|
|
22
|
+
CloseIcon = 'CloseIcon',
|
|
23
|
+
ComfortableCompIcon = 'ComfortableCompIcon',
|
|
24
|
+
CreditCardsIcon = 'CreditCardsIcon',
|
|
25
|
+
DiscountShapeIcon = 'DiscountShapeIcon',
|
|
26
|
+
DocIcon = 'DocIcon',
|
|
27
|
+
DocIconMonoColor = 'DocIconMonoColor',
|
|
28
|
+
DocumentTextIcon = 'DocumentTextIcon',
|
|
29
|
+
DollarIcon = 'DollarIcon',
|
|
30
|
+
EarthIcon = 'EarthIcon',
|
|
31
|
+
EmptyWalletChangeIcon = 'EmptyWalletChangeIcon',
|
|
32
|
+
EmptyWalletIcon = 'EmptyWalletIcon',
|
|
33
|
+
EmptyWalletWhiteIcon = 'EmptyWalletWhiteIcon',
|
|
34
|
+
EuroIcon = 'EuroIcon',
|
|
35
|
+
GeolocationIcon = 'GeolocationIcon',
|
|
36
|
+
GlassIcon = 'GlassIcon',
|
|
37
|
+
GlobalIcon = 'GlobalIcon',
|
|
38
|
+
GpsIcon = 'GpsIcon',
|
|
39
|
+
GridIcon = 'GridIcon',
|
|
40
|
+
GridIconWhite = 'GridIconWhite',
|
|
41
|
+
InterestGrowthIcon = 'InterestGrowthIcon',
|
|
42
|
+
InterestIcon = 'InterestIcon',
|
|
43
|
+
JCBIcon = 'JCBIcon',
|
|
44
|
+
LoupeIcon = 'LoupeIcon',
|
|
45
|
+
MasterCardIcon = 'MasterCardIcon',
|
|
46
|
+
MinusIcon = 'MinusIcon',
|
|
47
|
+
MirIcon = 'MirIcon',
|
|
48
|
+
MoneyIcon = 'MoneyIcon',
|
|
49
|
+
MoneyInsuranceIcon = 'MoneyInsuranceIcon',
|
|
50
|
+
MonitorMobileIcon = 'MonitorMobileIcon',
|
|
51
|
+
NewDocIcon = 'NewDocIcon',
|
|
52
|
+
OfficeIcon = 'OfficeIcon',
|
|
53
|
+
OkIcon = 'OkIcon',
|
|
54
|
+
PassSendIcon = 'PassSendIcon',
|
|
55
|
+
PercentageRoundIcon = 'PercentageRoundIcon',
|
|
56
|
+
PercentageSquareIcon = 'PercentageSquareIcon',
|
|
57
|
+
PercentageSquareWhiteIcon = 'PercentageSquareWhiteIcon',
|
|
58
|
+
PersonalCardIcon = 'PersonalCardIcon',
|
|
59
|
+
PlayMarketIcon = 'PlayMarketIcon',
|
|
60
|
+
PlusIcon = 'PlusIcon',
|
|
61
|
+
Profile2UserIcon = 'Profile2UserIcon',
|
|
62
|
+
ProfileIcon = 'ProfileIcon',
|
|
63
|
+
RoundRubleIcon = 'RoundRubleIcon',
|
|
64
|
+
SafeIcon = 'SafeIcon',
|
|
65
|
+
ShieldTickIcon = 'ShieldTickIcon',
|
|
66
|
+
SignDocsIcon = 'SignDocsIcon',
|
|
67
|
+
SmallClockIcon = 'SmallClockIcon',
|
|
68
|
+
TelegramIcon = 'TelegramIcon',
|
|
69
|
+
UnionPayIcon = 'UnionPayIcon',
|
|
70
|
+
UserTickIcon = 'UserTickIcon',
|
|
71
|
+
VisaIcon = 'VisaIcon',
|
|
72
|
+
VKIcon = 'VKIcon',
|
|
73
|
+
WalletAdd2Icon = 'WalletAdd2Icon',
|
|
74
|
+
WalletAddIcon = 'WalletAddIcon',
|
|
75
|
+
WalletIcon = 'WalletIcon',
|
|
76
|
+
WalletWithMoneyIcon = 'WalletWithMoneyIcon',
|
|
6
77
|
}
|
|
7
78
|
|
|
8
79
|
/**
|
|
@@ -10,7 +81,81 @@ export enum IconMap {
|
|
|
10
81
|
* @title Иконка
|
|
11
82
|
* @enumNames [
|
|
12
83
|
* "",
|
|
13
|
-
* "Деньги", "Лого «Apple»", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
|
|
84
|
+
* "Деньги", "Лого «Apple»", "ArrowsRewindRight", "Банкомат", "Банк", "Бургер", "Бургер (белый)", "Календарь 2", "Скруглённый календарь", "Календарь", "Календарь с галочкой", "Календарь белый", "Кред. карта", "Кред. карта под наклоном", "Кред. карта с галочкой", "Карта с драгоценностями", "Деньги внутри кошелька", "Часы", "Крестик", "Кресло", "Кредитные карты", "Скидка", "Документ", "Документ (одноцветный)", "Документ с текстом", "Доллар", "Земля", "Пустой кошелёк с возвратом", "Пустой кошелёк", "Пустой кошелёк (белый)", "Евро", "Геолокация", "Зеркало", "Глобус", "Gps", "Сетка", "Сетка (белая)", "Диаграмма роста", "Скидка", "JCB", "Лупа", "MasterCard", "Минус", "МИР", "Деньги", "Денежное страхование", "Монитор и мобильный", "Новый документ", "Офис", "Лого «Одноклассники»", "Бизнес", "Проценты (круг.)", "Проценты", "Проценты белые", "Персональная карта", "Лого «PlayMarket»", "Плюс", "Профиль, 2 персоны", "Профиль", "Рубль (круг.)", "Сейф", "Безопасность", "Подписанные документы", "Маленькие часы", "Лого «Telegram»", "UnionPay", "Пользователь", "Visa", "Лого «VK»", "Пополнение карты", "Кошелёк с плюсом", "Кошелёк", "Кошелёк с деньгами"
|
|
14
85
|
* ]
|
|
15
86
|
*/
|
|
16
|
-
export type IconName =
|
|
87
|
+
export type IconName =
|
|
88
|
+
| ''
|
|
89
|
+
| 'ActualBalanceIcon'
|
|
90
|
+
| 'AppleIcon'
|
|
91
|
+
| 'ArrowsRewindRight'
|
|
92
|
+
| 'AtmIcon'
|
|
93
|
+
| 'BankIcon'
|
|
94
|
+
| 'BurgerIcon'
|
|
95
|
+
| 'BurgerIconWhite'
|
|
96
|
+
| 'Calendar2Icon'
|
|
97
|
+
| 'CalendarCircleIcon'
|
|
98
|
+
| 'CalendarIcon'
|
|
99
|
+
| 'CalendarTickIcon'
|
|
100
|
+
| 'CalendarWhiteIcon'
|
|
101
|
+
| 'CardIcon'
|
|
102
|
+
| 'CardPosIcon'
|
|
103
|
+
| 'CardTickIcon'
|
|
104
|
+
| 'CardWithGemIcon'
|
|
105
|
+
| 'ChartSquareIcon'
|
|
106
|
+
| 'ClockIcon'
|
|
107
|
+
| 'CloseIcon'
|
|
108
|
+
| 'ComfortableCompIcon'
|
|
109
|
+
| 'CreditCardsIcon'
|
|
110
|
+
| 'DiscountShapeIcon'
|
|
111
|
+
| 'DocIcon'
|
|
112
|
+
| 'DocIconMonoColor'
|
|
113
|
+
| 'DocumentTextIcon'
|
|
114
|
+
| 'DollarIcon'
|
|
115
|
+
| 'EarthIcon'
|
|
116
|
+
| 'EmptyWalletChangeIcon'
|
|
117
|
+
| 'EmptyWalletIcon'
|
|
118
|
+
| 'EmptyWalletWhiteIcon'
|
|
119
|
+
| 'EuroIcon'
|
|
120
|
+
| 'GeolocationIcon'
|
|
121
|
+
| 'GlassIcon'
|
|
122
|
+
| 'GlobalIcon'
|
|
123
|
+
| 'GpsIcon'
|
|
124
|
+
| 'GridIcon'
|
|
125
|
+
| 'GridIconWhite'
|
|
126
|
+
| 'InterestGrowthIcon'
|
|
127
|
+
| 'InterestIcon'
|
|
128
|
+
| 'JCBIcon'
|
|
129
|
+
| 'LoupeIcon'
|
|
130
|
+
| 'MasterCardIcon'
|
|
131
|
+
| 'MinusIcon'
|
|
132
|
+
| 'MirIcon'
|
|
133
|
+
| 'MoneyIcon'
|
|
134
|
+
| 'MoneyInsuranceIcon'
|
|
135
|
+
| 'MonitorMobileIcon'
|
|
136
|
+
| 'NewDocIcon'
|
|
137
|
+
| 'OfficeIcon'
|
|
138
|
+
| 'OkIcon'
|
|
139
|
+
| 'PassSendIcon'
|
|
140
|
+
| 'PercentageRoundIcon'
|
|
141
|
+
| 'PercentageSquareIcon'
|
|
142
|
+
| 'PercentageSquareWhiteIcon'
|
|
143
|
+
| 'PersonalCardIcon'
|
|
144
|
+
| 'PlayMarketIcon'
|
|
145
|
+
| 'PlusIcon'
|
|
146
|
+
| 'Profile2UserIcon'
|
|
147
|
+
| 'ProfileIcon'
|
|
148
|
+
| 'RoundRubleIcon'
|
|
149
|
+
| 'SafeIcon'
|
|
150
|
+
| 'ShieldTickIcon'
|
|
151
|
+
| 'SignDocsIcon'
|
|
152
|
+
| 'SmallClockIcon'
|
|
153
|
+
| 'TelegramIcon'
|
|
154
|
+
| 'UnionPayIcon'
|
|
155
|
+
| 'UserTickIcon'
|
|
156
|
+
| 'VisaIcon'
|
|
157
|
+
| 'VKIcon'
|
|
158
|
+
| 'WalletAdd2Icon'
|
|
159
|
+
| 'WalletAddIcon'
|
|
160
|
+
| 'WalletIcon'
|
|
161
|
+
| 'WalletWithMoneyIcon';
|
|
@@ -15,7 +15,7 @@ const HEADING_STYLE_MAP: Record<HeadingType, string> = {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
export const Heading = JSX<HeadingProps>((props) => {
|
|
18
|
-
const { className, headingType, title } = props;
|
|
18
|
+
const { className = '', headingType, title } = props;
|
|
19
19
|
if (!headingType) {
|
|
20
20
|
return;
|
|
21
21
|
}
|
|
@@ -23,7 +23,7 @@ export const Heading = JSX<HeadingProps>((props) => {
|
|
|
23
23
|
|
|
24
24
|
return (
|
|
25
25
|
<Tag
|
|
26
|
-
className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className
|
|
26
|
+
className={`font-sans font-medium m-0 ${HEADING_STYLE_MAP[headingType]} ${className}`}
|
|
27
27
|
>
|
|
28
28
|
{title}
|
|
29
29
|
</Tag>
|