@megafon/ui-shared 7.6.1 → 7.7.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.
- package/dist/es/components/BlogBox/components/BlogBoxTile.css +1 -1
- package/dist/es/components/Card/Card.d.ts +3 -3
- package/dist/es/components/Card/Card.js +4 -1
- package/dist/es/components/Card/types.d.ts +10 -0
- package/dist/es/components/PageTitle/PageTitle.css +1 -1
- package/dist/es/components/PageTitle/PageTitle.d.ts +5 -0
- package/dist/es/components/PageTitle/PageTitle.js +26 -16
- package/dist/lib/components/BlogBox/components/BlogBoxTile.css +1 -1
- package/dist/lib/components/Card/Card.d.ts +3 -3
- package/dist/lib/components/Card/Card.js +4 -1
- package/dist/lib/components/Card/types.d.ts +10 -0
- package/dist/lib/components/PageTitle/PageTitle.css +1 -1
- package/dist/lib/components/PageTitle/PageTitle.d.ts +5 -0
- package/dist/lib/components/PageTitle/PageTitle.js +26 -16
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-blog-box-tile{color:var(--content);display:block;position:relative}.mfui-blog-box-tile,.mfui-blog-box-tile:hover{text-decoration:none}.mfui-blog-box-tile:hover .mfui-blog-box-tile__title{color:var(--brandGreen)}.mfui-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-blog-box-tile__picture{display:block}.mfui-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-blog-box-tile_view_thumbnail
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-blog-box-tile{color:var(--content);display:block;position:relative}.mfui-blog-box-tile,.mfui-blog-box-tile:hover{text-decoration:none}.mfui-blog-box-tile:hover .mfui-blog-box-tile__title{color:var(--brandGreen)}.mfui-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-blog-box-tile__picture{display:block}.mfui-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{-ms-flex-negative:0;flex-shrink:0;height:102px;width:133px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{height:130px;width:170px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{height:170px;width:233px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content{-ms-flex-item-align:center;align-self:center}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date{font-size:12px;line-height:18px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date{font-size:15px;line-height:24px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:358px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:438px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:558px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:8px;left:8px;padding:16px;position:absolute;right:8px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}@media screen and (min-width:768px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{bottom:12px;left:12px;right:12px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:16px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:32px;line-height:40px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:233px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:288px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:367px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:12px;left:12px;padding:16px;position:absolute;right:12px}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import './Card.scss';
|
|
3
|
-
import {
|
|
3
|
+
import { ExtraButtonType, FeaturesList, IconsList, Image, Link, MainButtonType, MarkerList, Price, TextsList, Title } from './types';
|
|
4
4
|
export interface ICard {
|
|
5
5
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
6
6
|
dataAttrs?: {
|
|
@@ -42,9 +42,9 @@ export interface ICard {
|
|
|
42
42
|
/** Цена */
|
|
43
43
|
price?: Price;
|
|
44
44
|
/** Кнопка */
|
|
45
|
-
button?:
|
|
45
|
+
button?: MainButtonType;
|
|
46
46
|
/** Дополнительная кнопка */
|
|
47
|
-
extraButton?:
|
|
47
|
+
extraButton?: ExtraButtonType;
|
|
48
48
|
/** Бейдж */
|
|
49
49
|
badge?: React.ReactElement;
|
|
50
50
|
/** Обработчик клика по карточке */
|
|
@@ -169,6 +169,7 @@ var Card = function Card(_ref5) {
|
|
|
169
169
|
if (!button && !extraButton) {
|
|
170
170
|
return null;
|
|
171
171
|
}
|
|
172
|
+
var extraButtonType = (button === null || button === void 0 ? void 0 : button.type) === 'outline' ? 'text' : extraButton === null || extraButton === void 0 ? void 0 : extraButton.type;
|
|
172
173
|
return /*#__PURE__*/React.createElement("div", {
|
|
173
174
|
className: cn('buttons', {
|
|
174
175
|
centered: (button === null || button === void 0 ? void 0 : button.isCentered) || (extraButton === null || extraButton === void 0 ? void 0 : extraButton.isCentered)
|
|
@@ -180,6 +181,8 @@ var Card = function Card(_ref5) {
|
|
|
180
181
|
className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
|
|
181
182
|
href: button.href,
|
|
182
183
|
target: button.target,
|
|
184
|
+
type: button.type || 'primary',
|
|
185
|
+
theme: button.theme || 'green',
|
|
183
186
|
onClick: button === null || button === void 0 ? void 0 : button.onClick
|
|
184
187
|
}, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
|
|
185
188
|
dataAttrs: {
|
|
@@ -188,7 +191,7 @@ var Card = function Card(_ref5) {
|
|
|
188
191
|
className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
|
|
189
192
|
href: extraButton.href,
|
|
190
193
|
target: extraButton.target,
|
|
191
|
-
type:
|
|
194
|
+
type: extraButtonType || 'outline',
|
|
192
195
|
onClick: extraButton === null || extraButton === void 0 ? void 0 : extraButton.onClick
|
|
193
196
|
}, extraButton.title));
|
|
194
197
|
};
|
|
@@ -73,4 +73,14 @@ export type ButtonType = {
|
|
|
73
73
|
/** Обработчик клика по кнопке */
|
|
74
74
|
onClick?: () => void;
|
|
75
75
|
};
|
|
76
|
+
export type MainButtonType = ButtonType & {
|
|
77
|
+
/** Тип кнопки */
|
|
78
|
+
type?: 'primary' | 'outline';
|
|
79
|
+
/** Тема кнопки */
|
|
80
|
+
theme?: 'green' | 'green-soft';
|
|
81
|
+
};
|
|
82
|
+
export type ExtraButtonType = ButtonType & {
|
|
83
|
+
/** Тип кнопки */
|
|
84
|
+
type?: 'outline' | 'text';
|
|
85
|
+
};
|
|
76
86
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:48px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:40px}}@media screen and (max-width:767px){.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:32px}}.mfui-page-title__description{color:inherit;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin-top:24px;white-space:pre-wrap}@media screen and (max-width:767px){.mfui-page-title__description{margin-top:16px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
|
|
@@ -10,6 +10,8 @@ export type PageTitleProps = {
|
|
|
10
10
|
};
|
|
11
11
|
/** Текст заголовка */
|
|
12
12
|
title: string | React.ReactNode | React.ReactNode[];
|
|
13
|
+
/** Описание */
|
|
14
|
+
description?: string | React.ReactNode | React.ReactNode[];
|
|
13
15
|
/** Хлебные крошки */
|
|
14
16
|
breadcrumbs?: BreadcrumbsType['items'];
|
|
15
17
|
/** Текст бейджа */
|
|
@@ -18,10 +20,13 @@ export type PageTitleProps = {
|
|
|
18
20
|
isFullWidth?: boolean;
|
|
19
21
|
/** Включить микроразметку для хлебных крошек */
|
|
20
22
|
hasBreadcrumbsMicrodata?: boolean;
|
|
23
|
+
/** Отступ сверху */
|
|
24
|
+
marginTop?: 'default' | 'small';
|
|
21
25
|
/** Класс для корневого элемента */
|
|
22
26
|
className?: string;
|
|
23
27
|
/** Дополнительные классы для внутренних элементов */
|
|
24
28
|
classes?: {
|
|
29
|
+
title?: string;
|
|
25
30
|
breadcrumbs?: string;
|
|
26
31
|
};
|
|
27
32
|
/** Ссылка на корневой элемент */
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import "core-js/modules/es.symbol.js";
|
|
3
|
+
import "core-js/modules/es.symbol.description.js";
|
|
2
4
|
import * as React from 'react';
|
|
3
5
|
import { Header, Grid, GridColumn } from '@megafon/ui-core';
|
|
4
6
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
@@ -9,30 +11,38 @@ var cn = cnCreate('mfui-page-title');
|
|
|
9
11
|
var PageTitle = function PageTitle(_ref) {
|
|
10
12
|
var dataAttrs = _ref.dataAttrs,
|
|
11
13
|
title = _ref.title,
|
|
14
|
+
description = _ref.description,
|
|
12
15
|
breadcrumbs = _ref.breadcrumbs,
|
|
13
16
|
badge = _ref.badge,
|
|
14
17
|
_ref$isFullWidth = _ref.isFullWidth,
|
|
15
18
|
isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
|
|
16
19
|
_ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
|
|
17
20
|
hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
|
|
21
|
+
_ref$marginTop = _ref.marginTop,
|
|
22
|
+
marginTop = _ref$marginTop === void 0 ? 'default' : _ref$marginTop,
|
|
18
23
|
className = _ref.className,
|
|
19
24
|
_ref$classes = _ref.classes,
|
|
20
25
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
21
26
|
rootRef = _ref.rootRef;
|
|
22
27
|
var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
|
|
28
|
+
var titleContent = /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
className: cn('badge', {
|
|
30
|
+
'under-breadcrumbs': isBreadcrumbs
|
|
31
|
+
})
|
|
32
|
+
}, badge), /*#__PURE__*/React.createElement(Header, {
|
|
33
|
+
className: cn('title', {
|
|
34
|
+
single: !isBreadcrumbs && !badge,
|
|
35
|
+
'margin-top': marginTop,
|
|
36
|
+
'under-breadcrumbs': isBreadcrumbs && !badge
|
|
37
|
+
}, [classes.title]),
|
|
38
|
+
as: "h1"
|
|
39
|
+
}, title), description && /*#__PURE__*/React.createElement("div", {
|
|
40
|
+
className: cn('description')
|
|
41
|
+
}, description));
|
|
42
|
+
var renderContent = function renderContent() {
|
|
43
|
+
if (isFullWidth) {
|
|
44
|
+
return titleContent;
|
|
45
|
+
}
|
|
36
46
|
return /*#__PURE__*/React.createElement(Grid, {
|
|
37
47
|
dataAttrs: {
|
|
38
48
|
root: {
|
|
@@ -44,8 +54,8 @@ var PageTitle = function PageTitle(_ref) {
|
|
|
44
54
|
desktop: "10",
|
|
45
55
|
tablet: "12",
|
|
46
56
|
mobile: "12"
|
|
47
|
-
},
|
|
48
|
-
}
|
|
57
|
+
}, titleContent));
|
|
58
|
+
};
|
|
49
59
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
50
60
|
className: cn([className]),
|
|
51
61
|
ref: rootRef
|
|
@@ -59,6 +69,6 @@ var PageTitle = function PageTitle(_ref) {
|
|
|
59
69
|
link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
|
|
60
70
|
},
|
|
61
71
|
className: cn('breadcrumbs', [classes.breadcrumbs])
|
|
62
|
-
}),
|
|
72
|
+
}), renderContent());
|
|
63
73
|
};
|
|
64
74
|
export default PageTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-blog-box-tile{color:var(--content);display:block;position:relative}.mfui-blog-box-tile,.mfui-blog-box-tile:hover{text-decoration:none}.mfui-blog-box-tile:hover .mfui-blog-box-tile__title{color:var(--brandGreen)}.mfui-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-blog-box-tile__picture{display:block}.mfui-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-blog-box-tile_view_thumbnail
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-blog-box-tile{color:var(--content);display:block;position:relative}.mfui-blog-box-tile,.mfui-blog-box-tile:hover{text-decoration:none}.mfui-blog-box-tile:hover .mfui-blog-box-tile__title{color:var(--brandGreen)}.mfui-blog-box-tile__image{border-radius:24px;height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}.mfui-blog-box-tile__picture{display:block}.mfui-blog-box-tile__date{color:var(--spbSky3);margin-bottom:4px}.mfui-blog-box-tile__title{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;-webkit-transition:color .3s;transition:color .3s}.mfui-blog-box-tile_view_thumbnail{display:-webkit-box;display:-ms-flexbox;display:flex;gap:20px}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{-ms-flex-negative:0;flex-shrink:0;height:102px;width:133px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{height:130px;width:170px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__picture{height:170px;width:233px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__content{-ms-flex-item-align:center;align-self:center}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date{font-size:12px;line-height:18px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__date{font-size:15px;line-height:24px}}.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_thumbnail .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:358px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:438px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__picture{height:558px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:8px;left:8px;padding:16px;position:absolute;right:8px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}@media screen and (min-width:768px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{bottom:12px;left:12px;right:12px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:16px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__content{padding:24px}}.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_full .mfui-blog-box-tile__title{font-size:32px;line-height:40px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:233px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:288px}}@media screen and (min-width:1440px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__picture{height:367px}}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__content{background-color:var(--base);border-radius:24px;bottom:12px;left:12px;padding:16px;position:absolute;right:12px}.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-blog-box-tile_view_compact .mfui-blog-box-tile__title{font-size:20px;line-height:28px}}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import './Card.scss';
|
|
3
|
-
import {
|
|
3
|
+
import { ExtraButtonType, FeaturesList, IconsList, Image, Link, MainButtonType, MarkerList, Price, TextsList, Title } from './types';
|
|
4
4
|
export interface ICard {
|
|
5
5
|
/** Дополнительные data атрибуты к внутренним элементам */
|
|
6
6
|
dataAttrs?: {
|
|
@@ -42,9 +42,9 @@ export interface ICard {
|
|
|
42
42
|
/** Цена */
|
|
43
43
|
price?: Price;
|
|
44
44
|
/** Кнопка */
|
|
45
|
-
button?:
|
|
45
|
+
button?: MainButtonType;
|
|
46
46
|
/** Дополнительная кнопка */
|
|
47
|
-
extraButton?:
|
|
47
|
+
extraButton?: ExtraButtonType;
|
|
48
48
|
/** Бейдж */
|
|
49
49
|
badge?: React.ReactElement;
|
|
50
50
|
/** Обработчик клика по карточке */
|
|
@@ -178,6 +178,7 @@ var Card = function Card(_ref5) {
|
|
|
178
178
|
if (!button && !extraButton) {
|
|
179
179
|
return null;
|
|
180
180
|
}
|
|
181
|
+
var extraButtonType = (button === null || button === void 0 ? void 0 : button.type) === 'outline' ? 'text' : extraButton === null || extraButton === void 0 ? void 0 : extraButton.type;
|
|
181
182
|
return /*#__PURE__*/React.createElement("div", {
|
|
182
183
|
className: cn('buttons', {
|
|
183
184
|
centered: (button === null || button === void 0 ? void 0 : button.isCentered) || (extraButton === null || extraButton === void 0 ? void 0 : extraButton.isCentered)
|
|
@@ -189,6 +190,8 @@ var Card = function Card(_ref5) {
|
|
|
189
190
|
className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
|
|
190
191
|
href: button.href,
|
|
191
192
|
target: button.target,
|
|
193
|
+
type: button.type || 'primary',
|
|
194
|
+
theme: button.theme || 'green',
|
|
192
195
|
onClick: button === null || button === void 0 ? void 0 : button.onClick
|
|
193
196
|
}, button.title), !!extraButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
|
|
194
197
|
dataAttrs: {
|
|
@@ -197,7 +200,7 @@ var Card = function Card(_ref5) {
|
|
|
197
200
|
className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
|
|
198
201
|
href: extraButton.href,
|
|
199
202
|
target: extraButton.target,
|
|
200
|
-
type:
|
|
203
|
+
type: extraButtonType || 'outline',
|
|
201
204
|
onClick: extraButton === null || extraButton === void 0 ? void 0 : extraButton.onClick
|
|
202
205
|
}, extraButton.title));
|
|
203
206
|
};
|
|
@@ -73,4 +73,14 @@ export type ButtonType = {
|
|
|
73
73
|
/** Обработчик клика по кнопке */
|
|
74
74
|
onClick?: () => void;
|
|
75
75
|
};
|
|
76
|
+
export type MainButtonType = ButtonType & {
|
|
77
|
+
/** Тип кнопки */
|
|
78
|
+
type?: 'primary' | 'outline';
|
|
79
|
+
/** Тема кнопки */
|
|
80
|
+
theme?: 'green' | 'green-soft';
|
|
81
|
+
};
|
|
82
|
+
export type ExtraButtonType = ButtonType & {
|
|
83
|
+
/** Тип кнопки */
|
|
84
|
+
type?: 'outline' | 'text';
|
|
85
|
+
};
|
|
76
86
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-page-title{display:inline-block;width:100%}.mfui-page-title__title{margin-top:110px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title{margin-top:100px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title{margin-top:90px}}@media screen and (max-width:767px){.mfui-page-title__title{margin-top:45px}}.mfui-page-title__badge{background-color:var(--brandPurple);color:var(--stcWhite);display:inline-block;font-size:12px;font-weight:500;line-height:18px;margin-top:16px;padding:2px 14px}@media screen and (min-width:1280px){.mfui-page-title__badge_under-breadcrumbs{margin-top:32px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__badge_under-breadcrumbs{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__badge_under-breadcrumbs{margin-top:16px}}@media screen and (min-width:1280px){.mfui-page-title__title_under-breadcrumbs{margin-top:60px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-page-title__title_under-breadcrumbs{margin-top:50px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_under-breadcrumbs{margin-top:45px}}.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:48px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:40px}}@media screen and (max-width:767px){.mfui-page-title__title_single.mfui-page-title__title_margin-top_small{margin-top:32px}}.mfui-page-title__description{color:inherit;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;margin-top:24px;white-space:pre-wrap}@media screen and (max-width:767px){.mfui-page-title__description{margin-top:16px}}.mfui-page-title__badge+.mfui-page-title__title{margin-top:8px}
|
|
@@ -10,6 +10,8 @@ export type PageTitleProps = {
|
|
|
10
10
|
};
|
|
11
11
|
/** Текст заголовка */
|
|
12
12
|
title: string | React.ReactNode | React.ReactNode[];
|
|
13
|
+
/** Описание */
|
|
14
|
+
description?: string | React.ReactNode | React.ReactNode[];
|
|
13
15
|
/** Хлебные крошки */
|
|
14
16
|
breadcrumbs?: BreadcrumbsType['items'];
|
|
15
17
|
/** Текст бейджа */
|
|
@@ -18,10 +20,13 @@ export type PageTitleProps = {
|
|
|
18
20
|
isFullWidth?: boolean;
|
|
19
21
|
/** Включить микроразметку для хлебных крошек */
|
|
20
22
|
hasBreadcrumbsMicrodata?: boolean;
|
|
23
|
+
/** Отступ сверху */
|
|
24
|
+
marginTop?: 'default' | 'small';
|
|
21
25
|
/** Класс для корневого элемента */
|
|
22
26
|
className?: string;
|
|
23
27
|
/** Дополнительные классы для внутренних элементов */
|
|
24
28
|
classes?: {
|
|
29
|
+
title?: string;
|
|
25
30
|
breadcrumbs?: string;
|
|
26
31
|
};
|
|
27
32
|
/** Ссылка на корневой элемент */
|
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports["default"] = void 0;
|
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
require("core-js/modules/es.symbol.js");
|
|
10
|
+
require("core-js/modules/es.symbol.description.js");
|
|
9
11
|
var React = _interopRequireWildcard(require("react"));
|
|
10
12
|
var _uiCore = require("@megafon/ui-core");
|
|
11
13
|
var _uiHelpers = require("@megafon/ui-helpers");
|
|
@@ -18,30 +20,38 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-page-title');
|
|
|
18
20
|
var PageTitle = function PageTitle(_ref) {
|
|
19
21
|
var dataAttrs = _ref.dataAttrs,
|
|
20
22
|
title = _ref.title,
|
|
23
|
+
description = _ref.description,
|
|
21
24
|
breadcrumbs = _ref.breadcrumbs,
|
|
22
25
|
badge = _ref.badge,
|
|
23
26
|
_ref$isFullWidth = _ref.isFullWidth,
|
|
24
27
|
isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
|
|
25
28
|
_ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
|
|
26
29
|
hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
|
|
30
|
+
_ref$marginTop = _ref.marginTop,
|
|
31
|
+
marginTop = _ref$marginTop === void 0 ? 'default' : _ref$marginTop,
|
|
27
32
|
className = _ref.className,
|
|
28
33
|
_ref$classes = _ref.classes,
|
|
29
34
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
|
30
35
|
rootRef = _ref.rootRef;
|
|
31
36
|
var isBreadcrumbs = !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length);
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
},
|
|
44
|
-
|
|
37
|
+
var titleContent = /*#__PURE__*/React.createElement(React.Fragment, null, badge && /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: cn('badge', {
|
|
39
|
+
'under-breadcrumbs': isBreadcrumbs
|
|
40
|
+
})
|
|
41
|
+
}, badge), /*#__PURE__*/React.createElement(_uiCore.Header, {
|
|
42
|
+
className: cn('title', {
|
|
43
|
+
single: !isBreadcrumbs && !badge,
|
|
44
|
+
'margin-top': marginTop,
|
|
45
|
+
'under-breadcrumbs': isBreadcrumbs && !badge
|
|
46
|
+
}, [classes.title]),
|
|
47
|
+
as: "h1"
|
|
48
|
+
}, title), description && /*#__PURE__*/React.createElement("div", {
|
|
49
|
+
className: cn('description')
|
|
50
|
+
}, description));
|
|
51
|
+
var renderContent = function renderContent() {
|
|
52
|
+
if (isFullWidth) {
|
|
53
|
+
return titleContent;
|
|
54
|
+
}
|
|
45
55
|
return /*#__PURE__*/React.createElement(_uiCore.Grid, {
|
|
46
56
|
dataAttrs: {
|
|
47
57
|
root: {
|
|
@@ -53,8 +63,8 @@ var PageTitle = function PageTitle(_ref) {
|
|
|
53
63
|
desktop: "10",
|
|
54
64
|
tablet: "12",
|
|
55
65
|
mobile: "12"
|
|
56
|
-
},
|
|
57
|
-
}
|
|
66
|
+
}, titleContent));
|
|
67
|
+
};
|
|
58
68
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
|
59
69
|
className: cn([className]),
|
|
60
70
|
ref: rootRef
|
|
@@ -68,6 +78,6 @@ var PageTitle = function PageTitle(_ref) {
|
|
|
68
78
|
link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
|
|
69
79
|
},
|
|
70
80
|
className: cn('breadcrumbs', [classes.breadcrumbs])
|
|
71
|
-
}),
|
|
81
|
+
}), renderContent());
|
|
72
82
|
};
|
|
73
83
|
var _default = exports["default"] = PageTitle;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.7.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -77,13 +77,13 @@
|
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"@babel/runtime": "^7.8.4",
|
|
80
|
-
"@megafon/ui-core": "^7.
|
|
80
|
+
"@megafon/ui-core": "^7.6.0",
|
|
81
81
|
"@megafon/ui-helpers": "^3.1.1",
|
|
82
|
-
"@megafon/ui-icons": "^3.
|
|
82
|
+
"@megafon/ui-icons": "^3.4.0",
|
|
83
83
|
"core-js": "^3.6.4",
|
|
84
84
|
"htmr": "^1.0.2",
|
|
85
85
|
"lodash.throttle": "^4.1.1",
|
|
86
86
|
"swiper": "^11.1.1"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "327dfbd92bc2d6dfd02455d92527ae27d9944207"
|
|
89
89
|
}
|