@cloud-ru/uikit-product-mobile-drawer 0.9.15

package/src/helperComponents/Footer/Footer.tsx

@@ -0,0 +1,25 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type DrawerFooterProps = WithSupportProps<{
+  /** Слот для добавления кнопок-действий */
+  actions: ReactNode;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Вспомогательный компонент для добавления "футера" в DrawerCustom */
+export function DrawerFooter({ actions, className, ...rest }: DrawerFooterProps) {
+  return (
+    <div className={cn(styles.footer, className)} {...extractSupportProps(rest)}>
+      <div className={styles.footerActions} data-test-id={TEST_IDS.footerActions}>
+        {actions}
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/Footer/index.ts

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

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

@@ -0,0 +1,18 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-drawer';
+
+.footer {
+  padding: styles-tokens-drawer.$dimension-2m;
+  gap: styles-tokens-drawer.$dimension-1m;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.footerActions {
+  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-action-row);
+
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap-reverse;
+  align-items: center;
+}

package/src/helperComponents/Header/Header.tsx

@@ -0,0 +1,50 @@
+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 { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type DrawerHeaderProps = WithSupportProps<{
+  /** Изображение */
+  image?: {
+    src: string;
+    alt: string;
+  };
+  /** Заголовок */
+  title: ReactNode;
+  /** Тултип для заголовка */
+  titleTooltip?: MobileQuestionTooltipProps['tip'];
+  /** Подзаголовок */
+  subtitle?: ReactNode;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
+export function DrawerHeader({ title, titleTooltip, subtitle, image, className, ...rest }: DrawerHeaderProps) {
+  return (
+    <div className={cn(styles.drawerHeader, className)} {...extractSupportProps(rest)}>
+      {image && <img src={image.src} alt={image.alt} className={styles.image} data-test-id={TEST_IDS.image} />}
+
+      <div className={styles.headlineLayout}>
+        <div className={styles.headline}>
+          <Typography.SansHeadlineS className={styles.title} data-test-id={TEST_IDS.title}>
+            {title}
+          </Typography.SansHeadlineS>
+
+          {titleTooltip && <MobileQuestionTooltip tip={titleTooltip} size='s' data-test-id={TEST_IDS.tooltip} />}
+        </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 @@
+export * from './Header';

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

@@ -0,0 +1,37 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-drawer';
+
+.drawerHeader {
+  /* stub for proper typings */
+}
+
+.image {
+  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-image);
+
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+.headlineLayout {
+  padding: styles-tokens-drawer.$dimension-2m;
+  gap: styles-tokens-drawer.$dimension-1m;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.headline {
+  @include styles-tokens-drawer.composite-var(styles-tokens-drawer.$drawer-headline);
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  display: grid;
+  color: styles-tokens-drawer.$sys-neutral-text-main;
+}
+
+.subtitle {
+  color: styles-tokens-drawer.$sys-neutral-text-support;
+}

package/src/helperComponents/WithTooltip/WithTooltip.tsx

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+
+import { MobileTooltip, MobileTooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+
+type WithTooltipProps = PropsWithChildren<{
+  /** Тултип над кнопкой */
+  tooltip?: MobileTooltipProps;
+}>;
+
+export function WithTooltip({ tooltip, children }: WithTooltipProps) {
+  if (!tooltip) {
+    return <>{children}</>;
+  }
+
+  return <MobileTooltip {...tooltip}>{children}</MobileTooltip>;
+}

package/src/helperComponents/WithTooltip/index.ts

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

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './Body';
+export * from './ButtonClose';
+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 { MODAL_MODE, MODE, POSITION, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type Mode = ValueOf<typeof MODE>;
+
+export type ModalMode = ValueOf<typeof MODAL_MODE>;
+
+export type Position = ValueOf<typeof POSITION>;