@cloud-ru/ds-uikit-product-header 1.4.0 → 1.4.1-preview-b28e5234.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/cjs/components/MainMenu/helperComponents/Banners/MenuBanner.js +1 -1
- package/dist/cjs/components/MainMenu/helperComponents/Banners/styles.module.css +4 -0
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js +1 -2
- package/dist/cjs/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.js +1 -1
- package/dist/cjs/style.css +4 -0
- package/dist/esm/components/MainMenu/helperComponents/Banners/MenuBanner.js +1 -1
- package/dist/esm/components/MainMenu/helperComponents/Banners/styles.module.css +4 -0
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.js +1 -2
- package/dist/esm/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.js +1 -1
- package/dist/esm/style.css +4 -0
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +28 -28
- package/src/components/MainMenu/helperComponents/Banners/MenuBanner.tsx +1 -0
- package/src/components/MainMenu/helperComponents/Banners/styles.module.scss +4 -0
- package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.tsx +2 -5
- package/src/components/MainMenu/helperComponents/Favorites/components/EmptyState/EmptyRecentSVG.tsx +5 -6
|
@@ -24,5 +24,5 @@ function MenuBanner({ title, promoTag, afterTitle, onClose, className, href = '#
|
|
|
24
24
|
e.stopPropagation();
|
|
25
25
|
onClose?.(e);
|
|
26
26
|
}, [onClose]);
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(card_1.Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: (0, classnames_1.default)(styles_module_scss_1.default.root, className), "data-test-id": dataTestId ?? constants_1.MENU_BANNER_TEST_IDS.root, ...rest, children: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.contentRow, children: [(0, jsx_runtime_1.jsxs)("span", { className: styles_module_scss_1.default.titleWrapper, children: [(0, jsx_runtime_1.jsx)(typography_1.Typography, { as: 'span', variant: 'body', size: 'm', className: styles_module_scss_1.default.title, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.title, children: title }), promoTag && ((0, jsx_runtime_1.jsx)(promo_tag_1.PromoTag, { ...promoTag, className: styles_module_scss_1.default.promoTag, roleAppearance: promo_tag_1.ROLE_APPEARANCE.Decor, size: promo_tag_1.SIZE.Xs, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.afterTitle, "data-test-id": constants_1.MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && ((0, jsx_runtime_1.jsx)(button_1.Button, { className: (0, classnames_1.default)(styles_module_scss_1.default.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: (0, jsx_runtime_1.jsx)(system_1.CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": constants_1.MENU_BANNER_TEST_IDS.close }))] }) }));
|
|
28
28
|
}
|
|
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.ContentToolbar = ContentToolbar;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const button_1 = require("@cloud-ru/ds-button");
|
|
9
8
|
const system_1 = require("@cloud-ru/ds-icons/interface/system");
|
|
10
9
|
const modal_1 = require("@cloud-ru/ds-modal");
|
|
11
10
|
const segment_control_1 = require("@cloud-ru/ds-segment-control");
|
|
@@ -29,7 +28,7 @@ function ContentToolbar({ segment, onSegmentChange, segmentItems, allGroupsExpan
|
|
|
29
28
|
(0, react_1.startTransition)(() => preferences?.showDescription?.onChange(value));
|
|
30
29
|
};
|
|
31
30
|
const hasSegmentItems = segmentItems && segmentItems?.length > 0;
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(
|
|
31
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.root, "data-test-id": constants_1.TEST_IDS.toolbar, children: [hasSegmentItems && ((0, jsx_runtime_1.jsx)(skeleton_1.WithSkeleton, { loading: loading, skeleton: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.segmentControlSkeleton, "data-test-id": constants_1.TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: styles_module_scss_1.default.segmentControlSkeletonBlock }) }), children: (0, jsx_runtime_1.jsx)(segment_control_1.SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles_module_scss_1.default.segmentControl, "data-test-id": constants_1.TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.actions, children: [preferences && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), (0, jsx_runtime_1.jsx)(modal_1.Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": constants_1.TEST_IDS.settingsModal, cancelButton: {
|
|
33
32
|
label: t('close'),
|
|
34
33
|
onClick: closeModal,
|
|
35
34
|
}, content: (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.settingsContent, children: [preferences.showGroupsColors && ((0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": constants_1.TEST_IDS.settingsShowGroupsColorsSwitch })), (0, jsx_runtime_1.jsx)(uikit_product_switch_row_1.SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": constants_1.TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && ((0, jsx_runtime_1.jsx)(HeaderButton_1.HeaderButton, { icon: allGroupsExpanded ? (0, jsx_runtime_1.jsx)(system_1.CollapseVerticalSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": constants_1.TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));
|
|
@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.EmptyRecentSVG = EmptyRecentSVG;
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
function EmptyRecentSVG({ className }) {
|
|
6
|
-
return ((0, jsx_runtime_1.jsxs)("svg", {
|
|
6
|
+
return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', className: className, children: [(0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', stroke: '#81869C', fill: 'none', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', fill: '#E3E5ED' }), (0, jsx_runtime_1.jsx)("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', stroke: '#81869C', strokeWidth: '1.5' }), (0, jsx_runtime_1.jsx)("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', stroke: '#81869C', fill: 'none', strokeWidth: '1.5' })] }));
|
|
7
7
|
}
|
package/dist/cjs/style.css
CHANGED
|
@@ -18,5 +18,5 @@ export function MenuBanner({ title, promoTag, afterTitle, onClose, className, hr
|
|
|
18
18
|
e.stopPropagation();
|
|
19
19
|
onClose?.(e);
|
|
20
20
|
}, [onClose]);
|
|
21
|
-
return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
|
|
21
|
+
return (_jsx(Card, { as: 'a', href: href, radius: 'l', view: 'simple', className: cn(styles.root, className), "data-test-id": dataTestId ?? MENU_BANNER_TEST_IDS.root, ...rest, children: _jsxs("div", { className: styles.contentRow, children: [_jsxs("span", { className: styles.titleWrapper, children: [_jsx(Typography, { as: 'span', variant: 'body', size: 'm', className: styles.title, "data-test-id": MENU_BANNER_TEST_IDS.title, children: title }), promoTag && (_jsx(PromoTag, { ...promoTag, className: styles.promoTag, roleAppearance: ROLE_APPEARANCE.Decor, size: SIZE.Xs, "data-test-id": MENU_BANNER_TEST_IDS.promoTag }))] }), afterTitle && (_jsx("div", { className: styles.afterTitle, "data-test-id": MENU_BANNER_TEST_IDS.afterTitle, children: afterTitle })), onClose && (_jsx(Button, { className: cn(styles.closeButton, compactThemeClassname), view: 'elevated', appearance: 'neutral', size: 's', icon: _jsx(CrossSVG, { size: 16 }), onClick: handleClose, "aria-label": t('close'), "data-test-id": MENU_BANNER_TEST_IDS.close }))] }) }));
|
|
22
22
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Button } from '@cloud-ru/ds-button';
|
|
3
2
|
import { CollapseVerticalSVG, ExpandVerticalSVG, SettingsSVG } from '@cloud-ru/ds-icons/interface/system';
|
|
4
3
|
import { Modal } from '@cloud-ru/ds-modal';
|
|
5
4
|
import { SegmentControl } from '@cloud-ru/ds-segment-control';
|
|
@@ -23,7 +22,7 @@ export function ContentToolbar({ segment, onSegmentChange, segmentItems, allGrou
|
|
|
23
22
|
startTransition(() => preferences?.showDescription?.onChange(value));
|
|
24
23
|
};
|
|
25
24
|
const hasSegmentItems = segmentItems && segmentItems?.length > 0;
|
|
26
|
-
return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(WithSkeleton, { loading: loading, skeleton: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: _jsx(Skeleton, { className: styles.segmentControlSkeletonBlock }) }), children: _jsx(SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles.segmentControl, "data-test-id": TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && (_jsxs("div", { className: styles.actions, children: [preferences && (_jsxs(_Fragment, { children: [_jsx(
|
|
25
|
+
return (_jsxs("div", { className: styles.root, "data-test-id": TEST_IDS.toolbar, children: [hasSegmentItems && (_jsx(WithSkeleton, { loading: loading, skeleton: _jsx("div", { className: styles.segmentControlSkeleton, "data-test-id": TEST_IDS.segmentControl, "data-mobile": isMobile || undefined, children: _jsx(Skeleton, { className: styles.segmentControlSkeletonBlock }) }), children: _jsx(SegmentControl, { size: 'm', outline: true, value: segment, onChange: onSegmentChange, className: styles.segmentControl, "data-test-id": TEST_IDS.segmentControl, items: segmentItems, width: isMobile ? 'full' : 'auto' }) })), (preferences || !isMobile) && !loading && (_jsxs("div", { className: styles.actions, children: [preferences && (_jsxs(_Fragment, { children: [_jsx(HeaderButton, { icon: _jsx(SettingsSVG, {}), "aria-label": t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsButton, onClick: openModal, tooltip: { tip: t('menuSettingsTitle') } }), _jsx(Modal, { open: open, onClose: closeModal, title: t('menuSettingsTitle'), "data-test-id": TEST_IDS.settingsModal, cancelButton: {
|
|
27
26
|
label: t('close'),
|
|
28
27
|
onClick: closeModal,
|
|
29
28
|
}, content: _jsxs("div", { className: styles.settingsContent, children: [preferences.showGroupsColors && (_jsx(SwitchRow, { title: t('menuSettingsShowGroupsColors'), checked: preferences.showGroupsColors.value, onChange: preferences.showGroupsColors.onChange, "data-test-id": TEST_IDS.settingsShowGroupsColorsSwitch })), _jsx(SwitchRow, { title: t('menuSettingsShowDescription'), checked: preferences.showDescription.value, onChange: handleShowDescriptionChange, "data-test-id": TEST_IDS.settingsShowDescriptionSwitch })] }) })] })), !isMobile && (_jsx(HeaderButton, { icon: allGroupsExpanded ? _jsx(CollapseVerticalSVG, {}) : _jsx(ExpandVerticalSVG, {}), "aria-label": allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups'), "data-test-id": TEST_IDS.toggleAllGroups, onClick: onToggleAllGroupsExpanded, tooltip: { tip: allGroupsExpanded ? t('contentCollapseAllGroups') : t('contentExpandAllGroups') } }))] }))] }));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function EmptyRecentSVG({ className }) {
|
|
3
|
-
return (_jsxs("svg", {
|
|
3
|
+
return (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '40', height: '40', viewBox: '0 0 40 40', fill: 'none', className: className, children: [_jsx("path", { opacity: '0.64', d: 'M2 20.6674L2 33.3043C2 35.8977 4.10232 38 6.69565 38H33.3043C35.8977 38 38 35.8977 38 33.3043V20.6674M2 19.2108L2 6.69566C2 4.10232 4.10232 2 6.69565 2H33.3043C35.8977 2 38 4.10232 38 6.69565C38 6.69565 38 13.9328 38 19.2108', stroke: '#81869C', fill: 'none', strokeWidth: '1.5' }), _jsx("path", { d: 'M6 15L34 15L34 25L6 25L6 15Z', fill: '#E3E5ED' }), _jsx("path", { opacity: '0.64', d: 'M11.2372 20H8.33398M17.7695 20H14.8662M24.3017 20H21.3985M30.834 20H27.9308', stroke: '#81869C', strokeWidth: '1.5' }), _jsx("circle", { opacity: '0.64', cx: '2', cy: '2', r: '2', transform: 'matrix(-1 0 0 1 10 7)', stroke: '#81869C', fill: 'none', strokeWidth: '1.5' })] }));
|
|
4
4
|
}
|