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

package/src/helperComponents/Body/styles.module.scss

@@ -0,0 +1,14 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+
+.modalBody {
+  @include composite-var($modal-body);
+
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-height: $dimension-2m;
+  color: $sys-neutral-text-main;
+
+  &[data-align='center'] {
+    text-align: center;
+  }
+}

package/src/helperComponents/ButtonClose/ButtonClose.tsx

@@ -0,0 +1,21 @@
+import { CrossSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+type ButtonCloseProps = {
+  onClick(): void;
+};
+
+export function ButtonClose({ onClick }: ButtonCloseProps) {
+  return (
+    <button
+      className={styles.buttonClose}
+      onClick={onClick}
+      aria-label='close modal'
+      data-test-id={TEST_IDS.closeButton}
+    >
+      <CrossSVG />
+    </button>
+  );
+}

package/src/helperComponents/ButtonClose/index.ts

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

package/src/helperComponents/ButtonClose/styles.module.scss

@@ -0,0 +1,44 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.buttonClose {
+  @include composite-var($modal-button-close);
+
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  color: simple-var($sys-neutral-text-support);
+
+  background-color: simple-var($sys-neutral-decor-default);
+  border: 0 solid transparent;
+  outline: 0;
+  outline-offset: $spacing-state-focus-offset;
+
+  &:hover, &:focus-visible {
+    color: simple-var($sys-neutral-text-main);
+    background-color: simple-var($sys-neutral-decor-hovered);
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+  }
+
+  &:active {
+    color: simple-var($sys-neutral-text-main);
+    background-color: simple-var($sys-neutral-decor-activated);
+  }
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/src/helperComponents/Footer/Footer.tsx

@@ -0,0 +1,38 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Align, TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type ModalFooterProps = WithSupportProps<{
+  /** Параметр для передачи кнопок */
+  actions: ReactNode;
+  /** Параметр для небольшого текста под кнопками */
+  disclaimer?: ReactNode;
+  /** Выравнивание контента */
+  align?: Align;
+  className?: string;
+}>;
+
+export function ModalFooter({ actions, disclaimer, align = Align.Default, className, ...rest }: ModalFooterProps) {
+  return (
+    <div
+      data-align={align}
+      className={cn(styles.footer, className)}
+      {...extractSupportProps(rest)}
+      data-test-id={TEST_IDS.footer}
+    >
+      <div className={styles.footerActions}>{actions}</div>
+
+      {disclaimer && (
+        <div className={styles.footerDisclaimer} data-test-id={TEST_IDS.disclaimer}>
+          {disclaimer}
+        </div>
+      )}
+    </div>
+  );
+}
+
+ModalFooter.aligns = Align;

package/src/helperComponents/Footer/index.ts

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

package/src/helperComponents/Footer/styles.module.scss

@@ -0,0 +1,44 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+
+.footerActions {
+  @include composite-var($modal, 'action-row');
+
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.footerDisclaimer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  color: simple-var($sys-neutral-text-disabled);
+}
+
+.footer {
+  @include composite-var($modal, 'footer');
+
+  display: flex;
+  flex-direction: column;
+
+  &[data-align='center'] {
+    align-items: center;
+
+    .footerDisclaimer {
+      align-items: center;
+    }
+  }
+
+  &[data-align='vertical'] {
+    align-items: center;
+
+    .footerActions {
+      width: 100%;
+    }
+
+    .footerDisclaimer {
+      align-items: center;
+    }
+  }
+}

package/src/helperComponents/Header/Header.tsx

@@ -0,0 +1,81 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
+import { QuestionTooltip, QuestionTooltipProps } from '@snack-uikit/tooltip';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ContentAlign, TEST_IDS } from '../../constants';
+import { isPictureImage } from '../../utils';
+import styles from './styles.module.scss';
+import { ModalHeaderImage } from './types';
+
+export type ModalHeaderProps = WithSupportProps<{
+  /** Заголовок модального окна */
+  title: ReactNode;
+  /** Тултип для заголовка */
+  titleTooltip?: QuestionTooltipProps['tip'];
+  /** Подзаголовок */
+  subtitle?: ReactNode;
+  /** Можно передать иконку из пакета `@snack-uikit/icon-predefined` или путь к картинке и атрибут `alt` */
+  picture?: IconPredefinedProps['icon'] | ModalHeaderImage;
+  /** Выравнивание контента */
+  align?: ContentAlign;
+  className?: string;
+}>;
+
+export function ModalHeader({
+  title,
+  titleTooltip,
+  subtitle,
+  align = ContentAlign.Default,
+  picture,
+  className,
+  ...rest
+}: ModalHeaderProps) {
+  return (
+    <div className={cn(styles.header, className)} {...extractSupportProps(rest)} data-test-id={TEST_IDS.header}>
+      {picture &&
+        (isPictureImage(picture) ? (
+          <img src={picture.src} alt={picture.alt} className={styles.image} data-test-id={TEST_IDS.image} />
+        ) : (
+          <div className={styles.icon} data-test-id={TEST_IDS.icon}>
+            <IconPredefined icon={picture} size={IconPredefined.sizes.L} />
+          </div>
+        ))}
+
+      <div className={styles.headlineLayout} data-align={align}>
+        <div className={styles.headline}>
+          <Typography
+            family={Typography.families.Sans}
+            role={Typography.roles.Headline}
+            size={Typography.sizes.S}
+            className={styles.title}
+            data-test-id={TEST_IDS.title}
+          >
+            {title}
+          </Typography>
+
+          {titleTooltip && (
+            <QuestionTooltip tip={titleTooltip} size={QuestionTooltip.sizes.S} data-test-id={TEST_IDS.tooltip} />
+          )}
+        </div>
+
+        {subtitle && (
+          <Typography
+            family={Typography.families.Sans}
+            role={Typography.roles.Body}
+            size={Typography.sizes.M}
+            className={styles.subtitle}
+            data-test-id={TEST_IDS.subtitle}
+          >
+            {subtitle}
+          </Typography>
+        )}
+      </div>
+    </div>
+  );
+}
+
+ModalHeader.aligns = ContentAlign;

package/src/helperComponents/Header/index.ts

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

package/src/helperComponents/Header/styles.module.scss

@@ -0,0 +1,52 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+
+$aligns: 'default', 'center';
+
+.header {
+  /* stub for proper typings */
+}
+
+.image {
+  @include composite-var($modal, 'image');
+
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+.icon {
+  @include composite-var($modal, 'icon-decor');
+
+  display: flex;
+  justify-content: center;
+}
+
+.headlineLayout {
+  @each $align in $aligns {
+    &[data-align="#{$align}"] {
+      @include composite-var($modal, 'headline-layout', $align);
+
+      display: flex;
+      flex-direction: column;
+
+      @if ($align == 'center') {
+        align-items: center;
+      }
+    }
+  }
+}
+
+.headline {
+  @include composite-var($modal-headline);
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  display: grid;
+}
+
+.subtitle {
+  color: $sys-neutral-text-support;
+}

package/src/helperComponents/Header/types.ts

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

package/src/helperComponents/OverlayElement/OverlayElement.tsx

@@ -0,0 +1,30 @@
+import { MouseEventHandler, ReactElement } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type OverlayElementProps = {
+  onClose(): void;
+  content: ReactElement;
+  blur?: boolean;
+};
+
+export function OverlayElement({ onClose, content, blur = false }: OverlayElementProps) {
+  const handleClick: MouseEventHandler = e => {
+    e.stopPropagation();
+    onClose();
+  };
+
+  return (
+    <>
+      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/no-static-element-interactions */}
+      <div
+        className={styles.modalOverlay}
+        data-blur={blur || undefined}
+        onClick={handleClick}
+        data-test-id={TEST_IDS.overlay}
+      />
+      {content}
+    </>
+  );
+}

package/src/helperComponents/OverlayElement/index.ts

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

package/src/helperComponents/OverlayElement/styles.module.scss

@@ -0,0 +1,17 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-modal';
+
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  background: simple-var($sys-blackout);
+
+  &[data-blur] {
+    backdrop-filter: blur(simple-var($background-blur-background-blur));
+  }
+}

package/src/helperComponents/index.ts

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

package/src/index.ts

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

package/src/utils.ts

@@ -0,0 +1,69 @@
+import { ButtonFilled, ButtonOutline, ButtonSimple } from '@snack-uikit/button';
+
+import { Align, ContentAlign, Size } from './constants';
+import { ModalHeaderImage, ModalHeaderProps } from './helperComponents';
+
+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 }: { align: Align; size: 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 }: { align: Align; size: 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: ModalHeaderProps['picture']): picture is ModalHeaderImage {
+  if (!picture) return false;
+
+  return 'src' in picture;
+}
+
+export function getPicture({ size, picture }: { size: Size; picture: ModalHeaderProps['picture'] }) {
+  switch (size) {
+    case Size.S:
+      return picture;
+    case Size.M:
+    case Size.L:
+    default:
+      return isPictureImage(picture) ? picture : undefined;
+  }
+}