@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.
Files changed (157) hide show
  1. package/bin/migration-scripts/0.9.8.js +29 -0
  2. package/bin/migration-scripts/0.9.9.js +110 -0
  3. package/bundle/blocks.schema.json +1 -1
  4. package/bundle/bundle.umd.js +15 -38
  5. package/bundle/bundle.umd.min.js +1 -1
  6. package/bundle/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
  7. package/bundle/components/StepsBlock/StepsBlockContent.d.ts +10 -1
  8. package/dist/components/Blocks.js +0 -2
  9. package/dist/components/Blocks.js.map +1 -1
  10. package/dist/components/CarouselProductCard/CarouselProductCard.js +1 -1
  11. package/dist/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
  12. package/dist/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
  13. package/dist/components/CarouselProgramsCard/CarouselProgramsCard.js.map +1 -1
  14. package/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
  15. package/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
  16. package/dist/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
  17. package/dist/components/StepsBlock/StepsBlock.js +5 -3
  18. package/dist/components/StepsBlock/StepsBlock.js.map +1 -1
  19. package/dist/components/StepsBlock/StepsBlockContent.d.ts +10 -1
  20. package/dist/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
  21. package/dist/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
  22. package/dist/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
  23. package/dist/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
  24. package/lib/common.css +1 -1
  25. package/lib/components/Blocks.js +0 -2
  26. package/lib/components/Blocks.js.map +1 -1
  27. package/lib/components/Carousel/Carousel.fixture.d.ts +1 -0
  28. package/lib/components/CarouselProductCard/CarouselProductCard.js +1 -1
  29. package/lib/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
  30. package/lib/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
  31. package/lib/components/CarouselProgramsCard/CarouselProgramsCard.js.map +1 -1
  32. package/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.d.ts +2 -0
  33. package/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
  34. package/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
  35. package/lib/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
  36. package/lib/components/StepsBlock/StepsBlock.js +5 -3
  37. package/lib/components/StepsBlock/StepsBlock.js.map +1 -1
  38. package/lib/components/StepsBlock/StepsBlockContent.d.ts +10 -1
  39. package/lib/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
  40. package/lib/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
  41. package/lib/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
  42. package/lib/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
  43. package/lib/ui-kit/SwipeListControl/SwipeListItem.js.map +1 -1
  44. package/mobile/bundle/bundle.umd.js +3 -3
  45. package/mobile/bundle/bundle.umd.min.js +1 -1
  46. package/mobile/bundle/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
  47. package/mobile/bundle/components/StepsBlock/StepsBlockContent.d.ts +10 -1
  48. package/mobile/dist/components/CarouselProductCard/CarouselProductCard.js +1 -1
  49. package/mobile/dist/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
  50. package/mobile/dist/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
  51. package/mobile/dist/components/CarouselProgramsCard/CarouselProgramsCard.js.map +1 -1
  52. package/mobile/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
  53. package/mobile/dist/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
  54. package/mobile/dist/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
  55. package/mobile/dist/components/StepsBlock/StepsBlockContent.d.ts +10 -1
  56. package/mobile/dist/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
  57. package/mobile/dist/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
  58. package/mobile/dist/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
  59. package/mobile/dist/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
  60. package/mobile/lib/components/CarouselProductCard/CarouselProductCard.js +1 -1
  61. package/mobile/lib/components/CarouselProductCard/CarouselProductCard.js.map +1 -1
  62. package/mobile/lib/components/CarouselProgramsCard/CarouselProgramsCard.js +2 -2
  63. package/mobile/lib/components/CarouselProgramsCard/CarouselProgramsCard.js.map +1 -1
  64. package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js +4 -6
  65. package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCard.js.map +1 -1
  66. package/mobile/lib/components/CarouselRecommendationCard/CarouselRecommendationCardContent.d.ts +2 -0
  67. package/mobile/lib/components/StepsBlock/StepsBlockContent.d.ts +10 -1
  68. package/mobile/lib/components/StepsBlock/StepsBlockStyleMaps.js +2 -2
  69. package/mobile/lib/components/StepsBlock/StepsBlockStyleMaps.js.map +1 -1
  70. package/mobile/lib/ui-kit/LinkWrapper/LinkWrapper.js +2 -1
  71. package/mobile/lib/ui-kit/LinkWrapper/LinkWrapper.js.map +1 -1
  72. package/mobile/lib/ui-kit/SwipeListControl/SwipeListItem.js.map +1 -1
  73. package/mobile/src/components/CarouselProductCard/CarouselProductCard.tsx +1 -1
  74. package/mobile/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx +3 -3
  75. package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json +1 -0
  76. package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx +19 -30
  77. package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts +2 -0
  78. package/mobile/src/components/StepsBlock/StepsBlock.example.json +7 -5
  79. package/mobile/src/components/StepsBlock/StepsBlock.ui.json +10 -0
  80. package/mobile/src/components/StepsBlock/StepsBlockContent.ts +10 -2
  81. package/mobile/src/components/StepsBlock/StepsBlockStyleMaps.ts +3 -2
  82. package/mobile/src/ui-kit/LinkWrapper/LinkWrapper.tsx +2 -1
  83. package/mobile/src/ui-kit/SwipeListControl/SwipeListItem.tsx +1 -1
  84. package/package.json +1 -1
  85. package/src/components/Blocks.ts +0 -2
  86. package/src/components/Carousel/Carousel.fixture.tsx +25 -2
  87. package/src/components/CarouselProductCard/CarouselProductCard.tsx +1 -1
  88. package/src/components/CarouselProgramsCard/CarouselProgramsCard.fixture.tsx +2 -2
  89. package/src/components/CarouselProgramsCard/CarouselProgramsCard.tsx +3 -3
  90. package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.example.json +1 -0
  91. package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.fixture.tsx +28 -1
  92. package/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx +19 -30
  93. package/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts +2 -0
  94. package/src/components/StepsBlock/StepsBlock.example.json +7 -5
  95. package/src/components/StepsBlock/StepsBlock.fixture.tsx +14 -8
  96. package/src/components/StepsBlock/StepsBlock.tsx +13 -4
  97. package/src/components/StepsBlock/StepsBlock.ui.json +10 -0
  98. package/src/components/StepsBlock/StepsBlockContent.ts +10 -2
  99. package/src/components/StepsBlock/StepsBlockStyleMaps.ts +3 -2
  100. package/src/ui-kit/LinkWrapper/LinkWrapper.tsx +2 -1
  101. package/src/ui-kit/SwipeListControl/SwipeListItem.tsx +1 -1
  102. package/bundle/components/Recommendation/Recommendation.d.ts +0 -5
  103. package/bundle/components/Recommendation/RecommendationCard.d.ts +0 -5
  104. package/bundle/components/Recommendation/RecommendationContent.d.ts +0 -24
  105. package/dist/components/Recommendation/Recommendation.d.ts +0 -5
  106. package/dist/components/Recommendation/Recommendation.js +0 -26
  107. package/dist/components/Recommendation/Recommendation.js.map +0 -1
  108. package/dist/components/Recommendation/RecommendationCard.d.ts +0 -5
  109. package/dist/components/Recommendation/RecommendationCard.js +0 -17
  110. package/dist/components/Recommendation/RecommendationCard.js.map +0 -1
  111. package/dist/components/Recommendation/RecommendationContent.d.ts +0 -24
  112. package/dist/components/Recommendation/RecommendationContent.js +0 -2
  113. package/dist/components/Recommendation/RecommendationContent.js.map +0 -1
  114. package/lib/components/Recommendation/Recommendation.d.ts +0 -5
  115. package/lib/components/Recommendation/Recommendation.fixture.d.ts +0 -15
  116. package/lib/components/Recommendation/Recommendation.js +0 -24
  117. package/lib/components/Recommendation/Recommendation.js.map +0 -1
  118. package/lib/components/Recommendation/RecommendationCard.d.ts +0 -5
  119. package/lib/components/Recommendation/RecommendationCard.js +0 -15
  120. package/lib/components/Recommendation/RecommendationCard.js.map +0 -1
  121. package/lib/components/Recommendation/RecommendationContent.d.ts +0 -24
  122. package/lib/components/Recommendation/RecommendationContent.js +0 -2
  123. package/lib/components/Recommendation/RecommendationContent.js.map +0 -1
  124. package/mobile/bundle/components/Recommendation/Recommendation.d.ts +0 -5
  125. package/mobile/bundle/components/Recommendation/RecommendationCard.d.ts +0 -5
  126. package/mobile/bundle/components/Recommendation/RecommendationContent.d.ts +0 -24
  127. package/mobile/dist/components/Recommendation/Recommendation.d.ts +0 -5
  128. package/mobile/dist/components/Recommendation/Recommendation.js +0 -26
  129. package/mobile/dist/components/Recommendation/Recommendation.js.map +0 -1
  130. package/mobile/dist/components/Recommendation/RecommendationCard.d.ts +0 -5
  131. package/mobile/dist/components/Recommendation/RecommendationCard.js +0 -17
  132. package/mobile/dist/components/Recommendation/RecommendationCard.js.map +0 -1
  133. package/mobile/dist/components/Recommendation/RecommendationContent.d.ts +0 -24
  134. package/mobile/dist/components/Recommendation/RecommendationContent.js +0 -2
  135. package/mobile/dist/components/Recommendation/RecommendationContent.js.map +0 -1
  136. package/mobile/lib/components/Recommendation/Recommendation.d.ts +0 -5
  137. package/mobile/lib/components/Recommendation/Recommendation.js +0 -24
  138. package/mobile/lib/components/Recommendation/Recommendation.js.map +0 -1
  139. package/mobile/lib/components/Recommendation/RecommendationCard.d.ts +0 -5
  140. package/mobile/lib/components/Recommendation/RecommendationCard.js +0 -15
  141. package/mobile/lib/components/Recommendation/RecommendationCard.js.map +0 -1
  142. package/mobile/lib/components/Recommendation/RecommendationContent.d.ts +0 -24
  143. package/mobile/lib/components/Recommendation/RecommendationContent.js +0 -2
  144. package/mobile/lib/components/Recommendation/RecommendationContent.js.map +0 -1
  145. package/mobile/src/components/Catalog/Catalog.ui.json +0 -1
  146. package/mobile/src/components/Recommendation/Recommendation.example.json +0 -61
  147. package/mobile/src/components/Recommendation/Recommendation.tsx +0 -66
  148. package/mobile/src/components/Recommendation/Recommendation.ui.json +0 -19
  149. package/mobile/src/components/Recommendation/RecommendationCard.tsx +0 -49
  150. package/mobile/src/components/Recommendation/RecommendationContent.ts +0 -27
  151. package/src/components/Catalog/Catalog.ui.json +0 -1
  152. package/src/components/Recommendation/Recommendation.example.json +0 -61
  153. package/src/components/Recommendation/Recommendation.fixture.tsx +0 -176
  154. package/src/components/Recommendation/Recommendation.tsx +0 -66
  155. package/src/components/Recommendation/Recommendation.ui.json +0 -19
  156. package/src/components/Recommendation/RecommendationCard.tsx +0 -49
  157. package/src/components/Recommendation/RecommendationContent.ts +0 -27
