@cfpb/design-system-react 0.0.15 → 0.0.16

package/dist/src/components/Buttons/button.d.ts

@@ -1,9 +1,13 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button contents
      */
-    label: string;
+    label?: string;
+    /**
+     * Any children to render within the button. Allows you to wrap any node with button tag
+     */
+    children?: ReactNode;
     /**
      * What is the button's appearance?
      */
@@ -19,7 +23,7 @@ interface ButtonProperties extends ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Button should be styled as a link?
      */
-    asLink?: boolean;
+    isLink?: boolean;
     /**
      * Name of icon to display left of button text
      */

package/dist/src/components/Checkbox/checkbox.d.ts

@@ -6,8 +6,10 @@ export interface CheckboxProperties {
     label: ReactNode;
     /** Additional CSS classes applied to the checkbox's wrapper element */
     className?: string;
-    /** Is the checkbox checked? */
+    /** Is the checkbox checked? (controlled mode). Omit for uncontrolled mode. */
     checked?: boolean;
+    /** Initial checked state (uncontrolled mode only) */
+    defaultChecked?: boolean;
     /** Additional text to further clarify purpose of checkbox */
     helperText?: ReactNode;
     /** Additional CSS classes that will be applied to checkbox input element */
@@ -18,9 +20,9 @@ export interface CheckboxProperties {
     inputRef?: RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void) | null | undefined;
     /** Apply the "Large" styles for this element? */
     isLarge?: boolean;
+    /** Removes/Adds 'label__heading' class to the Label. When true, uses inline label style. */
+    isLabelInline?: boolean;
     /** A name for this checkbox's value that can be referenced in javascript */
-    labelInline?: boolean;
-    /** Removes/Adds 'label__heading' class to the Label * */
     name?: string;
     /** Is this checkbox disabled? */
     disabled?: boolean;
@@ -29,5 +31,5 @@ export interface CheckboxProperties {
     /** Border status */
     status?: 'error' | 'success' | 'warning';
 }
-export declare const Checkbox: ({ id, label, className, inputClassName, labelClassName, checked, helperText, inputRef, disabled, isLarge, labelInline, name, onChange, status, ...properties }: CheckboxProperties & JSX.IntrinsicElements["input"]) => ReactElement;
+export declare const Checkbox: ({ id, label, className, inputClassName, labelClassName, checked, defaultChecked, helperText, inputRef, disabled, isLarge, isLabelInline, name, onChange, status, ...properties }: CheckboxProperties & JSX.IntrinsicElements["input"]) => ReactElement;
 export default Checkbox;

package/dist/src/components/Fieldset/fieldset.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode, JSX } from 'react';
+export interface FieldsetProperties {
+    /** Legend text displayed at the top of the fieldset */
+    legend: ReactNode;
+    /** Optional block helper text displayed below the legend (uses a-label__helper--block) */
+    legendHelperText?: ReactNode;
+    /** Form controls such as Checkbox or RadioButton components */
+    children: ReactNode;
+    /** Display options inline (same line) instead of stacked vertically */
+    isInline?: boolean;
+    /** Additional CSS classes applied to the fieldset element */
+    className?: string;
+}
+/**
+ * A fieldset groups several form controls (checkboxes, radio buttons) with a legend and optional block helper text.
+ *
+ * Source: https://cfpb.github.io/design-system/components/fieldsets
+ */
+export declare const Fieldset: ({ legend, legendHelperText, children, isInline, className, ...properties }: FieldsetProperties & JSX.IntrinsicElements["fieldset"]) => JSX.Element;
+export default Fieldset;

package/dist/src/components/Fieldset/fieldset.stories.d.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Fieldset } from '../../index';
+/**
+ *
+ * Source: https://cfpb.github.io/design-system/components/fieldsets
+ */
+declare const meta: Meta<typeof Fieldset>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithCheckboxes: Story;
+export declare const WithRadioButtons: Story;
+export declare const LargeTargetWithCheckboxes: Story;
+export declare const LargeTargetWithRadioButtons: Story;

