@cloud-ru/uikit-product-mobile-modal 0.9.18 → 0.9.20

package/dist/esm/constants.js

@@ -0,0 +1,37 @@
+export const SIZE = {
+    Full: 'full',
+    Auto: 'auto',
+};
+export const MODE = {
+    Regular: 'regular',
+    Aggressive: 'aggressive',
+    Forced: 'forced',
+};
+export const ALIGN = {
+    Default: 'default',
+    Center: 'center',
+    Vertical: 'vertical',
+};
+export const CONTENT_ALIGN = {
+    Default: 'default',
+    Center: 'center',
+};
+export const TEST_IDS = {
+    overlay: 'modal__overlay',
+    closeButton: 'modal__close-button',
+    header: 'modal__header',
+    title: 'modal__title',
+    subtitle: 'modal__subtitle',
+    tooltip: 'modal__title-tooltip',
+    icon: 'modal__icon',
+    image: 'modal__image',
+    content: 'modal__body',
+    footer: 'modal__footer',
+    approveButton: 'modal__approve-button',
+    cancelButton: 'modal__cancel-button',
+    additionalButton: 'modal__additional-button',
+    disclaimer: 'modal__disclaimer',
+    disclaimerText: 'modal__disclaimer-text',
+    disclaimerLink: 'modal__disclaimer-link',
+    loadingSpinner: 'modal__loading-spinner',
+};

