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

package/_dist/components/badges/Tally/Tally.d.ts

@@ -0,0 +1,38 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './tally.css';
+interface TypeLabels {
+    info?: string;
+    success?: string;
+    neutral?: string;
+    warning?: string;
+    critical?: string;
+}
+/**
+ * Prop types for Tally
+ */
+export interface TallyProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Label text
+     */
+    label: string | number;
+    /**
+     * Notification type
+     */
+    type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
+    /**
+     * Message type labels.
+     */
+    typeLabels?: TypeLabels;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Tally UI component
+ */
+export declare const Tally: {
+    ({ label, type, typeLabels, className, ...props }: TallyProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/_dist/components/buttons/Button/Button.d.ts

@@ -0,0 +1,66 @@
+import React, { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './button.css';
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Aria-label attribute.
+     */
+    ariaLabel?: string;
+    /**
+     * Type of button
+     */
+    buttonType?: 'button' | 'submit' | 'reset';
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * How the button is displayed.
+     */
+    displayType?: 'label-only' | 'icon-start' | 'icon-end';
+    /**
+     * Which icon to render
+     */
+    iconName?: PDSIcon;
+    /**
+     * is the button full width?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Is the button in a loading state?
+     */
+    isLoading?: boolean;
+    /**
+     * Will this be used for a split button?
+     */
+    isSplitButton?: boolean;
+    /**
+     * The text of the button
+     */
+    label: ReactNode;
+    /**
+     * Click event handler callback
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Which size of button to render
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Text for an optional tooltip to be displayed when the button is `disabled` or `isLoading`.
+     */
+    tooltipText?: string;
+    /**
+     * Which variant of button to render
+     */
+    variant?: 'primary' | 'secondary' | 'subtle' | 'brand' | 'brand-secondary' | 'critical' | 'critical-secondary' | 'navbar' | 'inline';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * A Component used to render a Button
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/_dist/components/buttons/ButtonLink/ButtonLink.d.ts

@@ -0,0 +1,48 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import { ButtonDisplayType, ButtonSize, ButtonVariant } from '@libs/types/custom-types';
+import '../Button/button.css';
+import './button-link.css';
+type ButtonLinkVariant = Exclude<ButtonVariant, 'navbar' | 'inline'>;
+/**
+ * Prop types for ButtonLink
+ */
+export interface ButtonLinkProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Is the link disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Display type of the button.
+     */
+    displayType?: ButtonDisplayType;
+    /**
+     * Icon to render in the button. Only necessary if `displayType` is 'icon-start' or 'icon-end'.
+     */
+    iconName?: PDSIcon;
+    /**
+     * A link element using the router of your choice.
+     */
+    linkContent: ReactNode;
+    /**
+     * Size of the button.
+     */
+    size?: ButtonSize;
+    /**
+     * Text for an optional tooltip to be displayed when the button is `disabled`.
+     */
+    tooltipText?: string;
+    /**
+     * Variant of the button.
+     */
+    variant?: ButtonLinkVariant;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ButtonLink UI component
+ */
+export declare const ButtonLink: ({ disabled, displayType, iconName, linkContent, size, tooltipText, variant, className, ...props }: ButtonLinkProps) => React.JSX.Element;
+export {};

package/_dist/components/buttons/ClipboardButton/ClipboardButton.d.ts

@@ -0,0 +1,31 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './clipboard-button.css';
+/**
+ * Prop types for ClipboardButton
+ */
+export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Translation string for aria-label attribute and tooltip text.
+     */
+    ariaLabel: string;
+    /**
+     * Text to copy to clipboard.
+     */
+    clipboardText?: string;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Which variant of button to render.
+     */
+    variant?: 'standard' | 'reverse';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ClipboardButton UI component
+ */
+export declare const ClipboardButton: ({ ariaLabel, clipboardText, disabled, variant, className, ...props }: ClipboardButtonProps) => React.JSX.Element;

package/_dist/components/buttons/CloseButton/CloseButton.d.ts

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import './close-button.css';
+/**
+ * Prop types for CloseButton
+ */
+export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Aria-label attribute.
+     */
+    ariaLabel?: string;
+    /**
+     * Size of the icon.
+     */
+    iconSize?: 'md' | 'lg' | 'xl';
+    /**
+     * Click event callback function.
+     */
+    onClick?: () => void;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * CloseButton UI component
+ */
+export declare const CloseButton: ({ ariaLabel, iconSize, onClick, className, ...props }: CloseButtonProps) => React.JSX.Element;

package/_dist/components/buttons/IconButton/IconButton.d.ts

@@ -0,0 +1,50 @@
+import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './icon-button.css';
+interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
+    /**
+     * Aria-label attribute.
+     */
+    ariaLabel: string;
+    /**
+     * Type of button
+     */
+    buttonType?: 'button' | 'submit' | 'reset';
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Show tooltip on hover. If false, the title attribute will be used.
+     */
+    hasTooltip?: boolean;
+    /**
+     * Which icon to render.
+     */
+    iconName: PDSIcon;
+    /**
+     * Which icon to render second. If this is set, the button will be animated.
+     */
+    icon2Name?: PDSIcon;
+    /**
+     * Click event handler callback.
+     */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Which size of button to render.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Which variant of button to render.
+     */
+    variant?: 'standard' | 'reverse' | 'critical' | 'critical-hover';
+    /**
+     * Additional class names.
+     */
+    className?: string;
+}
+/**
+ * IconButton UI component
+ */
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/_dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -0,0 +1,75 @@
+import React, { ComponentPropsWithRef, ReactNode } from 'react';
+import { HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '@libs/types/custom-types';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './menu-button.css';
+/**
+ * Prop types for MenuButton
+ */
+export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * How the button is displayed.
+     */
+    displayType?: 'icon-end' | 'icon-only';
+    /**
+     * Icon name for icon-only buttons.
+     */
+    iconName?: PDSIcon;
+    /**
+     * ID value for this component.
+     */
+    id: string;
+    /**
+     * Will this be used for a split button?
+     */
+    isSplitButton?: boolean;
+    /**
+     * The text of the button
+     */
+    label: ReactNode;
+    /**
+     * Array of menu items
+     */
+    menuItems: Array<HeadingItemType | LinkItemType | MenuItemType | NodeItemType | SeparatorItemType>;
+    /**
+     * Horizontal position of the menu relative to the button. Applies to breakpoints `md` and up.
+     */
+    menuPosition?: 'start' | 'end';
+    /**
+     * Optional callback function for when the button is clicked or activated by the keyboard.
+     */
+    onClick?: () => void;
+    /**
+     * Which size of button to render.
+     */
+    size?: 'sm' | 'md';
+    /**
+     *  Optional `data-testid` value for this component.
+     */
+    testId?: string;
+    /**
+     *  Translatable string for description of unlabeled group of menu items.
+     */
+    undefinedLabel?: string;
+    /**
+     * Which variant of button to render — only valid for icon-end (default) display type.
+     */
+    variant?: 'primary' | 'secondary' | 'navbar';
+    /**
+     * Is this button located with the Navbar component?
+     * This will adjust the styling and position of the dropdown.
+     * Omit this prop for the Dashboard application. It only applies to the standard Navbar component with a bottom border.
+     */
+    withinNavbar?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * MenuButton UI component - Modernized with Floating UI
+ */
+export declare const MenuButton: ({ disabled, displayType, iconName, id, isSplitButton, label, menuItems, menuPosition, onClick, size, testId, undefinedLabel, variant, withinNavbar, className, ...props }: MenuButtonProps) => React.JSX.Element;

package/_dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './segmented-button.css';
+/**
+ * Structure for each option in the SegmentedButton component.
+ */
+interface OptionType {
+    id?: string;
+    value: string;
+    label: string;
+    disabled?: boolean;
+    iconName?: PDSIcon;
+    tally?: {
+        label: string | number;
+        type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
+    };
+}
+/**
+ * Prop types for SegmentedButton
+ */
+export interface SegmentedButtonProps {
+    /**
+     * Is the SegmentedButton disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Unique ID for the SegmentedButton.
+     */
+    id: string;
+    /**
+     * Optional initial selected option value.
+     */
+    defaultValue?: string;
+    /**
+     * Label for the SegmentedButton — visually hidden, used for screen readers only.
+     */
+    label: string;
+    /**
+     * Callback function that will return the updated value from the instance when it changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Array of button options — must be between 2 and 6 options.
+     */
+    options: OptionType[];
+    /**
+     * Size of the SegmentedButton.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Value of the Segmented Button. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     */
+    value?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * SegmentedButton UI component
+ */
+export declare const SegmentedButton: ({ disabled, id, defaultValue, label, onChange, options, size, value, className, ...props }: SegmentedButtonProps) => React.JSX.Element;
+export {};

package/_dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -0,0 +1,41 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { LinkItemType, MenuItemType } from '@libs/types/custom-types';
+import './split-button.css';
+/**
+ * Prop types for SplitButton
+ */
+interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Array of menu items
+     */
+    actionItems: Array<LinkItemType | MenuItemType>;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * ID value for this component.
+     */
+    id: string;
+    /**
+     * Label for the buttons additional actions menu.
+     */
+    moreActionsLabel?: string;
+    /**
+     * Which size of button to render
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Which variant of button to render
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * A component used to render a button with a primary action and a menu of additional options
+ */
+export declare const SplitButton: ({ actionItems, disabled, id, moreActionsLabel, size, variant, className, ...props }: SplitButtonProps) => React.JSX.Element;
+export {};

package/_dist/components/buttons/SplitButton/split-button-sample-data.d.ts

@@ -0,0 +1,17 @@
+export const dialogMsgBase: "Activated action => ";
+export const sampleActionItems: {
+    label: string;
+    callback: (item: any) => void;
+}[];
+export const linkActionItems: ({
+    linkContent: React.JSX.Element;
+    isLink: boolean;
+    label?: undefined;
+    callback?: undefined;
+} | {
+    label: string;
+    callback: (item: any) => void;
+    linkContent?: undefined;
+    isLink?: undefined;
+})[];
+import React from 'react';

package/_dist/components/buttons/UtilityButton/UtilityButton.d.ts

@@ -0,0 +1,56 @@
+import React, { ComponentPropsWithoutRef } from 'react';
+import { PDSIcon } from '@components/icons/Icon/Icon';
+import './utility-button.css';
+/**
+ * Prop types for UtilityButton
+ */
+export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional props for the button element.
+     */
+    buttonProps?: ComponentPropsWithoutRef<'button'>;
+    /**
+     * Is the button disabled?
+     */
+    disabled?: boolean;
+    /**
+     * Which icon to render.
+     */
+    iconName?: PDSIcon;
+    /**
+     * Is the button critical? If true, the button will be styled as critical on hover and focus.
+     */
+    isCritical?: boolean;
+    /**
+     * Is the button in the process of an initial load?
+     */
+    isLoading?: boolean;
+    /**
+     * Is the button in the process of performing a task and should be disabled?
+     */
+    isWorking?: boolean;
+    /**
+     * Should the button label use the monospace font?
+     */
+    isMonospace?: boolean;
+    /**
+     * The text of the button.
+     */
+    label: string;
+    /**
+     * Click event handler callback.
+     */
+    onClick?: () => void;
+    /**
+     * Tooltip text.
+     */
+    tooltipText?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * UtilityButton UI component
+ */
+export declare const UtilityButton: ({ buttonProps, disabled, iconName, isCritical, isLoading, isWorking, isMonospace, label, onClick, tooltipText, className, ...props }: UtilityButtonProps) => React.JSX.Element;

package/_dist/components/cards/Card/Card.d.ts

@@ -0,0 +1,29 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '@layouts/layout-types';
+import './card.css';
+export type CardBackground = 'default' | 'mint-gradient' | 'sundown-gradient' | 'yellow-gradient' | 'transparent';
+/**
+ * Prop types for Card
+ */
+export interface CardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Background color or gradient for the card.
+     */
+    background?: CardBackground;
+    /**
+     * Child elements to be assigned to named slots.
+     */
+    children: ReactNode;
+    /**
+     * Relative padding for the `main` slot.
+     */
+    padding?: GridGapOptions;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Card UI component
+ */
+export declare const Card: ({ background, children, padding, className, ...props }: CardProps) => React.JSX.Element;

package/_dist/components/cards/CardHeading/CardHeading.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './card-heading.css';
+/**
+ * Prop types for CardHeading
+ */
+export interface CardHeadingProps {
+    /**
+     * Font size of the heading. Default is `XL`.
+     */
+    fontSize?: 'L' | 'XL';
+    /**
+     * Font weight of the heading. Default is `bold`.
+     */
+    fontWeight?: 'bold' | 'semibold';
+    /**
+     *  Heading level or `span`.
+     */
+    level?: HeadingLevelCommon;
+    /**
+     * Heading text.
+     */
+    text?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CardHeading UI component
+ */
+export declare const CardHeading: ({ fontSize, fontWeight, level, text, className, ...props }: CardHeadingProps) => React.JSX.Element;

package/_dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts

@@ -0,0 +1,60 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './card-select-group.css';
+export interface CardOption {
+    /**
+     * Unique ID for the option
+     * @default ''
+     */
+    id?: string;
+    /**
+     * Option label
+     */
+    label: string | ReactNode;
+    /**
+     * Option description
+     */
+    description?: string | ReactNode;
+    /**
+     * Option value
+     */
+    value: string;
+}
+export interface CardSelectGroupProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+    /**
+     * Optional initial selected option value
+     */
+    defaultValue?: string;
+    /**
+     * Unique ID for the card select group
+     */
+    id: string;
+    /**
+     * Label for the card select group
+     */
+    label: string;
+    /**
+     * Display of the component label. `hidden` visually hides the label but keeps it accessible to screen readers.
+     */
+    labelDisplay?: 'left' | 'center' | 'hidden';
+    /**
+     * Column layout of the cards at breakpoints medium and above.
+     */
+    layout?: 'auto' | 'twoAcross' | 'threeAcross';
+    /**
+     * Callback function that will return the updated value from the instance when it changes.
+     * Function should have the shape of: `(value) => { <do stuff here> } `.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Array of card options
+     */
+    options?: CardOption[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * CardSelectGroup UI component
+ */
+export declare const CardSelectGroup: ({ id, defaultValue, label, labelDisplay, layout, onChange, options, className, ...props }: CardSelectGroupProps) => React.JSX.Element;

package/_dist/components/cards/EmptyStateCard/EmptyStateCard.d.ts

@@ -0,0 +1,36 @@
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { HeadingLevelCommon } from '@libs/types/custom-types';
+import './empty-state-card.css';
+/**
+ * Prop types for EmptyStateCard
+ */
+export interface EmptyStateCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     *  Heading level or `span`.
+     */
+    headingLevel?: HeadingLevelCommon;
+    /**
+     * Heading text.
+     */
+    headingText: string;
+    /**
+     * Whether the link is external or not.
+     */
+    isLinkExternal?: boolean;
+    /**
+     * A link element using the router of your choice.
+     */
+    linkContent: ReactNode;
+    /**
+     * Summary paragraph.
+     */
+    summary: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * EmptyStateCard UI component
+ */
+export declare const EmptyStateCard: ({ headingLevel, headingText, isLinkExternal, linkContent, summary, className, ...props }: EmptyStateCardProps) => React.JSX.Element;