@xsolla/xui-b2b-notification-panel 0.190.0 → 0.191.0

package/README.md

@@ -21,6 +21,7 @@ npm install @xsolla/xui-b2b-notification-panel
 import {
   NotificationPanel,
   type NotificationPanelProps,
+  type NotificationPanelDevice,
   type ActionButtonElement,
 } from '@xsolla/xui-b2b-notification-panel';
 ```
@@ -44,6 +45,7 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
 | `variant` | `"notification" \| "announcement"` | `"notification"` | Layout. `notification` is the taller banner with an icon frame; `announcement` is the slim, single-line bar. |
+| `device` | `"desktop" \| "mobile"` | `"desktop"` | Device layout. Mobile `notification` uses a three-column row (icon \| stacked text + action \| close). Mobile `announcement` puts icon and title on one row, description below, and groups action + close on the right (top-aligned). |
 | `type` | `"alert" \| "warning" \| "success" \| "neutral" \| "brand"` | `"neutral"` | Visual tone of the panel. Controls background, default icon, and `role`. |
 | `title` | `string` | — | Bold title text. |
 | `description` | `string` | — | Secondary description text. |
@@ -52,7 +54,7 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 | `actionButton` | `ActionButtonElement` | — | A `Button`, `IconButton`, or `FlexButton` element. The panel injects styling via `cloneElement` (see below). |
 | `showCloseButton` | `boolean` | `true` | Show or hide the dismiss (×) button. |
 | `onClose` | `() => void` | — | Called when the close button is pressed. |
-| `closeButtonAlign` | `"top" \| "center"` | `"top"` | Vertical alignment of the close button. Applies to the `notification` variant only (`announcement` is always centered). |
+| `closeButtonAlign` | `"top" \| "center"` | `"center"` | Vertical alignment of the action/close button group. Applies to the desktop `notification` variant only. |
 | `testID` | `string` | — | Test ID for testing frameworks. |
 
 Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
@@ -65,10 +67,10 @@ type ActionButtonElement = React.ReactElement<
 >;
 ```
 
-The element passed to `actionButton`. The panel overrides a small set of props via `cloneElement` so the button matches the design; everything else (`onPress`, `icon`, `children`, etc.) is forwarded as authored. The injected props depend on `variant`:
+The element passed to `actionButton`. The panel overrides a small set of props via `cloneElement` so the button matches the design; everything else (`onPress`, `icon`, `children`, etc.) is forwarded as authored:
 
-- **`notification`** — `size="xs"`, `variant="tertiary"`, `tone="mono"`. Pass a `Button`.
-- **`announcement`** — `size="xs"`, `variant="primary"`, `background={false}`. Pass a [`FlexButton`](./button.md) so it renders text-only with the designed subtle hover. (`FlexButton` has no `tone`; the Primary palette gives `content.primary` text.)
+- **`FlexButton` / `Button`** — `size="xs"`, `variant="primary"`, `background={false}` (text-only XS action per Figma). Prefer [`FlexButton`](./button.md).
+- **`IconButton`** — `size="xs"` only.
 
 ## Examples
 
@@ -88,17 +90,35 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 
 ### With action button
 
