@pantheon-systems/pds-toolkit-react 1.0.0-dev.25 → 1.0.0-dev.250

package/_dist/components/navigation/DashboardNav/DashboardNav.d.ts

@@ -0,0 +1,35 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { DashboardNavItemProps } from './DashboardNavItem';
+import './dashboard-nav.css';
+/**
+ * Prop types for DashboardNav
+ */
+export interface DashboardNavProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: DashboardNavItemProps[];
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DashboardNav UI component
+ */
+export declare const DashboardNav: ({ ariaLabel, labels, menuItems, mobileMenuSelectTextFallback, className, ...props }: DashboardNavProps) => React.JSX.Element;

package/_dist/components/navigation/DashboardNav/DashboardNavItem.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './dashboard-nav.css';
+export type DashboardNavItemProps = NavigationItem & {
+    /**
+     * Icon to display next to the link content.
+     */
+    icon?: PDSIcon;
+    /**
+     * Flag indicating whether the sidebar is expanded.
+     */
+    isSidebarExpanded: boolean;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+};
+/**
+ * DashboardNavItem UI component
+ */
+export declare const DashboardNavItem: ({ icon, isActive, isSidebarExpanded, labels, linkContent, links, }: DashboardNavItemProps) => React.JSX.Element;

package/_dist/components/navigation/DashboardNav/dashboard-nav-utilities.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { NavigationItem } from '@components/navigation/navigation-types';
+export declare const processDashboardNavLinkContent: (baseClass: string, linkContent: JSX.Element | string, links?: NavigationItem[], icon?: PDSIcon) => JSX.Element;

package/_dist/components/navigation/DashboardSearch/DashboardSearch.d.ts

@@ -0,0 +1,70 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SiteOption } from './SiteOptionDisplay';
+import './dashboard-search.css';
+type LabelStrings = {
+    clearButton?: string;
+    inputInstructions?: string;
+    openSearchButton?: string;
+};
+/**
+ * Prop types for DashboardSearch
+ */
+export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the search input disabled?
+     */
+    disabled?: boolean;
+    /**
+     * ID for the component.
+     */
+    id?: string;
+    /**
+     * Is the site data still loading?
+     */
+    isLoading?: boolean;
+    /**
+     * Label for the input. Will be rendered as an aria-label.
+     */
+    label?: string;
+    /**
+     * Translation strings for various labels or other visually-hidden text.
+     */
+    labelStrings?: LabelStrings;
+    /**
+     * Text to display when site options are still loading.
+     */
+    loadingText?: string;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+    /**
+     * Optional callback function when the search input field is focused.
+     */
+    onFocus?: () => void;
+    /**
+     * Callback when an option is selected. Returns the selected option object.
+     */
+    onOptionSelect?: (option: SiteOption) => void;
+    /**
+     * Optional placeholder text to display when the input field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Array of sites to search through.
+     */
+    siteList?: SiteOption[];
+    /**
+     * Offset for the starting right position for the search input in rems.
+     */
+    horizontalOffset?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DashboardSearch UI component
+ */
+export declare const DashboardSearch: ({ disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, horizontalOffset, className, ...props }: DashboardSearchProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/DashboardSearch/SiteOptionDisplay.d.ts

@@ -0,0 +1,39 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SiteStatus, SiteType } from '@libs/types/custom-types';
+export type SiteOption = {
+    /**
+     * ID of the site.
+     */
+    id: string;
+    /**
+     * Machine name of the site.
+     */
+    machineName?: string;
+    /**
+     * Name of the site.
+     */
+    name: string;
+    /**
+     * Site active status.
+     */
+    status?: SiteStatus;
+    /**
+     * Site type.
+     */
+    type?: SiteType;
+};
+/** Site option display props. */
+export interface SiteOptionDisplayProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Site option to display.
+     */
+    option: SiteOption;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * UI component to display site options.
+ */
+export declare const SiteOptionDisplay: ({ option, className, ...props }: SiteOptionDisplayProps) => React.JSX.Element;

package/_dist/components/navigation/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './dropdown-menu.css';
+/**
+ * Prop types for DropdownMenu
+ */
+export interface DropdownMenuProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Heading text. If a string is passed, it will be rendered as a heading. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | JSX.Element;
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    selectTextFallback: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * DropdownMenu UI component
+ */
+export declare const DropdownMenu: ({ headingText, menuItems, selectTextFallback, className, ...props }: DropdownMenuProps) => React.JSX.Element;

package/_dist/components/navigation/NavMenu/NavMenu.d.ts

