@nypl/design-system-react-components 0.28.0 → 1.0.2

package/CHANGELOG.md

@@ -8,6 +8,45 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 1.0.2 (June 1, 2022)
+
+### Adds
+
+- Adds `noSpace` prop to the `Heading` component.
+- Adds validation for equal headers and data column to the `Table` component.
+- Adds `className`, `helperTextStyles`, and `showHelperInvalidText` props to the `ComponentWrapper` component.
+
+### Updates
+
+- Updates the `fontSize` and `padding` attributes in the single variant of the `Accordion` component.
+- Updates all QA urls from Tugboat QA to Vercel.
+- Updates the `Logo` component to include new variants for `Apple App Store`, `Clever Badge` and `Google Play`.
+- Pins the Chakra UI "react" and "system" packages to a certain range since Chakra v2 uses React 18 and creates backwards compatibility issues.
+- Updates buttons setup as icon only to get the same hover styles as `secondary` button in the `Button` component.
+- Updates and refactors the `Checkbox`, `Radio`, `Select`, `Slider`, `TextInput` and `Toggle` components to use the `ComponentWrapper` component for similar DOM structure.
+- Updates how `CheckboxGroup` and `RadioGroup` handle `Checkbox` and `Radio` components when `isFullWidth` is true and there is JSX as labels.
+
+### Fixes
+
+- Fixes how `Image`s are rendered with a non-default `aspectRatio` value and with a `caption` value or a `credit` value or both.
+- Fixes the extra margin added by the `SkipNavigation` component.
+- Updates various component implementations in Storybook documentation pages to remove inadvertent console errors and warnings.
+- Fixes sizing in the `Card` component for the "body" and "right" sections when the `isAlignedRightActions` prop is set to `true`.
+- Allows `Button`s in the `ButtonGroup` to manage their own `isDisabled` state.
+- Fixes how the `onChange` prop is set in `Checkbox` so it only gets called once per rendering.
+
+## 1.0.1 (May 31, 2022)
+
+_NOTE_: This version number was previously released in 2019 and is marked as deprecated in npm. The next version bump from `1.0.0` is `1.0.2`.
+
+## 1.0.0 (May 12, 2022)
+
+This is the first stable release of the NYPL Reservoir Design System! We've been looking forward to this moment for over two years.
+
+### Updates
+
+- Updates all links throughout the documentation to point to the new production URLs.
+
 ## 0.28.0 (May 9, 2022)
 
 ### Adds

package/README.md

@@ -10,8 +10,8 @@ _Note: This library is still in beta. Until we release the stable `1.0.0` versio
 
 Storybook documentation
 
