@snack-uikit/drawer 0.4.6-preview-85c5f47b.0

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,95 @@
+import { ReactElement } from 'react';
+
+import {
+  ButtonFilled,
+  ButtonFilledProps,
+  ButtonOutline,
+  ButtonOutlineProps,
+  ButtonSimple,
+  ButtonSimpleProps,
+} from '@snack-uikit/button';
+import { TruncateString } from '@snack-uikit/truncate-string';
+
+import { Mode, NESTED_DRAWER_PUSH_DISTANCE, Position, Size, TEST_IDS } from '../../constants';
+import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
+import { DrawerCustom, DrawerCustomProps } from '../DrawerCustom';
+
+export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedDrawer' | 'push'> &
+  Pick<DrawerHeaderProps, 'titleTooltip' | 'image'> &
+  Pick<DrawerBodyProps, 'content'> & {
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Размер */
+    size?: Size;
+    /** Основная кнопка */
+    approveButton?: Omit<ButtonFilledProps, 'size' | 'data-test-id'>;
+    /** Кнопка отмены */
+    cancelButton?: Omit<ButtonOutlineProps, 'size' | 'data-test-id'>;
+    /** Дополнительная кнопка */
+    additionalButton?: Omit<ButtonSimpleProps, 'size' | 'data-test-id'>;
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<DrawerProps>;
+  };
+
+/** Готовый компонент Drawer */
+export function Drawer({
+  title,
+  titleTooltip,
+  subtitle,
+  image,
+  content,
+  approveButton,
+  cancelButton,
+  additionalButton,
+  nestedDrawer,
+  ...rest
+}: DrawerProps) {
+  const needFooter = Boolean(approveButton) || Boolean(cancelButton) || Boolean(additionalButton);
+
+  return (
+    <DrawerCustom {...rest} push={Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }}>
+      <DrawerCustom.Header
+        title={<TruncateString text={title} />}
+        titleTooltip={titleTooltip}
+        subtitle={subtitle}
+        image={image}
+        data-test-id={TEST_IDS.header}
+      />
+
+      <DrawerCustom.Body content={content} data-test-id={TEST_IDS.content} />
+
+      {needFooter && (
+        <DrawerCustom.Footer
+          data-test-id={TEST_IDS.footer}
+          actions={
+            <>
+              {approveButton && (
+                <ButtonFilled {...approveButton} size={ButtonFilled.sizes.M} data-test-id={TEST_IDS.approveButton} />
+              )}
+
+              {cancelButton && (
+                <ButtonOutline {...cancelButton} size={ButtonOutline.sizes.M} data-test-id={TEST_IDS.cancelButton} />
+              )}
+
+              {additionalButton && (
+                <ButtonSimple
+                  {...additionalButton}
+                  size={ButtonSimple.sizes.M}
+                  data-test-id={TEST_IDS.additionalButton}
+                />
+              )}
+            </>
+          }
+        />
+      )}
+
+      {nestedDrawer}
+    </DrawerCustom>
+  );
+}
+
+Drawer.modes = Mode;
+Drawer.sizes = Size;
+Drawer.positions = Position;

package/src/components/Drawer/index.ts

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

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

