@pantheon-systems/pds-toolkit-react 1.0.0-dev.151 → 1.0.0-dev.153

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 (22) hide show
  1. package/_dist/components/Tooltip/Tooltip.d.ts +5 -1
  2. package/_dist/components/buttons/IconButton/IconButton.d.ts +5 -1
  3. package/_dist/components/inputs/Switch/Switch.d.ts +74 -0
  4. package/_dist/components/inputs/input-utilities.d.ts +11 -2
  5. package/_dist/css/component-css/pds-banner.css +1 -1
  6. package/_dist/css/component-css/pds-icon-button.css +6 -6
  7. package/_dist/css/component-css/pds-index.css +10 -8
  8. package/_dist/css/component-css/pds-input-group.css +1 -1
  9. package/_dist/css/component-css/pds-input-utilities.css +1 -1
  10. package/_dist/css/component-css/pds-input-wrapper.css +1 -1
  11. package/_dist/css/component-css/pds-inputs-common-deprecated.css +1 -1
  12. package/_dist/css/component-css/pds-panel.css +1 -1
  13. package/_dist/css/component-css/pds-switch.css +3 -0
  14. package/_dist/css/component-css/pds-tooltip.css +1 -1
  15. package/_dist/css/design-tokens/pds-design-tokens.css +2 -0
  16. package/_dist/css/pds-components.css +10 -8
  17. package/_dist/css/pds-core.css +2 -2
  18. package/_dist/index.css +1 -1
  19. package/_dist/index.d.ts +1 -0
  20. package/_dist/index.js +2357 -2216
  21. package/_dist/index.js.map +1 -1
  22. package/package.json +2 -2
package/_dist/components/Tooltip/Tooltip.d.ts CHANGED
@@ -9,6 +9,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
9
9
  * Text or HTML content to use as the trigger instead of an icon. Leave null to use the icon. This allows passing HTML content to customize the trigger appearance or functionality.
10
10
  */
11
11
  customTrigger?: ReactNode;
12
+ /**
13
+ * Number to provide custom z-index value for the tooltip container
14
+ */
15
+ customZIndex?: number;
12
16
  /**
13
17
  * The spacing between the trigger and the tooltip in pixels. Only applies to tooltips with a custom trigger. Icon triggers have a fixed spacing.
14
18
  */
@@ -29,5 +33,5 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
29
33
  /**
30
34
  * Tooltip UI component
31
35
  */
32
- export declare const Tooltip: ({ content, customTrigger, offsetValue, triggerAccessibleText, triggerIcon, className, ...props }: TooltipProps) => React.JSX.Element;
36
+ export declare const Tooltip: ({ content, customTrigger, customZIndex, offsetValue, triggerAccessibleText, triggerIcon, className, ...props }: TooltipProps) => React.JSX.Element;
33
37
  export {};
package/_dist/components/buttons/IconButton/IconButton.d.ts CHANGED
@@ -14,6 +14,10 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
14
14
  * Is the button disabled?
15
15
  */
16
16
  disabled?: boolean;
17
+ /**
18
+ * Show tooltip on hover. If false, the title attribute will be used.
19
+ */
20
+ hasTooltip?: boolean;
17
21
  /**
18
22
  * Which icon to render
19
23
  */
@@ -38,5 +42,5 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
38
42
  /**
39
43
  * IconButton UI component
40
44
  */
41
- export declare const IconButton: ({ ariaLabel, buttonType, disabled, iconName, onClick, size, variant, className, ...props }: IconButtonProps) => React.JSX.Element;
45
+ export declare const IconButton: ({ ariaLabel, buttonType, disabled, hasTooltip, iconName, onClick, size, variant, className, ...props }: IconButtonProps) => React.JSX.Element;
42
46
  export {};
