@pantheon-systems/pds-toolkit-react 1.0.0-dev.186 → 1.0.0-dev.188

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.
Files changed (32) hide show
  1. package/_dist/components/Avatar/Avatar.d.ts +7 -3
  2. package/_dist/components/CTASlice/CTASlice.d.ts +50 -33
  3. package/_dist/components/Icon/Icon.d.ts +9 -1
  4. package/_dist/components/PlatformIcon/PlatformIcon.d.ts +11 -12
  5. package/_dist/components/Popover/Popover.d.ts +6 -5
  6. package/_dist/components/Stepper/Stepper.d.ts +48 -45
  7. package/_dist/components/cards/Card/Card.d.ts +28 -29
  8. package/_dist/components/cards/CardHeading/CardHeading.d.ts +32 -0
  9. package/_dist/components/cards/SiteCard/SiteCard.d.ts +43 -23
  10. package/_dist/components/expansion-panels/ExpansionPanel/ExpansionPanel.d.ts +30 -17
  11. package/_dist/components/expansion-panels/ExpansionPanelGroup/ExpansionPanelGroup.d.ts +23 -14
  12. package/_dist/components/navigation/DashboardSearch/SiteOptionDisplay.d.ts +2 -1
  13. package/_dist/css/component-css/pds-avatar.css +1 -1
  14. package/_dist/css/component-css/pds-card-heading.css +1 -0
  15. package/_dist/css/component-css/pds-card.css +1 -1
  16. package/_dist/css/component-css/pds-index.css +3 -3
  17. package/_dist/css/component-css/pds-site-card.css +1 -1
  18. package/_dist/css/component-css/pds-user-menu.css +1 -1
  19. package/_dist/css/component-css/pds-workspace-selector.css +1 -1
  20. package/_dist/css/design-tokens/pds-design-tokens-light-mode.css +22 -12
  21. package/_dist/css/pds-components.css +3 -3
  22. package/_dist/css/pds-core.css +1 -1
  23. package/_dist/index.css +1 -1
  24. package/_dist/index.d.ts +11 -10
  25. package/_dist/index.js +4346 -4570
  26. package/_dist/index.js.map +1 -1
  27. package/_dist/layouts/StepperLayout/StepperLayout.d.ts +16 -12
  28. package/_dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts +24 -14
  29. package/_dist/layouts/TwoItemLayout/TwoItemLayout.d.ts +28 -16
  30. package/_dist/libs/components/utility-components.d.ts +1 -1
  31. package/_dist/libs/types/custom-types.d.ts +2 -0
  32. package/package.json +1 -1
@@ -2,9 +2,9 @@ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import './avatar.css';
3
3
  interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
4
4
  /**
5
- * Avatar size.
5
+ * If true, a user icon will be displayed with the fallback gradient when an image is not provided.
6
6
  */
7
- size?: 'xs' | 'sm' | 'md' | 'lg';
7
+ hasUserFallback?: boolean;
8
8
  /**
9
9
  * Avatar image.
10
10
  */
@@ -13,6 +13,10 @@ interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
13
13
  * A link element using the router of your choice. Leave empty for no link.
14
14
  */
15
15
  linkContent?: ReactNode;
16
+ /**
17
+ * Avatar size.
18
+ */
19
+ size?: 'xs' | 'sm' | 'md' | 'lg';
16
20
  /**
17
21
  * Unique ID associated with the avatar. Can be workspace ID, user ID, email, etc.
18
22
  */
@@ -25,5 +29,5 @@ interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
25
29
  /**
26
30
  * Avatar UI component
27
31
  */
28
- export declare const Avatar: ({ size, imageSrc, linkContent, uniqueId, className, ...props }: AvatarProps) => React.JSX.Element;
32
+ export declare const Avatar: ({ hasUserFallback, imageSrc, linkContent, size, uniqueId, className, ...props }: AvatarProps) => React.JSX.Element;
29
33
  export {};
