@snack-uikit/notification 0.13.25 → 0.13.26

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

@@ -0,0 +1,89 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationCard' as tokens;
+
+$duration: var(--snack-notification-stack-animation-duration);
+
+.container {
+  @include tokens.composite-var(tokens.$notification-card-stack-container);
+
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  @include tokens.composite-var(tokens.$notification-card-stack-header-container);
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(tokens.$sys-neutral-text-main);
+}
+
+.title {
+  @include tokens.composite-var(tokens.$sans-title-s);
+
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.right {
+  @include tokens.composite-var(tokens.$notification-card-stack-header-right);
+
+  display: flex;
+  flex-direction: row;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.first {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.stack {
+  position: relative;
+  overflow: visible;
+  height: auto;
+  transition: overflow $duration allow-discrete step-end;
+
+  &:not([data-open]) {
+    overflow: hidden;
+    transition:
+      height $duration allow-discrete step-end;
+
+    &[data-tail-size] {
+      height: 8px;
+    }
+
+    &[data-tail-size="1"] {
+      height: 4px;
+    }
+  }
+}
+
+.animationContainer {
+  translate: 0 -100%;
+  scale: 0.98;
+
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$space-notification-panel-container-body-stack-cards;
+
+  margin-top: tokens.$space-notification-panel-container-body-stack-cards;
+
+  opacity: 0;
+
+  transition:
+    scale $duration,
+    translate $duration,
+    opacity $duration;
+
+  [data-open] & {
+    translate: 0 0;
+    scale: 1;
+    opacity: 1;
+  }
+}

package/src/components/NotificationPanel/components/NotificationCardStack/utils.ts

@@ -0,0 +1,12 @@
+import { cloneElement, isValidElement, ReactNode } from 'react';
+
+export const cloneCard = (element: ReactNode, props: Record<string, unknown>) => {
+  if (!isValidElement(element)) {
+    return element;
+  }
+
+  return cloneElement(element, {
+    ...element.props,
+    ...props,
+  });
+};

package/src/components/NotificationPanel/components/NotificationPanelDivider/NotificationPanelDivider.tsx

@@ -14,8 +14,10 @@ export type NotificationPanelDividerProps = WithSupportProps<{
 /** Разделитель для группировки или разделения карточек в списке */
 export function NotificationPanelDivider({ text, className, ...rest }: NotificationPanelDividerProps) {
   return (
-    <Typography.LightLabelS className={cn(styles.notificationPanelDivider, className)} {...extractSupportProps(rest)}>
-      {text}
-    </Typography.LightLabelS>
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)}>
+      <div className={styles.line}></div>
+      <Typography.LightLabelS className={styles.text}>{text}</Typography.LightLabelS>
+      <div className={styles.line}></div>
+    </div>
   );
 }

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

@@ -1,15 +1,23 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-notification-notificationPanel';
-
-.notificationPanelDivider {
-  @include styles-tokens-notification-notificationPanel.composite-var(styles-tokens-notification-notificationPanel.$notification-panel-readed-divider);
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables' as stv;
 
+.container {
   display: flex;
+  gap: stv.$space-notification-panel-divider-gap;
   align-items: center;
   justify-content: center;
+}
+
+.text {
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: stv.$sys-neutral-text-light;
+}
 
-  color: styles-tokens-notification-notificationPanel.$sys-neutral-text-light;
+.line {
+  flex-grow: 1;
+  flex-shrink: 1;
 
-  background-color: styles-tokens-notification-notificationPanel.$sys-neutral-background2-level;
-  border-bottom-color: styles-tokens-notification-notificationPanel.$sys-neutral-decor-default;
+  background-color: stv.$sys-neutral-background2-level;
+  border-bottom-color: stv.$sys-neutral-decor-default;
   border-bottom-style: solid;
 }

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

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

package/src/components/NotificationPanel/constants.ts

@@ -9,4 +9,10 @@ export const TEST_IDS = {
   readAll: 'notification-panel__readAll',
   footerButton: 'notification-panel__footerButton',
   skeleton: 'notification-panel__skeleton',
+  cardStack: {
+    headline: 'notification-panel__card-stack__headline',
+    wrapper: 'notification-panel__card-stack__wrapper',
+    title: 'notification-panel__card-stack__title',
+    openButton: 'notification-panel__card-stack__open-button',
+  },
 };

package/src/components/NotificationPanel/helperComponents/StackTail/StackTail.tsx

@@ -0,0 +1,17 @@
+import styles from './styles.module.scss';
+
+type StackTailProps = {
+  open: boolean;
+  count: number;
+};
+
+export function StackTail({ open, count }: StackTailProps) {
+  return (
+    <div className={styles.container} data-open={open || undefined}>
+      <div className={styles.animationContainer}>
+        {count > 1 && <div className={styles.card} data-level='3' />}
+        <div className={styles.card} data-level='2' />
+      </div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,77 @@
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables' as stv;
+
+$halfDuration: calc(var(--snack-notification-stack-animation-duration) / 2);
+
+.container {
+  position: relative;
+  height: 0;
+}
+
+.animationContainer {
+  position: absolute;
+  top: 0;
+  bottom: calc(-1 * stv.$space-notification-panel-card-stack-stack3-level-horizontal-padding);
+
+  overflow: hidden;
+
+  width: 100%;
+
+  transition: bottom $halfDuration calc($halfDuration / 1.7) ease-out;
+
+  [data-open] & {
+    bottom: -416px;
+    transition: bottom $halfDuration ease-out;
+  }
+}
+
+.card {
+  position: absolute;
+
+  overflow: hidden;
+
+  height: 200px;
+
+  background-color: stv.$sys-neutral-background2-level;
+  border: stv.$border-width-notification-panel-card solid stv.$sys-neutral-decor-default;
+  border-radius: stv.$radius-notification-panel-card;
+
+  transition:
+    left $halfDuration $halfDuration ease,
+    right $halfDuration $halfDuration ease,
+    opacity $halfDuration $halfDuration ease;
+
+  &::after {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    opacity: stv.$opacity-a008;
+    background-color: stv.$sys-neutral-accent-default;
+  }
+
+  [data-open] & {
+    right: 0;
+    left: 0;
+    opacity: 0;
+    transition:
+      left $halfDuration ease,
+      right $halfDuration ease,
+      opacity $halfDuration ease;
+  }
+
+  &[data-level="2"] {
+    right: stv.$space-notification-panel-card-stack-stack2-level-horizontal-padding;
+    bottom: 50%;
+    left: stv.$space-notification-panel-card-stack-stack2-level-horizontal-padding;
+  }
+
+  &[data-level="3"] {
+    right: stv.$space-notification-panel-card-stack-stack3-level-horizontal-padding;
+    bottom: 0;
+    left: stv.$space-notification-panel-card-stack-stack3-level-horizontal-padding;
+  }
+}

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

@@ -34,14 +34,14 @@
 }
 
 .notificationPanelBody {
+  @include styles-tokens-notification-notificationPanel.composite-var(styles-tokens-notification-notificationPanel.$notification-panel-body-container);
+
+  display: flex;
   flex: 1 1 auto;
-  min-height: 0;
-}
+  flex-direction: column;
+  gap: styles-tokens-element.$space-notification-panel-container-body-gap; 
 
-.notificationPanelCard {
-  &:last-of-type {
-    border-bottom: none;
-  }
+  min-height: 0;
 }
 
 .notificationPanelFooterButton {

package/src/helperComponents/ActionsButton/ActionsButton.tsx

@@ -0,0 +1,65 @@
+import cn from 'classnames';
+import { Dispatch, ReactElement, SetStateAction } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { BaseItemProps, Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
+
+import { TEST_IDS } from '../../components/NotificationCard/constants';
+import { stopPropagationClick } from '../../components/NotificationCard/helpers';
+import { NotificationCardProps } from '../../components/NotificationCard/NotificationCard';
+import styles from './styles.module.scss';
+
+export type Action = {
+  icon?: ReactElement;
+  tagLabel?: string;
+} & Pick<BaseItemProps, 'content' | 'onClick' | 'disabled'>;
+
+export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
+  actions: Action[];
+  open: boolean;
+  setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+  size: 's' | 'xs';
+  icon: ReactElement;
+  className?: string;
+};
+
+export function ActionsButton({
+  actions,
+  open,
+  setDroplistOpen,
+  size,
+  icon,
+  className,
+}: NotificationCardFunctionProps) {
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={cn(styles.container, className)}
+      data-test-id={TEST_IDS.actions.wrapper}
+      onClick={stopPropagationClick}
+    >
+      <Droplist
+        trigger='clickAndFocusVisible'
+        open={open}
+        onOpenChange={setDroplistOpen}
+        placement='bottom-end'
+        scroll
+        data-test-id={TEST_IDS.actions.droplist}
+        items={actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
+          onClick: e => {
+            setDroplistOpen(false);
+            onClick?.(e);
+          },
+          disabled,
+          content,
+          beforeContent: icon,
+          afterContent: tagLabel ? <Tag label={tagLabel} /> : undefined,
+          'data-test-id': TEST_IDS.actions.droplistAction,
+        }))}
+      >
+        <ButtonFunction size={size} icon={icon} data-test-id={TEST_IDS.actions.droplistTrigger} />
+      </Droplist>
+    </div>
+  );
+}

package/src/helperComponents/ActionsButton/index.ts

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

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

@@ -0,0 +1,3 @@
+.container {
+  display: flex;
+}

package/dist/cjs/components/NotificationCard/components/NotificationCardFunction.d.ts

@@ -1,7 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { NotificationCardProps } from '../NotificationCard';
-export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
-    open: boolean;
-    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-};
-export declare function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/NotificationCard/components/NotificationCardFunction.js

