@bcgov/design-system-react-components 0.2.4-rc1 → 0.2.4-rc2
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/cjs/index.cjs +548 -63
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/AlertDialog/AlertDialog.d.ts +13 -0
- package/dist/cjs/types/components/AlertDialog/index.d.ts +2 -0
- package/dist/cjs/types/components/Dialog/Dialog.d.ts +7 -0
- package/dist/cjs/types/components/Dialog/index.d.ts +2 -0
- package/dist/cjs/types/components/Modal/Modal.d.ts +3 -0
- package/dist/cjs/types/components/Modal/index.d.ts +2 -0
- package/dist/cjs/types/components/index.d.ts +5 -2
- package/dist/esm/index.js +545 -64
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/AlertDialog/AlertDialog.d.ts +13 -0
- package/dist/esm/types/components/AlertDialog/index.d.ts +2 -0
- package/dist/esm/types/components/Dialog/Dialog.d.ts +7 -0
- package/dist/esm/types/components/Dialog/index.d.ts +2 -0
- package/dist/esm/types/components/Modal/Modal.d.ts +3 -0
- package/dist/esm/types/components/Modal/index.d.ts +2 -0
- package/dist/esm/types/components/index.d.ts +5 -2
- package/dist/index.d.ts +54 -37
- package/package.json +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { DialogTrigger, DialogProps as ReactAriaDialogProps } from "react-aria-components";
|
|
2
|
+
import "./AlertDialog.css";
|
|
3
|
+
import React from "react";
|
|
4
|
+
export interface AlertDialogProps extends ReactAriaDialogProps {
|
|
5
|
+
variant?: "info" | "confirmation" | "warning" | "error" | "destructive";
|
|
6
|
+
title?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
isIconHidden?: boolean;
|
|
9
|
+
isCloseable?: boolean;
|
|
10
|
+
buttons?: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export default function AlertDialog({ variant, role, title, isCloseable, isIconHidden, description, buttons, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export { DialogTrigger };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { DialogTrigger, DialogProps as ReactAriaDialogProps } from "react-aria-components";
|
|
2
|
+
import "./Dialog.css";
|
|
3
|
+
export interface DialogProps extends ReactAriaDialogProps {
|
|
4
|
+
isCloseable?: boolean;
|
|
5
|
+
}
|
|
6
|
+
export default function Dialog({ isCloseable, role, children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { DialogTrigger };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { ModalOverlayProps } from "react-aria-components";
|
|
2
|
+
import "./Modal.css";
|
|
3
|
+
export default function Modal({ children, isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, shouldCloseOnInteractOutside, ...props }: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import "@bcgov/design-tokens/css/variables.css";
|
|
2
|
-
export { default as
|
|
2
|
+
export { default as AlertDialog } from "./AlertDialog";
|
|
3
3
|
export { default as Button } from "./Button";
|
|
4
4
|
export { default as ButtonGroup } from "./ButtonGroup";
|
|
5
5
|
export { default as Checkbox } from "./Checkbox";
|
|
6
6
|
export { default as CheckboxGroup } from "./CheckboxGroup";
|
|
7
|
-
export { default as
|
|
7
|
+
export { default as Dialog, DialogTrigger } from "./Dialog";
|
|
8
8
|
export { default as Footer, FooterLinks } from "./Footer";
|
|
9
9
|
export { default as Form } from "./Form";
|
|
10
|
+
export { default as Header } from "./Header";
|
|
11
|
+
export { default as InlineAlert } from "./InlineAlert";
|
|
12
|
+
export { default as Modal } from "./Modal";
|
|
10
13
|
export { default as Radio } from "./Radio";
|
|
11
14
|
export { default as RadioGroup } from "./RadioGroup";
|
|
12
15
|
export { default as Select } from "./Select";
|
package/dist/index.d.ts
CHANGED
|
@@ -1,19 +1,17 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ButtonProps as ButtonProps$1, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, FormProps, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextFieldProps as TextFieldProps$1, SwitchProps as SwitchProps$1, TooltipProps } from 'react-aria-components';
|
|
3
|
-
export { TooltipTrigger } from 'react-aria-components';
|
|
4
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { DialogProps as DialogProps$1, ButtonProps as ButtonProps$1, CheckboxProps, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, FormProps, ModalOverlayProps, RadioProps, RadioGroupProps as RadioGroupProps$1, SelectProps as SelectProps$1, ListBoxItemProps as ListBoxItemProps$1, Key, TagProps as TagProps$1, TagGroupProps as TagGroupProps$1, TagListProps as TagListProps$1, TextFieldProps as TextFieldProps$1, SwitchProps as SwitchProps$1, TooltipProps } from 'react-aria-components';
|
|
3
|
+
export { DialogTrigger, TooltipTrigger } from 'react-aria-components';
|
|
4
|
+
import React$1, { PropsWithChildren } from 'react';
|
|
5
5
|
|
|
6
|
-
interface
|
|
7
|
-
variant?: "info" | "
|
|
6
|
+
interface AlertDialogProps extends DialogProps$1 {
|
|
7
|
+
variant?: "info" | "confirmation" | "warning" | "error" | "destructive";
|
|
8
8
|
title?: string;
|
|
9
9
|
description?: string;
|
|
10
|
-
buttons?: React.ReactNode;
|
|
11
|
-
isCloseable?: boolean;
|
|
12
10
|
isIconHidden?: boolean;
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
isCloseable?: boolean;
|
|
12
|
+
buttons?: React$1.ReactNode;
|
|
15
13
|
}
|
|
16
|
-
declare function
|
|
14
|
+
declare function AlertDialog({ variant, role, title, isCloseable, isIconHidden, description, buttons, ...props }: AlertDialogProps): react_jsx_runtime.JSX.Element;
|
|
17
15
|
|
|
18
16
|
interface ButtonProps extends ButtonProps$1 {
|
|
19
17
|
/**
|
|
@@ -54,33 +52,10 @@ interface CheckboxGroupProps extends CheckboxGroupProps$1 {
|
|
|
54
52
|
}
|
|
55
53
|
declare function CheckboxGroup({ orientation, label, description, errorMessage, flexWrap, children, ...props }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
56
54
|
|
|
57
|
-
interface
|
|
58
|
-
|
|
59
|
-
* Link element that surrounds the logo. Use what's appropriate for your
|
|
60
|
-
* router, like a `<Link>`. Defaults to a generic HTML link element like
|
|
61
|
-
* `<a href="/" title="Government of British Columbia">`
|
|
62
|
-
*/
|
|
63
|
-
logoLinkElement?: React.ReactElement;
|
|
64
|
-
/**
|
|
65
|
-
* Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
|
|
66
|
-
*/
|
|
67
|
-
logoImage?: JSX.Element;
|
|
68
|
-
/**
|
|
69
|
-
* Array of link elements that are not visible until they are focused. Used
|
|
70
|
-
* for accessibility for keyboard users, to let them easily skip to main
|
|
71
|
-
* content, navigation, etc.
|
|
72
|
-
*/
|
|
73
|
-
skipLinks?: React.ReactElement[];
|
|
74
|
-
/**
|
|
75
|
-
* Header title text that appears to the right of the logo.
|
|
76
|
-
*/
|
|
77
|
-
title?: string;
|
|
78
|
-
/**
|
|
79
|
-
* Desired element that renders the `title` string. Defaults to `<span>`.
|
|
80
|
-
*/
|
|
81
|
-
titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
|
|
55
|
+
interface DialogProps extends DialogProps$1 {
|
|
56
|
+
isCloseable?: boolean;
|
|
82
57
|
}
|
|
83
|
-
declare function
|
|
58
|
+
declare function Dialog({ isCloseable, role, children, ...props }: DialogProps): react_jsx_runtime.JSX.Element;
|
|
84
59
|
|
|
85
60
|
interface FooterLinksProps {
|
|
86
61
|
/**
|
|
@@ -146,6 +121,48 @@ declare function Footer({ children, acknowledgement, logo, contact, links, copyr
|
|
|
146
121
|
|
|
147
122
|
declare function Form({ ...props }: FormProps): react_jsx_runtime.JSX.Element;
|
|
148
123
|
|
|
124
|
+
interface HeaderProps {
|
|
125
|
+
/**
|
|
126
|
+
* Link element that surrounds the logo. Use what's appropriate for your
|
|
127
|
+
* router, like a `<Link>`. Defaults to a generic HTML link element like
|
|
128
|
+
* `<a href="/" title="Government of British Columbia">`
|
|
129
|
+
*/
|
|
130
|
+
logoLinkElement?: React.ReactElement;
|
|
131
|
+
/**
|
|
132
|
+
* Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
|
|
133
|
+
*/
|
|
134
|
+
logoImage?: JSX.Element;
|
|
135
|
+
/**
|
|
136
|
+
* Array of link elements that are not visible until they are focused. Used
|
|
137
|
+
* for accessibility for keyboard users, to let them easily skip to main
|
|
138
|
+
* content, navigation, etc.
|
|
139
|
+
*/
|
|
140
|
+
skipLinks?: React.ReactElement[];
|
|
141
|
+
/**
|
|
142
|
+
* Header title text that appears to the right of the logo.
|
|
143
|
+
*/
|
|
144
|
+
title?: string;
|
|
145
|
+
/**
|
|
146
|
+
* Desired element that renders the `title` string. Defaults to `<span>`.
|
|
147
|
+
*/
|
|
148
|
+
titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
|
|
149
|
+
}
|
|
150
|
+
declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: PropsWithChildren<HeaderProps>): react_jsx_runtime.JSX.Element;
|
|
151
|
+
|
|
152
|
+
interface InlineAlertProps extends React.PropsWithChildren {
|
|
153
|
+
variant?: "info" | "success" | "warning" | "danger";
|
|
154
|
+
title?: string;
|
|
155
|
+
description?: string;
|
|
156
|
+
buttons?: React.ReactNode;
|
|
157
|
+
isCloseable?: boolean;
|
|
158
|
+
isIconHidden?: boolean;
|
|
159
|
+
role?: React.AriaRole | undefined;
|
|
160
|
+
onClose?: () => void;
|
|
161
|
+
}
|
|
162
|
+
declare function InlineAlert({ variant, title, description, isIconHidden, isCloseable, role, buttons, children, onClose, ...props }: InlineAlertProps): react_jsx_runtime.JSX.Element;
|
|
163
|
+
|
|
164
|
+
declare function Modal({ children, isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, shouldCloseOnInteractOutside, ...props }: ModalOverlayProps): react_jsx_runtime.JSX.Element;
|
|
165
|
+
|
|
149
166
|
declare function Radio({ value, children, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
150
167
|
|
|
151
168
|
interface RadioGroupProps extends RadioGroupProps$1 {
|
|
@@ -302,4 +319,4 @@ declare function Switch({ labelPosition, children, ...props }: SwitchProps): rea
|
|
|
302
319
|
|
|
303
320
|
declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
304
321
|
|
|
305
|
-
export { Button, ButtonGroup, Checkbox, CheckboxGroup, Footer, FooterLinks, Form, Header, InlineAlert, Radio, RadioGroup, Select, SvgBcLogo, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgTooltipArrowUp, Switch, Tag, TagGroup, TagList, TextArea, TextField, Tooltip };
|
|
322
|
+
export { AlertDialog, Button, ButtonGroup, Checkbox, CheckboxGroup, Dialog, Footer, FooterLinks, Form, Header, InlineAlert, Modal, Radio, RadioGroup, Select, SvgBcLogo, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgTooltipArrowUp, Switch, Tag, TagGroup, TagList, TextArea, TextField, Tooltip };
|