@@ -1,34 +1,51 @@
1
- export function CTASlice({ backgroundColor, containerWidth, headingLevel, headingText, leadText, primaryLink, secondaryLink, className, ...props }: {
2
- [x: string]: any;
3
- backgroundColor?: string;
4
- containerWidth?: string;
5
- headingLevel?: string;
6
- headingText: any;
7
- leadText: any;
8
- primaryLink: any;
9
- secondaryLink: any;
10
- className: any;
11
- }): React.JSX.Element;
12
- export namespace CTASlice {
13
- namespace propTypes {
14
- export let backgroundColor: PropTypes.Requireable<string>;
15
- export { ContainerWidth as containerWidth };
16
- export let headingLevel: PropTypes.Requireable<string>;
17
- export let headingText: PropTypes.Validator<string>;
18
- export let leadText: PropTypes.Requireable<string>;
19
- export let primaryLink: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
20
- text: PropTypes.Requireable<string>;
21
- url: PropTypes.Requireable<string>;
22
- target: PropTypes.Requireable<string>;
23
- }>>>;
24
- export let secondaryLink: PropTypes.Requireable<PropTypes.InferProps<{
25
- text: PropTypes.Requireable<string>;
26
- url: PropTypes.Requireable<string>;
27
- target: PropTypes.Requireable<string>;
28
- }>>;
29
- export let className: PropTypes.Requireable<string>;
30
- }
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { ContainerWidth, HeadingLevel } from '@libs/types/custom-types';
3
+ import './../buttons/Button/button.css';
4
+ import './cta-slice.css';
5
+ interface CTASliceProps extends ComponentPropsWithoutRef<'div'> {
6
+ /**
7
+ * Background color of slice
8
+ */
9
+ backgroundColor?: 'default' | 'secondary';
10
+ /**
11
+ * PDS container width.
12
+ */
13
+ containerWidth?: ContainerWidth;
14
+ /**
15
+ * Heading level
16
+ */
17
+ headingLevel?: HeadingLevel;
18
+ /**
19
+ * Heading text
20
+ */
21
+ headingText: string;
22
+ /**
23
+ * Further explain block
24
+ */
25
+ leadText?: string;
26
+ /**
27
+ * Primary link.
28
+ */
29
+ primaryLink: {
30
+ text: string;
31
+ url: string;
32
+ target: '_self' | '_blank';
33
+ };
34
+ /**
35
+ * Optional secondary link
36
+ */
37
+ secondaryLink?: {
38
+ text: string;
39
+ url: string;
40
+ target: '_self' | '_blank';
41
+ };
42
+ /**
43
+ * Additional class names
44
+ */
45
+ className?: string;
31
46
  }
32
- import React from 'react';
33
- import PropTypes from 'prop-types';
34
- import { ContainerWidth } from '@libs/components/customPropTypes';
47
+ /**
48
+ * CTA Slice UI component
49
+ */
50
+ export declare const CTASlice: ({ backgroundColor, containerWidth, headingLevel, headingText, leadText, primaryLink, secondaryLink, className, ...props }: CTASliceProps) => React.JSX.Element;
51
+ export {};
@@ -243,6 +243,10 @@ declare const svgData: {
243
243
  readonly path: "M227.7 11.7c15.6-15.6 40.9-15.6 56.6 0l216 216c15.6 15.6 15.6 40.9 0 56.6l-216 216c-15.6 15.6-40.9 15.6-56.6 0l-216-216c-15.6-15.6-15.6-40.9 0-56.6l216-216zM256 128c-13.3 0-24 10.7-24 24V264c0 13.3 10.7 24 24 24s24-10.7 24-24V152c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z";
244
244
  readonly width: "512";
245
245
  };