package/dist/src/components/Header/header.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+export interface HeaderProperties {
+    links?: JSX.Element[];
+    href?: string;
+    withBottomBorder?: boolean;
+}
+/**
+ * A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.
+ *
+ */
+export declare const Header: ({ links, href, withBottomBorder, }: HeaderProperties) => JSX.Element;

package/dist/src/components/{PageHeader/page-header.stories.d.ts → Header/header.stories.d.ts}

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { PageHeader } from '../../index';
-declare const meta: Meta<typeof PageHeader>;
+import { Header } from '../../index';
+declare const meta: Meta<typeof Header>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/dist/src/components/Label/label.d.ts

@@ -1,9 +1,10 @@
 import { JSX } from 'react';
 interface LabelProperties {
     children: React.ReactNode;
-    inline?: boolean;
+    /** When true, uses inline label style instead of heading style */
+    isInline?: boolean;
     htmlFor: string;
     className?: string;
 }
-export declare const Label: ({ children, inline, htmlFor, className, ...other }: JSX.IntrinsicElements["label"] & LabelProperties) => React.ReactElement | null;
+export declare const Label: ({ children, isInline, htmlFor, className, ...other }: JSX.IntrinsicElements["label"] & LabelProperties) => React.ReactElement | null;
 export default Label;

package/dist/src/components/Link/link.d.ts