@@ -0,0 +1,43 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './nav-menu.css';
+/**
+ * Prop types for MenuItem
+ */
+export interface MenuItem {
+    id?: string;
+    label: string;
+    links?: MenuItem[];
+    linkContent?: React.ReactNode;
+    isActive?: boolean;
+    isSeparator?: boolean;
+}
+/**
+ * Prop types for NavMenu
+ */
+interface NavMenuProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for `nav` element.
+     */
+    ariaLabel: string;
+    /**
+     * Color scheme.
+     */
+    colorType?: 'default' | 'reverse';
+    /**
+     * Menu Items.
+     */
+    menuItems?: MenuItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * NavMenu UI component
+ */
+export declare const NavMenu: ({ ariaLabel, colorType, menuItems, mobileMenuMaxWidth, className, ...props }: NavMenuProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/NavMenu/NavMenuDropdown.d.ts

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { MenuItem } from './NavMenu';
+/**
+ * Prop types for NavMenuDropdown
+ */
+interface NavMenuDropdownProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Dropdown items.
+     */
+    items?: MenuItem[];
+    /**
+     * Dropdown label.
+     */
+    label?: string;
+    /**
+     * Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+}
+/**
+ * NavMenuDropdown UI component
+ */
+export declare const NavMenuDropdown: ({ items, label, mobileMenuMaxWidth, }: NavMenuDropdownProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/Navbar/Navbar.d.ts

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PantheonLogoDisplayType } from '@components/PantheonLogo/PantheonLogo';
+import { ContainerWidth } from '@libs/types/custom-types';
+import './navbar.css';
+/**
+ * Prop types for Navbar
+ */
+export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
+    /**
+     * Navbar content.
+     */
+    children?: ReactNode;
+    /**
+     * Color type of the navbar.
+     */
+    colorType?: 'default' | 'reverse' | 'reverse-transparent' | 'transparent';
+    /**
+     * PDS container width.
+     */
+    containerWidth?: ContainerWidth;
+    /**
+     * Hide the border at the bottom of the navbar.
+     */
+    hideBorder?: boolean;
+    /**
+     * Hide the logo if it will be provided elsewhere in the layout. The logo will still be rendered in the mobile view.
+     */
+    hideLogo?: boolean;
+    /**
+     * How should the Pantheon logo be displayed.
+     */
+    logoDisplayType?: PantheonLogoDisplayType;
+    /**
+     * Where should the logo link to? A fully-formed link element.
+     */
+    logoLinkContent?: ReactNode;
+    /**
+     * Logo image source. If provided, the Pantheon logo will not be rendered.
+     */
+    logoSrc?: string;
+    /**
+     * Accepts a fully-formed link or a string (if a static site name is desired). Only necessary if logoDisplayType is `sub-brand`.
+     */
+    logoSubBrand?: ReactNode | string;
+    /**
+     * Translation strings for accessibility.
+     */
+    translationStrings?: {
+        closeMobileNav: string;
+        openMobileNav: string;
+    };
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Navbar UI component
+ */
+export declare const Navbar: ({ children, colorType, containerWidth, hideBorder, hideLogo, logoDisplayType, logoLinkContent, logoSrc, logoSubBrand, translationStrings, className, ...props }: NavbarProps) => React.JSX.Element;

package/_dist/components/navigation/SideNav/SideNav.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './side-nav.css';
+/**
+ * Prop types for SideNav
+ */
+export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
+     */
+    hasMobileMenu?: boolean;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | JSX.Element;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SideNav UI component
+ */
+export declare const SideNav: ({ ariaLabel, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: SideNavProps) => React.JSX.Element;

package/_dist/components/navigation/SideNavCompact/SideNavCompact.d.ts

@@ -0,0 +1,47 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './side-nav-compact.css';
+/**
+ * Prop types for SideNavCompact
+ */
+export interface SideNavCompactProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
+     */
+    hasMobileMenu?: boolean;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | JSX.Element;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     *  Mobile menu will be enabled when viewport is at or below this number in pixels.
+     */
+    mobileMenuMaxWidth?: number;
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SideNavCompact UI component
+ */
+export declare const SideNavCompact: ({ ariaLabel, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: SideNavCompactProps) => React.JSX.Element;

package/_dist/components/navigation/TabMenu/TabMenu.d.ts

@@ -0,0 +1,43 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { TabMenuDropdownProps } from './TabMenuDropdown';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './tab-menu.css';
+type DropdownSettings = Omit<TabMenuDropdownProps, 'links'>;
+export type TabMenuItemProps = NavigationItem & {
+    /**
+     * Settings for dropdown menu. Leave null if no dropdown is needed.
+     */
+    dropdownSettings?: DropdownSettings;
+    /**
+     * Icon to display next to the link content.
+     */
+    icon?: PDSIcon;
+    /**
+     * Promote active child link to the top level.
+     * If true, the top-level menu will display the active child link instead of the parent link. If using this approach, it is recommended to also include the parent link as the first child link.
+     */
+    promoteActiveChildLink?: boolean;
+};
+/**
+ * Prop types for TabMenu.
+ */
+export interface TabMenuProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Menu items to render.
+     */
+    menuItems?: TabMenuItemProps[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * TabMenu UI component.
+ */
+export declare const TabMenu: ({ ariaLabel, menuItems, className, ...props }: TabMenuProps) => React.JSX.Element;
+export {};

package/_dist/components/navigation/TabMenu/TabMenuDropdown.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './tab-menu.css';
+export type TabMenuDropdownProps = {
+    /**
+     * Button label for the dropdown trigger.
+     */
+    buttonLabel?: string;
+    /**
+     * Label for the dropdown filter. Leave null if no filter is needed.
+     */
+    filterLabel?: string;
+    /**
+     * Placeholder for the dropdown filter.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Links to display in the dropdown.
+     */
+    links?: NavigationItem[];
+    /**
+     * Minimum number of items to enable filtering.
+     */
+    minFilterItems?: number;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+};
+/**
+ * TabMenuDropdown UI component
+ */
+export declare const TabMenuDropdown: ({ buttonLabel, filterLabel, filterPlaceholder, links, minFilterItems, noResultsText, }: TabMenuDropdownProps) => React.JSX.Element;

package/_dist/components/navigation/UserMenu/UserMenu.d.ts

@@ -0,0 +1,69 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './user-menu.css';
+/**
+ * Prop types for UserMenuItem
+ */
+export type UserMenuItem = {
+    /**
+     * Use if the menu item should perform an action. This should be a function to be called when the menu item is clicked. Do not use if `linkContent` is provided.
+     */
+    callback?: () => void;
+    /**
+     * Is the menu item disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Icon name for the menu item.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Unique ID for the menu item. Optional.
+     */
+    id?: string;
+    /**
+     * The text to be displayed as the menu item label if a `callback` is provided.
+     */
+    label?: string;
+    /**
+     * Use if the menu item should navigate to another location. This should be a fully-formed link using the router of your choice. Should be used in place of `callback` and `label`.
+     */
+    linkContent?: ReactNode;
+};
+/**
+ * Prop types for UserMenu
+ */
+export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Aria label for the user menu.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of menu items.
+     */
+    menuItems?: UserMenuItem[];
+    /**
+     * User email address.
+     */
+    userEmail?: string;
+    /**
+     * Image source for the user avatar.
+     */
+    userImageSrc?: string;
+    /**
+     * User display name.
+     */
+    userName?: string;
+    /**
+     * If true, the workspace selector will be styled and rendered to work with the mobile version of the navbar menu. Defaults to true.
+     */
+    withinNavbar?: boolean;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * UserMenu UI component
+ */
+export declare const UserMenu: ({ ariaLabel, menuItems, userEmail, userImageSrc, userName, withinNavbar, className, ...props }: UserMenuProps) => React.JSX.Element;

package/_dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts

@@ -0,0 +1,89 @@
+import React, { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import './workspace-selector.css';
+declare const tierLabels: {
+    silver: string;
+    gold: string;
+    platinum: string;
+    diamond: string;
+};
+export type PlanTiers = keyof typeof tierLabels;
+export type WorkspaceSelectorItem = {
+    /**
+     * Name of the workspace.
+     */
+    displayName?: string;
+    /**
+     * Image src for the workspace.
+     */
+    imageSrc?: string;
+    /**
+     * Is this the currently selected workspace?
+     */
+    isActive?: boolean;
+    /**
+     * This user does not have access to this workspace.
+     */
+    isUnprivileged?: boolean;
+    /**
+     * Account plan tier.
+     */
+    planTier?: PlanTiers;
+    /**
+     * Id of the workspace.
+     */
+    workspaceId?: string;
+    /**
+     * Link to the workspace. A link element via the router of your choice.
+     */
+    workspaceLink?: ReactElement;
+};
+/**
+ * Prop types for WorkspaceSelector
+ */
+export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Aria label for the workspace selector menu.
+     */
+    ariaLabel?: string;
+    /**
+     * Link to create a new workspace. A link element using the router of your choice.
+     */
+    createWorkspaceLink?: ReactNode;
+    /**
+     * Placeholder text for the filter input.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Label for the filter input.
+     */
+    filterLabel?: string;
+    /**
+     * Heading for the workspace dropdown menu.
+     */
+    menuHeading?: string;
+    /**
+     * Minimum number of items to enable filtering.
+     */
+    minFilterItems?: number;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+    /**
+     * Is this component located in the top nav? Only applies when using the Navbar component from this toolkit. Defaults to true per design.
+     */
+    withinNavbar?: boolean;
+    /**
+     * List of all workspaces for a user.
+     */
+    workspaceList?: WorkspaceSelectorItem[];
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * WorkspaceSelector UI component
+ */
+export declare const WorkspaceSelector: ({ ariaLabel, createWorkspaceLink, filterPlaceholder, filterLabel, menuHeading, minFilterItems, noResultsText, withinNavbar, workspaceList, className, ...props }: WorkspaceSelectorProps) => React.JSX.Element;
+export {};