@pantheon-systems/pds-toolkit-react 1.0.0-alpha.13 → 1.0.0-alpha.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { ComponentPropsWithoutRef } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import { PDSIcon } from '@components/icons/Icon/Icon';
3
3
  import './utility-button.css';
4
4
  /**
@@ -44,7 +44,13 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
44
44
  /**
45
45
  * The text of the button.
46
46
  */
47
- label: string;
47
+ label?: string;
48
+ /**
49
+ * A link element using the router of your choice.
50
+ * Use `linkContent` to render a link instead of text.
51
+ * In this case, the `buttonProps`, `label`, and `onClick` props will be ignored.
52
+ */
53
+ linkContent?: ReactNode;
48
54
  /**
49
55
  * Click event handler callback.
50
56
  */
@@ -61,4 +67,4 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
61
67
  /**
62
68
  * UtilityButton UI component
63
69
  */
64
- export declare const UtilityButton: ({ buttonProps, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isWorking, isMonospace, label, onClick, tooltipText, className, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
70
+ export declare const UtilityButton: ({ buttonProps, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isWorking, isMonospace, label, linkContent, onClick, tooltipText, className, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -17,7 +17,7 @@ export interface HorizontalEmptyStateProps extends ComponentPropsWithoutRef<'div
17
17
  ctaRegion?: ReactNode;
18
18
  /**
19
19
  * Pantheon collage image to display next to the main content.
20
- * Can be a string (image path/URL) or a React node (e.g., <Picture />).
20
+ * Can be a string (image path/URL) or a React node (e.g., the Picture component).
21
21
  * If a video is provided, this will be ignored.
22
22
  */
23
23
  image?: string | React.ReactNode;
@@ -1 +1 @@
1
- .pds-avatar{--avatar-size:1.953rem;--avatar-icon-size:1.125rem;align-items:center;border:1px solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:2px}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;margin:auto;object-fit:cover;width:100%}.pds-avatar__user-icon{color:var(--pds-color-fg-reverse);height:var(--avatar-icon-size);width:var(--avatar-icon-size)}.pds-avatar--xs{--avatar-size:1rem;--avatar-icon-size:0.5625rem}.pds-avatar--sm{--avatar-size:1.563rem;--avatar-icon-size:0.875rem}.pds-avatar--md{--avatar-size:1.953rem;--avatar-icon-size:1.125rem}.pds-avatar--lg{--avatar-size:2.441rem;--avatar-icon-size:1.375rem}.pds-avatar--xl{--avatar-size:3.815rem;--avatar-icon-size:2.25rem}
1
+ .pds-avatar{--avatar-size:1.953rem;--avatar-icon-size:1.125rem;align-items:center;border:1px solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:2px}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-avatar--image{border-color:var(--pds-color-border-default);height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;margin:auto;object-fit:cover;width:100%}.pds-avatar__user-icon{color:var(--pds-color-fg-reverse);height:var(--avatar-icon-size);width:var(--avatar-icon-size)}.pds-avatar--xs{--avatar-size:1rem;--avatar-icon-size:0.5625rem}.pds-avatar--sm{--avatar-size:1.563rem;--avatar-icon-size:0.875rem}.pds-avatar--md{--avatar-size:1.953rem;--avatar-icon-size:1.125rem}.pds-avatar--lg{--avatar-size:2.441rem;--avatar-icon-size:1.375rem}.pds-avatar--xl{--avatar-size:3.815rem;--avatar-icon-size:2.25rem}
@@ -1,4 +1,4 @@
1
- a.pds-button,button.pds-button{--button-color-background:var(--pds-color-button-primary-background-default);--button-color-foreground:var(--pds-color-button-primary-foreground-default);--button-color-border:var(--pds-color-button-primary-border-default);align-items:center;background-color:var(--button-color-background);border:1px solid var(--button-color-border);border-radius:.1875rem;box-sizing:border-box;color:var(--button-color-foreground);cursor:pointer;display:inline-flex;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;gap:.64rem;height:2.25rem;justify-content:center;letter-spacing:.025em;line-height:1;max-height:2.25rem;padding:.625rem .8125rem;text-decoration:none;transition:all .2s ease-in-out 0s;white-space:nowrap}.pds-button--full-width{width:100%}.pds-button__icon--wrapper{align-items:center;display:flex}.pds-button__icon{flex-shrink:0}.pds-button__loading-indicator{--spinner-size:1rem;--spinner-color-1:#fff;--spinner-color-2:#f1f1f1;--spinner-color-3:#cfcfd3}a.pds-button:disabled,button.pds-button:disabled{cursor:not-allowed;opacity:50%}a.pds-button:hover,button.pds-button:hover:enabled{--button-color-background:var(--pds-color-button-primary-background-hover);--button-color-border:var(--pds-color-button-primary-border-hover);--button-color-foreground:var(--pds-color-button-primary-foreground-hover)}a.pds-button:active,button.pds-button:active:enabled{--button-color-background:var(--pds-color-button-primary-background-active);--button-color-border:var(--pds-color-button-primary-border-active);--button-color-foreground:var(--pds-color-button-primary-foreground-active)}a.pds-button:focus-visible,button.pds-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.0625rem}a.pds-button.pds-button--sm,button.pds-button.pds-button--sm{font-size:.833rem;gap:.41rem;height:2rem;max-height:2rem;padding:.5rem .625rem}a.pds-button.pds-button--sm .pds-button__loading-indicator,button.pds-button.pds-button--sm .pds-button__loading-indicator{--spinner-size:0.8rem}a.pds-button.pds-button--lg,button.pds-button.pds-button--lg{font-size:1.2rem;height:3rem;max-height:3rem;padding:.9375rem 1.25rem}a.pds-button.pds-button--lg .pds-button__loading-indicator,button.pds-button.pds-button--lg .pds-button__loading-indicator{--spinner-size:1.25rem}a.pds-button.pds-button--secondary,button.pds-button.pds-button--secondary{--button-color-background:var(
1
+ a.pds-button,button.pds-button{--button-color-background:var(--pds-color-button-primary-background-default);--button-color-foreground:var(--pds-color-button-primary-foreground-default);--button-color-border:var(--pds-color-button-primary-border-default);align-items:center;background-color:var(--button-color-background);border:1px solid var(--button-color-border);border-radius:.1875rem;box-sizing:border-box;color:var(--button-color-foreground);cursor:pointer;display:inline-flex;font-family:Poppins,sans-serif;font-size:1rem;font-weight:600;gap:.64rem;height:2.25rem;justify-content:center;letter-spacing:.025em;line-height:1;max-height:2.25rem;padding:.625rem .8125rem;text-decoration:none;transition:all .2s ease-in-out 0s;white-space:nowrap}.pds-button--full-width{width:100%}.pds-button__icon--wrapper{align-items:center;display:flex}.pds-button__icon{flex-shrink:0}.pds-button__loading-indicator{--spinner-size:1rem;--spinner-color-1:#fff;--spinner-color-2:#f1f1f1;--spinner-color-3:#cfcfd3}a.pds-button:disabled,button.pds-button:disabled{cursor:not-allowed;opacity:63%}a.pds-button:hover,button.pds-button:hover:enabled{--button-color-background:var(--pds-color-button-primary-background-hover);--button-color-border:var(--pds-color-button-primary-border-hover);--button-color-foreground:var(--pds-color-button-primary-foreground-hover)}a.pds-button:active,button.pds-button:active:enabled{--button-color-background:var(--pds-color-button-primary-background-active);--button-color-border:var(--pds-color-button-primary-border-active);--button-color-foreground:var(--pds-color-button-primary-foreground-active)}a.pds-button:focus-visible,button.pds-button:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.0625rem}a.pds-button.pds-button--sm,button.pds-button.pds-button--sm{font-size:.833rem;gap:.41rem;height:2rem;max-height:2rem;padding:.5rem .625rem}a.pds-button.pds-button--sm .pds-button__loading-indicator,button.pds-button.pds-button--sm .pds-button__loading-indicator{--spinner-size:0.8rem}a.pds-button.pds-button--lg,button.pds-button.pds-button--lg{font-size:1.2rem;height:3rem;max-height:3rem;padding:.9375rem 1.25rem}a.pds-button.pds-button--lg .pds-button__loading-indicator,button.pds-button.pds-button--lg .pds-button__loading-indicator{--spinner-size:1.25rem}a.pds-button.pds-button--secondary,button.pds-button.pds-button--secondary{--button-color-background:var(
2
2
  --pds-color-button-secondary-background-default
3
3
  );--button-color-border:var(--pds-color-button-secondary-border-default);--button-color-foreground:var(
4
4
  --pds-color-button-secondary-foreground-default
@@ -1 +1 @@
1
- .pds-checkbox{--checkbox-font-size:1rem;--checkbox-input-size:1rem;--checkbox-input-gap:0.512rem;--checkbox-box-shift:0.09375rem;line-height:1.2}.pds-checkbox--sm{--checkbox-font-size:0.833rem;--checkbox-input-size:0.9rem;--checkbox-box-shift:0.025rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:start;column-gap:var(--checkbox-input-gap);display:grid;grid-template-columns:var(--checkbox-input-size) auto;margin-block-end:0}.pds-checkbox__label-text{color:var(--pds-color-fg-default);font-size:var(--checkbox-font-size);font-weight:400}.pds-checkbox__label-text--s{font-size:.833rem}.pds-checkbox__box{align-items:center;background-color:var(--pds-color-input-background);border:2px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;display:flex;height:var(--checkbox-input-size);padding:.0625rem;position:relative;top:var(--checkbox-box-shift);width:var(--checkbox-input-size)}.pds-checkbox__box,.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{transition:var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-interactive-focus);border-color:var(--pds-color-interactive-focus)}.pds-checkbox__icon{color:var(--pds-color-input-checkbox-checked-foreground);transition:var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay)}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox input[type=checkbox]:focus-visible~label .pds-checkbox__box{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:50%}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--checkbox-input-size)*2 - var(--checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--checkbox-input-size)*4 - var(--checkbox-input-gap)*2)}
1
+ .pds-checkbox{--checkbox-font-size:1rem;--checkbox-input-size:1rem;--checkbox-input-gap:0.512rem;--checkbox-box-shift:0.09375rem;line-height:1.2}.pds-checkbox--sm{--checkbox-font-size:0.833rem;--checkbox-input-size:0.9rem;--checkbox-box-shift:0.025rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:start;column-gap:var(--checkbox-input-gap);display:grid;grid-template-columns:var(--checkbox-input-size) auto;margin-block-end:0}.pds-checkbox__label-text{color:var(--pds-color-fg-default);font-size:var(--checkbox-font-size);font-weight:400}.pds-checkbox__label-text--s{font-size:.833rem}.pds-checkbox__box{align-items:center;background-color:var(--pds-color-input-background);border:2px solid var(--pds-color-border-input);border-radius:.1875rem;box-sizing:border-box;display:flex;height:var(--checkbox-input-size);padding:.0625rem;position:relative;top:var(--checkbox-box-shift);width:var(--checkbox-input-size)}.pds-checkbox__box,.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{transition:var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-interactive-focus);border-color:var(--pds-color-interactive-focus)}.pds-checkbox__icon{color:var(--pds-color-input-checkbox-checked-foreground);transition:var(--pds-animation-transition-default-duration) var(--pds-animation-transition-default-timing-function) var(--pds-animation-transition-default-delay)}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox input[type=checkbox]:focus-visible~label .pds-checkbox__box{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:63%}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--checkbox-input-size)*2 - var(--checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--checkbox-input-size)*4 - var(--checkbox-input-gap)*2)}