@megafon/ui-shared 6.3.0 → 6.5.0

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 (66) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/es/components/Card/Card.css +1 -1
  3. package/dist/es/components/Container/Container.css +934 -7
  4. package/dist/es/components/DarkGradientCards/DarkGradientCards.css +18 -0
  5. package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
  6. package/dist/es/components/DarkGradientCards/DarkGradientCards.js +88 -0
  7. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +175 -0
  8. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
  9. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js +52 -0
  10. package/dist/es/components/DarkGradientCards/types.d.ts +21 -0
  11. package/dist/es/components/DarkGradientCards/types.js +0 -0
  12. package/dist/es/components/InfoCards/InfoCards.css +75 -0
  13. package/dist/es/components/InfoCards/InfoCards.d.ts +21 -0
  14. package/dist/es/components/InfoCards/InfoCards.js +66 -0
  15. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +237 -0
  16. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.d.ts +15 -0
  17. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +108 -0
  18. package/dist/es/components/InfoCards/types.d.ts +26 -0
  19. package/dist/es/components/InfoCards/types.js +0 -0
  20. package/dist/es/components/SidePictureCards/SidePictureCards.d.ts +22 -0
  21. package/dist/es/components/SidePictureCards/SidePictureCards.js +77 -0
  22. package/dist/es/components/SidePictureCards/components/SidePictureCard.css +183 -0
  23. package/dist/es/components/SidePictureCards/components/SidePictureCard.d.ts +16 -0
  24. package/dist/es/components/SidePictureCards/components/SidePictureCard.js +91 -0
  25. package/dist/es/components/SidePictureCards/types.d.ts +46 -0
  26. package/dist/es/components/SidePictureCards/types.js +0 -0
  27. package/dist/es/components/TextWithIcon/TextWithIconItem.css +16 -7
  28. package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
  29. package/dist/es/components/TextWithIcon/TextWithIconItem.js +6 -1
  30. package/dist/es/hooks/useResolutions.d.ts +1 -0
  31. package/dist/es/hooks/useResolutions.js +12 -1
  32. package/dist/es/index.d.ts +6 -0
  33. package/dist/es/index.js +6 -0
  34. package/dist/lib/components/Card/Card.css +1 -1
  35. package/dist/lib/components/Container/Container.css +934 -7
  36. package/dist/lib/components/DarkGradientCards/DarkGradientCards.css +18 -0
  37. package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
  38. package/dist/lib/components/DarkGradientCards/DarkGradientCards.js +104 -0
  39. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +175 -0
  40. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
  41. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js +65 -0
  42. package/dist/lib/components/DarkGradientCards/types.d.ts +21 -0
  43. package/dist/lib/components/DarkGradientCards/types.js +1 -0
  44. package/dist/lib/components/InfoCards/InfoCards.css +75 -0
  45. package/dist/lib/components/InfoCards/InfoCards.d.ts +21 -0
  46. package/dist/lib/components/InfoCards/InfoCards.js +88 -0
  47. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +237 -0
  48. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.d.ts +15 -0
  49. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +129 -0
  50. package/dist/lib/components/InfoCards/types.d.ts +26 -0
  51. package/dist/lib/components/InfoCards/types.js +1 -0
  52. package/dist/lib/components/SidePictureCards/SidePictureCards.d.ts +22 -0
  53. package/dist/lib/components/SidePictureCards/SidePictureCards.js +95 -0
  54. package/dist/lib/components/SidePictureCards/components/SidePictureCard.css +183 -0
  55. package/dist/lib/components/SidePictureCards/components/SidePictureCard.d.ts +16 -0
  56. package/dist/lib/components/SidePictureCards/components/SidePictureCard.js +108 -0
  57. package/dist/lib/components/SidePictureCards/types.d.ts +46 -0
  58. package/dist/lib/components/SidePictureCards/types.js +1 -0
  59. package/dist/lib/components/TextWithIcon/TextWithIconItem.css +16 -7
  60. package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
  61. package/dist/lib/components/TextWithIcon/TextWithIconItem.js +6 -1
  62. package/dist/lib/hooks/useResolutions.d.ts +1 -0
  63. package/dist/lib/hooks/useResolutions.js +12 -1
  64. package/dist/lib/index.d.ts +6 -0
  65. package/dist/lib/index.js +48 -0
  66. package/package.json +2 -2
