@nypl/design-system-react-components 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -8,6 +8,35 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.4.2 (March 2, 2023)
+
+### Updates
+
+- Updates the `Logo` component to include "black" and "white" variants for `Digital Collections`.
+
+### Fixes
+
+- Updates the `Slider` component's `currentValue` state to use the `useStateWithDependencies` hook.
+
+## 1.4.1 (February 9, 2023)
+
+### Adds
+
+- Adds the `pattern` prop to the `TextInput` component.
+- Adds documentation page "Dynamic Content" to the `Accessibility Guide`.
+- Adds the `isRenderedText` prop to the `HelperErrorText` component.
+
+### Updates
+
+- Adds a third radio button to the `Header` component, separating search options between the Circulating Catalog, Research Catalog, and the NYPL.org website.
+- Temporarily removes the "log in" state from the `Header` component, the feature to read auth cookies, and the patron's name when logged in, and the log out link.
+- Truncate breadcrumb text if beyond 40 characters then add ellipsis at the end. If the breadcrumb text is truncated, the DS `Tooltip` component is used to display the full text in a tooltip when the text is hovered.
+- Updates the `SearchBar`'s `textInputProps` prop to include the following props to pass to the `TextInput` component: `isClearableCallback`, `max`, `maxLength`, `min`, and `pattern`.
+- Updates how the `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, and `RadioGroup` components internally render the `HelperErrorText` component. The update in the `ComponentWrapper` component affects the `AudioPlayer`, `Checkbox`, `Radio`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`, and `VideoPlayer` DS components, each of which render helper or error text.
+- Updates the `MultiSelect` component so it closes when the "escape" key is pressed.
+- Updates where the focus is set in the `MultiSelect` "dialog" variant after the "Apply" button is clicked.
+- Updates where the focus is set in the `MultiSelect` component after the selected items count button is clicked.
+
 ## 1.4.0 (January 26, 2023)
 
 ### Adds
@@ -28,7 +57,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
   `dark.ui.status.primary`, `dark.ui.status.secondary`, `dark.ui.success.primary`,
   `dark.ui.success.secondary`, `dark.ui.warning.primary`
   and `dark.ui.warning.secondary`.
-- Updates the layout of the category `RadioGroup` to `column` for the mobie
+- Updates the layout of the category `RadioGroup` to `column` for the mobile
   view of the `FeedbackBox` component.
 - Updates the background color for the `"iconOnly"` and `"text"` variants of
   the `Button` component.
@@ -39,6 +68,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Updates the `HelperErrorText` component to set the `ariaLive` default value
   to `"polite"`.
 - Updates the `Accessibility` details for the `Notification` component.
+- Better docs for the `onSubmit` prop in the `FeedbackBox` component.
 
 ### Fixes
 
@@ -198,7 +228,7 @@ This release is exactly the same as the `1.3.0-rc` release candidate published o
 
 - Deprecates the `link` variant in the `Button` component.
 
-## 1.1.0 (Ausut 30, 2022)
+## 1.1.0 (August 30, 2022)
 
 This release is exactly the same as the `1.1.0-rc5` release candidate which was published and reviewed. Minor bug fixes, listed below, were made.
 

package/README.md

@@ -272,9 +272,69 @@ Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branc
 
 ### Node Version
 
-We recommend using Node version 12.22.x since the DS has some issues with versions higher than 12.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 12.x.
+We recommend using Node version 14.x since the DS has some issues with versions higher than 14.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 14.x.
 