@@ -4,7 +4,7 @@ export interface LinkProperties extends HTMLProps<HTMLAnchorElement> {
     /**
      * Whether the link should be rendered as a button.
      */
-    asButton?: boolean;
+    isButton?: boolean;
     /**
      * Any children to render within the link. Allows you to wrap any node with anchor tag
      */
@@ -45,6 +45,6 @@ export interface LinkProperties extends HTMLProps<HTMLAnchorElement> {
  *
  * Source: https://cfpb.github.io/design-system/components/links
  */
-export default function Link({ asButton, children, href, iconLeft, iconRight, isJump, isRouterLink, label, type, ...others }: LinkProperties): JSXElement;
+export default function Link({ isButton, children, href, iconLeft, iconRight, isJump, isRouterLink, label, type, ...others }: LinkProperties): JSXElement;
 export declare const LinkText: ({ children, ...others }: HTMLProps<HTMLSpanElement>) => JSX.Element;
 export declare const ListLink: (properties: LinkProperties) => JSXElement;

package/dist/src/components/RadioButton/radio-button.d.ts

@@ -8,8 +8,9 @@ interface RadioProperties {
     disabled?: boolean;
     isLarge?: boolean;
     name?: string;
-    labelClassName: string;
-    labelInline: boolean /** Removes/Adds 'label__heading' class to the Label * */;
+    labelClassName?: string;
+    /** Removes/Adds 'label__heading' class to the Label. When true, uses inline label style. */
+    isLabelInline?: boolean;
 }
-export declare const RadioButton: ({ id, name, helperText, className, disabled, isLarge, labelClassName, labelInline, label, inputRef, ...properties }: JSX.IntrinsicElements["input"] & RadioProperties) => React.ReactElement;
+export declare const RadioButton: ({ id, name, helperText, className, disabled, isLarge, labelClassName, isLabelInline, label, inputRef, ...properties }: JSX.IntrinsicElements["input"] & RadioProperties) => React.ReactElement;
 export default RadioButton;

package/dist/src/index.d.ts

@@ -8,6 +8,7 @@ export { ButtonGroup } from './components/Buttons/button-group';
 export { Checkbox } from './components/Checkbox/checkbox';
 export { Divider } from './components/Divider/divider';
 export { Expandable } from './components/Expandable/expandable';
+export { Fieldset } from './components/Fieldset/fieldset';
 export { ExpandableGroup } from './components/Expandable/expandable-group';
 export { default as Footer } from './components/Footer/footer';
 export { FooterCfGov } from './components/Footer/footer-cf-gov';
@@ -21,7 +22,7 @@ export { default as Link, LinkText, ListLink } from './components/Link/link';
 export type { LinkProperties } from './components/Link/link';
 export { default as List } from './components/List/list';
 export { default as ListItem, ListItemBuilder, } from './components/List/list-item';
-export { default as PageHeader } from './components/PageHeader/page-header';
+export { Header } from './components/Header/header';
 export { Pagination } from './components/Pagination/pagination';
 export { usePagination } from './components/Pagination/use-pagination';
 export { Paragraph } from './components/Paragraph/paragraph';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfpb/design-system-react",
   "license": "MIT",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/cfpb/design-system-react.git"
@@ -45,23 +45,25 @@
     "chromatic": "chromatic --storybook-build-dir dist-storybook --only-changed"
   },
   "dependencies": {
-    "@cfpb/browserslist-config": "^0.0.6",
-    "@cfpb/cfpb-design-system": "4.4.0",
     "react-select": "^5.10.2"
   },
   "peerDependencies": {
+    "@cfpb/cfpb-design-system": "4.4.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router": "^7.13.0"
   },
   "devDependencies": {
+    "@cfpb/browserslist-config": "^0.0.6",
+    "@cfpb/cfpb-design-system": "4.4.0",
     "@chromatic-com/storybook": "^5.0.1",
     "@eslint/js": "^9.39.3",
     "@nabla/vite-plugin-eslint": "^2.0.6",
-    "@storybook/addon-a11y": "^10.2.11",
-    "@storybook/addon-docs": "^10.2.11",
-    "@storybook/addon-links": "^10.2.11",
-    "@storybook/react-vite": "^10.2.11",
+    "@storybook/addon-a11y": "^10.2.12",
+    "@storybook/addon-docs": "^10.2.12",
+    "@storybook/addon-links": "^10.2.12",
+    "@storybook/addon-vitest": "^10.2.12",
+    "@storybook/react-vite": "^10.2.12",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -74,10 +76,11 @@
     "@typescript-eslint/eslint-plugin": "8.56.1",
     "@typescript-eslint/parser": "8.56.1",
     "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/browser-playwright": "4.0.18",
     "@vitest/coverage-istanbul": "^4.0.18",
     "astring": "^1.9.0",
     "autoprefixer": "10.4.24",
-    "chromatic": "^15.1.1",
+    "chromatic": "^15.2.0",
     "classnames": "^2.5.1",
     "commitizen": "4.3.1",
     "css-mediaquery": "0.1.2",
@@ -89,7 +92,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.11",
+    "eslint-plugin-storybook": "^10.2.12",
     "eslint-plugin-testing-library": "7.16.0",
     "eslint-plugin-unicorn": "^62.0.0",
     "globals": "^17.3.0",
@@ -98,6 +101,7 @@
     "jsdom": "28.1.0",
     "lint-staged": "16.2.7",
     "npm-run-all": "4.1.5",
+    "playwright": "^1.58.2",
     "postcss": "8.5.6",
     "prettier": "3.8.1",
     "react": "19.2.4",
@@ -105,9 +109,9 @@
     "react-router": "^7.13.1",
     "rollup-plugin-jsx-remove-attributes": "^3.1.2",
     "sass": "^1.97.3",
-    "start-server-and-test": "2.1.3",
-    "storybook": "^10.2.11",
-    "stylelint": "^17.3.0",
+    "start-server-and-test": "2.1.5",
+    "storybook": "^10.2.12",
+    "stylelint": "^17.4.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.56.1",

package/dist/src/components/PageHeader/page-header.d.ts

@@ -1,8 +0,0 @@
-import { JSX } from 'react';
-interface PageHeaderProperties {
-    links?: JSX.Element[];
-    href?: string;
-    withBottomBorder?: boolean;
-}
-export default function PageHeader({ links, href, withBottomBorder, }: PageHeaderProperties): JSX.Element;
-export {};