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

package/dist/components/NotificationPanel/styles.module.css

@@ -0,0 +1,97 @@
+.notificationPanelHeader{
+  padding-left:var(--space-notification-panel-header-horizontal-padding, 24px);
+  padding-right:var(--space-notification-panel-header-horizontal-padding, 24px);
+  padding-top:var(--space-notification-panel-header-padding-top, 24px);
+  padding-bottom:var(--space-notification-panel-header-padding-bottom, 16px);
+  gap:var(--space-notification-panel-header-gap, 16px);
+  border-bottom-width:var(--border-width-notification-panel-container, 1px);
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  border-bottom-color:var(--sys-neutral-decor-default, #dedede);
+  border-bottom-style:solid;
+}
+.notificationPanelHeader::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:calc(100% + var(--border-width-notification-panel-container, 1px));
+  opacity:var(--opacity-a004, 0.04);
+  background-color:var(--sys-neutral-accent-default, #757575);
+  border-radius:inherit;
+}
+
+.notificationPanelHeaderFunctions{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+}
+
+.notificationPanelChips{
+  gap:var(--space-notification-panel-header-chips-gap, 8px);
+  display:flex;
+  align-items:center;
+}
+
+.notificationPanelHeadline{
+  gap:var(--space-notification-panel-header-headline-gap, 16px);
+  display:flex;
+  align-items:center;
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.notificationPanelTitle{
+  flex:1 1 auto;
+  min-width:0;
+}
+
+.notificationPanelBody{
+  flex:1 1 auto;
+  min-height:0;
+}
+
+.notificationPanelCard:last-of-type{
+  border-bottom:none;
+}
+
+.notificationPanelFooterButton{
+  border-top-width:var(--border-width-notification-panel-container, 1px);
+  border-bottom-right-radius:var(--radius-notification-panel-footer-radius-bottom, 16px);
+  border-bottom-left-radius:var(--radius-notification-panel-footer-radius-bottom, 16px);
+  height:var(--size-notification-panel-button, 32px);
+  cursor:pointer;
+  flex-shrink:0;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+  padding:0;
+  color:var(--sys-neutral-text-light, #898989);
+  background:none;
+  border-color:var(--sys-neutral-decor-default, #dedede);
+  border-top-style:solid;
+  border-right:none;
+  border-bottom:none;
+  border-left:none;
+  outline:0;
+  outline-offset:0;
+}
+.notificationPanelFooterButton:hover{
+  color:var(--sys-neutral-text-support, #565656);
+}
+.notificationPanelFooterButton:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  color:var(--sys-neutral-text-support, #565656);
+  border-color:transparent;
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.notificationPanelFooterButton:active{
+  color:var(--sys-neutral-text-main, #333333);
+  border-color:var(--sys-neutral-decor-default, #dedede);
+}

package/dist/components/index.d.ts

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

package/dist/components/index.js

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

package/dist/helperComponents/NotificationPanelPopover/NotificationPanelPopover.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { PopoverPrivateProps } from '@snack-uikit/popover-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+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 declare function NotificationPanelPopover({ content, trigger, placement, children, contentClassName, ...otherProps }: NotificationPanelPopoverProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/helperComponents/NotificationPanelPopover/NotificationPanelPopover.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { PopoverPrivate } from '@snack-uikit/popover-private';
+import styles from './styles.module.css';
+export function NotificationPanelPopover(_a) {
+    var { content, trigger = PopoverPrivate.triggers.Click, placement = PopoverPrivate.placements.BottomEnd, children, contentClassName } = _a, otherProps = __rest(_a, ["content", "trigger", "placement", "children", "contentClassName"]);
+    if (!children) {
+        return null;
+    }
+    return (_jsx(PopoverPrivate, Object.assign({ fallbackPlacements: [], placement: placement, popoverContent: _jsx("div", Object.assign({ className: styles.notificationPanelPopoverWrap }, { children: _jsx("div", Object.assign({ className: cn(styles.notificationPanelPopover, contentClassName) }, { children: content })) })), trigger: trigger, hasArrow: false, heightStrategy: PopoverPrivate.heightStrategies.Lte }, otherProps, { children: children })));
+}

package/dist/helperComponents/NotificationPanelPopover/index.d.ts

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

package/dist/helperComponents/NotificationPanelPopover/index.js

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

package/dist/helperComponents/NotificationPanelPopover/styles.module.css

@@ -0,0 +1,20 @@
+.notificationPanelPopoverWrap{
+  padding-top:var(--space-notification-panel-container-padding-top, 4px);
+  padding-bottom:var(--space-notification-panel-container-padding-bottom, 24px);
+  min-height:var(--size-notification-panel-container, 388px);
+  display:flex;
+  flex-direction:column;
+  box-sizing:border-box;
+  height:100%;
+}
+
+.notificationPanelPopover{
+  border-radius:var(--radius-notification-panel-panel, 16px);
+  width:var(--size-notification-panel-panel, 464px);
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  box-shadow:var(--box-shadow-elevation-level2, 0px 0px 4px 0px rgba(0, 0, 0, 0.0392156863), 0px 4px 8px 0px rgba(0, 0, 0, 0.0392156863));
+}

package/dist/helperComponents/index.d.ts

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

package/dist/helperComponents/index.js

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@snack-uikit/notification",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Notification",
+  "version": "0.3.17-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/notification",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/notification"
+  },
+  "author": "Белов Алексей <anbelov@cloud.ru>",
+  "contributors": [
+    "Белов Алексей <anbelov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
+    "@snack-uikit/chips": "0.8.5-preview-85c5f47b.0",
+    "@snack-uikit/droplist": "0.10.13-preview-85c5f47b.0",
+    "@snack-uikit/icon-predefined": "0.2.6-preview-85c5f47b.0",
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/link": "0.7.1-preview-85c5f47b.0",
+    "@snack-uikit/popover-private": "0.10.1-preview-85c5f47b.0",
+    "@snack-uikit/scroll": "0.3.5-preview-85c5f47b.0",
+    "@snack-uikit/skeleton": "0.2.5-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/NotificationCard/NotificationCard.tsx

@@ -0,0 +1,172 @@
+import cn from 'classnames';
+import { MouseEventHandler, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { Link, LinkProps } from '@snack-uikit/link';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { NotificationCardFunction } from './components';
+import { Appearance, TEST_IDS } from './constants';
+import { getIcon } from './helpers';
+import styles from './styles.module.scss';
+
+export type NotificationCardProps = WithSupportProps<{
+  /** Идентификатор уведомления */
+  id: string;
+  /** Тип уведомления */
+  appearance?: Appearance;
+  /** Лейбл перед заголовком */
+  label?: string;
+  /** Управление состоянием прочитано/не прочитано */
+  unread?: boolean;
+  /** Заголовок уведомления */
+  title: string;
+  /** Контент уведомления */
+  content: ReactNode;
+  /** Ссылка */
+  link?: Omit<LinkProps, 'size' | 'onColor' | 'onSurface' | 'data-test-id'>;
+  /** Дата уведомления */
+  date: string;
+  /** Колбэк клика по карточке */
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  /** Колбэк при попадании карточки в область видимости на 80% */
+  onVisible?(cardId: string): void;
+  /** Дополнительные действия у карточки */
+  actions?: Pick<
+    ItemSingleProps,
+    'option' | 'onClick' | 'disabled' | 'icon' | 'description' | 'caption' | 'tagLabel'
+  >[];
+  /** CSS-класс */
+  className?: string;
+}>;
+
+/** Компонент карточки уведомления */
+export function NotificationCard({
+  id,
+  appearance = Appearance.Neutral,
+  label,
+  unread,
+  title,
+  content,
+  link,
+  date,
+  onClick,
+  actions,
+  onVisible,
+  className,
+  ...rest
+}: NotificationCardProps) {
+  const { icon, linkOnColor } = useMemo(
+    () => ({
+      icon: getIcon(appearance),
+      linkOnColor: appearance === Appearance.ErrorCritical ? Link.onColors.Red : undefined,
+    }),
+    [appearance],
+  );
+
+  const [isDroplistOpen, setDroplistOpen] = useState(false);
+
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!unread || !onVisible) {
+      return;
+    }
+
+    const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries;
+
+      if (entry.isIntersecting) {
+        onVisible(id);
+      }
+    };
+
+    const observer = new IntersectionObserver(handleIntersection, {
+      root: null,
+      threshold: 0.8,
+      rootMargin: '0px',
+    });
+
+    observer.observe(cardRef.current as HTMLElement);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [id, onVisible, unread]);
+
+  const showFooter = Boolean(link || date);
+
+  const handleLinkClick: MouseEventHandler<HTMLAnchorElement> = e => {
+    e.stopPropagation();
+
+    link?.onClick?.(e);
+  };
+
+  return (
+    <div
+      ref={cardRef}
+      role='button'
+      onClick={onClick}
+      tabIndex={0}
+      {...extractSupportProps(rest)}
+      data-appearance={appearance}
+      data-unread={unread || undefined}
+      data-clickable={Boolean(onClick) || undefined}
+      data-droplist-open={isDroplistOpen || undefined}
+      className={cn(styles.notificationCard, className)}
+    >
+      {actions?.length && (
+        <NotificationCardFunction actions={actions} open={isDroplistOpen} setDroplistOpen={setDroplistOpen} />
+      )}
+
+      {label && (
+        <Typography.LightLabelS tag={Typography.tags.div} className={styles.notificationCardLabel}>
+          <TruncateString maxLines={1} text={label} data-test-id={TEST_IDS.label} />
+        </Typography.LightLabelS>
+      )}
+
+      <div className={styles.notificationCardTitle}>
+        <div className={styles.notificationCardTitleIcon}>{icon}</div>
+
+        <Typography.SansTitleS tag={Typography.tags.div} className={styles.notificationCardTitleText}>
+          <TruncateString maxLines={2} text={title} data-test-id={TEST_IDS.title} />
+        </Typography.SansTitleS>
+      </div>
+
+      {content && (
+        <Typography.SansBodyS
+          tag={Typography.tags.div}
+          className={styles.notificationCardContent}
+          data-test-id={TEST_IDS.content}
+        >
+          {content}
+        </Typography.SansBodyS>
+      )}
+
+      {showFooter && (
+        <div className={styles.notificationCardFooter}>
+          {link && (
+            <Link
+              {...link}
+              onClick={handleLinkClick}
+              onColor={linkOnColor}
+              onSurface={Link.onSurfaces.Decor}
+              size={Link.sizes.S}
+              data-test-id={TEST_IDS.link}
+            />
+          )}
+
+          {date && (
+            <Typography.LightLabelS className={styles.notificationCardDate} data-test-id={TEST_IDS.date}>
+              {date}
+            </Typography.LightLabelS>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+NotificationCard.appearances = Appearance;

package/src/components/NotificationCard/components/NotificationCardFunction.tsx

@@ -0,0 +1,60 @@
+import { Dispatch, SetStateAction } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist, DroplistProps } from '@snack-uikit/droplist';
+import { KebabSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../constants';
+import { NotificationCardProps } from '../NotificationCard';
+import styles from '../styles.module.scss';
+
+export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> &
+  Required<Pick<DroplistProps, 'open'>> & {
+    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+  };
+
+export function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps) {
+  const {
+    firstElementRefCallback,
+    triggerElementRef,
+    handleDroplistFocusLeave,
+    handleTriggerKeyDown,
+    handleDroplistItemKeyDown,
+    handleDroplistItemClick,
+  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({
+    setDroplistOpen,
+  });
+
+  return (
+    <div className={styles.notificationCardFunction} data-test-id={TEST_IDS.actions.wrapper}>
+      <Droplist
+        open={open}
+        onOpenChange={setDroplistOpen}
+        placement={Droplist.placements.BottomEnd}
+        firstElementRefCallback={firstElementRefCallback}
+        onFocusLeave={handleDroplistFocusLeave}
+        triggerRef={triggerElementRef}
+        useScroll
+        triggerElement={
+          <ButtonFunction
+            size={ButtonFunction.sizes.S}
+            icon={<KebabSVG />}
+            onKeyDown={handleTriggerKeyDown}
+            data-test-id={TEST_IDS.actions.droplistTrigger}
+          />
+        }
+        data-test-id={TEST_IDS.actions.droplist}
+      >
+        {actions.map(action => (
+          <Droplist.ItemSingle
+            {...action}
+            key={action.option}
+            onClick={e => handleDroplistItemClick(e, action.onClick)}
+            data-test-id={TEST_IDS.actions.droplistAction}
+            onKeyDown={handleDroplistItemKeyDown}
+          />
+        ))}
+      </Droplist>
+    </div>
+  );
+}

package/src/components/NotificationCard/components/NotificationCardSkeleton.tsx

@@ -0,0 +1,30 @@
+import { Skeleton, SkeletonText } from '@snack-uikit/skeleton';
+
+import { TEST_IDS } from '../../NotificationPanel/constants';
+import styles from '../styles.module.scss';
+
+const BORDER_RADIUS = 24;
+
+export function NotificationCardSkeleton() {
+  return (
+    <div className={styles.notificationCard} data-test-id={TEST_IDS.skeleton} data-skeleton={true}>
+      <Skeleton width={140} height={11} borderRadius={BORDER_RADIUS} />
+
+      <div className={styles.notificationCardTitle} data-center={true}>
+        <div className={styles.notificationCardTitleIcon}>
+          <Skeleton width={16} height={16} borderRadius={BORDER_RADIUS} />
+        </div>
+        <Skeleton width={140} height={14} borderRadius={BORDER_RADIUS} />
+      </div>
+
+      <div className={styles.notificationCardContent}>
+        <SkeletonText lines={3} borderRadius={BORDER_RADIUS} />
+      </div>
+
+      <div className={styles.notificationCardFooter}>
+        <Skeleton width={140} borderRadius={BORDER_RADIUS} height={12} />
+        <Skeleton width={140} borderRadius={BORDER_RADIUS} height={11} />
+      </div>
+    </div>
+  );
+}

package/src/components/NotificationCard/components/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationCardFunction';
+export * from './NotificationCardSkeleton';

package/src/components/NotificationCard/constants.ts

@@ -0,0 +1,21 @@
+export enum Appearance {
+  Neutral = 'neutral',
+  Error = 'error',
+  ErrorCritical = 'errorCritical',
+  Warning = 'warning',
+  Success = 'success',
+}
+
+export const TEST_IDS = {
+  label: 'notification-card__label',
+  title: 'notification-card__title',
+  content: 'notification-card__content',
+  link: 'notification-card__link',
+  date: 'notification-card__date',
+  actions: {
+    wrapper: 'notification-card__actions',
+    droplist: 'notification-card__droplist',
+    droplistTrigger: 'notification-card__droplist-trigger',
+    droplistAction: 'notification-card__droplist-action',
+  },
+};

package/src/components/NotificationCard/helpers.tsx

@@ -0,0 +1,19 @@
+import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
+
+import { Appearance } from './constants';
+
+export function getIcon(appearance: Appearance) {
+  switch (appearance) {
+    case Appearance.Success:
+      return <CheckFilledSVG size={16} />;
+    case Appearance.Error:
+    case Appearance.ErrorCritical:
+      return <CrossFilledSVG size={16} />;
+    case Appearance.Warning:
+      return <AlarmFilledSVG size={16} />;
+    case Appearance.Neutral:
+      return <InfoFilledSVG size={16} />;
+    default:
+      return null;
+  }
+}

package/src/components/NotificationCard/index.ts

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