package/_dist/components/inputs/Switch/Switch.d.ts ADDED
@@ -0,0 +1,74 @@
1
+ import React, { ChangeEvent, ComponentPropsWithoutRef } from 'react';
2
+ import './switch.css';
3
+ type SwitchPlacement = 'right' | 'below';
4
+ /**
5
+ * Prop types for Switch
6
+ */
7
+ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
8
+ /**
9
+ * Is the field checked?
10
+ */
11
+ checked?: boolean;
12
+ /**
13
+ * Additional class names for input.
14
+ */
15
+ className?: string;
16
+ /**
17
+ * Initial value for the input field. Only valid if the input is uncontrolled. Cannot be used in conjunction with the `checked` prop.
18
+ */
19
+ defaultChecked?: boolean;
20
+ /**
21
+ * Is the field disabled?
22
+ */
23
+ disabled?: boolean;
24
+ /**
25
+ * Input ID.
26
+ */
27
+ id: string;
28
+ /**
29
+ * Additional props for the `<input>` element.
30
+ */
31
+ inputProps?: ComponentPropsWithoutRef<'input'>;
32
+ /**
33
+ * Width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
34
+ */
35
+ inputWidth?: number;
36
+ /**
37
+ * Label of the switch field.
38
+ */
39
+ label: string;
40
+ /**
41
+ * Message or description used to help clarify the usage of the input.
42
+ */
43
+ message?: string;
44
+ /**
45
+ * Status text for when switch is off.
46
+ */
47
+ offLabel?: string;
48
+ /**
49
+ * onChange event handler. Controlled inputs should use this to manage the input value. Uncontrolled inputs will manage their own state, but may still use this to access the event object.
50
+ */
51
+ onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
52
+ /**
53
+ * Status text for when switch is on.
54
+ */
55
+ onLabel?: string;
56
+ /**
57
+ * Is this field required?
58
+ */
59
+ required?: boolean;
60
+ /**
61
+ * Should the label be visible? If false, it will render for screen readers only.
62
+ */
63
+ showLabel?: boolean;
64
+ /**
65
+ * Show toggle status label next to switch. If false, icons will render and the text will still be available to screen readers.
66
+ */
67
+ showStatusLabel?: boolean;
68
+ /**
69
+ * Determines switch placement, default set to `right`.
70
+ */
71
+ switchPlacement?: SwitchPlacement;
72
+ }
73
+ export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
74
+ export {};
package/_dist/components/inputs/input-utilities.d.ts CHANGED
@@ -8,19 +8,21 @@ export declare const inputCommonClasses: {
8
8
  success: string;
9
9
  readonly: string;
10
10
  };
