@nypl/design-system-react-components 1.5.1 → 1.5.3

package/README.md

@@ -18,7 +18,7 @@ Storybook documentation
 | 3.                | [Storybook](#storybook)                                                             |
 | 4.                | [Accessibility](#accessibility)                                                     |
 | 5.                | [Contributing Quickstart](#contributing-quickstart)                                 |
-| 6.                | [Developing with NPM Link](#developing-with-npm-link)                               |
+| 6.                | [Local App Development](#local-app-development)                                     |
 | 7.                | [Typescript Usage](#typescript-usage)                                               |
 | 8.                | [Unit Testing](#unit-testing)                                                       |
 | 9.                | [CDN](#cdn)                                                                         |
@@ -336,7 +336,23 @@ For now, this is a manual process until the repo's node version and build system
 | `development` | `"build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",` |
 | `release`     | `"build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",`                                        |
 
-## Developing with NPM Link
+## Local App Development
+
+Sometimes, you may want to test out a new feature or bug fix in a local app rather than publishing a release candidate version to npm. While this is possible, it is not always straightforward.
+
+_Please note that the following instructions depend on the node version for both the Design System and the local app. If the node versions are different, the instructions may not work. This is a limitation of npm._
+
+### Developing with npm install
+
+To develop with a local version of the Design System:
+
+1. In the root of the consuming application directory, run:
+
+```sh
+$ npm install --no-save [../path/to/design-system]
+```
+
+### Developing with npm link
 
 To develop with a local version of the Design System:
 
@@ -352,13 +368,13 @@ $ npm link
 $ npm link @nypl/design-system-react-components
 ```
 
-3. Go back to the Design System directory and run the following command. It allos the local Design System to be rebuilt and exported automatically:
+3. Go back to the Design System directory and run the following command. It allows the local Design System to be rebuilt and exported automatically:
 
 ```sh
 $ npm start
 ```
 
-### Error Troubleshooting
+#### Error Troubleshooting
 
 It's possible when running `npm link` that you'll get an `Invalid Hook` issue. If this occurs, it's most likely caused by having two versions of React when trying to run the application while the NYPL DS package is linked. This [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) issue is covered by the React team.
 
@@ -370,7 +386,7 @@ $ npm link [../path/to/application]/node_modules/react
 
 Now you should be able to run `npm start` in the DS directory and `npm run dev` (or whatever your application uses) in the application directory and not get an `Invalid Hook` error.
 
-### npm Unlink
+#### npm Unlink
 
 To unlink the DS codebase:
 

package/dist/components/Icons/IconNames.d.ts

@@ -1,3 +1,3 @@
-declare const iconNames: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
-export declare const getIconNames: () => readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+declare const iconNames: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+export declare const getIconNames: () => readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionLaunch", "actionPower", "actionRegistration", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "minus", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialTumblr", "socialTwitter", "socialYoutube", "speakerNotes", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
 export default iconNames;

package/dist/components/Icons/IconSvgs.d.ts

@@ -44,6 +44,8 @@ declare const _default: {
     search: string;
     socialFacebook: string;
     socialInstagram: string;
+    socialPinterest: string;
+    socialSoundCloud: string;
     socialTumblr: string;
     socialTwitter: string;
     socialYoutube: string;

package/dist/components/Logo/Logo.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "digitalCollectionsBlack" | "digitalCollectionsWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nycdoeColor" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
+export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "digitalCollectionsBlack" | "digitalCollectionsWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nycdoeBlack" | "nycdoeColor" | "nycdoeWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
 export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
 export interface LogoProps {
     /** Optional className that will be added to the parent element */

package/dist/components/Logo/LogoSvgs.d.ts

@@ -17,7 +17,9 @@ declare const _default: {
     mlnBlack: string;
     mlnColor: string;
     mlnWhite: string;
+    nycdoeBlack: string;
     nycdoeColor: string;
+    nycdoeWhite: string;
     nyplFullBlack: string;
     nyplFullWhite: string;
     nyplLionBlack: string;