package/dist/esm/helperComponents/Body/Body.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ContentAlign } from '../../types';
+export type ModalBodyProps = WithSupportProps<{
+    /** Содержимое модального окна */
+    content: ReactNode;
+    /** Выравнивание контента */
+    align?: ContentAlign;
+    className?: string;
+}>;
+export declare function ModalBody({ content, align, className, ...rest }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Body/Body.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { MobileDrawerCustom } from '@sbercloud/uikit-product-mobile-drawer';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function ModalBody(_a) {
+    var { content, align = CONTENT_ALIGN.Default, className } = _a, rest = __rest(_a, ["content", "align", "className"]);
+    return (_jsx(MobileDrawerCustom.Body, Object.assign({ content: content, className: cn(styles.modalBody, className) }, extractSupportProps(rest), { "data-align": align, "data-test-id": TEST_IDS.content })));
+}

package/dist/esm/helperComponents/Body/index.d.ts

@@ -0,0 +1 @@
+export * from './Body';

package/dist/esm/helperComponents/Body/index.js

@@ -0,0 +1 @@
+export * from './Body';

package/dist/esm/helperComponents/Body/styles.module.css

@@ -0,0 +1,16 @@
+.modalBody{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  padding:var(--dimension-3m, 24px) var(--dimension-2m, 16px);
+  flex:1 1 auto;
+  box-sizing:border-box;
+  min-height:var(--dimension-2m, 16px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+.modalBody[data-align=center]{
+  text-align:center;
+}

package/dist/esm/helperComponents/Footer/Footer.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Align } from '../../types';
+export type ModalFooterProps = WithSupportProps<{
+    /** Параметр для передачи кнопок */
+    actions: ReactNode;
+    /** Параметр для небольшого текста под кнопками */
+    disclaimer?: ReactNode;
+    /** Выравнивание контента */
+    align?: Align;
+    className?: string;
+}>;
+export declare function ModalFooter({ actions, disclaimer, align, className, ...rest }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Footer/Footer.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { ALIGN, TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function ModalFooter(_a) {
+    var { actions, disclaimer, align = ALIGN.Default, className } = _a, rest = __rest(_a, ["actions", "disclaimer", "align", "className"]);
+    return (_jsxs("div", Object.assign({ "data-align": align, className: cn(styles.footer, className) }, extractSupportProps(rest), { "data-test-id": TEST_IDS.footer, children: [_jsx("div", { className: styles.footerActions, children: actions }), disclaimer && (_jsx("div", { className: styles.footerDisclaimer, "data-test-id": TEST_IDS.disclaimer, children: disclaimer }))] })));
+}

package/dist/esm/helperComponents/Footer/index.d.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/dist/esm/helperComponents/Footer/index.js

@@ -0,0 +1 @@
+export * from './Footer';

package/dist/esm/helperComponents/Footer/styles.module.css

@@ -0,0 +1,37 @@
+.footerActions{
+  gap:var(--space-modal-footer-action-row-gap, 8px);
+  display:flex;
+  flex-direction:row-reverse;
+  flex-wrap:wrap-reverse;
+  align-items:center;
+  justify-content:center;
+}
+
+.footerDisclaimer{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-end;
+  color:var(--sys-neutral-text-disabled, #aaaebd);
+}
+
+.footer{
+  padding:0 var(--dimension-2m, 16px) var(--dimension-3m, 24px) var(--dimension-2m, 16px);
+  gap:var(--dimension-2m, 16px);
+  display:flex;
+  flex-direction:column;
+}
+.footer[data-align=vertical]{
+  align-items:center;
+}
+.footer[data-align=vertical] .footerActions{
+  width:100%;
+}
+.footer[data-align=vertical] .footerDisclaimer{
+  align-items:center;
+}
+.footer[data-align=center]{
+  align-items:center;
+}
+.footer[data-align=center] .footerDisclaimer{
+  align-items:center;
+}

package/dist/esm/helperComponents/Header/Header.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { MobileQuestionTooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { ContentAlign } from '../../types';
+export type ModalHeaderProps = WithSupportProps<{
+    /** Заголовок модального окна */
+    title: ReactNode;
+    /** Тултип для заголовка */
+    titleTooltip?: MobileQuestionTooltipProps['tip'];
+    /** Подзаголовок */
+    subtitle?: ReactNode;
+    /** Выравнивание контента */
+    align?: ContentAlign;
+    className?: string;
+}>;
+export declare function ModalHeader({ title, titleTooltip, subtitle, align, className, ...rest }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Header/Header.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { MobileQuestionTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function ModalHeader(_a) {
+    var { title, titleTooltip, subtitle, align = CONTENT_ALIGN.Default, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "align", "className"]);
+    return (_jsx("div", Object.assign({ className: cn(styles.header, className) }, extractSupportProps(rest), { "data-test-id": TEST_IDS.header, children: _jsxs("div", { className: styles.headlineLayout, "data-align": align, children: [_jsx("div", { className: styles.headline, children: _jsxs(Typography.SansHeadlineS, { className: styles.title, "data-test-id": TEST_IDS.title, children: [title, titleTooltip && (_jsx("span", { className: styles.questionTooltip, children: _jsx(MobileQuestionTooltip, { tip: titleTooltip, size: 's', "data-test-id": TEST_IDS.tooltip }) }))] }) }), subtitle && (_jsx(Typography.SansBodyM, { className: styles.subtitle, "data-test-id": TEST_IDS.subtitle, children: subtitle }))] }) })));
+}

package/dist/esm/helperComponents/Header/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Header';
+export * from './types';

package/dist/esm/helperComponents/Header/index.js

@@ -0,0 +1,2 @@
+export * from './Header';
+export * from './types';

package/dist/esm/helperComponents/Header/styles.module.css

@@ -0,0 +1,56 @@
+.header{
+}
+
+.title{
+  display:inline;
+  color:var(--sys-neutral-text-main, #41424e);
+  word-break:break-word;
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-support, #6d707f);
+}
+
+.questionTooltip{
+  display:inline-flex;
+  height:var(--dimension-4m, 32px);
+  padding-left:4px;
+}
+.questionTooltip > span{
+  transform:translate(0, 4px);
+}
+
+.image{
+  border-top-left-radius:var(--radius-modal-modal-window, 12px);
+  border-top-right-radius:var(--radius-modal-modal-window, 12px);
+  height:var(--size-modal-image, 184px);
+  display:block;
+  width:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.icon{
+  padding-top:var(--space-modal-icon-decor, 32px);
+  display:flex;
+  justify-content:center;
+}
+
+.headlineLayout{
+  padding:var(--dimension-3m, 24px) var(--dimension-2m, 16px) 0;
+  gap:var(--dimension-1m, 8px);
+  display:flex;
+  flex-direction:column;
+}
+.headlineLayout[data-align=center]{
+  align-items:center;
+}
+.headlineLayout[data-align=center] .title, .headlineLayout[data-align=center] .subtitle{
+  text-align:center;
+}
+
+.headline{
+  gap:var(--space-modal-headline-layout-headline, 4px);
+  display:flex;
+  align-items:center;
+}

package/dist/esm/helperComponents/Header/types.d.ts

@@ -0,0 +1,4 @@
+export type ModalHeaderImage = {
+    src: string;
+    alt: string;
+};

package/dist/esm/helperComponents/Header/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Body';
+export * from './Footer';
+export * from './Header';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,3 @@
+export * from './Body';
+export * from './Footer';
+export * from './Header';

package/dist/esm/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/types.d.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { ALIGN, CONTENT_ALIGN, MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type Align = ValueOf<typeof ALIGN>;
+export type ContentAlign = ValueOf<typeof CONTENT_ALIGN>;

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils.d.ts

@@ -0,0 +1,17 @@
+import { Align } from './types';
+export declare function getAlignProps({ align }: {
+    align: Align;
+}): {
+    header: "default";
+    body: "default";
+    footer: "vertical";
+} | {
+    header: "center";
+    body: "center";
+    footer: "center";
+} | {
+    header: "center";
+    body: "center";
+    footer: "vertical";
+};
+export declare function getButtonsSize(): "m";

package/dist/esm/utils.js

@@ -0,0 +1,24 @@
+import { ALIGN, CONTENT_ALIGN } from './constants';
+const MAP_ALIGNS = {
+    [ALIGN.Default]: {
+        header: CONTENT_ALIGN.Default,
+        body: CONTENT_ALIGN.Default,
+        footer: ALIGN.Vertical,
+    },
+    [ALIGN.Center]: {
+        header: CONTENT_ALIGN.Center,
+        body: CONTENT_ALIGN.Center,
+        footer: ALIGN.Center,
+    },
+    [ALIGN.Vertical]: {
+        header: CONTENT_ALIGN.Center,
+        body: CONTENT_ALIGN.Center,
+        footer: ALIGN.Vertical,
+    },
+};
+export function getAlignProps({ align }) {
+    return MAP_ALIGNS[align];
+}
+export function getButtonsSize() {
+    return 'm';
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-mobile-modal",
   "title": "Mobile Modal",
-  "version": "0.9.18",
+  "version": "0.9.20",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -30,15 +30,16 @@
     "name": "Akhremenko Grigorii",
     "url": "https://github.com/AGrigorii"
   },
+  "contributors": [],
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-mobile-drawer": "0.9.15",
-    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.65",
-    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@cloud-ru/uikit-product-mobile-drawer": "0.9.17",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.67",
+    "@cloud-ru/uikit-product-utils": "7.0.2",
     "@snack-uikit/button": "0.19.15",
     "@snack-uikit/drawer": "0.13.2",
     "@snack-uikit/link": "0.17.9",
@@ -48,5 +49,5 @@
     "@snack-uikit/utils": "3.10.1",
     "classnames": "2.5.1"
   },
-  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+  "gitHead": "bf479ecf7238ef20b78f20acaef439efa535d1a1"
 }