246
+ readonly diamonds4: {
247
+ readonly path: "M227.7 11.7c15.6-15.6 40.9-15.6 56.6 0l74.1 74.1c12.5 12.5 12.5 32.8 0 45.3l-79.7 79.7c-12.5 12.5-32.8 12.5-45.3 0L153.7 131c-12.5-12.5-12.5-32.8 0-45.3l74.1-74.1zM131 153.7l79.7 79.7c12.5 12.5 12.5 32.8 0 45.3L131 358.3c-12.5 12.5-32.8 12.5-45.3 0L11.7 284.3c-15.6-15.6-15.6-40.9 0-56.6l74.1-74.1c12.5-12.5 32.8-12.5 45.3 0zM153.7 381l79.7-79.7c12.5-12.5 32.8-12.5 45.3 0L358.3 381c12.5 12.5 12.5 32.8 0 45.3l-74.1 74.1c-15.6 15.6-40.9 15.6-56.6 0l-74.1-74.1c-12.5-12.5-12.5-32.8 0-45.3zM381 358.3l-79.7-79.7c-12.5-12.5-12.5-32.8 0-45.3L381 153.7c12.5-12.5 32.8-12.5 45.3 0l74.1 74.1c15.6 15.6 15.6 40.9 0 56.6l-74.1 74.1c-12.5 12.5-32.8 12.5-45.3 0z";
248
+ readonly width: "512";
249
+ };
246
250
  readonly discourse: {
247
251
  readonly path: "M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z";
248
252
  readonly width: "512";
@@ -267,6 +271,10 @@ declare const svgData: {
267
271
  readonly path: "M435.4 121.9l67.2-67.2c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L390.2 76.6C352.8 48.6 306.3 32 256 32C132.3 32 32 132.3 32 256c0 50.3 16.6 96.8 44.6 134.2L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l67.2-67.2c37.4 28 83.8 44.6 134.1 44.6c123.7 0 224-100.3 224-224c0-50.3-16.6-96.8-44.6-134.1zm-91.2 .7L122.5 344.2C105.8 318.9 96 288.6 96 256c0-88.4 71.6-160 160-160c32.6 0 62.9 9.8 88.2 26.5zm-176.5 267L389.5 167.8C406.2 193.1 416 223.4 416 256c0 88.4-71.6 160-160 160c-32.6 0-62.9-9.8-88.2-26.5z";
268
272
  readonly width: "512";
269
273
  };
274
+ readonly envelope: {
275
+ readonly path: "M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z";
276
+ readonly width: "512";
277
+ };
270
278
  readonly exclamation: {
271
279
  readonly path: "M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64V320c0 17.7 14.3 32 32 32s32-14.3 32-32V64zM32 480a40 40 0 1 0 0-80 40 40 0 1 0 0 80z";
272
280
  readonly width: "100";
@@ -620,5 +628,5 @@ declare const svgData: {
620
628
  readonly width: "576";
621
629
  };
622
630
  };
623
- export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileContract" | "fileCSV" | "fileExport" | "fileImport" | "filePDF" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
631
+ export declare const iconList: ("angleDown" | "angleLeft" | "angleRight" | "angleUp" | "arrowDownToLine" | "arrowLeft" | "arrowRight" | "asterisk" | "banBug" | "bars" | "barsFilter" | "billboard" | "bitbucket" | "bolt" | "book" | "books" | "bracketRight" | "broomWide" | "building" | "buildings" | "calendarDays" | "ccAmex" | "ccDiscover" | "ccGeneric" | "ccMC" | "ccVisa" | "chartSimple" | "cloud" | "cloudArrowUp" | "code" | "codeBranch" | "codeMerge" | "caretDown" | "caretLeft" | "caretRight" | "caretUp" | "chartLine" | "chartNetwork" | "check" | "circle" | "circleExclamation" | "circleCheck" | "circleInfo" | "circleMinus" | "circleMinusOutline" | "circleNotch" | "circlePlus" | "circlePlusOutline" | "circleQuestion" | "circleXmark" | "command" | "comment" | "copy" | "diamondExclamation" | "diamonds4" | "discourse" | "download" | "drupal" | "ellipsis" | "ellipsisVertical" | "emptySet" | "envelope" | "exclamation" | "externalLink" | "eye" | "eyeSlash" | "facebook" | "file" | "fileContract" | "fileCSV" | "fileExport" | "fileImport" | "filePDF" | "folder" | "gear" | "github" | "gitlab" | "globe" | "globeLine" | "graduationCap" | "grid" | "gripDots" | "gripDotsVertical" | "heart" | "house" | "idCard" | "instagram" | "keySkeleton" | "laptopCode" | "leaf" | "lifeRing" | "linkedin" | "linkSimple" | "linkSimpleSlash" | "magnifyingGlass" | "messages" | "minus" | "moon" | "paperclip" | "paperPlane" | "pen" | "phone" | "play" | "plus" | "quotesLeft" | "quotesRight" | "rectangleList" | "robot" | "rotate" | "rotateClock" | "rss" | "save" | "server" | "shield" | "shovel" | "siren" | "sitemap" | "slack" | "slashForward" | "slidersSimple" | "snowflake" | "sparkles" | "squareCheck" | "squareCode" | "squareMinus" | "squarePen" | "squareQuestion" | "squareTerminal" | "star" | "sun" | "table" | "terminal" | "threads" | "trash" | "triangleExclamation" | "twitter" | "upload" | "user" | "userGear" | "userPlus" | "users" | "video" | "wavePulse" | "windowRestore" | "wordpress" | "wrench" | "xmark" | "xmarkLarge" | "xTwitter" | "youtube")[];
624
632
  export {};
@@ -1,13 +1,12 @@
1
- export function PlatformIcon({ platformType, className, ...props }: {
2
- [x: string]: any;
3
- platformType: any;
4
- className: any;
5
- }): React.JSX.Element;
6
- export namespace PlatformIcon {
7
- namespace propTypes {
8
- let platformType: PropTypes.Requireable<string>;
9
- let className: PropTypes.Requireable<string>;
10
- }
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import './platform-icon.css';
3
+ type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'import-custom' | 'next' | 'next-drupal' | 'next-wp' | 'wordpress';
4
+ interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
5
+ platformType: PlatformType;
6
+ className?: string;
11
7
  }
12
- import React from 'react';
13
- import PropTypes from 'prop-types';
8
+ /**
9
+ * PlatformIcon UI component
10
+ */
11
+ export declare const PlatformIcon: ({ platformType, className, ...props }: PlatformIconProps) => React.JSX.Element;
12
+ export {};
@@ -1,4 +1,5 @@
1
1
  import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import { FuiPlacement } from '@libs/types/custom-types';
2
3
  import './popover.css';
3
4
  interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'> {
4
5
  /**
@@ -24,9 +25,9 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
24
25
  /**
25
26
  * Preferred placement of the popover in relation to the trigger. Will be modified if there is not enough space.
26
27
  */
27
- placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
28
+ placement?: FuiPlacement;
28
29
  /**
29
- * Text for popover title
30
+ * Text for popover title.
30
31
  */
31
32
  title?: string;
32
33
  /**
@@ -34,15 +35,15 @@ interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'content'>
34
35
  */
35
36
  triggerAccessibleText?: string;
36
37
  /**
37
- * Icon to trigger Popover.
38
+ * The icon to use as the trigger.
38
39
  */
39
40
  triggerIcon?: 'circleInfo' | 'circleQuestion';
40
41
  /**
41
- * Is the Popover open?
42
+ * Boolean to determine if the Popover is open by default.
42
43
  */
43
44
  popoverIsOpen?: boolean;
44
45
  /**
45
- * Function to set Popover open state
46
+ * Function to set Popover open state.
46
47
  */
47
48
  setPopoverIsOpen?: (isOpen: boolean) => void;
48
49
  /**
@@ -1,46 +1,49 @@
1
- export function Stepper({ steps, translatableLabels, className, ...props }: {
2
- [x: string]: any;
3
- steps: any;
4
- translatableLabels?: {
5
- step: string;
6
- completed: string;
7
- hasError: string;
8
- next: string;
9
- };
10
- className: any;
11
- }): React.JSX.Element;
12
- export namespace Stepper {
13
- namespace propTypes {
14
- let steps: PropTypes.Requireable<PropTypes.InferProps<{
15
- /**
16
- * Callback function to return to a previously completed step.
17
- */
18
- callback: PropTypes.Requireable<(...args: any[]) => any>;
19
- /**
20
- * If the step has an error.
21
- */
22
- hasError: PropTypes.Requireable<boolean>;
23
- /**
24
- * Id for the step.
25
- */
26
- id: PropTypes.Requireable<string>;
27
- /**
28
- * If the step is the current active step.
29
- */
30
- isCurrent: PropTypes.Requireable<boolean>;
31
- /**
32
- * The label for the step.
33
- */
34
- label: PropTypes.Validator<string>;
35
- }>[]>;
36
- let translatableLabels: PropTypes.Requireable<PropTypes.InferProps<{
37
- step: PropTypes.Requireable<string>;
38
- completed: PropTypes.Requireable<string>;
39
- hasError: PropTypes.Requireable<string>;
40
- next: PropTypes.Requireable<string>;
41
- }>>;
42
- let className: PropTypes.Requireable<string>;
43
- }
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import './stepper.css';
3
+ interface Step {
4
+ /**
5
+ * Callback function to return to a previously completed step.
6
+ */
7
+ callback?: (step: Step) => void;
8
+ /**
9
+ * If the step has an error.
10
+ */
11
+ hasError?: boolean;
12
+ /**
13
+ * Id for the step.
14
+ */
15
+ id?: string;
16
+ /**
17
+ * If the step is the current active step.
18
+ */
19
+ isCurrent?: boolean;
20
+ /**
21
+ * The label for the step.
22
+ */
23
+ label: string;
44
24
  }
