@pantheon-systems/pds-toolkit-react 1.0.0-dev.261 → 1.0.0-dev.263
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.
- package/_dist/components/Picture/Picture.d.ts +37 -0
- package/_dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts +13 -5
- package/_dist/css/component-css/pds-dashboard-nav.css +1 -1
- package/_dist/css/component-css/pds-dashboard-search.css +1 -1
- package/_dist/css/component-css/pds-dropdown-menu.css +1 -1
- package/_dist/css/component-css/pds-index.css +4 -4
- package/_dist/css/component-css/pds-menu-button.css +1 -1
- package/_dist/css/component-css/pds-nav-menu.css +1 -1
- package/_dist/css/component-css/pds-navbar.css +1 -1
- package/_dist/css/component-css/pds-picture.css +1 -0
- package/_dist/css/design-tokens/pds-design-tokens.css +6 -4
- package/_dist/css/pds-components.css +4 -4
- package/_dist/css/pds-core.css +2 -2
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +1 -0
- package/_dist/index.js +1505 -1470
- package/_dist/index.js.map +1 -1
- package/_dist/vars/z-index.d.ts +15 -4
- package/package.json +2 -2
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './picture.css';
|
|
3
|
+
/**
|
|
4
|
+
* Prop types for Picture
|
|
5
|
+
*/
|
|
6
|
+
export interface PictureProps extends ComponentPropsWithoutRef<'img'> {
|
|
7
|
+
/**
|
|
8
|
+
* The WebP image source (preferred for modern browsers)
|
|
9
|
+
*/
|
|
10
|
+
srcWebp: string;
|
|
11
|
+
/**
|
|
12
|
+
* The fallback image source (e.g., PNG or JPG)
|
|
13
|
+
*/
|
|
14
|
+
srcFallback: string;
|
|
15
|
+
/**
|
|
16
|
+
* Alt text for the image. Defaults to empty string for decorative images.
|
|
17
|
+
*/
|
|
18
|
+
alt?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Optional width for the image (CSS value, e.g., '100px', '50%', 'auto').
|
|
21
|
+
* If not provided, the image will be sized responsively by its container.
|
|
22
|
+
*/
|
|
23
|
+
width?: string | number;
|
|
24
|
+
/**
|
|
25
|
+
* Optional height for the image (CSS value, e.g., '100px', '50%', 'auto').
|
|
26
|
+
* If not provided, the image will be sized responsively by its container.
|
|
27
|
+
*/
|
|
28
|
+
height?: string | number;
|
|
29
|
+
/**
|
|
30
|
+
* Additional class names
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Picture UI component
|
|
36
|
+
*/
|
|
37
|
+
export declare const Picture: ({ srcWebp, srcFallback, alt, width, height, className, ...props }: PictureProps) => React.JSX.Element;
|
|
@@ -17,12 +17,10 @@ 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
|
-
*
|
|
21
|
-
* See full documentation for details.
|
|
22
|
-
*
|
|
20
|
+
* Can be a string (image path/URL) or a React node (e.g., <Picture />).
|
|
23
21
|
* If a video is provided, this will be ignored.
|
|
24
22
|
*/
|
|
25
|
-
image?: string;
|
|
23
|
+
image?: string | React.ReactNode;
|
|
26
24
|
/**
|
|
27
25
|
* Will this be rendered within a panel?
|
|
28
26
|
* If true, the image and heading will be scaled down to fit within the panel.
|
|
@@ -50,6 +48,16 @@ export interface HorizontalEmptyStateProps extends ComponentPropsWithoutRef<'div
|
|
|
50
48
|
* If a video is provided, the image will be ignored.
|
|
51
49
|
*/
|
|
52
50
|
video?: VideoEmbedProps;
|
|
51
|
+
/**
|
|
52
|
+
* Width of the image container (CSS value, e.g., '40%', '30%', '300px').
|
|
53
|
+
* Default is '40%'.
|
|
54
|
+
*/
|
|
55
|
+
imageWidth?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Margin left of the image container (CSS value, e.g., '0', '10px', '20%').
|
|
58
|
+
* Default is '0'.
|
|
59
|
+
*/
|
|
60
|
+
imageMarginLeft?: string;
|
|
53
61
|
/**
|
|
54
62
|
* Additional class names
|
|
55
63
|
*/
|
|
@@ -58,4 +66,4 @@ export interface HorizontalEmptyStateProps extends ComponentPropsWithoutRef<'div
|
|
|
58
66
|
/**
|
|
59
67
|
* HorizontalEmptyState UI component
|
|
60
68
|
*/
|
|
61
|
-
export declare const HorizontalEmptyState: ({ alignment, ctaRegion, image, isWithinPanel, heading, headingLevel, message, video, className, ...props }: HorizontalEmptyStateProps) => React.JSX.Element;
|
|
69
|
+
export declare const HorizontalEmptyState: ({ alignment, ctaRegion, image, isWithinPanel, heading, headingLevel, message, video, imageWidth, imageMarginLeft, className, ...props }: HorizontalEmptyStateProps) => React.JSX.Element;
|
|
@@ -2,4 +2,4 @@
|
|
|
2
2
|
--pds-color-dashboard-nav-item-foreground-default
|
|
3
3
|
);--dashboard-nav-outline-color:var(--pds-color-interactive-focus);font-family:Poppins,sans-serif}.pds-dashboard-nav,.pds-dashboard-nav a{color:var(--dashboard-nav-foreground-color)}.pds-dashboard-nav a{text-decoration:none}.pds-dashboard-nav a:focus{box-shadow:none;outline:none}.pds-dashboard-nav a:hover{color:var(--dashboard-nav-foreground-color)}.pds-dashboard-nav a:focus-visible,.pds-dashboard-nav button:focus-visible{border-radius:.375rem;outline:1px solid var(--dashboard-nav-outline-color);outline-offset:-1px}.pds-dashboard-nav .pds-icon{pointer-events:none}.pds-dashboard-nav__logo{box-sizing:content-box;margin-block-end:1.563rem;margin-block-start:.125rem;padding-inline:calc(var(--pds-spacing-dashboard-nav-item-padding) + .1875rem)}.pds-dashboard-nav__menu{display:flex;flex-direction:column;list-style-type:none;margin:0;padding:0;row-gap:.64rem}.pds-dashboard-nav__menu.pds-dashboard-nav__menu--top-level{row-gap:1rem}.pds-dashboard-nav__item{list-style-type:none;margin-bottom:0}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--active .pds-dashboard-nav__item-wrapper{--dashboard-nav-foreground-color:var(
|
|
4
4
|
--pds-color-dashboard-nav-item-foreground-active
|
|
5
|
-
);--dashboard-nav-outline-color:var(--pds-color-brand-primary-default);background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--active .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper{align-items:center;border-radius:.375rem;display:flex;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:space-between;width:100%}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-hover);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper a{border-radius:.375rem;box-sizing:border-box;padding-inline:var(--pds-spacing-dashboard-nav-item-padding);width:100%}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-inner,.pds-dashboard-nav__link-icon{align-items:center;display:flex}.pds-dashboard-nav__link-icon{flex-grow:0;flex-shrink:0;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:center;margin-inline-end:var(--dashboard-nav-space-after-icon);width:var(--dashboard-nav-icon-width)}.pds-dashboard-nav__link-icon .pds-icon--house,.pds-dashboard-nav__link-icon .pds-icon--robot{margin-block-start:-.125rem}.pds-dashboard-nav__menu--second-level{color:var(--pds-color-dashboard-nav-item-foreground-default);display:none;margin-block-start:.8rem;padding-inline-start:calc(var(--pds-spacing-dashboard-nav-item-padding) + var(--dashboard-nav-icon-width) + var(--dashboard-nav-space-after-icon))}.pds-dashboard-nav__menu--second-level.pds-dashboard-nav__menu--expanded{display:flex;row-gap:.64rem}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level{font-size:.833rem}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level.pds-dashboard-nav__item--active a{color:var(--pds-color-nav-item-default-foreground-hover);font-weight:600}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:focus-visible{border-radius:1px;outline:1px solid var(--pds-color-interactive-focus);outline-offset:4px;transition:outline .2s ease-in-out 0s}.pds-dashboard-nav__toggle{align-items:center;background-color:transparent;border:none;border-radius:.375rem;color:var(--dashboard-nav-foreground-color);cursor:pointer;display:flex;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:flex-end;padding-inline:var(--pds-spacing-dashboard-nav-item-padding)}.pds-dashboard-nav__toggle .pds-icon{padding-inline:.125rem;transform:rotate(0deg);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__toggle--expanded .pds-icon{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__link-label{opacity:1;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__logo svg{width:1.25rem}.pds-dashboard-nav--collapsed .pds-dashboard-nav__link-label{opacity:0;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__menu--second-level.pds-dashboard-nav__menu--expanded{display:none}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--collapsed .pds-dashboard-nav__item-wrapper a{width:2.875rem}.pds-dashboard-nav__flyout{background-color:var(--pds-color-dropdown-background);border-radius:.375rem;box-shadow:var(--pds-elevation-overlay);max-width:30rem;padding:.64rem;width:max-content;z-index:
|
|
5
|
+
);--dashboard-nav-outline-color:var(--pds-color-brand-primary-default);background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--active .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-active)}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper{align-items:center;border-radius:.375rem;display:flex;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:space-between;width:100%}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper:hover{background-color:var(--pds-color-dashboard-nav-item-background-hover);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-wrapper a{border-radius:.375rem;box-sizing:border-box;padding-inline:var(--pds-spacing-dashboard-nav-item-padding);width:100%}.pds-dashboard-nav__item--top-level .pds-dashboard-nav__item-inner,.pds-dashboard-nav__link-icon{align-items:center;display:flex}.pds-dashboard-nav__link-icon{flex-grow:0;flex-shrink:0;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:center;margin-inline-end:var(--dashboard-nav-space-after-icon);width:var(--dashboard-nav-icon-width)}.pds-dashboard-nav__link-icon .pds-icon--house,.pds-dashboard-nav__link-icon .pds-icon--robot{margin-block-start:-.125rem}.pds-dashboard-nav__menu--second-level{color:var(--pds-color-dashboard-nav-item-foreground-default);display:none;margin-block-start:.8rem;padding-inline-start:calc(var(--pds-spacing-dashboard-nav-item-padding) + var(--dashboard-nav-icon-width) + var(--dashboard-nav-space-after-icon))}.pds-dashboard-nav__menu--second-level.pds-dashboard-nav__menu--expanded{display:flex;row-gap:.64rem}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level{font-size:.833rem}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level.pds-dashboard-nav__item--active a{color:var(--pds-color-nav-item-default-foreground-hover);font-weight:600}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:hover{color:var(--pds-color-nav-item-default-foreground-hover)}.pds-dashboard-nav__item.pds-dashboard-nav__item--second-level a:focus-visible{border-radius:1px;outline:1px solid var(--pds-color-interactive-focus);outline-offset:4px;transition:outline .2s ease-in-out 0s}.pds-dashboard-nav__toggle{align-items:center;background-color:transparent;border:none;border-radius:.375rem;color:var(--dashboard-nav-foreground-color);cursor:pointer;display:flex;height:var(--pds-spacing-dashboard-nav-item-height);justify-content:flex-end;padding-inline:var(--pds-spacing-dashboard-nav-item-padding)}.pds-dashboard-nav__toggle .pds-icon{padding-inline:.125rem;transform:rotate(0deg);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__toggle--expanded .pds-icon{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-dashboard-nav__link-label{opacity:1;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__logo svg{width:1.25rem}.pds-dashboard-nav--collapsed .pds-dashboard-nav__link-label{opacity:0;transition:opacity .1s ease-in-out}.pds-dashboard-nav--collapsed .pds-dashboard-nav__menu--second-level.pds-dashboard-nav__menu--expanded{display:none}.pds-dashboard-nav__item--top-level.pds-dashboard-nav__item--collapsed .pds-dashboard-nav__item-wrapper a{width:2.875rem}.pds-dashboard-nav__flyout{background-color:var(--pds-color-dropdown-background);border-radius:.375rem;box-shadow:var(--pds-elevation-overlay);max-width:30rem;padding:.64rem;width:max-content;z-index:300}.pds-dashboard-nav__flyout-heading{color:var(--pds-color-dropdown-heading);font-family:Poppins,sans-serif;font-size:.833rem;font-weight:400;line-height:120%;padding:.64rem .8rem}.pds-dashboard-nav__menu--second-level-flyout{row-gap:0}.pds-dashboard-nav__item--second-level-flyout{background-color:var(--pds-color-dropdown-background);color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:1rem;line-height:120%;margin:0;padding:.64rem .8rem}.pds-dashboard-nav__item--second-level-flyout:hover{background-color:var(--pds-color-dropdown-item-background-hover);border-radius:.375rem}.pds-dashboard-nav__item--second-level-flyout.pds-dashboard-nav__item--active a{color:var(--pds-color-nav-item-default-foreground-active);font-weight:600}.pds-dashboard-nav__item--second-level-flyout a:focus-visible{border-radius:1px;outline:1px solid var(--pds-color-interactive-focus);outline-offset:4px;transition:outline .2s ease-in-out 0s}.pds-dashboard-nav .pds-tooltip__container{padding:.25rem .512rem}.pds-dashboard-nav .pds-dropdown-menu .pds-dashboard-nav__item-inner{align-items:center;display:flex}.pds-dashboard-nav .pds-dropdown-menu__trigger{padding-inline:calc(var(--pds-spacing-dashboard-nav-item-padding) - .25rem)}.pds-dashboard-nav .pds-dropdown-menu__item a{padding-block:.41rem;padding-inline:var(--pds-spacing-dashboard-nav-item-padding);width:100%}.pds-dashboard-nav .pds-dropdown-menu__item--second-level{padding-block:.25rem;padding-inline-start:calc(var(--dashboard-nav-icon-width) + var(--dashboard-nav-space-after-icon) + .0625rem)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-dashboard-search{--dashboard-search-height:var(--pds-spacing-input-height);height:var(--dashboard-search-height);margin-inline-end:-.64rem;position:absolute;transition:width .375s ease;z-index:
|
|
1
|
+
.pds-dashboard-search{--dashboard-search-height:var(--pds-spacing-input-height);height:var(--dashboard-search-height);margin-inline-end:-.64rem;position:absolute;transition:width .375s ease;z-index:700}.pds-dashboard-search__combobox{left:0;position:absolute;right:0}.pds-dashboard-search__search-toggle{align-items:center;background-color:transparent;border:1px solid transparent;border-radius:.1875rem;color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--dashboard-search-height)}.pds-dashboard-search__search-toggle:hover{color:var(--pds-color-interactive-link-hover)}.pds-dashboard-search__search-toggle:focus-visible{outline:1px solid var(--pds-color-interactive-focus);transition:outline .2s ease-in-out 0s}.pds-dashboard-search__search-toggle-icon{margin-block-start:.41rem;pointer-events:none}.pds-dashboard-search__option-display{justify-content:space-between;width:100%}.pds-dashboard-search__option-display,.pds-dashboard-search__option-inner{align-items:center;column-gap:.8rem;display:flex}.pds-dashboard-search__option-icon{align-items:center;color:var(--pds-color-foreground-default-secondary);display:flex}.pds-dashboard-search__option-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-dashboard-search--isMobile{border-bottom:1px solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;min-height:3.815rem;position:relative;width:100vw}.pds-dashboard-search--isMobile .pds-dashboard-search__combobox{margin-inline:auto;width:calc(100% - 2.5rem)}.pds-dashboard-search--mobile-inner{padding-block:.64rem}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-foreground-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-background-default);border:1px solid var(--pds-color-border-input);border-radius:.1875rem;color:var(--pds-color-foreground-default);cursor:pointer;display:flex;height:var(--pds-spacing-input-height);justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:1px solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{color:var(--pds-color-nav-item-default-foreground-trigger);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
|
|
2
|
-
.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:
|
|
2
|
+
.pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-dropdown-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-overlay);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:300}.pds-dropdown-menu__dropdown a{color:var(--pds-color-dropdown-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus,.pds-dropdown-menu__item:hover{background-color:var(--pds-color-dropdown-item-background-hover);outline:none}.pds-dropdown-menu__item:focus a:active,.pds-dropdown-menu__item:hover a:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown-menu__item--second-level a{padding-inline-start:2.441rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:4.004rem}.pds-dropdown-menu__item--fourth-level a{padding-inline-start:5.567rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-dropdown-item-background-selected);color:var(--pds-color-foreground-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{color:var(--pds-color-status-success-foreground);flex-shrink:0;margin-inline:1rem}
|