@pantheon-systems/pds-toolkit-react 1.0.0-dev.243 → 1.0.0-dev.245
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/CompactEmptyState/CompactEmptyState.d.ts +37 -0
- package/_dist/components/buttons/Button/Button.d.ts +4 -0
- package/_dist/components/buttons/ButtonLink/ButtonLink.d.ts +5 -1
- package/_dist/components/panels/PanelList/PanelRow.d.ts +9 -1
- package/_dist/css/component-css/pds-button.css +1 -1
- package/_dist/css/component-css/pds-compact-empty-state.css +1 -0
- package/_dist/css/component-css/pds-dashboard-nav.css +2 -2
- package/_dist/css/component-css/pds-dropdown-menu.css +1 -1
- package/_dist/css/component-css/pds-index.css +8 -8
- package/_dist/css/component-css/pds-input-group.css +1 -1
- package/_dist/css/component-css/pds-menu-button.css +1 -1
- package/_dist/css/component-css/pds-panel-list.css +1 -1
- package/_dist/css/component-css/pds-refresh-checker.css +1 -1
- package/_dist/css/component-css/pds-side-nav-compact.css +1 -1
- package/_dist/css/component-css/pds-side-nav.css +1 -1
- package/_dist/css/component-css/pds-tab-menu.css +1 -1
- package/_dist/css/component-css/pds-tooltip.css +1 -1
- package/_dist/css/component-css/pds-utility-button.css +1 -1
- package/_dist/css/pds-components.css +8 -8
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +1 -0
- package/_dist/index.js +3271 -3134
- package/_dist/index.js.map +1 -1
- package/_dist/mocks/markup/panel-row-content.d.ts +3 -0
- package/package.json +1 -1
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { PDSIcon } from '@components/icons/Icon/Icon';
|
|
3
|
+
import { HeadingLevel } from '@libs/types/custom-types';
|
|
4
|
+
import './compact-empty-state.css';
|
|
5
|
+
/**
|
|
6
|
+
* Prop types for CompactEmptyState
|
|
7
|
+
*/
|
|
8
|
+
export interface CompactEmptyStateProps extends ComponentPropsWithoutRef<'div'> {
|
|
9
|
+
/**
|
|
10
|
+
* heading to explain the empty state.
|
|
11
|
+
*/
|
|
12
|
+
heading: string;
|
|
13
|
+
/**
|
|
14
|
+
* Heading level.
|
|
15
|
+
*/
|
|
16
|
+
headingLevel?: HeadingLevel;
|
|
17
|
+
/**
|
|
18
|
+
* Icon to display above the heading.
|
|
19
|
+
*/
|
|
20
|
+
iconName: PDSIcon;
|
|
21
|
+
/**
|
|
22
|
+
* A link element using the router of your choice. Leave empty for no link.
|
|
23
|
+
*/
|
|
24
|
+
linkContent?: ReactNode;
|
|
25
|
+
/**
|
|
26
|
+
* Message to display below the heading.
|
|
27
|
+
*/
|
|
28
|
+
message?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Additional class names
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* CompactEmptyState UI component
|
|
36
|
+
*/
|
|
37
|
+
export declare const CompactEmptyState: ({ iconName, linkContent, message, heading, headingLevel, className, ...props }: CompactEmptyStateProps) => React.JSX.Element;
|
|
@@ -46,6 +46,10 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
46
46
|
* Which size of button to render
|
|
47
47
|
*/
|
|
48
48
|
size?: 'sm' | 'md' | 'lg';
|
|
49
|
+
/**
|
|
50
|
+
* Text for an optional tooltip to be displayed when the button is `disabled` or `isLoading`.
|
|
51
|
+
*/
|
|
52
|
+
tooltipText?: string;
|
|
49
53
|
/**
|
|
50
54
|
* Which variant of button to render
|
|
51
55
|
*/
|
|
@@ -28,6 +28,10 @@ export interface ButtonLinkProps extends ComponentPropsWithoutRef<'span'> {
|
|
|
28
28
|
* Size of the button.
|
|
29
29
|
*/
|
|
30
30
|
size?: ButtonSize;
|
|
31
|
+
/**
|
|
32
|
+
* Text for an optional tooltip to be displayed when the button is `disabled`.
|
|
33
|
+
*/
|
|
34
|
+
tooltipText?: string;
|
|
31
35
|
/**
|
|
32
36
|
* Variant of the button.
|
|
33
37
|
*/
|
|
@@ -40,5 +44,5 @@ export interface ButtonLinkProps extends ComponentPropsWithoutRef<'span'> {
|
|
|
40
44
|
/**
|
|
41
45
|
* ButtonLink UI component
|
|
42
46
|
*/
|
|
43
|
-
export declare const ButtonLink: ({ disabled, displayType, iconName, linkContent, size, variant, className, ...props }: ButtonLinkProps) => React.JSX.Element;
|
|
47
|
+
export declare const ButtonLink: ({ disabled, displayType, iconName, linkContent, size, tooltipText, variant, className, ...props }: ButtonLinkProps) => React.JSX.Element;
|
|
44
48
|
export {};
|
|
@@ -12,8 +12,16 @@ export interface PanelRowProps extends ComponentPropsWithoutRef<'li'> {
|
|
|
12
12
|
* Additional class names.
|
|
13
13
|
*/
|
|
14
14
|
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Whether the panel row is expandable.
|
|
17
|
+
*/
|
|
18
|
+
isExpandable?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Aria-label for the expand button.
|
|
21
|
+
*/
|
|
22
|
+
expandButtonAriaLabel?: string;
|
|
15
23
|
}
|
|
16
24
|
/**
|
|
17
25
|
* PanelRow UI component
|
|
18
26
|
*/
|
|
19
|
-
export declare const PanelRow: ({ children, className, ...props }: PanelRowProps) => React.JSX.Element;
|
|
27
|
+
export declare const PanelRow: ({ children, className, isExpandable, expandButtonAriaLabel, ...props }: PanelRowProps) => React.JSX.Element;
|
|
@@ -42,4 +42,4 @@ a.pds-button,button.pds-button{--button-color-background:var(--pds-color-button-
|
|
|
42
42
|
--pds-color-button-critical-secondary-border-active
|
|
43
43
|
);--button-color-foreground:var(
|
|
44
44
|
--pds-color-button-critical-secondary-foreground-active
|
|
45
|
-
)}a.pds-button.pds-button--navbar,button.pds-button.pds-button--navbar{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-default);font-weight:400}a.pds-button.pds-button--navbar .pds-button__loading-indicator,button.pds-button.pds-button--navbar .pds-button__loading-indicator{--spinner-color-1:#525560;--spinner-color-2:#6a6e7a;--spinner-color-3:#cfcfd3}a.pds-button.pds-button--navbar:hover,button.pds-button.pds-button--navbar:hover:enabled{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-hover)}a.pds-button.pds-button--navbar:active,button.pds-button.pds-button--navbar:active:enabled{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-active)}button.pds-button.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);font-size:inherit;font-weight:400;height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding:0;transition:all .2s ease-in-out 0s}button.pds-button.pds-button--inline .pds-button__loading-indicator{--spinner-color-1:#23232d;--spinner-color-2:#6d6d78;--spinner-color-3:#cfcfd3}button.pds-button.pds-button--inline:hover:enabled{color:var(--pds-color-interactive-link-hover);text-decoration:underline}button.pds-button.pds-button--inline:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.125rem;text-decoration:none}.pds-button-group,.pds-button-group--lg{display:flex;flex-direction:column;row-gap:1rem;width:100%}.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:-.512rem}@media (min-width:641px){.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:unset;margin-inline:-.25rem}.pds-button-group{column-gap:1.25rem;flex-direction:row;width:unset}.pds-button-group--lg{column-gap:1.563rem}}
|
|
45
|
+
)}a.pds-button.pds-button--navbar,button.pds-button.pds-button--navbar{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-default);font-weight:400;letter-spacing:0}a.pds-button.pds-button--navbar .pds-button__loading-indicator,button.pds-button.pds-button--navbar .pds-button__loading-indicator{--spinner-color-1:#525560;--spinner-color-2:#6a6e7a;--spinner-color-3:#cfcfd3}a.pds-button.pds-button--navbar:hover,button.pds-button.pds-button--navbar:hover:enabled{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-hover)}a.pds-button.pds-button--navbar:active,button.pds-button.pds-button--navbar:active:enabled{--button-color-background:transparent;--button-color-border:transparent;--button-color-foreground:var(--pds-color-button-navbar-foreground-active)}button.pds-button.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);font-size:inherit;font-weight:400;height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding:0;transition:all .2s ease-in-out 0s}button.pds-button.pds-button--inline .pds-button__loading-indicator{--spinner-color-1:#23232d;--spinner-color-2:#6d6d78;--spinner-color-3:#cfcfd3}button.pds-button.pds-button--inline:hover:enabled{color:var(--pds-color-interactive-link-hover);text-decoration:underline}button.pds-button.pds-button--inline:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.125rem;text-decoration:none}.pds-button-group,.pds-button-group--lg{display:flex;flex-direction:column;row-gap:1rem;width:100%}.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:-.512rem}@media (min-width:641px){.pds-button-group a.pds-button.pds-button--subtle,.pds-button-group button.pds-button.pds-button--subtle,.pds-button-group--lg a.pds-button.pds-button--subtle,.pds-button-group--lg button.pds-button.pds-button--subtle{margin-block:unset;margin-inline:-.25rem}.pds-button-group{column-gap:1.25rem;flex-direction:row;width:unset}.pds-button-group--lg{column-gap:1.563rem}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pds-compact-empty-state{display:flex;flex-direction:column;font-family:Poppins,sans-serif;padding-block:4.678rem;row-gap:1.563rem;text-align:center;width:100%}.pds-compact-empty-state__icon{color:var(--pds-color-foreground-default-secondary)}.pds-compact-empty-state__heading{display:block;margin-block-end:.25rem}.pds-compact-empty-state__message{color:var(--pds-color-text-default-secondary);font-size:1rem;margin-block-end:0}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.pds-dashboard-nav{--dashboard-nav-icon-width:1.563rem;--dashboard-nav-space-after-icon:0.64rem;--dashboard-nav-foreground-color:var(
|
|
2
2
|
--pds-color-dashboard-nav-item-foreground-default
|
|
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
|
|
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__link-icon{align-items:center;display:flex
|
|
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:200}.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,2 +1,2 @@
|
|
|
1
|
-
.pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-
|
|
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
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:200}.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}
|