@pantheon-systems/pds-toolkit-react 1.0.0-dev.9999 → 1.1.0

package/README.md

@@ -4,7 +4,7 @@
 
 This toolkit provides assets for use within a React project and a Storybook instance to preview the components.
 
-[Published Storybook](https://live-pds-toolkit-react.appa.pantheon.site/)
+[Published Storybook](https://pds-react.pantheon.io/)
 
 ## Toolkit philosophy and scope
 

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

@@ -1,10 +1,14 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './avatar.css';
 export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Aria label for the avatar when used as a link. This is required if using a link.
      */
     ariaLabel?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * If true, a user icon will be displayed with the fallback gradient when an image is not provided.
      */
@@ -25,12 +29,8 @@ export interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
      * Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
      */
     uniqueId?: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * Avatar UI component
  */
-export declare const Avatar: ({ ariaLabel, hasUserFallback, imageSrc, linkContent, size, uniqueId, className, ...props }: AvatarProps) => React.JSX.Element;
+export declare const Avatar: ({ ariaLabel, className, hasUserFallback, imageSrc, linkContent, size, uniqueId, ...props }: AvatarProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/BranchDiff/BranchDiff.d.ts

@@ -1,9 +1,17 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import './branch-diff.css';
 /**
  * Prop types for BranchDiff
  */
 export interface BranchDiffProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
     /**
      * Is the component in the process of loading?
      */
@@ -28,16 +36,8 @@ export interface BranchDiffProps extends ComponentPropsWithoutRef<'div'> {
      * A description for the `numberBehind` value.
      */
     numberBehindDescription?: string;
-    /**
-     * Custom width in rems for the component. This will override the default.
-     */
-    componentWidth?: number;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * BranchDiff UI component
  */
-export declare const BranchDiff: ({ isLoading, loadingText, numberAhead, numberAheadDescription, numberBehind, numberBehindDescription, componentWidth, className, ...props }: BranchDiffProps) => React.JSX.Element;
+export declare const BranchDiff: ({ className, componentWidth, isLoading, loadingText, numberAhead, numberAheadDescription, numberBehind, numberBehindDescription, ...props }: BranchDiffProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/CTALink/CTALink.d.ts

@@ -1,6 +1,10 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './cta-link.css';
 export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * A link element using the router of your choice.
      */
@@ -9,12 +13,8 @@ export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
      * Size of link
      */
     size?: 'sm' | 'md';
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * CTA Link UI component
  */
-export declare const CTALink: ({ linkContent, size, className, ...props }: CTALinkProps) => React.JSX.Element;
+export declare const CTALink: ({ className, linkContent, size, ...props }: CTALinkProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/CTASlice/CTASlice.d.ts

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { ContainerWidth, HeadingLevel } from '@libs/types/custom-types';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ContainerWidth, HeadingLevel } from '../../libs/types/custom-types';
 import './../buttons/Button/button.css';
 import './cta-slice.css';
 interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
@@ -7,6 +7,10 @@ interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
      * Background color of slice
      */
     backgroundColor?: 'default' | 'secondary';
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * PDS container width.
      */
@@ -31,13 +35,9 @@ interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
      * Optional secondary link content
      */
     secondaryLinkContent?: ReactNode;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * CTA Slice UI component
  */
-export declare const CTASlice: ({ backgroundColor, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, className, ...props }: CTASliceProps) => React.JSX.Element;
+export declare const CTASlice: ({ backgroundColor, className, containerWidth, headingLevel, headingText, leadText, primaryLinkContent, secondaryLinkContent, ...props }: CTASliceProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/Callout/Callout.d.ts

@@ -1,12 +1,17 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { StatusType } from '../../libs/types/custom-types';
 import './callout.css';
-type CalloutType = 'info' | 'success' | 'warning' | 'critical' | 'discovery' | 'code' | 'earlyAccess';
+type CalloutType = StatusType | 'code' | 'earlyAccess';
 type TypeLabels = Record<CalloutType, string>;
 export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Callout main content.
      */
-    children: React.ReactNode;
+    children: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Callout title.
      */
@@ -19,13 +24,9 @@ export interface CalloutProps extends ComponentPropsWithoutRef<'div'> {
      * Callout type labels. Provide translation strings if necessary.
      */
     typeLabels?: TypeLabels;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * Callout UI component
  */
-export declare const Callout: ({ children, title, type, typeLabels, className, ...props }: CalloutProps) => React.JSX.Element;
+export declare const Callout: ({ children, className, title, type, typeLabels, ...props }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/Callout/sample-callout-content.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const infoCalloutSample: React.JSX.Element;
+export declare const infoCalloutSample: import("react/jsx-runtime").JSX.Element;

package/_dist/components/CodeBlock/CodeBlock.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-diff';
 import './code-block.css';
@@ -8,6 +8,10 @@ type SupportedLanguages = 'bash' | 'css' | 'diff' | 'html' | 'js' | 'json' | 'js
  * Prop types for CodeBlock
  */
 export interface CodeBlockProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Code to display.
      */
@@ -73,13 +77,9 @@ export interface CodeBlockProps extends ComponentPropsWithoutRef<'div'> {
      * Default is false
      */
     shouldWrap?: boolean;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * CodeBlock UI component
  */
-export declare const CodeBlock: ({ code, colorType, copyButtonLabel, hasCopyButton, hasLineNumbers, hasPrompt, height, isLoading, language, loadingLineCount, maxHeight, promptSymbol, renderAsLegacy, shouldWrap, className, ...props }: CodeBlockProps) => React.JSX.Element;
+export declare const CodeBlock: ({ className, code, colorType, copyButtonLabel, hasCopyButton, hasLineNumbers, hasPrompt, height, isLoading, language, loadingLineCount, maxHeight, promptSymbol, renderAsLegacy, shouldWrap, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/ComparisonList/ComparisonList.d.ts

@@ -1,9 +1,9 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './comparison-list.css';
 interface TypeLabels {
+    addon: string;
     included: string;
     notIncluded: string;
-    addon: string;
 }
 export interface ListItems {
     text: string;
@@ -11,9 +11,9 @@ export interface ListItems {
 }
 export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Icon labels
+     * Additional class names
      */
-    typeLabels?: TypeLabels;
+    className?: string;
     /**
      * List items
      */
@@ -31,12 +31,12 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
      */
     renderTypeLabels?: boolean;
     /**
-     * Additional class names
+     * Icon labels
      */
-    className?: string;
+    typeLabels?: TypeLabels;
 }
 /**
  * ComparisonList UI component
  */
-export declare const ComparisonList: ({ listItems, listLabel, moreLink, renderTypeLabels, typeLabels, className, ...props }: ComparisonListProps) => React.JSX.Element;
+export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/_dist/components/DashboardStat/DashboardStat.d.ts

@@ -1,28 +1,28 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import './dashboard-stat.css';
-export type DashBoardStatStatus = 'success' | 'warning' | 'launch' | 'error' | 'ready' | 'notReady';
+export type DashboardStatStatus = 'success' | 'warning' | 'launch' | 'error' | 'ready' | 'notReady';
 /**
  * Prop types for DashboardStat
  */
 export interface DashboardStatProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Title of the stat, displayed as the main heading of the component.
-     */
-    title?: string;
-    /**
-     * Status of the stat, which determines the icon and icon color.
+     * Additional class names.
      */
-    status?: DashBoardStatStatus;
+    className?: string;
     /**
      *  Value of the stat, displayed next to the status icon.
      */
     stat?: string | number;
     /**
-     * Additional class names.
+     * Status of the stat, which determines the icon and icon color.
      */
-    className?: string;
+    status?: DashboardStatStatus;
+    /**
+     * Title of the stat, displayed as the main heading of the component.
+     */
+    title?: string;
 }
 /**
  * DashboardStat UI component
  */
-export declare const DashboardStat: ({ title, status, stat, className, ...props }: DashboardStatProps) => React.JSX.Element;
+export declare const DashboardStat: ({ className, stat, status, title, ...props }: DashboardStatProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/FileDiff/FileDiff.d.ts

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import './file-diff.css';
 /**
  * Prop types for FileDiff
@@ -8,6 +8,14 @@ export interface FileDiffProps extends ComponentPropsWithoutRef<'div'> {
      *  Number of added lines (green bar).
      */
     additions: number;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Custom width in rems for the component. This will override the default.
+     */
+    componentWidth?: number;
     /**
      * Number of removed lines (red bar).
      */
@@ -16,20 +24,12 @@ export interface FileDiffProps extends ComponentPropsWithoutRef<'div'> {
      * Object with strings for tooltips and screen reader labels.
      */
     labelStrings?: {
-        linesChanged?: string;
         additions?: string;
         deletions?: string;
+        linesChanged?: string;
     };
-    /**
-     * Custom width in rems for the component. This will override the default.
-     */
-    componentWidth?: number;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * FileDiff UI component
  */
-export declare const FileDiff: ({ additions, deletions, labelStrings, className, componentWidth, ...props }: FileDiffProps) => React.JSX.Element;
+export declare const FileDiff: ({ additions, className, componentWidth, deletions, labelStrings, ...props }: FileDiffProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/FlowSteps/FlowSteps.d.ts

@@ -1,19 +1,23 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './flow-steps.css';
 export type FlowStep = {
-    /**
-     * The header text of the step
-     */
-    header: string | ReactNode;
     /**
      * The content of the step
      */
     content?: string | ReactNode;
+    /**
+     * The header text of the step
+     */
+    header: string | ReactNode;
 };
 /**
  * Prop types for FlowSteps
  */
 export interface FlowStepsProps extends ComponentPropsWithoutRef<'ol'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Alignment of the step content.
      */
@@ -26,12 +30,8 @@ export interface FlowStepsProps extends ComponentPropsWithoutRef<'ol'> {
      * The list of steps to display.
      */
     steps: FlowStep[];
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * FlowSteps UI component
  */
-export declare const FlowSteps: ({ contentAlignment, layoutDirection, steps, className, ...props }: FlowStepsProps) => React.JSX.Element;
+export declare const FlowSteps: ({ className, contentAlignment, layoutDirection, steps, ...props }: FlowStepsProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/components/FlowSteps/example-steps.d.ts

@@ -1,13 +1,12 @@
-import React from 'react';
 export declare const stepsWithoutExtraContent: {
     header: string;
 }[];
 export declare const stepsWithCode: ({
     header: string;
-    content: React.JSX.Element;
+    content: import("react/jsx-runtime").JSX.Element;
 } | {
-    header: React.JSX.Element;
-    content: React.JSX.Element;
+    header: import("react/jsx-runtime").JSX.Element;
+    content: import("react/jsx-runtime").JSX.Element;
 })[];
 export declare const stepsWithText: {
     header: string;

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

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './link-new-window.css';
 /**
  * Prop types for LinkNewWindow
@@ -8,6 +8,10 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
      * Content for the LinkNewWindow.
      */
     children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
      */
@@ -24,12 +28,8 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
      * URL where the component should link to.
      */
     url: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * LinkNewWindow UI component
  */
-export declare const LinkNewWindow: ({ children, fontSize, isLoading, newWindowText, url, className, ...props }: LinkNewWindowProps) => React.JSX.Element;
+export declare const LinkNewWindow: ({ children, className, fontSize, isLoading, newWindowText, url, ...props }: LinkNewWindowProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './modal.css';
 export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
     /**
@@ -9,6 +9,10 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
      * Main content for modal.
      */
     children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Text for close button aria-label attribute. Only used if hasCloseButton is true.
      */
@@ -43,12 +47,8 @@ export interface ModalProps extends ComponentPropsWithoutRef<'div'> {
      * Text for modal title
      */
     title: string;
-    /**
-     * Additional class names
-     */
-    className?: string;
 }
 /**
  * Modal UI component
  */
-export declare const Modal: ({ ariaLabel, children, closeButtonLabel, contentMaxHeight, disableOutsideClick, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, className, ...props }: ModalProps) => React.JSX.Element;
+export declare const Modal: ({ ariaLabel, children, className, closeButtonLabel, contentMaxHeight, disableOutsideClick, hasCloseButton, modalIsOpen, setModalIsOpen, size, title, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef } from 'react';
-import { HeadingLevelCommon } from '@libs/types/custom-types';
+import { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevelCommon } from '../../libs/types/custom-types';
 import './pagination.css';
 /**
  * Prop types for Pagination
@@ -10,6 +10,10 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
      * This will change the number of page buttons shown in total.
      */
     bufferCount?: number;
+    /**
+     * Additional class names.
+     */
+    className?: string;
     /**
      * Current page number.
      */
@@ -30,8 +34,8 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
      * Label strings for previous and next buttons.
      */
     labelStrings?: {
-        previous: string;
         next: string;
+        previous: string;
     };
     /**
      * Callback to handle page change.
@@ -43,12 +47,8 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
      * 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;
+export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,14 @@
-import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { 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'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
     /**
      * Color type. Use 'default' unless the logo is used on an approved dark background.
      */
@@ -21,12 +25,8 @@ export interface PantheonLogoProps extends ComponentPropsWithoutRef<'div'> {
      * 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;
+export declare const PantheonLogo: ({ className, colorType, displayType, linkContent, subBrand, ...props }: PantheonLogoProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,3 @@
-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;
+export declare const logoFull: import("react/jsx-runtime").JSX.Element;
+export declare const logoIcon: import("react/jsx-runtime").JSX.Element;
+export declare const logoWordmark: import("react/jsx-runtime").JSX.Element;

package/_dist/components/Picture/Picture.d.ts

@@ -1,37 +1,37 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
 import './picture.css';
 /**
  * Prop types for Picture
  */
 export interface PictureProps extends ComponentPropsWithoutRef<'img'> {
-    /**
-     * The WebP image source (preferred for modern browsers)
-     */
-    srcWebp: string;
-    /**
-     * The fallback image source (e.g., PNG or JPG)
-     */
-    srcFallback: string;
     /**
      * Alt text for the image. Defaults to empty string for decorative images.
      */
     alt?: string;
     /**
-     * Optional width for the image (CSS value, e.g., '100px', '50%', 'auto').
-     * If not provided, the image will be sized responsively by its container.
+     * Additional class names
      */
-    width?: string | number;
+    className?: string;
     /**
      * Optional height for the image (CSS value, e.g., '100px', '50%', 'auto').
      * If not provided, the image will be sized responsively by its container.
      */
     height?: string | number;
     /**
-     * Additional class names
+     * The fallback image source (e.g., PNG or JPG)
      */
-    className?: string;
+    srcFallback: string;
+    /**
+     * The WebP image source (preferred for modern browsers)
+     */
+    srcWebp: string;
+    /**
+     * Optional width for the image (CSS value, e.g., '100px', '50%', 'auto').
+     * If not provided, the image will be sized responsively by its container.
+     */
+    width?: string | number;
 }
 /**
  * Picture UI component
  */
-export declare const Picture: ({ srcWebp, srcFallback, alt, width, height, className, ...props }: PictureProps) => React.JSX.Element;
+export declare const Picture: ({ alt, className, height, srcFallback, srcWebp, width, ...props }: PictureProps) => import("react/jsx-runtime").JSX.Element;