11
- export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, }: {
11
+ export declare const InputLabel: ({ id, label, showLabel, required, disabled, isLegend, className, }: {
12
12
  id: string;
13
13
  label: string;
14
14
  showLabel: boolean;
15
15
  required?: boolean;
16
16
  disabled?: boolean;
17
17
  isLegend?: boolean;
18
+ className?: string;
18
19
  }) => React.JSX.Element;
19
- export declare const InputMessage: ({ id, message, hasValidationMessage, validationStatus, }: {
20
+ export declare const InputMessage: ({ id, message, hasValidationMessage, validationStatus, className, }: {
20
21
  id: string;
21
22
  message: string;
22
23
  hasValidationMessage: boolean;
23
24
  validationStatus: string;
25
+ className?: string;
24
26
  }) => React.JSX.Element;
25
27
  type DecoratorVariants = 'search' | 'error' | 'success';
26
28
  export declare const InputDecorator: ({ variant }: {
@@ -41,4 +43,11 @@ export declare const CharacterCounter: ({ id, currentLength, maxLength, overLimi
41
43
  maxLength: number;
42
44
  overLimitMessage: string;
43
45
  }) => React.JSX.Element;
46
+ export declare const HiddenLabel: ({ label, ...props }: {
47
+ [x: string]: any;
48
+ label: any;
49
+ }) => React.JSX.Element;
50
+ export declare const getInputWidthStyle: (inputWidth: number) => {
51
+ width: string;
52
+ };
44
53
  export {};
package/_dist/css/component-css/pds-banner.css CHANGED
@@ -1 +1 @@
1
- .pds-banner-group{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground);--pds-banner-height:4.678rem;--pds-nav-button-size:1.953rem;min-height:var(--pds-banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--pds-banner-height:3.815rem}}.pds-banner{background:var(--pds-banner-background);box-sizing:border-box;color:var(--pds-banner-foreground);font-size:.833rem;height:var(--pds-banner-height);justify-content:space-between;padding-inline:1.953rem;position:absolute;width:100%}.pds-banner,.pds-banner__content{align-items:center;display:flex;gap:.8rem}.pds-banner-group--multiple .pds-banner{padding-inline:3.052rem}.pds-banner__icon{flex-grow:0;flex-shrink:0}.pds-banner__message p{all:unset}.pds-banner__message a{color:var(--pds-banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--pds-banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__dismiss-button{all:unset;border-radius:.1875rem;cursor:pointer;padding:.328rem .512rem;transition:all .2s ease-in-out 0s}.pds-banner__dismiss-button:hover{background-color:hsla(0,0%,100%,.2)}.pds-banner__dismiss-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__navigation{display:flex;justify-content:space-between;width:100%}button.pds-banner__nav-button{color:var(--pds-banner-foreground);height:var(--pds-nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--pds-nav-button-size);z-index:calc(var(--pds-z-index-notifications) + 10)}@media (min-width:641px){button.pds-banner__nav-button{margin-block:.9375rem}}button.pds-banner__nav-button:hover{background-color:hsla(0,0%,100%,.2)}button.pds-banner__nav-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner--critical{--pds-banner-background:var(--pds-color-banner-critical-background);--pds-banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning{--pds-banner-background:var(--pds-color-banner-warning-background);--pds-banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner--dismissing,.pds-banner--fading{animation:hideBannerAnimation .3s ease-in;animation-fill-mode:forwards}@keyframes hideBannerAnimation{to{opacity:0}0%{opacity:1}}
1
+ .pds-banner-group{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground);--pds-banner-height:4.678rem;--pds-nav-button-size:1.953rem;min-height:var(--pds-banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--pds-banner-height:3.815rem}}.pds-banner{background:var(--pds-banner-background);box-sizing:border-box;color:var(--pds-banner-foreground);font-size:.833rem;height:var(--pds-banner-height);justify-content:space-between;padding-inline:1.953rem;position:absolute;width:100%}.pds-banner,.pds-banner__content{align-items:center;display:flex;gap:.8rem}.pds-banner-group--multiple .pds-banner{padding-inline:3.052rem}.pds-banner__icon{flex-grow:0;flex-shrink:0}.pds-banner__message p{all:unset}.pds-banner__message a{color:var(--pds-banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--pds-banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__dismiss-button{all:unset;border-radius:.1875rem;cursor:pointer;padding:.328rem .512rem;transition:all .2s ease-in-out 0s}.pds-banner__dismiss-button:hover{background-color:hsla(0,0%,100%,.2)}.pds-banner__dismiss-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__navigation{display:flex;justify-content:space-between;width:100%}button.pds-banner__nav-button{color:var(--pds-banner-foreground);height:var(--pds-nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--pds-nav-button-size);z-index:calc(var(--pds-z-index-notifications) + 10)}@media (min-width:641px){button.pds-banner__nav-button{margin-block:.9375rem}}button.pds-banner__nav-button:hover:enabled{background-color:hsla(0,0%,100%,.2)}button.pds-banner__nav-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner--critical{--pds-banner-background:var(--pds-color-banner-critical-background);--pds-banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning{--pds-banner-background:var(--pds-color-banner-warning-background);--pds-banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner--dismissing,.pds-banner--fading{animation:hideBannerAnimation .3s ease-in;animation-fill-mode:forwards}@keyframes hideBannerAnimation{to{opacity:0}0%{opacity:1}}
package/_dist/css/component-css/pds-icon-button.css CHANGED
@@ -1,12 +1,12 @@
1
- button.pds-icon-button{--pds-button-color-background:var(
2
- --pds-color-icon-button-standard-background-default
1
+ button.pds-icon-button{--pds-button-size:2.441rem;--pds-button-color-foreground:var(
2
+ --pds-color-icon-button-standard-foreground-default
3
3
  );--pds-button-color-background-hover:var(
4
4
  --pds-color-icon-button-standard-background-hover
5
5
  );--pds-button-color-background-active:var(
6
6
  --pds-color-icon-button-standard-background-active
7
- );--pds-button-color-foreground:var(
8
- --pds-color-icon-button-standard-foreground-default
9
- );--pds-button-size:2.441rem;align-items:center;background-color:var(--pds-button-color-background);border:none;border-radius:.1875rem;color:var(--pds-button-color-foreground);cursor:pointer;display:inline-flex;height:var(--pds-button-size);justify-content:center;transition:all .2s ease-in-out 0s;width:var(--pds-button-size)}button.pds-icon-button:disabled{cursor:not-allowed;opacity:45%}button.pds-icon-button:hover:enabled{background-color:var(--pds-button-color-background-hover)}button.pds-icon-button:active:enabled{background-color:var(--pds-button-color-background-active)}button.pds-icon-button:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus)}button.pds-icon-button--critical{--pds-button-color-background:var(
7
+ );--pds-button-color-background:var(
8
+ --pds-color-icon-button-standard-background-default
9
+ );background-color:var(--pds-button-color-background);border:none;border-radius:.1875rem;color:var(--pds-button-color-foreground);height:var(--pds-button-size);padding:0;width:var(--pds-button-size)}.pds-icon-button__content{align-content:stretch;align-items:center;display:flex;height:100%;justify-content:center}.pds-icon-button:disabled .pds-icon-button__content{cursor:not-allowed;opacity:45%}button.pds-icon-button:hover:enabled{background-color:var(--pds-button-color-background-hover)}button.pds-icon-button:active:enabled{background-color:var(--pds-button-color-background-active)}button.pds-icon-button:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus)}button.pds-icon-button--critical{--pds-button-color-background:var(
10
10
  --pds-color-icon-button-critical-background-default
11
11
  );--pds-button-color-background-hover:var(
12
12
  --pds-color-icon-button-critical-background-hover
@@ -14,4 +14,4 @@ button.pds-icon-button{--pds-button-color-background:var(
14
14
  --pds-color-icon-button-critical-background-active
15
15
  );--pds-button-color-foreground:var(
16
16
  --pds-color-icon-button-critical-foreground-default
17
- )}button.pds-icon-button--sm{--pds-button-size:1.953rem}button.pds-icon-button--lg{--pds-button-size:3.052rem}
17
+ )}button.pds-icon-button--sm{--pds-button-size:1.953rem}button.pds-icon-button--lg{--pds-button-size:3.052rem}.pds-icon-button__tooltip .pds-tooltip__container{padding:.328rem .512rem}