@snack-uikit/drawer 0.4.6-preview-85c5f47b.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 (69) hide show
  1. package/CHANGELOG.md +256 -0
  2. package/LICENSE +201 -0
  3. package/README.md +81 -0
  4. package/dist/components/Drawer/Drawer.d.ts +28 -0
  5. package/dist/components/Drawer/Drawer.js +25 -0
  6. package/dist/components/Drawer/index.d.ts +1 -0
  7. package/dist/components/Drawer/index.js +1 -0
  8. package/dist/components/Drawer/styles.module.css +3 -0
  9. package/dist/components/DrawerCustom/DrawerCustom.d.ts +44 -0
  10. package/dist/components/DrawerCustom/DrawerCustom.js +34 -0
  11. package/dist/components/DrawerCustom/constants.d.ts +5 -0
  12. package/dist/components/DrawerCustom/constants.js +13 -0
  13. package/dist/components/DrawerCustom/index.d.ts +1 -0
  14. package/dist/components/DrawerCustom/index.js +1 -0
  15. package/dist/components/DrawerCustom/motion.css +63 -0
  16. package/dist/components/DrawerCustom/styles.module.css +53 -0
  17. package/dist/components/index.d.ts +2 -0
  18. package/dist/components/index.js +2 -0
  19. package/dist/constants.d.ts +29 -0
  20. package/dist/constants.js +32 -0
  21. package/dist/helperComponents/Body/Body.d.ts +10 -0
  22. package/dist/helperComponents/Body/Body.js +21 -0
  23. package/dist/helperComponents/Body/index.d.ts +1 -0
  24. package/dist/helperComponents/Body/index.js +1 -0
  25. package/dist/helperComponents/Body/styles.module.css +8 -0
  26. package/dist/helperComponents/ButtonClose/ButtonClose.d.ts +5 -0
  27. package/dist/helperComponents/ButtonClose/ButtonClose.js +7 -0
  28. package/dist/helperComponents/ButtonClose/index.d.ts +1 -0
  29. package/dist/helperComponents/ButtonClose/index.js +1 -0
  30. package/dist/helperComponents/ButtonClose/styles.module.css +35 -0
  31. package/dist/helperComponents/Footer/Footer.d.ts +10 -0
  32. package/dist/helperComponents/Footer/Footer.js +21 -0
  33. package/dist/helperComponents/Footer/index.d.ts +1 -0
  34. package/dist/helperComponents/Footer/index.js +1 -0
  35. package/dist/helperComponents/Footer/styles.module.css +17 -0
  36. package/dist/helperComponents/Header/Header.d.ts +20 -0
  37. package/dist/helperComponents/Header/Header.js +23 -0
  38. package/dist/helperComponents/Header/index.d.ts +1 -0
  39. package/dist/helperComponents/Header/index.js +1 -0
  40. package/dist/helperComponents/Header/styles.module.css +35 -0
  41. package/dist/helperComponents/index.d.ts +4 -0
  42. package/dist/helperComponents/index.js +4 -0
  43. package/dist/index.d.ts +1 -0
  44. package/dist/index.js +1 -0
  45. package/package.json +46 -0
  46. package/src/components/Drawer/Drawer.tsx +95 -0
  47. package/src/components/Drawer/index.ts +1 -0
  48. package/src/components/Drawer/styles.module.scss +3 -0
  49. package/src/components/DrawerCustom/DrawerCustom.tsx +117 -0
  50. package/src/components/DrawerCustom/constants.ts +18 -0
  51. package/src/components/DrawerCustom/index.ts +1 -0
  52. package/src/components/DrawerCustom/motion.css +63 -0
  53. package/src/components/DrawerCustom/styles.module.scss +64 -0
  54. package/src/components/index.ts +2 -0
  55. package/src/constants.ts +34 -0
  56. package/src/helperComponents/Body/Body.tsx +23 -0
  57. package/src/helperComponents/Body/index.ts +1 -0
  58. package/src/helperComponents/Body/styles.module.scss +10 -0
  59. package/src/helperComponents/ButtonClose/ButtonClose.tsx +21 -0
  60. package/src/helperComponents/ButtonClose/index.ts +1 -0
  61. package/src/helperComponents/ButtonClose/styles.module.scss +44 -0
  62. package/src/helperComponents/Footer/Footer.tsx +25 -0
  63. package/src/helperComponents/Footer/index.ts +1 -0
  64. package/src/helperComponents/Footer/styles.module.scss +17 -0
  65. package/src/helperComponents/Header/Header.tsx +64 -0
  66. package/src/helperComponents/Header/index.ts +1 -0
  67. package/src/helperComponents/Header/styles.module.scss +36 -0
  68. package/src/helperComponents/index.ts +4 -0
  69. package/src/index.ts +1 -0
