@redneckz/wildless-cms-uni-blocks 0.9.8 → 0.9.9
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/bin/migration-scripts/0.9.8.js +29 -0
- package/bin/migration-scripts/0.9.9.js +110 -0
- package/bundle/blocks.schema.json +1 -1
- package/bundle/bundle.umd.js +11 -34
- package/bundle/bundle.umd.min.js +1 -1
- package/bundle/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
- package/bundle/components/StepsBlock/StepsBlockContent.d.ts +10 -1
- package/dist/components/Blocks.js +0 -2
- package/dist/components/Blocks.js.map +1 -1
- package/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
- package/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
- package/dist/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
- package/dist/components/StepsBlock/StepsBlock.js +5 -3
- package/dist/components/StepsBlock/StepsBlock.js.map +1 -1
- package/dist/components/StepsBlock/StepsBlockContent.d.ts +10 -1
- package/dist/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
- package/dist/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
- package/lib/common.css +1 -1
- package/lib/components/Blocks.js +0 -2
- package/lib/components/Blocks.js.map +1 -1
- package/lib/components/Carousel/Carousel.fixture.d.ts +1 -0
- package/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.d.ts +2 -0
- package/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
- package/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
- package/lib/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
- package/lib/components/StepsBlock/StepsBlock.js +5 -3
- package/lib/components/StepsBlock/StepsBlock.js.map +1 -1
- package/lib/components/StepsBlock/StepsBlockContent.d.ts +10 -1
- package/lib/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
- package/lib/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
- package/mobile/bundle/bundle.umd.js +3 -3
- package/mobile/bundle/bundle.umd.min.js +1 -1
- package/mobile/bundle/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
- package/mobile/bundle/components/StepsBlock/StepsBlockContent.d.ts +10 -1
- package/mobile/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
- package/mobile/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
- package/mobile/dist/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
- package/mobile/dist/components/StepsBlock/StepsBlockContent.d.ts +10 -1
- package/mobile/dist/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
- package/mobile/dist/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
- package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
- package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
- package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
- package/mobile/lib/components/StepsBlock/StepsBlockContent.d.ts +10 -1
- package/mobile/lib/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
- package/mobile/lib/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
- package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json +1 -0
- package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx +18 -34
- package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts +2 -0
- package/mobile/src/components/StepsBlock/StepsBlock.example.json +7 -5
- package/mobile/src/components/StepsBlock/StepsBlock.ui.json +10 -0
- package/mobile/src/components/StepsBlock/StepsBlockContent.ts +10 -2
- package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts +3 -2
- package/package.json +1 -1
- package/src/components/Blocks.ts +0 -2
- package/src/components/Carousel/Carousel.fixture.tsx +25 -2
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json +1 -0
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx +28 -1
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx +18 -34
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts +2 -0
- package/src/components/StepsBlock/StepsBlock.example.json +7 -5
- package/src/components/StepsBlock/StepsBlock.fixture.tsx +14 -8
- package/src/components/StepsBlock/StepsBlock.tsx +13 -4
- package/src/components/StepsBlock/StepsBlock.ui.json +10 -0
- package/src/components/StepsBlock/StepsBlockContent.ts +10 -2
- package/src/components/StepsBlock/StepsBlockStyleMaps.ts +3 -2
- package/bundle/components/Recommendation/Recommendation.d.ts +0 -5
- package/bundle/components/Recommendation/RecommendationCard.d.ts +0 -5
- package/bundle/components/Recommendation/RecommendationContent.d.ts +0 -24
- package/dist/components/Recommendation/Recommendation.d.ts +0 -5
- package/dist/components/Recommendation/Recommendation.js +0 -26
- package/dist/components/Recommendation/Recommendation.js.map +0 -1
- package/dist/components/Recommendation/RecommendationCard.d.ts +0 -5
- package/dist/components/Recommendation/RecommendationCard.js +0 -17
- package/dist/components/Recommendation/RecommendationCard.js.map +0 -1
- package/dist/components/Recommendation/RecommendationContent.d.ts +0 -24
- package/dist/components/Recommendation/RecommendationContent.js +0 -2
- package/dist/components/Recommendation/RecommendationContent.js.map +0 -1
- package/lib/components/Recommendation/Recommendation.d.ts +0 -5
- package/lib/components/Recommendation/Recommendation.fixture.d.ts +0 -15
- package/lib/components/Recommendation/Recommendation.js +0 -24
- package/lib/components/Recommendation/Recommendation.js.map +0 -1
- package/lib/components/Recommendation/RecommendationCard.d.ts +0 -5
- package/lib/components/Recommendation/RecommendationCard.js +0 -15
- package/lib/components/Recommendation/RecommendationCard.js.map +0 -1
- package/lib/components/Recommendation/RecommendationContent.d.ts +0 -24
- package/lib/components/Recommendation/RecommendationContent.js +0 -2
- package/lib/components/Recommendation/RecommendationContent.js.map +0 -1
- package/mobile/bundle/components/Recommendation/Recommendation.d.ts +0 -5
- package/mobile/bundle/components/Recommendation/RecommendationCard.d.ts +0 -5
- package/mobile/bundle/components/Recommendation/RecommendationContent.d.ts +0 -24
- package/mobile/dist/components/Recommendation/Recommendation.d.ts +0 -5
- package/mobile/dist/components/Recommendation/Recommendation.js +0 -26
- package/mobile/dist/components/Recommendation/Recommendation.js.map +0 -1
- package/mobile/dist/components/Recommendation/RecommendationCard.d.ts +0 -5
- package/mobile/dist/components/Recommendation/RecommendationCard.js +0 -17
- package/mobile/dist/components/Recommendation/RecommendationCard.js.map +0 -1
- package/mobile/dist/components/Recommendation/RecommendationContent.d.ts +0 -24
- package/mobile/dist/components/Recommendation/RecommendationContent.js +0 -2
- package/mobile/dist/components/Recommendation/RecommendationContent.js.map +0 -1
- package/mobile/lib/components/Recommendation/Recommendation.d.ts +0 -5
- package/mobile/lib/components/Recommendation/Recommendation.js +0 -24
- package/mobile/lib/components/Recommendation/Recommendation.js.map +0 -1
- package/mobile/lib/components/Recommendation/RecommendationCard.d.ts +0 -5
- package/mobile/lib/components/Recommendation/RecommendationCard.js +0 -15
- package/mobile/lib/components/Recommendation/RecommendationCard.js.map +0 -1
- package/mobile/lib/components/Recommendation/RecommendationContent.d.ts +0 -24
- package/mobile/lib/components/Recommendation/RecommendationContent.js +0 -2
- package/mobile/lib/components/Recommendation/RecommendationContent.js.map +0 -1
- package/mobile/src/components/Catalog/Catalog.ui.json +0 -1
- package/mobile/src/components/Recommendation/Recommendation.example.json +0 -61
- package/mobile/src/components/Recommendation/Recommendation.tsx +0 -66
- package/mobile/src/components/Recommendation/Recommendation.ui.json +0 -19
- package/mobile/src/components/Recommendation/RecommendationCard.tsx +0 -49
- package/mobile/src/components/Recommendation/RecommendationContent.ts +0 -27
- package/src/components/Catalog/Catalog.ui.json +0 -1
- package/src/components/Recommendation/Recommendation.example.json +0 -61
- package/src/components/Recommendation/Recommendation.fixture.tsx +0 -176
- package/src/components/Recommendation/Recommendation.tsx +0 -66
- package/src/components/Recommendation/Recommendation.ui.json +0 -19
- package/src/components/Recommendation/RecommendationCard.tsx +0 -49
- package/src/components/Recommendation/RecommendationContent.ts +0 -27
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"content": {
|
|
3
|
-
"title": "Блок рекомендаций",
|
|
4
|
-
"recommendations": [
|
|
5
|
-
{
|
|
6
|
-
"image": {
|
|
7
|
-
"format": "webp",
|
|
8
|
-
"size": {
|
|
9
|
-
"width": 180,
|
|
10
|
-
"height": 180
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
"title": "Заголовок 1",
|
|
14
|
-
"description": "Описание 1",
|
|
15
|
-
"socialMedia": [
|
|
16
|
-
{ "href": "https://t.me" },
|
|
17
|
-
{ "href": "https://vk.com" },
|
|
18
|
-
{ "href": "https://ok.ru" }
|
|
19
|
-
],
|
|
20
|
-
"button": {
|
|
21
|
-
"text": "",
|
|
22
|
-
"version": "secondary"
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"image": {
|
|
27
|
-
"format": "webp",
|
|
28
|
-
"size": {
|
|
29
|
-
"width": 180,
|
|
30
|
-
"height": 180
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
"title": "Заголовок 2",
|
|
34
|
-
"description": "Описание 2",
|
|
35
|
-
"button": {
|
|
36
|
-
"href": "",
|
|
37
|
-
"text": "Подробнее",
|
|
38
|
-
"target": "_self",
|
|
39
|
-
"version": "primary"
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"image": {
|
|
44
|
-
"format": "webp",
|
|
45
|
-
"size": {
|
|
46
|
-
"width": 180,
|
|
47
|
-
"height": 180
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
"title": "Заголовок 3",
|
|
51
|
-
"description": "Описание 3",
|
|
52
|
-
"socialMedia": [
|
|
53
|
-
{ "href": "https://t.me" },
|
|
54
|
-
{ "href": "https://vk.com" },
|
|
55
|
-
{ "href": "https://ok.ru" }
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
],
|
|
59
|
-
"version": "primary"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import { useCarouselControls } from '../../hooks/useCarouselControls';
|
|
3
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
4
|
-
import { BlockWrapper } from '../../ui-kit/BlockWrapper';
|
|
5
|
-
import { renderArrows } from '../../ui-kit/Button/renderArrows';
|
|
6
|
-
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
7
|
-
import { RecommendationCard } from './RecommendationCard';
|
|
8
|
-
import type { RecommendationContent } from './RecommendationContent';
|
|
9
|
-
|
|
10
|
-
const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
|
|
11
|
-
const CARD_VIEW_COUNT = 2;
|
|
12
|
-
const CARD_SHIFT = 525;
|
|
13
|
-
|
|
14
|
-
export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
|
|
15
|
-
|
|
16
|
-
export const Recommendation = JSX<RecommendationProps>(
|
|
17
|
-
({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
|
|
18
|
-
const [activeIndex, controls] = useCarouselControls({
|
|
19
|
-
itemCount: recommendations.length,
|
|
20
|
-
visibleItemCount: CARD_VIEW_COUNT,
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<BlockWrapper
|
|
25
|
-
className={`relative font-sans p-9 overflow-hidden text-center ${className}`}
|
|
26
|
-
version={version}
|
|
27
|
-
{...rest}
|
|
28
|
-
>
|
|
29
|
-
{title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
|
|
30
|
-
<div>
|
|
31
|
-
<div
|
|
32
|
-
className="flex duration-1000 gap-3.5"
|
|
33
|
-
style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
|
|
34
|
-
role="list"
|
|
35
|
-
>
|
|
36
|
-
{recommendations.length
|
|
37
|
-
? recommendations.map((card, i) => (
|
|
38
|
-
<RecommendationCard
|
|
39
|
-
key={String(i)}
|
|
40
|
-
version={version}
|
|
41
|
-
className="border-gray group-data-secondary:border-white/50"
|
|
42
|
-
{...card}
|
|
43
|
-
/>
|
|
44
|
-
))
|
|
45
|
-
: null}
|
|
46
|
-
</div>
|
|
47
|
-
{renderArrows({
|
|
48
|
-
...controls,
|
|
49
|
-
btnClass: ['left-8', 'right-8'],
|
|
50
|
-
className: 'top-1/2 mt-3',
|
|
51
|
-
})}
|
|
52
|
-
</div>
|
|
53
|
-
<div
|
|
54
|
-
className={`${BLUR_BLOCK_CLASSES} left-0 ${
|
|
55
|
-
version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
|
|
56
|
-
}`}
|
|
57
|
-
/>
|
|
58
|
-
<div
|
|
59
|
-
className={`${BLUR_BLOCK_CLASSES} right-0 ${
|
|
60
|
-
version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
|
|
61
|
-
}`}
|
|
62
|
-
/>
|
|
63
|
-
</BlockWrapper>
|
|
64
|
-
);
|
|
65
|
-
},
|
|
66
|
-
);
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
3
|
-
import { BlockWrapper } from '../../ui-kit/BlockWrapper';
|
|
4
|
-
import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
|
|
5
|
-
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
6
|
-
import { Img } from '../../ui-kit/Img/Img';
|
|
7
|
-
import { List } from '../../ui-kit/List/List';
|
|
8
|
-
import { BaseTile } from '../BaseTile/BaseTile';
|
|
9
|
-
import { SocialMedia } from '../Footer/SocialMedia';
|
|
10
|
-
import type { RecommendationCardTypes } from './RecommendationContent';
|
|
11
|
-
|
|
12
|
-
export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
|
|
13
|
-
|
|
14
|
-
export const RecommendationCard = JSX<RecommendationCardProps>(
|
|
15
|
-
({ className = '', title, description, items, image, socialMedia, button, ...rest }) => {
|
|
16
|
-
const tileTitle = title ? (
|
|
17
|
-
<Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
|
|
18
|
-
) : null;
|
|
19
|
-
const tileImage = image?.src ? (
|
|
20
|
-
<Img className="absolute bottom-0 right-0 m-0" image={image} />
|
|
21
|
-
) : null;
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<BlockWrapper
|
|
25
|
-
className={`relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`}
|
|
26
|
-
role="listitem"
|
|
27
|
-
{...rest}
|
|
28
|
-
>
|
|
29
|
-
<BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
|
|
30
|
-
<div className="h-full flex flex-col justify-between">
|
|
31
|
-
{description ? <span className="mb-2">{description}</span> : null}
|
|
32
|
-
{items?.length ? (
|
|
33
|
-
<List
|
|
34
|
-
className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
|
|
35
|
-
items={items}
|
|
36
|
-
/>
|
|
37
|
-
) : null}
|
|
38
|
-
{socialMedia ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
|
|
39
|
-
{button?.text ? (
|
|
40
|
-
<div className="pt-2">
|
|
41
|
-
{renderButtonsSection([button], { buttonClassName: 'mt-16 px-5' })}
|
|
42
|
-
</div>
|
|
43
|
-
) : null}
|
|
44
|
-
</div>
|
|
45
|
-
</BaseTile>
|
|
46
|
-
</BlockWrapper>
|
|
47
|
-
);
|
|
48
|
-
},
|
|
49
|
-
);
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
|
|
2
|
-
import type { UniBlockContent } from '../../model/JSXBlock';
|
|
3
|
-
import type { LinkCommonProps } from '../../model/LinkProps';
|
|
4
|
-
import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
|
|
5
|
-
import { ImageContent } from '../../ui-kit/Img/ImgProps';
|
|
6
|
-
import type { ListContent } from '../../ui-kit/List/ListContent';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* @title Карточка
|
|
10
|
-
*/
|
|
11
|
-
export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
|
|
12
|
-
/**
|
|
13
|
-
* @title Соц сети
|
|
14
|
-
* @minItems 3
|
|
15
|
-
*/
|
|
16
|
-
socialMedia?: LinkCommonProps[];
|
|
17
|
-
button?: ButtonProps;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* @title Рекомендации
|
|
22
|
-
*/
|
|
23
|
-
export type RecommendationContent = UniBlockContent &
|
|
24
|
-
TitleProps & {
|
|
25
|
-
/** @title Карточки */
|
|
26
|
-
recommendations?: RecommendationCardTypes[];
|
|
27
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"content": {
|
|
3
|
-
"title": "Блок рекомендаций",
|
|
4
|
-
"recommendations": [
|
|
5
|
-
{
|
|
6
|
-
"image": {
|
|
7
|
-
"format": "webp",
|
|
8
|
-
"size": {
|
|
9
|
-
"width": 180,
|
|
10
|
-
"height": 180
|
|
11
|
-
}
|
|
12
|
-
},
|
|
13
|
-
"title": "Заголовок 1",
|
|
14
|
-
"description": "Описание 1",
|
|
15
|
-
"socialMedia": [
|
|
16
|
-
{ "href": "https://t.me" },
|
|
17
|
-
{ "href": "https://vk.com" },
|
|
18
|
-
{ "href": "https://ok.ru" }
|
|
19
|
-
],
|
|
20
|
-
"button": {
|
|
21
|
-
"text": "",
|
|
22
|
-
"version": "secondary"
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"image": {
|
|
27
|
-
"format": "webp",
|
|
28
|
-
"size": {
|
|
29
|
-
"width": 180,
|
|
30
|
-
"height": 180
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
"title": "Заголовок 2",
|
|
34
|
-
"description": "Описание 2",
|
|
35
|
-
"button": {
|
|
36
|
-
"href": "",
|
|
37
|
-
"text": "Подробнее",
|
|
38
|
-
"target": "_self",
|
|
39
|
-
"version": "primary"
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
"image": {
|
|
44
|
-
"format": "webp",
|
|
45
|
-
"size": {
|
|
46
|
-
"width": 180,
|
|
47
|
-
"height": 180
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
"title": "Заголовок 3",
|
|
51
|
-
"description": "Описание 3",
|
|
52
|
-
"socialMedia": [
|
|
53
|
-
{ "href": "https://t.me" },
|
|
54
|
-
{ "href": "https://vk.com" },
|
|
55
|
-
{ "href": "https://ok.ru" }
|
|
56
|
-
]
|
|
57
|
-
}
|
|
58
|
-
],
|
|
59
|
-
"version": "primary"
|
|
60
|
-
}
|
|
61
|
-
}
|
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
import '../../setup-fixture';
|
|
2
|
-
import { Recommendation, RecommendationProps } from './Recommendation';
|
|
3
|
-
import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
|
|
4
|
-
import type { LinkProps } from '../../model/LinkProps';
|
|
5
|
-
import type { Picture } from '../../model/Picture';
|
|
6
|
-
|
|
7
|
-
const cowCard: Picture = {
|
|
8
|
-
src: 'cow-card.png',
|
|
9
|
-
format: 'webp',
|
|
10
|
-
size: {
|
|
11
|
-
width: 290,
|
|
12
|
-
height: 290,
|
|
13
|
-
},
|
|
14
|
-
title: 'cow-card',
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
const productBasket: Picture = {
|
|
18
|
-
src: 'product-basket.png',
|
|
19
|
-
format: 'webp',
|
|
20
|
-
size: {
|
|
21
|
-
width: 290,
|
|
22
|
-
height: 290,
|
|
23
|
-
},
|
|
24
|
-
title: 'product-basket',
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
const five: Picture = {
|
|
28
|
-
src: '5.svg',
|
|
29
|
-
format: 'webp',
|
|
30
|
-
size: {
|
|
31
|
-
width: 268,
|
|
32
|
-
height: 218,
|
|
33
|
-
},
|
|
34
|
-
title: 'five',
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const card: Picture = {
|
|
38
|
-
src: '120.png',
|
|
39
|
-
format: 'webp',
|
|
40
|
-
size: {
|
|
41
|
-
width: 268,
|
|
42
|
-
height: 218,
|
|
43
|
-
},
|
|
44
|
-
title: '120',
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
const socialMedia: LinkProps[] = [
|
|
48
|
-
{ href: 'https://t.me' },
|
|
49
|
-
{ href: 'https://vk.com' },
|
|
50
|
-
{ href: 'https://ok.ru' },
|
|
51
|
-
];
|
|
52
|
-
|
|
53
|
-
const button: ButtonWithIconProps = {
|
|
54
|
-
href: 'https://rshb.ru',
|
|
55
|
-
text: 'Подробнее',
|
|
56
|
-
target: '_blank',
|
|
57
|
-
version: 'secondary',
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export const defaultProps: RecommendationProps = {
|
|
61
|
-
title: 'Мы в социальных сетях',
|
|
62
|
-
recommendations: [
|
|
63
|
-
{
|
|
64
|
-
title: 'РоссельхозБанк',
|
|
65
|
-
items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
|
|
66
|
-
image: cowCard,
|
|
67
|
-
socialMedia,
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
title: 'Своё Родное',
|
|
71
|
-
description: 'Льготный период 120 дней',
|
|
72
|
-
image: productBasket,
|
|
73
|
-
socialMedia,
|
|
74
|
-
},
|
|
75
|
-
{
|
|
76
|
-
title: 'Своё Фермерство',
|
|
77
|
-
description: 'Льготный период 120 дней',
|
|
78
|
-
image: cowCard,
|
|
79
|
-
socialMedia,
|
|
80
|
-
},
|
|
81
|
-
{
|
|
82
|
-
title: 'Кредитные карты',
|
|
83
|
-
description: 'Льготный период 120 дней',
|
|
84
|
-
image: productBasket,
|
|
85
|
-
button,
|
|
86
|
-
},
|
|
87
|
-
{
|
|
88
|
-
title: 'Кредитные карты',
|
|
89
|
-
description: 'Льготный период 120 дней',
|
|
90
|
-
image: cowCard,
|
|
91
|
-
},
|
|
92
|
-
],
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
export const shortProps: RecommendationProps = {
|
|
96
|
-
title: 'Также интересуются',
|
|
97
|
-
recommendations: [
|
|
98
|
-
{
|
|
99
|
-
title: 'Кредиты',
|
|
100
|
-
items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
|
|
101
|
-
image: five,
|
|
102
|
-
},
|
|
103
|
-
{
|
|
104
|
-
title: 'Кредитная карта с длинным заголовком',
|
|
105
|
-
description: 'Льготный период 120 дней',
|
|
106
|
-
image: card,
|
|
107
|
-
},
|
|
108
|
-
{
|
|
109
|
-
title: 'Кредиты',
|
|
110
|
-
items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
|
|
111
|
-
image: five,
|
|
112
|
-
},
|
|
113
|
-
{
|
|
114
|
-
title: 'Кредитная карта с длинным заголовком',
|
|
115
|
-
description: 'Льготный период 120 дней',
|
|
116
|
-
image: card,
|
|
117
|
-
},
|
|
118
|
-
],
|
|
119
|
-
};
|
|
120
|
-
|
|
121
|
-
export const buttonProps: RecommendationProps = {
|
|
122
|
-
title: 'Также интересуются',
|
|
123
|
-
recommendations: [
|
|
124
|
-
{
|
|
125
|
-
title: 'Кредиты',
|
|
126
|
-
items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
|
|
127
|
-
image: five,
|
|
128
|
-
button,
|
|
129
|
-
},
|
|
130
|
-
{
|
|
131
|
-
title: 'Кредитная карта с длинным заголовком',
|
|
132
|
-
description: 'Льготный период 120 дней',
|
|
133
|
-
image: card,
|
|
134
|
-
button,
|
|
135
|
-
},
|
|
136
|
-
{
|
|
137
|
-
title: 'Кредиты',
|
|
138
|
-
items: ['Свежие новости', 'Акции и предложения', 'Ставки и котировки'],
|
|
139
|
-
image: five,
|
|
140
|
-
button,
|
|
141
|
-
},
|
|
142
|
-
],
|
|
143
|
-
};
|
|
144
|
-
|
|
145
|
-
export default {
|
|
146
|
-
default: (
|
|
147
|
-
<div className="container grid grid-cols-12 mb-1">
|
|
148
|
-
<Recommendation className="col-span-12" {...defaultProps} />
|
|
149
|
-
</div>
|
|
150
|
-
),
|
|
151
|
-
'secondary private clients': (
|
|
152
|
-
<div className="container grid grid-cols-12" data-theme="pc">
|
|
153
|
-
<Recommendation className="col-span-12" {...defaultProps} version="secondary" />
|
|
154
|
-
</div>
|
|
155
|
-
),
|
|
156
|
-
'secondary business clients': (
|
|
157
|
-
<div className="container grid grid-cols-12" data-theme="bc">
|
|
158
|
-
<Recommendation className="col-span-12" {...defaultProps} version="secondary" />
|
|
159
|
-
</div>
|
|
160
|
-
),
|
|
161
|
-
'secondary ecosystem own': (
|
|
162
|
-
<div className="container grid grid-cols-12" data-theme="eo">
|
|
163
|
-
<Recommendation className="col-span-12" {...defaultProps} version="secondary" />
|
|
164
|
-
</div>
|
|
165
|
-
),
|
|
166
|
-
'secondary private short': (
|
|
167
|
-
<div className="container grid grid-cols-12" data-theme="pc">
|
|
168
|
-
<Recommendation className="col-span-12" {...shortProps} version="secondary" />
|
|
169
|
-
</div>
|
|
170
|
-
),
|
|
171
|
-
'with button': (
|
|
172
|
-
<div className="container grid grid-cols-12 mb-1">
|
|
173
|
-
<Recommendation className="col-span-12" {...buttonProps} />
|
|
174
|
-
</div>
|
|
175
|
-
),
|
|
176
|
-
};
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import { useCarouselControls } from '../../hooks/useCarouselControls';
|
|
3
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
4
|
-
import { BlockWrapper } from '../../ui-kit/BlockWrapper';
|
|
5
|
-
import { renderArrows } from '../../ui-kit/Button/renderArrows';
|
|
6
|
-
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
7
|
-
import { RecommendationCard } from './RecommendationCard';
|
|
8
|
-
import type { RecommendationContent } from './RecommendationContent';
|
|
9
|
-
|
|
10
|
-
const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
|
|
11
|
-
const CARD_VIEW_COUNT = 2;
|
|
12
|
-
const CARD_SHIFT = 525;
|
|
13
|
-
|
|
14
|
-
export interface RecommendationProps extends RecommendationContent, UniBlockProps {}
|
|
15
|
-
|
|
16
|
-
export const Recommendation = JSX<RecommendationProps>(
|
|
17
|
-
({ recommendations = [], className = '', title, version = 'primary', ...rest }) => {
|
|
18
|
-
const [activeIndex, controls] = useCarouselControls({
|
|
19
|
-
itemCount: recommendations.length,
|
|
20
|
-
visibleItemCount: CARD_VIEW_COUNT,
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<BlockWrapper
|
|
25
|
-
className={`relative font-sans p-9 overflow-hidden text-center ${className}`}
|
|
26
|
-
version={version}
|
|
27
|
-
{...rest}
|
|
28
|
-
>
|
|
29
|
-
{title ? <Heading headingType="h3" className="mb-6" title={title} /> : null}
|
|
30
|
-
<div>
|
|
31
|
-
<div
|
|
32
|
-
className="flex duration-1000 gap-3.5"
|
|
33
|
-
style={{ transform: `translateX(-${activeIndex * CARD_SHIFT}px)` }}
|
|
34
|
-
role="list"
|
|
35
|
-
>
|
|
36
|
-
{recommendations.length
|
|
37
|
-
? recommendations.map((card, i) => (
|
|
38
|
-
<RecommendationCard
|
|
39
|
-
key={String(i)}
|
|
40
|
-
version={version}
|
|
41
|
-
className="border-gray group-data-secondary:border-white/50"
|
|
42
|
-
{...card}
|
|
43
|
-
/>
|
|
44
|
-
))
|
|
45
|
-
: null}
|
|
46
|
-
</div>
|
|
47
|
-
{renderArrows({
|
|
48
|
-
...controls,
|
|
49
|
-
btnClass: ['left-8', 'right-8'],
|
|
50
|
-
className: 'top-1/2 mt-3',
|
|
51
|
-
})}
|
|
52
|
-
</div>
|
|
53
|
-
<div
|
|
54
|
-
className={`${BLUR_BLOCK_CLASSES} left-0 ${
|
|
55
|
-
version === 'secondary' ? 'bg-opacity-from-main' : 'bg-opacity-from-white'
|
|
56
|
-
}`}
|
|
57
|
-
/>
|
|
58
|
-
<div
|
|
59
|
-
className={`${BLUR_BLOCK_CLASSES} right-0 ${
|
|
60
|
-
version === 'secondary' ? 'bg-opacity-to-main' : 'bg-opacity-to-white'
|
|
61
|
-
}`}
|
|
62
|
-
/>
|
|
63
|
-
</BlockWrapper>
|
|
64
|
-
);
|
|
65
|
-
},
|
|
66
|
-
);
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { JSX } from '@redneckz/uni-jsx';
|
|
2
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
3
|
-
import { BlockWrapper } from '../../ui-kit/BlockWrapper';
|
|
4
|
-
import { renderButtonsSection } from '../../ui-kit/Button/renderButtonsSection';
|
|
5
|
-
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
6
|
-
import { Img } from '../../ui-kit/Img/Img';
|
|
7
|
-
import { List } from '../../ui-kit/List/List';
|
|
8
|
-
import { BaseTile } from '../BaseTile/BaseTile';
|
|
9
|
-
import { SocialMedia } from '../Footer/SocialMedia';
|
|
10
|
-
import type { RecommendationCardTypes } from './RecommendationContent';
|
|
11
|
-
|
|
12
|
-
export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {}
|
|
13
|
-
|
|
14
|
-
export const RecommendationCard = JSX<RecommendationCardProps>(
|
|
15
|
-
({ className = '', title, description, items, image, socialMedia, button, ...rest }) => {
|
|
16
|
-
const tileTitle = title ? (
|
|
17
|
-
<Heading headingType="h5" as="h3" className="mb-3.5 z-10" title={title} />
|
|
18
|
-
) : null;
|
|
19
|
-
const tileImage = image?.src ? (
|
|
20
|
-
<Img className="absolute bottom-0 right-0 m-0" image={image} />
|
|
21
|
-
) : null;
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<BlockWrapper
|
|
25
|
-
className={`relative overflow-hidden text-left border border-solid box-border p-7 min-w-[524px] min-h-[218px] ${className}`}
|
|
26
|
-
role="listitem"
|
|
27
|
-
{...rest}
|
|
28
|
-
>
|
|
29
|
-
<BaseTile className="flex justify-between" title={tileTitle} image={tileImage}>
|
|
30
|
-
<div className="h-full flex flex-col justify-between">
|
|
31
|
-
{description ? <span className="mb-2">{description}</span> : null}
|
|
32
|
-
{items?.length ? (
|
|
33
|
-
<List
|
|
34
|
-
className="text-xl-light flex flex-col flex-1 gap-2 max-w-[236px]"
|
|
35
|
-
items={items}
|
|
36
|
-
/>
|
|
37
|
-
) : null}
|
|
38
|
-
{socialMedia ? <SocialMedia className="pt-10 pb-0" media={socialMedia} /> : null}
|
|
39
|
-
{button?.text ? (
|
|
40
|
-
<div className="pt-2">
|
|
41
|
-
{renderButtonsSection([button], { buttonClassName: 'mt-16 px-5' })}
|
|
42
|
-
</div>
|
|
43
|
-
) : null}
|
|
44
|
-
</div>
|
|
45
|
-
</BaseTile>
|
|
46
|
-
</BlockWrapper>
|
|
47
|
-
);
|
|
48
|
-
},
|
|
49
|
-
);
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import type { HeadlineCommonProps, TitleProps } from '../../model/HeadlineType';
|
|
2
|
-
import type { UniBlockContent } from '../../model/JSXBlock';
|
|
3
|
-
import type { LinkCommonProps } from '../../model/LinkProps';
|
|
4
|
-
import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
|
|
5
|
-
import { ImageContent } from '../../ui-kit/Img/ImgProps';
|
|
6
|
-
import type { ListContent } from '../../ui-kit/List/ListContent';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* @title Карточка
|
|
10
|
-
*/
|
|
11
|
-
export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
|
|
12
|
-
/**
|
|
13
|
-
* @title Соц сети
|
|
14
|
-
* @minItems 3
|
|
15
|
-
*/
|
|
16
|
-
socialMedia?: LinkCommonProps[];
|
|
17
|
-
button?: ButtonProps;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* @title Рекомендации
|
|
22
|
-
*/
|
|
23
|
-
export type RecommendationContent = UniBlockContent &
|
|
24
|
-
TitleProps & {
|
|
25
|
-
/** @title Карточки */
|
|
26
|
-
recommendations?: RecommendationCardTypes[];
|
|
27
|
-
};
|