@bcgov/design-system-react-components 0.0.3 → 0.0.5

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 (31) hide show
  1. package/README.md +35 -11
  2. package/dist/cjs/index.cjs +295 -326
  3. package/dist/cjs/index.cjs.map +1 -1
  4. package/dist/cjs/types/components/Button/Button.d.ts +12 -0
  5. package/dist/cjs/types/components/Footer/Footer.d.ts +37 -0
  6. package/dist/cjs/types/components/Footer/index.d.ts +2 -0
  7. package/dist/cjs/types/components/Header/Header.d.ts +29 -0
  8. package/dist/cjs/types/components/Header/index.d.ts +2 -0
  9. package/dist/cjs/types/components/Select/Select.d.ts +9 -3
  10. package/dist/cjs/types/components/SvgBcLogo/SvgBcLogo.d.ts +3 -0
  11. package/dist/cjs/types/components/SvgBcLogo/index.d.ts +1 -0
  12. package/dist/cjs/types/components/Tag/Tag.d.ts +7 -1
  13. package/dist/cjs/types/components/TagGroup/TagGroup.d.ts +9 -0
  14. package/dist/cjs/types/components/TagList/TagList.d.ts +3 -0
  15. package/dist/cjs/types/components/index.d.ts +3 -1
  16. package/dist/esm/index.js +293 -326
  17. package/dist/esm/index.js.map +1 -1
  18. package/dist/esm/types/components/Button/Button.d.ts +12 -0
  19. package/dist/esm/types/components/Footer/Footer.d.ts +37 -0
  20. package/dist/esm/types/components/Footer/index.d.ts +2 -0
  21. package/dist/esm/types/components/Header/Header.d.ts +29 -0
  22. package/dist/esm/types/components/Header/index.d.ts +2 -0
  23. package/dist/esm/types/components/Select/Select.d.ts +9 -3
  24. package/dist/esm/types/components/SvgBcLogo/SvgBcLogo.d.ts +3 -0
  25. package/dist/esm/types/components/SvgBcLogo/index.d.ts +1 -0
  26. package/dist/esm/types/components/Tag/Tag.d.ts +7 -1
  27. package/dist/esm/types/components/TagGroup/TagGroup.d.ts +9 -0
  28. package/dist/esm/types/components/TagList/TagList.d.ts +3 -0
  29. package/dist/esm/types/components/index.d.ts +3 -1
  30. package/dist/index.d.ts +108 -18
  31. package/package.json +19 -19
@@ -1,9 +1,21 @@
1
1
  import { ButtonProps as ReactAriaButtonProps } from "react-aria-components";
2
2
  import "./Button.css";
3
3
  export interface ButtonProps extends ReactAriaButtonProps {
4
+ /**
5
+ * Defaults to `medium`. `small` is shorter vertically.
6
+ */
4
7
  size?: "small" | "medium";
8
+ /**
9
+ * Defaults to `primary`.
10
+ */
5
11
  variant?: "primary" | "secondary" | "tertiary" | "link";
12
+ /**
13
+ * For destructive/deletion actions.
14
+ */
6
15
  danger?: boolean;
16
+ /**
17
+ * If true, renders a square button intended for a single icon.
18
+ */
7
19
  isIconButton?: boolean;
8
20
  }
9
21
  export default function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,37 @@
