@megafon/ui-shared 9.0.0-alpha.21 → 9.0.0-alpha.22
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/dist/es/components/CardsOnBackground/CardsOnBackground.css +1 -1
- package/dist/es/components/CardsOnBackground/CardsOnBackground.d.ts +4 -1
- package/dist/es/components/CardsOnBackground/CardsOnBackground.js +6 -7
- package/dist/es/components/CardsOnBackground/types.d.ts +5 -0
- package/dist/es/components/CardsOnBackground/types.js +4 -0
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.css +1 -1
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.d.ts +4 -1
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.js +6 -7
- package/dist/lib/components/CardsOnBackground/types.d.ts +5 -0
- package/dist/lib/components/CardsOnBackground/types.js +5 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-cards-on-background{border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:16px;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background{padding:32px}}@media screen and (min-width:1024px){.mfui-9-cards-on-background{padding:56px}}.mfui-9-cards-on-background_background_gray{background-color:var(--spbSky0)}.mfui-9-cards-on-background_background_green{background-color:var(--brandGreen20)}.mfui-9-cards-on-background_background_blue{background-color:var(--night20)}.mfui-9-cards-on-background_background_violet{background-color:#e1dcea}@media screen and (max-width:767px){.mfui-9-cards-on-background_carousel{padding-bottom:32px}}@media screen and (max-width:1023px){.mfui-9-cards-on-background_carousel:before{background:-webkit-gradient(linear,left top,right top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;left:0;position:absolute;top:0;width:16px;z-index:1}.mfui-9-cards-on-background_carousel:after{background:-webkit-gradient(linear,right top,left top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;position:absolute;right:0;top:0;width:16px;z-index:1}}.mfui-9-cards-on-background__grid{display:grid;gap:20px;grid-template-columns:1fr;width:100%}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid{grid-template-columns:repeat(12,1fr)}}.mfui-9-cards-on-background__grid-item{grid-column:span 1}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid-item{grid-column:span 6}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item{grid-column:span 4}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(-n+2){grid-column:span 6}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+3){grid-column:span 4}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-cards-on-background{border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:16px;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background{padding:32px}}@media screen and (min-width:1024px){.mfui-9-cards-on-background{padding:56px}}.mfui-9-cards-on-background_background_gray{background-color:var(--spbSky0)}.mfui-9-cards-on-background_background_green{background-color:var(--brandGreen20)}.mfui-9-cards-on-background_background_blue{background-color:var(--night20)}.mfui-9-cards-on-background_background_violet{background-color:#e1dcea}@media screen and (max-width:767px){.mfui-9-cards-on-background_carousel{padding-bottom:32px}}@media screen and (max-width:1023px){.mfui-9-cards-on-background_carousel:before{background:-webkit-gradient(linear,left top,right top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;left:0;position:absolute;top:0;width:16px;z-index:1}.mfui-9-cards-on-background_carousel:after{background:-webkit-gradient(linear,right top,left top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;position:absolute;right:0;top:0;width:16px;z-index:1}}.mfui-9-cards-on-background__grid{display:grid;gap:20px;grid-template-columns:1fr;width:100%}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid{grid-template-columns:repeat(12,1fr)}}.mfui-9-cards-on-background__grid-item{grid-column:span 1}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid-item{grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid-item{grid-column:span 4}}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid_count_1 .mfui-9-cards-on-background__grid-item{grid-column:span 12}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_single-align_left.mfui-9-cards-on-background__grid_count_1 .mfui-9-cards-on-background__grid-item{grid-column:span 6}.mfui-9-cards-on-background__grid_single-align_center.mfui-9-cards-on-background__grid_count_1 .mfui-9-cards-on-background__grid-item{grid-column:4/10}}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid_count_2 .mfui-9-cards-on-background__grid-item,.mfui-9-cards-on-background__grid_count_4 .mfui-9-cards-on-background__grid-item{grid-column:span 6}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item{grid-column:span 4}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(-n+2){grid-column:span 6}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+3){grid-column:span 4}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Carousel } from '@megafon/ui-core';
|
|
3
|
-
import { BackgroundColorType, CardDataType } from './types';
|
|
3
|
+
import { BackgroundColorType, CardDataType, SingleCardAlignType } from './types';
|
|
4
4
|
import './CardsOnBackground.scss';
|
|
5
5
|
type CarouselProps = React.ComponentProps<typeof Carousel>;
|
|
6
6
|
export interface ICardsOnBackground {
|
|
@@ -10,6 +10,8 @@ export interface ICardsOnBackground {
|
|
|
10
10
|
background?: BackgroundColorType;
|
|
11
11
|
/** Выстраивать карточки в карусель */
|
|
12
12
|
hasCarousel?: boolean;
|
|
13
|
+
/** Выравнивание одиночной карточки */
|
|
14
|
+
singleCardAlign?: SingleCardAlignType;
|
|
13
15
|
/** Дополнительный класс для компонента */
|
|
14
16
|
className?: string;
|
|
15
17
|
/** Дополнительные классы для внутренних элементов */
|
|
@@ -23,6 +25,7 @@ export interface ICardsOnBackground {
|
|
|
23
25
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
24
26
|
dataAttrs?: {
|
|
25
27
|
root?: Record<string, string>;
|
|
28
|
+
grid?: Record<string, string>;
|
|
26
29
|
item?: Record<string, string>;
|
|
27
30
|
};
|
|
28
31
|
/** Обработчик смены слайда карусели */
|
|
@@ -23,7 +23,6 @@ var getSlidesSettings = function getSlidesSettings(count) {
|
|
|
23
23
|
spaceBetween: 20
|
|
24
24
|
});
|
|
25
25
|
};
|
|
26
|
-
var MIN_ITEMS_COUNT = 2;
|
|
27
26
|
var cn = cnCreate('mfui-9-cards-on-background');
|
|
28
27
|
var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
29
28
|
var items = _ref2.items,
|
|
@@ -31,6 +30,8 @@ var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
|
31
30
|
background = _ref2$background === void 0 ? 'gray' : _ref2$background,
|
|
32
31
|
_ref2$hasCarousel = _ref2.hasCarousel,
|
|
33
32
|
hasCarousel = _ref2$hasCarousel === void 0 ? false : _ref2$hasCarousel,
|
|
33
|
+
_ref2$singleCardAlign = _ref2.singleCardAlign,
|
|
34
|
+
singleCardAlign = _ref2$singleCardAlign === void 0 ? 'left' : _ref2$singleCardAlign,
|
|
34
35
|
className = _ref2.className,
|
|
35
36
|
_ref2$classes = _ref2.classes,
|
|
36
37
|
classes = _ref2$classes === void 0 ? {} : _ref2$classes,
|
|
@@ -45,9 +46,6 @@ var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
|
45
46
|
}),
|
|
46
47
|
maxHeight = _useUniformHeights.maxHeight,
|
|
47
48
|
getRef = _useUniformHeights.getRef;
|
|
48
|
-
if (cardsCount < MIN_ITEMS_COUNT) {
|
|
49
|
-
return null;
|
|
50
|
-
}
|
|
51
49
|
var renderCard = function renderCard(item, index) {
|
|
52
50
|
return /*#__PURE__*/React.createElement(CardOnBackground, _extends({}, item, !!maxHeight && {
|
|
53
51
|
headerHeight: maxHeight
|
|
@@ -76,11 +74,12 @@ var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
|
76
74
|
}, renderCard(item, i));
|
|
77
75
|
}));
|
|
78
76
|
}
|
|
79
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
77
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.grid), {
|
|
80
78
|
className: cn('grid', {
|
|
81
|
-
count: "".concat(cardsCount)
|
|
79
|
+
count: "".concat(cardsCount),
|
|
80
|
+
'single-align': singleCardAlign
|
|
82
81
|
})
|
|
83
|
-
}, items.map(function (item, i) {
|
|
82
|
+
}), items.map(function (item, i) {
|
|
84
83
|
return /*#__PURE__*/React.createElement("div", {
|
|
85
84
|
className: cn('grid-item'),
|
|
86
85
|
key: item.title + i
|
|
@@ -39,4 +39,9 @@ export declare const BackgroundColor: {
|
|
|
39
39
|
readonly VIOLET: "violet";
|
|
40
40
|
};
|
|
41
41
|
export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
|
|
42
|
+
export declare const SingleCardAlign: {
|
|
43
|
+
readonly LEFT: "left";
|
|
44
|
+
readonly CENTER: "center";
|
|
45
|
+
};
|
|
46
|
+
export type SingleCardAlignType = (typeof SingleCardAlign)[keyof typeof SingleCardAlign];
|
|
42
47
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-cards-on-background{border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:16px;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background{padding:32px}}@media screen and (min-width:1024px){.mfui-9-cards-on-background{padding:56px}}.mfui-9-cards-on-background_background_gray{background-color:var(--spbSky0)}.mfui-9-cards-on-background_background_green{background-color:var(--brandGreen20)}.mfui-9-cards-on-background_background_blue{background-color:var(--night20)}.mfui-9-cards-on-background_background_violet{background-color:#e1dcea}@media screen and (max-width:767px){.mfui-9-cards-on-background_carousel{padding-bottom:32px}}@media screen and (max-width:1023px){.mfui-9-cards-on-background_carousel:before{background:-webkit-gradient(linear,left top,right top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;left:0;position:absolute;top:0;width:16px;z-index:1}.mfui-9-cards-on-background_carousel:after{background:-webkit-gradient(linear,right top,left top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;position:absolute;right:0;top:0;width:16px;z-index:1}}.mfui-9-cards-on-background__grid{display:grid;gap:20px;grid-template-columns:1fr;width:100%}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid{grid-template-columns:repeat(12,1fr)}}.mfui-9-cards-on-background__grid-item{grid-column:span 1}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid-item{grid-column:span 6}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item{grid-column:span 4}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(-n+2){grid-column:span 6}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+3){grid-column:span 4}}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-9-cards-on-background{border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;padding:16px;position:relative;width:100%}@media screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background{padding:32px}}@media screen and (min-width:1024px){.mfui-9-cards-on-background{padding:56px}}.mfui-9-cards-on-background_background_gray{background-color:var(--spbSky0)}.mfui-9-cards-on-background_background_green{background-color:var(--brandGreen20)}.mfui-9-cards-on-background_background_blue{background-color:var(--night20)}.mfui-9-cards-on-background_background_violet{background-color:#e1dcea}@media screen and (max-width:767px){.mfui-9-cards-on-background_carousel{padding-bottom:32px}}@media screen and (max-width:1023px){.mfui-9-cards-on-background_carousel:before{background:-webkit-gradient(linear,left top,right top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(90deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;left:0;position:absolute;top:0;width:16px;z-index:1}.mfui-9-cards-on-background_carousel:after{background:-webkit-gradient(linear,right top,left top,from(rgba(242,244,247,.3)),to(hsla(0,0%,100%,0)));background:linear-gradient(270deg,rgba(242,244,247,.3),hsla(0,0%,100%,0));content:"";height:100%;position:absolute;right:0;top:0;width:16px;z-index:1}}.mfui-9-cards-on-background__grid{display:grid;gap:20px;grid-template-columns:1fr;width:100%}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid{grid-template-columns:repeat(12,1fr)}}.mfui-9-cards-on-background__grid-item{grid-column:span 1}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid-item{grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid-item{grid-column:span 4}}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid_count_1 .mfui-9-cards-on-background__grid-item{grid-column:span 12}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_single-align_left.mfui-9-cards-on-background__grid_count_1 .mfui-9-cards-on-background__grid-item{grid-column:span 6}.mfui-9-cards-on-background__grid_single-align_center.mfui-9-cards-on-background__grid_count_1 .mfui-9-cards-on-background__grid-item{grid-column:4/10}}@media screen and (min-width:768px){.mfui-9-cards-on-background__grid_count_2 .mfui-9-cards-on-background__grid-item,.mfui-9-cards-on-background__grid_count_4 .mfui-9-cards-on-background__grid-item{grid-column:span 6}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_3 .mfui-9-cards-on-background__grid-item{grid-column:span 4}}@media screen and (min-width:1024px) and (max-width:1279px),screen and (min-width:768px) and (max-width:1023px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:first-child{grid-column:span 12}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+2){grid-column:span 6}}@media screen and (min-width:1280px){.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(-n+2){grid-column:span 6}.mfui-9-cards-on-background__grid_count_5 .mfui-9-cards-on-background__grid-item:nth-child(n+3){grid-column:span 4}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Carousel } from '@megafon/ui-core';
|
|
3
|
-
import { BackgroundColorType, CardDataType } from './types';
|
|
3
|
+
import { BackgroundColorType, CardDataType, SingleCardAlignType } from './types';
|
|
4
4
|
import './CardsOnBackground.scss';
|
|
5
5
|
type CarouselProps = React.ComponentProps<typeof Carousel>;
|
|
6
6
|
export interface ICardsOnBackground {
|
|
@@ -10,6 +10,8 @@ export interface ICardsOnBackground {
|
|
|
10
10
|
background?: BackgroundColorType;
|
|
11
11
|
/** Выстраивать карточки в карусель */
|
|
12
12
|
hasCarousel?: boolean;
|
|
13
|
+
/** Выравнивание одиночной карточки */
|
|
14
|
+
singleCardAlign?: SingleCardAlignType;
|
|
13
15
|
/** Дополнительный класс для компонента */
|
|
14
16
|
className?: string;
|
|
15
17
|
/** Дополнительные классы для внутренних элементов */
|
|
@@ -23,6 +25,7 @@ export interface ICardsOnBackground {
|
|
|
23
25
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
24
26
|
dataAttrs?: {
|
|
25
27
|
root?: Record<string, string>;
|
|
28
|
+
grid?: Record<string, string>;
|
|
26
29
|
item?: Record<string, string>;
|
|
27
30
|
};
|
|
28
31
|
/** Обработчик смены слайда карусели */
|
|
@@ -32,7 +32,6 @@ var getSlidesSettings = function getSlidesSettings(count) {
|
|
|
32
32
|
spaceBetween: 20
|
|
33
33
|
});
|
|
34
34
|
};
|
|
35
|
-
var MIN_ITEMS_COUNT = 2;
|
|
36
35
|
var cn = (0, _uiHelpers.cnCreate)('mfui-9-cards-on-background');
|
|
37
36
|
var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
38
37
|
var items = _ref2.items,
|
|
@@ -40,6 +39,8 @@ var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
|
40
39
|
background = _ref2$background === void 0 ? 'gray' : _ref2$background,
|
|
41
40
|
_ref2$hasCarousel = _ref2.hasCarousel,
|
|
42
41
|
hasCarousel = _ref2$hasCarousel === void 0 ? false : _ref2$hasCarousel,
|
|
42
|
+
_ref2$singleCardAlign = _ref2.singleCardAlign,
|
|
43
|
+
singleCardAlign = _ref2$singleCardAlign === void 0 ? 'left' : _ref2$singleCardAlign,
|
|
43
44
|
className = _ref2.className,
|
|
44
45
|
_ref2$classes = _ref2.classes,
|
|
45
46
|
classes = _ref2$classes === void 0 ? {} : _ref2$classes,
|
|
@@ -54,9 +55,6 @@ var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
|
54
55
|
}),
|
|
55
56
|
maxHeight = _useUniformHeights.maxHeight,
|
|
56
57
|
getRef = _useUniformHeights.getRef;
|
|
57
|
-
if (cardsCount < MIN_ITEMS_COUNT) {
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
58
|
var renderCard = function renderCard(item, index) {
|
|
61
59
|
return /*#__PURE__*/React.createElement(_CardOnBackground["default"], (0, _extends2["default"])({}, item, !!maxHeight && {
|
|
62
60
|
headerHeight: maxHeight
|
|
@@ -85,11 +83,12 @@ var CardsOnBackground = function CardsOnBackground(_ref2) {
|
|
|
85
83
|
}, renderCard(item, i));
|
|
86
84
|
}));
|
|
87
85
|
}
|
|
88
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
86
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.grid), {
|
|
89
87
|
className: cn('grid', {
|
|
90
|
-
count: "".concat(cardsCount)
|
|
88
|
+
count: "".concat(cardsCount),
|
|
89
|
+
'single-align': singleCardAlign
|
|
91
90
|
})
|
|
92
|
-
}, items.map(function (item, i) {
|
|
91
|
+
}), items.map(function (item, i) {
|
|
93
92
|
return /*#__PURE__*/React.createElement("div", {
|
|
94
93
|
className: cn('grid-item'),
|
|
95
94
|
key: item.title + i
|
|
@@ -39,4 +39,9 @@ export declare const BackgroundColor: {
|
|
|
39
39
|
readonly VIOLET: "violet";
|
|
40
40
|
};
|
|
41
41
|
export type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
|
|
42
|
+
export declare const SingleCardAlign: {
|
|
43
|
+
readonly LEFT: "left";
|
|
44
|
+
readonly CENTER: "center";
|
|
45
|
+
};
|
|
46
|
+
export type SingleCardAlignType = (typeof SingleCardAlign)[keyof typeof SingleCardAlign];
|
|
42
47
|
export {};
|
|
@@ -3,10 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.BackgroundColor = void 0;
|
|
6
|
+
exports.SingleCardAlign = exports.BackgroundColor = void 0;
|
|
7
7
|
var BackgroundColor = exports.BackgroundColor = {
|
|
8
8
|
GRAY: 'gray',
|
|
9
9
|
GREEN: 'green',
|
|
10
10
|
BLUE: 'blue',
|
|
11
11
|
VIOLET: 'violet'
|
|
12
|
+
};
|
|
13
|
+
var SingleCardAlign = exports.SingleCardAlign = {
|
|
14
|
+
LEFT: 'left',
|
|
15
|
+
CENTER: 'center'
|
|
12
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.22",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"@babel/runtime": "^7.8.4",
|
|
80
|
-
"@megafon/ui-core": "^9.0.0-alpha.
|
|
80
|
+
"@megafon/ui-core": "^9.0.0-alpha.22",
|
|
81
81
|
"@megafon/ui-helpers": "^5.0.0-alpha.3",
|
|
82
82
|
"@megafon/ui-icons": "^4.0.0-alpha.12",
|
|
83
83
|
"core-js": "^3.6.4",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"lodash.throttle": "^4.1.1",
|
|
86
86
|
"swiper": "^12.1.2"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "407ec206d7c4bd9644aa834b79431f351acc6787"
|
|
89
89
|
}
|