@pantheon-systems/pds-toolkit-react 1.0.0-dev.160 → 1.0.0-dev.161

package/_dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './avatar.css';
 interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
     /**

package/_dist/components/Icon/Icon.d.ts

@@ -16,7 +16,7 @@ export interface IconProps {
     /**
      * Which size of icon to render
      */
-    iconSize: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    iconSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
     /**
      * Additional class names
      */

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

@@ -1,6 +1,18 @@
 import React from 'react';
 import { PDSIcon } from '@components/Icon/Icon';
 import './segmented-button.css';
+/**
+ * Structure for each option in the SegmentedButton component.
+ */
+interface OptionType {
+    value: string;
+    label: string;
+    iconName?: PDSIcon;
+    tally?: {
+        label: string | number;
+        type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
+    };
+}
 /**
  * Prop types for SegmentedButton
  */
@@ -29,11 +41,7 @@ export interface SegmentedButtonProps {
     /**
      * Array of button options — must be between 2 and 6 options.
      */
-    options: {
-        value: string;
-        label: string;
-        iconName?: PDSIcon;
-    }[];
+    options: OptionType[];
     /**
      * Additional class names
      */
@@ -43,3 +51,4 @@ export interface SegmentedButtonProps {
  * SegmentedButton UI component
  */
 export declare const SegmentedButton: ({ disabled, id, initialSelection, label, onChange, options, className, ...props }: SegmentedButtonProps) => React.JSX.Element;
+export {};

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

@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef } from 'react';
 import { NavigationItem } from '@components/navigation/navigation-types';
 import { PDSIcon } from '@components/Icon/Icon';
 import './dashboard-nav.css';
-type DashboardNavItem = NavigationItem & {
+export type DashboardNavItem = NavigationItem & {
     /**
      * Icon to display next to the link content.
      */
@@ -40,4 +40,3 @@ export interface DashboardNavProps extends ComponentPropsWithoutRef<'nav'> {
  * DashboardNav UI component
  */
 export declare const DashboardNav: ({ ariaLabel, labels, menuItems, mobileMenuSelectTextFallback, className, ...props }: DashboardNavProps) => React.JSX.Element;
-export {};

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

@@ -0,0 +1,3 @@
+import { DashboardNavItem } from './DashboardNav';
+export declare const dashboardNavSampleMenuItems: DashboardNavItem[];
+export declare const dashboardNavSampleMenuItemsRR: DashboardNavItem[];

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

@@ -1,44 +1,69 @@
-export function UserMenu({ ariaLabel, menuItems, userEmail, userImageSrc, userName, withinNavbar, className, ...props }: {
-    [x: string]: any;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { PDSIcon } from '@components/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;
-    menuItems: any;
-    userEmail: any;
-    userImageSrc: any;
-    userName: any;
+    /**
+     * 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;
-    className: any;
-}): React.JSX.Element;
-export namespace UserMenu {
-    namespace propTypes {
-        let ariaLabel: PropTypes.Requireable<string>;
-        let menuItems: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * Callback function for the menu item.
-             */
-            callback: PropTypes.Requireable<(...args: any[]) => any>;
-            /**
-             * Is the menu item disabled?
-             */
-            disabled: PropTypes.Requireable<boolean>;
-            /**
-             * Icon name for the menu item.
-             */
-            iconName: PropTypes.Requireable<string>;
-            /**
-             * Unique ID for the menu item. Optional.
-             */
-            id: PropTypes.Requireable<string>;
-            /**
-             * Label for the menu item.
-             */
-            label: PropTypes.Requireable<string>;
-        }>[]>;
-        let userEmail: PropTypes.Requireable<string>;
-        let userImageSrc: PropTypes.Requireable<string>;
-        let userName: PropTypes.Requireable<string>;
-        let withinNavbar: PropTypes.Requireable<boolean>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Additional class names.
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * UserMenu UI component
+ */
+export declare const UserMenu: ({ ariaLabel, menuItems, userEmail, userImageSrc, userName, withinNavbar, className, ...props }: UserMenuProps) => React.JSX.Element;

package/_dist/components/navigation/UserMenu/user-menu-sample-content.d.ts

@@ -0,0 +1,2 @@
+import { UserMenuItem } from './UserMenu';
+export declare const userMenuItems: UserMenuItem[];

package/_dist/components/progress-indicators/ProgressBar/ProgressBar.d.ts

@@ -1,35 +1,53 @@
-export function ProgressBar({ colorBreakpoints, id, label, message, messagePosition, percentage, showLabel, showPercentage, size, className, ...props }: {
-    [x: string]: any;
-    colorBreakpoints?: {
-        colorType: string;
-        percentage: number;
-    }[];
-    id: any;
-    label: any;
-    message: any;
-    messagePosition?: string;
-    percentage: any;
+import React, { ComponentPropsWithoutRef } from 'react';
+import './progress-bar.css';
+interface ProgressBarBreakpoint {
+    colorType: 'neutral' | 'info' | 'success' | 'warning' | 'critical';
+    percentage: number;
+}
+interface ProgressBarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Array of color breakpoints. Each breakpoint should have a `colorType` and `percentage` value.
+     */
+    colorBreakpoints: ProgressBarBreakpoint[];
+    /**
+     * ID of the Progress Bar. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Progress Bar label. Will be available to screen readers if `showLabel` is false.
+     */
+    label: string;
+    /**
+     * Message or description used to help clarify the usage of the progress bar.
+     */
+    message?: string;
+    /**
+     * Position of the message relative to the progress bar.
+     */
+    messagePosition?: 'above' | 'below';
+    /**
+     * Percent complete.
+     */
+    percentage: number;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
     showLabel?: boolean;
+    /**
+     * Should the percentage label be visible?
+     */
     showPercentage?: boolean;
-    size?: string;
-    className: any;
-}): React.JSX.Element;
-export namespace ProgressBar {
-    namespace propTypes {
-        let colorBreakpoints: PropTypes.Requireable<PropTypes.InferProps<{
-            colorType: PropTypes.Validator<string>;
-            percentage: PropTypes.Validator<number>;
-        }>[]>;
-        let id: PropTypes.Requireable<string>;
-        let label: PropTypes.Validator<string>;
-        let message: PropTypes.Requireable<string>;
-        let messagePosition: PropTypes.Requireable<string>;
-        let percentage: PropTypes.Validator<number>;
-        let showLabel: PropTypes.Requireable<boolean>;
-        let showPercentage: PropTypes.Requireable<boolean>;
-        let size: PropTypes.Requireable<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Size of the progress bar.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * ProgressBar UI component
+ */
+export declare const ProgressBar: ({ colorBreakpoints, id, label, message, messagePosition, percentage, showLabel, showPercentage, size, className, ...props }: ProgressBarProps) => React.JSX.Element;
+export {};

package/_dist/components/progress-indicators/ProgressRing/ProgressRing.d.ts

@@ -1,25 +1,41 @@
-export function ProgressRing({ id, innerLabel, label, percentage, showLabel, showPercentage, size, className, ...props }: {
-    [x: string]: any;
-    id: any;
-    innerLabel: any;
-    label: any;
-    percentage: any;
+import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './progress-ring.css';
+interface ProgressRingProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * ID of the Progress Ring. If not provided, a unique ID will be generated.
+     */
+    id?: string;
+    /**
+     * Inner label for the Progress Ring. May be used for showing a percentage or a count of steps.
+     */
+    innerLabel?: ReactNode;
+    /**
+     * Label for the Progress Ring. Will be available to screen readers if `showLabel` is false.
+     */
+    label: string;
+    /**
+     * Percentage of progress.
+     */
+    percentage: number;
+    /**
+     * Should the label be visible? If false, it will render for screen readers only.
+     */
     showLabel?: boolean;
+    /**
+     * Should the percentage be visible? Will be overridden by `innerLabel` if one is provided.
+     */
     showPercentage?: boolean;
-    size?: string;
-    className: any;
-}): React.JSX.Element;
-export namespace ProgressRing {
-    namespace propTypes {
-        let id: PropTypes.Requireable<string>;
-        let innerLabel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        let label: PropTypes.Validator<string>;
-        let percentage: PropTypes.Validator<number>;
-        let showLabel: PropTypes.Requireable<boolean>;
-        let showPercentage: PropTypes.Requireable<boolean>;
-        let size: PropTypes.Requireable<string>;
-        let className: PropTypes.Requireable<string>;
-    }
+    /**
+     * Size of the progress ring.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional class names
+     */
+    className?: string;
 }
-import React from 'react';
-import PropTypes from 'prop-types';
+/**
+ * ProgressRing UI component
+ */
+export declare const ProgressRing: ({ id, innerLabel, label, percentage, showLabel, showPercentage, size, className, ...props }: ProgressRingProps) => React.JSX.Element;
+export {};

package/_dist/css/component-css/pds-avatar.css

@@ -1 +1 @@
-.pds-avatar{display:inline-block}.pds-avatar,.pds-avatar__inner{--pds-avatar-size:1.953rem;border:.0625rem solid transparent;height:var(--pds-avatar-size);justify-content:center;width:var(--pds-avatar-size)}.pds-avatar__inner{align-items:center;background-color:var(--pds-color-background-default);border-radius:100%;display:inline-flex}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--xs,.pds-avatar__inner--xs .pds-avatar__inner{--pds-avatar-size:1rem}.pds-avatar--sm,.pds-avatar__inner--sm .pds-avatar__inner{--pds-avatar-size:1.563rem}.pds-avatar--md,.pds-avatar__inner--md .pds-avatar__inner{--pds-avatar-size:1.953rem}.pds-avatar--lg,.pds-avatar__inner--lg .pds-avatar__inner{--pds-avatar-size:2.441rem}a.pds-avatar__inner{outline:1px solid transparent;outline-offset:.03125rem;transition:all 0s ease-out}a.pds-avatar__inner:hover{outline:1px solid var(--pds-color-interactive-link-hover)}a.pds-avatar__inner:focus-visible{outline-width:2px}.pds-avatar__inner img{border-radius:100%;height:100%;width:auto}.pds-avatar__user-fallback{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none'%3E%3Ccircle cx='12.5' cy='12.5' r='12.5' fill='%23CFCFD3'/%3E%3Cpath fill='%2323232D' d='M12.5 11.75A3.48 3.48 0 0 1 9.465 10a3.48 3.48 0 0 1 0-3.5A3.54 3.54 0 0 1 12.5 4.75c1.23 0 2.379.684 3.008 1.75a3.48 3.48 0 0 1 0 3.5 3.47 3.47 0 0 1-3.008 1.75m-1.258 1.313h2.488a4.89 4.89 0 0 1 4.895 4.894c0 .438-.383.793-.82.793H7.168a.794.794 0 0 1-.793-.793c0-2.707 2.16-4.895 4.867-4.895'/%3E%3C/svg%3E")}
+.pds-avatar{--pds-avatar-size:1.953rem;align-items:center;border:.0625rem solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--pds-avatar-size);width:var(--pds-avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.09375rem}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.09375rem}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--image img{border-radius:100%;height:100%;width:auto}.pds-avatar--xs{--pds-avatar-size:1rem}.pds-avatar--sm{--pds-avatar-size:1.563rem}.pds-avatar--md{--pds-avatar-size:1.953rem}.pds-avatar--lg{--pds-avatar-size:2.441rem}