@pantheon-systems/pds-toolkit-react 1.0.0-dev.98 → 1.0.0-dev.9998

package/_dist/components/loading-indicators/Skeleton/Skeleton.d.ts

@@ -0,0 +1,62 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SpacingScaleOptions, TypeScaleOptions } from '@libs/types/custom-types';
+import './skeleton.css';
+/**
+ * Prop types for Skeleton
+ */
+export interface SkeletonProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Skeleton color scheme.
+     */
+    colorType?: 'regular' | 'bold';
+    /**
+     * Is the skeleton animated? This should almost always be true.
+     * If false, the skeleton will not animate and will be a static placeholder.
+     */
+    isAnimated?: boolean;
+    /**
+     * The shape of the skeleton.
+     */
+    shape?: 'circular' | 'rectangular' | 'rounded' | 'text-block' | 'code-block' | 'code-block-prefix';
+    /**
+     * The size of the skeleton — height and width. These values can either be set with PDS spacing scale options or as a number in rems.
+     *
+     * If `shape` = `circular`, the `height` value will be used to set the `height` and `width`.
+     *
+     * If `shape` = `text-block`, `code-block`, or `code-block-prefix`, only the `width` value will be used. The overall height will be determined by the `textLineCount` and `textSize` props.
+     */
+    size?: {
+        height?: SpacingScaleOptions | number;
+        width?: SpacingScaleOptions | number;
+    };
+    /**
+     * Is the text justified?
+     * If true, the block will span the prescribed width.
+     * If false, and there are multiple lines of text, the widths will vary.
+     *
+     * This is only used when the shape is 'text-block'. Code blocks will have specific formatting.
+     */
+    textIsJustified?: boolean;
+    /**
+     * The number of lines for text skeletons.
+     * Value should be between 1 and 5 for text-block shapes.
+     * Value should be between 1 and 15 for code-block and code-block-prefix shapes.
+     *
+     * This is only used when the shape is `text-block`, `code-block`, or `code-block-prefix`.
+     */
+    textLineCount?: number;
+    /**
+     * The font-size of the text skeleton.
+     *
+     * This is only used when the shape is `text-block`, `code-block`, or `code-block-prefix`.
+     */
+    textSize?: TypeScaleOptions;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Skeleton UI component
+ */
+export declare const Skeleton: ({ colorType, isAnimated, shape, size, textIsJustified, textLineCount, textSize, className, ...props }: SkeletonProps) => React.JSX.Element;

package/_dist/components/loading-indicators/Spinner/Spinner.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './spinner.css';
+export interface SpinnerProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Spinner color
+     */
+    colorType?: 'full-color' | 'monochromatic' | 'monochromatic-reverse';
+    /**
+     * Should the spinner be an inline element? If true, it will be displayed inline-block without a visible label.
+     */
+    isInline?: boolean;
+    /**
+     * Spinner label. Will be displayed below the Spinner if `showLabel` is true.
+     */
+    label?: string;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
+    showLabel?: boolean;
+    /**
+     * Spinner size
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Spinner UI component
+ */
+export declare const Spinner: ({ colorType, isInline, label, showLabel, size, className, ...props }: SpinnerProps) => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
+import './breadcrumb.css';
+/**
+ * Prop types for Breadcrumb
+ */
+export interface BreadcrumbProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label for the breadcrumbs navigation.
+     */
+    ariaLabel?: string;
+    /**
+     * Array of breadcrumb items.
+     */
+    crumbs: ReactElement[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Breadcrumb UI component
+ */
+export declare const Breadcrumb: ({ ariaLabel, crumbs, className, ...props }: BreadcrumbProps) => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './button-nav.css';
+export type ButtonNavItem = Omit<NavigationItem, 'links'>;
+/**
+ * Prop types for ButtonNav
+ */
+export interface ButtonNavProps extends ComponentPropsWithRef<'nav'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Menu items to render.
+     */
+    menuItems?: ButtonNavItem[];
+    /**
+     * Size of the Buttons.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ButtonNav UI component
+ */
+export declare const ButtonNav: ({ ariaLabel, menuItems, size, className, ...props }: ButtonNavProps) => React.JSX.Element;

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/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, ReactElement } 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 | ReactElement;
+    /**
+     * 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,39 @@
+import React, { ComponentPropsWithoutRef, ReactElement } 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;
+    /**
+     * Heading text. If a link is passed, it will be rendered as a link.
+     */
+    headingText?: string | ReactElement;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: NavigationItem[];
+    /**
+     * 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, headingText, labels, menuItems, mobileMenuSelectTextFallback, className, ...props }: SideNavProps) => React.JSX.Element;

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

@@ -0,0 +1,53 @@
+import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
+import { NavigationItem } from '@components/navigation/navigation-types';
+import './side-nav-compact.css';
+export type SideNavCompactItem = NavigationItem & {
+    /**
+     * A boolean indicating whether the item is a submenu.
+     */
+    path?: string;
+};
+/**
+ * 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 | ReactElement;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Menu items to render.
+     */
+    menuItems: SideNavCompactItem[];
+    /**
+     *  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/SideNavGlobal/SideNavGlobal.d.ts

@@ -0,0 +1,50 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { SideNavGlobalItemProps } from './SideNavGlobalItem';
+import './side-nav-global.css';
+/**
+ * Prop types for SideNavGlobal
+ */
+export interface SideNavGlobalProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label for the navigation.
+     */
+    ariaLabel: string;
+    /**
+     * Should the Pantheon logo be displayed above the menu items?
+     * It will not be displayed in the mobile view regardless of this value.
+     */
+    hasLogo?: boolean;
+    /**
+     * Is the sidebar collapsed?
+     */
+    isSidebarCollapsed?: boolean;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+    /**
+     * Where should the logo link to? A fully-formed link element.
+     * Only necessary if `hasLogo` is true.
+     * If the logo should not be a link, leave blank.
+     */
+    logoLinkContent?: ReactNode;
+    /**
+     * Menu items to render.
+     */
+    menuItems?: SideNavGlobalItemProps[];
+    /**
+     * Text to display in the mobile menu trigger button when no active link is found.
+     */
+    mobileMenuSelectTextFallback?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SideNavGlobal UI component
+ */
+export declare const SideNavGlobal: ({ ariaLabel, hasLogo, isSidebarCollapsed, labels, logoLinkContent, menuItems, mobileMenuSelectTextFallback, className, ...props }: SideNavGlobalProps) => React.JSX.Element;

package/_dist/components/navigation/SideNavGlobal/SideNavGlobalItem.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 './side-nav-global.css';
+export type SideNavGlobalItemProps = NavigationItem & {
+    /**
+     * Icon to display next to the link content.
+     */
+    icon?: PDSIcon;
+    /**
+     * Flag indicating whether the sidebar is collapsed.
+     */
+    isSidebarCollapsed?: boolean;
+    /**
+     * Labels for translatable strings.
+     */
+    labels?: {
+        submenu: string;
+        toggle: string;
+    };
+};
+/**
+ * SideNavGlobalItem UI component
+ */
+export declare const SideNavGlobalItem: ({ icon, isActive, isSidebarCollapsed, labels, linkContent, links, }: SideNavGlobalItemProps) => React.JSX.Element;