@pantheon-systems/pds-toolkit-react 1.0.0-dev.250 → 1.0.0-dev.251

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

@@ -4,6 +4,14 @@ import './branch-diff.css';
  * Prop types for BranchDiff
  */
 export interface BranchDiffProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Is the component in the process of loading?
+     */
+    isLoading?: boolean;
+    /**
+     * Text to be displayed in tooltip while component is loading.
+     */
+    loadingText?: string;
     /**
      * The number of commits the current branch is ahead of its upstream branch.
      */
@@ -32,4 +40,4 @@ export interface BranchDiffProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * BranchDiff UI component
  */
-export declare const BranchDiff: ({ numberAhead, numberAheadDescription, numberBehind, numberBehindDescription, componentWidth, className, ...props }: BranchDiffProps) => React.JSX.Element;
+export declare const BranchDiff: ({ isLoading, loadingText, numberAhead, numberAheadDescription, numberBehind, numberBehindDescription, componentWidth, className, ...props }: BranchDiffProps) => React.JSX.Element;

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

@@ -12,6 +12,10 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
      * Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
      */
     fontSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Is the link in the process of loading?
+     */
+    isLoading?: boolean;
     /**
      * Translation string for the "opens in a new window" message.
      */
@@ -28,4 +32,4 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
 /**
  * LinkNewWindow UI component
  */
-export declare const LinkNewWindow: ({ children, fontSize, newWindowText, url, className, ...props }: LinkNewWindowProps) => React.JSX.Element;
+export declare const LinkNewWindow: ({ children, fontSize, isLoading, newWindowText, url, className, ...props }: LinkNewWindowProps) => React.JSX.Element;

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

@@ -21,6 +21,14 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
      * 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?
      */
@@ -45,4 +53,4 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * UtilityButton UI component
  */
-export declare const UtilityButton: ({ buttonProps, disabled, iconName, isCritical, isMonospace, label, onClick, tooltipText, className, ...props }: UtilityButtonProps) => React.JSX.Element;
+export declare const UtilityButton: ({ buttonProps, disabled, iconName, isCritical, isLoading, isWorking, isMonospace, label, onClick, tooltipText, className, ...props }: UtilityButtonProps) => React.JSX.Element;

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

@@ -0,0 +1,58 @@
+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';
+    /**
+     * 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`, 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'.
+     */
+    textIsJustified?: boolean;
+    /**
+     * The number of lines for text skeletons.
+     * Values can be between 1 and 5.
+     * This is only used when the shape is 'text-block'.
+     */
+    textLineCount?: number;
+    /**
+     * The font-size of the text skeleton.
+     * This is only used when the shape is 'text-block'.
+     */
+    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/panels/PanelList/PanelList.d.ts

@@ -10,7 +10,7 @@ export interface PanelListProps extends ComponentPropsWithoutRef<'ul'> {
      */
     background?: PanelListBackground;
     /**
-     * Children components. These will only render if PanelRow components are used.
+     * Children components. These should be PanelRow components.
      */
     children?: ReactNode;
     /**

package/_dist/css/component-css/pds-branch-diff.css

@@ -1 +1 @@
-.pds-branch-diff{display:flex;height:2rem;max-width:100%;width:100%}.pds-branch-diff .pds-branch-diff__behind{padding-bottom:4px;position:relative;text-align:right;width:50%}.pds-branch-diff .pds-branch-diff__behind .pds-branch-diff__behind-number{display:block;font-size:.833rem;font-weight:400;line-height:120%;padding-inline:.25rem;position:relative;top:-1px}.pds-branch-diff .pds-branch-diff__behind .pds-branch-diff__behind-line{background-color:var(--pds-color-neutral-300);border-bottom-left-radius:6.25rem;border-top-left-radius:6.25rem;height:8px;min-width:1px;position:absolute;right:0;transition:width .3s ease;width:41.95%}.pds-branch-diff .pds-branch-diff__ahead{border-color:var(--pds-color-neutral-400);border-left-style:solid;border-left-width:1px;padding-bottom:4px;position:relative;text-align:left;width:50%}.pds-branch-diff .pds-branch-diff__ahead .pds-branch-diff__ahead-number{display:block;font-size:.833rem;font-weight:400;line-height:120%;padding-inline:.25rem;position:relative;top:-1px}.pds-branch-diff .pds-branch-diff__ahead .pds-branch-diff__ahead-line{background-color:var(--pds-color-neutral-400);border-bottom-right-radius:6.25rem;border-top-right-radius:6.25rem;height:8px;left:0;min-width:1px;position:absolute;transition:width .3s ease;width:41.95%}.pds-branch-diff .pds-branch-diff__tooltip{padding-inline:0}
+.pds-branch-diff{height:2rem}.pds-branch-diff .pds-tooltip,.pds-branch-diff .pds-tooltip__trigger-custom{width:100%}.pds-branch-diff__content{display:flex;height:1.953rem}.pds-branch-diff__segment{position:relative;width:50%}.pds-branch-diff__segment--behind{text-align:right}.pds-branch-diff__segment--ahead{border-left:1px solid var(--pds-color-status-neutral-utility);text-align:left}.pds-branch-diff__number{display:block;font-size:.833rem;font-weight:400;height:1rem;line-height:120%;padding-block:.0625rem;padding-inline:.328rem;position:relative}.pds-branch-diff__line{height:.512rem;min-width:.0625rem;position:absolute;transition:width var(--pds-animation-transition-reveal-duration) var(--pds-animation-transition-default-timing-function);width:41.95%}.pds-branch-diff__line--behind{background-color:var(--pds-color-status-neutral-background);border-bottom-left-radius:var(--pds-border-radius-bar);border-top-left-radius:var(--pds-border-radius-bar);right:0}.pds-branch-diff__line--ahead{background-color:var(--pds-color-status-neutral-utility);border-bottom-right-radius:var(--pds-border-radius-bar);border-top-right-radius:var(--pds-border-radius-bar);left:0}.pds-branch-diff--loading .pds-branch-diff__segment--ahead{border-color:var(--pds-color-status-neutral-background)}.pds-branch-diff--loading .pds-branch-diff__line{background-color:var(--pulse-regular-base-color)}