@pantheon-systems/pds-toolkit-react 2.0.0-alpha.36 → 2.0.0-alpha.37

package/dist/index.source.d.ts

@@ -68,8 +68,6 @@ export * from './components/navigation/UserMenu/UserMenu';
 export * from './components/navigation/WorkspaceSelector/WorkspaceSelector';
 export * from './components/notifications/Banner/Banner';
 export * from './components/notifications/InlineMessage/InlineMessage';
-export * from './components/notifications/NotificationHubIcon/NotificationHubIcon';
-export * from './components/notifications/NotificationsPopover/NotificationsPopover';
 export * from './components/notifications/SectionMessage/SectionMessage';
 export * from './components/notifications/Toaster/Toast';
 export * from './components/notifications/Toaster/Toaster';

package/dist/libs/components/NavAccordion/NavAccordion.d.ts

@@ -21,7 +21,7 @@ interface NavAccordionProps {
 /**
  * Internal accordion component for the mobile navbar panel.
  * Renders a toggle button with a rotating chevron and expandable content.
- * Used by MenuButton, UserMenu, WorkspaceSelector, and NotificationsPopover.
+ * Used by MenuButton, UserMenu, and WorkspaceSelector.
  */
 export declare const NavAccordion: ({ children, className, disabled, label, }: NavAccordionProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/svg/userSolid.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" focusable="false" role="img">
+  <path d="M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z"/>
+</svg>

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "2.0.0-alpha.36",
+	"version": "2.0.0-alpha.37",
 	"description": "PDS toolkit built using the React framework",
 	"publishConfig": {
 		"access": "public",
@@ -178,7 +178,7 @@
 		"@dnd-kit/utilities": "^3.2.2",
 		"@floating-ui/react": "^0.24.3",
 		"@floating-ui/react-dom": "~1.3.0",
-		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.51",
+		"@pantheon-systems/pds-design-tokens": "^2.0.0-alpha.55",
 		"@reactuses/core": "^5.0.15",
 		"date-fns": "^4.1.0",
 		"downshift": "^9.3.2",

package/dist/components/CodeBlock/themes/pdsLight.d.ts

@@ -1,2 +0,0 @@
-import type { PrismTheme } from 'prism-react-renderer';
-export declare const pdsLight: PrismTheme;

package/dist/components/notifications/NotificationHubIcon/NotificationHubIcon.d.ts

@@ -1,38 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import './notification-hub-icon.css';
-/**
- * Notification categories
- */
-export type NotificationCategory = 'billing' | 'code-pipeline' | 'deployment' | 'platform';
-/**
- * Notification type levels
- */
-export type NotificationType = 'critical' | 'info' | 'warning';
-/**
- * Prop types for NotificationHubIcon
- */
-export interface NotificationHubIconProps extends ComponentPropsWithoutRef<'span'> {
-    /**
-     * Category of the notification (determines icon)
-     */
-    category: NotificationCategory;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Display variant for the icon
-     * @default 'inbox'
-     */
-    displayType?: 'inbox' | 'popover';
-    /**
-     * Type of the notification (determines color)
-     */
-    type?: NotificationType;
-}
-/**
- * NotificationHubIcon UI component
- *
- * Icon representing a notification's category with color based on type.
- */
-export declare const NotificationHubIcon: ({ category, className, displayType, type, ...props }: NotificationHubIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/notifications/NotificationsPopover/NotificationsPopover.d.ts

@@ -1,113 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-import { NotificationCategory, NotificationType } from '../../notifications/NotificationHubIcon/NotificationHubIcon';
-import './notifications-popover.css';
-/**
- * Notification item type
- */
-export type NotificationItem = {
-    /**
-     * Category of the notification (determines icon)
-     */
-    category: NotificationCategory;
-    /**
-     * Unique identifier for the notification
-     */
-    id: string;
-    /**
-     * Whether the notification has been read
-     */
-    read: boolean;
-    /**
-     * Optional site name associated with the notification
-     */
-    siteName?: string;
-    /**
-     * Timestamp of the notification (should be formatted string)
-     */
-    timestamp: string;
-    /**
-     * Title/message of the notification
-     */
-    title: string;
-    /**
-     * Type of the notification (determines color)
-     */
-    type: NotificationType;
-};
-/**
- * Prop types for NotificationsPopover
- */
-export interface NotificationsPopoverProps extends ComponentPropsWithoutRef<'span'> {
-    /**
-     * Aria label for the trigger button
-     * @default 'Notifications'
-     */
-    ariaLabel?: string;
-    /**
-     * Auto-close popover when a notification is clicked
-     * @default true
-     */
-    autoCloseOnClick?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
-    /**
-     * Text to display when there are no notifications
-     * @default 'No notifications'
-     */
-    emptyText?: string;
-    /**
-     * Text to display while loading
-     * @default 'Loading notifications...'
-     */
-    loadingText?: string;
-    /**
-     * Maximum number of notifications to display in the list
-     * @default 10
-     */
-    maxVisibleItems?: number;
-    /**
-     * Heading text for the popover panel
-     * @default 'Notifications'
-     */
-    menuHeading?: string;
-    /**
-     * Array of notification items to display
-     */
-    notifications?: NotificationItem[];
-    /**
-     * Callback function when a notification is clicked
-     */
-    onNotificationClick?: (notification: NotificationItem) => void;
-    /**
-     * Callback function when the "View All" button is clicked
-     */
-    onViewAllClick?: () => void;
-    /**
-     * Whether the notifications are currently loading
-     */
-    showLoading?: boolean;
-    /**
-     * Can be used to show a total number of unread notifications across all notifications (not just visible ones)
-     * Leave undefined to calculate from the notifications array
-     * Will use the greater of this value or the calculated count from the notifications array
-     */
-    unreadCount?: number;
-    /**
-     * Label for unread status (screen reader only)
-     * @default 'unread'
-     */
-    unreadLabel?: string;
-    /**
-     * Text for the "View All" button
-     * @default 'View all notifications'
-     */
-    viewAllText?: string;
-}
-/**
- * NotificationsPopover UI component
- *
- * Bell icon trigger that opens a popover showing recent notifications.
- */
-export declare const NotificationsPopover: ({ ariaLabel, autoCloseOnClick, className, emptyText, loadingText, maxVisibleItems, menuHeading, notifications, onNotificationClick, onViewAllClick, showLoading, unreadCount, unreadLabel, viewAllText, ...props }: NotificationsPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-notification-hub-icon.css

@@ -1 +0,0 @@
-.pds-notification-hub-icon{align-items:center;color:var(--fg-color);display:inline-flex;flex-shrink:0;justify-content:center}.pds-notification-hub-icon,.pds-notification-hub-icon--info{--bg-color:var(--pds-color-surface-default-secondary);--border-color:var(--pds-color-border-default);--fg-color:var(--pds-color-foreground-default-secondary)}.pds-notification-hub-icon--warning{--bg-color:var(--pds-color-status-warning-background);--border-color:var(--pds-color-status-warning-border);--fg-color:var(--pds-color-status-warning-foreground)}.pds-notification-hub-icon--critical{--bg-color:var(--pds-color-status-critical-background);--border-color:var(--pds-color-status-critical-border);--fg-color:var(--pds-color-status-critical-foreground)}.pds-notification-hub-icon--popover{background-color:var(--bg-color);border:var(--pds-border-width-default) solid var(--border-color);border-radius:50%;height:var(--pds-spacing-3xl);width:var(--pds-spacing-3xl)}.pds-notification-hub-icon--popover .pds-icon--codeBranch{padding-inline-start:.125rem}

package/dist/css/component-css/pds-notifications-popover.css

@@ -1,13 +0,0 @@
-.pds-notifications-popover{--side-padding:var(--pds-spacing-xl);display:inline-block;font-family:var(--pds-typography-ff-default);position:relative}.pds-notifications-popover__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-button);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;padding:var(--pds-spacing-xs);position:relative}.pds-notifications-popover__trigger:hover{background-color:var(--pds-color-icon-button-standard-background-active)}.pds-notifications-popover__trigger:focus-visible{border-radius:var(--pds-border-radius-container);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px;transition:var(--pds-animation-transition-focus)}.pds-notifications-popover__trigger[aria-expanded=true]{background-color:var(--pds-color-icon-button-standard-background-active)}.pds-notifications-popover__badge{background-color:var(--pds-color-status-info-foreground);border:1px solid var(--pds-color-surface-default-secondary);border-radius:50%;height:.5625rem;position:absolute;right:6px;top:6px;width:.5625rem}.pds-notifications-popover__panel{background-color:var(--pds-color-dropdown-background);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);width:440px}.pds-notifications-popover__panel:focus{outline:none}.pds-notifications-popover__header{align-items:center;border-block-end:1px solid var(--pds-color-border-default);column-gap:var(--pds-spacing-xl);display:flex;justify-content:space-between;padding-block:var(--pds-spacing-m) var(--pds-spacing-s);padding-inline:var(--side-padding)}.pds-notifications-popover__heading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s)}.pds-notifications-popover__header-actions{align-items:center;column-gap:var(--pds-spacing-s);display:flex;position:relative}.pds-notifications-popover__unread-indicator{background-color:var(--pds-color-status-info-foreground);border-radius:50%;display:block;flex-shrink:0;height:var(--pds-spacing-xs);width:var(--pds-spacing-xs)}.pds-notifications-popover__list{display:flex;flex-direction:column;list-style:none;margin:0;max-height:27rem;overflow-y:auto;padding:0}.pds-notifications-popover__item:not(:first-child){border-top:1px solid var(--pds-color-border-default)}.pds-notifications-popover__item-button{align-items:center;background-color:transparent;border:none;box-sizing:border-box;color:var(--pds-color-dropdown-foreground);column-gap:var(--pds-spacing-l);cursor:pointer;display:flex;font-family:inherit;padding-block:var(--pds-spacing-m);padding-inline:var(--side-padding);position:relative;text-align:left;transition:background-color .2s ease;width:100%}button.pds-notifications-popover__item-button:hover{background-color:var(--pds-color-surface-default-secondary)!important}button.pds-notifications-popover__item-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-notifications-popover__item-icon{flex-shrink:0}.pds-notifications-popover__item-content{align-items:flex-start;display:flex;flex-direction:column;padding-inline-end:calc(var(--side-padding)*2);row-gap:var(--pds-spacing-2xs)}.pds-notifications-popover__item-title{font-size:var(--pds-typography-size-s)}.pds-notifications-popover__item-details,.pds-notifications-popover__item-title{font-weight:var(--pds-typography-fw-medium);line-height:var(--pds-typography-lh-s)}.pds-notifications-popover__item-details{color:var(--pds-color-foreground-default);display:flex;font-size:var(--pds-typography-size-xs);gap:var(--pds-spacing-2xs)}.pds-notifications-popover__item-timestamp{color:var(--pds-color-foreground-default-secondary)}.pds-notifications-popover__item-dot{background-color:var(--pds-color-status-info-foreground);border-radius:50%;flex-shrink:0;height:var(--pds-spacing-xs);position:absolute;right:var(--side-padding);width:var(--pds-spacing-xs)}.pds-notifications-popover__empty,.pds-notifications-popover__loading{font-size:var(--pds-typography-size-m);padding-block:var(--pds-spacing-m);padding-inline:var(--side-padding)}.pds-notifications-popover__mobile-footer{border-block-start:1px solid var(--pds-color-border-default);display:none;padding-block:var(--pds-spacing-m);padding-inline:var(--side-padding)}.pds-notifications-popover__toggle-left{align-items:center;column-gap:var(--pds-spacing-m);display:flex;padding-inline-start:.1875rem}[data-pds-mobile] .pds-navbar__mobile .pds-notifications-popover__toggle-left{padding-inline-start:0}.pds-notifications-popover__toggle-icon{align-items:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;position:relative}.pds-notifications-popover__toggle-icon .pds-notifications-popover__badge{position:absolute;right:-2px;top:-2px}.pds-notifications-popover .pds-nav-accordion{display:none}[data-pds-mobile]
-	.pds-navbar__mobile
-	.pds-notifications-popover
-	.pds-nav-accordion{display:block}[data-pds-mobile] .pds-navbar__mobile .pds-notifications-popover__trigger{display:none}[data-pds-mobile] .pds-navbar__mobile .pds-notifications-popover{background-color:var(--pds-color-surface-default);border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;position:relative;width:100vw}[data-pds-mobile]
-	.pds-navbar__mobile
-	.pds-notifications-popover
-	.pds-notifications-popover__header{display:none}[data-pds-mobile]
-	.pds-navbar__mobile
-	.pds-notifications-popover
-	.pds-notifications-popover__mobile-footer{display:block}[data-pds-mobile]
-	.pds-navbar__mobile
-	.pds-notifications-popover
-	.pds-notifications-popover__list{max-height:unset}