-If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `12.22.x`).
+If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `14.x`).
+
+### Git Branch Workflow
+
+There are currently two main branches for the DS:
+
+- `development` is the main and default branch for the DS. All new feature and bug fix pull requests should be made against this branch.
+- `release` is the branch used to deploy the static Storybook instance to Github Pages, the DS' production Storybook instance.
+
+When a new version of the DS is ready for release, the `development` branch is merged into the `release` branch through a pull request. Once merged, Github Actions will run to deploy the static Storybook as well as publish the new version to npm. Here is a [pull request](https://github.com/NYPL/nypl-design-system/pull/1249) that follows the convention outlined in [How to Run a Release](https://github.com/NYPL/nypl-design-system/wiki/How-to-Run-a-Release).
+
+When working on a new feature or a bug fix:
+
+1. Create a new branch off of `development` with the following naming convention: `[ticket-number]/your-feature-or-bug-name`. For example, if the JIRA ticket is DSD-1234 and the feature is "Add more Animal Crossing examples", then potential branch names can be `DSD-1234/add-more-animal-crossing-examples`, `DSD-1234/more-ac-examples`, or `DSD-1234/animal-crossing-examples`. The ticket number in the branch name is usually more helpful than the text that follows.
+2. Create a pull request that points to the `development` branch.
+3. If your pull request is approved and _should_ be merged, merge it. This is indicated with the "SHIP IT" Github label. Sometimes, some features must wait and the "DO NOT MERGE" label is added to the pull request.
+
+### Release Candidates
+
+For new big feature updates, we typically want to QA it in the Turbine test app before the real stable release is made. In this case, we create "release candidate" npm packages. This can be based off the feature branch or the `developement` branch once the feature is merged in.
+
+At the moment, this is a manual process. For this example, we will use version `1.5.0` as the new version that will be released.
+
+1. Whether on the feature branch or the `development` branch, the version in the `package.json` file must be updated to include the `-rc` suffix. For example, `1.5.0` becomes `1.5.0-rc`. This is to indicate that this is a release candidate version.
+2. Delete the `package-lock.json` file and the `node_modules` directory.
+3. Run `npm install` to install all the dependencies and create a new `package-lock.json` file with the updated version.
+4. Run `npm publish` to publish the new release candidate version to npm. Make sure you have an npm account, are logged in to npm on your machine, and have the correct permissions to publish to the `@nypl/design-system-react-components` package.
+
+What happens if QA finds a bug in the release candidate version in the Turbine test app?
+
+1. Update or fix the bug in a new branch.
+2. Once approved, merge the pull request into the feature branch or the `development` branch.
+3. Follow the same steps above to create a new release candidate version but this time the `-rc` suffix should be incremented. For example, `1.5.0-rc` becomes `1.5.0-rc1`.
+4. QA the new release candidate version in the Turbine test app.
+
+The release candidate version passed QA and is ready for production! What do we do now?
+
+1. Celebrate.
+2. Make sure all the new changes are merged into the `development` branch.
+3. Remove the `-rc` suffix from the version in the `package.json` file.
+4. Delete the `package-lock.json` file and the `node_modules` directory.
+5. Run `npm install` to install all the dependencies and create a new `package-lock.json` file with the updated version.
+6. Push the changes to Github and create a new pull request from `development` that points to the `release` branch.
+7. Once approved and merged, a Github Action will run that will automatically deploy the static Storybook to Github Pages and publish the new version to npm.
+
+#### Release Troubleshooting
+
+There is currently a bug with node that causes Vercel preview instances to fail and not build correctly. In order to fix this, the build script has an included node flag added. This can be found in package.json:
+
+```json
+  "build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",
+```
+
+Unfortunately, while this helps the Vercel previews to build correctly, it causes the Github Action that builds the production Storybook to fail. Because of this, the `release` branch must _not_ include the `NODE_OPTIONS=--openssl-legacy-provider` flag. This means that the `release` branch must be updated to remove this flag before merging the `development` branch into it.
+
+For now, this is a manual process until the repo's node version and build system are updated.
+
+| Branch        | Script                                                                                                                                          |
+| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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
 

package/dist/components/Header/components/HeaderLogin.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 export interface HeaderLoginProps {
     catalogRef?: React.RefObject<HTMLDivElement & HTMLAnchorElement>;
-    greetingRef?: React.RefObject<HTMLDivElement>;
     isMobile?: boolean;
 }
 /**
@@ -9,5 +8,5 @@ export interface HeaderLoginProps {
  * in and log out. When the patron is logged in, it will also display the patron's
  * name, links to the catalogs, and a log out link.
  */
-declare const HeaderLogin: import("@chakra-ui/react").ChakraComponent<({ catalogRef, greetingRef, isMobile }: HeaderLoginProps) => JSX.Element, {}>;
+declare const HeaderLogin: import("@chakra-ui/react").ChakraComponent<({ catalogRef, isMobile }: HeaderLoginProps) => JSX.Element, {}>;
 export default HeaderLogin;

package/dist/components/Header/components/HeaderSearchForm.d.ts

@@ -2,6 +2,7 @@
 export interface HeaderSearchFormProps {
     isMobile?: boolean;
 }
+export declare type SearchOptionType = "circulatingCatalog" | "researchCatalog" | "website";
 /**
  * Displays the search form for the Header's search interface. On mobile, two
  * buttons are displayed and on desktop, two radio inputs are displayed.

package/dist/components/Header/utils/headerUtils.d.ts

@@ -48,6 +48,10 @@ export declare const encoreEncodeSearchString: (searchString: any) => any;
  * Returns the final URL for the NYPL Encore search.
  */
 export declare const getEncoreCatalogURL: (searchValue: any) => any;
+/**
+ * Returns the final URL for the NYPL Research Catalog search.
+ */
+export declare const getResearchCatalogURL: (searchValue: any) => string;
 /**
  * Returns the final URL for the NYPL catalog search.
  */

package/dist/components/HelperErrorText/HelperErrorText.d.ts

@@ -19,11 +19,16 @@ interface HelperErrorTextProps {
     id?: string;
     /** Toggles between helper and invalid styling. */
     isInvalid?: boolean;
+    /** Offers the ability to render or not render the content passed in
+     * the `text` prop; `true` by default. */
+    isRenderedText?: boolean;
     /** The text to display. */
     text: HelperErrorTextType;
 }
 /**
- * Helper or error text for forms components.
+ * Component that always renders a div even if the text content is not passed.
+ * This pattern guarantees accessibility guidelines are met if the text content
+ * is dynamically updated by the app or component that implements it.
  */
 export declare const HelperErrorText: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<HelperErrorTextProps & React.RefAttributes<HTMLDivElement>>, {}>;
 export default HelperErrorText;

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" | "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" | "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 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

@@ -6,6 +6,8 @@ declare const _default: {
     cleverBadgeColor: string;
     cleverColor: string;
     cleverWhite: string;
+    digitalCollectionsBlack: string;
+    digitalCollectionsWhite: string;
     firstbookColor: string;
     firstbookColorNegative: string;
     googlePlayBlack: string;

package/dist/components/SearchBar/SearchBar.d.ts

@@ -1,24 +1,15 @@
 import React from "react";
 import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
-interface BaseProps {
-    id?: string;
-    labelText: string;
-    name: string;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
-    value?: string;
-}
+import { SelectProps as InitialSelectProps } from "../Select/Select";
+import { InputProps as InitialInputProps } from "../TextInput/TextInput";
 interface SelectOptionsProps {
     text: string;
     value: string;
 }
-export interface SelectProps extends BaseProps {
+export declare type SelectProps = Partial<Pick<InitialSelectProps, "id" | "labelText" | "name" | "onChange" | "value">> & {
     optionsData: SelectOptionsProps[];
-    onChange?: (event: React.FormEvent) => void;
-}
-export interface TextInputProps extends BaseProps {
-    isClearable?: boolean;
-    placeholder?: string;
-}
+};
+export declare type TextInputProps = Pick<InitialInputProps, "labelText" | "name"> & Partial<Pick<InitialInputProps, "id" | "isClearable" | "isClearableCallback" | "max" | "maxLength" | "min" | "onChange" | "pattern" | "placeholder" | "value">>;
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
     action?: string;

package/dist/components/TextInput/TextInput.d.ts

@@ -50,6 +50,8 @@ export interface InputProps {
     onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
     /** The action to perform on the `input`/`textarea`'s onFocus function  */
     onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Regex to query the user input against. */
+    pattern?: string;
     /** Populates the placeholder for the input/textarea elements */
     placeholder?: string;
     /** Allows the '(Required)' text to be changed for language purposes