@snack-uikit/modal 0.7.9-preview-85c5f47b.0

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

@@ -0,0 +1,52 @@
+.header{
+}
+
+.image{
+  border-top-left-radius:var(--radius-modal-modal-window, 32px);
+  border-top-right-radius:var(--radius-modal-modal-window, 32px);
+  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[data-align=default]{
+  padding-top:var(--space-modal-headline-layout-top, 32px);
+  padding-left:var(--space-modal-headline-layout-side-s, 32px);
+  padding-right:var(--space-modal-headline-layout-side-m, 64px);
+  padding-bottom:var(--space-modal-headline-layout-bottom, 24px);
+  gap:var(--space-modal-headline-layout-gap, 8px);
+  display:flex;
+  flex-direction:column;
+}
+.headlineLayout[data-align=center]{
+  padding-top:var(--space-modal-headline-layout-top, 32px);
+  padding-left:var(--space-modal-headline-layout-side-m, 64px);
+  padding-right:var(--space-modal-headline-layout-side-m, 64px);
+  padding-bottom:var(--space-modal-headline-layout-bottom, 24px);
+  gap:var(--space-modal-headline-layout-gap, 8px);
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+}
+
+.headline{
+  gap:var(--space-modal-headline-layout-headline, 4px);
+  display:flex;
+  align-items:center;
+}
+
+.title{
+  display:grid;
+}
+
+.subtitle{
+  color:var(--sys-neutral-text-support, #565656);
+}

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

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

package/dist/helperComponents/Header/types.js

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

package/dist/helperComponents/OverlayElement/OverlayElement.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+export type OverlayElementProps = {
+    onClose(): void;
+    content: ReactElement;
+    blur?: boolean;
+};
+export declare function OverlayElement({ onClose, content, blur }: OverlayElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/OverlayElement/OverlayElement.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function OverlayElement({ onClose, content, blur = false }) {
+    const handleClick = e => {
+        e.stopPropagation();
+        onClose();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.modalOverlay, "data-blur": blur || undefined, onClick: handleClick, "data-test-id": TEST_IDS.overlay }), content] }));
+}

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

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

package/dist/helperComponents/OverlayElement/index.js

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

package/dist/helperComponents/OverlayElement/styles.module.css

@@ -0,0 +1,13 @@
+.modalOverlay{
+  position:fixed;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  background:var(--sys-blackout, rgba(0, 0, 0, 0.4784313725));
+}
+.modalOverlay[data-blur]{
+  -webkit-backdrop-filter:blur(var(--background-blur-background-blur, 4px));
+          backdrop-filter:blur(var(--background-blur-background-blur, 4px));
+}

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/utils.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import { Align, ContentAlign, Size } from './constants';
+import { ModalHeaderImage, ModalHeaderProps } from './helperComponents';
+export declare function getAlignProps({ align, size }: {
+    align: Align;
+    size: Size;
+}): {
+    header: ContentAlign;
+    body: ContentAlign;
+    footer: Align;
+};
+export declare function getButtonsSizes({ align, size }: {
+    align: Align;
+    size: Size;
+}): {
+    filled: import("@snack-uikit/button/dist/constants").SizeSL;
+    outline: import("@snack-uikit/button/dist/constants").SizeSL;
+    simple: import("@snack-uikit/button/dist/constants").SizeSL;
+    light?: undefined;
+} | {
+    filled: import("@snack-uikit/button/dist/constants").SizeSL;
+    outline: import("@snack-uikit/button/dist/constants").SizeSL;
+    light: import("@snack-uikit/button/dist/constants").SizeSL;
+    simple?: undefined;
+};
+export declare function isPictureImage(picture: ModalHeaderProps['picture']): picture is ModalHeaderImage;
+export declare function getPicture({ size, picture }: {
+    size: Size;
+    picture: ModalHeaderProps['picture'];
+}): import("react").JSXElementConstructor<{
+    size?: number | undefined;
+    className?: string | undefined;
+}> | ModalHeaderImage | undefined;

package/dist/utils.js