@@ -1,64 +0,0 @@
-"use strict";
-
-var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NotificationCardFunction = NotificationCardFunction;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const button_1 = require("@snack-uikit/button");
-const icons_1 = require("@snack-uikit/icons");
-const list_1 = require("@snack-uikit/list");
-const tag_1 = require("@snack-uikit/tag");
-const constants_1 = require("../constants");
-const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
-function NotificationCardFunction(_ref) {
-  let {
-    actions,
-    open,
-    setDroplistOpen
-  } = _ref;
-  return (0, jsx_runtime_1.jsx)("div", {
-    className: styles_module_scss_1.default.notificationCardFunction,
-    "data-test-id": constants_1.TEST_IDS.actions.wrapper,
-    children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
-      trigger: 'clickAndFocusVisible',
-      open: open,
-      onOpenChange: setDroplistOpen,
-      placement: 'bottom-end',
-      scroll: true,
-      "data-test-id": constants_1.TEST_IDS.actions.droplist,
-      items: actions.map(_ref2 => {
-        let {
-          onClick,
-          disabled,
-          content,
-          tagLabel,
-          icon
-        } = _ref2;
-        return {
-          onClick: e => {
-            setDroplistOpen(false);
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-          },
-          disabled,
-          content,
-          beforeContent: icon,
-          afterContent: tagLabel ? (0, jsx_runtime_1.jsx)(tag_1.Tag, {
-            label: tagLabel
-          }) : undefined,
-          'data-test-id': constants_1.TEST_IDS.actions.droplistAction
-        };
-      }),
-      children: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-        size: 's',
-        icon: (0, jsx_runtime_1.jsx)(icons_1.KebabSVG, {}),
-        "data-test-id": constants_1.TEST_IDS.actions.droplistTrigger
-      })
-    })
-  });
-}

