@cfpb/design-system-react 0.0.12 → 0.0.13
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/README.md +8 -10
- package/dist/assets/{style.css → design-system-react.css} +1 -1
- package/dist/index.d.ts +2 -43
- package/dist/index.js +7 -60
- package/dist/index.mjs +1732 -6563
- package/dist/postcss/plugins/process-icons.d.ts +6 -0
- package/dist/{components/Alert/AlertFieldLevel.d.ts → src/components/Alert/alert-field-level.d.ts} +1 -1
- package/dist/src/components/Alert/alert-link.d.ts +7 -0
- package/dist/{components/Alert/Alert.d.ts → src/components/Alert/alert.d.ts} +3 -3
- package/dist/src/components/Alert/alert.stories.d.ts +16 -0
- package/dist/src/components/Alert/alert.test.d.ts +0 -0
- package/dist/{components/Banner/BannerLanguageLink.d.ts → src/components/Banner/banner-language-link.d.ts} +1 -1
- package/dist/{components/Banner/Banner.d.ts → src/components/Banner/banner.d.ts} +1 -0
- package/dist/src/components/Banner/banner.stories.d.ts +8 -0
- package/dist/src/components/Banner/banner.test.d.ts +0 -0
- package/dist/{components/Breadcrumb/Breadcrumb.d.ts → src/components/Breadcrumb/breadcrumb.d.ts} +1 -1
- package/dist/src/components/Breadcrumb/breadcrumb.stories.d.ts +6 -0
- package/dist/src/components/Breadcrumb/breadcrumb.test.d.ts +0 -0
- package/dist/{components/Buttons/ButtonGroup.d.ts → src/components/Buttons/button-group.d.ts} +1 -1
- package/dist/src/components/Buttons/button-group.test.d.ts +0 -0
- package/dist/{components/Buttons/Button.d.ts → src/components/Buttons/button.d.ts} +2 -2
- package/dist/src/components/Buttons/button.test.d.ts +0 -0
- package/dist/src/components/Buttons/buttons.stories.d.ts +19 -0
- package/dist/src/components/Checkbox/checkbox-large.stories.d.ts +15 -0
- package/dist/{components/Checkbox/Checkbox.d.ts → src/components/Checkbox/checkbox.d.ts} +5 -5
- package/dist/src/components/Checkbox/checkbox.stories.d.ts +18 -0
- package/dist/src/components/Checkbox/checkbox.test.d.ts +0 -0
- package/dist/src/components/Checkbox/checkbox.utils.d.ts +6 -0
- package/dist/{components/Divider/Divider.d.ts → src/components/Divider/divider.d.ts} +1 -2
- package/dist/src/components/Divider/divider.stories.d.ts +7 -0
- package/dist/src/components/Divider/divider.test.d.ts +0 -0
- package/dist/{components/Expandable/ExpandableGroup.d.ts → src/components/Expandable/expandable-group.d.ts} +2 -3
- package/dist/{components/Expandable/Expandable.d.ts → src/components/Expandable/expandable.d.ts} +1 -2
- package/dist/src/components/Expandable/expandable.stories.d.ts +10 -0
- package/dist/src/components/Expandable/expandable.test.d.ts +0 -0
- package/dist/{components/Footer/BackToTop.d.ts → src/components/Footer/back-to-top.d.ts} +1 -0
- package/dist/{components/Footer/FooterBanner.d.ts → src/components/Footer/footer-banner.d.ts} +1 -0
- package/dist/{components/Footer/FooterCfGov.d.ts → src/components/Footer/footer-cf-gov.d.ts} +2 -1
- package/dist/{components/Footer/FooterLinks.d.ts → src/components/Footer/footer-links.d.ts} +3 -2
- package/dist/src/components/Footer/footer-links.test.d.ts +1 -0
- package/dist/{components/Footer/Footer.d.ts → src/components/Footer/footer.d.ts} +1 -0
- package/dist/src/components/Footer/footer.stories.d.ts +7 -0
- package/dist/src/components/Footer/footer.test.d.ts +1 -0
- package/dist/{components/Grid/GridColumn.d.ts → src/components/Grid/grid-column.d.ts} +1 -0
- package/dist/{components/Grid/GridRow.d.ts → src/components/Grid/grid-row.d.ts} +1 -0
- package/dist/{components/Grid/GridWrapper.d.ts → src/components/Grid/grid-wrapper.d.ts} +1 -0
- package/dist/src/components/Grid/grid.stories.d.ts +9 -0
- package/dist/src/components/Grid/grid.test.d.ts +0 -0
- package/dist/{components → src/components}/Grid/index.d.ts +3 -3
- package/dist/{components/Headings/Heading.d.ts → src/components/Headings/heading.d.ts} +1 -0
- package/dist/src/components/Headings/heading.test.d.ts +0 -0
- package/dist/src/components/Headings/headings.stories.d.ts +18 -0
- package/dist/{components/HelperText/HelperText.d.ts → src/components/HelperText/helper-text.d.ts} +1 -1
- package/dist/src/components/Hero/hero-image.d.ts +7 -0
- package/dist/{components/Hero/Hero.d.ts → src/components/Hero/hero.d.ts} +2 -1
- package/dist/src/components/Hero/hero.stories.d.ts +10 -0
- package/dist/src/components/Hero/hero.test.d.ts +1 -0
- package/dist/{components/Hero/useBackgroundImage.d.ts → src/components/Hero/use-background-image.d.ts} +1 -1
- package/dist/{components/Icon/Icon.d.ts → src/components/Icon/icon.d.ts} +2 -1
- package/dist/src/components/Icon/icon.stories.d.ts +17 -0
- package/dist/src/components/Icon/icon.test.d.ts +0 -0
- package/dist/{components/Label/Label.d.ts → src/components/Label/label.d.ts} +2 -1
- package/dist/src/components/Label/label.stories.d.ts +7 -0
- package/dist/src/components/Label/label.test.d.ts +0 -0
- package/dist/{components/Layout/LayoutContent.d.ts → src/components/Layout/layout-content.d.ts} +2 -2
- package/dist/src/components/Layout/layout-content.stories.d.ts +6 -0
- package/dist/{components/Layout/LayoutMain.d.ts → src/components/Layout/layout-main.d.ts} +3 -3
- package/dist/src/components/Layout/layout-main.stories.d.ts +7 -0
- package/dist/{components/Layout/LayoutSidebar.d.ts → src/components/Layout/layout-sidebar.d.ts} +2 -2
- package/dist/src/components/Layout/layout-sidebar.stories.d.ts +6 -0
- package/dist/{components/Layout/LayoutWrapper.d.ts → src/components/Layout/layout-wrapper.d.ts} +2 -2
- package/dist/src/components/Layout/layout-wrapper.stories.d.ts +6 -0
- package/dist/src/components/Layout/layout.d.ts +7 -0
- package/dist/src/components/Link/link.d.ts +50 -0
- package/dist/src/components/Link/link.stories.d.ts +11 -0
- package/dist/src/components/Link/link.test.d.ts +0 -0
- package/dist/{components/List/ListItem.d.ts → src/components/List/list-item.d.ts} +2 -2
- package/dist/{components/List/List.d.ts → src/components/List/list.d.ts} +2 -1
- package/dist/src/components/List/list.stories.d.ts +10 -0
- package/dist/src/components/List/list.test.d.ts +0 -0
- package/dist/{components/Navbar/Navbar.d.ts → src/components/Navbar/navbar.d.ts} +2 -1
- package/dist/src/components/Navbar/navbar.stories.d.ts +8 -0
- package/dist/{components/PageHeader/PageHeader.d.ts → src/components/PageHeader/page-header.d.ts} +3 -2
- package/dist/src/components/PageHeader/page-header.stories.d.ts +7 -0
- package/dist/src/components/PageHeader/page-header.test.d.ts +0 -0
- package/dist/{components/Pagination/Pagination.d.ts → src/components/Pagination/pagination.d.ts} +2 -2
- package/dist/src/components/Pagination/pagination.stories.d.ts +20 -0
- package/dist/src/components/Pagination/pagination.story-utils.d.ts +2 -0
- package/dist/src/components/Pagination/pagination.test.d.ts +0 -0
- package/dist/{components/Pagination/usePagination.d.ts → src/components/Pagination/use-pagination.d.ts} +3 -3
- package/dist/src/components/Pagination/use-pagination.test.d.ts +0 -0
- package/dist/{components/Paragraph/Paragraph.d.ts → src/components/Paragraph/paragraph.d.ts} +1 -0
- package/dist/src/components/Paragraph/paragraph.test.d.ts +0 -0
- package/dist/src/components/Paragraph/paragraphs.stories.d.ts +17 -0
- package/dist/{components/RadioButton/RadioButton.d.ts → src/components/RadioButton/radio-button.d.ts} +2 -3
- package/dist/src/components/RadioButton/radio-button.stories.d.ts +14 -0
- package/dist/src/components/RadioButton/radio-button.test.d.ts +0 -0
- package/dist/src/components/ResponsiveMenu/responsive-menu.d.ts +12 -0
- package/dist/src/components/ResponsiveMenu/responsive-menu.stories.d.ts +8 -0
- package/dist/src/components/ResponsiveMenu/responsive-menu.test.d.ts +0 -0
- package/dist/{components/Select/SelectMulti.d.ts → src/components/Select/select-multi.d.ts} +2 -1
- package/dist/src/components/Select/select-multi.stories.d.ts +6 -0
- package/dist/{components/Select/SelectSingle.d.ts → src/components/Select/select-single.d.ts} +2 -1
- package/dist/src/components/Select/select-tag.d.ts +11 -0
- package/dist/{components/Select/selectUtils.d.ts → src/components/Select/select-utils.d.ts} +2 -1
- package/dist/{components/Select/Select.d.ts → src/components/Select/select.d.ts} +1 -1
- package/dist/src/components/Select/select.stories.d.ts +9 -0
- package/dist/src/components/Select/select.test.d.ts +0 -0
- package/dist/src/components/Select/test-utils.d.ts +9 -0
- package/dist/src/components/SkipNav/skip-nav.d.ts +5 -0
- package/dist/{components/Summaries/Summary.d.ts → src/components/Summaries/summary.d.ts} +1 -2
- package/dist/src/components/Summaries/summary.stories.d.ts +8 -0
- package/dist/src/components/Table/table-utils.d.ts +4 -0
- package/dist/src/components/Table/table.d.ts +33 -0
- package/dist/src/components/Table/table.stories.d.ts +13 -0
- package/dist/src/components/Table/table.test.d.ts +0 -0
- package/dist/src/components/Tagline/tagline.d.ts +8 -0
- package/dist/src/components/Tagline/tagline.stories.d.ts +7 -0
- package/dist/src/components/Tagline/tagline.test.d.ts +0 -0
- package/dist/src/components/TextInput/text-area.d.ts +14 -0
- package/dist/src/components/TextInput/text-area.stories.d.ts +13 -0
- package/dist/src/components/TextInput/text-area.test.d.ts +0 -0
- package/dist/{components/TextInput/TextInput.d.ts → src/components/TextInput/text-input.d.ts} +3 -4
- package/dist/src/components/TextInput/text-input.stories.d.ts +14 -0
- package/dist/src/components/TextInput/text-input.test.d.ts +0 -0
- package/dist/src/components/TextIntroduction/test-helpers.d.ts +19 -0
- package/dist/{components/TextIntroduction/TextIntroduction.d.ts → src/components/TextIntroduction/text-introduction.d.ts} +7 -7
- package/dist/src/components/TextIntroduction/text-introduction.stories.d.ts +15 -0
- package/dist/src/components/TextIntroduction/text-introduction.test.d.ts +0 -0
- package/dist/{components/Well/Well.d.ts → src/components/Well/well.d.ts} +2 -1
- package/dist/src/components/Well/well.stories.d.ts +7 -0
- package/dist/src/components/Well/well.test.d.ts +0 -0
- package/dist/{hooks/useIconSvg.d.ts → src/hooks/use-icon-svg.d.ts} +1 -1
- package/dist/src/index.d.ts +41 -0
- package/dist/{types/jsxElement.d.ts → src/types/jsx-element.d.ts} +1 -0
- package/dist/src/utils/sleep.d.ts +1 -0
- package/dist/vite/plugins/svg-raw-loader.d.ts +2 -0
- package/package.json +68 -93
- package/dist/components/Alert/AlertLink.d.ts +0 -6
- package/dist/components/Dropdown/Dropdown.d.ts +0 -11
- package/dist/components/Dropdown/Dropdown.types.d.ts +0 -20
- package/dist/components/Dropdown/DropdownInputWithCheckbox.d.ts +0 -10
- package/dist/components/Dropdown/DropdownPills.d.ts +0 -26
- package/dist/components/Dropdown/styles.d.ts +0 -2
- package/dist/components/Dropdown/utils.d.ts +0 -17
- package/dist/components/Hero/HeroImage.d.ts +0 -6
- package/dist/components/Link/Link.d.ts +0 -21
- package/dist/components/ResponsiveMenu/ResponsiveMenu.d.ts +0 -12
- package/dist/components/SkipNav/SkipNav.d.ts +0 -5
- package/dist/components/Table/Table.d.ts +0 -34
- package/dist/components/Table/tableUtils.d.ts +0 -3
- package/dist/components/Tagline/Tagline.d.ts +0 -7
- package/dist/components/TextInput/TextArea.d.ts +0 -14
- /package/dist/{components/Icon/iconLists.d.ts → src/components/Icon/icon-lists.d.ts} +0 -0
- /package/dist/{components/Pagination/paginationConstants.d.ts → src/components/Pagination/pagination-constants.d.ts} +0 -0
- /package/dist/{components/TextInput/TextInputStatus.d.ts → src/components/TextInput/text-input-status.d.ts} +0 -0
- /package/dist/{types/headingLevel.d.ts → src/types/heading-level.d.ts} +0 -0
- /package/dist/{types/WidthPercent.d.ts → src/types/width-percent.d.ts} +0 -0
- /package/dist/{utils/noOp.d.ts → src/utils/no-op.d.ts} +0 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { JSX, HTMLProps, ReactNode, Ref } from 'react';
|
|
2
|
+
import { JSXElement } from '../../types/jsx-element';
|
|
3
|
+
export interface LinkProperties extends HTMLProps<HTMLAnchorElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the link should be rendered as a button.
|
|
6
|
+
*/
|
|
7
|
+
asButton?: boolean;
|
|
8
|
+
/**
|
|
9
|
+
* Any children to render within the link. Allows you to wrap any node with anchor tag
|
|
10
|
+
*/
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* The link's destination URL.
|
|
14
|
+
*/
|
|
15
|
+
href: string;
|
|
16
|
+
/**
|
|
17
|
+
* Name of icon to display left of link text
|
|
18
|
+
*/
|
|
19
|
+
iconLeft?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Name of icon to display right of link text
|
|
22
|
+
*/
|
|
23
|
+
iconRight?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Whether the link is a standalone link
|
|
26
|
+
*/
|
|
27
|
+
isJump?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the link is a react router link
|
|
30
|
+
*/
|
|
31
|
+
isRouterLink?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* The link's text content, not required if children are provided
|
|
34
|
+
*/
|
|
35
|
+
label?: string;
|
|
36
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
37
|
+
/**
|
|
38
|
+
* What type of link should be rendered
|
|
39
|
+
*/
|
|
40
|
+
type?: 'default' | 'destructive';
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Links are navigational elements that connect users to other locations, either on the current page or to a different
|
|
44
|
+
* page or site. In contrast, buttons are used to signal important actions.
|
|
45
|
+
*
|
|
46
|
+
* Source: https://cfpb.github.io/design-system/components/links
|
|
47
|
+
*/
|
|
48
|
+
export default function Link({ asButton, children, href, iconLeft, iconRight, isJump, isRouterLink, label, type, ...others }: LinkProperties): JSXElement;
|
|
49
|
+
export declare const LinkText: ({ children, ...others }: HTMLProps<HTMLSpanElement>) => JSX.Element;
|
|
50
|
+
export declare const ListLink: (properties: LinkProperties) => JSXElement;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Link } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof Link>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Inline: Story;
|
|
7
|
+
export declare const Standalone: Story;
|
|
8
|
+
export declare const WithIcon: Story;
|
|
9
|
+
export declare const Listlink: Story;
|
|
10
|
+
export declare const Destructive: Story;
|
|
11
|
+
export declare const LinkWithReactRouterLink: Story;
|
|
File without changes
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import { default as React, JSX } from 'react';
|
|
2
2
|
export default function ListItem({ children, className, ...properties }: React.HTMLProps<HTMLLIElement>): JSX.Element;
|
|
3
3
|
interface ListItemBuilderProperties {
|
|
4
4
|
children: JSX.Element[];
|
|
@@ -30,5 +30,5 @@ interface ListItemBuilderProperties {
|
|
|
30
30
|
* @param className Class name to be applied each of the <li> elements
|
|
31
31
|
* @returns Single nestable JSX element
|
|
32
32
|
*/
|
|
33
|
-
export declare function ListItemBuilder({ children, itemClassname, className }: ListItemBuilderProperties): JSX.Element;
|
|
33
|
+
export declare function ListItemBuilder({ children, itemClassname, className, }: ListItemBuilderProperties): JSX.Element;
|
|
34
34
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
1
2
|
interface ListProperties {
|
|
2
3
|
children: JSX.Element | JSX.Element[];
|
|
3
4
|
className?: string;
|
|
@@ -7,5 +8,5 @@ interface ListProperties {
|
|
|
7
8
|
isSpaced?: boolean;
|
|
8
9
|
isUnstyled?: boolean;
|
|
9
10
|
}
|
|
10
|
-
export default function List({ children, className, isHorizontal, isLinks, isOrdered, isSpaced, isUnstyled }: ListProperties): JSX.Element;
|
|
11
|
+
export default function List({ children, className, isHorizontal, isLinks, isOrdered, isSpaced, isUnstyled, }: ListProperties): JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { List } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof List>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Unordered: Story;
|
|
7
|
+
export declare const Ordered: Story;
|
|
8
|
+
export declare const Unstyled: Story;
|
|
9
|
+
export declare const Horizontal: Story;
|
|
10
|
+
export declare const Links: Story;
|
|
File without changes
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
1
2
|
interface CfpbLogoProperties {
|
|
2
3
|
href?: string;
|
|
3
4
|
}
|
|
4
|
-
export declare function CfpbLogo({ href }: CfpbLogoProperties): JSX.Element;
|
|
5
|
+
export declare function CfpbLogo({ href, }: CfpbLogoProperties): JSX.Element;
|
|
5
6
|
interface NavbarProperties {
|
|
6
7
|
links?: JSX.Element[];
|
|
7
8
|
href?: string;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Navbar } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof Navbar>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const LoggedIn: Story;
|
|
7
|
+
export declare const LoggedOut: Story;
|
|
8
|
+
export declare const NoUser: Story;
|
package/dist/{components/PageHeader/PageHeader.d.ts → src/components/PageHeader/page-header.d.ts}
RENAMED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { User } from '../ResponsiveMenu/responsive-menu';
|
|
2
3
|
interface PageHeaderProperties {
|
|
3
4
|
links?: JSX.Element[];
|
|
4
5
|
user?: User;
|
|
5
6
|
href?: string;
|
|
6
7
|
withBottomBorder?: boolean;
|
|
7
8
|
}
|
|
8
|
-
export default function PageHeader({ links, user, href, withBottomBorder }: PageHeaderProperties): JSX.Element;
|
|
9
|
+
export default function PageHeader({ links, user, href, withBottomBorder, }: PageHeaderProperties): JSX.Element;
|
|
9
10
|
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { PageHeader } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof PageHeader>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const LoggedIn: Story;
|
|
7
|
+
export declare const LoggedOut: Story;
|
|
File without changes
|
package/dist/{components/Pagination/Pagination.d.ts → src/components/Pagination/pagination.d.ts}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
2
|
export interface PaginationProperties {
|
|
3
3
|
/** Identifier of the table this element controls */
|
|
4
4
|
tableId?: string;
|
|
@@ -22,4 +22,4 @@ export interface PaginationProperties {
|
|
|
22
22
|
*
|
|
23
23
|
* Source: https://cfpb.github.io/design-system/components/pagination
|
|
24
24
|
*/
|
|
25
|
-
export declare const Pagination: ({ tableId, page, pageCount, onClickPrevious, onClickNext, onClickGo, previousLabel, nextLabel }: PaginationProperties) => ReactElement;
|
|
25
|
+
export declare const Pagination: ({ tableId, page, pageCount, onClickPrevious, onClickNext, onClickGo, previousLabel, nextLabel, }: PaginationProperties) => ReactElement;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { JSX } from 'react';
|
|
3
|
+
import { Pagination } from '../../index';
|
|
4
|
+
declare const meta: Meta<typeof Pagination>;
|
|
5
|
+
export default meta;
|
|
6
|
+
type Story = StoryObj<typeof meta>;
|
|
7
|
+
export declare const Base: Story;
|
|
8
|
+
export declare const PreviousDisabledAtMinPage: Story;
|
|
9
|
+
export declare const NextDisabledAtMaxPage: Story;
|
|
10
|
+
export declare const UsePagination: {
|
|
11
|
+
name: string;
|
|
12
|
+
parameters: {
|
|
13
|
+
docs: {
|
|
14
|
+
description: {
|
|
15
|
+
story: string;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
render: () => JSX.Element;
|
|
20
|
+
};
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { PaginationProperties } from './pagination';
|
|
3
3
|
export declare const ONE = 1;
|
|
4
4
|
interface UsePaginationProperties {
|
|
5
5
|
isPaginated?: boolean;
|
|
@@ -16,5 +16,5 @@ interface UsePaginationProperties {
|
|
|
16
16
|
*
|
|
17
17
|
* @returns [VisibleRows, PaginationProperties]
|
|
18
18
|
*/
|
|
19
|
-
export declare const usePagination: ({ isPaginated, startPage, rows, perPage }: UsePaginationProperties) => [ReactNode[][], PaginationProperties];
|
|
19
|
+
export declare const usePagination: ({ isPaginated, startPage, rows, perPage, }: UsePaginationProperties) => [ReactNode[][], PaginationProperties];
|
|
20
20
|
export {};
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react-vite';
|
|
2
|
+
import { Paragraph } from './paragraph';
|
|
3
|
+
declare const meta: Meta<typeof Paragraph>;
|
|
4
|
+
export default meta;
|
|
5
|
+
export declare const Body: {
|
|
6
|
+
name: string;
|
|
7
|
+
args: {
|
|
8
|
+
children: string;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
export declare const Lead: {
|
|
12
|
+
name: string;
|
|
13
|
+
args: {
|
|
14
|
+
children: string;
|
|
15
|
+
isLead: boolean;
|
|
16
|
+
};
|
|
17
|
+
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
1
|
+
import { default as React, ReactNode, JSX } from 'react';
|
|
3
2
|
interface RadioProperties {
|
|
4
3
|
id: string;
|
|
5
4
|
label: ReactNode;
|
|
@@ -12,5 +11,5 @@ interface RadioProperties {
|
|
|
12
11
|
labelClassName: string;
|
|
13
12
|
labelInline: boolean /** Removes/Adds 'label__heading' class to the Label * */;
|
|
14
13
|
}
|
|
15
|
-
export declare const RadioButton: ({ id, name, helperText, className, disabled, isLarge, labelClassName, labelInline, label, inputRef, ...properties }: JSX.IntrinsicElements[
|
|
14
|
+
export declare const RadioButton: ({ id, name, helperText, className, disabled, isLarge, labelClassName, labelInline, label, inputRef, ...properties }: JSX.IntrinsicElements["input"] & RadioProperties) => React.ReactElement;
|
|
16
15
|
export default RadioButton;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { RadioButton } from '../../index';
|
|
3
|
+
/**
|
|
4
|
+
* Use radio buttons when the user can select exactly one option from a group. Avoid long lists of radio buttons (usually no more than 6-8 options). When there are more than two options, stack radio buttons vertically. Use [checkboxes](https://cfpb.github.io/design-system/components/checkboxes) when the user can select more than one option from a group.
|
|
5
|
+
*
|
|
6
|
+
* Source: https://cfpb.github.io/design-system/components/radio-buttons
|
|
7
|
+
*/
|
|
8
|
+
declare const meta: Meta<typeof RadioButton>;
|
|
9
|
+
export default meta;
|
|
10
|
+
type Story = StoryObj<typeof meta>;
|
|
11
|
+
export declare const StandardRadio: Story;
|
|
12
|
+
export declare const StandardRadioWithHelper: Story;
|
|
13
|
+
export declare const LargeRadio: Story;
|
|
14
|
+
export declare const LargeRadioWithHelper: Story;
|
|
File without changes
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React, JSX } from 'react';
|
|
2
|
+
interface CfpbLogoProperties {
|
|
3
|
+
href?: string;
|
|
4
|
+
}
|
|
5
|
+
export declare function CfpbLogo({ href, }: CfpbLogoProperties): JSX.Element;
|
|
6
|
+
interface ResponsiveMenuProperties {
|
|
7
|
+
links?: React.ReactNode[];
|
|
8
|
+
href?: string;
|
|
9
|
+
}
|
|
10
|
+
export default function ResponsiveMenu({ links, href, }: ResponsiveMenuProperties): JSX.Element;
|
|
11
|
+
export declare const ExampleLinks: React.ReactNode[];
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { ResponsiveMenu } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof ResponsiveMenu>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const LoggedIn: Story;
|
|
7
|
+
export declare const LoggedOut: Story;
|
|
8
|
+
export declare const NoUser: Story;
|
|
File without changes
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { SelectProperties } from './select';
|
|
2
3
|
export declare const SelectMulti: ({ id, options, label, onChange, defaultOptionLabel, maxSelections, ...properties }: SelectProperties) => JSX.Element;
|
package/dist/{components/Select/SelectSingle.d.ts → src/components/Select/select-single.d.ts}
RENAMED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { SelectProperties } from './select';
|
|
2
3
|
export declare const SelectSingle: ({ id, options, label, onChange, maxSelections, value, defaultOptionLabel, ...properties }: SelectProperties) => JSX.Element;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { JSX, KeyboardEvent, MouseEvent } from 'react';
|
|
2
|
+
interface TagProperties {
|
|
3
|
+
value: string;
|
|
4
|
+
label: string;
|
|
5
|
+
onClick: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
6
|
+
onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
|
|
7
|
+
htmlFor: string;
|
|
8
|
+
'data-testid'?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const SelectTag: ({ value, label, onClick, onKeyDown, htmlFor, ...properties }: TagProperties) => JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { SelectOption } from './select';
|
|
2
3
|
export declare const buildOptions: (options: SelectOption[], defaultOptionLabel: string) => JSX.Element[];
|
|
3
4
|
export declare const findOptionByValue: (options: SelectOption[], value: string) => SelectOption | undefined;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { SelectSingle } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof SelectSingle>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const SingleSelect: Story;
|
|
7
|
+
export declare const SingleSelectHover: Story;
|
|
8
|
+
export declare const SingleSelectFocus: Story;
|
|
9
|
+
export declare const SingleSelectDisabled: Story;
|
|
File without changes
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
3
2
|
export interface SummaryProperties extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
3
|
children: ReactNode;
|
|
5
4
|
/** Label for the toggle button */
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Summary } from './summary';
|
|
3
|
+
declare const meta: Meta<typeof Summary>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const MobileOnly: Story;
|
|
8
|
+
export declare const Minimal: Story;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { TableProperties } from './table';
|
|
3
|
+
export declare const buildColumnHeaders: (columns: TableProperties["columns"]) => JSX.Element | null;
|
|
4
|
+
export declare const buildRows: (rows: TableProperties["rows"], columns: TableProperties["columns"]) => JSX.Element | null;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { ForwardedRef, HTMLProps, ReactNode } from 'react';
|
|
2
|
+
import { WidthPercent } from '../../types/width-percent';
|
|
3
|
+
export interface TableColumnConfiguration {
|
|
4
|
+
header: string;
|
|
5
|
+
alignRight?: boolean | undefined;
|
|
6
|
+
width?: WidthPercent;
|
|
7
|
+
cellWordBreak?: boolean;
|
|
8
|
+
cellDisableWordWrap?: boolean;
|
|
9
|
+
headerWordWrap?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export type TableColumn = TableColumnConfiguration | string;
|
|
12
|
+
export interface TableProperties {
|
|
13
|
+
id?: string;
|
|
14
|
+
caption?: ReactNode;
|
|
15
|
+
columns: TableColumn[];
|
|
16
|
+
rows: ReactNode[][];
|
|
17
|
+
isResponsive?: boolean;
|
|
18
|
+
isScrollableHorizontal?: boolean;
|
|
19
|
+
isStriped?: boolean;
|
|
20
|
+
isPaginated?: boolean;
|
|
21
|
+
startPage?: number;
|
|
22
|
+
perPage?: number;
|
|
23
|
+
className?: string;
|
|
24
|
+
divRef?: ForwardedRef<HTMLDivElement>;
|
|
25
|
+
tableRef?: ForwardedRef<HTMLTableElement>;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Tables allow for the presentation of many data points grouped together in a visual way. They serve a unique purpose of allowing easy organization or comparison of more complex data than a chart or graph. They can be read either vertically (by columns) or horizontally (by rows).
|
|
29
|
+
*
|
|
30
|
+
* Source: https://cfpb.github.io/design-system/components/tables
|
|
31
|
+
*/
|
|
32
|
+
export declare const Table: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLTableElement> & TableProperties, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
|
|
33
|
+
export default Table;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Table } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof Table>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Standard: Story;
|
|
7
|
+
export declare const Responsive: Story;
|
|
8
|
+
export declare const HorizontalScroll: Story;
|
|
9
|
+
export declare const Striped: Story;
|
|
10
|
+
export declare const RightAligned: Story;
|
|
11
|
+
export declare const Pagination: Story;
|
|
12
|
+
export declare const FixedWidth: Story;
|
|
13
|
+
export declare const LongCharacterSets: Story;
|
|
File without changes
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { JSXElement } from '../../types/jsx-element';
|
|
3
|
+
interface TaglineProperties {
|
|
4
|
+
children: JSX.Element | string;
|
|
5
|
+
isLarge?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const Tagline: ({ isLarge, children, }: TaglineProperties) => JSXElement;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Tagline } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof Tagline>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const StandardTagline: Story;
|
|
7
|
+
export declare const LargeTagline: Story;
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { TextInputStatusType } from './text-input-status';
|
|
2
|
+
export interface TextAreaType {
|
|
3
|
+
id: string;
|
|
4
|
+
onChange?: (value: string) => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
isDisabled?: boolean;
|
|
7
|
+
isFullWidth?: boolean;
|
|
8
|
+
placeholder?: string;
|
|
9
|
+
status?: TextInputStatusType;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* Source: <a href='https://cfpb.github.io/design-system/components/text-inputs#text-area-input-1' target='_blank'> https://cfpb.github.io/design-system/components/text-inputs#text-area-input-1</a>
|
|
13
|
+
*/
|
|
14
|
+
export declare const TextArea: import('react').ForwardRefExoticComponent<Omit<import('react').ClassAttributes<HTMLTextAreaElement> & import('react').TextareaHTMLAttributes<HTMLTextAreaElement> & TextAreaType, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { TextArea } from './text-area';
|
|
3
|
+
declare const meta: Meta<typeof TextArea>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Enabled: Story;
|
|
7
|
+
export declare const Hover: Story;
|
|
8
|
+
export declare const Focus: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const Success: Story;
|
|
11
|
+
export declare const Warning: Story;
|
|
12
|
+
export declare const Error: Story;
|
|
13
|
+
export declare const FullWidth: Story;
|
|
File without changes
|
package/dist/{components/TextInput/TextInput.d.ts → src/components/TextInput/text-input.d.ts}
RENAMED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import type { TextInputStatusType } from './TextInputStatus';
|
|
1
|
+
import { JSX, ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { TextInputStatusType } from './text-input-status';
|
|
4
3
|
type TextInputReference = ReactNode;
|
|
5
4
|
export type InputType = 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url';
|
|
6
5
|
interface RequiredTextInputProperties {
|
|
@@ -21,5 +20,5 @@ export type TextInputProperties = OptionalTextInputProperties & RequiredTextInpu
|
|
|
21
20
|
/**
|
|
22
21
|
* Source: <a href='https://cfpb.github.io/design-system/components/text-inputs' target='_blank'> https://cfpb.github.io/design-system/components/text-inputs</a>
|
|
23
22
|
*/
|
|
24
|
-
export declare const TextInput: import(
|
|
23
|
+
export declare const TextInput: import('react').ForwardRefExoticComponent<CustomTextInputProperties & RequiredTextInputProperties & import('react').RefAttributes<HTMLInputElement>>;
|
|
25
24
|
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { TextInput } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof TextInput>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Enabled: Story;
|
|
7
|
+
export declare const Hover: Story;
|
|
8
|
+
export declare const Focus: Story;
|
|
9
|
+
export declare const Disabled: Story;
|
|
10
|
+
export declare const Success: Story;
|
|
11
|
+
export declare const Warning: Story;
|
|
12
|
+
export declare const Error: Story;
|
|
13
|
+
export declare const FullWidth: Story;
|
|
14
|
+
export declare const searchInput: Story;
|
|
File without changes
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export declare const heading = "Heading 1";
|
|
2
|
+
export declare const subheading = "Lead paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
|
|
3
|
+
export declare const description = "Descriptive paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.";
|
|
4
|
+
export declare const callToActionText = "Call-to-action link";
|
|
5
|
+
export declare const callToAction: import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const placeholders: {
|
|
7
|
+
heading: string;
|
|
8
|
+
subheading: string;
|
|
9
|
+
description: string;
|
|
10
|
+
callToAction: import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
};
|
|
12
|
+
declare const _default: {
|
|
13
|
+
heading: string;
|
|
14
|
+
description: string;
|
|
15
|
+
subheading: string;
|
|
16
|
+
callToAction: import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
callToActionText: string;
|
|
18
|
+
};
|
|
19
|
+
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { JSX, ReactNode } from 'react';
|
|
2
2
|
interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
|
|
3
3
|
heading: string;
|
|
4
4
|
subheading: string;
|
|
@@ -13,15 +13,15 @@ interface TextIntroductionProperties extends React.HTMLProps<HTMLDivElement> {
|
|
|
13
13
|
export declare const TextIntroduction: {
|
|
14
14
|
({ heading, subheading, description, callToAction, className, ...properties }: TextIntroductionProperties): JSX.Element;
|
|
15
15
|
Container({ className, children, ...properties }: React.HTMLProps<HTMLDivElement>): JSX.Element;
|
|
16
|
-
Heading({ children }: TextIntroductionSubProperties): JSX.Element;
|
|
17
|
-
Description({ children }: TextIntroductionSubProperties): ReactNode;
|
|
18
|
-
Subheading({ children }: TextIntroductionSubProperties): JSX.Element;
|
|
16
|
+
Heading({ children, }: TextIntroductionSubProperties): JSX.Element;
|
|
17
|
+
Description({ children, }: TextIntroductionSubProperties): ReactNode;
|
|
18
|
+
Subheading({ children, }: TextIntroductionSubProperties): JSX.Element;
|
|
19
19
|
};
|
|
20
20
|
export declare const TextIntroductionContainer: ({ className, children, ...properties }: React.HTMLProps<HTMLDivElement>) => JSX.Element;
|
|
21
21
|
interface TextIntroductionSubProperties {
|
|
22
22
|
children: ReactNode;
|
|
23
23
|
}
|
|
24
|
-
export declare const TextIntroductionHeading: ({ children }: TextIntroductionSubProperties) => JSX.Element;
|
|
25
|
-
export declare const TextIntroductionDescription: ({ children }: TextIntroductionSubProperties) => ReactNode;
|
|
26
|
-
export declare const TextIntroductionSubheading: ({ children }: TextIntroductionSubProperties) => JSX.Element;
|
|
24
|
+
export declare const TextIntroductionHeading: ({ children, }: TextIntroductionSubProperties) => JSX.Element;
|
|
25
|
+
export declare const TextIntroductionDescription: ({ children, }: TextIntroductionSubProperties) => ReactNode;
|
|
26
|
+
export declare const TextIntroductionSubheading: ({ children, }: TextIntroductionSubProperties) => JSX.Element;
|
|
27
27
|
export default TextIntroduction;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { TextIntroduction } from '../../index';
|
|
3
|
+
declare const meta: Meta<typeof TextIntroduction>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Standard: {
|
|
7
|
+
name: string;
|
|
8
|
+
args: {
|
|
9
|
+
heading: string;
|
|
10
|
+
subheading: string;
|
|
11
|
+
description: string;
|
|
12
|
+
callToAction: import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
export declare const Flexible: Story;
|
|
File without changes
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { JSX } from 'react';
|
|
2
|
+
import { HeadingLevel } from '../../types/heading-level';
|
|
2
3
|
interface WellContainerProperties {
|
|
3
4
|
children?: (JSX.Element | string | null)[] | JSX.Element | string;
|
|
4
5
|
className?: string;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { WellContainer } from './well';
|
|
3
|
+
declare const meta: Meta<typeof WellContainer>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Container: Story;
|
|
7
|
+
export declare const Content: Story;
|