45
- import React from 'react';
46
- import PropTypes from 'prop-types';
25
+ interface TranslatableLabels {
26
+ step: string;
27
+ completed: string;
28
+ hasError: string;
29
+ next: string;
30
+ }
31
+ interface StepperProps extends ComponentPropsWithoutRef<'div'> {
32
+ /**
33
+ * An array of step objects
34
+ */
35
+ steps: Step[];
36
+ /**
37
+ * Translatable strings for visually-hidden text.
38
+ */
39
+ translatableLabels?: TranslatableLabels;
40
+ /**
41
+ * Additional class names
42
+ */
43
+ className?: string;
44
+ }
45
+ /**
46
+ * Stepper UI component
47
+ */
48
+ export declare const Stepper: ({ steps, translatableLabels, className, ...props }: StepperProps) => React.JSX.Element;
49
+ export {};
@@ -1,30 +1,29 @@
1
- export function Card({ bodyText, headingLevel, headingText, image, isClickable, kickerText, primaryLink, secondaryLink, className, ...props }: {
2
- [x: string]: any;
3
- bodyText: any;
4
- headingLevel?: string;
5
- headingText: any;
6
- image: any;
7
- isClickable?: boolean;
8
- kickerText: any;
9
- primaryLink: any;
10
- secondaryLink: any;
11
- className: any;
12
- }): React.JSX.Element;
13
- export namespace Card {
14
- namespace propTypes {
15
- let bodyText: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
16
- let headingLevel: PropTypes.Requireable<string>;
17
- let headingText: PropTypes.Validator<string>;
18
- let image: PropTypes.Requireable<PropTypes.InferProps<{
19
- src: PropTypes.Requireable<string>;
20
- alt: PropTypes.Requireable<string>;
21
- }>>;
22
- let isClickable: PropTypes.Requireable<boolean>;
23
- let kickerText: PropTypes.Requireable<string>;
24
- let primaryLink: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
25
- let secondaryLink: PropTypes.Requireable<PropTypes.ReactNodeLike>;
26
- let className: PropTypes.Requireable<string>;
27
- }
1
+ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import { GridGapOptions } from '@layouts/layout-types';
3
+ import './card.css';
4
+ export type CardBackground = 'default' | 'transparent';
5
+ /**
6
+ * Prop types for Card
7
+ */
8
+ export interface CardProps extends ComponentPropsWithoutRef<'div'> {
9
+ /**
10
+ * Background color or gradient for the card.
11
+ */
12
+ background?: CardBackground;
13
+ /**
14
+ * Child elements to be assigned to named slots.
15
+ */
16
+ children: ReactNode;
17
+ /**
18
+ * Relative padding for the `main` slot.
19
+ */
20
+ padding?: GridGapOptions;
21
+ /**
22
+ * Additional class names
23
+ */
24
+ className?: string;
28
25
  }
29
- import React from 'react';
30
- import PropTypes from 'prop-types';
26
+ /**
27
+ * Card UI component
28
+ */
29
+ export declare const Card: ({ background, children, padding, className, ...props }: CardProps) => React.JSX.Element;
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { HeadingLevel } from '@libs/types/custom-types';
3
+ import './card-heading.css';
4
+ /**
5
+ * Prop types for CardHeading
6
+ */
7
+ export interface CardHeadingProps {
8
+ /**
9
+ * Font size of the heading. Default is `XL`.
10
+ */
11
+ fontSize?: 'L' | 'XL';
12
+ /**
13
+ * Font weight of the heading. Default is `bold`.
14
+ */
15
+ fontWeight?: 'bold' | 'semibold';
16
+ /**
17
+ * Heading level or `span`.
18
+ */
19
+ level?: HeadingLevel;
20
+ /**
21
+ * Heading text.
22
+ */
23
+ text?: string;
24
+ /**
25
+ * Additional class names
26
+ */
27
+ className?: string;
28
+ }
29
+ /**
30
+ * CardHeading UI component
31
+ */
32
+ export declare const CardHeading: ({ fontSize, fontWeight, level, text, className, ...props }: CardHeadingProps) => React.JSX.Element;
@@ -1,25 +1,45 @@
1
- export function SiteCard({ headingLevel, gotoText, siteImage, siteLink, siteName, sitePlan, siteStatus, className, ...props }: {
2
- [x: string]: any;
3
- headingLevel?: string;
1
+ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import { HeadingLevel } from '@libs/types/custom-types';
3
+ import { SiteStatus } from '@libs/types/custom-types';
4
+ import './site-card.css';
5
+ /**
6
+ * Prop types for SiteCard
7
+ */
8
+ export interface SiteCardProps extends ComponentPropsWithoutRef<'div'> {
9
+ /**
10
+ * Translatable text for the "Go to" link.
11
+ */
4
12
  gotoText?: string;
5
- siteImage: any;
6
- siteLink: any;
7
- siteName: any;
8
- sitePlan: any;
9
- siteStatus: any;
10
- className: any;
11
- }): React.JSX.Element;
12
- export namespace SiteCard {
13
- namespace propTypes {
14
- let headingLevel: PropTypes.Requireable<string>;
15
- let gotoText: PropTypes.Requireable<string>;
16
- let siteImage: PropTypes.Requireable<string>;
17
- let siteLink: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
18
- let siteName: PropTypes.Requireable<string>;
19
- let sitePlan: PropTypes.Requireable<string>;
20
- let siteStatus: PropTypes.Requireable<string>;
21
- let className: PropTypes.Requireable<string>;
22
- }
13
+ /**
14
+ * Heading level of the card title.
15
+ */
16
+ headingLevel?: HeadingLevel;
17
+ /**
18
+ * Image URL for the site.
19
+ */
20
+ siteImage?: string;
21
+ /**
22
+ * Link to the site dashboard.
23
+ */
24
+ siteLink: ReactNode;
25
+ /**
26
+ * Name of the site.
27
+ */
28
+ siteName?: string;
29
+ /**
30
+ * Plan of the site.
31
+ */
32
+ sitePlan?: string;
33
+ /**
34
+ * Status of the site.
35
+ */
36
+ siteStatus?: SiteStatus;
37
+ /**
38
+ * Additional class names
39
+ */
40
+ className?: string;
23
41
  }
24
- import React from 'react';
25
- import PropTypes from 'prop-types';
42
+ /**
43
+ * SiteCard UI component
44
+ */
45
+ export declare const SiteCard: ({ gotoText, headingLevel, siteImage, siteLink, siteName, sitePlan, siteStatus, className, ...props }: SiteCardProps) => React.JSX.Element;
@@ -1,19 +1,32 @@
1
- export function ExpansionPanel({ children, id, isOpen, summary, className, ...props }: {
2
- [x: string]: any;
3
- children: any;
4
- id: any;
1
+ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import './expansion-panel.css';
3
+ /**
4
+ * Prop types for ExpansionPanel
5
+ */
6
+ interface ExpansionPanelProps extends ComponentPropsWithoutRef<'div'> {
7
+ /**
8
+ * The content of the expansion panel.
9
+ */
10
+ children?: ReactNode;
11
+ /**
12
+ * The ID of the expansion panel. If not provided, a unique ID will be generated.
13
+ */
14
+ id?: string;
15
+ /**
16
+ * Whether the expansion panel is open or not.
17
+ */
5
18
  isOpen?: boolean;
6
- summary: any;
7
- className: any;
8
- }): React.JSX.Element;
9
- export namespace ExpansionPanel {
10
- namespace propTypes {
11
- let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
12
- let id: PropTypes.Requireable<string>;
13
- let isOpen: PropTypes.Requireable<boolean>;
14
- let summary: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
15
- let className: PropTypes.Requireable<string>;
16
- }
19
+ /**
20
+ * The summary label of the expansion panel.
21
+ */
22
+ summary?: string | ReactNode;
23
+ /**
24
+ * Additional class names
25
+ */
26
+ className?: string;
17
27
  }
18
- import React from 'react';
19
- import PropTypes from 'prop-types';
28
+ /**
29
+ * ExpansionPanel UI component
30
+ */
31
+ export declare const ExpansionPanel: ({ children, id, isOpen, summary, className, ...props }: ExpansionPanelProps) => React.JSX.Element;
32
+ export {};
@@ -1,15 +1,24 @@
1
- export function ExpansionPanelGroup({ children, displayType, className, ...props }: {
2
- [x: string]: any;
3
- children: any;
4
- displayType?: string;
5
- className: any;
6
- }): React.JSX.Element;
7
- export namespace ExpansionPanelGroup {
8
- namespace propTypes {
9
- let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
10
- let displayType: PropTypes.Requireable<string>;
11
- let className: PropTypes.Requireable<string>;
12
- }
1
+ import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import './expansion-panel-group.css';
3
+ /**
4
+ * Prop types for ExpansionPanelGroup
5
+ */
6
+ interface ExpansionPanelGroupProps extends ComponentPropsWithoutRef<'div'> {
7
+ /**
8
+ * The content of the expansion panel group. This should be a series of ExpansionPanel components.
9
+ */
10
+ children?: ReactNode;
11
+ /**
12
+ * The display type of the expansion panel group.
13
+ */
14
+ displayType?: 'standard' | 'no-border' | 'stacked';
15
+ /**
16
+ * Additional class names
17
+ */
18
+ className?: string;
13
19
  }
14
- import React from 'react';
15
- import PropTypes from 'prop-types';
20
+ /**
21
+ * ExpansionPanelGroup UI component
22
+ */
23
+ export declare const ExpansionPanelGroup: ({ children, displayType, className, ...props }: ExpansionPanelGroupProps) => React.JSX.Element;
24
+ export {};
@@ -1,4 +1,5 @@
1
1
  import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { SiteStatus } from '@libs/types/custom-types';
2
3
  export type SiteOption = {
3
4
  /**
4
5
  * Machine name of the site.
@@ -11,7 +12,7 @@ export type SiteOption = {
11
12
  /**
12
13
  * Site active status.
13
14
  */
14
- status?: 'active' | 'frozen';
15
+ status?: SiteStatus;
15
16
  /**
16
17
  * Site type.
17
18
  */
@@ -1 +1 @@
1
- .pds-avatar{--pds-avatar-size:1.953rem;align-items:center;border:.0625rem solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--pds-avatar-size);width:var(--pds-avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.09375rem}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.09375rem}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--image img{border-radius:100%;height:100%;width:auto}.pds-avatar--xs{--pds-avatar-size:1rem}.pds-avatar--sm{--pds-avatar-size:1.563rem}.pds-avatar--md{--pds-avatar-size:1.953rem}.pds-avatar--lg{--pds-avatar-size:2.441rem}
1
+ .pds-avatar{--pds-avatar-size:1.953rem;--pds-avatar-icon-size:1.125rem;align-items:center;border:.0625rem solid transparent;border-radius:100%;display:inline-flex;justify-content:center}.pds-avatar__content{border-radius:100%;display:flex;height:var(--pds-avatar-size);width:var(--pds-avatar-size)}.pds-avatar__content--link:hover{cursor:pointer;outline:1px solid var(--pds-color-interactive-link-hover);outline-offset:.09375rem}.pds-avatar__content--link:focus-visible{outline:1px solid var(--pds-color-interactive-focus);outline-offset:.09375rem}.pds-avatar--image{border-color:var(--pds-color-border-default)}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;margin:auto;width:auto}.pds-avatar__user-icon{color:var(--pds-color-foreground-reverse);height:var(--pds-avatar-icon-size);width:var(--pds-avatar-icon-size)}.pds-avatar--xs{--pds-avatar-size:1rem;--pds-avatar-icon-size:0.5625rem}.pds-avatar--sm{--pds-avatar-size:1.563rem;--pds-avatar-icon-size:0.875rem}.pds-avatar--md{--pds-avatar-size:1.953rem;--pds-avatar-icon-size:1.125rem}.pds-avatar--lg{--pds-avatar-size:2.441rem;--pds-avatar-icon-size:1.375rem}
@@ -0,0 +1 @@
1
+ .pds-card-heading{color:var(--pds-color-text-default);display:block;margin-block-end:1rem}
@@ -1 +1 @@
1
- .pds-card{background-color:var(--pds-color-background-default);border-radius:.375rem;box-shadow:var(--pds-elevation-raised);color:var(--pds-color-text-default);display:grid;grid-template-rows:auto 1fr auto;height:100%}@media (max-width:640px){.pds-card{margin:0 auto}}.pds-card--clickable{color:var(--pds-color-text-default);text-decoration:none}.pds-card--clickable:hover{box-shadow:var(--pds-elevation-active);color:var(--pds-color-text-default)}.pds-card--clickable:hover .pds-card__image img{filter:brightness(1.1)}.pds-card--clickable:focus-visible{border-radius:.375rem;outline:.125rem solid var(--pds-color-interactive-focus)}.pds-card__image img{aspect-ratio:1.618;border-radius:.375rem .375rem 0 0;display:block;object-fit:cover;width:100%}.pds-card__image a{line-height:0;text-decoration:none}.pds-card__text-elements{box-sizing:border-box;display:flex;flex-direction:column;padding:1.953rem;row-gap:.64rem}.pds-card__kicker{margin-block-end:.25rem}.pds-card__kicker--separator{color:var(--pds-color-border-default);font-weight:400;margin-inline:.512rem}.pds-card__heading{display:block;font-size:1.44rem;font-weight:700;margin-block-end:.125rem}.pds-card__bodytext p{font-size:1rem;line-height:140%}.pds-card__bodytext p:last-child{margin-bottom:0}.pds-card__links{margin-block-start:.8rem}@media (min-width:641px){.pds-card__links.pds-button-group .pds-button-link{flex-grow:1}}
1
+ .pds-card{background-color:var(--pds-color-background-default);border-radius:.375rem;box-shadow:var(--pds-elevation-raised);color:var(--pds-color-text-default);min-height:10rem}.pds-card__image{border-radius:.375rem .375rem 0 0;display:block;overflow:hidden}.pds-card__image img{display:block;width:100%}.pds-card__main{padding:1.25rem 1.563rem}.pds-card--transparent{background-color:transparent}.pds-card--pad-narrow .pds-card__main{padding:1rem 1.25rem}.pds-card--pad-wide .pds-card__main{padding:1.563rem 1.953rem}