@@ -0,0 +1,18 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-dark-gradient-cards__cards {
9
+ display: -webkit-box;
10
+ display: -ms-flexbox;
11
+ display: flex;
12
+ gap: 20px;
13
+ }
14
+ .mfui-dark-gradient-cards__cards .mfui-dark-gradient-cards__card {
15
+ -webkit-box-flex: 1;
16
+ -ms-flex-positive: 1;
17
+ flex-grow: 1;
18
+ }
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import { Carousel } from '@megafon/ui-core';
3
+ import { ItemType } from './types';
4
+ import './DarkGradientCards.less';
5
+ declare type CarouselProps = React.ComponentProps<typeof Carousel>;
6
+ export interface IDarkGradientCards {
7
+ /** Карточки. Минимальное количество 3 карточки */
8
+ items: ItemType[];
9
+ /** Тема навигации для карусели */
10
+ carouselNavTheme?: CarouselProps['navTheme'];
11
+ /** Цвет градиента для карусели */
12
+ carouselGradientColor?: CarouselProps['gradientColor'];
13
+ /** Дополнительный класс для компонента */
14
+ className?: string;
15
+ /** Дополнительные классы для внутренних элементов */
16
+ classes?: {
17
+ root?: string;
18
+ item?: string;
19
+ };
20
+ /** Дополнительные data атрибуты к внутренним элементам */
21
+ dataAttrs?: {
22
+ root?: Record<string, string>;
23
+ carousel?: Record<string, string>;
24
+ item?: Record<string, string>;
25
+ };
26
+ }
27
+ declare const DarkGradientCards: React.FC<IDarkGradientCards>;
28
+ export default DarkGradientCards;
@@ -0,0 +1,88 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ import "core-js/modules/es.array.map.js";
4
+ import React from 'react';
5
+ import { Carousel } from '@megafon/ui-core';
6
+ import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
7
+ import PropTypes from 'prop-types';
8
+ import useResolutions from "../../hooks/useResolutions";
9
+ import DarkGradientCard from "./components/DarkGradientCard";
10
+ import "./DarkGradientCards.css";
11
+
12
+ var carouselParams = _defineProperty({}, breakpoints.MOBILE_SMALL_START, {
13
+ slidesPerView: 'auto',
14
+ spaceBetween: 20
15
+ });
16
+
17
+ var CAROUSEL_THRESHOLD = 5;
18
+ var MIN_ITEMS_COUNT = 3;
19
+ var cn = cnCreate('mfui-dark-gradient-cards');
20
+
21
+ var DarkGradientCards = function DarkGradientCards(_ref) {
22
+ var items = _ref.items,
23
+ _ref$carouselGradient = _ref.carouselGradientColor,
24
+ carouselGradientColor = _ref$carouselGradient === void 0 ? 'default' : _ref$carouselGradient,
25
+ _ref$carouselNavTheme = _ref.carouselNavTheme,
26
+ carouselNavTheme = _ref$carouselNavTheme === void 0 ? 'light' : _ref$carouselNavTheme,
27
+ className = _ref.className,
28
+ _ref$classes = _ref.classes,
29
+ classes = _ref$classes === void 0 ? {} : _ref$classes,
30
+ dataAttrs = _ref.dataAttrs;
31
+
32
+ var _useResolutions = useResolutions(),
33
+ isDesktopWide = _useResolutions.isDesktopWide;
34
+
35
+ var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
36
+ var cards = items.map(function (item, i) {
37
+ return /*#__PURE__*/React.createElement(DarkGradientCard, _extends({
38
+ className: cn('card')
39
+ }, item, {
40
+ key: item.title + i,
41
+ size: i === 0 ? 'big' : 'small',
42
+ classes: {
43
+ root: classes.item
44
+ },
45
+ dataAttrs: {
46
+ root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
47
+ }
48
+ }));
49
+ });
50
+
51
+ if (items.length < MIN_ITEMS_COUNT) {
52
+ return null;
53
+ }
54
+
55
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
56
+ className: cn([className, classes.root])
57
+ }), isCarouselActive ? /*#__PURE__*/React.createElement(Carousel, {
58
+ dataAttrs: {
59
+ root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
60
+ },
61
+ slidesSettings: carouselParams,
62
+ navTheme: carouselNavTheme,
63
+ threshold: CAROUSEL_THRESHOLD,
64
+ gradient: true,
65
+ gradientColor: carouselGradientColor
66
+ }, cards) : /*#__PURE__*/React.createElement("div", {
67
+ className: cn('cards')
68
+ }, cards));
69
+ };
70
+
71
+ DarkGradientCards.propTypes = {
72
+ items: PropTypes.arrayOf(PropTypes.shape({
73
+ imageSrc: PropTypes.string.isRequired,
74
+ title: PropTypes.string.isRequired,
75
+ subtitle: PropTypes.string,
76
+ moreIcon: PropTypes.element,
77
+ moreText: PropTypes.string,
78
+ href: PropTypes.string,
79
+ target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
80
+ rel: PropTypes.string
81
+ }).isRequired).isRequired,
82
+ className: PropTypes.string,
83
+ classes: PropTypes.objectOf(PropTypes.string),
84
+ dataAttrs: PropTypes.objectOf(PropTypes.object),
85
+ carouselNavTheme: PropTypes.oneOf(['light', 'green']),
86
+ carouselGradientColor: PropTypes.oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2'])
87
+ };
88
+ export default DarkGradientCards;
@@ -0,0 +1,175 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-dark-gradient-card {
9
+ position: relative;
10
+ display: -webkit-box;
11
+ display: -ms-flexbox;
12
+ display: flex;
13
+ width: 298px;
14
+ min-height: 420px;
15
+ padding: 24px;
16
+ border-radius: 24px;
17
+ color: var(--stcWhite);
18
+ text-decoration: none;
19
+ background-position: center;
20
+ background-size: cover;
21
+ }
22
+ @media screen and (max-width: 359px) {
23
+ .mfui-dark-gradient-card {
24
+ width: 265px;
25
+ }
26
+ }
27
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
28
+ .mfui-dark-gradient-card {
29
+ width: 211px;
30
+ }
31
+ }
32
+ @media screen and (min-width: 1024px) {
33
+ .mfui-dark-gradient-card {
34
+ min-height: 520px;
35
+ }
36
+ }
37
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
38
+ .mfui-dark-gradient-card {
39
+ width: 285px;
40
+ }
41
+ }
42
+ @media screen and (min-width: 1280px) and (max-width: 1439px) {
43
+ .mfui-dark-gradient-card {
44
+ width: 265px;
45
+ }
46
+ }
47
+ @media screen and (min-width: 1280px) {
48
+ .mfui-dark-gradient-card {
49
+ padding: 32px;
50
+ }
51
+ }
52
+ @media screen and (min-width: 1440px) {
53
+ .mfui-dark-gradient-card {
54
+ width: 345px;
55
+ }
56
+ }
57
+ .mfui-dark-gradient-card:hover {
58
+ text-decoration: none;
59
+ }
60
+ .mfui-dark-gradient-card:before {
61
+ content: '';
62
+ position: absolute;
63
+ top: 0;
64
+ right: 0;
65
+ bottom: 0;
66
+ left: 0;
67
+ z-index: 0;
68
+ border-radius: inherit;
69
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
70
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
71
+ }
72
+ .mfui-dark-gradient-card_active:hover.mfui-dark-gradient-card:before {
73
+ background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
74
+ background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
75
+ }
76
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
77
+ .mfui-dark-gradient-card_size_big {
78
+ width: 441px;
79
+ }
80
+ }
81
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
82
+ .mfui-dark-gradient-card_size_big {
83
+ width: 591px;
84
+ }
85
+ }
86
+ @media screen and (min-width: 1280px) and (max-width: 1439px) {
87
+ .mfui-dark-gradient-card_size_big {
88
+ width: 550px;
89
+ }
90
+ }
91
+ @media screen and (min-width: 1440px) {
92
+ .mfui-dark-gradient-card_size_big {
93
+ width: 710px;
94
+ }
95
+ }
96
+ .mfui-dark-gradient-card__inner {
97
+ position: relative;
98
+ z-index: 1;
99
+ display: -webkit-box;
100
+ display: -ms-flexbox;
101
+ display: flex;
102
+ -webkit-box-orient: vertical;
103
+ -webkit-box-direction: normal;
104
+ -ms-flex-direction: column;
105
+ flex-direction: column;
106
+ gap: 12px;
107
+ width: 100%;
108
+ }
109
+ .mfui-dark-gradient-card__title {
110
+ margin-top: auto;
111
+ }
112
+ .mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
113
+ font-weight: 500;
114
+ font-size: 18px;
115
+ line-height: 24px;
116
+ letter-spacing: 0.5px;
117
+ }
118
+ @media screen and (min-width: 1280px) {
119
+ .mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
120
+ font-size: 20px;
121
+ line-height: 28px;
122
+ }
123
+ }
124
+ .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
125
+ font-weight: 600;
126
+ font-size: 22px;
127
+ line-height: 28px;
128
+ letter-spacing: 0.5px;
129
+ }
130
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
131
+ .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
132
+ font-size: 26px;
133
+ line-height: 32px;
134
+ }
135
+ }
136
+ @media screen and (min-width: 1024px) {
137
+ .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
138
+ font-size: 28px;
139
+ line-height: 36px;
140
+ }
141
+ }
142
+ @media screen and (min-width: 1280px) {
143
+ .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
144
+ font-size: 32px;
145
+ line-height: 40px;
146
+ }
147
+ }
148
+ .mfui-dark-gradient-card__subtitle {
149
+ font-size: 15px;
150
+ line-height: 24px;
151
+ }
152
+ .mfui-dark-gradient-card__more {
153
+ font-size: 15px;
154
+ line-height: 24px;
155
+ font-weight: 500;
156
+ display: -webkit-box;
157
+ display: -ms-flexbox;
158
+ display: flex;
159
+ gap: 8px;
160
+ -webkit-box-align: start;
161
+ -ms-flex-align: start;
162
+ align-items: flex-start;
163
+ }
164
+ .mfui-dark-gradient-card__more-icon {
165
+ display: block;
166
+ width: 24px;
167
+ min-width: 24px;
168
+ max-height: 24px;
169
+ }
170
+ .mfui-dark-gradient-card__more-icon svg {
171
+ display: block;
172
+ width: 100%;
173
+ height: 100%;
174
+ fill: var(--stcWhite);
175
+ }
@@ -0,0 +1,15 @@
1
+ import React from 'react';
2
+ import { ItemType } from '../types';
3
+ import './DarkGradientCard.less';
4
+ export declare type DarkGradientCardType = ItemType & {
5
+ size?: 'small' | 'big';
6
+ className?: string;
7
+ classes?: {
8
+ root?: string;
9
+ };
10
+ dataAttrs?: {
11
+ root?: Record<string, string>;
12
+ };
13
+ };
14
+ declare const DarkGradientCard: React.FC<DarkGradientCardType>;
15
+ export default DarkGradientCard;
@@ -0,0 +1,52 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import { cnCreate, convert } from '@megafon/ui-helpers';
4
+ import { setRelAttribute } from "../../../helpers/setRelAttribute";
5
+ import "./DarkGradientCard.css";
6
+ var cn = cnCreate('mfui-dark-gradient-card');
7
+
8
+ var DarkGradientCard = function DarkGradientCard(_ref) {
9
+ var imageSrc = _ref.imageSrc,
10
+ title = _ref.title,
11
+ subtitle = _ref.subtitle,
12
+ moreIcon = _ref.moreIcon,
13
+ moreText = _ref.moreText,
14
+ href = _ref.href,
15
+ _ref$target = _ref.target,
16
+ target = _ref$target === void 0 ? '_self' : _ref$target,
17
+ rel = _ref.rel,
18
+ _ref$size = _ref.size,
19
+ size = _ref$size === void 0 ? 'small' : _ref$size,
20
+ className = _ref.className,
21
+ _ref$classes = _ref.classes,
22
+ classes = _ref$classes === void 0 ? {} : _ref$classes,
23
+ dataAttrs = _ref.dataAttrs;
24
+ var isLink = !!href;
25
+ var ElementType = isLink ? 'a' : 'div';
26
+ var currentRel = setRelAttribute(rel, target);
27
+ return /*#__PURE__*/React.createElement(ElementType, _extends({
28
+ className: cn({
29
+ size: size,
30
+ active: isLink
31
+ }, [className, classes.root])
32
+ }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
33
+ href: href,
34
+ target: isLink ? target : undefined,
35
+ rel: isLink ? currentRel : undefined,
36
+ style: {
37
+ backgroundImage: "url(".concat(imageSrc, ")")
38
+ }
39
+ }), /*#__PURE__*/React.createElement("div", {
40
+ className: cn('inner')
41
+ }, /*#__PURE__*/React.createElement("div", {
42
+ className: cn('title')
43
+ }, convert(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
44
+ className: cn('subtitle')
45
+ }, convert(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {
46
+ className: cn('more')
47
+ }, !!moreIcon && /*#__PURE__*/React.createElement("div", {
48
+ className: cn('more-icon')
49
+ }, moreIcon), convert(moreText, {}))));
50
+ };
51
+
52
+ export default DarkGradientCard;
@@ -0,0 +1,21 @@
1
+ /// <reference types="react" />
2
+ declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
3
+ export declare type ItemType = {
4
+ /** Изображение */
5
+ imageSrc: string;
6
+ /** Заголовок */
7
+ title: string;
8
+ /** Подзаголовок */
9
+ subtitle?: string;
10
+ /** Иконка */
11
+ moreIcon?: JSX.Element;
12
+ /** Текст */
13
+ moreText?: string;
14
+ /** Ссылка */
15
+ href?: string;
16
+ /** Атрибут ссылки target */
17
+ target?: TargetType;
18
+ /** Атрибут ссылки rel */
19
+ rel?: string;
20
+ };
21
+ export {};
File without changes
@@ -0,0 +1,75 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-info-cards {
9
+ display: grid;
10
+ grid-template-columns: auto;
11
+ gap: 20px;
12
+ }
13
+ @media screen and (min-width: 768px) {
14
+ .mfui-info-cards_size_small.mfui-info-cards_position_right-side {
15
+ grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
16
+ }
17
+ }
18
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
19
+ .mfui-info-cards_size_small.mfui-info-cards_position_right-side {
20
+ grid-template-columns: repeat(auto-fit, minmax(438px, 1fr));
21
+ }
22
+ }
23
+ @media screen and (min-width: 1280px) {
24
+ .mfui-info-cards_size_small.mfui-info-cards_position_right-side {
25
+ grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
26
+ }
27
+ }
28
+ @media screen and (min-width: 768px) {
29
+ .mfui-info-cards_size_small.mfui-info-cards_position_top-left {
30
+ grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
31
+ }
32
+ }
33
+ @media screen and (min-width: 1024px) {
34
+ .mfui-info-cards_size_small.mfui-info-cards_position_top-left {
35
+ grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
36
+ }
37
+ }
38
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
39
+ .mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
40
+ grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
41
+ }
42
+ }
43
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
44
+ .mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
45
+ grid-template-columns: repeat(auto-fit, minmax(438px, 1fr));
46
+ }
47
+ }
48
+ @media screen and (min-width: 1280px) {
49
+ .mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
50
+ grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
51
+ }
52
+ }
53
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
54
+ .mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
55
+ grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
56
+ }
57
+ }
58
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
59
+ .mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
60
+ grid-template-columns: repeat(auto-fit, minmax(209px, 1fr));
61
+ }
62
+ }
63
+ @media screen and (min-width: 1280px) {
64
+ .mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
65
+ grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
66
+ }
67
+ }
68
+ @media screen and (min-width: 1024px) {
69
+ .mfui-info-cards_size_big {
70
+ grid-template-columns: 1fr 1fr;
71
+ }
72
+ }
73
+ .mfui-info-cards_position_top-left.mfui-info-cards_background_no {
74
+ row-gap: 40px;
75
+ }
@@ -0,0 +1,21 @@
1
+ import * as React from 'react';
2
+ import { IInfoCardData, IInfoCardSettings } from './types';
3
+ import './InfoCards.less';
4
+ export interface IInfoCards extends IInfoCardSettings {
5
+ /** Дополнительный css класс для корневого элемента */
6
+ className?: string;
7
+ /** Дополнительные css классы для корневого и внутренних элементов */
8
+ classes?: {
9
+ root?: string;
10
+ card?: string;
11
+ };
12
+ /** Дополнительные data атрибуты к внутренним элементам */
13
+ dataAttrs?: {
14
+ root?: Record<string, string>;
15
+ card?: Record<string, string>;
16
+ };
17
+ /** Список карточек */
18
+ items: IInfoCardData[];
19
+ }
20
+ declare const InfoCards: React.FC<IInfoCards>;
21
+ export default InfoCards;
@@ -0,0 +1,66 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import "core-js/modules/es.array.map.js";
3
+ import "core-js/modules/es.array.concat.js";
4
+ import * as React from 'react';
5
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
6
+ import PropTypes from 'prop-types';
7
+ import InfoCard from "./components/InfoCard/InfoCard";
8
+ import "./InfoCards.css";
9
+ var cn = cnCreate('mfui-info-cards');
10
+
11
+ var InfoCards = function InfoCards(_ref) {
12
+ var className = _ref.className,
13
+ classes = _ref.classes,
14
+ items = _ref.items,
15
+ _ref$size = _ref.size,
16
+ size = _ref$size === void 0 ? 'medium' : _ref$size,
17
+ _ref$imgPosition = _ref.imgPosition,
18
+ imgPosition = _ref$imgPosition === void 0 ? 'top-left' : _ref$imgPosition,
19
+ _ref$background = _ref.background,
20
+ background = _ref$background === void 0 ? 'stroke' : _ref$background,
21
+ dataAttrs = _ref.dataAttrs;
22
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
23
+ className: cn({
24
+ size: size,
25
+ position: imgPosition,
26
+ background: background
27
+ }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
28
+ }), items.map(function (item, i) {
29
+ return /*#__PURE__*/React.createElement(InfoCard, _extends({}, item, {
30
+ className: classes === null || classes === void 0 ? void 0 : classes.card,
31
+ size: size,
32
+ imgPosition: imgPosition,
33
+ background: background,
34
+ dataAttrs: {
35
+ root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
36
+ },
37
+ key: "".concat(item.title, "_").concat(i)
38
+ }));
39
+ }));
40
+ };
41
+
42
+ InfoCards.propTypes = {
43
+ className: PropTypes.string,
44
+ classes: PropTypes.shape({
45
+ root: PropTypes.string,
46
+ card: PropTypes.string
47
+ }),
48
+ dataAttrs: PropTypes.shape({
49
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
50
+ card: PropTypes.objectOf(PropTypes.string.isRequired)
51
+ }),
52
+ size: PropTypes.oneOf(['big', 'medium', 'small']),
53
+ imgPosition: PropTypes.oneOf(['right-side', 'top-left']),
54
+ background: PropTypes.oneOf(['shadow', 'stroke', 'gray', 'green', 'purple', 'white', 'gray', 'no']),
55
+ items: PropTypes.arrayOf(PropTypes.shape({
56
+ title: PropTypes.string,
57
+ description: PropTypes.string,
58
+ imgSrc: PropTypes.string.isRequired,
59
+ imgAlt: PropTypes.string,
60
+ href: PropTypes.string,
61
+ target: PropTypes.oneOf(['_self', '_blank']),
62
+ rel: PropTypes.string,
63
+ moreInfo: PropTypes.string
64
+ }).isRequired).isRequired
65
+ };
66
+ export default InfoCards;