@pantheon-systems/pds-toolkit-react 1.0.0-dev.185 → 1.0.0-dev.186
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/footer/SiteFooter/SiteFooter.d.ts +25 -17
- package/_dist/components/footer/SiteFooter/footer-content.d.ts +2 -0
- package/_dist/components/inputs/Combobox/Combobox.d.ts +4 -4
- package/_dist/components/navigation/DashboardSearch/DashboardSearch.d.ts +62 -61
- package/_dist/components/navigation/DashboardSearch/SiteOptionDisplay.d.ts +33 -9
- package/_dist/components/navigation/TabMenu/TabMenu.d.ts +43 -0
- package/_dist/components/navigation/TabMenu/TabMenuDropdown.d.ts +33 -0
- package/_dist/components/navigation/navigation-types.d.ts +0 -10
- package/_dist/css/component-css/pds-index.css +2 -1
- package/_dist/css/component-css/pds-tab-menu.css +2 -0
- package/_dist/css/component-css/pds-tabs.css +1 -1
- package/_dist/css/pds-components.css +2 -1
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +4 -3
- package/_dist/index.js +3466 -3439
- package/_dist/index.js.map +1 -1
- package/_dist/layouts/FlexContainer/FlexContainer.d.ts +44 -26
- package/package.json +1 -1
|
@@ -1,18 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { ContainerWidth } from '@libs/types/custom-types';
|
|
3
|
+
import './site-footer.css';
|
|
4
|
+
interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
|
|
5
|
+
/**
|
|
6
|
+
* PDS container width.
|
|
7
|
+
*/
|
|
8
|
+
containerWidth?: ContainerWidth;
|
|
9
|
+
/**
|
|
10
|
+
* Footer content.
|
|
11
|
+
*/
|
|
12
|
+
children?: React.ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Legal policy links.
|
|
15
|
+
*/
|
|
16
|
+
legalLinks?: Array<'privacy' | 'dataSubjectRequest' | 'cookiePolicy' | 'termsOfUse' | 'acceptableUse' | 'accessibilityStatement'>;
|
|
17
|
+
/**
|
|
18
|
+
* Additional class names
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
15
21
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
22
|
+
/**
|
|
23
|
+
* SiteFooter UI component
|
|
24
|
+
*/
|
|
25
|
+
export declare const SiteFooter: ({ containerWidth, children, legalLinks, className, ...props }: SiteFooterProps) => React.JSX.Element;
|
|
26
|
+
export {};
|
|
@@ -2,10 +2,10 @@ import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } f
|
|
|
2
2
|
import { ValidationStatus } from '../input-types';
|
|
3
3
|
import './combobox.css';
|
|
4
4
|
type LabelStrings = {
|
|
5
|
-
clearButton
|
|
6
|
-
inputInstructions
|
|
7
|
-
searchShortcut
|
|
8
|
-
triggerButton
|
|
5
|
+
clearButton?: string;
|
|
6
|
+
inputInstructions?: string;
|
|
7
|
+
searchShortcut?: string;
|
|
8
|
+
triggerButton?: string;
|
|
9
9
|
};
|
|
10
10
|
export type ComboboxOption = {
|
|
11
11
|
label: string;
|
|
@@ -1,69 +1,70 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { SiteOption } from './SiteOptionDisplay';
|
|
3
|
+
import './dashboard-search.css';
|
|
4
|
+
type LabelStrings = {
|
|
5
|
+
clearButton?: string;
|
|
6
|
+
inputInstructions?: string;
|
|
7
|
+
openSearchButton?: string;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Prop types for DashboardSearch
|
|
11
|
+
*/
|
|
12
|
+
export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
|
|
13
|
+
/**
|
|
14
|
+
* Is the search input disabled?
|
|
15
|
+
*/
|
|
3
16
|
disabled?: boolean;
|
|
4
|
-
|
|
17
|
+
/**
|
|
18
|
+
* ID for the component.
|
|
19
|
+
*/
|
|
20
|
+
id?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Is the site data still loading?
|
|
23
|
+
*/
|
|
5
24
|
isLoading?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Label for the input. Will be rendered as an aria-label.
|
|
27
|
+
*/
|
|
6
28
|
label?: string;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
29
|
+
/**
|
|
30
|
+
* Translation strings for various labels or other visually-hidden text.
|
|
31
|
+
*/
|
|
32
|
+
labelStrings?: LabelStrings;
|
|
33
|
+
/**
|
|
34
|
+
* Text to display when site options are still loading.
|
|
35
|
+
*/
|
|
12
36
|
loadingText?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Text to display when no results are found.
|
|
39
|
+
*/
|
|
13
40
|
noResultsText?: string;
|
|
14
|
-
|
|
15
|
-
|
|
41
|
+
/**
|
|
42
|
+
* Optional callback function when the search input field is focused.
|
|
43
|
+
*/
|
|
44
|
+
onFocus?: () => void;
|
|
45
|
+
/**
|
|
46
|
+
* Callback when an option is selected. Returns the selected option object.
|
|
47
|
+
*/
|
|
48
|
+
onOptionSelect?: (option: SiteOption) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Optional placeholder text to display when the input field is empty.
|
|
51
|
+
*/
|
|
16
52
|
placeholder?: string;
|
|
17
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Array of sites to search through.
|
|
55
|
+
*/
|
|
56
|
+
siteList?: SiteOption[];
|
|
57
|
+
/**
|
|
58
|
+
* Offset for the starting right position for the search input in rems.
|
|
59
|
+
*/
|
|
18
60
|
horizontalOffset?: number;
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
let disabled: PropTypes.Requireable<boolean>;
|
|
24
|
-
let id: PropTypes.Requireable<string>;
|
|
25
|
-
let isLoading: PropTypes.Requireable<boolean>;
|
|
26
|
-
let label: PropTypes.Requireable<string>;
|
|
27
|
-
let labelStrings: PropTypes.Requireable<PropTypes.InferProps<{
|
|
28
|
-
/**
|
|
29
|
-
* Clear button label
|
|
30
|
-
*/
|
|
31
|
-
clearButton: PropTypes.Requireable<string>;
|
|
32
|
-
/**
|
|
33
|
-
* Input instructions
|
|
34
|
-
*/
|
|
35
|
-
inputInstructions: PropTypes.Requireable<string>;
|
|
36
|
-
/**
|
|
37
|
-
* Open search button label
|
|
38
|
-
*/
|
|
39
|
-
openSearchButton: PropTypes.Requireable<string>;
|
|
40
|
-
}>>;
|
|
41
|
-
let loadingText: PropTypes.Requireable<string>;
|
|
42
|
-
let noResultsText: PropTypes.Requireable<string>;
|
|
43
|
-
let onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
44
|
-
let onOptionSelect: PropTypes.Requireable<(...args: any[]) => any>;
|
|
45
|
-
let placeholder: PropTypes.Requireable<string>;
|
|
46
|
-
let siteList: PropTypes.Requireable<PropTypes.InferProps<{
|
|
47
|
-
/**
|
|
48
|
-
* Site ID
|
|
49
|
-
*/
|
|
50
|
-
id: PropTypes.Requireable<string>;
|
|
51
|
-
/**
|
|
52
|
-
* Site name.
|
|
53
|
-
*/
|
|
54
|
-
name: PropTypes.Requireable<string>;
|
|
55
|
-
/**
|
|
56
|
-
* Site status
|
|
57
|
-
*/
|
|
58
|
-
status: PropTypes.Requireable<string>;
|
|
59
|
-
/**
|
|
60
|
-
* Site type
|
|
61
|
-
*/
|
|
62
|
-
type: PropTypes.Requireable<string>;
|
|
63
|
-
}>[]>;
|
|
64
|
-
let horizontalOffset: PropTypes.Requireable<number>;
|
|
65
|
-
let className: PropTypes.Requireable<string>;
|
|
66
|
-
}
|
|
61
|
+
/**
|
|
62
|
+
* Additional class names
|
|
63
|
+
*/
|
|
64
|
+
className?: string;
|
|
67
65
|
}
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
/**
|
|
67
|
+
* DashboardSearch UI component
|
|
68
|
+
*/
|
|
69
|
+
export declare const DashboardSearch: ({ disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, horizontalOffset, className, ...props }: DashboardSearchProps) => React.JSX.Element;
|
|
70
|
+
export {};
|
|
@@ -1,10 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
export type SiteOption = {
|
|
3
|
+
/**
|
|
4
|
+
* Machine name of the site.
|
|
5
|
+
*/
|
|
6
|
+
machineName?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Name of the site.
|
|
9
|
+
*/
|
|
10
|
+
name: string;
|
|
11
|
+
/**
|
|
12
|
+
* Site active status.
|
|
13
|
+
*/
|
|
14
|
+
status?: 'active' | 'frozen';
|
|
15
|
+
/**
|
|
16
|
+
* Site type.
|
|
17
|
+
*/
|
|
18
|
+
type?: 'drupal' | 'wordpress' | 'gatsby' | 'nextjs';
|
|
19
|
+
};
|
|
20
|
+
/** Site option display props. */
|
|
21
|
+
export interface SiteOptionDisplayProps extends ComponentPropsWithoutRef<'div'> {
|
|
22
|
+
/**
|
|
23
|
+
* Site option to display.
|
|
24
|
+
*/
|
|
25
|
+
option: SiteOption;
|
|
26
|
+
/**
|
|
27
|
+
* Additional class names
|
|
28
|
+
*/
|
|
29
|
+
className?: string;
|
|
8
30
|
}
|
|
9
|
-
|
|
10
|
-
|
|
31
|
+
/**
|
|
32
|
+
* UI component to display site options.
|
|
33
|
+
*/
|
|
34
|
+
export declare const SiteOptionDisplay: ({ option, className, ...props }: SiteOptionDisplayProps) => React.JSX.Element;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { PDSIcon } from '@components/Icon/Icon';
|
|
3
|
+
import { TabMenuDropdownProps } from './TabMenuDropdown';
|
|
4
|
+
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
5
|
+
import './tab-menu.css';
|
|
6
|
+
type DropdownSettings = Omit<TabMenuDropdownProps, 'links'>;
|
|
7
|
+
export type TabMenuItemProps = NavigationItem & {
|
|
8
|
+
/**
|
|
9
|
+
* Settings for dropdown menu. Leave null if no dropdown is needed.
|
|
10
|
+
*/
|
|
11
|
+
dropdownSettings?: DropdownSettings;
|
|
12
|
+
/**
|
|
13
|
+
* Icon to display next to the link content.
|
|
14
|
+
*/
|
|
15
|
+
icon?: PDSIcon;
|
|
16
|
+
/**
|
|
17
|
+
* Promote active child link to the top level.
|
|
18
|
+
* If true, the top-level menu will display the active child link instead of the parent link. If using this approach, it is recommended to also include the parent link as the first child link.
|
|
19
|
+
*/
|
|
20
|
+
promoteActiveChildLink?: boolean;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Prop types for TabMenu.
|
|
24
|
+
*/
|
|
25
|
+
export interface TabMenuProps extends ComponentPropsWithoutRef<'nav'> {
|
|
26
|
+
/**
|
|
27
|
+
* Aria label for the navigation.
|
|
28
|
+
*/
|
|
29
|
+
ariaLabel: string;
|
|
30
|
+
/**
|
|
31
|
+
* Menu items to render.
|
|
32
|
+
*/
|
|
33
|
+
menuItems?: TabMenuItemProps[];
|
|
34
|
+
/**
|
|
35
|
+
* Additional class names
|
|
36
|
+
*/
|
|
37
|
+
className?: string;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* TabMenu UI component.
|
|
41
|
+
*/
|
|
42
|
+
export declare const TabMenu: ({ ariaLabel, menuItems, className, ...props }: TabMenuProps) => React.JSX.Element;
|
|
43
|
+
export {};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
3
|
+
import './tab-menu.css';
|
|
4
|
+
export type TabMenuDropdownProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Button label for the dropdown trigger.
|
|
7
|
+
*/
|
|
8
|
+
buttonLabel?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Label for the dropdown filter. Leave null if no filter is needed.
|
|
11
|
+
*/
|
|
12
|
+
filterLabel?: string;
|
|
13
|
+
/**
|
|
14
|
+
* Placeholder for the dropdown filter.
|
|
15
|
+
*/
|
|
16
|
+
filterPlaceholder?: string;
|
|
17
|
+
/**
|
|
18
|
+
* Links to display in the dropdown.
|
|
19
|
+
*/
|
|
20
|
+
links?: NavigationItem[];
|
|
21
|
+
/**
|
|
22
|
+
* Minimum number of items to enable filtering.
|
|
23
|
+
*/
|
|
24
|
+
minFilterItems?: number;
|
|
25
|
+
/**
|
|
26
|
+
* Text to display when no results are found.
|
|
27
|
+
*/
|
|
28
|
+
noResultsText?: string;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* TabMenuDropdown UI component
|
|
32
|
+
*/
|
|
33
|
+
export declare const TabMenuDropdown: ({ buttonLabel, filterLabel, filterPlaceholder, links, minFilterItems, noResultsText, }: TabMenuDropdownProps) => React.JSX.Element;
|
|
@@ -13,16 +13,6 @@ export type NavigationItem = {
|
|
|
13
13
|
*/
|
|
14
14
|
links?: NavigationItem[];
|
|
15
15
|
};
|
|
16
|
-
export type SingleLevelNavigationItem = {
|
|
17
|
-
/**
|
|
18
|
-
* A boolean indicating whether the item is the active item.
|
|
19
|
-
*/
|
|
20
|
-
isActive?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Link content — a fully-formed link element using the router of your choice.
|
|
23
|
-
*/
|
|
24
|
-
linkContent: JSX.Element;
|
|
25
|
-
};
|
|
26
16
|
export type FlattenedNavigationItem = {
|
|
27
17
|
/**
|
|
28
18
|
* A boolean indicating whether the item is the active item.
|