@pantheon-systems/pds-toolkit-react 1.0.0-dev.23 → 1.0.0-dev.231

package/_dist/components/LinkNewWindow/LinkNewWindow.d.ts

@@ -0,0 +1,31 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './link-new-window.css';
+/**
+ * Prop types for LinkNewWindow
+ */
+export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
+    /**
+     * Content for the LinkNewWindow.
+     */
+    children?: ReactNode;
+    /**
+     * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
+     */
+    fontSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Translation string for the "opens in a new window" message.
+     */
+    newWindowText?: string;
+    /**
+     * URL where the component should link to.
+     */
+    url: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * LinkNewWindow UI component
+ */
+export declare const LinkNewWindow: ({ children, fontSize, newWindowText, url, className, ...props }: LinkNewWindowProps) => React.JSX.Element;

package/_dist/components/Modal/Modal.d.ts

@@ -0,0 +1,40 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './modal.css';
+export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Aria label that describes the modal. Will default to the title if not provided.
+     */
+    ariaLabel?: string;
+    /**
+     * Main content for modal.
+     */
+    children?: ReactNode;
+    /**
+     * Indicates if the built-in close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Is the modal open?
+     */
+    modalIsOpen?: boolean;
+    /**
+     * Function to set the modal open state.
+     */
+    setModalIsOpen?: (isOpen: boolean) => void;
+    /**
+     * The width of the modal.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Text for modal title
+     */
+    title: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Modal UI component
+ */
+export declare const Modal: ({ ariaLabel, children, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, className, ...props }: ModalProps) => React.JSX.Element;

package/_dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,54 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './pagination.css';
+/**
+ * Prop types for Pagination
+ */
+export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Minimum number of page buttons to buffer on either side of the current page.
+     * This will change the number of page buttons shown in total.
+     */
+    bufferCount?: number;
+    /**
+     * Current page number.
+     */
+    currentPage: number;
+    /**
+     *  Heading level. Defaults to `h2`.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Heading text for the pagination component. Will only be accessible to screen readers.
+     */
+    headingText?: string;
+    /**
+     * Number of items per page.
+     */
+    itemsPerPage?: number;
+    /**
+     * Label strings for previous and next buttons.
+     */
+    labelStrings?: {
+        previous: string;
+        next: string;
+    };
+    /**
+     * Callback to handle page change.
+     * Use a state hook to update the current page in a parent component.
+     * For example: `onPageChange={(page) => setCurrentPage(page)}`
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Total number of items to paginate.
+     */
+    totalItemCount: number;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * Pagination UI component
+ */
+export declare const Pagination: ({ bufferCount, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, className, ...props }: PaginationProps) => React.JSX.Element;

package/_dist/components/Pagination/usePagination.d.ts

@@ -0,0 +1,7 @@
+export declare const ELLIPSIS = "...";
+export declare const usePagination: ({ bufferCount, currentPage, itemsPerPage, totalItemCount, }: {
+    bufferCount?: number;
+    currentPage: any;
+    itemsPerPage: any;
+    totalItemCount: any;
+}) => (string | number)[];

package/_dist/components/PantheonLogo/PantheonLogo.d.ts

@@ -0,0 +1,32 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './pantheon-logo.css';
+export type PantheonLogoDisplayType = 'full' | 'icon' | 'wordmark' | 'sub-brand' | 'sub-brand-small';
+/**
+ * Prop types for PantheonLogo
+ */
+export interface PantheonLogoProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Color type. Use 'default' unless the logo is used on an approved dark background.
+     */
+    colorType?: 'default' | 'reverse';
+    /**
+     * Display type
+     */
+    displayType?: PantheonLogoDisplayType;
+    /**
+     * A fully-formed link element using the router of your choice. The link text will be used as the aria-label. If the logo should not be a link, set to `null`.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Accepts a fully-formed link or a string (if a static site name is desired). Will only render if the `display-type` is set to 'sub-brand'.
+     */
+    subBrand?: ReactNode | string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * PantheonLogo UI component
+ */
+export declare const PantheonLogo: ({ colorType, displayType, linkContent, subBrand, className, ...props }: PantheonLogoProps) => React.JSX.Element;

