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

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.
Files changed (23) hide show
  1. package/_dist/components/buttons/UtilityButton/UtilityButton.d.ts +9 -3
  2. package/_dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts +1 -1
  3. package/_dist/components/panels/PanelList/PanelList.d.ts +9 -1
  4. package/_dist/components/panels/PanelList/PanelRow.d.ts +6 -3
  5. package/_dist/css/component-css/pds-avatar.css +1 -1
  6. package/_dist/css/component-css/pds-button.css +1 -1
  7. package/_dist/css/component-css/pds-checkbox.css +1 -1
  8. package/_dist/css/component-css/pds-index.css +7 -7
  9. package/_dist/css/component-css/pds-input-utilities.css +1 -1
  10. package/_dist/css/component-css/pds-panel-list.css +1 -1
  11. package/_dist/css/component-css/pds-pantheon-logo.css +1 -1
  12. package/_dist/css/component-css/pds-radio-group.css +1 -1
  13. package/_dist/css/component-css/pds-section-message.css +1 -1
  14. package/_dist/css/component-css/pds-segmented-button.css +1 -1
  15. package/_dist/css/component-css/pds-side-nav-compact.css +1 -1
  16. package/_dist/css/component-css/pds-side-nav.css +1 -1
  17. package/_dist/css/component-css/pds-tabs.css +1 -1
  18. package/_dist/css/component-css/pds-utility-button.css +1 -1
  19. package/_dist/css/pds-components.css +7 -7
  20. package/_dist/index.css +1 -1
  21. package/_dist/index.js +3405 -3325
  22. package/_dist/index.js.map +1 -1
  23. package/package.json +5 -5
package/_dist/components/buttons/UtilityButton/UtilityButton.d.ts CHANGED
@@ -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;
package/_dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts CHANGED
@@ -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;
package/_dist/components/panels/PanelList/PanelList.d.ts CHANGED
@@ -17,6 +17,14 @@ export interface PanelListProps extends ComponentPropsWithoutRef<'ul'> {
17
17
  * Whether to have an outside border. There will always be a border between rows.
18
18
  */
19
19
  hasBorder?: boolean;
20
+ /**
21
+ * Translation strings for labels that will be passed to all PanelRow children.
22
+ * Individual PanelRow components can override these with their own labelStrings.
23
+ */
24
+ labelStrings?: {
25
+ buttonExpand?: string;
26
+ buttonCollapse?: string;
27
+ };
20
28
  /**
21
29
  * Additional class names.
22
30
  */
@@ -25,4 +33,4 @@ export interface PanelListProps extends ComponentPropsWithoutRef<'ul'> {
25
33
  /**
26
34
  * PanelList UI component
27
35
  */
28
- export declare const PanelList: ({ background, children, hasBorder, className, ...props }: PanelListProps) => import("react/jsx-runtime").JSX.Element;
36
+ export declare const PanelList: ({ background, children, hasBorder, labelStrings, className, ...props }: PanelListProps) => import("react/jsx-runtime").JSX.Element;
package/_dist/components/panels/PanelList/PanelRow.d.ts CHANGED
@@ -17,11 +17,14 @@ export interface PanelRowProps extends ComponentPropsWithoutRef<'li'> {
17
17
  */
18
18
  isExpandable?: boolean;
19
19
  /**
20
- * Aria-label for the expand button.
20
+ * Translation strings for labels.
21
21
  */
22
- expandButtonAriaLabel?: string;
22
+ labelStrings?: {
23
+ buttonExpand?: string;
24
+ buttonCollapse?: string;
25
+ };
23
26
  }
24
27
  /**
25
28
  * PanelRow UI component
26
29
  */
27
- export declare const PanelRow: ({ children, className, isExpandable, expandButtonAriaLabel, ...props }: PanelRowProps) => import("react/jsx-runtime").JSX.Element;
30
+ export declare const PanelRow: ({ children, className, isExpandable, labelStrings, ...props }: PanelRowProps) => import("react/jsx-runtime").JSX.Element;
package/_dist/css/component-css/pds-avatar.css CHANGED
@@ -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}
package/_dist/css/component-css/pds-button.css CHANGED
@@ -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
package/_dist/css/component-css/pds-checkbox.css CHANGED
@@ -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)}