@@ -0,0 +1,3 @@
+.drawer {
+  box-sizing: border-box;
+}

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -0,0 +1,117 @@
+import 'rc-drawer/assets/index.css';
+
+import cn from 'classnames';
+import RcDrawer, { DrawerProps as RcDrawerProps } from 'rc-drawer';
+import { PropsWithChildren, ReactElement } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { Mode, Position, Size, SIZE_AS_VALUES } from '../../constants';
+import {
+  ButtonClose,
+  DrawerBody,
+  DrawerBodyProps,
+  DrawerFooter,
+  DrawerFooterProps,
+  DrawerHeader,
+  DrawerHeaderProps,
+} from '../../helperComponents';
+import { motionProps } from './constants';
+import styles from './styles.module.scss';
+
+export type DrawerCustomProps = WithSupportProps<
+  PropsWithChildren<{
+    /** Управление состоянием показан/не показан. */
+    open: boolean;
+    /** Колбэк закрытия */
+    onClose(): void;
+    /** Режим отображения */
+    mode?: Mode;
+    /** Расположение открытого Drawer */
+    position?: Position;
+    /** CSS-класс для элемента с контентом */
+    className?: string;
+    /** CSS-класс для корневого элемента */
+    rootClassName?: string;
+    /** Размер */
+    size?: Size | string | number;
+    /** Смещение при открытии "вложенного" компонента */
+    push?: RcDrawerProps['push'];
+    /** Контейнер в котором будет рендерится Drawer. По-умолчанию - body */
+    container?: string | HTMLElement;
+    /** Вложенный Drawer */
+    nestedDrawer?: ReactElement<DrawerCustomProps>;
+  }>
+>;
+
+function DrawerCustomComponent({
+  open,
+  mode = Mode.Regular,
+  position = Position.Right,
+  onClose,
+  rootClassName,
+  className,
+  size = Size.S,
+  push,
+  container,
+  children,
+  nestedDrawer,
+  ...rest
+}: DrawerCustomProps) {
+  const isRegular = mode === Mode.Regular;
+  const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
+
+  return (
+    <RcDrawer
+      mask={isRegular}
+      maskClosable={isRegular}
+      maskClassName={styles.mask}
+      keyboard={isRegular}
+      width={isPredefinedSize ? 'null' : size}
+      open={open}
+      placement={position}
+      destroyOnClose={true}
+      push={push}
+      onClose={onClose}
+      getContainer={container}
+      className={cn(styles.drawer, className)}
+      rootClassName={cn(styles.drawerRoot, rootClassName)}
+      {...extractSupportProps(rest)}
+      data-content-wrapper={true}
+      data-size={isPredefinedSize ? size : undefined}
+      data-mode={mode}
+      {...motionProps}
+    >
+      <div className={styles.headerElements}>
+        <ButtonClose onClick={onClose} />
+      </div>
+
+      {children}
+
+      {nestedDrawer}
+    </RcDrawer>
+  );
+}
+
+/** Компонент-конструктор */
+export const DrawerCustom = DrawerCustomComponent as typeof DrawerCustomComponent & {
+  modes: typeof Mode;
+  positions: typeof Position;
+  sizes: typeof Size;
+  Header: typeof DrawerHeader;
+  Body: typeof DrawerBody;
+  Footer: typeof DrawerFooter;
+};
+
+DrawerCustom.modes = Mode;
+DrawerCustom.positions = Position;
+DrawerCustom.sizes = Size;
+DrawerCustom.Header = DrawerHeader;
+DrawerCustom.Body = DrawerBody;
+DrawerCustom.Footer = DrawerFooter;
+
+export namespace DrawerCustom {
+  export type HeaderProps = DrawerHeaderProps;
+  export type BodyProps = DrawerBodyProps;
+  export type FooterProps = DrawerFooterProps;
+}

package/src/components/DrawerCustom/constants.ts

@@ -0,0 +1,18 @@
+import './motion.css';
+
+import type { DrawerProps } from 'rc-drawer';
+
+export const maskMotion: DrawerProps['maskMotion'] = {
+  motionAppear: true,
+  motionName: 'maskMotion',
+};
+
+export const motion: DrawerProps['motion'] = placement => ({
+  motionAppear: true,
+  motionName: `panelMotion-${placement}`,
+});
+
+export const motionProps: Partial<DrawerProps> = {
+  maskMotion,
+  motion,
+};

package/src/components/DrawerCustom/index.ts

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

package/src/components/DrawerCustom/motion.css