package/_dist/components/PantheonLogo/pantheon-logo-data.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const logoFull: React.JSX.Element;
+export declare const logoIcon: React.JSX.Element;
+export declare const logoWordmark: React.JSX.Element;

package/_dist/components/PlatformIcon/PlatformIcon.d.ts

@@ -0,0 +1,12 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './platform-icon.css';
+type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'import-custom' | 'next' | 'next-drupal' | 'next-wp' | 'wordpress';
+interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
+    platformType: PlatformType;
+    className?: string;
+}
+/**
+ * PlatformIcon UI component
+ */
+export declare const PlatformIcon: ({ platformType, className, ...props }: PlatformIconProps) => React.JSX.Element;
+export {};

package/_dist/components/Popover/Popover.d.ts

@@ -0,0 +1,58 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { FuiPlacement } from '@libs/types/custom-types';
+import './popover.css';
+interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
+    /**
+     * Content to display in the popover.
+     */
+    content?: ReactNode;
+    /**
+     * Text or HTML content to use as the trigger instead of an icon. Leave null to use the icon. This allows passing HTML content to customize the trigger appearance or functionality.
+     */
+    customTrigger?: ReactNode;
+    /**
+     * Indicates if close button will be shown.
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Additional spacing between the trigger and the popover. Only applies to popovers with a custom trigger. Icon triggers have a fixed spacing.
+     */
+    offsetValue?: number;
+    /**
+     * Callback function that triggers when closing Popover.
+     */
+    onClose?: () => void;
+    /**
+     * Preferred placement of the popover in relation to the trigger. Will be modified if there is not enough space.
+     */
+    placement?: FuiPlacement;
+    /**
+     * Text for popover title.
+     */
+    title?: string;
+    /**
+     * The accessible text for the trigger. Only necessary when the trigger is an icon.
+     */
+    triggerAccessibleText?: string;
+    /**
+     * The icon to use as the trigger.
+     */
+    triggerIcon?: 'circleInfo' | 'circleQuestion';
+    /**
+     * Boolean to determine if the Popover is open by default.
+     */
+    popoverIsOpen?: boolean;
+    /**
+     * Function to set Popover open state.
+     */
+    setPopoverIsOpen?: (isOpen: boolean) => void;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * Popover UI component
+ */
+export declare const Popover: ({ content, customTrigger, hasCloseButton, offsetValue, onClose, placement, title, triggerIcon, triggerAccessibleText, popoverIsOpen, setPopoverIsOpen, className, ...props }: PopoverProps) => React.JSX.Element;
+export {};

package/_dist/components/PullQuote/PullQuote.d.ts

@@ -0,0 +1,34 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './pull-quote.css';
+interface Attribution {
+    name: string;
+    title: string;
+    org: string;
+}
+interface PullQuoteProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Attribution for the quote
+     */
+    attribution?: Attribution;
+    /**
+     * Image src. For stand-alone layout only, will not render for inline layout.
+     */
+    image?: string;
+    /**
+     * The layout type for the pull quote
+     */
+    layoutType?: 'stand-alone' | 'inline';
+    /**
+     * The quote text
+     */
+    quote: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * PullQuote UI component
+ */
+export declare const PullQuote: ({ attribution, image, layoutType, quote, className, ...props }: PullQuoteProps) => React.JSX.Element;
+export {};

package/_dist/components/RefreshChecker/RefreshChecker.d.ts

