@redneckz/wildless-cms-uni-blocks 0.9.7 → 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 +15 -38
- 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/CarouselProductCard/CarouselProductCard.js +1 -1
- package/dist/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
- package/dist/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
- package/dist/components/CarouselProgramsCard/CarouselProgramsCard.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/dist/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
- package/dist/ui-kit/LinkWrapper/LinkWrapper.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/CarouselProductCard/CarouselProductCard.js +1 -1
- package/lib/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
- package/lib/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
- package/lib/components/CarouselProgramsCard/CarouselProgramsCard.js.map +1 -1
- 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/lib/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
- package/lib/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
- package/lib/ui-kit/SwipeListControl/SwipeListItem.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/CarouselProductCard/CarouselProductCard.js +1 -1
- package/mobile/dist/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
- package/mobile/dist/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
- package/mobile/dist/components/CarouselProgramsCard/CarouselProgramsCard.js.map +1 -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/dist/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
- package/mobile/dist/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
- package/mobile/lib/components/CarouselProductCard/CarouselProductCard.js +1 -1
- package/mobile/lib/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
- package/mobile/lib/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
- package/mobile/lib/components/CarouselProgramsCard/CarouselProgramsCard.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/lib/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
- package/mobile/lib/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
- package/mobile/lib/ui-kit/SwipeListControl/SwipeListItem.js.map +1 -1
- package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx +1 -1
- package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx +3 -3
- package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json +1 -0
- package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx +19 -30
- 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/mobile/src/ui-kit/LinkWrapper/LinkWrapper.tsx +2 -1
- package/mobile/src/ui-kit/SwipeListControl/SwipeListItem.tsx +1 -1
- package/package.json +1 -1
- package/src/components/Blocks.ts +0 -2
- package/src/components/Carousel/Carousel.fixture.tsx +25 -2
- package/src/components/CarouselProductCard/CarouselProductCard.tsx +1 -1
- package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx +2 -2
- package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx +3 -3
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json +1 -0
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx +28 -1
- package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx +19 -30
- 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/src/ui-kit/LinkWrapper/LinkWrapper.tsx +2 -1
- package/src/ui-kit/SwipeListControl/SwipeListItem.tsx +1 -1
- 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,6 +1,7 @@
|
|
|
1
1
|
import type { BlockVersion } from '../../model/BlockVersion';
|
|
2
2
|
import type { BulletsProps } from '../../model/Bullets';
|
|
3
3
|
import type { ButtonCommonIconProps } from '../../model/Button';
|
|
4
|
+
import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
|
|
4
5
|
import type { DefaultListItemType } from '../../model/DefaultListItemType';
|
|
5
6
|
import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
|
|
6
7
|
import type { UniBlockContent } from '../../model/JSXBlock';
|
|
@@ -33,8 +34,7 @@ export type Step = DefaultStep | RichTextStep;
|
|
|
33
34
|
* @title Блок шаги
|
|
34
35
|
*/
|
|
35
36
|
export type StepsBlockContent = UniBlockContent &
|
|
36
|
-
HeadlineCommonProps &
|
|
37
|
-
ButtonCommonIconProps & {
|
|
37
|
+
HeadlineCommonProps & {
|
|
38
38
|
/** @title Линии */
|
|
39
39
|
showLines?: boolean;
|
|
40
40
|
/**
|
|
@@ -43,7 +43,15 @@ export type StepsBlockContent = UniBlockContent &
|
|
|
43
43
|
* @maxItems 5
|
|
44
44
|
*/
|
|
45
45
|
steps?: Step[];
|
|
46
|
+
/**
|
|
47
|
+
* @title Тема шагов
|
|
48
|
+
*/
|
|
46
49
|
stepVersion?: BlockVersion;
|
|
47
50
|
/** @title Размер шагов */
|
|
48
51
|
size?: SizeVersion; // TODO: mobile content
|
|
52
|
+
/**
|
|
53
|
+
* @title Кнопки
|
|
54
|
+
* @maxItems 2
|
|
55
|
+
*/
|
|
56
|
+
buttons?: ButtonWithIconProps[];
|
|
49
57
|
};
|
|
@@ -7,8 +7,9 @@ export type StyleType = {
|
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export const STEPS_BLOCK_STYLE: StyleType = {
|
|
10
|
-
description:
|
|
11
|
-
|
|
10
|
+
description:
|
|
11
|
+
'text-white/80 text-l-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
|
|
12
|
+
iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
|
|
12
13
|
iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
|
|
13
14
|
iconConnector: 'bg-white group-data-primary:bg-secondary-light',
|
|
14
15
|
dot: 'bg-white/80 group-data-primary:bg-secondary-text',
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
2
|
import { useLink } from '../../hooks/useLink';
|
|
3
3
|
import type { Target } from '../../model/LinkProps';
|
|
4
|
+
import { style } from '../../utils/style';
|
|
4
5
|
|
|
5
6
|
interface LinkWrapperProps {
|
|
6
7
|
className?: string;
|
|
@@ -14,7 +15,7 @@ export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target
|
|
|
14
15
|
const Tag = href ? 'a' : 'div';
|
|
15
16
|
|
|
16
17
|
return (
|
|
17
|
-
<Tag className={className} {...(href ? linkProps : {})}>
|
|
18
|
+
<Tag className={style('block', className)} {...(href ? linkProps : {})}>
|
|
18
19
|
{children}
|
|
19
20
|
</Tag>
|
|
20
21
|
);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
2
|
import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
|
|
3
3
|
import {
|
|
4
|
-
type IntersectionObserverOptions,
|
|
5
4
|
useIntersectionObserver,
|
|
5
|
+
type IntersectionObserverOptions,
|
|
6
6
|
} from '../../hooks/useIntersectionObserver';
|
|
7
7
|
|
|
8
8
|
/**
|
package/package.json
CHANGED
package/src/components/Blocks.ts
CHANGED
|
@@ -42,7 +42,6 @@ import { ProductBlock } from './ProductBlock/ProductBlock';
|
|
|
42
42
|
import { ProductGallery } from './ProductGallery/ProductGallery';
|
|
43
43
|
import { ProductTile } from './ProductTile/ProductTile';
|
|
44
44
|
import { PromoTile } from './PromoTile/PromoTile';
|
|
45
|
-
import { Recommendation } from './Recommendation/Recommendation';
|
|
46
45
|
import { RichTextBlock } from './RichTextBlock/RichTextBlock';
|
|
47
46
|
import { RollupItem } from './RollupItem/RollupItem';
|
|
48
47
|
import { SafeDepositRental } from './SafeDepositRental/SafeDepositRental';
|
|
@@ -99,7 +98,6 @@ export const Blocks: BlocksRegistry = {
|
|
|
99
98
|
ProductGallery,
|
|
100
99
|
ProductTile,
|
|
101
100
|
PromoTile,
|
|
102
|
-
Recommendation,
|
|
103
101
|
RichTextBlock,
|
|
104
102
|
RollupItem,
|
|
105
103
|
SafeDepositRental,
|
|
@@ -8,7 +8,10 @@ import { CAROUSEL_EVENT_CARD } from '../CarouselEventCard/CarouselEventCard.fixt
|
|
|
8
8
|
import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
|
|
9
9
|
import { PRODUCT_CARD } from '../CarouselProductCard/CarouselProductCard.fixture';
|
|
10
10
|
import { BUSINESS_CARD } from '../CarouselProgramsCard/CarouselProgramsCard.fixture';
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
|
|
13
|
+
CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST,
|
|
14
|
+
} from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
|
|
12
15
|
import { TARIFFS_CARD, TARIFFS_CARD_HIT } from '../CarouselTariffsCard/CarouselTariffsCard.fixture';
|
|
13
16
|
import { Carousel } from './Carousel';
|
|
14
17
|
|
|
@@ -165,7 +168,7 @@ export default {
|
|
|
165
168
|
className="col-span-12"
|
|
166
169
|
isBlur={false}
|
|
167
170
|
isCyclic={false}
|
|
168
|
-
visibleItemCount={
|
|
171
|
+
visibleItemCount={0}
|
|
169
172
|
block={{
|
|
170
173
|
type: 'Carousel',
|
|
171
174
|
blocks: new Array(6).fill({
|
|
@@ -178,6 +181,26 @@ export default {
|
|
|
178
181
|
/>
|
|
179
182
|
</div>
|
|
180
183
|
),
|
|
184
|
+
recommendationsSecondary: (
|
|
185
|
+
<div className="container grid grid-cols-12">
|
|
186
|
+
<Carousel
|
|
187
|
+
className="col-span-12"
|
|
188
|
+
isBlur={false}
|
|
189
|
+
isCyclic={false}
|
|
190
|
+
visibleItemCount={0}
|
|
191
|
+
block={{
|
|
192
|
+
type: 'Carousel',
|
|
193
|
+
blocks: new Array(6).fill({
|
|
194
|
+
type: 'CarouselRecommendationCard',
|
|
195
|
+
content: CAROUSEL_RECOMMENDATION_CARD_SECONDARY,
|
|
196
|
+
style: ['col-span-2'],
|
|
197
|
+
}),
|
|
198
|
+
}}
|
|
199
|
+
options={options}
|
|
200
|
+
/>
|
|
201
|
+
</div>
|
|
202
|
+
),
|
|
203
|
+
|
|
181
204
|
events: (
|
|
182
205
|
<div className="container grid grid-cols-12">
|
|
183
206
|
<Carousel
|
|
@@ -35,7 +35,7 @@ export const CarouselProductCard = JSX<CarouselProductCardProps>(
|
|
|
35
35
|
return (
|
|
36
36
|
<BlockWrapper
|
|
37
37
|
className={style(
|
|
38
|
-
'justify-between min-w-[260px]',
|
|
38
|
+
'h-full flex flex-col justify-between min-w-[260px]',
|
|
39
39
|
'box-border border-solid border border-gray',
|
|
40
40
|
align,
|
|
41
41
|
className,
|
|
@@ -28,9 +28,9 @@ export const BUSINESS_CARD: CarouselProgramsCardContent = {
|
|
|
28
28
|
list,
|
|
29
29
|
};
|
|
30
30
|
|
|
31
|
-
const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard {...BUSINESS_CARD} />;
|
|
31
|
+
const CAROUSEL_BUSINESS_CARD = <CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} />;
|
|
32
32
|
const CAROUSEL_BUSINESS_CARD_SECONDARY = (
|
|
33
|
-
<CarouselProgramsCard {...BUSINESS_CARD} version="secondary" />
|
|
33
|
+
<CarouselProgramsCard className="col-span-4" {...BUSINESS_CARD} version="secondary" />
|
|
34
34
|
);
|
|
35
35
|
|
|
36
36
|
export default {
|
|
@@ -14,14 +14,14 @@ export interface CarouselTariffsCardProps extends CarouselProgramsCardContent, U
|
|
|
14
14
|
export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
|
|
15
15
|
({ className = '', title, icon, list = [], href, target, ...rest }) => {
|
|
16
16
|
return (
|
|
17
|
-
<BlockWrapper className={style('border border-gray
|
|
17
|
+
<BlockWrapper className={style('border border-gray', className)} {...rest}>
|
|
18
18
|
<LinkWrapper className="flex" href={href} target={target}>
|
|
19
19
|
<div className="w-[200px] min-w-[200px] self-center">
|
|
20
20
|
{icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
|
|
21
21
|
{icon?.src ? <Img image={icon} /> : null}
|
|
22
22
|
</div>
|
|
23
23
|
<div className="p-8 pl-3 w-full">
|
|
24
|
-
{title ? <Heading className="
|
|
24
|
+
{title ? <Heading className="mb-3.5" headingType="h5" title={title} /> : null}
|
|
25
25
|
{list.length ? (
|
|
26
26
|
<div className="flex flex-col gap-3">{list?.map(renderList)}</div>
|
|
27
27
|
) : null}
|
|
@@ -34,7 +34,7 @@ export const CarouselProgramsCard = JSX<CarouselTariffsCardProps>(
|
|
|
34
34
|
|
|
35
35
|
const renderList = (_: HeadlineCommonProps, i: number) => (
|
|
36
36
|
<div key={String(i)} className="break-words">
|
|
37
|
-
{_.title ? <div className=
|
|
37
|
+
{_.title ? <div className="text-h6">{_.title}</div> : null}
|
|
38
38
|
{_.description ? <span className="text-l-light mt-1">{_.description}</span> : null}
|
|
39
39
|
</div>
|
|
40
40
|
);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { Picture } from '../../model/Picture';
|
|
2
2
|
import '../../setup-fixture';
|
|
3
|
+
import { Icon } from '../../ui-kit/Icon/Icon';
|
|
3
4
|
import { CarouselRecommendationCard } from './CarouselRecommendationCard';
|
|
4
5
|
import type {
|
|
5
6
|
CarouselRecommendationCardContent,
|
|
6
7
|
RecommendationSocialMedia,
|
|
7
8
|
} from './CarouselRecommendationCardContent';
|
|
8
|
-
import { Icon } from '../../ui-kit/Icon/Icon';
|
|
9
9
|
|
|
10
10
|
const icon: Picture = {
|
|
11
11
|
src: 'product-basket.png',
|
|
@@ -92,6 +92,23 @@ export const CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST: CarouselRecommendationCa
|
|
|
92
92
|
socialMedia: socialMediaWithoutText,
|
|
93
93
|
};
|
|
94
94
|
|
|
95
|
+
export const CAROUSEL_RECOMMENDATION_CARD_SECONDARY: CarouselRecommendationCardContent = {
|
|
96
|
+
title: 'Россельхозбанк',
|
|
97
|
+
description: 'Описание',
|
|
98
|
+
align: 'text-left',
|
|
99
|
+
icon: {
|
|
100
|
+
src: 'cow-card.png',
|
|
101
|
+
format: 'webp',
|
|
102
|
+
size: {
|
|
103
|
+
width: 290,
|
|
104
|
+
height: 290,
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
items: ['Свежие новости', 'Акции и предложенияа', 'Ставки и катировки'],
|
|
108
|
+
version: 'secondary',
|
|
109
|
+
socialMedia: socialMediaWithoutText,
|
|
110
|
+
};
|
|
111
|
+
|
|
95
112
|
export default {
|
|
96
113
|
default: (
|
|
97
114
|
<div className="container grid grid-cols-12 mb-1">
|
|
@@ -107,6 +124,16 @@ export default {
|
|
|
107
124
|
/>
|
|
108
125
|
</div>
|
|
109
126
|
),
|
|
127
|
+
secondaryCenter: (
|
|
128
|
+
<div className="container grid grid-cols-12 mb-1">
|
|
129
|
+
<CarouselRecommendationCard
|
|
130
|
+
className="col-span-12"
|
|
131
|
+
version="secondary"
|
|
132
|
+
align="text-center"
|
|
133
|
+
{...CAROUSEL_RECOMMENDATION_CARD_SECONDARY}
|
|
134
|
+
/>
|
|
135
|
+
</div>
|
|
136
|
+
),
|
|
110
137
|
gray: (
|
|
111
138
|
<div className="container grid grid-cols-12 mb-1">
|
|
112
139
|
<CarouselRecommendationCard
|
|
@@ -2,22 +2,18 @@ import { JSX } from '@redneckz/uni-jsx';
|
|
|
2
2
|
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
3
3
|
import type { Picture } from '../../model/Picture';
|
|
4
4
|
import { BlockWrapper } from '../../ui-kit/BlockWrapper';
|
|
5
|
-
import { Heading } from '../../ui-kit/Heading/Heading';
|
|
6
5
|
import { Img } from '../../ui-kit/Img/Img';
|
|
7
6
|
import { LinkWrapper } from '../../ui-kit/LinkWrapper/LinkWrapper';
|
|
8
7
|
import { List } from '../../ui-kit/List/List';
|
|
9
|
-
import { Paragraph } from '../../ui-kit/Paragraph/Paragraph';
|
|
10
8
|
import { getIconWithVersion } from '../../utils/getIconWithVersion';
|
|
11
9
|
import { style } from '../../utils/style';
|
|
12
10
|
import { SocialMedia } from '../Footer/SocialMedia';
|
|
11
|
+
import { Headline } from '../Headline/Headline';
|
|
13
12
|
import type { CarouselRecommendationCardContent } from './CarouselRecommendationCardContent';
|
|
14
13
|
|
|
15
14
|
const BORDER_STYLE =
|
|
16
15
|
'border border-solid border-gray group-data-secondary:border-white/50 group-data-gray:border-main-divider';
|
|
17
16
|
|
|
18
|
-
const setAdditionalIconStyles = (items: string[]) =>
|
|
19
|
-
items.length ? 'w-1/2 flex-1 justify-center' : 'w-full justify-end';
|
|
20
|
-
|
|
21
17
|
export interface RecommendationCardProps extends CarouselRecommendationCardContent, UniBlockProps {}
|
|
22
18
|
|
|
23
19
|
export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
|
|
@@ -30,51 +26,44 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
|
|
|
30
26
|
socialMedia = [],
|
|
31
27
|
target,
|
|
32
28
|
title,
|
|
29
|
+
align = 'text-left',
|
|
33
30
|
version = 'primary',
|
|
34
31
|
...rest
|
|
35
32
|
}) => {
|
|
36
33
|
return (
|
|
37
34
|
<BlockWrapper
|
|
38
35
|
className={style(
|
|
39
|
-
'relative p-
|
|
36
|
+
'relative p-7 min-w-[524px] min-h-[218px] h-full box-border group-data-gray:bg-main-divider/50',
|
|
40
37
|
BORDER_STYLE,
|
|
41
38
|
className,
|
|
42
39
|
)}
|
|
43
40
|
version={version}
|
|
44
41
|
{...rest}
|
|
45
42
|
>
|
|
46
|
-
<LinkWrapper
|
|
47
|
-
<
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</Paragraph>
|
|
43
|
+
<LinkWrapper href={href} target={target}>
|
|
44
|
+
<Headline
|
|
45
|
+
className="mb-4"
|
|
46
|
+
title={title}
|
|
47
|
+
description={description}
|
|
48
|
+
headlineVersion="S"
|
|
49
|
+
isPadding={false}
|
|
50
|
+
align={align}
|
|
51
|
+
/>
|
|
52
|
+
<div className="w-1/2 h-full flex flex-col flex-1 justify-end">
|
|
53
|
+
{items.length ? (
|
|
54
|
+
<List className="flex flex-col gap-2" itemClassName="text-l-light" items={items} />
|
|
59
55
|
) : null}
|
|
56
|
+
{socialMedia.length ? <SocialMedia className="pt-10" media={socialMedia} /> : null}
|
|
60
57
|
</div>
|
|
61
|
-
|
|
62
|
-
<div className="w-1/2 h-full flex flex-col flex-1 justify-end">
|
|
63
|
-
{items.length ? (
|
|
64
|
-
<List className="text-xl-light flex flex-col gap-2 pb-16 mb-3" items={items} />
|
|
65
|
-
) : null}
|
|
66
|
-
{socialMedia.length ? <SocialMedia className="pb-0" media={socialMedia} /> : null}
|
|
67
|
-
</div>
|
|
68
|
-
{renderIconBlock(icon, items)}
|
|
69
|
-
</div>
|
|
58
|
+
{renderIconBlock(icon)}
|
|
70
59
|
</LinkWrapper>
|
|
71
60
|
</BlockWrapper>
|
|
72
61
|
);
|
|
73
62
|
},
|
|
74
63
|
);
|
|
75
64
|
|
|
76
|
-
const renderIconBlock = (icon: Picture | undefined
|
|
77
|
-
<div className=
|
|
65
|
+
const renderIconBlock = (icon: Picture | undefined) => (
|
|
66
|
+
<div className="absolute bottom-0 right-0">
|
|
78
67
|
{icon?.icon ? <Img image={getIconWithVersion(icon)} asSVG /> : null}
|
|
79
68
|
{icon?.src ? <Img image={icon} /> : null}
|
|
80
69
|
</div>
|
|
@@ -5,6 +5,7 @@ import type { LinkCommonProps } from '../../model/LinkProps';
|
|
|
5
5
|
import type { IconProps } from '../../model/Picture';
|
|
6
6
|
import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
|
|
7
7
|
import type { ListContent } from '../../ui-kit/List/ListContent';
|
|
8
|
+
import type { TextAlign } from '../../ui-kit/Text/TextProps';
|
|
8
9
|
|
|
9
10
|
export type RecommendationSocialMedia = LinkCommonProps &
|
|
10
11
|
IconProps &
|
|
@@ -23,4 +24,5 @@ export type CarouselRecommendationCardContent = UniBlockContent &
|
|
|
23
24
|
LinkCommonProps & {
|
|
24
25
|
/** @title Соц сети */
|
|
25
26
|
socialMedia?: RecommendationSocialMedia[];
|
|
27
|
+
align?: TextAlign;
|
|
26
28
|
};
|
|
@@ -83,11 +83,14 @@ const STEPS_WITH_BUTTON_PROPS: StepsBlockProps = {
|
|
|
83
83
|
...COMMON_PROPS,
|
|
84
84
|
steps: STEPS.map((step) => ({
|
|
85
85
|
...step,
|
|
86
|
-
button: { text: 'Оформить' },
|
|
87
86
|
})),
|
|
88
87
|
title: TITLE,
|
|
89
88
|
stepVersion: 'primary',
|
|
90
89
|
size: 'small',
|
|
90
|
+
buttons: [
|
|
91
|
+
{ text: 'Оформить', version: 'primary' },
|
|
92
|
+
{ text: 'Оформить', version: 'primary' },
|
|
93
|
+
],
|
|
91
94
|
};
|
|
92
95
|
|
|
93
96
|
export default {
|
|
@@ -108,13 +111,16 @@ export default {
|
|
|
108
111
|
showLines={false}
|
|
109
112
|
steps={STEPS_WITH_ICONS}
|
|
110
113
|
version="secondary"
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
buttons={[
|
|
115
|
+
{
|
|
116
|
+
text: 'Отправить заявку',
|
|
117
|
+
href: 'https://www.rshb.ru/',
|
|
118
|
+
target: '_blank',
|
|
119
|
+
icon: { icon: 'ComfortableCompIcon' },
|
|
120
|
+
iconRight: { icon: 'ComfortableCompIcon' },
|
|
121
|
+
version: 'secondary',
|
|
122
|
+
},
|
|
123
|
+
]}
|
|
118
124
|
/>
|
|
119
125
|
</div>
|
|
120
126
|
),
|
|
@@ -25,7 +25,7 @@ export const StepsBlock = JSX<StepsBlockProps>(
|
|
|
25
25
|
className = '',
|
|
26
26
|
showLines = true,
|
|
27
27
|
steps = [],
|
|
28
|
-
|
|
28
|
+
buttons,
|
|
29
29
|
size = 'normal',
|
|
30
30
|
version = 'primary',
|
|
31
31
|
stepVersion = 'gray',
|
|
@@ -39,6 +39,8 @@ export const StepsBlock = JSX<StepsBlockProps>(
|
|
|
39
39
|
const lineOpacity = getLineOpacity(showLines);
|
|
40
40
|
const paddingX = getPaddingX(steps.length);
|
|
41
41
|
|
|
42
|
+
const isMainButton = Boolean(buttons?.every((b) => b?.text));
|
|
43
|
+
|
|
42
44
|
return (
|
|
43
45
|
<BlockWrapper
|
|
44
46
|
className={style(
|
|
@@ -66,11 +68,11 @@ export const StepsBlock = JSX<StepsBlockProps>(
|
|
|
66
68
|
shortGaps ? 'gap-x-3' : 'gap-x-[101px]',
|
|
67
69
|
)}
|
|
68
70
|
>
|
|
69
|
-
{steps.map(renderStep({ styleMap, isMainButton
|
|
71
|
+
{steps.map(renderStep({ styleMap, isMainButton, version }))}
|
|
70
72
|
</div>
|
|
71
73
|
</div>
|
|
72
74
|
) : null}
|
|
73
|
-
{
|
|
75
|
+
{renderButtonsSection(buttons, { className: 'mt-8' })}
|
|
74
76
|
</BlockWrapper>
|
|
75
77
|
);
|
|
76
78
|
},
|
|
@@ -80,6 +82,8 @@ const renderStepIcon =
|
|
|
80
82
|
(styleMap: StyleType, size: string, stepVersion: BlockVersion) =>
|
|
81
83
|
({ icon }: Step, i: number) => {
|
|
82
84
|
const styleStepIconSize = size === 'normal' ? 'h-[100px] w-[100px]' : 'h-[63px] w-[63px]';
|
|
85
|
+
const stepVersionIconTextStyles =
|
|
86
|
+
stepVersion === 'secondary' ? 'group-data-primary:text-white' : 'text-secondary-text';
|
|
83
87
|
|
|
84
88
|
return (
|
|
85
89
|
<BlockWrapper
|
|
@@ -90,7 +94,12 @@ const renderStepIcon =
|
|
|
90
94
|
{checkCanRenderIcon(icon) ? (
|
|
91
95
|
<Img image={getIconWithVersion(icon || {}, stepVersion)} width="48" height="48" asSVG />
|
|
92
96
|
) : (
|
|
93
|
-
<span
|
|
97
|
+
<span
|
|
98
|
+
className={style(
|
|
99
|
+
'text-h4',
|
|
100
|
+
stepVersion === 'transparent' ? styleMap.iconText : stepVersionIconTextStyles,
|
|
101
|
+
)}
|
|
102
|
+
>
|
|
94
103
|
{i + 1}
|
|
95
104
|
</span>
|
|
96
105
|
)}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { BlockVersion } from '../../model/BlockVersion';
|
|
2
2
|
import type { BulletsProps } from '../../model/Bullets';
|
|
3
3
|
import type { ButtonCommonIconProps } from '../../model/Button';
|
|
4
|
+
import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
|
|
4
5
|
import type { DefaultListItemType } from '../../model/DefaultListItemType';
|
|
5
6
|
import type { DescriptionProps, HeadlineCommonProps, LabelProps } from '../../model/HeadlineType';
|
|
6
7
|
import type { UniBlockContent } from '../../model/JSXBlock';
|
|
@@ -33,8 +34,7 @@ export type Step = DefaultStep | RichTextStep;
|
|
|
33
34
|
* @title Блок шаги
|
|
34
35
|
*/
|
|
35
36
|
export type StepsBlockContent = UniBlockContent &
|
|
36
|
-
HeadlineCommonProps &
|
|
37
|
-
ButtonCommonIconProps & {
|
|
37
|
+
HeadlineCommonProps & {
|
|
38
38
|
/** @title Линии */
|
|
39
39
|
showLines?: boolean;
|
|
40
40
|
/**
|
|
@@ -43,7 +43,15 @@ export type StepsBlockContent = UniBlockContent &
|
|
|
43
43
|
* @maxItems 5
|
|
44
44
|
*/
|
|
45
45
|
steps?: Step[];
|
|
46
|
+
/**
|
|
47
|
+
* @title Тема шагов
|
|
48
|
+
*/
|
|
46
49
|
stepVersion?: BlockVersion;
|
|
47
50
|
/** @title Размер шагов */
|
|
48
51
|
size?: SizeVersion; // TODO: mobile content
|
|
52
|
+
/**
|
|
53
|
+
* @title Кнопки
|
|
54
|
+
* @maxItems 2
|
|
55
|
+
*/
|
|
56
|
+
buttons?: ButtonWithIconProps[];
|
|
49
57
|
};
|
|
@@ -7,8 +7,9 @@ export type StyleType = {
|
|
|
7
7
|
};
|
|
8
8
|
|
|
9
9
|
export const STEPS_BLOCK_STYLE: StyleType = {
|
|
10
|
-
description:
|
|
11
|
-
|
|
10
|
+
description:
|
|
11
|
+
'text-white/80 text-l-light group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
|
|
12
|
+
iconText: 'text-white group-data-primary:text-secondary-text group-data-gray:text-secondary-text',
|
|
12
13
|
iconBackground: 'bg-white/30 group-data-primary:bg-main-divider',
|
|
13
14
|
iconConnector: 'bg-white group-data-primary:bg-secondary-light',
|
|
14
15
|
dot: 'bg-white/80 group-data-primary:bg-secondary-text',
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
2
|
import { useLink } from '../../hooks/useLink';
|
|
3
3
|
import type { Target } from '../../model/LinkProps';
|
|
4
|
+
import { style } from '../../utils/style';
|
|
4
5
|
|
|
5
6
|
interface LinkWrapperProps {
|
|
6
7
|
className?: string;
|
|
@@ -14,7 +15,7 @@ export const LinkWrapper = JSX<LinkWrapperProps>(({ className = '', href, target
|
|
|
14
15
|
const Tag = href ? 'a' : 'div';
|
|
15
16
|
|
|
16
17
|
return (
|
|
17
|
-
<Tag className={className} {...(href ? linkProps : {})}>
|
|
18
|
+
<Tag className={style('block', className)} {...(href ? linkProps : {})}>
|
|
18
19
|
{children}
|
|
19
20
|
</Tag>
|
|
20
21
|
);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { JSX } from '@redneckz/uni-jsx';
|
|
2
2
|
import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
|
|
3
3
|
import {
|
|
4
|
-
type IntersectionObserverOptions,
|
|
5
4
|
useIntersectionObserver,
|
|
5
|
+
type IntersectionObserverOptions,
|
|
6
6
|
} from '../../hooks/useIntersectionObserver';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
2
|
-
import type { RecommendationContent } from './RecommendationContent';
|
|
3
|
-
export interface RecommendationProps extends RecommendationContent, UniBlockProps {
|
|
4
|
-
}
|
|
5
|
-
export declare const Recommendation: import("@redneckz/uni-jsx").UNIComponent<RecommendationProps, any, any>;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
2
|
-
import type { RecommendationCardTypes } from './RecommendationContent';
|
|
3
|
-
export interface RecommendationCardProps extends RecommendationCardTypes, UniBlockProps {
|
|
4
|
-
}
|
|
5
|
-
export declare const RecommendationCard: import("@redneckz/uni-jsx").UNIComponent<RecommendationCardProps, any, any>;
|
|
@@ -1,24 +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
|
-
* @title Карточка
|
|
9
|
-
*/
|
|
10
|
-
export interface RecommendationCardTypes extends HeadlineCommonProps, ListContent, ImageContent {
|
|
11
|
-
/**
|
|
12
|
-
* @title Соц сети
|
|
13
|
-
* @minItems 3
|
|
14
|
-
*/
|
|
15
|
-
socialMedia?: LinkCommonProps[];
|
|
16
|
-
button?: ButtonProps;
|
|
17
|
-
}
|
|
18
|
-
/**
|
|
19
|
-
* @title Рекомендации
|
|
20
|
-
*/
|
|
21
|
-
export declare type RecommendationContent = UniBlockContent & TitleProps & {
|
|
22
|
-
/** @title Карточки */
|
|
23
|
-
recommendations?: RecommendationCardTypes[];
|
|
24
|
-
};
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import type { UniBlockProps } from '../../model/JSXBlock';
|
|
2
|
-
import type { RecommendationContent } from './RecommendationContent';
|
|
3
|
-
export interface RecommendationProps extends RecommendationContent, UniBlockProps {
|
|
4
|
-
}
|
|
5
|
-
export declare const Recommendation: import("@redneckz/uni-jsx").UNIComponent<RecommendationProps, any, any>;
|