1
+ import React from "react";
2
+ import "./Footer.css";
3
+ export interface FooterProps {
4
+ /**
5
+ * Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
6
+ */
7
+ acknowledgement?: React.ReactElement;
8
+ /**
9
+ * Logo slot (defaults to BC Gov horizontal logo)
10
+ */
11
+ logo?: React.ReactElement;
12
+ /**
13
+ * Contact information block (defaults to Gov.bc.ca contact information)
14
+ */
15
+ contact?: React.ReactElement;
16
+ /**
17
+ * Link list block (defaults to Gov.bc.ca link list)
18
+ */
19
+ links?: React.ReactElement;
20
+ /**
21
+ * Copyright string (defaults to current year)
22
+ */
23
+ copyright?: string;
24
+ /**
25
+ * Hide the acknowledgement section
26
+ */
27
+ hideAcknowledgement?: boolean;
28
+ /**
29
+ * Hide the logo, contact information, and links section
30
+ */
31
+ hideLogoAndLinks?: boolean;
32
+ /**
33
+ * Hide the copyright string
34
+ */
35
+ hideCopyright?: boolean;
36
+ }
37
+ export default function Footer({ acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: FooterProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ export { default } from "./Footer";
2
+ export type { FooterProps } from "./Footer";
@@ -0,0 +1,29 @@
1
+ import React from "react";
2
+ import "./Header.css";
3
+ export interface HeaderProps {
4
+ /**
5
+ * Link element that surrounds the logo. Use what's appropriate for your
6
+ * router, like a `<Link>`. Defaults to a generic HTML link element like
7
+ * `<a href="/" title="Government of British Columbia">`.
8
+ */
9
+ logoLinkElement?: React.ReactElement;
10
+ /**
11
+ * Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
12
+ */
13
+ logoImage?: JSX.Element;
14
+ /**
15
+ * Array of link elements that are not visible until they are focused. Used
16
+ * for accessibility for keyboard users, to let them easily skip to main
17
+ * content, navigation, etc.
18
+ */
19
+ skipLinks?: React.ReactElement[];
20
+ /**
21
+ * Header title text that appears to the right of the logo.
22
+ */
23
+ title?: string;
24
+ /**
25
+ * Desired element that renders the `title` string. Defaults to `<span>`.
26
+ */
27
+ titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
28
+ }
29
+ export default function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: React.PropsWithChildren<HeaderProps>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,2 @@
1
+ export { default } from "./Header";
2
+ export type { HeaderProps } from "./Header";
@@ -6,7 +6,7 @@ export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
6
6
  label: string;
7
7
  /** Descriptive text that appears below the option's label */
8
8
  description?: string;
9
- /** Marks an option visually with red text to indicate danger */
9
+ /** Marks an option visually with red text to indicate a destructive/dangerous option */
10
10
  isDestructive?: boolean;
11
11
  /** Left icon slot */
12
12
  iconLeft?: React.ReactElement;
@@ -14,17 +14,23 @@ export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
14
14
  iconRight?: React.ReactElement;
15
15
  }
16
16
  export interface SelectionSectionProps {
17
- /** Display name for the section */
18
17
  id: Key;
18
+ /** Label for the section */
19
19
  header?: string;
20
+ /** Flat list of options within the section */
20
21
  items: ListBoxItemProps[];
21
22
  }
22
23
  export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
24
+ /** Use `items` for a flat list of options */
23
25
  items?: ListBoxItemProps[];
26
+ /** Use `sections` for a sectioned list with `items` options in each section */
24
27
  sections?: SelectionSectionProps[];
25
28
  /** Text label for the Select component */
26
29
  label?: string;
30
+ /** Temporary text that occupies the select input when no option has been selected. */
31
+ placeholder?: string;
27
32
  /** Defaults to `medium` */
28
33
  size?: "small" | "medium";
29
34
  }
30
- export default function Select<T extends object>({ items, sections, label, size, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
35
+ /** Select displays a collapsible list of options and allows a user to select one of them. */
36
+ export default function Select<T extends object>({ items, sections, label, placeholder, size, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,3 @@
1
+ export default function SvgBcLogo({ id }: {
2
+ id?: string | undefined;
3
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ export { default } from "./SvgBcLogo";
@@ -2,7 +2,13 @@
2
2
  import { TagProps as ReactAriaTagProps } from "react-aria-components";
3
3
  import "./Tag.css";
4
4
  export interface TagProps extends ReactAriaTagProps {
5
+ /**
6
+ * Icon that appears to the left of the `textValue` field
7
+ */
5
8
  icon?: React.ReactNode;
9
+ /**
10
+ * Background color
11
+ */
6
12
  color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
7
13
  }
8
- export default function Tag({ className, color, icon, id, textValue, }: TagProps): import("react/jsx-runtime").JSX.Element;
14
+ export default function Tag({ color, icon, id, textValue }: TagProps): import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,17 @@
1
1
  import { TagGroupProps as ReactAriaTagGroupProps } from "react-aria-components";
2
2
  import "./TagGroup.css";
3
3
  export interface TagGroupProps extends ReactAriaTagGroupProps {
4
+ /**
5
+ * Labels the TagGroup, appears above the tags.
6
+ */
4
7
  label?: string;
8
+ /**
9
+ * Extended description of the TagGroup, appears below the tags.
10
+ */
5
11
  description?: string;
12
+ /**
13
+ * Error message, appears below the tags and below the optional description.
14
+ */
6
15
  errorMessage?: string;
7
16
  }
8
17
  export default function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): import("react/jsx-runtime").JSX.Element;
@@ -3,6 +3,9 @@ import { TagProps } from "../Tag";
3
3
  import "./TagList.css";
4
4
  export interface TagListProps<T> extends Pick<ReactAriaTagListProps<T>, "children" | "renderEmptyState"> {
5
5
  items: TagProps[];
6
+ /**
7
+ * Used to set the `flex-direction` on the TagList.
8
+ */
6
9
  orientation?: "horizontal" | "vertical";
7
10
  }
8
11
  export default function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,9 @@
1
1
  import "@bcgov/design-tokens/css/variables.css";
2
2
  export { default as Button } from "./Button";
3
+ export { default as Header } from "./Header";
4
+ export { default as Footer } from "./Footer";
3
5
  export { default as Select } from "./Select";
4
- export { default as SelectItem } from "./SelectItem";
6
+ export { default as SvgBcLogo } from "./SvgBcLogo";
5
7
  export { default as Tag } from "./Tag";
6
8
  export { default as TagGroup } from "./TagGroup";
7
9
  export { default as TagList } from "./TagList";