-The panel styles the button to match the design (`size`, `variant`, and `tone`/`background` — see [`ActionButtonElement`](#actionbuttonelement)), so pass a plain `Button`.
+Pass a [`FlexButton`](./button.md) in size XS styling — the panel injects `size="xs"`, `variant="primary"`, and `background={false}`.
 
 ```tsx
 import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
-import { Button } from '@xsolla/xui-button';
+import { FlexButton } from '@xsolla/xui-button';
 
 <NotificationPanel
   type="warning"
   title="Session expiring"
   description="Your session will expire in 5 minutes."
-  actionButton={<Button onPress={() => extendSession()}>Extend session</Button>}
+  actionButton={<FlexButton onPress={() => extendSession()}>Extend session</FlexButton>}
+  onClose={() => dismiss()}
+/>;
+```
+
+### Mobile layout
+
+On narrow viewports, pass `device="mobile"` for the Figma mobile layout: icon column on the left, title and description stacked in the center with the action below them, close button in the right column.
+
+```tsx
+import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
+import { FlexButton } from '@xsolla/xui-button';
+
+<NotificationPanel
+  device="mobile"
+  type="alert"
+  title="Alert notification"
+  description="A mutual NDA is required to begin your partnership with Xsolla"
+  actionButton={<FlexButton onPress={() => openNda()}>Button</FlexButton>}
   onClose={() => dismiss()}
 />;
 ```
@@ -164,7 +184,9 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 />;
 ```
 
-### Center-aligned close button
+### Top-aligned action/close buttons
+
+Use `closeButtonAlign="top"` when the button group should align with the title instead of the default vertical centering.
 
 ```tsx
 import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
@@ -172,7 +194,8 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 <NotificationPanel
   type="success"
   title="Saved"
-  closeButtonAlign="center"
+  description="This is a neutral notification message"
+  closeButtonAlign="top"
   onClose={() => dismiss()}
 />;
 ```
@@ -180,6 +203,6 @@ import { NotificationPanel } from '@xsolla/xui-b2b-notification-panel';
 ## Accessibility
 
 - `role="alert"` for `type="alert"`; `role="status"` for all other types.
-- `aria-label` on the root is `"<type> <variant>"` (e.g. `"warning notification"`, `"alert announcement"`).
-- The close button is an `IconButton` with `aria-label="Close notification"`.
+- `aria-label` on the root is `"<type> <variant> <device>"` (e.g. `"warning notification desktop"`, `"alert announcement mobile"`).
+- The close control is an icon-only [`IconButton`](./button.md) (`variant="tertiary"`, `tone="mono"`, `size="xs"`, `hoverBackground="none"`) with `aria-label="Close notification"`. Uses Box/`onPress` so it works on React Native as well as web.
 - The default type icons are decorative — pass `aria-hidden` on any custom `icon` you supply.

package/native/index.d.mts

@@ -3,6 +3,7 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
 import { ButtonProps, IconButtonProps, FlexButtonProps } from '@xsolla/xui-button';
 
 type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps | FlexButtonProps>;
+type NotificationPanelDevice = "desktop" | "mobile";
 interface NotificationPanelProps extends ThemeOverrideProps {
     /**
      * Layout variant.
@@ -12,6 +13,15 @@ interface NotificationPanelProps extends ThemeOverrideProps {
      *   title/description on one row.
      */
     variant?: "notification" | "announcement";
+    /**
+     * Device layout mode.
+     * - `desktop` (default): horizontal layout with actions on the right.
+     * - `mobile`: Figma mobile layout — `notification` uses a three-column row
+     *   (icon | stacked text + action | close); `announcement` puts icon, title,
+     *   on one row with description below; action and close are grouped on the
+     *   right, top-aligned with the title row.
+     */
+    device?: NotificationPanelDevice;
     /** Visual variant/tone of the notification */
     type?: "alert" | "warning" | "success" | "neutral" | "brand";
     /** Title text (optional) */
@@ -31,10 +41,13 @@ interface NotificationPanelProps extends ThemeOverrideProps {
     showCloseButton?: boolean;
     /** Close button click handler */
     onClose?: () => void;
-    /** Vertical alignment of the close button — "top" (default) or "center" */
+    /**
+     * Vertical alignment of the action/close button group — "center" (default) or
+     * "top". Applies to the desktop `notification` variant only.
+     */
     closeButtonAlign?: "center" | "top";
     testID?: string;
 }
 declare const NotificationPanel: React.FC<NotificationPanelProps>;
 
-export { type ActionButtonElement, NotificationPanel, type NotificationPanelProps };
+export { type ActionButtonElement, NotificationPanel, type NotificationPanelDevice, type NotificationPanelProps };

package/native/index.d.ts

@@ -3,6 +3,7 @@ import { ThemeOverrideProps } from '@xsolla/xui-core';
 import { ButtonProps, IconButtonProps, FlexButtonProps } from '@xsolla/xui-button';
 
 type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps | FlexButtonProps>;
+type NotificationPanelDevice = "desktop" | "mobile";
 interface NotificationPanelProps extends ThemeOverrideProps {
     /**
      * Layout variant.
@@ -12,6 +13,15 @@ interface NotificationPanelProps extends ThemeOverrideProps {
      *   title/description on one row.
      */
     variant?: "notification" | "announcement";
+    /**
+     * Device layout mode.
+     * - `desktop` (default): horizontal layout with actions on the right.
+     * - `mobile`: Figma mobile layout — `notification` uses a three-column row
+     *   (icon | stacked text + action | close); `announcement` puts icon, title,
+     *   on one row with description below; action and close are grouped on the
+     *   right, top-aligned with the title row.
+     */
+    device?: NotificationPanelDevice;
     /** Visual variant/tone of the notification */
     type?: "alert" | "warning" | "success" | "neutral" | "brand";
     /** Title text (optional) */
@@ -31,10 +41,13 @@ interface NotificationPanelProps extends ThemeOverrideProps {
     showCloseButton?: boolean;
     /** Close button click handler */
     onClose?: () => void;
-    /** Vertical alignment of the close button — "top" (default) or "center" */
+    /**
+     * Vertical alignment of the action/close button group — "center" (default) or
+     * "top". Applies to the desktop `notification` variant only.
+     */
     closeButtonAlign?: "center" | "top";
     testID?: string;
 }
 declare const NotificationPanel: React.FC<NotificationPanelProps>;
 
-export { type ActionButtonElement, NotificationPanel, type NotificationPanelProps };
+export { type ActionButtonElement, NotificationPanel, type NotificationPanelDevice, type NotificationPanelProps };

package/native/index.js

@@ -209,6 +209,7 @@ var import_xui_icons_base = require("@xsolla/xui-icons-base");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var NotificationPanel = ({
   variant = "notification",
+  device = "desktop",
   type = "neutral",
   title,
   description,
@@ -217,13 +218,13 @@ var NotificationPanel = ({
   actionButton,
   showCloseButton = true,
   onClose,
-  closeButtonAlign = "top",
+  closeButtonAlign = "center",
   testID,
   themeMode,
   themeProductContext
 }) => {
   const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
-  const config = theme.sizing.notificationPanel();
+  const config = theme.sizing.notificationPanel(device);
   const typeConfig = {
     alert: {
       panelBg: theme.colors.overlay.alert,
@@ -270,16 +271,120 @@ var NotificationPanel = ({
   const IconComponent = currentConfig.IconComponent;
   const ariaProps = {
     role: type === "alert" ? "alert" : "status",
-    "aria-label": `${type} ${variant}`
+    "aria-label": `${type} ${variant} ${device}`
+  };
+  const renderCloseButton = (iconSize) => showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_xui_button.IconButton,
+    {
+      variant: "tertiary",
+      tone: "mono",
+      size: "xs",
+      onPress: onClose,
+      "aria-label": "Close notification",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Remove, { size: iconSize }),
+      hoverBackground: "none"
+    }
+  ) : null;
+  const renderActionButton = () => {
+    if (!(0, import_react.isValidElement)(actionButton)) return null;
+    const element = actionButton;
+    const isIconButton = element.type.displayName === "IconButton";
+    return (0, import_react.cloneElement)(
+      element,
+      isIconButton ? { size: "xs" } : { size: "xs", variant: "primary", background: false }
+    );
   };
   if (variant === "announcement") {
+    const isMobileAnnouncement = device === "mobile";
+    if (isMobileAnnouncement) {
+      const descriptionIndent = showIcon ? config.announcementIconSize + config.announcementContentGap : 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        Box,
+        {
+          backgroundColor: currentConfig.announcementBg,
+          flexDirection: "row",
+          alignItems: "stretch",
+          padding: config.announcementPadding,
+          gap: config.announcementGap,
+          overflow: "hidden",
+          testID,
+          style: {
+            backdropFilter: `blur(${config.announcementBlurRadius}px)`
+          },
+          ...ariaProps,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              Box,
+              {
+                flex: 1,
+                minWidth: 0,
+                flexDirection: "column",
+                gap: config.textGap,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                    Box,
+                    {
+                      flexDirection: "row",
+                      alignItems: "flex-start",
+                      gap: config.announcementContentGap,
+                      children: [
+                        showIcon && (icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          IconComponent,
+                          {
+                            size: config.announcementIconSize,
+                            color: currentConfig.iconColor,
+                            variant: "solid"
+                          }
+                        )),
+                        title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { flex: 1, minWidth: 0, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_xui_typography.Typography,
+                          {
+                            variant: "bodyXsAccent",
+                            color: theme.colors.content.primary,
+                            noWrap: true,
+                            children: title
+                          }
+                        ) })
+                      ]
+                    }
+                  ),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { paddingLeft: descriptionIndent, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_xui_typography.Typography,
+                    {
+                      variant: "bodyXs",
+                      color: theme.colors.content.secondary,
+                      noWrap: true,
+                      children: description
+                    }
+                  ) })
+                ]
+              }
+            ),
+            (actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              Box,
+              {
+                flexShrink: 0,
+                alignSelf: "flex-start",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: config.announcementButtonsGap,
+                children: [
+                  renderActionButton(),
+                  renderCloseButton(config.announcementCloseIconSize)
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       Box,
       {
         backgroundColor: currentConfig.announcementBg,
         flexDirection: "row",
         alignItems: "center",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         padding: config.announcementPadding,
         gap: config.announcementGap,
         overflow: "hidden",
@@ -307,15 +412,37 @@ var NotificationPanel = ({
                     variant: "solid"
                   }
                 )),
-                title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_xui_typography.Typography,
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+                  Box,
                   {
-                    variant: "bodyXsAccent",
-                    color: theme.colors.content.primary,
-                    children: title
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: config.announcementContentGap,
+                    children: [
+                      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_xui_typography.Typography,
+                        {
+                          variant: "bodyXsAccent",
+                          color: theme.colors.content.primary,
+                          noWrap: true,
+                          children: title
+                        }
+                      ),
+                      description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_xui_typography.Typography,
+                        {
+                          variant: "bodyXs",
+                          color: theme.colors.content.secondary,
+                          noWrap: true,
+                          children: description
+                        }
+                      )
+                    ]
                   }
-                ),
-                description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_typography.Typography, { variant: "bodyXs", color: theme.colors.content.secondary, children: description })
+                )
               ]
             }
           ),
@@ -327,29 +454,93 @@ var NotificationPanel = ({
               alignItems: "center",
               gap: config.announcementButtonsGap,
               children: [
-                (0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
-                  size: "xs",
-                  // Announcement uses a text-only FlexButton (Primary palette →
-                  // content.primary text, no fill), per the Figma "Flex Button"
-                  // node. hoverBackground is left at its default so the subtle
-                  // mono hover overlay from the design is preserved.
-                  variant: "primary",
-                  background: false
-                }),
-                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  import_xui_button.IconButton,
-                  {
-                    variant: "tertiary",
-                    tone: "mono",
-                    size: "xs",
-                    onPress: onClose,
-                    "aria-label": "Close notification",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Remove, { size: config.announcementCloseIconSize }),
-                    hoverBackground: "none"
-                  }
-                )
+                renderActionButton(),
+                renderCloseButton(config.announcementCloseIconSize)
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (device === "mobile") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      Box,
+      {
+        backgroundColor: currentConfig.panelBg,
+        borderRadius: config.borderRadius,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        overflow: "hidden",
+        testID,
+        ...ariaProps,
+        children: [
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Box,
+            {
+              alignSelf: "stretch",
+              paddingTop: config.mobileIconColumnPaddingVertical,
+              paddingBottom: config.mobileIconColumnPaddingVertical,
+              paddingLeft: config.mobileIconColumnPaddingLeft,
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+              children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                IconComponent,
+                {
+                  size: config.mobileIconSize,
+                  color: currentConfig.iconColor,
+                  variant: "solid"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            Box,
+            {
+              flex: 1,
+              minWidth: 0,
+              paddingHorizontal: config.mobileBodyPaddingHorizontal,
+              paddingVertical: config.mobileBodyPaddingVertical,
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "center",
+              gap: config.mobileBodyContentGap,
+              children: [
+                (title || description) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { alignSelf: "stretch", gap: config.textGap, children: [
+                  title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_xui_typography.Typography,
+                    {
+                      variant: "bodySmAccent",
+                      color: theme.colors.content.primary,
+                      children: title
+                    }
+                  ),
+                  description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_xui_typography.Typography,
+                    {
+                      variant: "bodyXs",
+                      color: theme.colors.content.tertiary,
+                      children: description
+                    }
+                  )
+                ] }),
+                actionButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { marginLeft: config.mobileNotificationActionButtonOffsetLeft, children: renderActionButton() })
               ]
             }
+          ),
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            Box,
+            {
+              alignSelf: "stretch",
+              flexDirection: "row",
+              paddingTop: config.mobileCloseColumnPaddingVertical,
+              paddingBottom: config.mobileCloseColumnPaddingVertical,
+              paddingRight: config.mobileCloseColumnPaddingRight,
+              alignItems: "flex-start",
+              justifyContent: "flex-end",
+              children: renderCloseButton(config.notificationCloseIconSize)
+            }
           )
         ]
       }
@@ -412,29 +603,13 @@ var NotificationPanel = ({
                 Box,
                 {
                   flexDirection: "row",
-                  alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
-                  alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
-                  justifyContent: "flex-start",
-                  paddingVertical: closeButtonAlign === "top" ? 4 : 0,
+                  alignSelf: closeButtonAlign === "top" ? "flex-start" : void 0,
+                  alignItems: "center",
+                  flexShrink: 0,
                   gap: config.buttonsGap,
                   children: [
-                    (0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
-                      size: "xs",
-                      variant: "tertiary",
-                      tone: "mono"
-                    }),
-                    showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      import_xui_button.IconButton,
-                      {
-                        variant: "tertiary",
-                        tone: "mono",
-                        size: "xs",
-                        onPress: onClose,
-                        "aria-label": "Close notification",
-                        icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Remove, { size: 18 }),
-                        hoverBackground: "none"
-                      }
-                    )
+                    renderActionButton(),
+                    renderCloseButton(config.notificationCloseIconSize)
                   ]
                 }
               )