@trussworks/react-uswds - npm Package Compare versions

Comparing version 4.2.1 to 5.0.0

CHANGELOG.md

@@ -5,2 +5,32 @@ # Changelog
 
+## [5.0.0](https://github.com/trussworks/react-uswds/compare/4.2.1...5.0.0) (2023-06-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* Unify icon usage (#2411)
+  * As a part of this change, the previously exported `BannerLockIcon` component has been removed. Consumers building custom `Banner` components for their applications should use the `Icon.Lock` (with appropriate aria attributes) as shown in our [Storybook example](https://github.com/trussworks/react-uswds/blob/75e936985cc1cd2f2052f902f0806c58446aca30/src/components/banner/CustomBanner.stories.tsx#L54)
+
+### Features
+
+* Add `validationStatus` prop to `Dropdown` ([#2365](https://github.com/trussworks/react-uswds/issues/2365)) ([c314234](https://github.com/trussworks/react-uswds/commit/c31423439cf6a30117fd327ee6cc2b1aacdb9124))
+* Add `InputGroup` component ([#2383](https://github.com/trussworks/react-uswds/issues/2383)) ([5761db6](https://github.com/trussworks/react-uswds/commit/5761db6e66db98c8299efb978bbe39fd259f1209))
+* Update banner aria props with changes from USWDS ([#2384](https://github.com/trussworks/react-uswds/issues/2384)) ([f8c359b](https://github.com/trussworks/react-uswds/commit/f8c359b4afcfe998c492d916ad4c4ec44ee7b4f9))
+
+
+### Bug Fixes
+
+* Adds validation styles to `DatePicker` ([#2398](https://github.com/trussworks/react-uswds/issues/2398)) ([161a931](https://github.com/trussworks/react-uswds/commit/161a931f897edc38b1eb6aff22f36e5eb75c4388))
+* Allow `CharacterCount` value ^ defaultValue ([#2397](https://github.com/trussworks/react-uswds/issues/2397)) ([9de5b9d](https://github.com/trussworks/react-uswds/commit/9de5b9dcd1b10e069cf672680f2685ced97d645c))
+* Rename `Dropdown` component to `Select` ([#2415](https://github.com/trussworks/react-uswds/issues/2415)) ([75e9369](https://github.com/trussworks/react-uswds/commit/75e936985cc1cd2f2052f902f0806c58446aca30))
+  * Note: `Dropdown` is now marked as deprecated, and will be removed in a future release 
+* Fix `FileInput` in SSR ([#2367](https://github.com/trussworks/react-uswds/issues/2367)) ([3d4845e](https://github.com/trussworks/react-uswds/commit/3d4845e349bf940f0ba13f2680bc865c5f58d6ef))
+* Fix misapplied aria attribute ([#2396](https://github.com/trussworks/react-uswds/issues/2396)) ([dafbb4e](https://github.com/trussworks/react-uswds/commit/dafbb4e4f75c39e0a76f18a80934fcf2d1a3e770))
+* Unify icon usage ([#2411](https://github.com/trussworks/react-uswds/issues/2411)) ([ef2be8d](https://github.com/trussworks/react-uswds/commit/ef2be8dddbbfec21f3cedf606e2bddcaad57f7e7))
+
+
+### Documentation & Examples
+
+* Add documentation for how we use All Contributors ([#2378](https://github.com/trussworks/react-uswds/issues/2378)) ([5aa9bda](https://github.com/trussworks/react-uswds/commit/5aa9bda79237d90dd9538fc9362bb45b04ad8b81))
+
 ### [4.2.1](https://github.com/trussworks/react-uswds/compare/4.2.0...4.2.1) (2023-04-24)
@@ -7,0 +37,0 @@

lib/components/forms/CharacterCount/CharacterCount.d.ts

@@ -8,2 +8,3 @@ import React from 'react';
     maxLength: number;
+    value?: string;
     defaultValue?: string;
@@ -17,3 +18,3 @@ className?: string;
 export declare type TextareaCharacterCountProps = BaseCharacterCountProps & TextareaProps & JSX.IntrinsicElements['textarea'];
-export declare const CharacterCount: ({ id, name, className, maxLength, defaultValue, isTextArea, getCharacterCount, getMessage, ...remainingProps }: TextInputCharacterCountProps | TextareaCharacterCountProps) => React.ReactElement;
+export declare const CharacterCount: ({ id, name, className, maxLength, value, defaultValue, isTextArea, getCharacterCount, getMessage, ...remainingProps }: TextInputCharacterCountProps | TextareaCharacterCountProps) => React.ReactElement;
 export default CharacterCount;

lib/components/forms/DatePicker/DatePicker.d.ts

 import React from 'react';
 import { DatePickerLocalization } from './i18n';
+import { ValidationStatus } from '../../../types/validationStatus';
 declare type BaseDatePickerProps = {
@@ -7,2 +8,3 @@ id: string;
     className?: string;
+    validationStatus?: ValidationStatus;
     disabled?: boolean;
@@ -24,3 +26,3 @@ required?: boolean;
 export declare const DatePicker: {
-    ({ id, name, className, defaultValue, disabled, required, minDate, maxDate, rangeDate, onChange, onBlur, i18n, ...inputProps }: DatePickerProps): React.ReactElement;
+    ({ id, name, className, validationStatus, defaultValue, disabled, required, minDate, maxDate, rangeDate, onChange, onBlur, i18n, ...inputProps }: DatePickerProps): React.ReactElement;
     defaultProps: {
@@ -27,0 +29,0 @@ minDate: string;

lib/components/forms/Dropdown/Dropdown.d.ts

@@ -1,10 +0,9 @@
-import React from 'react';
-declare type DropdownProps = {
+/// <reference types="react" />
+export declare const Dropdown: (props: {
     id: string;
     name: string;
-    className?: string;
-    children: React.ReactNode;
-    inputRef?: string | ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
-};
-export declare const Dropdown: ({ id, name, className, inputRef, children, ...inputProps }: DropdownProps & JSX.IntrinsicElements['select']) => React.ReactElement;
-export default Dropdown;
+    className?: string | undefined;
+    children: import("react").ReactNode;
+    validationStatus?: import("../../..").ValidationStatus | undefined;
+    inputRef?: string | import("react").RefObject<HTMLSelectElement> | ((instance: HTMLSelectElement | null) => void) | null | undefined;
+} & import("react").ClassAttributes<HTMLSelectElement> & import("react").SelectHTMLAttributes<HTMLSelectElement>) => JSX.Element;

lib/components/forms/TextInput/TextInput.d.ts

 import React from 'react';
+import { ValidationStatus } from '../../../types/validationStatus';
 declare type TextInputRef = string | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
@@ -10,3 +11,3 @@ declare type RequiredTextInputProps = {
     className?: string;
-    validationStatus?: 'error' | 'success';
+    validationStatus?: ValidationStatus;
     inputSize?: 'small' | 'medium';
@@ -13,0 +14,0 @@ inputRef?: TextInputRef;

lib/index.d.ts

@@ -22,3 +22,2 @@ import './styles/index.scss';
 export { BannerIcon } from './components/banner/BannerIcon/BannerIcon';
-export { BannerLockImage } from './components/banner/BannerLockImage/BannerLockImage';
 export { GovBanner } from './components/banner/GovBanner/GovBanner';
@@ -54,2 +53,3 @@ /** Collection components */
 export { FormGroup } from './components/forms/FormGroup/FormGroup';
+export { InputGroup } from './components/forms/InputGroup/InputGroup';
 export { InputPrefix } from './components/forms/InputPrefix/InputPrefix';
@@ -60,2 +60,3 @@ export { InputSuffix } from './components/forms/InputSuffix/InputSuffix';
 export { RangeInput } from './components/forms/RangeInput/RangeInput';
+export { Select } from './components/forms/Select/Select';
 export { Textarea } from './components/forms/Textarea/Textarea';
@@ -66,2 +67,3 @@ export { TextInput } from './components/forms/TextInput/TextInput';
 export { ValidationItem } from './components/forms/Validation/ValidationItem';
+export type { ValidationStatus } from './types/validationStatus';
 /** Header Components */
@@ -68,0 +70,0 @@ export { ExtendedNav } from './components/header/ExtendedNav/ExtendedNav';

package.json

 {
   "name": "@trussworks/react-uswds",
-  "version": "4.2.1",
+  "version": "5.0.0",
   "description": "React USWDS 3.0 component library",
@@ -60,6 +60,8 @@ "keywords": [
     "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addons": "^7.0.8",
     "@storybook/builder-webpack5": "^6.5.14",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.16",
-    "@svgr/webpack": "^7.0.0",
+    "@storybook/theming": "^7.0.8",
+    "@svgr/webpack": "^8.0.1",
     "@testing-library/dom": "^9.0.0",
@@ -66,0 +68,0 @@ "@testing-library/jest-dom": "^5.16.5",

README.md

 # @trussworks/react-uswds
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-26-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -144,3 +144,3 @@
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/eamahanna"><img src="https://avatars.githubusercontent.com/u/56279459?v=4?s=100" width="100px;" alt="Emily Mahanna"/><br /><sub><b>Emily Mahanna</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=eamahanna" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/brandonlenz"><img src="https://avatars.githubusercontent.com/u/15805554?v=4?s=100" width="100px;" alt="Brandon Lenz"/><br /><sub><b>Brandon Lenz</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=brandonlenz" title="Code">💻</a> <a href="https://github.com/trussworks/react-uswds/commits?author=brandonlenz" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/brandonlenz"><img src="https://avatars.githubusercontent.com/u/15805554?v=4?s=100" width="100px;" alt="Brandon Lenz"/><br /><sub><b>Brandon Lenz</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=brandonlenz" title="Code">💻</a> <a href="https://github.com/trussworks/react-uswds/commits?author=brandonlenz" title="Documentation">📖</a> <a href="#maintenance-brandonlenz" title="Maintenance">🚧</a> <a href="https://github.com/trussworks/react-uswds/issues?q=author%3Abrandonlenz" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/sojeri"><img src="https://avatars.githubusercontent.com/u/10818509?v=4?s=100" width="100px;" alt="Jeri Sommers"/><br /><sub><b>Jeri Sommers</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=sojeri" title="Code">💻</a></td>
@@ -169,2 +169,5 @@ </tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/pearl-truss"><img src="https://avatars.githubusercontent.com/u/67110378?v=4?s=100" width="100px;" alt="pearl-truss"/><br /><sub><b>pearl-truss</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=pearl-truss" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://andyhub.com/"><img src="https://avatars.githubusercontent.com/u/764090?v=4?s=100" width="100px;" alt="Andrew Nelson"/><br /><sub><b>Andrew Nelson</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=werdnanoslen" title="Code">💻</a> <a href="https://github.com/trussworks/react-uswds/commits?author=werdnanoslen" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://sawyer.soy"><img src="https://avatars.githubusercontent.com/u/371943?v=4?s=100" width="100px;" alt="Sawyer Hollenshead"/><br /><sub><b>Sawyer Hollenshead</b></sub></a><br /><a href="https://github.com/trussworks/react-uswds/commits?author=sawyerh" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://keybase.io/rpdelaney"><img src="https://avatars.githubusercontent.com/u/1139517?v=4?s=100" width="100px;" alt="Ryan Delaney"/><br /><sub><b>Ryan Delaney</b></sub></a><br /><a href="#maintenance-rpdelaney" title="Maintenance">🚧</a> <a href="#infra-rpdelaney" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
     </tr>
@@ -171,0 +174,0 @@ </tbody>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

208

increased by0.97%

Lines of code

6137

increased by0.25%

Number of lines in readme file

181

increased by1.69%

Number of low supply chain risk alerts

4

decreased by-20%

Worsened metrics

Total package byte prevSize

3137609

decreased by-0.02%

Dev dependency count

71

increased by2.9%

No dependency changes