@snack-uikit/notification 0.3.17-preview-85c5f47b.0

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

@@ -0,0 +1,172 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationCard';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.notificationCardFunction {
+  @include composite-var($notification-card-function-badge);
+
+  pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  display: flex;
+
+  opacity: 0;
+}
+
+.notificationCardTitleText {
+  box-sizing: border-box;
+  color: $sys-neutral-text-main;
+}
+
+.notificationCardTitleIcon {
+  @include composite-var($notification-card-icon-type);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.notificationCard {
+  @include composite-var($notification-card-container);
+
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  box-sizing: border-box;
+
+  border-bottom-color: $sys-neutral-decor-default;
+  border-bottom-style: solid;
+
+  &::before {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100% + $border-width-notification-panel-card);
+
+    opacity: $opacity-a004;
+  }
+
+  &:focus-visible {
+    @include outline-var($container-focused-s);
+
+    border-bottom-color: transparent;
+    outline-color: $sys-available-complementary;
+  }
+
+  &[data-droplist-open], &:hover, &:focus-visible, &:focus-within:not(:focus) {
+    &::before {
+      background-color: $sys-neutral-accent-default;
+    }
+
+    .notificationCardFunction {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
+
+  &[data-clickable] {
+    cursor: pointer;
+  }
+
+  &[data-unread] {
+    &::before {
+      opacity: $opacity-a008;
+      background-color: $sys-neutral-accent-default;
+    }
+
+    &[data-droplist-open], &:hover, &:focus-visible, &:focus-within:not(:focus) {
+      &::before {
+        opacity: $opacity-a004;
+      }
+    }
+  }
+
+  &[data-appearance='neutral'] {
+    .notificationCardTitleIcon {
+      color: $sys-neutral-accent-default;
+    }
+  }
+
+  &[data-appearance='error'],
+  &[data-appearance='errorCritical'] {
+    .notificationCardTitleIcon {
+      color: $sys-red-accent-default;
+    }
+  }
+
+  &[data-appearance='errorCritical'] {
+    &[data-unread], &[data-droplist-open], &:hover, &:focus-visible, &:focus-within:not(:focus) {
+      &::before {
+        background-color: $sys-red-accent-default;
+      }
+    }
+
+    .notificationCardTitleText {
+      color: $sys-red-accent-default;
+    }
+  }
+
+  &[data-appearance='warning'] {
+    .notificationCardTitleIcon {
+      color: $sys-yellow-accent-default;
+    }
+  }
+
+  &[data-appearance='success'] {
+    .notificationCardTitleIcon {
+      color: $sys-green-accent-default;
+    }
+  }
+
+  &[data-skeleton] {
+    &::before {
+      display: none;
+    }
+  }
+}
+
+.notificationCardLabel {
+  display: grid;
+  color: $sys-neutral-text-support;
+}
+
+.notificationCardTitle {
+  @include composite-var($notification-card-title-layout);
+
+  display: flex;
+
+  &[data-center] {
+    align-items: center;
+  }
+}
+
+.notificationCardContent {
+  box-sizing: border-box;
+  color: $sys-neutral-text-support;
+  white-space: pre-line;
+}
+
+.notificationCardFooter {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  box-sizing: border-box;
+}
+
+.notificationCardDate {
+  flex: 1 0 auto;
+  box-sizing: border-box;
+  color: $sys-neutral-text-light;
+  text-align: right;
+}

package/src/components/NotificationPanel/NotificationPanel.tsx

@@ -0,0 +1,134 @@
+import { MouseEventHandler, ReactNode, useMemo } from 'react';
+
+import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+import { ChipToggle, ChipToggleProps } from '@snack-uikit/chips';
+import { PopoverPrivate } from '@snack-uikit/popover-private';
+import { Scroll } from '@snack-uikit/scroll';
+import { SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { NotificationPanelPopover, NotificationPanelPopoverProps } from '../../helperComponents';
+import { NotificationCardSkeleton } from '../NotificationCard/components';
+import {
+  NotificationPanelBlank,
+  NotificationPanelBlankProps,
+  NotificationPanelSettings,
+  NotificationPanelSettingsProps,
+} from './components';
+import { TEST_IDS } from './constants';
+import styles from './styles.module.scss';
+
+export type { NotificationPanelBlankProps };
+
+export type NotificationPanelProps = {
+  /** Заголовок панели */
+  title: string;
+  /** Кнопка настроек и выпадающий список */
+  settings?: NotificationPanelSettingsProps;
+  /** Чипы для фильтрации */
+  chips?: Omit<ChipToggleProps, 'size' | 'data-test-id'>[];
+  /** Кнопка в "шапке" панели */
+  readAllButton?: Omit<ButtonFunctionProps, 'data-test-id'> & {
+    onClick: ButtonFunctionProps['onClick'];
+  };
+  /** Элемент для открытия панели */
+  triggerElement: NotificationPanelPopoverProps['children'];
+  /** Кнопка внизу панели */
+  footerButton?: {
+    label: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+  };
+  /** Состояние загрузки */
+  loading?: boolean;
+  /** Контент для отрисовки (e.g NotificationCard | NotificationPanel.Blank) */
+  content?: ReactNode;
+  /** Количество скелетонов карточек для отображения при загрузке */
+  skeletonsAmount?: number;
+} & Omit<NotificationPanelPopoverProps, 'children' | 'content'>;
+
+/** Компонент панели для уведомлений */
+export function NotificationPanel({
+  title,
+  triggerElement,
+  settings,
+  chips,
+  readAllButton,
+  footerButton,
+  content,
+  loading,
+  skeletonsAmount = 2,
+  ...rest
+}: NotificationPanelProps) {
+  const skeletons = useMemo(() => Array.from({ length: skeletonsAmount }, (_, i) => i), [skeletonsAmount]);
+
+  return (
+    <NotificationPanelPopover
+      {...rest}
+      content={
+        <>
+          <div className={styles.notificationPanelHeader}>
+            <div className={styles.notificationPanelHeadline}>
+              <Typography.SansHeadlineS className={styles.notificationPanelTitle}>
+                <TruncateString text={title} data-test-id={TEST_IDS.title} />
+              </Typography.SansHeadlineS>
+
+              {settings && <NotificationPanelSettings {...settings} />}
+            </div>
+
+            <div className={styles.notificationPanelHeaderFunctions}>
+              <div className={styles.notificationPanelChips}>
+                {chips?.map(chip => (
+                  <ChipToggle
+                    {...chip}
+                    key={chip.label}
+                    data-test-id={`${TEST_IDS.chip}-${chip.label}`}
+                    size={ChipToggle.sizes.Xs}
+                    disabled={chip.disabled || loading}
+                  />
+                ))}
+              </div>
+
+              {readAllButton && (
+                <ButtonFunction
+                  {...readAllButton}
+                  disabled={readAllButton.disabled || loading}
+                  data-test-id={TEST_IDS.readAll}
+                />
+              )}
+            </div>
+          </div>
+
+          <Scroll size={Scroll.sizes.M} className={styles.notificationPanelBody}>
+            {loading ? (
+              <SkeletonContextProvider loading={loading || false}>
+                {skeletons.map(skeleton => (
+                  <WithSkeleton key={skeleton} skeleton={<NotificationCardSkeleton />} />
+                ))}
+              </SkeletonContextProvider>
+            ) : (
+              content
+            )}
+          </Scroll>
+
+          {!loading && footerButton && (
+            <button className={styles.notificationPanelFooterButton} data-test-id={TEST_IDS.footerButton}>
+              <Typography.SansLabelS>{footerButton.label}</Typography.SansLabelS>
+            </button>
+          )}
+        </>
+      }
+    >
+      {triggerElement}
+    </NotificationPanelPopover>
+  );
+}
+
+NotificationPanel.placements = PopoverPrivate.placements;
+NotificationPanel.triggers = PopoverPrivate.triggers;
+NotificationPanel.widthStrategies = PopoverPrivate.widthStrategies;
+
+export namespace NotificationPanel {
+  export const Blank: typeof NotificationPanelBlank = NotificationPanelBlank;
+  export type BlankProps = NotificationPanelBlankProps;
+}

package/src/components/NotificationPanel/components/NotificationPanelBlank/NotificationPanelBlank.tsx

@@ -0,0 +1,65 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { IconPredefined, IconPredefinedProps } from '@snack-uikit/icon-predefined';
+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 NotificationPanelBlankProps = WithSupportProps<{
+  /** Заголовок */
+  title: ReactNode;
+  /** Описание */
+  description?: ReactNode;
+  /** Иконка */
+  icon?: IconPredefinedProps['icon'];
+  /** Цвет обводки для иконки */
+  iconAppearance?: IconPredefinedProps['appearance'];
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Компонента для "заглушки" вместо карточек в панели */
+export function NotificationPanelBlank({
+  icon,
+  iconAppearance = IconPredefined.appearances.Neutral,
+  title,
+  description,
+  className,
+  ...rest
+}: NotificationPanelBlankProps) {
+  return (
+    <div className={cn(styles.notificationPanelBlank, className)} {...extractSupportProps(rest)}>
+      {icon && (
+        <IconPredefined
+          icon={icon}
+          appearance={iconAppearance}
+          size={IconPredefined.sizes.L}
+          data-test-id={TEST_IDS.blank.icon}
+        />
+      )}
+
+      <div className={styles.notificationPanelBlankContent}>
+        <Typography.SansTitleS
+          tag={Typography.tags.div}
+          className={styles.notificationPanelBlankTitle}
+          data-test-id={TEST_IDS.blank.title}
+        >
+          {title}
+        </Typography.SansTitleS>
+
+        <Typography.SansBodyM
+          tag={Typography.tags.div}
+          className={styles.notificationPanelBlankDescription}
+          data-test-id={TEST_IDS.blank.description}
+        >
+          {description}
+        </Typography.SansBodyM>
+      </div>
+    </div>
+  );
+}
+
+NotificationPanelBlank.iconAppearances = IconPredefined.appearances;

package/src/components/NotificationPanel/components/NotificationPanelBlank/index.ts

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

package/src/components/NotificationPanel/components/NotificationPanelBlank/styles.module.scss

@@ -0,0 +1,32 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.notificationPanelBlank {
+  @include composite-var($notification-panel-blank-container);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.notificationPanelBlankContent {
+  @include composite-var($notification-panel-blank-text);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  box-sizing: border-box;
+
+  text-align: center;
+}
+
+.notificationPanelBlankTitle {
+  color: $sys-neutral-text-main;
+}
+
+.notificationPanelBlankDescription {
+  color: $sys-neutral-text-support;
+  white-space: pre-line;
+}

package/src/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettings.tsx

@@ -0,0 +1,31 @@
+import { ButtonSimple, ButtonSimpleProps } from '@snack-uikit/button';
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { KebabSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../../constants';
+import { NotificationPanelSettingsDroplist } from './NotificationPanelSettingsDroplist';
+
+export type NotificationPanelSettingsProps = {
+  /** Дополнительные действия панели */
+  actions?: Pick<
+    ItemSingleProps,
+    'option' | 'onClick' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
+  >[];
+  /** Кнопка дополнительного действия панели */
+  button: Omit<ButtonSimpleProps, 'label' | 'type' | 'size' | 'data-test-id'>;
+};
+
+export function NotificationPanelSettings({ actions, button }: NotificationPanelSettingsProps) {
+  const buttonProps: ButtonSimpleProps = {
+    ...button,
+    size: ButtonSimple.sizes.S,
+    icon: button.icon || <KebabSVG />,
+    'data-test-id': TEST_IDS.settings.droplistTrigger,
+  };
+
+  if (!actions?.length) {
+    return <ButtonSimple {...buttonProps} />;
+  }
+
+  return <NotificationPanelSettingsDroplist actions={actions} button={buttonProps} />;
+}

package/src/components/NotificationPanel/components/NotificationPanelSettings/NotificationPanelSettingsDroplist.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+import { ButtonSimple, ButtonSimpleProps } from '@snack-uikit/button';
+import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+
+import { TEST_IDS } from '../../constants';
+
+type NotificationPanelSettingsDroplistProps = {
+  actions: ItemSingleProps[];
+  button: ButtonSimpleProps;
+};
+
+export function NotificationPanelSettingsDroplist({ actions, button }: NotificationPanelSettingsDroplistProps) {
+  const [isDroplistOpen, setDroplistOpen] = useState(false);
+
+  const {
+    firstElementRefCallback,
+    triggerElementRef,
+    handleDroplistFocusLeave,
+    handleTriggerKeyDown,
+    handleDroplistItemKeyDown,
+    handleDroplistItemClick,
+  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({
+    setDroplistOpen,
+  });
+
+  return (
+    <Droplist
+      open={isDroplistOpen}
+      onOpenChange={setDroplistOpen}
+      firstElementRefCallback={firstElementRefCallback}
+      onFocusLeave={handleDroplistFocusLeave}
+      useScroll
+      triggerRef={triggerElementRef}
+      triggerElement={<ButtonSimple {...button} onKeyDown={handleTriggerKeyDown} />}
+      placement={Droplist.placements.BottomEnd}
+      data-test-id={TEST_IDS.settings.droplist}
+    >
+      {actions.map(action => (
+        <Droplist.ItemSingle
+          {...action}
+          key={action.option}
+          onClick={e => handleDroplistItemClick(e, action.onClick)}
+          onKeyDown={handleDroplistItemKeyDown}
+          data-test-id={TEST_IDS.settings.droplistAction}
+        />
+      ))}
+    </Droplist>
+  );
+}

package/src/components/NotificationPanel/components/NotificationPanelSettings/index.ts

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

package/src/components/NotificationPanel/components/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationPanelSettings';
+export * from './NotificationPanelBlank';

package/src/components/NotificationPanel/constants.ts

@@ -0,0 +1,17 @@
+export const TEST_IDS = {
+  title: 'notification-panel__title',
+  chip: 'notification-panel__chip',
+  settings: {
+    droplist: 'notification-panel__settings__droplist',
+    droplistTrigger: 'notification-panel__settings__droplist-trigger',
+    droplistAction: 'notification-panel__settings__droplist-action',
+  },
+  readAll: 'notification-panel__readAll',
+  footerButton: 'notification-panel__footerButton',
+  blank: {
+    icon: 'notification-panel__blank__icon',
+    title: 'notification-panel__blank__title',
+    description: 'notification-panel__blank__description',
+  },
+  skeleton: 'notification-panel__skeleton',
+};

package/src/components/NotificationPanel/index.ts

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

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

@@ -0,0 +1,109 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.notificationPanelHeader {
+  @include composite-var($notification-panel-header-container);
+
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  border-bottom-color: $sys-neutral-decor-default;
+  border-bottom-style: solid;
+
+  &::before {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: calc(100% + $border-width-notification-panel-container);
+
+    opacity: $opacity-a004;
+    background-color: $sys-neutral-accent-default;
+    border-radius: inherit;
+  }
+}
+
+.notificationPanelHeaderFunctions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.notificationPanelChips {
+  @include composite-var($notification-panel-header-chips);
+
+  display: flex;
+  align-items: center;
+}
+
+.notificationPanelHeadline {
+  @include composite-var($notification-panel-header-headline);
+
+  display: flex;
+  align-items: center;
+  color: $sys-neutral-text-main;
+}
+
+.notificationPanelTitle {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.notificationPanelBody {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.notificationPanelCard {
+  &:last-of-type {
+    border-bottom: none;
+  }
+}
+
+.notificationPanelFooterButton {
+  @include composite-var($notification-panel-button-container);
+
+  cursor: pointer;
+
+  flex-shrink: 0;
+
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+
+  color: $sys-neutral-text-light;
+
+  background: none;
+  border-color: $sys-neutral-decor-default;
+  border-top-style: solid;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+  outline: 0;
+  outline-offset: 0;
+
+  &:hover {
+    color: $sys-neutral-text-support;
+  }
+
+  &:focus-visible {
+    @include outline-inside-var($container-focused-s);
+
+    color: $sys-neutral-text-support;
+    border-color: transparent;
+    outline-color: $sys-available-complementary;
+  }
+
+  &:active {
+    color: $sys-neutral-text-main;
+    border-color: $sys-neutral-decor-default;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationCard';
+export * from './NotificationPanel';

package/src/helperComponents/NotificationPanelPopover/NotificationPanelPopover.tsx

@@ -0,0 +1,60 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { PopoverPrivate, PopoverPrivateProps } from '@snack-uikit/popover-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import styles from './styles.module.scss';
+
+export type NotificationPanelPopoverProps = WithSupportProps<
+  {
+    content: ReactNode;
+    /** CSS-класс для элемента содержащего контент */
+    contentClassName?: string;
+  } & Pick<
+    PopoverPrivateProps,
+    | 'className'
+    | 'triggerClassName'
+    | 'open'
+    | 'onOpenChange'
+    | 'hoverDelayOpen'
+    | 'hoverDelayClose'
+    | 'offset'
+    | 'children'
+    | 'closeOnEscapeKey'
+    | 'triggerClickByKeys'
+    | 'triggerRef'
+  > &
+    Partial<Pick<PopoverPrivateProps, 'trigger' | 'placement'>>
+>;
+
+export function NotificationPanelPopover({
+  content,
+  trigger = PopoverPrivate.triggers.Click,
+  placement = PopoverPrivate.placements.BottomEnd,
+  children,
+  contentClassName,
+  ...otherProps
+}: NotificationPanelPopoverProps) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <PopoverPrivate
+      fallbackPlacements={[]}
+      placement={placement}
+      popoverContent={
+        <div className={styles.notificationPanelPopoverWrap}>
+          <div className={cn(styles.notificationPanelPopover, contentClassName)}>{content}</div>
+        </div>
+      }
+      trigger={trigger}
+      hasArrow={false}
+      heightStrategy={PopoverPrivate.heightStrategies.Lte}
+      {...otherProps}
+    >
+      {children}
+    </PopoverPrivate>
+  );
+}

package/src/helperComponents/NotificationPanelPopover/index.ts

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