@@ -0,0 +1,34 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import 'rc-drawer/assets/index.css';
14
+ import cn from 'classnames';
15
+ import RcDrawer from 'rc-drawer';
16
+ import { extractSupportProps } from '@snack-uikit/utils';
17
+ import { Mode, Position, Size, SIZE_AS_VALUES } from '../../constants';
18
+ import { ButtonClose, DrawerBody, DrawerFooter, DrawerHeader, } from '../../helperComponents';
19
+ import { motionProps } from './constants';
20
+ import styles from './styles.module.css';
21
+ function DrawerCustomComponent(_a) {
22
+ var { open, mode = Mode.Regular, position = Position.Right, onClose, rootClassName, className, size = Size.S, push, container, children, nestedDrawer } = _a, rest = __rest(_a, ["open", "mode", "position", "onClose", "rootClassName", "className", "size", "push", "container", "children", "nestedDrawer"]);
23
+ const isRegular = mode === Mode.Regular;
24
+ const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
25
+ return (_jsxs(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, maskClassName: styles.mask, keyboard: isRegular, width: isPredefinedSize ? 'null' : size, open: open, placement: position, destroyOnClose: true, push: push, onClose: onClose, getContainer: container, className: cn(styles.drawer, className), rootClassName: cn(styles.drawerRoot, rootClassName) }, extractSupportProps(rest), { "data-content-wrapper": true, "data-size": isPredefinedSize ? size : undefined, "data-mode": mode }, motionProps, { children: [_jsx("div", Object.assign({ className: styles.headerElements }, { children: _jsx(ButtonClose, { onClick: onClose }) })), children, nestedDrawer] })));
26
+ }
27
+ /** Компонент-конструктор */
28
+ export const DrawerCustom = DrawerCustomComponent;
29
+ DrawerCustom.modes = Mode;
30
+ DrawerCustom.positions = Position;
31
+ DrawerCustom.sizes = Size;
32
+ DrawerCustom.Header = DrawerHeader;
33
+ DrawerCustom.Body = DrawerBody;
34
+ DrawerCustom.Footer = DrawerFooter;
@@ -0,0 +1,5 @@
1
+ import './motion.css';
2
+ import type { DrawerProps } from 'rc-drawer';
3
+ export declare const maskMotion: DrawerProps['maskMotion'];
4
+ export declare const motion: DrawerProps['motion'];
5
+ export declare const motionProps: Partial<DrawerProps>;
@@ -0,0 +1,13 @@
1
+ import './motion.css';
2
+ export const maskMotion = {
3
+ motionAppear: true,
4
+ motionName: 'maskMotion',
5
+ };
6
+ export const motion = placement => ({
7
+ motionAppear: true,
8
+ motionName: `panelMotion-${placement}`,
9
+ });
10
+ export const motionProps = {
11
+ maskMotion,
12
+ motion,
13
+ };
@@ -0,0 +1 @@
1
+ export * from './DrawerCustom';
@@ -0,0 +1 @@
1
+ export * from './DrawerCustom';
@@ -0,0 +1,63 @@
1
+ .maskMotion {
2
+ opacity: unset;
3
+ }
4
+ .maskMotion-enter, .maskMotion-appear {
5
+ opacity: 0;
6
+ }
7
+ .maskMotion-enter-active, .maskMotion-appear-active {
8
+ opacity: 1;
9
+ transition: opacity 0.2s;
10
+ }
11
+ .maskMotion-leave {
12
+ opacity: 1;
13
+ }
14
+ .maskMotion-leave-active {
15
+ opacity: 0;
16
+ transition: opacity 0.1s;
17
+ }
18
+
19
+ .panelMotion {
20
+ transform: unset;
21
+ }
22
+ .panelMotion-left-enter-start, .panelMotion-left-appear-start, .panelMotion-left-leave-start {
23
+ transition: none !important;
24
+ }
25
+ .panelMotion-left-enter-active, .panelMotion-left-appear-active {
26
+ transition: transform 0.2s ease-in-out;
27
+ }
28
+ .panelMotion-left-leave-active {
29
+ transition: transform 0.1s ease-out;
30
+ }
31
+ .panelMotion-left-enter, .panelMotion-left-appear {
32
+ transform: translateX(-100%);
33
+ }
34
+ .panelMotion-left-enter-active, .panelMotion-left-appear-active {
35
+ transform: translateX(0);
36
+ }
37
+ .panelMotion-left-leave {
38
+ transform: translateX(0);
39
+ }
40
+ .panelMotion-left-leave-active {
41
+ transform: translateX(-100%) !important;
42
+ }
43
+ .panelMotion-right-enter-start, .panelMotion-right-appear-start, .panelMotion-right-leave-start {
44
+ transition: none !important;
45
+ }
46
+ .panelMotion-right-enter-active, .panelMotion-right-appear-active {
47
+ transition: transform 0.2s ease-in-out;
48
+ }
49
+ .panelMotion-right-leave-active {
50
+ transition: transform 0.1s ease-out;
51
+ }
52
+ .panelMotion-right-enter, .panelMotion-right-appear {
53
+ transform: translateX(100%);
54
+ }
55
+ .panelMotion-right-enter-active, .panelMotion-right-appear-active {
56
+ transform: translateX(0);
57
+ }
58
+ .panelMotion-right-leave {
59
+ transform: translateX(0);
60
+ }
61
+ .panelMotion-right-leave-active {
62
+ transform: translateX(100%) !important;
63
+ }
@@ -0,0 +1,53 @@
1
+ .drawerRoot{
2
+ z-index:auto !important;
3
+ }
4
+
5
+ div[data-content-wrapper=true]{
6
+ will-change:transform;
7
+ z-index:auto;
8
+ overflow:unset;
9
+ max-width:calc(100% - var(--space-drawer-outside-gap, 24px));
10
+ height:100%;
11
+ }
12
+ div[data-content-wrapper=true][data-size=s]{
13
+ min-width:var(--size-drawer-min-width-s, 304px);
14
+ width:var(--size-drawer-width-s, 464px);
15
+ }
16
+ div[data-content-wrapper=true][data-size=m]{
17
+ min-width:var(--size-drawer-min-width-m, 304px);
18
+ width:var(--size-drawer-width-m, 864px);
19
+ }
20
+ div[data-content-wrapper=true][data-size=l]{
21
+ min-width:var(--size-drawer-min-width-l, 304px);
22
+ width:var(--size-drawer-width-l, 1872px);
23
+ }
24
+ div[data-content-wrapper=true][data-mode=regular] .drawer{
25
+ background-color:var(--sys-neutral-background1-level, #f9f9f9);
26
+ }
27
+ div[data-content-wrapper=true][data-mode=soft] .drawer{
28
+ background-color:var(--sys-neutral-background2-level, #fdfdfd);
29
+ }
30
+
31
+ .drawer{
32
+ overflow:unset;
33
+ display:flex;
34
+ flex-direction:column;
35
+ box-sizing:border-box;
36
+ box-shadow:var(--box-shadow-elevation-level5, 0px 0px 16px 0px rgba(0, 0, 0, 0.0784313725), 0px 24px 16px 0px rgba(0, 0, 0, 0.0784313725));
37
+ }
38
+
39
+ .headerElements{
40
+ padding-top:var(--space-drawer-header-elements-top, 32px);
41
+ padding-right:var(--space-drawer-header-elements-side, 32px);
42
+ gap:var(--dimension-theme-general-16px, 16px);
43
+ position:absolute;
44
+ top:0;
45
+ right:0;
46
+ display:flex;
47
+ align-items:center;
48
+ }
49
+
50
+ .mask{
51
+ z-index:auto !important;
52
+ background-color:var(--sys-blackout, rgba(0, 0, 0, 0.4784313725));
53
+ }
@@ -0,0 +1,2 @@
1
+ export * from './DrawerCustom';
2
+ export * from './Drawer';
@@ -0,0 +1,2 @@
1
+ export * from './DrawerCustom';
2
+ export * from './Drawer';
@@ -0,0 +1,29 @@
1
+ export declare enum Size {
2
+ S = "s",
3
+ M = "m",
4
+ L = "l"
5
+ }
6
+ export declare const SIZE_AS_VALUES: string[];
7
+ export declare enum Mode {
8
+ Regular = "regular",
9
+ Soft = "soft"
10
+ }
11
+ export declare enum Position {
12
+ Right = "right",
13
+ Left = "left"
14
+ }
15
+ export declare const NESTED_DRAWER_PUSH_DISTANCE = 24;
16
+ export declare const TEST_IDS: {
17
+ closeButton: string;
18
+ header: string;
19
+ title: string;
20
+ tooltip: string;
21
+ subtitle: string;
22
+ image: string;
23
+ content: string;
24
+ footer: string;
25
+ footerActions: string;
26
+ approveButton: string;
27
+ cancelButton: string;
28
+ additionalButton: string;
29
+ };
@@ -0,0 +1,32 @@
1
+ export var Size;
2
+ (function (Size) {
3
+ Size["S"] = "s";
4
+ Size["M"] = "m";
5
+ Size["L"] = "l";
6
+ })(Size || (Size = {}));
7
+ export const SIZE_AS_VALUES = Object.values(Size);
8
+ export var Mode;
9
+ (function (Mode) {
10
+ Mode["Regular"] = "regular";
11
+ Mode["Soft"] = "soft";
12
+ })(Mode || (Mode = {}));
13
+ export var Position;
14
+ (function (Position) {
15
+ Position["Right"] = "right";
16
+ Position["Left"] = "left";
17
+ })(Position || (Position = {}));
18
+ export const NESTED_DRAWER_PUSH_DISTANCE = 24;
19
+ export const TEST_IDS = {
20
+ closeButton: 'drawer__close-button',
21
+ header: 'drawer__header',
22
+ title: 'drawer__title',
23
+ tooltip: 'drawer__title-tooltip',
24
+ subtitle: 'drawer__subtitle',
25
+ image: 'drawer__image',
26
+ content: 'drawer__body',
27
+ footer: 'drawer__footer',
28
+ footerActions: 'drawer__footer-actions',
29
+ approveButton: 'drawer__approve-button',
30
+ cancelButton: 'drawer__cancel-button',
31
+ additionalButton: 'drawer__additional-button',
32
+ };
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ import { WithSupportProps } from '@snack-uikit/utils';
3
+ export type DrawerBodyProps = WithSupportProps<{
4
+ /** Контент */
5
+ content: ReactNode;
6
+ /** CSS-класс */
7
+ className?: string;
8
+ }>;
9
+ /** Вспомогательный компонент для добавления "тела" в DrawerCustom */
10
+ export declare function DrawerBody({ content, className, ...rest }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,21 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import cn from 'classnames';
14
+ import { Scroll } from '@snack-uikit/scroll';
15
+ import { extractSupportProps } from '@snack-uikit/utils';
16
+ import styles from './styles.module.css';
17
+ /** Вспомогательный компонент для добавления "тела" в DrawerCustom */
18
+ export function DrawerBody(_a) {
19
+ var { content, className } = _a, rest = __rest(_a, ["content", "className"]);
20
+ return (_jsx(Scroll, Object.assign({ size: Scroll.sizes.M, className: cn(styles.drawerBody, className) }, extractSupportProps(rest), { children: content })));
21
+ }
@@ -0,0 +1 @@
1
+ export * from './Body';
@@ -0,0 +1 @@
1
+ export * from './Body';
@@ -0,0 +1,8 @@
1
+ .drawerBody{
2
+ padding-left:var(--space-drawer-body-side, 32px);
3
+ padding-right:var(--space-drawer-body-side, 32px);
4
+ flex:1 1 auto;
5
+ box-sizing:border-box;
6
+ min-height:var(--dimension-2m, 16px);
7
+ color:var(--sys-neutral-text-main, #333333);
8
+ }
@@ -0,0 +1,5 @@
1
+ type ButtonCloseProps = {
2
+ onClick(): void;
3
+ };
4
+ export declare function ButtonClose({ onClick }: ButtonCloseProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { CrossSVG } from '@snack-uikit/icons';
3
+ import { TEST_IDS } from '../../constants';
4
+ import styles from './styles.module.css';
5
+ export function ButtonClose({ onClick }) {
6
+ return (_jsx("button", Object.assign({ className: styles.buttonClose, onClick: onClick, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton }, { children: _jsx(CrossSVG, {}) })));
7
+ }
@@ -0,0 +1 @@
1
+ export * from './ButtonClose';
@@ -0,0 +1 @@
1
+ export * from './ButtonClose';
@@ -0,0 +1,35 @@
1
+ .buttonClose{
2
+ width:var(--size-drawer-button-close, 32px);
3
+ height:var(--size-drawer-button-close, 32px);
4
+ border-radius:var(--radius-drawer-button-close, 16px);
5
+ cursor:pointer;
6
+ display:flex;
7
+ align-items:center;
8
+ justify-content:center;
9
+ box-sizing:border-box;
10
+ margin:0;
11
+ padding:0;
12
+ color:var(--sys-neutral-text-support, #565656);
13
+ background-color:var(--sys-neutral-decor-default, #dedede);
14
+ border:0 solid transparent;
15
+ outline:0;
16
+ outline-offset:var(--spacing-state-focus-offset, 2px);
17
+ }
18
+ .buttonClose:hover, .buttonClose:focus-visible{
19
+ color:var(--sys-neutral-text-main, #333333);
20
+ background-color:var(--sys-neutral-decor-hovered, #d2d2d2);
21
+ }
22
+ .buttonClose:focus-visible{
23
+ outline-width:var(--border-state-focus-s-border-width, 2px);
24
+ outline-style:var(--border-state-focus-s-border-style, solid);
25
+ outline-color:var(--border-state-focus-s-border-color, );
26
+ outline-color:var(--sys-available-complementary, #131313);
27
+ }
28
+ .buttonClose:active{
29
+ color:var(--sys-neutral-text-main, #333333);
30
+ background-color:var(--sys-neutral-decor-activated, #b8b8b8);
31
+ }
32
+ .buttonClose svg{
33
+ width:var(--dimension-3m, 24px) !important;
34
+ height:var(--dimension-3m, 24px) !important;
35
+ }
@@ -0,0 +1,10 @@
1
+ import { ReactNode } from 'react';
2
+ import { WithSupportProps } from '@snack-uikit/utils';
3
+ export type DrawerFooterProps = WithSupportProps<{
4
+ /** Слот для добавления кнопок-действий */
5
+ actions: ReactNode;
6
+ /** CSS-класс */
7
+ className?: string;
8
+ }>;
9
+ /** Вспомогательный компонент для добавления "футера" в DrawerCustom */
10
+ export declare function DrawerFooter({ actions, className, ...rest }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,21 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ import cn from 'classnames';
14
+ import { extractSupportProps } from '@snack-uikit/utils';
15
+ import { TEST_IDS } from '../../constants';
16
+ import styles from './styles.module.css';
17
+ /** Вспомогательный компонент для добавления "футера" в DrawerCustom */
18
+ export function DrawerFooter(_a) {
19
+ var { actions, className } = _a, rest = __rest(_a, ["actions", "className"]);
20
+ return (_jsx("div", Object.assign({ className: cn(styles.footer, className) }, extractSupportProps(rest), { children: _jsx("div", Object.assign({ className: styles.footerActions, "data-test-id": TEST_IDS.footerActions }, { children: actions })) })));
21
+ }
@@ -0,0 +1 @@
1
+ export * from './Footer';
@@ -0,0 +1 @@
1
+ export * from './Footer';
@@ -0,0 +1,17 @@
1
+ .footer{
2
+ padding-top:var(--space-drawer-footer-top, 24px);
3
+ padding-left:var(--space-drawer-footer-side, 32px);
4
+ padding-right:var(--space-drawer-footer-side, 32px);
5
+ padding-bottom:var(--space-drawer-footer-bottom, 32px);
6
+ gap:var(--space-drawer-footer-gap, 16px);
7
+ display:flex;
8
+ flex-direction:column;
9
+ }
10
+
11
+ .footerActions{
12
+ gap:var(--space-drawer-footer-action-row-gap, 8px);
13
+ display:flex;
14
+ flex-direction:row-reverse;
15
+ flex-wrap:wrap;
16
+ align-items:center;
17
+ }
@@ -0,0 +1,20 @@
1
+ import { ReactNode } from 'react';
2
+ import { TooltipProps } from '@snack-uikit/tooltip';
3
+ import { WithSupportProps } from '@snack-uikit/utils';
4
+ export type DrawerHeaderProps = WithSupportProps<{
5
+ /** Изображение */
6
+ image?: {
7
+ src: string;
8
+ alt: string;
9
+ };
10
+ /** Заголовок */
11
+ title: ReactNode;
12
+ /** Тултип для заголовка */
13
+ titleTooltip?: TooltipProps['tip'];
14
+ /** Подзаголовок */
15
+ subtitle?: ReactNode;
16
+ /** CSS-класс */
17
+ className?: string;
18
+ }>;
19
+ /** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
20
+ export declare function DrawerHeader({ title, titleTooltip, subtitle, image, className, ...rest }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,23 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
12
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import cn from 'classnames';
14
+ import { QuestionTooltip } from '@snack-uikit/tooltip';
15
+ import { Typography } from '@snack-uikit/typography';
16
+ import { extractSupportProps } from '@snack-uikit/utils';
17
+ import { TEST_IDS } from '../../constants';
18
+ import styles from './styles.module.css';
19
+ /** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
20
+ export function DrawerHeader(_a) {
21
+ var { title, titleTooltip, subtitle, image, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "className"]);
22
+ return (_jsxs("div", Object.assign({ className: cn(styles.drawerHeader, className) }, extractSupportProps(rest), { children: [image && _jsx("img", { src: image.src, alt: image.alt, className: styles.image, "data-test-id": TEST_IDS.image }), _jsxs("div", Object.assign({ className: styles.headlineLayout }, { children: [_jsxs("div", Object.assign({ className: styles.headline }, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Headline, size: Typography.sizes.S, className: styles.title, "data-test-id": TEST_IDS.title }, { children: title })), titleTooltip && (_jsx(QuestionTooltip, { tip: titleTooltip, size: QuestionTooltip.sizes.S, "data-test-id": TEST_IDS.tooltip }))] })), subtitle && (_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Body, size: Typography.sizes.M, className: styles.subtitle, "data-test-id": TEST_IDS.subtitle }, { children: subtitle })))] }))] })));
23
+ }
@@ -0,0 +1 @@
1
+ export * from './Header';
@@ -0,0 +1 @@
1
+ export * from './Header';
@@ -0,0 +1,35 @@
1
+ .drawerHeader{
2
+ }
3
+
4
+ .image{
5
+ height:var(--size-drawer-image, 184px);
6
+ display:block;
7
+ width:100%;
8
+ -o-object-fit:cover;
9
+ object-fit:cover;
10
+ }
11
+
12
+ .headlineLayout{
13
+ padding-top:var(--space-drawer-headline-layout-top, 32px);
14
+ padding-left:var(--space-drawer-headline-layout-side-s, 32px);
15
+ padding-right:var(--space-drawer-headline-layout-side-m, 64px);
16
+ padding-bottom:var(--space-drawer-headline-layout-bottom, 24px);
17
+ gap:var(--space-drawer-headline-layout-gap, 8px);
18
+ display:flex;
19
+ flex-direction:column;
20
+ }
21
+
22
+ .headline{
23
+ gap:var(--space-drawer-headline-layout-headline, 4px);
24
+ display:flex;
25
+ align-items:center;
26
+ }
27
+
28
+ .title{
29
+ display:grid;
30
+ color:var(--sys-neutral-text-main, #333333);
31
+ }
32
+
33
+ .subtitle{
34
+ color:var(--sys-neutral-text-support, #565656);
35
+ }
@@ -0,0 +1,4 @@
1
+ export * from './Body';
2
+ export * from './ButtonClose';
3
+ export * from './Footer';
4
+ export * from './Header';
@@ -0,0 +1,4 @@
1
+ export * from './Body';
2
+ export * from './ButtonClose';
3
+ export * from './Footer';
4
+ export * from './Header';
@@ -0,0 +1 @@
1
+ export * from './components';
package/dist/index.js ADDED
@@ -0,0 +1 @@
1
+ export * from './components';
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@snack-uikit/drawer",
3
+ "publishConfig": {
4
+ "access": "public"
5
+ },
6
+ "title": "Drawer",
7
+ "version": "0.4.6-preview-85c5f47b.0",
8
+ "sideEffects": [
9
+ "*.css",
10
+ "*.woff",
11
+ "*.woff2"
12
+ ],
13
+ "description": "",
14
+ "main": "./dist/index.js",
15
+ "module": "./dist/index.js",
16
+ "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/drawer",
17
+ "repository": {
18
+ "type": "git",
19
+ "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
20
+ "directory": "packages/drawer"
21
+ },
22
+ "author": "Белов Алексей <anbelov@cloud.ru>",
23
+ "contributors": [
24
+ "Белов Алексей <anbelov@cloud.ru>"
25
+ ],
26
+ "files": [
27
+ "dist",
28
+ "src",
29
+ "./CHANGELOG.md",
30
+ "./LICENSE"
31
+ ],
32
+ "license": "Apache-2.0",
33
+ "scripts": {},
34
+ "dependencies": {
35
+ "@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
36
+ "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
37
+ "@snack-uikit/scroll": "0.3.5-preview-85c5f47b.0",
38
+ "@snack-uikit/tooltip": "0.8.1-preview-85c5f47b.0",
39
+ "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
40
+ "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
41
+ "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
42
+ "classnames": "2.3.2",
43
+ "rc-drawer": "6.4.1"
44
+ },
45
+ "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
46
+ }