@@ -0,0 +1,63 @@
+.maskMotion {
+  opacity: unset;
+}
+.maskMotion-enter, .maskMotion-appear {
+  opacity: 0;
+}
+.maskMotion-enter-active, .maskMotion-appear-active {
+  opacity: 1;
+  transition: opacity 0.2s;
+}
+.maskMotion-leave {
+  opacity: 1;
+}
+.maskMotion-leave-active {
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.panelMotion {
+  transform: unset;
+}
+.panelMotion-left-enter-start, .panelMotion-left-appear-start, .panelMotion-left-leave-start {
+  transition: none !important;
+}
+.panelMotion-left-enter-active, .panelMotion-left-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotion-left-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotion-left-enter, .panelMotion-left-appear {
+  transform: translateX(-100%);
+}
+.panelMotion-left-enter-active, .panelMotion-left-appear-active {
+  transform: translateX(0);
+}
+.panelMotion-left-leave {
+  transform: translateX(0);
+}
+.panelMotion-left-leave-active {
+  transform: translateX(-100%) !important;
+}
+.panelMotion-right-enter-start, .panelMotion-right-appear-start, .panelMotion-right-leave-start {
+  transition: none !important;
+}
+.panelMotion-right-enter-active, .panelMotion-right-appear-active {
+  transition: transform 0.2s ease-in-out;
+}
+.panelMotion-right-leave-active {
+  transition: transform 0.1s ease-out;
+}
+.panelMotion-right-enter, .panelMotion-right-appear {
+  transform: translateX(100%);
+}
+.panelMotion-right-enter-active, .panelMotion-right-appear-active {
+  transform: translateX(0);
+}
+.panelMotion-right-leave {
+  transform: translateX(0);
+}
+.panelMotion-right-leave-active {
+  transform: translateX(100%) !important;
+}

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

@@ -0,0 +1,64 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
+
+$sizes: ('s', 'm', 'l');
+$modes: ('regular', 'soft');
+$drawer-background-color: (
+  'regular': $sys-neutral-background1-level,
+  'soft': $sys-neutral-background2-level,
+);
+
+.drawerRoot {
+  z-index: auto !important; /* stylelint-disable-line declaration-no-important */
+}
+
+div[data-content-wrapper='true'] {
+  will-change: transform;
+
+  z-index: auto;
+
+  overflow: unset;
+
+  max-width: calc(100% - $space-drawer-outside-gap);
+  height: 100%;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      @include composite-var($drawer, 'window', $size);
+    }
+  }
+
+  @each $mode in $modes {
+    &[data-mode='#{$mode}'] {
+      .drawer {
+        background-color: simple-var($drawer-background-color, $mode);
+      }
+    }
+  }
+}
+
+.drawer {
+  overflow: unset;
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+
+  box-shadow: simple-var($box-shadow-elevation-level5);
+}
+
+.headerElements {
+  @include composite-var($drawer-header-elements-container);
+  @include composite-var($drawer-header-elements-elements-layout);
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: flex;
+  align-items: center;
+}
+
+.mask {
+  z-index: auto !important; /* stylelint-disable-line declaration-no-important */
+  background-color: simple-var($sys-blackout);
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './DrawerCustom';
+export * from './Drawer';

package/src/constants.ts

@@ -0,0 +1,34 @@
+export enum Size {
+  S = 's',
+  M = 'm',
+  L = 'l',
+}
+
+export const SIZE_AS_VALUES: string[] = Object.values(Size);
+
+export enum Mode {
+  Regular = 'regular',
+  Soft = 'soft',
+}
+
+export enum Position {
+  Right = 'right',
+  Left = 'left',
+}
+
+export const NESTED_DRAWER_PUSH_DISTANCE = 24;
+
+export const TEST_IDS = {
+  closeButton: 'drawer__close-button',
+  header: 'drawer__header',
+  title: 'drawer__title',
+  tooltip: 'drawer__title-tooltip',
+  subtitle: 'drawer__subtitle',
+  image: 'drawer__image',
+  content: 'drawer__body',
+  footer: 'drawer__footer',
+  footerActions: 'drawer__footer-actions',
+  approveButton: 'drawer__approve-button',
+  cancelButton: 'drawer__cancel-button',
+  additionalButton: 'drawer__additional-button',
+};

package/src/helperComponents/Body/Body.tsx

@@ -0,0 +1,23 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { Scroll } from '@snack-uikit/scroll';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type DrawerBodyProps = WithSupportProps<{
+  /** Контент */
+  content: ReactNode;
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Вспомогательный компонент для добавления "тела" в DrawerCustom */
+export function DrawerBody({ content, className, ...rest }: DrawerBodyProps) {
+  return (
+    <Scroll size={Scroll.sizes.M} className={cn(styles.drawerBody, className)} {...extractSupportProps(rest)}>
+      {content}
+    </Scroll>
+  );
+}

package/src/helperComponents/Body/index.ts

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

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

@@ -0,0 +1,10 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
+
+.drawerBody {
+  @include composite-var($drawer-body);
+
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-height: $dimension-2m;
+  color: $sys-neutral-text-main;
+}

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 drawer'
+      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-drawer';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.buttonClose {
+  @include composite-var($drawer-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,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,17 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
+
+.footer {
+  @include composite-var($drawer-footer);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.footerActions {
+  @include composite-var($drawer-action-row);
+
+  display: flex;
+  flex-direction: row-reverse;
+  flex-wrap: wrap;
+  align-items: center;
+}

package/src/helperComponents/Header/Header.tsx

@@ -0,0 +1,64 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { QuestionTooltip, TooltipProps } from '@snack-uikit/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?: TooltipProps['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
+            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>
+  );
+}

package/src/helperComponents/Header/index.ts

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

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

@@ -0,0 +1,36 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-drawer';
+
+.drawerHeader {
+  /* stub for proper typings */
+}
+
+.image {
+  @include composite-var($drawer-image);
+
+  display: block;
+  width: 100%;
+  object-fit: cover;
+}
+
+.headlineLayout {
+  @include composite-var($drawer-headline-layout);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.headline {
+  @include composite-var($drawer-headline);
+
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  display: grid;
+  color: $sys-neutral-text-main;
+}
+
+.subtitle {
+  color: $sys-neutral-text-support;
+}

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';