@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.9
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/Drawer/Drawer.d.ts +58 -0
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/buttons/CloseButton/CloseButton.d.ts +2 -2
- package/dist/components/cards/Card/Card.d.ts +1 -1
- package/dist/components/inputs/Checkbox/Checkbox.d.ts +2 -2
- package/dist/components/notifications/Toaster/Toaster.d.ts +2 -2
- package/dist/components/panels/Panel/Panel.d.ts +1 -18
- package/dist/css/component-css/pds-card.css +1 -1
- package/dist/css/component-css/pds-checkbox.css +1 -1
- package/dist/css/component-css/pds-drawer.css +1 -0
- package/dist/css/component-css/pds-index.css +11 -9
- package/dist/css/component-css/pds-modal.css +1 -1
- package/dist/css/component-css/pds-panel.css +1 -1
- package/dist/css/component-css/pds-radio-group.css +1 -1
- package/dist/css/component-css/pds-side-nav-global.css +7 -5
- package/dist/css/component-css/pds-toaster.css +1 -1
- package/dist/css/pds-components.css +11 -9
- package/dist/css/pds-core.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +10 -0
- package/dist/index.js +2565 -1274
- package/dist/index.js.map +1 -1
- package/package.json +15 -11
- package/tailwind/README.md +220 -0
- package/tailwind/TESTING.md +457 -0
- package/tailwind/v3/preset.cjs +258 -0
- package/tailwind/v4/theme.css +230 -0
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import './drawer.css';
|
|
3
|
+
export type DrawerPlacement = 'left' | 'right';
|
|
4
|
+
export type DrawerSize = 's' | 'm' | 'l';
|
|
5
|
+
export interface DrawerProps extends ComponentPropsWithoutRef<'div'> {
|
|
6
|
+
/**
|
|
7
|
+
* Aria label that describes the drawer. Will default to the title if not provided.
|
|
8
|
+
*/
|
|
9
|
+
ariaLabel?: string;
|
|
10
|
+
/**
|
|
11
|
+
* Main content for the drawer.
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Additional class names
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Text for close button aria-label attribute.
|
|
20
|
+
*/
|
|
21
|
+
closeButtonLabel?: string;
|
|
22
|
+
/**
|
|
23
|
+
* If true, clicking outside the drawer will not close it.
|
|
24
|
+
*/
|
|
25
|
+
disableOutsideClick?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Indicates if the built-in close button will be shown.
|
|
28
|
+
*/
|
|
29
|
+
hasCloseButton?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Is the drawer open?
|
|
32
|
+
*/
|
|
33
|
+
isOpen?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Which edge of the screen the drawer slides in from.
|
|
36
|
+
*/
|
|
37
|
+
placement?: DrawerPlacement;
|
|
38
|
+
/**
|
|
39
|
+
* Function to set the drawer open state.
|
|
40
|
+
*/
|
|
41
|
+
setIsOpen?: (isOpen: boolean) => void;
|
|
42
|
+
/**
|
|
43
|
+
* Preset width of the drawer. Overridden by the `width` prop if provided.
|
|
44
|
+
*/
|
|
45
|
+
size?: DrawerSize;
|
|
46
|
+
/**
|
|
47
|
+
* Text for the drawer title. Leave empty for no title.
|
|
48
|
+
*/
|
|
49
|
+
title?: string;
|
|
50
|
+
/**
|
|
51
|
+
* Custom width for the drawer. Accepts any valid CSS value (e.g. '50vw', '800px', '40rem'). Overrides the `size` prop.
|
|
52
|
+
*/
|
|
53
|
+
width?: string;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Drawer UI component
|
|
57
|
+
*/
|
|
58
|
+
export declare const Drawer: ({ ariaLabel, children, className, closeButtonLabel, disableOutsideClick, hasCloseButton, isOpen: isOpenProp, placement, setIsOpen: setIsOpenProp, size, title, width, ...props }: DrawerProps) => any;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
1
|
+
import React, { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './close-button.css';
|
|
3
3
|
/**
|
|
4
4
|
* Prop types for CloseButton
|
|
@@ -15,7 +15,7 @@ export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
15
15
|
/**
|
|
16
16
|
* Click event callback function.
|
|
17
17
|
*/
|
|
18
|
-
onClick?: () => void;
|
|
18
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
19
19
|
/**
|
|
20
20
|
* Size of the icon.
|
|
21
21
|
*/
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import { GridGapOptions } from '../../../libs/types/layout-types';
|
|
3
3
|
import './card.css';
|
|
4
|
-
export type CardBackground = 'default' | '
|
|
4
|
+
export type CardBackground = 'default' | 'transparent';
|
|
5
5
|
/**
|
|
6
6
|
* Prop types for Card
|
|
7
7
|
*/
|
|
@@ -74,9 +74,9 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
74
74
|
*/
|
|
75
75
|
showLabel?: boolean;
|
|
76
76
|
/**
|
|
77
|
-
* Size of the
|
|
77
|
+
* Size of the checkbox and label.
|
|
78
78
|
*/
|
|
79
|
-
size?: '
|
|
79
|
+
size?: 's' | 'm';
|
|
80
80
|
/**
|
|
81
81
|
* Validation message for the input field based on the validation status.
|
|
82
82
|
*/
|
|
@@ -6,9 +6,9 @@ import './toaster.css';
|
|
|
6
6
|
*/
|
|
7
7
|
interface ToasterProps extends ComponentPropsWithoutRef<'div'> {
|
|
8
8
|
/**
|
|
9
|
-
* Duration in milliseconds before the toast will auto-close.
|
|
9
|
+
* Duration in milliseconds before the toast will auto-close. Set to `false` to disable auto-close (default).
|
|
10
10
|
*/
|
|
11
|
-
autoCloseDuration?: number;
|
|
11
|
+
autoCloseDuration?: number | false;
|
|
12
12
|
/**
|
|
13
13
|
* Additional class names
|
|
14
14
|
*/
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import { StatusType } from '../../../libs/types/custom-types';
|
|
3
2
|
import { GridGapOptions } from '../../../libs/types/layout-types';
|
|
4
3
|
import './panel.css';
|
|
5
|
-
export type PanelStatusType = Exclude<StatusType, 'discovery'> | 'neutral';
|
|
6
|
-
type TypeLabels = Record<Exclude<StatusType, 'discovery'>, string>;
|
|
7
4
|
export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
|
|
8
5
|
/**
|
|
9
6
|
* Panel content.
|
|
@@ -13,23 +10,10 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
13
10
|
* Additional class names
|
|
14
11
|
*/
|
|
15
12
|
className?: string;
|
|
16
|
-
/**
|
|
17
|
-
* Should the panel show a status indicator.
|
|
18
|
-
*/
|
|
19
|
-
hasStatusIndicator?: boolean;
|
|
20
13
|
/**
|
|
21
14
|
* Padding for the panel.
|
|
22
15
|
*/
|
|
23
16
|
padding?: GridGapOptions;
|
|
24
|
-
/**
|
|
25
|
-
* Status type for panel. Only renders if `hasStatusIndicator` is true.
|
|
26
|
-
*/
|
|
27
|
-
statusType?: PanelStatusType;
|
|
28
|
-
/**
|
|
29
|
-
* Status type labels for screen readers. Provide translation strings if needed.
|
|
30
|
-
* Set to empty string ('') to create a visual-only indicator.
|
|
31
|
-
*/
|
|
32
|
-
typeLabels?: TypeLabels;
|
|
33
17
|
/**
|
|
34
18
|
* Which variant of panel to render
|
|
35
19
|
*/
|
|
@@ -38,5 +22,4 @@ export interface PanelProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
38
22
|
/**
|
|
39
23
|
* Panel UI component
|
|
40
24
|
*/
|
|
41
|
-
export declare const Panel: ({ children, className,
|
|
42
|
-
export {};
|
|
25
|
+
export declare const Panel: ({ children, className, padding, variant, ...props }: PanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-card{background-color:var(--pds-color-
|
|
1
|
+
.pds-card{background-color:var(--pds-color-bg-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-raised);color:var(--pds-color-fg-default);display:flex;flex-direction:column;min-height:8rem}.pds-card__image{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;display:block;overflow:hidden}.pds-card__image img{display:block;width:100%}.pds-card__main{flex-grow:1;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-card--transparent{background-color:transparent}.pds-card--pad-narrow .pds-card__main{padding:var(--pds-spacing-m)}.pds-card--pad-wide .pds-card__main{padding:var(--pds-spacing-xl) var(--pds-spacing-2xl)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.pds-checkbox{--checkbox-font-size:var(--pds-typography-size-
|
|
1
|
+
.pds-checkbox{--checkbox-font-size:var(--pds-typography-size-input-label);--checkbox-input-size:1rem;--checkbox-input-gap:var(--pds-spacing-2xs);line-height:1.2}.pds-checkbox--m{--checkbox-font-size:var(--pds-typography-size-s);--checkbox-input-size:1.25rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:center;column-gap:var(--checkbox-input-gap);display:grid;grid-template-columns:var(--checkbox-input-size) auto;margin-block-end:0}.pds-checkbox__label-text{color:var(--pds-color-fg-default);font-size:var(--checkbox-font-size);font-weight:var(--pds-typography-fw-regular)}.pds-checkbox__box{align-items:center;background-color:var(--pds-color-input-background);border:var(--pds-border-width-default) solid var(--pds-color-fg-default);border-radius:var(--pds-border-radius-input);display:flex;height:var(--checkbox-input-size);padding:.0625rem;transition:var(--pds-animation-transition-default);width:var(--checkbox-input-size)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-bg-reverse);border-color:var(--pds-color-bg-reverse);transition:var(--pds-animation-transition-default)}.pds-checkbox__icon{color:var(--pds-color-fg-reverse);height:100%;transition:var(--pds-animation-transition-default);width:100%}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox input[type=checkbox]:focus-visible~label .pds-checkbox__box{outline:var(--pds-border-width-default) solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:40%}.pds-checkbox.pds-has-error .pds-checkbox__box{border-color:var(--pds-color-status-critical-foreground)}.pds-checkbox.pds-has-error .pds-checkbox__label-text{color:var(--pds-color-status-critical-foreground)}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--checkbox-input-size)*2 - var(--checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--checkbox-input-size)*4 - var(--checkbox-input-gap)*2)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.pds-drawer__wrapper{inset:0;position:fixed;z-index:var(--pds-z-index-modal)}.pds-drawer__overlay{background-color:var(--pds-color-overlay-subtle);inset:0;opacity:0;position:fixed;transition:opacity .3s ease}.pds-drawer__overlay--visible{opacity:1}.pds-drawer{background-color:var(--pds-color-bg-default);display:flex;flex-direction:column;height:100vh;max-width:90vw;overflow:hidden;position:fixed;top:0;transition:transform .3s cubic-bezier(.2,0,0,1);width:25rem}.pds-drawer--right{box-shadow:var(--pds-elevation-drawer-right);right:0;transform:translateX(100%)}.pds-drawer--left{box-shadow:var(--pds-elevation-drawer-left);left:0;transform:translateX(-100%)}.pds-drawer--open{transform:translateX(0)}.pds-drawer--s{width:20rem}.pds-drawer--m{width:25rem}.pds-drawer--l{width:37.5rem}.pds-drawer__header{align-items:center;display:flex;justify-content:space-between;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-drawer__title{font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xl);font-weight:var(--pds-typography-fw-semibold);line-height:var(--pds-typography-lh-s)}.pds-drawer__content{flex:1;overflow-y:auto;padding:0 var(--pds-spacing-xl) var(--pds-spacing-xl)}
|