@@ -0,0 +1,54 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './refresh-checker.css';
+/**
+ * Enum for RefreshChecker states
+ */
+export declare enum RefreshCheckerState {
+    DEFAULT = "default",
+    WORKING = "working",
+    CHECKED = "checked"
+}
+/**
+ * Prop types for RefreshChecker
+ */
+interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Alignment of the component. Default is left.
+     */
+    alignment?: 'left' | 'right';
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
+    /**
+     * Initial state of the component.
+     */
+    initialState?: `${RefreshCheckerState}`;
+    /**
+     * Internationalization props for labels.
+     */
+    labelStrings?: {
+        checkForUpdates?: string;
+        checking?: string;
+        checked?: string;
+        tooltipContent?: string;
+        ariaLabel?: string;
+    };
+    /**
+     * Last checked timestamp
+     */
+    lastChecked?: Date;
+    /**
+     * Callback function when check is triggered
+     */
+    onCheck?: () => Promise<void>;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * RefreshChecker UI component
+ */
+export declare const RefreshChecker: ({ alignment, componentWidth, initialState, labelStrings, lastChecked, onCheck, className, ...props }: RefreshCheckerProps) => React.JSX.Element;
+export {};

package/_dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts

@@ -0,0 +1,28 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { SitePlanLevel, SiteType } from '@libs/types/custom-types';
+import './site-dashboard-heading.css';
+/**
+ * Prop types for SiteDashboardHeading
+ */
+export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Name of the site.
+     */
+    siteName: string;
+    /**
+     * Site plan level.
+     */
+    sitePlanLevel?: SitePlanLevel;
+    /**
+     * Site type.
+     */
+    siteType?: SiteType;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SiteDashboardHeading UI component
+ */
+export declare const SiteDashboardHeading: ({ siteName, sitePlanLevel, siteType, className, ...props }: SiteDashboardHeadingProps) => React.JSX.Element;

package/_dist/components/Skiplink/Skiplink.d.ts

