@trussworks/react-uswds - npm Package Compare versions

Comparing version 1.8.0 to 1.9.0

CHANGELOG.md

@@ -5,49 +5,61 @@ # Changelog
 
+## [1.9.0](https://github.com/trussworks/react-uswds/compare/1.8.0...1.9.0) (2020-08-10)
+
+### Features
+
+- **ButtonGroup:** Add new component ButtonGroup ([#382](https://github.com/trussworks/react-uswds/issues/382)) ([a7b84d6](https://github.com/trussworks/react-uswds/commit/a7b84d6ebd9a144412faf9685d80310204566ba8))
+- **CharacterCount:** Add new component CharacterCount ([#383](https://github.com/trussworks/react-uswds/issues/383)) ([cc12034](https://github.com/trussworks/react-uswds/commit/cc120342c3a6484227b6bab00d18c4ce8212d30c))
+- add addon-viewports using the included INITIAL_VIEWPORTS list as default for all stories ([#376](https://github.com/trussworks/react-uswds/issues/376)) ([9683b40](https://github.com/trussworks/react-uswds/commit/9683b400769e63bb3035c986acc253ffdc2f008b))
+- **Validation:** Add new Validation components ([#351](https://github.com/trussworks/react-uswds/issues/351)) ([2b2369a](https://github.com/trussworks/react-uswds/commit/2b2369a9ad231200daae3042a3070b872081310b))
+
+### Bug Fixes
+
+- **Button:** Deprecate icon, size small properties ([#362](https://github.com/trussworks/react-uswds/issues/362)) ([23a2e4b](https://github.com/trussworks/react-uswds/commit/23a2e4ba9af1f7d16b13625d3b4b3d80fcdd24a3))
+- **webpack:** support browsers and node
+
+### Documentation & Examples
+
+- Even more info and emphasis on conventional commits ([#350](https://github.com/trussworks/react-uswds/issues/350)) ([1301cc4](https://github.com/trussworks/react-uswds/commit/1301cc4aef7661a6f6bbead1d89e829a8047fecd))
+- Point users to react-fontawesome for icons ([#364](https://github.com/trussworks/react-uswds/issues/364)) ([3de50ef](https://github.com/trussworks/react-uswds/commit/3de50ef1046a1b368e4e8f32b2aa7cef5750d2b8))
+
 ## [1.8.0](https://github.com/trussworks/react-uswds/compare/1.7.0...1.8.0) (2020-07-27)
 
-
 ### Features
 
-* **danger:** Block PR if yarn audit has high or critical, do not run on dependabot, no warn on version ([#327](https://github.com/trussworks/react-uswds/issues/327)) ([ee13281](https://github.com/trussworks/react-uswds/commit/ee13281a7669faaeb6ebd56a22d863d82cfe49e2)), closes [#324](https://github.com/trussworks/react-uswds/issues/324)
-* **storybook:** switch to addon-docs ([#323](https://github.com/trussworks/react-uswds/issues/323)) ([ccae95d](https://github.com/trussworks/react-uswds/commit/ccae95d44995da3be4156601dd6d023087140f9a)), closes [#119](https://github.com/trussworks/react-uswds/issues/119)
-* **storybook:** upgrade to 5.3.0, prepare for addon-docs ([#322](https://github.com/trussworks/react-uswds/issues/322)) ([1f1fc6a](https://github.com/trussworks/react-uswds/commit/1f1fc6a7759c411fff11b9f156b074143ed2eec4)), closes [#119](https://github.com/trussworks/react-uswds/issues/119)
+- **danger:** Block PR if yarn audit has high or critical, do not run on dependabot, no warn on version ([#327](https://github.com/trussworks/react-uswds/issues/327)) ([ee13281](https://github.com/trussworks/react-uswds/commit/ee13281a7669faaeb6ebd56a22d863d82cfe49e2)), closes [#324](https://github.com/trussworks/react-uswds/issues/324)
+- **storybook:** switch to addon-docs ([#323](https://github.com/trussworks/react-uswds/issues/323)) ([ccae95d](https://github.com/trussworks/react-uswds/commit/ccae95d44995da3be4156601dd6d023087140f9a)), closes [#119](https://github.com/trussworks/react-uswds/issues/119)
+- **storybook:** upgrade to 5.3.0, prepare for addon-docs ([#322](https://github.com/trussworks/react-uswds/issues/322)) ([1f1fc6a](https://github.com/trussworks/react-uswds/commit/1f1fc6a7759c411fff11b9f156b074143ed2eec4)), closes [#119](https://github.com/trussworks/react-uswds/issues/119)
 
-
 ### Bug Fixes
 
-* correct version syntax in deploy-storybook worflow([#321](https://github.com/trussworks/react-uswds/issues/321)) ([4eb7d2c](https://github.com/trussworks/react-uswds/commit/4eb7d2c3490d3740be3517d0d0e4715e0fe2ff9f))
-* Export NavDropDownButton ([91f9ca7](https://github.com/trussworks/react-uswds/commit/6e27ce6e3fcc98699b7b442d801a53f113118adf))
-* remove commitizen; upgrade example app dependencies ([#335](https://github.com/trussworks/react-uswds/issues/335)) ([9c5aea2](https://github.com/trussworks/react-uswds/commit/9c5aea26acb34cb282ce9f2e0c2a17af90cae786))
+- correct version syntax in deploy-storybook worflow([#321](https://github.com/trussworks/react-uswds/issues/321)) ([4eb7d2c](https://github.com/trussworks/react-uswds/commit/4eb7d2c3490d3740be3517d0d0e4715e0fe2ff9f))
+- Export NavDropDownButton ([91f9ca7](https://github.com/trussworks/react-uswds/commit/6e27ce6e3fcc98699b7b442d801a53f113118adf))
+- remove commitizen; upgrade example app dependencies ([#335](https://github.com/trussworks/react-uswds/issues/335)) ([9c5aea2](https://github.com/trussworks/react-uswds/commit/9c5aea26acb34cb282ce9f2e0c2a17af90cae786))
 
-
 ### Documentation & Examples
 
-* add [@ahobson](https://github.com/ahobson) as codeowner, remove check-in meeting ([#347](https://github.com/trussworks/react-uswds/issues/347)) ([9eaf02b](https://github.com/trussworks/react-uswds/commit/9eaf02b188fd017322b6e4dc4c1b0d7693e47a9c))
-* Add new component issue template ([#340](https://github.com/trussworks/react-uswds/issues/340)) ([8fb0f4b](https://github.com/trussworks/react-uswds/commit/8fb0f4b004fde789e5fcea6294a5659b91503742))
+- add [@ahobson](https://github.com/ahobson) as codeowner, remove check-in meeting ([#347](https://github.com/trussworks/react-uswds/issues/347)) ([9eaf02b](https://github.com/trussworks/react-uswds/commit/9eaf02b188fd017322b6e4dc4c1b0d7693e47a9c))
+- Add new component issue template ([#340](https://github.com/trussworks/react-uswds/issues/340)) ([8fb0f4b](https://github.com/trussworks/react-uswds/commit/8fb0f4b004fde789e5fcea6294a5659b91503742))
 
 ## [1.7.0](https://github.com/trussworks/react-uswds/compare/1.6.1...1.7.0) (2020-07-15)
 
-
 ### Features
 
-* Link Component ([#309](https://github.com/trussworks/react-uswds/issues/309)) ([2879bec](https://github.com/trussworks/react-uswds/commit/2879bec7cce64a71b5b9e44ff0ad400cf11d52f1))
+- Link Component ([#309](https://github.com/trussworks/react-uswds/issues/309)) ([2879bec](https://github.com/trussworks/react-uswds/commit/2879bec7cce64a71b5b9e44ff0ad400cf11d52f1))
 
-
 ### Bug Fixes
 
-* address all lint warnings ([#319](https://github.com/trussworks/react-uswds/issues/319)) ([95a12a3](https://github.com/trussworks/react-uswds/commit/95a12a363e6f609fee0760469443a808b1c35732))
-* refactor menu, megamanu; removes deprecation warnings from tests ([#313](https://github.com/trussworks/react-uswds/issues/313)) ([42e2481](https://github.com/trussworks/react-uswds/commit/42e248190cfbeebf72f7617326cfb03c4f241304))
+- address all lint warnings ([#319](https://github.com/trussworks/react-uswds/issues/319)) ([95a12a3](https://github.com/trussworks/react-uswds/commit/95a12a363e6f609fee0760469443a808b1c35732))
+- refactor menu, megamanu; removes deprecation warnings from tests ([#313](https://github.com/trussworks/react-uswds/issues/313)) ([42e2481](https://github.com/trussworks/react-uswds/commit/42e248190cfbeebf72f7617326cfb03c4f241304))
 
 ### [1.6.1](https://github.com/trussworks/react-uswds/compare/1.6.0...1.6.1) (2020-07-13)
 
-
 ### Bug Fixes
 
-* **standard-version:** use -t flag correctly, autocommit changelog and release bump ([#310](https://github.com/trussworks/react-uswds/issues/310)) ([a96591e](https://github.com/trussworks/react-uswds/commit/a96591e71a7ac226b7d397c3714fed25d78c1ab9))
-* Use JSX.ImplicitElements to derive valid property names ([#267](https://github.com/trussworks/react-uswds/issues/267)) ([2eba792](https://github.com/trussworks/react-uswds/commit/2eba7922ea2c6a4f4a710f989da41e7b847d4398))
+- **standard-version:** use -t flag correctly, autocommit changelog and release bump ([#310](https://github.com/trussworks/react-uswds/issues/310)) ([a96591e](https://github.com/trussworks/react-uswds/commit/a96591e71a7ac226b7d397c3714fed25d78c1ab9))
+- Use JSX.ImplicitElements to derive valid property names ([#267](https://github.com/trussworks/react-uswds/issues/267)) ([2eba792](https://github.com/trussworks/react-uswds/commit/2eba7922ea2c6a4f4a710f989da41e7b847d4398))
 
-
 ### Documentation & Examples
 
-* Update releasing instructions with current flow ([#297](https://github.com/trussworks/react-uswds/issues/297)) ([87515bc](https://github.com/trussworks/react-uswds/commit/87515bc8577af1630833d0e374c29d08a34cae54))
+- Update releasing instructions with current flow ([#297](https://github.com/trussworks/react-uswds/issues/297)) ([87515bc](https://github.com/trussworks/react-uswds/commit/87515bc8577af1630833d0e374c29d08a34cae54))
 
@@ -54,0 +66,0 @@ ## 1.6.0 (2020-06-29)

lib/components/Alert/Alert.d.ts

@@ -9,4 +9,5 @@ import React from 'react';
     noIcon?: boolean;
+    validation?: boolean;
 }
-export declare const Alert: ({ type, heading, cta, children, slim, noIcon, className, ...props }: AlertProps & React.HTMLAttributes<HTMLDivElement>) => React.ReactElement;
+export declare const Alert: ({ type, heading, cta, children, slim, noIcon, className, validation, ...props }: AlertProps & React.HTMLAttributes<HTMLDivElement>) => React.ReactElement;
 export default Alert;

lib/components/Button/Button.d.ts

@@ -1,2 +0,2 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
 interface ButtonProps {
@@ -19,6 +19,9 @@ type: 'button' | 'submit' | 'reset';
     small?: boolean;
+    /**
+     * @deprecated since 1.9.0
+     */
     icon?: boolean;
     unstyled?: boolean;
 }
-export declare const Button: (props: ButtonProps & JSX.IntrinsicElements['button']) => ReactElement;
+export declare const Button: (props: ButtonProps & JSX.IntrinsicElements['button']) => React.ReactElement;
 export default Button;

lib/components/forms/Textarea/Textarea.d.ts

 import React from 'react';
-interface TextareaProps {
+declare type TextareaRef = string | string | ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
+export interface TextareaProps {
     id: string;
@@ -9,5 +10,5 @@ name: string;
     children?: React.ReactNode;
-    inputRef?: string | ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
+    inputRef?: TextareaRef;
 }
 export declare const Textarea: (props: TextareaProps & JSX.IntrinsicElements['textarea']) => React.ReactElement;
 export default Textarea;

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

 import React from 'react';
+declare type TextInputRef = string | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
 interface RequiredTextInputProps {
@@ -27,7 +28,7 @@ id: string;
     medium?: boolean;
-    inputRef?: string | ((instance: HTMLInputElement | null) => void) | React.RefObject<HTMLInputElement> | null | undefined;
+    inputRef?: TextInputRef;
 }
 export declare type OptionalTextInputProps = CustomTextInputProps & JSX.IntrinsicElements['input'];
-declare type TextInputProps = RequiredTextInputProps & OptionalTextInputProps;
+export declare type TextInputProps = RequiredTextInputProps & OptionalTextInputProps;
 export declare const TextInput: (props: TextInputProps) => React.ReactElement;
 export default TextInput;

lib/components/grid/Grid/Grid.d.ts

@@ -9,4 +9,4 @@ import React from 'react';
 };
-export declare const getGridClasses: (itemProps: GridItemProps, breakpoint?: "mobile" | "tablet" | "desktop" | "widescreen" | "mobileLg" | "tabletLg" | "desktopLg" | undefined) => string;
+export declare const getGridClasses: (itemProps?: GridItemProps, breakpoint?: "mobile" | "tablet" | "desktop" | "widescreen" | "mobileLg" | "tabletLg" | "desktopLg" | undefined) => string;
 export declare const applyGridClasses: (gridLayout: GridProps) => string;
 export declare const Grid: ({ children, className, ...props }: GridProps & React.HTMLAttributes<HTMLDivElement>) => React.ReactElement;

lib/index.d.ts

@@ -7,2 +7,4 @@ import './styles/index.scss';
 export { Button } from './components/Button/Button';
+export { ButtonGroup } from './components/ButtonGroup/ButtonGroup';
+export { Link } from './components/Link/Link';
 export { Table } from './components/Table/Table';
@@ -15,2 +17,3 @@ export { Tag } from './components/Tag/Tag';
 /** Form components */
+export { CharacterCount } from './components/forms/CharacterCount/CharacterCount';
 export { Checkbox } from './components/forms/Checkbox/Checkbox';
@@ -29,2 +32,4 @@ export { DateInput } from './components/forms/DateInput/DateInput';
 export { TextInput } from './components/forms/TextInput/TextInput';
+export { ValidationChecklist } from './components/forms/Validation/ValidationChecklist';
+export { ValidationItem } from './components/forms/Validation/ValidationItem';
 /** Header Components */
@@ -38,2 +43,3 @@ export { ExtendedNav } from './components/header/ExtendedNav/ExtendedNav';
 export { NavMenuButton } from './components/header/NavMenuButton/NavMenuButton';
+export { NavDropDownButton } from './components/header/NavDropDownButton/NavDropDownButton';
 export { PrimaryNav } from './components/header/PrimaryNav/PrimaryNav';
@@ -40,0 +46,0 @@ export { Title } from './components/header/Title/Title';

lib/uswds.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ReactUSWDS=t():e.ReactUSWDS=t()}(window,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}({6:function(e,t,n){"use strict";n.r(t);n(7)},7:function(e,t,n){}})}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.ReactUSWDS=t():e.ReactUSWDS=t()}(this,(function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=64)}({64:function(e,t,n){"use strict";n(65)},65:function(e,t,n){}})}));

package.json

 {
   "name": "@trussworks/react-uswds",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "React USWDS 2.0 component library",
@@ -73,2 +73,3 @@ "keywords": [
     "@storybook/addon-docs": "^5.3.19",
+    "@storybook/addon-viewport": "^5.3.19",
     "@storybook/react": "^5.3.19",
@@ -89,3 +90,3 @@ "@storybook/storybook-deployer": "^2.8.6",
     "babel-loader": "^8.0.6",
-    "css-loader": "^3.2.0",
+    "css-loader": "^4.0.0",
     "danger": "^10.0.0",
@@ -105,3 +106,3 @@ "eslint": "^6.5.1",
     "lint-staged": "^10.0.9",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^0.10.0",
     "prettier": "^2.0.2",
@@ -108,0 +109,0 @@ "react-docgen-typescript-loader": "^3.7.2",

README.md

@@ -69,2 +69,32 @@ # @trussworks/react-uswds
 
+### Icons
+
+[USWDS recommends using Font Awesome](https://designsystem.digital.gov/components/icons/), and that project [provides a package for use with React](https://github.com/FortAwesome/react-fontawesome).
+
+To add this to your project, install react-font-awesome and at least one style of icon:
+
+```
+yarn add @fortawesome/fontawesome-svg-core \
+         @fortawesome/free-solid-svg-icons \
+         @fortawesome/react-fontawesome
+```
+
+You can then add Font Awesome icons to your projects using the `FontAwesome` component:
+
+
+```jsx
+import ReactDOM from 'react-dom'
+import { Button } from '@trussworks/react-uswds'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSave } from '@fortawesome/free-solid-svg-icons'
+
+const button = <Button type="button">
+  <FontAwesomeIcon icon={faSave} /> Save Changes
+</Button>;
+
+ReactDOM.render(button, document.body);
+```
+
+For more information on working with and configuring react-fontawesome, please see [that project's documentation](https://github.com/FortAwesome/react-fontawesome#installation). To find specific icons for your project, [search on the Font Awesome site](https://fontawesome.com/icons).
+
 ## Maintainers
@@ -71,0 +101,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2707087

increased by1.52%

Number of package files

161

increased by41.23%

Lines of code

2639

increased by26.33%

Number of lines in readme file

125

increased by31.58%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

55

increased by1.85%

No dependency changes