@pantheon-systems/pds-toolkit-react 2.0.0-alpha.77 → 2.0.0-alpha.79
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/buttons/IconButton/IconButton.d.ts +1 -1
- package/dist/components/buttons/MenuButton/MenuButton.d.ts +1 -1
- package/dist/components/cards/Card/Card.d.ts +2 -2
- package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
- package/dist/components/links/CTALink/CTALink.d.ts +2 -2
- package/dist/components/links/LinkNewWindow/LinkNewWindow.d.ts +1 -1
- package/dist/components/panels/FeaturePanel/FeaturePanel.d.ts +72 -0
- package/dist/components/panels/WidgetPanel/WidgetPanel.d.ts +39 -0
- package/dist/css/component-css/pds-cta-link.css +1 -1
- package/dist/css/component-css/pds-feature-panel.css +15 -0
- package/dist/css/component-css/pds-icon-button.css +1 -1
- package/dist/css/component-css/pds-index.css +20 -6
- package/dist/css/component-css/pds-link-new-window.css +1 -1
- package/dist/css/component-css/pds-section-message.css +1 -1
- package/dist/css/component-css/pds-status-checker.css +1 -1
- package/dist/css/component-css/pds-widget-panel.css +1 -0
- package/dist/css/pds-components.css +20 -6
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +702 -666
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +2 -0
- package/dist/libs/types/layout-types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
|
|
|
2
2
|
import { ButtonType } from '../../../libs/types/custom-types';
|
|
3
3
|
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
4
4
|
import './icon-button.css';
|
|
5
|
-
type IconButtonSize = 's' | 'm';
|
|
5
|
+
type IconButtonSize = 'xs' | 's' | 'm';
|
|
6
6
|
interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
7
7
|
/**
|
|
8
8
|
* Aria-label attribute.
|
|
@@ -5,7 +5,7 @@ import { TallyProps } from '../../badges/Tally/Tally';
|
|
|
5
5
|
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
6
6
|
import '@components/Dropdown/dropdown.css';
|
|
7
7
|
import './menu-button.css';
|
|
8
|
-
type MenuButtonSize = 's' | 'm';
|
|
8
|
+
type MenuButtonSize = 'xs' | 's' | 'm';
|
|
9
9
|
/**
|
|
10
10
|
* Prop types for MenuButton
|
|
11
11
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import { CardBackground, CardPaddingScale } from '../../../libs/types/layout-types';
|
|
2
|
+
import { CardBackground, CardPaddingScale, ImageDisplayVariant } from '../../../libs/types/layout-types';
|
|
3
3
|
import './card.css';
|
|
4
|
-
export type CardImageVariant =
|
|
4
|
+
export type CardImageVariant = ImageDisplayVariant;
|
|
5
5
|
/**
|
|
6
6
|
* Prop types for Card
|
|
7
7
|
*/
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Generated by: npm run generate:icon-data
|
|
5
5
|
* Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
|
|
6
|
-
* Generated: 2026-08-
|
|
6
|
+
* Generated: 2026-08-31T22:16:27.349Z
|
|
7
7
|
*/
|
|
8
8
|
import { customIcons } from './custom-icons';
|
|
9
9
|
export { customIcons };
|
|
@@ -10,9 +10,9 @@ export interface CTALinkProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
10
10
|
*/
|
|
11
11
|
linkContent?: ReactNode;
|
|
12
12
|
/**
|
|
13
|
-
* Size of link
|
|
13
|
+
* Size of link. `s` (default) is 14px text; `m` is 16px text.
|
|
14
14
|
*/
|
|
15
|
-
size?: '
|
|
15
|
+
size?: 's' | 'm';
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
18
|
* CTA Link UI component
|
|
@@ -15,7 +15,7 @@ export interface LinkNewWindowProps extends ComponentPropsWithoutRef<'a'> {
|
|
|
15
15
|
/**
|
|
16
16
|
* Optional font size for the LinkNewWindow. If not provided, the font size will be inherited from the parent element.
|
|
17
17
|
*/
|
|
18
|
-
fontSize?: 's' | 'm'
|
|
18
|
+
fontSize?: 's' | 'm';
|
|
19
19
|
/**
|
|
20
20
|
* Is the link in the process of loading?
|
|
21
21
|
*/
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { ImageDisplayVariant } from '../../../libs/types/layout-types';
|
|
3
|
+
import { Button } from '../../buttons/Button/Button';
|
|
4
|
+
import { ButtonLink } from '../../buttons/ButtonLink/ButtonLink';
|
|
5
|
+
import './feature-panel.css';
|
|
6
|
+
/**
|
|
7
|
+
* Prop types for FeaturePanel
|
|
8
|
+
*/
|
|
9
|
+
export interface FeaturePanelProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
|
|
10
|
+
/**
|
|
11
|
+
* Additional class names
|
|
12
|
+
*/
|
|
13
|
+
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Body content.
|
|
16
|
+
*/
|
|
17
|
+
content: string;
|
|
18
|
+
/**
|
|
19
|
+
* Props for an optional call to action. Pass `ButtonLink` props (must
|
|
20
|
+
* include `linkContent`) to render a link, or `Button` props to render a
|
|
21
|
+
* button. Always renders at `variant="brand"` `size="sm"` regardless of
|
|
22
|
+
* what's passed in.
|
|
23
|
+
*/
|
|
24
|
+
cta?: ComponentPropsWithoutRef<typeof Button> | ComponentPropsWithoutRef<typeof ButtonLink>;
|
|
25
|
+
/**
|
|
26
|
+
* Label for the close button. Provide a translation string if needed.
|
|
27
|
+
*/
|
|
28
|
+
dismissLabel?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Heading text. Rendered as an `h2`.
|
|
31
|
+
*/
|
|
32
|
+
heading: string;
|
|
33
|
+
/**
|
|
34
|
+
* An optional image. Pass the full element, e.g.
|
|
35
|
+
* `<img alt="..." src="..." />`. Aspect ratio isn't enforced, but
|
|
36
|
+
* `1:1`–`3:2` works best in `vertical` layout, and `1:1` is a reasonable
|
|
37
|
+
* starting point for `horizontal` (see the MDX docs for why — that one
|
|
38
|
+
* shifts with panel width and copy length, so preview it for real).
|
|
39
|
+
*/
|
|
40
|
+
image?: ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Controls how the image fills its side of the panel. Only relevant when
|
|
43
|
+
* an image is provided.
|
|
44
|
+
* - `bleed` (default): image extends to the panel edges, corners rounded
|
|
45
|
+
* only where it meets the panel's own edge.
|
|
46
|
+
* - `inset`: image has padding on all sides, all corners rounded.
|
|
47
|
+
*/
|
|
48
|
+
imageVariant?: ImageDisplayVariant;
|
|
49
|
+
/**
|
|
50
|
+
* Shows a close button in the upper-right corner that calls `onDismiss`
|
|
51
|
+
* when clicked. The panel does not remove or hide itself — that's up to
|
|
52
|
+
* the consumer.
|
|
53
|
+
*/
|
|
54
|
+
isDismissible?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Which way the panel lays out its image and content.
|
|
57
|
+
* - `vertical` (default): image on top, content below.
|
|
58
|
+
* - `horizontal`: image on the left, content on the right. Only takes
|
|
59
|
+
* effect at the `bp-m` breakpoint and up — below that it collapses to
|
|
60
|
+
* the same stacked layout as `vertical`.
|
|
61
|
+
*/
|
|
62
|
+
layout?: 'horizontal' | 'vertical';
|
|
63
|
+
/**
|
|
64
|
+
* Called when the close button is clicked. Required in practice when
|
|
65
|
+
* `isDismissible` is true.
|
|
66
|
+
*/
|
|
67
|
+
onDismiss?: () => void;
|
|
68
|
+
}
|
|
69
|
+
/**
|
|
70
|
+
* FeaturePanel UI component
|
|
71
|
+
*/
|
|
72
|
+
export declare const FeaturePanel: ({ className, content, cta, dismissLabel, heading, image, imageVariant, isDismissible, layout, onDismiss, ...props }: FeaturePanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
3
|
+
import './widget-panel.css';
|
|
4
|
+
/**
|
|
5
|
+
* Prop types for WidgetPanel
|
|
6
|
+
*/
|
|
7
|
+
export interface WidgetPanelProps extends ComponentPropsWithoutRef<'div'> {
|
|
8
|
+
/**
|
|
9
|
+
* Main content. Unslotted -- fully composable (list rows, a search
|
|
10
|
+
* input, inline CTAs, dividers, etc). Pass a child with `slot="footer"`
|
|
11
|
+
* to render it in the footer instead.
|
|
12
|
+
*/
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Additional class names
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Caps the height of the content region only -- the header and footer
|
|
20
|
+
* stay fixed-size. Set in `vh`, `rem`, or `px`. Without it, the content
|
|
21
|
+
* region fills and scrolls within whatever height a parent container
|
|
22
|
+
* constrains the panel to.
|
|
23
|
+
*/
|
|
24
|
+
contentMaxHeight?: string;
|
|
25
|
+
/**
|
|
26
|
+
* Heading text. Always rendered as an `h2`, but sized smaller than an
|
|
27
|
+
* `h2` default -- semantic level and visual size are decoupled here.
|
|
28
|
+
*/
|
|
29
|
+
heading: string;
|
|
30
|
+
/**
|
|
31
|
+
* An optional icon shown before the heading. Encouraged, but not
|
|
32
|
+
* required.
|
|
33
|
+
*/
|
|
34
|
+
icon?: PDSIcon;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* WidgetPanel UI component
|
|
38
|
+
*/
|
|
39
|
+
export declare const WidgetPanel: ({ children, className, contentMaxHeight, heading, icon, ...props }: WidgetPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer pds-v1, pds-v2;@layer pds-v2{.pds-cta-link{--cta-link-size:var(--pds-typography-size-
|
|
1
|
+
@layer pds-v1, pds-v2;@layer pds-v2{.pds-cta-link{--cta-link-size:var(--pds-typography-size-s);--cta-link-color:var(--pds-color-interactive-link-default);--cta-link-gap:var(--pds-spacing-3xs);align-items:center;display:inline-flex;gap:var(--cta-link-gap);padding:.25rem 0}.pds-cta-link a,.pds-cta-link button{color:var(--cta-link-color);font-family:var(--pds-typography-ff-default);font-size:var(--cta-link-size);font-weight:var(--pds-typography-fw-medium);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);text-decoration:none;transition:var(--pds-animation-transition-link)}.pds-cta-link a:hover,.pds-cta-link button:hover{color:var(--cta-link-color)}.pds-cta-link a:focus-visible,.pds-cta-link button:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.25rem;text-decoration:none}.pds-cta-link button{background:none;border:none;cursor:pointer;padding:0}.pds-cta-link .pds-cta-link__icon{color:var(--cta-link-color);transition:var(--pds-animation-transition-link)}.pds-cta-link:hover{--cta-link-color:var(--pds-color-interactive-link-hover)}.pds-cta-link:active{--cta-link-color:var(--pds-color-interactive-link-active);outline:none;text-decoration:none}.pds-cta-link--m{--cta-link-gap:var(--pds-spacing-2xs);--cta-link-size:var(--pds-typography-size-m)}.pds-link-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m)}}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
@layer pds-v1, pds-v2;@layer pds-v2{.pds-feature-panel{--bg-color:var(--pds-color-surface-default);--body-padding:var(--pds-spacing-m);background:linear-gradient(var(--bg-color),var(--bg-color)) padding-box,var(--pds-gradient-avatar-12) border-box;border:var(--pds-border-width-default) solid transparent;border-radius:var(--pds-border-radius-panel);display:flex;flex-direction:column;position:relative}.pds-feature-panel__dismiss{inset-block-start:var(--pds-spacing-s);inset-inline-end:var(--pds-spacing-s);position:absolute;z-index:1}.pds-feature-panel__image{border-radius:var(--pds-border-radius-panel) var(--pds-border-radius-panel) 0 0;display:block;overflow:hidden}.pds-feature-panel__image img{display:block;height:100%;object-fit:cover;object-position:top;width:100%}.pds-feature-panel__body{display:flex;flex-direction:column;padding:var(--body-padding);width:100%}.pds-feature-panel__heading{font-size:var(--pds-typography-size-l)}.pds-feature-panel__content{font-size:var(--pds-typography-size-s);margin:0;margin-block-start:var(--pds-spacing-2xs)}.pds-feature-panel__cta{align-self:flex-start;margin-block-start:var(--pds-spacing-l)}.pds-feature-panel--hasDismiss .pds-feature-panel__heading{padding-inline-end:var(--pds-spacing-xl)}.pds-feature-panel--image-inset .pds-feature-panel__image{border-radius:var(--pds-border-radius-panel);margin:var(--body-padding) var(--body-padding) 0;width:auto}.pds-feature-panel--image-inset .pds-feature-panel__dismiss{inset-block-start:var(--pds-spacing-xl);inset-inline-end:var(--pds-spacing-xl)}.pds-feature-panel--has-image{--dismiss-scrim:rgba(0,0,0,.35);--dismiss-scrim-hover:rgba(0,0,0,.5);--dismiss-scrim-active:rgba(0,0,0,.6)}.pds-feature-panel--has-image:not(.pds-feature-panel--horizontal)
|
|
2
|
+
.pds-feature-panel__dismiss
|
|
3
|
+
.pds-close-button{background-color:var(--dismiss-scrim);color:#fff}.pds-feature-panel--has-image:not(.pds-feature-panel--horizontal)
|
|
4
|
+
.pds-feature-panel__dismiss
|
|
5
|
+
.pds-close-button:hover{background-color:var(--dismiss-scrim-hover)}.pds-feature-panel--has-image:not(.pds-feature-panel--horizontal)
|
|
6
|
+
.pds-feature-panel__dismiss
|
|
7
|
+
.pds-close-button:active:enabled{background-color:var(--dismiss-scrim-active);box-shadow:none}@media (max-width:767px){.pds-feature-panel--has-image.pds-feature-panel--horizontal
|
|
8
|
+
.pds-feature-panel__dismiss
|
|
9
|
+
.pds-close-button{background-color:var(--dismiss-scrim);color:#fff}.pds-feature-panel--has-image.pds-feature-panel--horizontal
|
|
10
|
+
.pds-feature-panel__dismiss
|
|
11
|
+
.pds-close-button:hover{background-color:var(--dismiss-scrim-hover)}.pds-feature-panel--has-image.pds-feature-panel--horizontal
|
|
12
|
+
.pds-feature-panel__dismiss
|
|
13
|
+
.pds-close-button:active:enabled{background-color:var(--dismiss-scrim-active);box-shadow:none}}@media (min-width:768px){.pds-feature-panel--horizontal{flex-direction:row;gap:var(--pds-spacing-3xs)}.pds-feature-panel--horizontal .pds-feature-panel__image{border-radius:var(--pds-border-radius-panel) 0 0 var(--pds-border-radius-panel);flex:0 1 40%;max-width:50%;min-width:30%;position:relative}.pds-feature-panel--horizontal .pds-feature-panel__image img{height:100%;inset:0;position:absolute;width:100%}.pds-feature-panel--horizontal.pds-feature-panel--image-inset
|
|
14
|
+
.pds-feature-panel__image{border-radius:var(--pds-border-radius-panel);margin:var(--body-padding) 0 var(--body-padding) var(--body-padding)}.pds-feature-panel--horizontal .pds-feature-panel__body{flex:1}.pds-feature-panel--horizontal.pds-feature-panel--image-inset
|
|
15
|
+
.pds-feature-panel__dismiss{inset-block-start:var(--pds-spacing-s);inset-inline-end:var(--pds-spacing-s)}}}
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
--pds-color-button-critical-secondary-foreground
|
|
23
23
|
)}.pds-icon-button--pressed:not(.pds-icon-button--critical),.pds-icon-button--pressed:not(.pds-icon-button--critical):hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button:active:enabled,a.pds-icon-button:active{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-icon-button--critical:active:enabled,a.pds-icon-button--critical:active{background-color:var(
|
|
24
24
|
--pds-color-button-critical-secondary-background-active
|
|
25
|
-
);box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--reverse:active:enabled,a.pds-icon-button--reverse:active{background-color:var(--pds-color-button-reverse-secondary-background-active);box-shadow:var(--pds-elevation-button-reverse-secondary-active)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}}
|
|
25
|
+
);box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--reverse:active:enabled,a.pds-icon-button--reverse:active{background-color:var(--pds-color-button-reverse-secondary-background-active);box-shadow:var(--pds-elevation-button-reverse-secondary-active)}.pds-icon-button--xs{--icon-button-size:var(--pds-spacing-button-height-xs)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}}
|