@@ -0,0 +1,21 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './skiplink.css';
+interface SkiplinkProps extends ComponentPropsWithoutRef<'a'> {
+    /**
+     * The ID of the element to skip to.
+     */
+    destination: string;
+    /**
+     * The text of the skip link.
+     */
+    text: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Skiplink UI component
+ */
+export declare const Skiplink: ({ destination, text, className, ...props }: SkiplinkProps) => React.JSX.Element;
+export {};

package/_dist/components/SocialLinks/SocialLinks.d.ts

@@ -0,0 +1,23 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/Icon/Icon';
+import './social-links.css';
+interface SocialLinksProps extends ComponentPropsWithoutRef<'ul'> {
+    /**
+     * Array of social media links
+     */
+    linkItems?: (keyof typeof socialData)[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare const socialData: Record<string, {
+    icon: PDSIcon;
+    url: string;
+    label: string;
+}>;
+/**
+ * SocialLinks UI component
+ */
+export declare const SocialLinks: ({ linkItems, className, ...props }: SocialLinksProps) => React.JSX.Element;
+export {};

package/_dist/components/StatusIndicator/StatusIndicator.d.ts

@@ -0,0 +1,24 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './status-indicator.css';
+export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Status label text
+     */
+    label: string;
+    /**
+     * Sets the size
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Sets status type
+     */
+    type: 'critical' | 'info' | 'neutral' | 'new' | 'success' | 'warning' | 'working';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * StatusIndicator UI component
+ */
+export declare const StatusIndicator: ({ label, size, type, className, ...props }: StatusIndicatorProps) => React.JSX.Element;

package/_dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,49 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './stepper.css';
+interface Step {
+    /**
+     * Callback function to return to a previously completed step.
+     */
+    callback?: (step: Step) => void;
+    /**
+     * If the step has an error.
+     */
+    hasError?: boolean;
+    /**
+     * Id for the step.
+     */
+    id?: string;
+    /**
+     * If the step is the current active step.
+     */
+    isCurrent?: boolean;
+    /**
+     * The label for the step.
+     */
+    label: string;
+}
+interface TranslatableLabels {
+    step: string;
+    completed: string;
+    hasError: string;
+    next: string;
+}
+interface StepperProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * An array of step objects
+     */
+    steps: Step[];
+    /**
+     * Translatable strings for visually-hidden text.
+     */
+    translatableLabels?: TranslatableLabels;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Stepper UI component
+ */
+export declare const Stepper: ({ steps, translatableLabels, className, ...props }: StepperProps) => React.JSX.Element;
+export {};

package/_dist/components/Table/Table.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './table.css';
+/**
+ * Prop types for Table
+ */
+interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /**
+     * Table headers
+     */
+    headers?: Array<{
+        title: string;
+        sortable?: boolean;
+    }>;
+    /**
+     * Table row data
+     */
+    rowData?: ReactNode[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Table UI component
+ */
+export declare const Table: ({ headers, rowData, className, ...props }: TableProps) => React.JSX.Element;
+export {};

package/_dist/components/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,45 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevel } from '@libs/types/custom-types';
+import './table-of-contents.css';
+/**
+ * Prop types for TableOfContents
+ */
+interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
+    /**
+     * Whether to append the id to the URL when a link is clicked.
+     */
+    appendIds?: boolean;
+    /**
+     * aria-label for the TOC.
+     */
+    ariaLabel?: string;
+    /**
+     * Whether the heading should be visible or not. If not visible it will still be presented to screen readers.
+     */
+    showHeading?: boolean;
+    /**
+     * Heading level for TOC heading.
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Text for the TOC heading.
+     */
+    headingText?: string;
+    /**
+     * Class name for designating headers to ignore.
+     */
+    ignoreClass?: string;
+    /**
+     * ID name of content region to be indexed.
+     */
+    sourceID?: string;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * TableOfContents UI component
+ */
+export declare const TableOfContents: ({ appendIds, ariaLabel, headingLevel, headingText, ignoreClass, showHeading, sourceID, className, ...props }: TableOfContentsProps) => React.JSX.Element;
+export {};

package/_dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,63 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/Icon/Icon';
+import './tabs.css';
+interface Tabs {
+    /**
+     * Is the tab disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Sets optional tab icon.
+     */
+    icon?: PDSIcon;
+    /**
+     * Sets content inside tab
+     */
+    panelContent: ReactNode;
+    /**
+     * Sets tab label
+     */
+    tabLabel: string | ReactNode;
+    /**
+     * Sets id for tab.
+     */
+    tabId?: string;
+    /**
+     * Sets optional tab tally.
+     */
+    tally?: {
+        label: string | number;
+        type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
+    };
+}
+interface TabsProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Function to call when the active tab changes
+     */
+    onActiveTabChange?: (activeTabIndex: number) => void;
+    /**
+     * Sets tabset aria label
+     */
+    ariaLabel: string;
+    /**
+     * Sets default selected tab using a zero-based index, defaults to 0
+     */
+    defaultSelected?: number;
+    /**
+     * Sets currently selected tab using a zero-based index
+     */
+    selectedTab?: number;
+    /**
+     * Array of objects for tab data
+     */
+    tabs: Tabs[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tabs UI component
+ */
+export declare const Tabs: ({ ariaLabel, defaultSelected, onActiveTabChange, selectedTab, tabs, className, ...props }: TabsProps) => React.JSX.Element;
+export {};

package/_dist/components/Tag/Tag.d.ts

@@ -0,0 +1,39 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './tag.css';
+export declare let tagColors: string[];
+type TagColor = (typeof tagColors)[number];
+interface TagProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Should the tag be a link? If yes, provide a link element.
+     */
+    linkContent?: ReactNode;
+    /**
+     * Should the tag be removable?
+     */
+    isRemovable?: boolean;
+    /**
+     * Function to execute when the tag is removed.
+     */
+    onRemove?: () => void;
+    /**
+     * Label for the remove button. Tag text will be appended to this label.
+     */
+    removeLabel?: string;
+    /**
+     * Tag color. Will use random color if not selected.
+     */
+    tagColor?: TagColor;
+    /**
+     * Tag text
+     */
+    tagLabel: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tag UI component
+ */
+export declare const Tag: ({ linkContent, isRemovable, onRemove, removeLabel, tagColor, tagLabel, className, ...props }: TagProps) => React.JSX.Element;
+export {};