package/dist/esm/components/NotificationCard/components/NotificationCardFunction.d.ts

@@ -1,7 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { NotificationCardProps } from '../NotificationCard';
-export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
-    open: boolean;
-    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-};
-export declare function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NotificationCard/components/NotificationCardFunction.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ButtonFunction } from '@snack-uikit/button';
-import { KebabSVG } from '@snack-uikit/icons';
-import { Droplist } from '@snack-uikit/list';
-import { Tag } from '@snack-uikit/tag';
-import { TEST_IDS } from '../constants';
-import styles from '../styles.module.css';
-export function NotificationCardFunction({ actions, open, setDroplistOpen }) {
-    return (_jsx("div", { className: styles.notificationCardFunction, "data-test-id": TEST_IDS.actions.wrapper, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: open, onOpenChange: setDroplistOpen, placement: 'bottom-end', scroll: true, "data-test-id": TEST_IDS.actions.droplist, items: actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
-                onClick: e => {
-                    setDroplistOpen(false);
-                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                },
-                disabled,
-                content,
-                beforeContent: icon,
-                afterContent: tagLabel ? _jsx(Tag, { label: tagLabel }) : undefined,
-                'data-test-id': TEST_IDS.actions.droplistAction,
-            })), children: _jsx(ButtonFunction, { size: 's', icon: _jsx(KebabSVG, {}), "data-test-id": TEST_IDS.actions.droplistTrigger }) }) }));
-}

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

@@ -1,43 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-
-import { ButtonFunction } from '@snack-uikit/button';
-import { KebabSVG } from '@snack-uikit/icons';
-import { Droplist } from '@snack-uikit/list';
-import { Tag } from '@snack-uikit/tag';
-
-import { TEST_IDS } from '../constants';
-import { NotificationCardProps } from '../NotificationCard';
-import styles from '../styles.module.scss';
-
-export type NotificationCardFunctionProps = Required<Pick<NotificationCardProps, 'actions'>> & {
-  open: boolean;
-  setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-};
-
-export function NotificationCardFunction({ actions, open, setDroplistOpen }: NotificationCardFunctionProps) {
-  return (
-    <div className={styles.notificationCardFunction} data-test-id={TEST_IDS.actions.wrapper}>
-      <Droplist
-        trigger='clickAndFocusVisible'
-        open={open}
-        onOpenChange={setDroplistOpen}
-        placement='bottom-end'
-        scroll
-        data-test-id={TEST_IDS.actions.droplist}
-        items={actions.map(({ onClick, disabled, content, tagLabel, icon }) => ({
-          onClick: e => {
-            setDroplistOpen(false);
-            onClick?.(e);
-          },
-          disabled,
-          content,
-          beforeContent: icon,
-          afterContent: tagLabel ? <Tag label={tagLabel} /> : undefined,
-          'data-test-id': TEST_IDS.actions.droplistAction,
-        }))}
-      >
-        <ButtonFunction size='s' icon={<KebabSVG />} data-test-id={TEST_IDS.actions.droplistTrigger} />
-      </Droplist>
-    </div>
-  );
-}