@pantheon-systems/pds-toolkit-react 1.0.0-dev.274 → 1.0.0-dev.276
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/VideoEmbed/VideoEmbed.d.ts +7 -2
- package/_dist/components/navigation/SideNav/SideNav.d.ts +1 -9
- package/_dist/components/navigation/navigation-utilities.d.ts +84 -3
- package/_dist/css/component-css/pds-empty-state-card.css +1 -1
- package/_dist/css/component-css/pds-index.css +4 -3
- package/_dist/css/component-css/pds-side-nav.css +2 -1
- package/_dist/css/component-css/pds-vertical-stepper.css +1 -1
- package/_dist/css/pds-components.css +4 -3
- package/_dist/index.css +1 -1
- package/_dist/index.js +3801 -3959
- package/_dist/index.js.map +1 -1
- package/_dist/mocks/data/navigation-items.d.ts +5 -0
- package/package.json +1 -1
|
@@ -7,11 +7,16 @@ export interface VideoEmbedProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
7
7
|
/**
|
|
8
8
|
* Video hosting platform.
|
|
9
9
|
*/
|
|
10
|
-
platform
|
|
10
|
+
platform: 'vimeo' | 'wistia' | 'youtube';
|
|
11
11
|
/**
|
|
12
12
|
* Video ID to embed.
|
|
13
13
|
*/
|
|
14
14
|
videoId: string;
|
|
15
|
+
/**
|
|
16
|
+
* Video title to display. This is for the title prop on the video iframe.
|
|
17
|
+
* If none is provided it will default to `"[platform] video player"`
|
|
18
|
+
*/
|
|
19
|
+
videoTitle?: string;
|
|
15
20
|
/**
|
|
16
21
|
* Additional class names
|
|
17
22
|
*/
|
|
@@ -20,4 +25,4 @@ export interface VideoEmbedProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
20
25
|
/**
|
|
21
26
|
* VideoEmbed UI component
|
|
22
27
|
*/
|
|
23
|
-
export declare const VideoEmbed: ({ platform, videoId, className, ...props }: VideoEmbedProps) => React.JSX.Element;
|
|
28
|
+
export declare const VideoEmbed: ({ platform, videoId, videoTitle, className, ...props }: VideoEmbedProps) => React.JSX.Element;
|
|
@@ -9,10 +9,6 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
9
9
|
* Aria label for the navigation.
|
|
10
10
|
*/
|
|
11
11
|
ariaLabel: string;
|
|
12
|
-
/**
|
|
13
|
-
* Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
|
|
14
|
-
*/
|
|
15
|
-
hasMobileMenu?: boolean;
|
|
16
12
|
/**
|
|
17
13
|
* Heading text. If a link is passed, it will be rendered as a link.
|
|
18
14
|
*/
|
|
@@ -28,10 +24,6 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
28
24
|
* Menu items to render.
|
|
29
25
|
*/
|
|
30
26
|
menuItems: NavigationItem[];
|
|
31
|
-
/**
|
|
32
|
-
* Mobile menu will be enabled when viewport is at or below this number in pixels.
|
|
33
|
-
*/
|
|
34
|
-
mobileMenuMaxWidth?: number;
|
|
35
27
|
/**
|
|
36
28
|
* Text to display in the mobile menu trigger button when no active link is found.
|
|
37
29
|
*/
|
|
@@ -44,4 +36,4 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
44
36
|
/**
|
|
45
37
|
* SideNav UI component
|
|
46
38
|
*/
|
|
47
|
-
export declare const SideNav: ({ ariaLabel,
|
|
39
|
+
export declare const SideNav: ({ ariaLabel, headingText, labels, menuItems, mobileMenuSelectTextFallback, className, ...props }: SideNavProps) => React.JSX.Element;
|
|
@@ -1,9 +1,90 @@
|
|
|
1
|
-
import React, { ReactElement } from 'react';
|
|
1
|
+
import React, { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { PDSIcon } from '@components/icons/Icon/Icon';
|
|
3
3
|
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* Recursively searches through navigation items to find the first active link
|
|
6
|
+
* @param items - Array of navigation items to search through
|
|
7
|
+
* @returns The active link element, or null if no active link is found or if the active item is a string
|
|
8
|
+
* @example
|
|
9
|
+
* const activeLink = getActiveLink(menuItems);
|
|
10
|
+
*/
|
|
6
11
|
export declare const getActiveLink: (items: NavigationItem[]) => ReactElement | null;
|
|
12
|
+
/**
|
|
13
|
+
* Extracts a string representation from linkContent, whether it's a string or React element
|
|
14
|
+
* @param linkContent - The link content to extract string from (string or React element)
|
|
15
|
+
* @returns String representation of the link content
|
|
16
|
+
* @example
|
|
17
|
+
* const linkText = getLinkContentString(<Link>Home</Link>); // Returns "Home"
|
|
18
|
+
* const linkText = getLinkContentString("About"); // Returns "About"
|
|
19
|
+
*/
|
|
7
20
|
export declare const getLinkContentString: (linkContent: ReactElement | string) => string;
|
|
21
|
+
/**
|
|
22
|
+
* Determines if a navigation item is currently active
|
|
23
|
+
* @param item - The navigation item to check
|
|
24
|
+
* @returns True if the item is active, false otherwise
|
|
25
|
+
* @description Checks for active state via:
|
|
26
|
+
* - The `isActive` property on the item
|
|
27
|
+
* - The presence of 'pds-isActive' class on the link element
|
|
28
|
+
* - Returns false for string-based items
|
|
29
|
+
* @example
|
|
30
|
+
* const isActive = isActiveItem(navigationItem);
|
|
31
|
+
*/
|
|
32
|
+
export declare const isActiveItem: (item: NavigationItem) => boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Determines if a navigation item or any of its children are in the active trail
|
|
35
|
+
* @param item - The navigation item to check (including its children)
|
|
36
|
+
* @returns True if the item or any child is active, false otherwise
|
|
37
|
+
* @description Recursively checks the item and all child items for active state
|
|
38
|
+
* @example
|
|
39
|
+
* const inActiveTrail = isActiveTrail(parentItem); // True if parent or any child is active
|
|
40
|
+
*/
|
|
41
|
+
export declare const isActiveTrail: (item: NavigationItem) => boolean;
|
|
42
|
+
/**
|
|
43
|
+
* Checks if the provided content is an interactive element (link, button, etc.)
|
|
44
|
+
* @param content - The React content to examine
|
|
45
|
+
* @returns True if the content is an interactive element, false otherwise
|
|
46
|
+
* @description Currently detects:
|
|
47
|
+
* - Native anchor elements (`<a>`)
|
|
48
|
+
* - React Router Link components (by displayName)
|
|
49
|
+
* @example
|
|
50
|
+
* const isInteractive = isInteractiveElement(<Link to="/home">Home</Link>); // true
|
|
51
|
+
* const isInteractive = isInteractiveElement(<span>Label</span>); // false
|
|
52
|
+
* const isInteractive = isInteractiveElement("Plain text"); // false
|
|
53
|
+
*/
|
|
54
|
+
export declare const isInteractiveElement: (content: ReactNode) => boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Processes navigation link content based on its type and available child links
|
|
57
|
+
* @param linkContent - The link content to process (string or React element)
|
|
58
|
+
* @param links - Optional array of child navigation items
|
|
59
|
+
* @returns Processed link content
|
|
60
|
+
* @description
|
|
61
|
+
* - If linkContent is a string and child links exist, clones the first child link with the string as label
|
|
62
|
+
* - Otherwise returns the linkContent as-is
|
|
63
|
+
* @example
|
|
64
|
+
* // With string and child links - uses first child as template
|
|
65
|
+
* const processed = processNavLinkContent("Home", [{ linkContent: <Link to="/home" /> }]);
|
|
66
|
+
*
|
|
67
|
+
* // With React element - returns as-is
|
|
68
|
+
* const processed = processNavLinkContent(<Link to="/about">About</Link>);
|
|
69
|
+
*/
|
|
8
70
|
export declare const processNavLinkContent: (linkContent: ReactElement | string, links?: NavigationItem[]) => ReactElement | string;
|
|
71
|
+
/**
|
|
72
|
+
* Processes side navigation global items with optional icons and specialized markup structure
|
|
73
|
+
* @param baseClass - Base CSS class for styling
|
|
74
|
+
* @param linkContent - The link content to process (string or React element)
|
|
75
|
+
* @param links - Optional array of child navigation items
|
|
76
|
+
* @param icon - Optional PDS icon to include
|
|
77
|
+
* @returns Processed navigation item with icon and proper markup structure, or null
|
|
78
|
+
* @description
|
|
79
|
+
* Creates a structured navigation item with:
|
|
80
|
+
* - Icon support with proper CSS classes
|
|
81
|
+
* - Consistent markup structure for global navigation
|
|
82
|
+
* - Template behavior for string content with child links
|
|
83
|
+
* @example
|
|
84
|
+
* // String with icon and child links
|
|
85
|
+
* const item = processSideNavGlobalLinkContent('nav', 'Home', childLinks, 'home');
|
|
86
|
+
*
|
|
87
|
+
* // React element with icon
|
|
88
|
+
* const item = processSideNavGlobalLinkContent('nav', <Link to="/about">About</Link>, null, 'info');
|
|
89
|
+
*/
|
|
9
90
|
export declare const processSideNavGlobalLinkContent: (baseClass: string, linkContent: ReactElement | string, links?: NavigationItem[], icon?: PDSIcon) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-empty-state-card{background-color:var(--pds-color-card-background);border-radius:.375rem;box-shadow:var(--pds-elevation-raised);color:var(--pds-color-
|
|
1
|
+
.pds-empty-state-card{background-color:var(--pds-color-card-background);border-radius:.375rem;box-shadow:var(--pds-elevation-raised);color:var(--pds-color-fg-default);display:flex;flex-direction:column;justify-content:space-between;padding:1.563rem}.pds-empty-state-card__cta{display:inline-block;margin-block-start:.512rem}
|