@@ -0,0 +1,60 @@
+import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
+import { Align, ContentAlign, Size } from './constants';
+const MAP_ALIGNS = {
+    [Align.Default]: {
+        header: ContentAlign.Default,
+        body: ContentAlign.Default,
+        footer: Align.Default,
+    },
+    [Align.Center]: {
+        header: ContentAlign.Center,
+        body: ContentAlign.Center,
+        footer: Align.Center,
+    },
+    [Align.Vertical]: {
+        header: ContentAlign.Center,
+        body: ContentAlign.Center,
+        footer: Align.Vertical,
+    },
+};
+export function getAlignProps({ align, size }) {
+    if (size === Size.L) {
+        return MAP_ALIGNS[Align.Default];
+    }
+    if (size === Size.M && align === Align.Vertical) {
+        return MAP_ALIGNS[Align.Default];
+    }
+    return MAP_ALIGNS[align];
+}
+export function getButtonsSizes({ align, size }) {
+    switch (true) {
+        case align === Align.Vertical && size === Size.S:
+            return {
+                filled: ButtonFilled.sizes.L,
+                outline: ButtonOutline.sizes.L,
+                simple: ButtonSimple.sizes.L,
+            };
+        case [Align.Default, Align.Center].includes(align):
+        default:
+            return {
+                filled: ButtonFilled.sizes.M,
+                outline: ButtonOutline.sizes.M,
+                light: ButtonSimple.sizes.M,
+            };
+    }
+}
+export function isPictureImage(picture) {
+    if (!picture)
+        return false;
+    return 'src' in picture;
+}
+export function getPicture({ size, picture }) {
+    switch (size) {
+        case Size.S:
+            return picture;
+        case Size.M:
+        case Size.L:
+        default:
+            return isPictureImage(picture) ? picture : undefined;
+    }
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@snack-uikit/modal",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Modal",
+  "version": "0.7.9-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/modal",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/modal"
+  },
+  "author": "Белов Алексей <anbelov@cloud.ru>",
+  "contributors": [
+    "Белов Алексей <anbelov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
+    "@snack-uikit/icon-predefined": "0.2.6-preview-85c5f47b.0",
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/link": "0.7.1-preview-85c5f47b.0",
+    "@snack-uikit/scroll": "0.3.5-preview-85c5f47b.0",
+    "@snack-uikit/tooltip": "0.8.1-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2",
+    "react-modal": "3.16.1"
+  },
+  "devDependencies": {
+    "@types/react-modal": "3.16.0"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,104 @@
+import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
+import { Link } from '@snack-uikit/link';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { Align, Mode, Size, TEST_IDS } from '../../constants';
+import { getAlignProps, getButtonsSizes, getPicture } from '../../utils';
+import { ModalCustom } from '../ModalCustom';
+import styles from './styles.module.scss';
+import { ModalLProps, ModalMProps, ModalSProps } from './types';
+
+export type ModalProps = ModalSProps | ModalMProps | ModalLProps;
+
+export function Modal({
+  open,
+  onClose,
+  size = Size.S,
+  mode = Mode.Regular,
+  align = Align.Default,
+  title,
+  titleTooltip,
+  subtitle,
+  picture: pictureProp,
+  content,
+  approveButton,
+  cancelButton,
+  additionalButton,
+  disclaimer,
+  className,
+  ...rest
+}: ModalProps) {
+  const aligns = getAlignProps({ align, size });
+  const buttonsSizes = getButtonsSizes({ align, size });
+  const picture = getPicture({ size, picture: pictureProp });
+
+  return (
+    <ModalCustom open={open} onClose={onClose} size={size} mode={mode} className={className} {...rest}>
+      <ModalCustom.Header
+        title={<TruncateString text={title} />}
+        titleTooltip={titleTooltip}
+        subtitle={subtitle}
+        picture={picture}
+        align={aligns.header}
+      />
+
+      {Boolean(content) && <ModalCustom.Body content={content} align={aligns.body} />}
+
+      <ModalCustom.Footer
+        actions={
+          <>
+            <ButtonFilled
+              {...approveButton}
+              size={buttonsSizes.filled}
+              className={styles.footerButton}
+              data-test-id={TEST_IDS.approveButton}
+            />
+
+            {cancelButton && (
+              <ButtonOutline
+                {...cancelButton}
+                size={buttonsSizes.outline}
+                className={styles.footerButton}
+                data-test-id={TEST_IDS.cancelButton}
+              />
+            )}
+
+            {additionalButton && (
+              <ButtonSimple
+                {...additionalButton}
+                size={buttonsSizes.light}
+                className={styles.footerButton}
+                data-test-id={TEST_IDS.additionalButton}
+              />
+            )}
+          </>
+        }
+        disclaimer={
+          disclaimer && (
+            <>
+              <Typography
+                family={Typography.families.Sans}
+                role={Typography.roles.Body}
+                size={Typography.sizes.S}
+                data-test-id={TEST_IDS.disclaimerText}
+              >
+                {disclaimer.text}
+              </Typography>
+
+              {disclaimer.link && (
+                <Link {...disclaimer.link} size={Link.sizes.S} external data-test-id={TEST_IDS.disclaimerLink} />
+              )}
+            </>
+          )
+        }
+        align={aligns.footer}
+        className={styles.modalFooter}
+      />
+    </ModalCustom>
+  );
+}
+
+Modal.aligns = Align;
+Modal.modes = Mode;
+Modal.sizes = Size;

package/src/components/Modal/index.ts

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

package/src/components/Modal/styles.module.scss

@@ -0,0 +1,7 @@
+.modalFooter {
+  &[data-align='vertical'] {
+    .footerButton {
+      width: 100%;
+    }
+  }
+}

package/src/components/Modal/types.ts

@@ -0,0 +1,54 @@
+import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
+import { LinkProps } from '@snack-uikit/link';
+
+import { Align, Size } from '../../constants';
+import { ModalBodyProps, ModalHeaderImage, ModalHeaderProps } from '../../helperComponents';
+import { ModalCustomProps } from '../ModalCustom';
+
+type BaseModalProps = Omit<ModalCustomProps, 'children' | 'size'> & {
+  /** Заголовок модального окна */
+  title: string;
+  /** Всплывающая подсказка для заголовка */
+  titleTooltip?: ModalHeaderProps['titleTooltip'];
+  /** Подзаголовок */
+  subtitle?: string;
+  /** Содержимое модального окна */
+  content?: ModalBodyProps['content'];
+  /** Основная кнопка действия */
+  approveButton: Omit<ButtonFilledProps, 'size' | 'data-test-id'>;
+  /** Кнопка отмены */
+  cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'>;
+  /** Вторая кнопка действия */
+  additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'>;
+  /** Небольшой текст под кнопками футера с возможностью передать дополнительно ссылку */
+  disclaimer?: {
+    text: string;
+    link?: Pick<LinkProps, 'text' | 'href' | 'target'>;
+  };
+};
+
+export type ModalSProps = BaseModalProps & {
+  /** Размер */
+  size?: Size.S;
+  /**
+   * Выравнивание, для разных размеров доступны разные значения
+   * <br> для `Size.S` - все
+   */
+  align?: Align;
+  /** Можно передать иконку из пакета `@snack-uikit/icon-predefined`, или путь к картинке и атрибут `alt` */
+  picture?: ModalHeaderProps['picture'];
+};
+
+export type ModalMProps = BaseModalProps & {
+  size?: Size.M;
+  /** <br> для `Size.M` - `Align.Default | Align.Center` */
+  align?: Align.Default | Align.Center;
+  picture?: ModalHeaderImage;
+};
+
+export type ModalLProps = BaseModalProps & {
+  size?: Size.L;
+  /** <br> для `Size.L` - `Align.Default` */
+  align?: Align.Default;
+  picture?: ModalHeaderImage;
+};

package/src/components/ModalCustom/ModalCustom.tsx

@@ -0,0 +1,96 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+import RCModal from 'react-modal';
+
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { Mode, Size } from '../../constants';
+import {
+  ButtonClose,
+  ModalBody,
+  ModalBodyProps,
+  ModalFooter,
+  ModalFooterProps,
+  ModalHeader,
+  ModalHeaderProps,
+  OverlayElement,
+} from '../../helperComponents';
+import styles from './styles.module.scss';
+import { getDataTestAttributes } from './utils';
+
+export type ModalCustomProps = WithSupportProps<{
+  /** Управляет состоянием показан/не показан. */
+  open: boolean;
+  /** Колбек закрытия компонента. */
+  onClose(): void;
+  /**
+   * Режим отображения модального окна:
+   * <br> - __`Regular`__ -  есть кнопка закрытия, клик на оверлей и нажатие кнопки `Esc` закрывают модалку
+   * <br> - __`Aggressive`__ - есть кнопка закрытия, но выключен клик на оверлей и не работает закрытие по клавише `Esc`
+   * <br> - __`Forced`__ - закрыть модальное окно можно только по нажатию на кнопку действия в нижней части
+   * @default Mode.Regular
+   */
+  mode?: Mode;
+  /**
+   * Размер модального окна
+   * @default Size.S
+   */
+  size?: Size;
+  /** CSS-класс */
+  className?: string;
+  /** Контент */
+  children: ReactNode;
+}>;
+
+export function ModalCustom({
+  open,
+  onClose,
+  size = Size.S,
+  mode = Mode.Regular,
+  children,
+  className,
+  ...rest
+}: ModalCustomProps) {
+  const handleCloseButtonClick = () => {
+    onClose();
+  };
+
+  const handleClose = () => {
+    if (mode === Mode.Regular) {
+      onClose();
+    }
+  };
+
+  return (
+    <RCModal
+      data={{ ...getDataTestAttributes(rest), size }}
+      isOpen={open}
+      onRequestClose={handleClose}
+      appElement={document.body}
+      overlayElement={(_, content) => (
+        <OverlayElement blur={[Mode.Forced, Mode.Aggressive].includes(mode)} content={content} onClose={handleClose} />
+      )}
+      className={cn(styles.modal, className)}
+    >
+      {mode !== Mode.Forced && (
+        <div className={styles.headerElements}>
+          <ButtonClose onClick={handleCloseButtonClick} />
+        </div>
+      )}
+
+      {children}
+    </RCModal>
+  );
+}
+
+ModalCustom.modes = Mode;
+ModalCustom.sizes = Size;
+
+export namespace ModalCustom {
+  export type HeaderProps = ModalHeaderProps;
+  export type BodyProps = ModalBodyProps;
+  export type FooterProps = ModalFooterProps;
+  export const Header = ModalHeader;
+  export const Body = ModalBody;
+  export const Footer = ModalFooter;
+}

package/src/components/ModalCustom/index.ts

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

package/src/components/ModalCustom/styles.module.scss

@@ -0,0 +1,38 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+
+$sizes: 's', 'm', 'l';
+
+.modal {
+  position: absolute;
+  top: 50%;
+  right: auto;
+  bottom: auto;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+  max-width: calc(100% - ($space-modal-outside-gap * 2));
+  max-height: calc(100vh - ($space-modal-outside-gap * 2));
+
+  background-color: simple-var($sys-neutral-background1-level);
+  outline: none;
+
+  @each $size in $sizes {
+    &[data-size="#{$size}"] {
+      @include composite-var($modal, 'window', $size);
+    }
+  }
+}
+
+.headerElements {
+  @include composite-var($modal, 'header-elements', 'container');
+  @include composite-var($modal, 'header-elements', 'elements-layout');
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+}

package/src/components/ModalCustom/utils.ts

@@ -0,0 +1,12 @@
+import { extractDataTestProps } from '@snack-uikit/utils';
+
+export const getDataTestAttributes = (rest: Record<string, unknown>) => {
+  const dataTestProps = extractDataTestProps(rest);
+
+  return Object.keys(dataTestProps).reduce<Record<string, unknown>>((acc, key) => {
+    const newKey = key.replace('data-', '');
+    acc[newKey] = dataTestProps[key];
+
+    return acc;
+  }, {});
+};

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ModalCustom';
+export * from './Modal';

package/src/constants.ts

@@ -0,0 +1,41 @@
+export enum Size {
+  S = 's',
+  M = 'm',
+  L = 'l',
+}
+
+export enum Mode {
+  Regular = 'regular',
+  Aggressive = 'aggressive',
+  Forced = 'forced',
+}
+
+export enum Align {
+  Default = 'default',
+  Center = 'center',
+  Vertical = 'vertical',
+}
+
+export enum ContentAlign {
+  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',
+};

package/src/helperComponents/Body/Body.tsx

@@ -0,0 +1,32 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { Scroll } from '@snack-uikit/scroll';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ContentAlign, TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type ModalBodyProps = WithSupportProps<{
+  /** Содержимое модального окна */
+  content: ReactNode;
+  /** Выравнивание контента */
+  align?: ContentAlign;
+  className?: string;
+}>;
+
+export function ModalBody({ content, align = ContentAlign.Default, className, ...rest }: ModalBodyProps) {
+  return (
+    <Scroll
+      size={Scroll.sizes.M}
+      className={cn(styles.modalBody, className)}
+      {...extractSupportProps(rest)}
+      data-align={align}
+      data-test-id={TEST_IDS.content}
+    >
+      {content}
+    </Scroll>
+  );
+}
+
+ModalBody.aligns = ContentAlign;

package/src/helperComponents/Body/index.ts

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