@pantheon-systems/pds-toolkit-react 1.0.0-dev.264 → 1.0.0-dev.266

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.
@@ -0,0 +1,56 @@
1
+ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import './app-layout.css';
3
+ /**
4
+ * Prop types for AppLayout
5
+ */
6
+ interface AppLayoutProps extends ComponentPropsWithoutRef<'div'> {
7
+ /**
8
+ * Children to render in the layout.
9
+ */
10
+ children: ReactNode;
11
+ /**
12
+ * Is the sidebar able to be collapsed and expanded by the user?
13
+ * If false or not provided, the sidebar will always be expanded.
14
+ */
15
+ hasSidebarToggle?: boolean;
16
+ /**
17
+ * Is the sidebar collapsed?
18
+ * This is only relevant if `hasSidebarToggle` is true.
19
+ */
20
+ isSidebarCollapsed?: boolean;
21
+ /**
22
+ * Labels for translatable strings.
23
+ */
24
+ labels?: {
25
+ collapseSidebar: string;
26
+ expandSidebar: string;
27
+ };
28
+ /**
29
+ * Callback function to handle sidebar toggle.
30
+ * If not provided, the sidebar will use an internal function to manage collapsed state.
31
+ */
32
+ onSidebarToggle?: () => void;
33
+ /**
34
+ * Width of the sidebar when collapsed in rems. This should not need to be modified.
35
+ */
36
+ sidebarCollapsedWidth?: number;
37
+ /**
38
+ * Width of the sidebar when expanded as a percentage.
39
+ * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
40
+ */
41
+ sidebarExpandedWidth?: string;
42
+ /**
43
+ * Minimum width of the sidebar when expanded in rems.
44
+ * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
45
+ */
46
+ sidebarExpandedWidthMin?: number;
47
+ /**
48
+ * Additional class names
49
+ */
50
+ className?: string;
51
+ }
52
+ /**
53
+ * AppLayout UI component
54
+ */
55
+ export declare const AppLayout: ({ children, hasSidebarToggle, isSidebarCollapsed, labels, onSidebarToggle, sidebarCollapsedWidth, sidebarExpandedWidth, sidebarExpandedWidthMin, className, ...props }: AppLayoutProps) => React.JSX.Element;
56
+ export {};
@@ -8,6 +8,16 @@ interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
8
8
  * Children to render in the layout.
9
9
  */
10
10
  children: ReactNode;
11
+ /**
12
+ * Width of the sidebar when expanded as a percentage.
13
+ * This is also the width of the sidebar when it is not collapsable (hasSidebarToggle is false).
14
+ */
15
+ sidebarWidth?: string;
16
+ /**
17
+ * Minimum width of the sidebar when expanded in rems.
18
+ * This is also the min-width of the sidebar when it is not collapsable (hasSidebarToggle is false).
19
+ */
20
+ sidebarMinWidth?: number;
11
21
  /**
12
22
  * Additional class names
13
23
  */
@@ -16,5 +26,5 @@ interface DocsLayoutProps extends ComponentPropsWithoutRef<'div'> {
16
26
  /**
17
27
  * DocsLayout UI component
18
28
  */
19
- export declare const DocsLayout: ({ children, className, ...props }: DocsLayoutProps) => React.JSX.Element;
29
+ export declare const DocsLayout: ({ children, sidebarWidth, sidebarMinWidth, className, ...props }: DocsLayoutProps) => React.JSX.Element;
20
30
  export {};
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import type { SideNavGlobalItemProps } from '@components/navigation/SideNavGlobal/SideNavGlobalItem';
2
3
  export declare const dialogMsgBase = "Activated menu item => ";
3
4
  import { UserMenuItem } from '@components/navigation/UserMenu/UserMenu';
4
5
  export declare const buttonNavSampleMenuItems: ({
@@ -14,35 +15,8 @@ export declare const buttonNavSampleMenuItemsRR: {
14
15
  export declare const blogMenuItems: {
15
16
  linkContent: React.JSX.Element;
16
17
  }[];
17
- export declare const dashboardNavSampleMenuItems: ({
18
- icon: string;
19
- linkContent: React.JSX.Element;
20
- links?: undefined;
21
- isActive?: undefined;
22
- } | {
23
- icon: string;
24
- linkContent: string;
25
- links: {
26
- linkContent: React.JSX.Element;
27
- }[];
28
- isActive?: undefined;
29
- } | {
30
- icon: string;
31
- linkContent: React.JSX.Element;
32
- isActive: boolean;
33
- links?: undefined;
34
- })[];
35
- export declare const dashboardNavSampleMenuItemsRR: ({
36
- icon: string;
37
- linkContent: React.JSX.Element;
38
- links?: undefined;
39
- } | {
40
- icon: string;
41
- linkContent: React.JSX.Element;
42
- links: {
43
- linkContent: React.JSX.Element;
44
- }[];
45
- })[];
18
+ export declare const dashboardNavSampleMenuItems: SideNavGlobalItemProps[];
19
+ export declare const dashboardNavSampleMenuItemsRR: SideNavGlobalItemProps[];
46
20
  export declare const documentationMenuItems: ({
47
21
  label: string;
48
22
  links: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pantheon-systems/pds-toolkit-react",
3
3
  "technology": "React",
4
- "version": "1.0.0-dev.264",
4
+ "version": "1.0.0-dev.266",
5
5
  "description": "PDS toolkit built using the React framework",
6
6
  "repository": {
7
7
  "type": "git",
@@ -1,3 +0,0 @@
1
- import { PDSIcon } from '@components/icons/Icon/Icon';
2
- import { NavigationItem } from '@components/navigation/navigation-types';
3
- export declare const processDashboardNavLinkContent: (baseClass: string, linkContent: JSX.Element | string, links?: NavigationItem[], icon?: PDSIcon) => JSX.Element;