-- [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page)
-- [Development - deployed to Tugboat QA](https://development-6y1v6na1ceqnmojvc5akrm5ewys3cshs.tugboat.qa/?path=/story/introduction--page)
+- [Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page)
+- [Development/QA - deployed to Vercel](https://nypl-design-system.vercel.app/?path=/story/welcome--page)
 
 | Table of Contents |                                                                                     |
 | ----------------- | ----------------------------------------------------------------------------------- |
@@ -194,7 +194,7 @@ The list of re-exported Chakra components can be found in the main [index.ts](/s
 Find more information about the Design System's internal use of Chakra to create and refactor components in the Storybook documentation page. The following two links have the same information but in different formats for your reading preference:
 
 - [MDX format](/src/docs/Chakra.stories.mdx)
-- [Storybook page](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/chakra-ui--page)
+- [Storybook page](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/chakra-ui--page)
 
 Chakra was integrated into the Design System in version `0.25.0`. For those looking to update to a version greater than or equal `0.25.0`, check out our [Chakra Migration Guide](/CHAKRA_MIGRATION_GUIDE.md).
 
@@ -216,7 +216,7 @@ You can check out a working Codepen with unpkg [here](https://codepen.io/edwingu
 
 ## Storybook
 
-The Reservoir Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation can be found [here](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). For your convenience, the Reservoir Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
+The Reservoir Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation can be found [here](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page). For your convenience, the Reservoir Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
 
 ### Documentation Instances
 
@@ -224,17 +224,17 @@ There are currently two main instances of the Reservoir Design System Storybook
 
 **Production**
 
-The production Storybook documentation is deployed to [Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). This is the main instance we use to share the latest stable release of the Reservoir Design System. This documentation site is deployed through [Github Actions](/.github/workflows/gh-pages.yml) only on merges to the `release` branch.
+The production Storybook documentation is deployed to [Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page). This is the main instance we use to share the latest stable release of the Reservoir Design System. This documentation site is deployed through [Github Actions](/.github/workflows/gh-pages.yml) only on merges to the `release` branch.
 
 As of July, 2021, the Github Pages production site gets deployed every two weeks on the same schedule as npm releases.
 
 **Development**
 
-The development Storybook documentation is deployed to [Tugboat QA](https://development-6y1v6na1ceqnmojvc5akrm5ewys3cshs.tugboat.qa/?path=/story/introduction--page). This development site has all the working updates that get merged to the `development` branch. This means that this site is constantly being updated as pull requests are being merged in. This site is used to see the lastest changes during a working sprint before a production release is made.
+The development Storybook documentation is deployed to [Vercel](https://nypl-design-system.vercel.app/?path=/story/welcome--page). This development site has all the working updates that get merged to the `development` branch. This means that this site is constantly being updated as pull requests are being merged in. This site is used to see the lastest changes during a working sprint before a production release is made.
 
 **Preview Sites**
 
-Preview Storybook documentation sites are deployed to Tugboat QA for every pull request. They follow a pattern such as `pr[number]-[hash].tugboat.qa` where `[number]` is the number of the pull request it is deploying. For example, for pull request #101, Tugboat will deploy a "preview" site to `pr101-wldudndlk24kas42.tugboat.qa`. Since these "preview" sites are brought up only for pull requests, this means that the URL varies and that those instances are eventually shut off. They are not meant to be used as long-term sites but rather for reviewing working changes within the team.
+Preview Storybook documentation sites are deployed to Vercel on every commit push to every branch in this repository. They follow a pattern such as `nypl-design-system-[hash]-nypl.vercel.app` where `[hash]` is a random hash created by Vercel. This means that the URL varies and that those instances are eventually shut off. They are not meant to be used as long-term sites but rather for reviewing working changes within the team.
 
 ### React Component Documentation
 
@@ -261,13 +261,13 @@ To help consuming application developers understand which version of the DS is r
 
 ### Static Build
 
-There should be no need to run the static Storybook instance while actively developing -- it's used exclusively for building out the `gh-pages` environment and deploying it to [Github Pages](https://nypl.github.io/nypl-design-system/storybook-static/?path=/story/introduction--page). In the event that you do run the static Storybook npm script, run:
+There should be no need to run the static Storybook instance while actively developing -- it's used exclusively for building out the `gh-pages` environment and deploying it to [Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v1/?path=/story/welcome--page). In the event that you do run the static Storybook npm script, run:
 
 ```sh
-$ npm run build-storybook
+$ npm run build-storybook:v1
 ```
 
-You can then view `/storybook-static/index.html` in your browser. _Make sure not to commit this directory_.
+You can then view `/reservoir/v1/index.html` in your browser. _Make sure not to commit this directory_.
 
 ## Typescript Usage
 

package/dist/components/Checkbox/Checkbox.d.ts

@@ -43,6 +43,5 @@ export interface CheckboxProps extends CheckboxIconProps {
     /** Populates the value of the input */
     value?: string;
 }
-export declare const onChangeDefault: () => void;
 export declare const Checkbox: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>, {}>;
 export default Checkbox;

package/dist/components/ComponentWrapper/ComponentWrapper.d.ts

@@ -3,12 +3,18 @@ import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface ComponentWrapperProps {
     /** The UI elements that will be wrapped by this component */
     children: React.ReactNode;
+    /** A class name for the `div` parent element. */
+    className?: string;
     /** Optional string to set the text for the component's description */
     descriptionText?: string;
     /** Optional string to set the text for a `Heading` component */
     headingText?: string;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: HelperErrorTextType;
+    /** Styles that target the helper text. */
+    helperTextStyles?: {
+        [key: string]: any;
+    };
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Optional string to populate the `HelperErrorText` for the error state
@@ -16,6 +22,8 @@ export interface ComponentWrapperProps {
     invalidText?: HelperErrorTextType;
     /** Sets invalid text in the error state. */
     isInvalid?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
 }
 export declare const ComponentWrapper: import("@chakra-ui/react").ChakraComponent<(props: React.PropsWithChildren<ComponentWrapperProps>) => JSX.Element, {}>;
 export default ComponentWrapper;

package/dist/components/Heading/Heading.d.ts

@@ -12,6 +12,8 @@ export interface HeadingProps {
     /** Optional size used to override the default styles of the semantic HTM
      * `<h>` elements */
     size?: HeadingSizes;
+    /** Optional prop used to remove default spacing */
+    noSpace?: boolean;
     /** Inner text of the `<h*>` element */
     text?: string;
     /** Optional URL that header points to; when `url` prop is passed to

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare type LogoNames = "bplBlack" | "bplWhite" | "cleverColor" | "cleverWhite" | "firstbookColor" | "firstbookColorNegative" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "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" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "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

@@ -1,10 +1,14 @@
 declare const _default: {
+    appleAppStoreBlack: string;
+    appleAppStoreWhite: string;
     bplBlack: string;
     bplWhite: string;
+    cleverBadgeColor: string;
     cleverColor: string;
     cleverWhite: string;
     firstbookColor: string;
     firstbookColorNegative: string;
+    googlePlayBlack: string;
     lpaBlack: string;
     lpaColor: string;
     lpaWhite: string;