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

package/src/helperComponents/Body/Body.tsx

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

package/src/helperComponents/Body/index.ts

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

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

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

package/src/helperComponents/Footer/Footer.tsx

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { ALIGN, TEST_IDS } from '../../constants';
+import { Align } from '../../types';
+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>
+  );
+}

package/src/helperComponents/Footer/index.ts

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

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

@@ -0,0 +1,46 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-modal';
+
+.footerActions {
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'action-row');
+
+  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: styles-tokens-modal.simple-var(styles-tokens-modal.$sys-neutral-text-disabled);
+}
+
+.footer {
+  padding: 0 styles-tokens-modal.$dimension-2m styles-tokens-modal.$dimension-3m styles-tokens-modal.$dimension-2m;
+  gap: styles-tokens-modal.$dimension-2m;
+
+  display: flex;
+  flex-direction: column;
+
+  &[data-align='vertical'] {
+    align-items: center;
+
+    .footerActions {
+      width: 100%;
+    }
+
+    .footerDisclaimer {
+      align-items: center;
+    }
+  }
+
+  &[data-align='center'] {
+    align-items: center;
+
+    .footerDisclaimer {
+      align-items: center;
+    }
+  }
+}

package/src/helperComponents/Header/Header.tsx

@@ -0,0 +1,54 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { MobileQuestionTooltip, MobileQuestionTooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { CONTENT_ALIGN, TEST_IDS } from '../../constants';
+import { ContentAlign } from '../../types';
+import styles from './styles.module.scss';
+
+export type ModalHeaderProps = WithSupportProps<{
+  /** Заголовок модального окна */
+  title: ReactNode;
+  /** Тултип для заголовка */
+  titleTooltip?: MobileQuestionTooltipProps['tip'];
+  /** Подзаголовок */
+  subtitle?: ReactNode;
+  /** Выравнивание контента */
+  align?: ContentAlign;
+  className?: string;
+}>;
+
+export function ModalHeader({
+  title,
+  titleTooltip,
+  subtitle,
+  align = CONTENT_ALIGN.Default,
+  className,
+  ...rest
+}: ModalHeaderProps) {
+  return (
+    <div className={cn(styles.header, className)} {...extractSupportProps(rest)} data-test-id={TEST_IDS.header}>
+      <div className={styles.headlineLayout} data-align={align}>
+        <div className={styles.headline}>
+          <Typography.SansHeadlineS className={styles.title} data-test-id={TEST_IDS.title}>
+            {title}
+            {titleTooltip && (
+              <span className={styles.questionTooltip}>
+                <MobileQuestionTooltip tip={titleTooltip} size='s' data-test-id={TEST_IDS.tooltip} />
+              </span>
+            )}
+          </Typography.SansHeadlineS>
+        </div>
+
+        {subtitle && (
+          <Typography.SansBodyM className={styles.subtitle} data-test-id={TEST_IDS.subtitle}>
+            {subtitle}
+          </Typography.SansBodyM>
+        )}
+      </div>
+    </div>
+  );
+}

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,64 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-modal';
+
+$aligns: 'default', 'center';
+
+.header {
+  /* stub for proper typings */
+}
+
+.title {
+  display: inline;
+  color: styles-tokens-modal.$sys-neutral-text-main;
+  word-break: break-word;
+}
+
+.subtitle {
+  color: styles-tokens-modal.$sys-neutral-text-support;
+}
+
+.questionTooltip {
+  display: inline-flex;
+  height: styles-tokens-modal.$dimension-4m;
+  padding-left: 4px;
+
+  > span {
+    transform: translate(0, 4px);
+  }
+}
+
+.image {
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'image');
+
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+.icon {
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal, 'icon-decor');
+
+  display: flex;
+  justify-content: center;
+}
+
+.headlineLayout {
+  padding: styles-tokens-modal.$dimension-3m styles-tokens-modal.$dimension-2m 0;
+  gap: styles-tokens-modal.$dimension-1m;
+  display: flex;
+  flex-direction: column;
+
+  &[data-align="center"] {
+    align-items: center;
+
+    .title, .subtitle {
+      text-align: center;
+    }
+  }
+}
+
+.headline {
+  @include styles-tokens-modal.composite-var(styles-tokens-modal.$modal-headline);
+
+  display: flex;
+  align-items: center;
+}

package/src/helperComponents/Header/types.ts

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

package/src/helperComponents/index.ts

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

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,11 @@
+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/src/utils.ts

@@ -0,0 +1,28 @@
+import { ALIGN, CONTENT_ALIGN } from './constants';
+import { Align } from './types';
+
+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 }: { align: Align }) {
+  return MAP_ALIGNS[align];
+}
+
+export function getButtonsSize() {
+  return 'm' as const;
+}