@nypl/design-system-react-components 1.4.1 → 1.5.0-rc

package/CHANGELOG.md

@@ -8,6 +8,36 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+### Adds
+
+- Adds `dark` color mode support for `background-color` and `color` global styles.
+- Adds `dark` color mode support for the `HelperErrorText` and `StatusBadge` components.
+- Adds `dark` color mode support for the `Button`, `Checkbox`, `DatePicker`, `ProgressIndicator`, `Radio`, `SearchBar`, `Select`, `Slider` and `Toggle` components.
+- Adds `dark` color mode support for the `Card` and `Hero` components.
+- Adds `dark` color mode support for the `Heading` and `List` components.
+- Adds `dark` color mode support for the `Footer`, `Header`, `HorizontalRule` and `Table` components.
+- Adds `dark` color mode support for the `Notification`, `ProgressIndicator`, and `SkeletonLoader` components.
+- Adds `dark` color mode support for the `Breadcrumbs`, `Link Types`, and `Pagination` components.
+- Adds `dark` color mode support for the `Accordion`, `Modal`, `Tabs`, and `Tooltip` components.
+- Adds `dark` color mode support for the `AlphabetFilter`, `AudioPlayer`, and `TagSet` components.
+- Adds `dark` color mode support for the `FeedbackBox` and `StyledList` components.
+- Adds `dark` color mode support for the `FilterBar` and `MultiSelect` components.
+- Adds `Supporting Dark Mode` under the `Development Guide`.
+
+### Updates
+
+- Updates the `Design Tokens Style Guide` to include more detailed information about the available tokens.
+
+## 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
@@ -141,6 +171,16 @@ This release is exactly the same as the `1.3.0-rc` release candidate published o
 
 ### Adds
 
+- Adds `brand` as a `breadcrumbsType` to the `Breadcrumbs` component.
+
+### Updates
+
+- Updates the hex value for `dark.ui.error.primary`.
+
+## 1.2.1 (October 27, 2022)
+
+### Adds
+
 - Adds the `"buttonPrimary"`, `"buttonSecondary"`, `"buttonPill"`, `"buttonCallout"`, `"buttonNoBrand"`, `"buttonDisabled"` variants for the the `Link` component, set through the `type` prop.
 
 ### Deprecates
@@ -217,6 +257,7 @@ This release is exactly the same as the `1.3.0-rc` release candidate published o
 ### Deprecates
 
 - Deprecates the `link` variant in the `Button` component.
+- Deprecates the `darkMode` prop in the `ProgressIndicator` component.
 
 ## 1.1.0 (August 30, 2022)
 
@@ -260,6 +301,7 @@ This release is exactly the same as the `1.1.0-rc5` release candidate which was
 - Updates the `onClick` event type for the `Pagination` links `onClick` function.
 - Updates the `Link` component's `onClick` event type.
 - Makes small, clarifying update to `Color Mode` story in Storybook.
+- Updates background color values available in Storybook.
 
 ### Fixes
 

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/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-export declare type BreadcrumbsTypes = "blogs" | "booksAndMore" | "education" | "locations" | "research" | "whatsOn";
+export declare type BreadcrumbsTypes = "blogs" | "booksAndMore" | "brand" | "education" | "locations" | "research" | "whatsOn";
 export interface BreadcrumbsDataProps {
     url: string;
     text: string | React.ReactNode;

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

@@ -3,8 +3,8 @@ export interface HeaderSearchButtonProps {
     isMobile?: boolean;
 }
 /**
- * This is the button that will render the search form when it is clicked
- * and keep focus trapped within the menu.
+ * This is the button that will render the search form when it is clicked and
+ * keep focus trapped within the menu.
  */
 declare const HeaderSearchButton: import("@chakra-ui/react").ChakraComponent<({ isMobile }: HeaderSearchButtonProps) => JSX.Element, {}>;
 export default HeaderSearchButton;

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/Notification/Notification.d.ts

@@ -9,12 +9,17 @@ interface BaseProps {
     id?: string;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     isCentered?: boolean;
+    /** Content to be rendered in a `NotificationHeading` component. */
+    notificationHeading?: string;
     /** Optional prop to control the coloring of the `Notification` text and the
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
+    /** Prop to display the `Notification` icon. Defaults to `true`. */
+    showIcon?: boolean;
 }
+declare type NotificationHeadingProps = Omit<BasePropsWithoutAlignText, "notificationHeading" | "showIcon">;
+declare type NotificationContentProps = Omit<BaseProps, "icon">;
 declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
-declare type BasePropsWithoutIsCentered = Omit<BaseProps, "isCentered">;
 export interface NotificationProps extends BasePropsWithoutAlignText {
     /** Label used to describe the `Notification`'s aside HTML element. */
     ariaLabel?: string;
@@ -29,19 +34,15 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
     noMargin?: boolean;
     /** Content to be rendered in a `NotificationContent` component. */
     notificationContent: string | JSX.Element;
-    /** Content to be rendered in a `NotificationHeading` component. */
-    notificationHeading?: string;
-    /** Prop to display the `Notification` icon. Defaults to `true`. */
-    showIcon?: boolean;
 }
 /**
  * NotificationHeading child-component.
  */
-export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<BasePropsWithoutAlignText>) => JSX.Element, {}>;
+export declare const NotificationHeading: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationHeadingProps>) => JSX.Element, {}>;
 /**
  * NotificationContent child-component.
  */
-export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<BasePropsWithoutIsCentered>) => JSX.Element, {}>;
+export declare const NotificationContent: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<NotificationContentProps>) => JSX.Element, {}>;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.

package/dist/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 export declare type ProgressIndicatorSizes = "default" | "small";
 export declare type ProgressIndicatorTypes = "circular" | "linear";
 export interface ProgressIndicatorProps {
-    /** Flag to render the component in a dark background. */
+    /** The darkMode prop is deprecated and should no longer be used. */
     darkMode?: boolean;
     /** ID that other components can cross reference for accessibility purposes. */
     id: string;