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

package/dist/esm/types/components/Button/Button.d.ts

@@ -1,9 +1,21 @@
 import { ButtonProps as ReactAriaButtonProps } from "react-aria-components";
 import "./Button.css";
 export interface ButtonProps extends ReactAriaButtonProps {
+    /**
+     * Defaults to `medium`. `small` is shorter vertically.
+     */
     size?: "small" | "medium";
+    /**
+     * Defaults to `primary`.
+     */
     variant?: "primary" | "secondary" | "tertiary" | "link";
+    /**
+     * For destructive/deletion actions.
+     */
     danger?: boolean;
+    /**
+     * If true, renders a square button intended for a single icon.
+     */
     isIconButton?: boolean;
 }
 export default function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Footer/Footer.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import "./Footer.css";
+export interface FooterProps {
+    /**
+     * Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
+     */
+    acknowledgement?: React.ReactElement;
+    /**
+     * Logo slot (defaults to BC Gov horizontal logo)
+     */
+    logo?: React.ReactElement;
+    /**
+     * Contact information block (defaults to Gov.bc.ca contact information)
+     */
+    contact?: React.ReactElement;
+    /**
+     * Link list block (defaults to Gov.bc.ca link list)
+     */
+    links?: React.ReactElement;
+    /**
+     * Copyright string (defaults to current year)
+     */
+    copyright?: string;
+    /**
+     * Hide the acknowledgement section
+     */
+    hideAcknowledgement?: boolean;
+    /**
+     * Hide the logo, contact information, and links section
+     */
+    hideLogoAndLinks?: boolean;
+    /**
+     * Hide the copyright string
+     */
+    hideCopyright?: boolean;
+}
+export default function Footer({ acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Footer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Footer";
+export type { FooterProps } from "./Footer";

package/dist/esm/types/components/Header/Header.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import "./Header.css";
+export interface HeaderProps {
+    /**
+     * Link element that surrounds the logo. Use what's appropriate for your
+     * router, like a `<Link>`. Defaults to a generic HTML link element like
+     * `<a href="/" title="Government of British Columbia">`.
+     */
+    logoLinkElement?: React.ReactElement;
+    /**
+     * Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
+     */
+    logoImage?: JSX.Element;
+    /**
+     * Array of link elements that are not visible until they are focused. Used
+     * for accessibility for keyboard users, to let them easily skip to main
+     * content, navigation, etc.
+     */
+    skipLinks?: React.ReactElement[];
+    /**
+     * Header title text that appears to the right of the logo.
+     */
+    title?: string;
+    /**
+     * Desired element that renders the `title` string. Defaults to `<span>`.
+     */
+    titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
+}
+export default function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: React.PropsWithChildren<HeaderProps>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Header";
+export type { HeaderProps } from "./Header";

package/dist/esm/types/components/Select/Select.d.ts

@@ -6,7 +6,7 @@ export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
     label: string;
     /** Descriptive text that appears below the option's label */
     description?: string;
-    /** Marks an option visually with red text to indicate danger */
+    /** Marks an option visually with red text to indicate a destructive/dangerous option */
     isDestructive?: boolean;
     /** Left icon slot */
     iconLeft?: React.ReactElement;
@@ -14,17 +14,23 @@ export interface ListBoxItemProps extends ReactAriaListBoxItemProps {
     iconRight?: React.ReactElement;
 }
 export interface SelectionSectionProps {
-    /** Display name for the section */
     id: Key;
+    /** Label for the section */
     header?: string;
+    /** Flat list of options within the section */
     items: ListBoxItemProps[];
 }
 export interface SelectProps<T extends object> extends ReactAriaSelectProps<T> {
+    /** Use `items` for a flat list of options */
     items?: ListBoxItemProps[];
+    /** Use `sections` for a sectioned list with `items` options in each section */
     sections?: SelectionSectionProps[];
     /** Text label for the Select component */
     label?: string;
+    /** Temporary text that occupies the select input when no option has been selected. */
+    placeholder?: string;
     /** Defaults to `medium` */
     size?: "small" | "medium";
 }
-export default function Select<T extends object>({ items, sections, label, size, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+/** Select displays a collapsible list of options and allows a user to select one of them. */
+export default function Select<T extends object>({ items, sections, label, placeholder, size, ...props }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/SvgBcLogo/SvgBcLogo.d.ts

@@ -0,0 +1,3 @@
+export default function SvgBcLogo({ id }: {
+    id?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/SvgBcLogo/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./SvgBcLogo";

package/dist/esm/types/components/Tag/Tag.d.ts

@@ -2,7 +2,13 @@
 import { TagProps as ReactAriaTagProps } from "react-aria-components";
 import "./Tag.css";
 export interface TagProps extends ReactAriaTagProps {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
     icon?: React.ReactNode;
+    /**
+     * Background color
+     */
     color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
 }
-export default function Tag({ className, color, icon, id, textValue, }: TagProps): import("react/jsx-runtime").JSX.Element;
+export default function Tag({ color, icon, id, textValue }: TagProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/TagGroup/TagGroup.d.ts

@@ -1,8 +1,17 @@
 import { TagGroupProps as ReactAriaTagGroupProps } from "react-aria-components";
 import "./TagGroup.css";
 export interface TagGroupProps extends ReactAriaTagGroupProps {
+    /**
+     * Labels the TagGroup, appears above the tags.
+     */
     label?: string;
+    /**
+     * Extended description of the TagGroup, appears below the tags.
+     */
     description?: string;
+    /**
+     * Error message, appears below the tags and below the optional description.
+     */
     errorMessage?: string;
 }
 export default function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/TagList/TagList.d.ts

@@ -3,6 +3,9 @@ import { TagProps } from "../Tag";
 import "./TagList.css";
 export interface TagListProps<T> extends Pick<ReactAriaTagListProps<T>, "children" | "renderEmptyState"> {
     items: TagProps[];
+    /**
+     * Used to set the `flex-direction` on the TagList.
+     */
     orientation?: "horizontal" | "vertical";
 }
 export default function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/index.d.ts

@@ -1,7 +1,9 @@
 import "@bcgov/design-tokens/css/variables.css";
 export { default as Button } from "./Button";
+export { default as Header } from "./Header";
+export { default as Footer } from "./Footer";
 export { default as Select } from "./Select";
-export { default as SelectItem } from "./SelectItem";
+export { default as SvgBcLogo } from "./SvgBcLogo";
 export { default as Tag } from "./Tag";
 export { default as TagGroup } from "./TagGroup";
 export { default as TagList } from "./TagList";

package/dist/index.d.ts

@@ -4,19 +4,95 @@ import { ButtonProps as ButtonProps$1, SelectProps as SelectProps$1, ListBoxItem
 import React$1 from 'react';
 
 interface ButtonProps extends ButtonProps$1 {
+    /**
+     * Defaults to `medium`. `small` is shorter vertically.
+     */
     size?: "small" | "medium";
+    /**
+     * Defaults to `primary`.
+     */
     variant?: "primary" | "secondary" | "tertiary" | "link";
+    /**
+     * For destructive/deletion actions.
+     */
     danger?: boolean;
+    /**
+     * If true, renders a square button intended for a single icon.
+     */
     isIconButton?: boolean;
 }
 declare function Button({ size, variant, danger, isIconButton, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
+interface HeaderProps {
+    /**
+     * Link element that surrounds the logo. Use what's appropriate for your
+     * router, like a `<Link>`. Defaults to a generic HTML link element like
+     * `<a href="/" title="Government of British Columbia">`.
+     */
+    logoLinkElement?: React$1.ReactElement;
+    /**
+     * Image used for the logo. Defaults to an SVG of the Government of B.C. logo.
+     */
+    logoImage?: JSX.Element;
+    /**
+     * Array of link elements that are not visible until they are focused. Used
+     * for accessibility for keyboard users, to let them easily skip to main
+     * content, navigation, etc.
+     */
+    skipLinks?: React$1.ReactElement[];
+    /**
+     * Header title text that appears to the right of the logo.
+     */
+    title?: string;
+    /**
+     * Desired element that renders the `title` string. Defaults to `<span>`.
+     */
+    titleElement?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
+}
+declare function Header({ children, logoLinkElement, logoImage, skipLinks, title, titleElement, }: React$1.PropsWithChildren<HeaderProps>): react_jsx_runtime.JSX.Element;
+
+interface FooterProps {
+    /**
+     * Land acknowledgement block (defaults to Gov.bc.ca land acknowledgement)
+     */
+    acknowledgement?: React$1.ReactElement;
+    /**
+     * Logo slot (defaults to BC Gov horizontal logo)
+     */
+    logo?: React$1.ReactElement;
+    /**
+     * Contact information block (defaults to Gov.bc.ca contact information)
+     */
+    contact?: React$1.ReactElement;
+    /**
+     * Link list block (defaults to Gov.bc.ca link list)
+     */
+    links?: React$1.ReactElement;
+    /**
+     * Copyright string (defaults to current year)
+     */
+    copyright?: string;
+    /**
+     * Hide the acknowledgement section
+     */
+    hideAcknowledgement?: boolean;
+    /**
+     * Hide the logo, contact information, and links section
+     */
+    hideLogoAndLinks?: boolean;
+    /**
+     * Hide the copyright string
+     */
+    hideCopyright?: boolean;
+}
+declare function Footer({ acknowledgement, logo, contact, links, copyright, hideAcknowledgement, hideLogoAndLinks, hideCopyright, }: FooterProps): react_jsx_runtime.JSX.Element;
+
 interface ListBoxItemProps extends ListBoxItemProps$1 {
     /** Text label for the option. Provide an `id` if this is not unique. */
     label: string;
     /** Descriptive text that appears below the option's label */
     description?: string;
-    /** Marks an option visually with red text to indicate danger */
+    /** Marks an option visually with red text to indicate a destructive/dangerous option */
     isDestructive?: boolean;
     /** Left icon slot */
     iconLeft?: React$1.ReactElement;
@@ -24,52 +100,66 @@ interface ListBoxItemProps extends ListBoxItemProps$1 {
     iconRight?: React$1.ReactElement;
 }
 interface SelectionSectionProps {
-    /** Display name for the section */
     id: Key;
+    /** Label for the section */
     header?: string;
+    /** Flat list of options within the section */
     items: ListBoxItemProps[];
 }
 interface SelectProps<T extends object> extends SelectProps$1<T> {
+    /** Use `items` for a flat list of options */
     items?: ListBoxItemProps[];
+    /** Use `sections` for a sectioned list with `items` options in each section */
     sections?: SelectionSectionProps[];
     /** Text label for the Select component */
     label?: string;
+    /** Temporary text that occupies the select input when no option has been selected. */
+    placeholder?: string;
     /** Defaults to `medium` */
     size?: "small" | "medium";
 }
-declare function Select<T extends object>({ items, sections, label, size, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+/** Select displays a collapsible list of options and allows a user to select one of them. */
+declare function Select<T extends object>({ items, sections, label, placeholder, size, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
-interface SelectItemProps extends ListBoxItemProps$1 {
-    /** Text label for the option. Provide an `id` if this is not unique. */
-    label: string;
-    /** Descriptive text that appears below the option's label */
-    description?: string;
-    /** Marks an option visually with red text to indicate danger */
-    isDestructive?: boolean;
-    /** Left icon slot */
-    iconLeft?: React$1.ReactElement;
-    /** Right icon slot */
-    iconRight?: React$1.ReactElement;
-}
-declare function SelectItem({ description, id, iconLeft, iconRight, isDestructive, label, }: SelectItemProps): react_jsx_runtime.JSX.Element;
+declare function SvgBcLogo({ id }: {
+    id?: string | undefined;
+}): react_jsx_runtime.JSX.Element;
 
 interface TagProps extends TagProps$1 {
+    /**
+     * Icon that appears to the left of the `textValue` field
+     */
     icon?: React.ReactNode;
+    /**
+     * Background color
+     */
     color?: "bc-blue" | "bc-gold" | "blue" | "dark" | "gray" | "grey" | "green" | "red" | "yellow";
 }
-declare function Tag({ className, color, icon, id, textValue, }: TagProps): react_jsx_runtime.JSX.Element;
+declare function Tag({ color, icon, id, textValue }: TagProps): react_jsx_runtime.JSX.Element;
 
 interface TagGroupProps extends TagGroupProps$1 {
+    /**
+     * Labels the TagGroup, appears above the tags.
+     */
     label?: string;
+    /**
+     * Extended description of the TagGroup, appears below the tags.
+     */
     description?: string;
+    /**
+     * Error message, appears below the tags and below the optional description.
+     */
     errorMessage?: string;
 }
 declare function TagGroup({ children, label, description, errorMessage, ...props }: TagGroupProps): react_jsx_runtime.JSX.Element;
 
 interface TagListProps<T> extends Pick<TagListProps$1<T>, "children" | "renderEmptyState"> {
     items: TagProps[];
+    /**
+     * Used to set the `flex-direction` on the TagList.
+     */
     orientation?: "horizontal" | "vertical";
 }
 declare function TagList<T extends object>({ items, orientation, renderEmptyState, ...props }: TagListProps<T>): react_jsx_runtime.JSX.Element;
 
-export { Button, Select, SelectItem, Tag, TagGroup, TagList };
+export { Button, Footer, Header, Select, SvgBcLogo, Tag, TagGroup, TagList };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "scripts": {
     "rollup": "rollup -c --bundleConfigAsCjs",
@@ -19,7 +19,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@bcgov/design-tokens": "^2.0.1",
-    "react-aria-components": "1.0.1"
+    "react-aria-components": "1.1.1"
   },
   "peerDependencies": {
     "@bcgov/bc-sans": "^2.1.0",
@@ -27,35 +27,35 @@
     "react-dom": "^16.14.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "devDependencies": {
-    "@react-stately/data": "^3.10.3",
+    "@react-stately/data": "^3.11.2",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.0.0-alpha.17",
-    "@storybook/addon-interactions": "^8.0.0-alpha.17",
-    "@storybook/addon-links": "^8.0.0-alpha.17",
-    "@storybook/blocks": "^8.0.0-alpha.17",
-    "@storybook/react": "^8.0.0-alpha.17",
-    "@storybook/react-vite": "^8.0.0-alpha.17",
+    "@storybook/addon-essentials": "^8.0.0-rc.3",
+    "@storybook/addon-interactions": "^8.0.0-rc.3",
+    "@storybook/addon-links": "^8.0.0-rc.3",
+    "@storybook/blocks": "^8.0.0-rc.3",
+    "@storybook/react": "^8.0.0-rc.3",
+    "@storybook/react-vite": "^8.0.0-rc.3",
     "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.51",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
-    "rollup": "^4.9.6",
+    "eslint-plugin-storybook": "^0.8.0",
+    "rollup": "^4.12.1",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.0.0-alpha.17",
+    "storybook": "^8.0.0-rc.3",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.12"
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5"
   },
   "author": "Tyler Krys <Tyler.Krys@gov.bc.ca>",
   "license": "Apache-2.0",