@@ -1,5 +1,15 @@
1
1
  {
2
2
  "content": {
3
+ "buttons": {
4
+ "items": {
5
+ "icon": {
6
+ "ui:field": "icon"
7
+ },
8
+ "iconRight": {
9
+ "ui:field": "icon"
10
+ }
11
+ }
12
+ },
3
13
  "steps": {
4
14
  "items": {
5
15
  "icon": {
@@ -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: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
11
- iconText: 'text-white group-data-primary:text-secondary-text',
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redneckz/wildless-cms-uni-blocks",
3
- "version": "0.9.7",
3
+ "version": "0.9.9",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "author": "ЦК",
@@ -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 { CAROUSEL_RECOMMENDATION_CARD_WITHOUT_LIST } from '../CarouselRecommendationCard/CarouselRecommendationCard.fixture';
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={2}
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 min-w-[536px]', className)} {...rest}>
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=" mb-3.5" headingType="h5" title={title} /> : null}
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={`text-h6`}>{_.title}</div> : null}
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
  );
@@ -18,6 +18,7 @@
18
18
  },
19
19
  "title": "Заголовок 1",
20
20
  "description": "Описание 1",
21
+ "align": "text-left",
21
22
  "socialMedia": [
22
23
  {
23
24
  "href": "https://t.me",
@@ -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-12 min-w-[524px] h-full flex flex-col box-border group-data-gray:bg-main-divider/50',
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 className="flex flex-col" href={href} target={target}>
47
- <div className="self-center">
48
- {title ? <Heading headingType="h3" as="h3" className="mb-8" title={title} /> : null}
49
- </div>
50
- <div className="mb-5">
51
- {description ? (
52
- <Paragraph
53
- size="text-xl"
54
- font="font-light"
55
- color="group-data-gray:text-secondary-text"
56
- >
57
- {description}
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
- <div className="flex align-center w-full">
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, items: string[]) => (
77
- <div className={style('flex', setAdditionalIconStyles(items))}>
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
  };
@@ -63,11 +63,13 @@
63
63
  }
64
64
  }
65
65
  ],
66
- "button": {
67
- "text": "Кнопка",
68
- "target": "_blank",
69
- "version": "primary"
70
- },
66
+ "buttons": [
67
+ {
68
+ "text": "Кнопка",
69
+ "target": "_blank",
70
+ "version": "primary"
71
+ }
72
+ ],
71
73
  "isDotted": true
72
74
  }
73
75
  }
@@ -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
- button={{
112
- text: 'Отправить заявку',
113
- href: 'https://www.rshb.ru/',
114
- target: '_blank',
115
- icon: { icon: 'ComfortableCompIcon' },
116
- iconRight: { icon: 'ComfortableCompIcon' },
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
- button,
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: Boolean(button?.text), version }))}
71
+ {steps.map(renderStep({ styleMap, isMainButton, version }))}
70
72
  </div>
71
73
  </div>
72
74
  ) : null}
73
- {button?.text ? renderButtonsSection([button], { className: 'mt-8 min-w-60' }) : null}
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 className={`text-h4 group-data-transparent:${styleMap.iconText} text-primary-text`}>
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,5 +1,15 @@
1
1
  {
2
2
  "content": {
3
+ "buttons": {
4
+ "items": {
5
+ "icon": {
6
+ "ui:field": "icon"
7
+ },
8
+ "iconRight": {
9
+ "ui:field": "icon"
10
+ }
11
+ }
12
+ },
3
13
  "steps": {
4
14
  "items": {
5
15
  "icon": {
@@ -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: 'text-white/80 text-l-light group-data-primary:text-secondary-text',
11
- iconText: 'text-white group-data-primary:text-secondary-text',
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>;