@nypl/design-system-react-components 0.25.3 → 0.25.7

package/CHANGELOG.md

@@ -8,6 +8,70 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.7 (December 20, 2021)
+
+### Fixes
+
+- Removes `<=12.22` from node engine in `package.json` to reduce installation issues.
+
+## 0.25.6 (December 16, 2021)
+
+### Adds
+
+- Adds export statements for `ProgressIndicator` and `Slider` components to `index.ts`.
+- Adds `Blogs` variant to `Breadcrumbs` component.
+
+### Changes
+
+- Adds "(Required)" text to the placeholder in the `SearchBar` component when `isRequired` is true.
+
+## 0.25.5 (December 9, 2021)
+
+### Fixes
+
+- Updates the Github Action for the Github Pages deployment to use node 12 instead of the default node 16. This caused issues since we now set the node engine to `<=12.22`.
+
+## 0.25.4 (December 9, 2021)
+
+### Adds
+
+- Adds the `ProgressIndicator` component.
+- Adds documentation for using `NYPL Design Tokens`.
+- Adds the `ActionHelpDefault`, `ActionHelpOutline` and `ActionLaunch` icons to the `Icon` component.
+- Adds the DS `Slider` component based on the Chakra `Slider` and `RangeSlider` components.
+- Adds the `ButtonTypes.NoBrand` variant to the `Button` component.
+- Adds the `additionalStyles` prop to the `Breadcrumbs` component.
+
+### Changes
+
+- Updates the organization of SCSS files by deleting some files and combining others.
+- Updates `@chakra-ui/react` to version 1.7.1 and `@chakra-ui/system` to version 1.8.1.
+- Updates the `TextInput` component to now have `defaultValue` and `step` props.
+- Updates `Latest Version` number for `Image`, `Notification` and `Pagination` components.
+- Removes the Storybook "Knobs" addon.
+- Updates the margin for labels in the `DatePicker` component when it is in the "date range" state.
+- Updates the `DatePicker` component to have proper form spacing when in the "date range" state.
+- Updates the `Tabs` component to comply with linting rules -- no functional or visual changes were made.
+- Removes the `alignText` prop from the `Notification` component. Storybook was incorrectly displaying `alignText` as an available prop.
+
+### Fixes
+
+- Exports components and variables that were initially missed when they were added: `ColorVariants`, `Fieldset`, `IconAlign`, `StatusBadgeTypes`,
+- Fixes `SearchBar` by passing necessary props down to its `TextInput` through the `textInputProps` prop.
+- Fixes `DatePicker` component unit tests.
+- Removes the `showLabel` prop from the `SearchBar` component to prevent confusion. Labels for the `Select` and `TextInput` components are never shown but are added through the `aria-label` attribute.
+
+### Breaking Changes
+
+- Updates the breakpoint CSS variable names by adding the `--nypl` prefix and the SCSS variables by adding the `$nypl` prefix. Updates references throughout the codebase.
+- Changes the `Button`'s `disabled` prop to `isDisabled`.
+- Updates npm packages in `package.json`. Removes `cpy-cli`, `react-uid`, `react-is`, `stylelint` and related packages, and `ts-loader` (already added through TSDX). Updates other packages such as `sass-loader`, `prettier`, `jest`, `jest-axe`, and the majority of Storybook addon packages.
+
+### Deprecates
+
+- Deprecates the `Input` component. The `Input` component will be removed from the NYPL Design System React Library in the first release of January 2022.
+- Deprecates the `CardEdition` component. The `CardEdition` component will be removed from the NYPL Design System React Library in the first release of January 2022.
+
 ## 0.25.3 (November 18, 2021)
 
 ### Adds
@@ -49,6 +113,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 - Composes the DS `Card` component with Chakra. BEM related props `modifiers` and `blockname` have been removed. Replaces the `CardImageRatios` with `ImageRatios`. Removes the `CardImageSizes` enum.
 - Composes the DS `DatePicker` component with Chakra. Adds more tests, documentation, and examples. This component now uses the `Fieldset` component for the date range type, and better `Form` components for layout. Prop name changes: `dateRange` is now `isDateRange` and `required` is now `isRequired`. BEM related props `modifiers` and `blockname` have been removed. The "Required"/"Optional" text in the date range legend can now be hidden with the `showOptReqLabel` prop.
 - Composes the DS `SkeletonLoader` with Chakra's `Skeleton` component. BEM related prop `modifiers` has been removed. Chakra's default `Skeleton` styles have been updated with NYPL's theme.
+- Removes deprecated CSS variables. Now the DS repo only uses the CSS variables exposed by Chakra that contain the `--nypl` prefix.
 
 ## 0.25.2 (October 28, 2021)
 

package/README.md

@@ -19,11 +19,11 @@ Storybook documentation
 | 2.                | [Developing with NPM Link](#developing-with-npm-link)                               |
 | 3.                | [Using the Design System in Your Product](#using-the-design-system-in-your-product) |
 | 4.                | [Using Chakra UI Components](#using-chakra-ui-components)                           |
-| 5.                | [CDN](#cdn)                                                                         |
-| 6.                | [Accessibility Product Requirements](#accessibility-product-requirements)           |
-| 7.                | [Storybook](#storybook)                                                             |
-| 8.                | [Typescript Usage](#typescript-usage)                                               |
-| 9.                | [Unit Testing](#unit-testing)                                                       |
+| 5.                | [Storybook](#storybook)                                                             |
+| 6.                | [Typescript Usage](#typescript-usage)                                               |
+| 7.                | [Unit Testing](#unit-testing)                                                       |
+| 8.                | [Accessibility](#accessibility)                                                     |
+| 9.                | [CDN](#cdn)                                                                         |
 
 ## Contributing Quickstart
 
@@ -53,6 +53,12 @@ Information about active maintainers, how we run reviews, and more can be found
 
 Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branching convetions, component creation and update guidelines, testing methodoly, and documentation guidelines.
 
+### 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.
+
+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`).
+
 ## Developing with NPM Link
 
 To develop with a local version of the Design System:
@@ -220,12 +226,6 @@ If you need to reference a particular version you can do do by including the ver
 
 You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).
 
-## Accessibility Product Requirements
-
-The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
-
-NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
-
 ## Storybook
 
 The NYPL 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 NYPL 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.
@@ -366,3 +366,39 @@ Each snapshot file also includes a link to its [Jest Snapshot documentation](htt
 Through the [`@storybook/addon-jest`](https://www.npmjs.com/package/@storybook/addon-jest) plugin, we can see a component's suite of unit tests right Storybook. In the "Addons" panel, a "Test" tab will display all the tests for the current component and whether they pass or fail.
 
 After writing new tests, run `npm run test:generate-output` to create a new JSON file that is used by Storybook. This JSON file contains all the test suites for all the components and Storybook picks this up and automatically combines a component with its relevant unit tests. Make sure to commit this file although new builds on Github Pages will recreate this file for the production Storybook instance.
+
+## Accessibility
+
+### Development and Storybook
+
+The NYPL Design System is built with accessibility in mind. By using Chakra UI as our foundational base, the custom DS components built with Chakra have accessibility concerns already implemented. On top of built-in accessible elements, DS components internally work to link labels with input elements, to add correct `aria-*` attributes, to visually hide text but still associate it with the correct element for titles and descriptions, to auto-generate a random `id` attribute if none was passed, and much more.
+
+We make use of:
+
+- `eslint-plugin-jsx-a11y` for finding accessibility errors through linting and through IDE environments.
+- `jest-axe` for running [`axe-core`](https://github.com/dequelabs/axe-core) on _every_ component's unit test file. This is part of the automated tests that run in Github Actions through the `npm test` command.
+- `@storybook/addon-a11y` for real-time accessibility testing in the browser through Storybook. _Every_ component has a tab that displays violations, passes, and incomplete checks performed by `axe-core`.
+
+If applicable, DS components have section(s) on accessibility in their Storybook documentation. For example, in the `Slider`'s [Storybook file](/src/components/Slider/Slider.stories.mdx), there are two "Accessibility" sections for each of the two `Slider` types, "single" and "range". This gives an explanation on additional changes we made to make the combination of elements in the `Slider` component accessible.
+
+### Product Requirements
+
+The NYPL Design System provides accessible stories, but real live data can necessitate additional accessibility requirements beyond what we're committed to in our generic, extensible components. To ensure your products' final result is accessible, please adhere to the accessibility requirements put together by NYPL's accessibility coordinator on [Metronome](http://themetronome.co/).
+
+NYPL's Metronome instance is currently password protected. For access to Metronome, please contact NYPL's UX team or Design System team.
+
+## CDN
+
+You can also use the Design System styles in your project through the `unpkg` CDN:
+
+```jsx
+<link href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css">
+```
+
+If you need to reference a particular version you can do do by including the version number in the URL:
+
+```jsx
+<link href="https://unpkg.com/@nypl/design-system-react-components@0.9.1/dist/styles.css">
+```
+
+You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -5,6 +5,10 @@ export interface BreadcrumbsDataProps {
     text: string | React.ReactNode;
 }
 export interface BreadcrumbProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
     /** Breadcrumb links as an array */
     breadcrumbsData: BreadcrumbsDataProps[];
     /** className you can add in addition to 'input' */

package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts

@@ -1,4 +1,5 @@
 export declare enum ColorVariants {
+    Blogs = "blogs",
     BooksAndMore = "booksAndMore",
     Locations = "locations",
     Research = "research",

package/dist/components/Button/Button.d.ts

@@ -12,19 +12,22 @@ interface ButtonProps {
     };
     /** The kind of button assigned through the `ButtonTypes` enum  */
     buttonType?: ButtonTypes;
-    /** Additional className for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
+    /** Additional className to use. */
     className?: string;
-    /** Adds 'disabled' property to the button */
-    disabled?: boolean;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Trigger the Button's action through the `mouseDown` event handler instead of `onClick`. `false` by default. */
+    /** Adds 'disabled' property to the button */
+    isDisabled?: boolean;
+    /** Trigger the Button's action through the `mouseDown` event handler instead
+     * of `onClick`. `false` by default. */
     mouseDown?: boolean;
     /** The action to perform on the `<button>`'s onClick function */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
-    /** The html button attribute */
+    /** The HTML button type attribute. */
     type?: ButtonElementType;
 }
-/** Renders a simple `button` element with custom classes and modifiers. */
+/**
+ * Renders a simple `button` element with custom variant styles.
+ */
 declare function Button(props: React.PropsWithChildren<ButtonProps>): JSX.Element;
 export default Button;

package/dist/components/Button/ButtonTypes.d.ts

@@ -4,5 +4,6 @@ export declare enum ButtonTypes {
     Callout = "callout",
     Pill = "pill",
     Link = "link",
-    SearchBar = "searchBar"
+    SearchBar = "searchBar",
+    NoBrand = "noBrand"
 }

package/dist/components/Card/Card.d.ts

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { CardLayouts } from "./CardTypes";
 import Heading from "../Heading/Heading";
-import { ImageProps } from "../Image/Image";
 import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
@@ -21,10 +20,6 @@ interface CardActionsProps extends CardBaseProps {
      * the card actions element */
     topBorder?: boolean;
 }
-interface CardImageProps extends CardBaseProps, ImageProps {
-    /** Optional boolean value to control the position of the `CardImage`. */
-    imageAtEnd?: boolean;
-}
 export interface CardProps extends CardBaseProps, CardLinkBoxProps {
     /** Optional hex color value used to set the card background color. */
     backgroundColor?: string;
@@ -52,28 +47,8 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
     /** The path to the image displayed within the `Card` component. */
     imageSrc?: string;
 }
-/**
- * The CardImage component is used internally in the `Card` component. It
- * renders an `Image` component but with overriding styles specific to the
- * `Card` component.
- */
-export declare function CardImage(props: React.ComponentProps<"img"> & CardImageProps): JSX.Element;
 export declare const CardHeading: typeof Heading;
 export declare function CardContent(props: React.PropsWithChildren<{}>): JSX.Element;
 export declare function CardActions(props: React.PropsWithChildren<CardActionsProps>): JSX.Element;
-/**
- * If `mainActionLink` is passed, then this adds Chakra's `LinkBox` wrapper
- * component to the entire `Card` component. This works together with the
- * `CardLinkOverlay` component to provide a clickable overlay.
- */
-export declare function CardLinkBox({ children, mainActionLink, }: React.PropsWithChildren<CardLinkBoxProps>): JSX.Element;
-/**
- * If `mainActionLink` is passed, then this adds Chakra's `LinkOverlay` around
- * text that should be linked, in this case the `CardHeading` text. This works
- * together with the `CardLinkBox` component to provide a clickable overlay to
- * the `Card` component while still allowing links in the `CardActions` to be
- * clickable.
- */
-export declare function CardLinkOverlay({ children, mainActionLink, }: React.PropsWithChildren<CardLinkBoxProps>): JSX.Element;
 export default function Card(props: React.PropsWithChildren<CardProps>): JSX.Element;
 export {};

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

@@ -2,6 +2,9 @@ declare const _default: {
     accessibility_full: string;
     accessibility_partial: string;
     action_check_circle: string;
+    action_help_default: string;
+    action_help_outline: string;
+    action_launch: string;
     arrow: string;
     brooklyn: string;
     check: string;

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

@@ -44,6 +44,9 @@ export declare enum IconNames {
     AccessibilityFull = "accessibility_full",
     AccessibilityPartial = "accessibility_partial",
     ActionCheckCircle = "action_check_circle",
+    ActionHelpDefault = "action_help_default",
+    ActionHelpOutline = "action_help_outline",
+    ActionLaunch = "action_launch",
     Arrow = "arrow",
     Check = "check",
     Clock = "clock",

package/dist/components/Notification/Notification.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { NotificationTypes } from "./NotificationTypes";
 interface BaseProps {
-    /** Optional prop to control text alignment of the `Notification` content */
+    /** Optional prop to control text alignment in `NotificationContent` */
     alignText?: boolean;
     /** Optional prop to control horizontal alignment of the `Notification` content */
     centered?: boolean;
@@ -11,7 +11,9 @@ interface BaseProps {
      * visibility of an applicable icon. */
     notificationType?: NotificationTypes;
 }
-export interface NotificationProps extends BaseProps {
+declare type BasePropsWithoutAlignText = Omit<BaseProps, "alignText">;
+declare type BasePropsWithoutCentered = Omit<BaseProps, "centered">;
+export interface NotificationProps extends BasePropsWithoutAlignText {
     /** Additional `className` to add.  */
     className?: string;
     /** Optional prop to control whether a `Notification` can be dismissed
@@ -31,11 +33,11 @@ export interface NotificationProps extends BaseProps {
 /**
  * NotificationHeading child-component.
  */
-export declare function NotificationHeading(props: React.PropsWithChildren<BaseProps>): JSX.Element;
+export declare function NotificationHeading(props: React.PropsWithChildren<BasePropsWithoutAlignText>): JSX.Element;
 /**
  * NotificationContent child-component.
  */
-export declare function NotificationContent(props: React.PropsWithChildren<BaseProps>): JSX.Element;
+export declare function NotificationContent(props: React.PropsWithChildren<BasePropsWithoutCentered>): JSX.Element;
 /**
  * Component used to present users with three different levels of notifications:
  * standard, announcement, and warning.

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { ProgressIndicatorSizes, ProgressIndicatorTypes } from "./ProgressIndicatorTypes";
+export interface ProgressIndicatorProps {
+    /** Flag to render the component in a dark background. */
+    darkMode?: boolean;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Whether the `ProgressIndicator` should be linear or circular. */
+    indicatorType?: ProgressIndicatorTypes;
+    /** Whether the progress animation should display because the `value` prop is
+     * not known. When this is set to `true`, the `value` prop will be ignored. */
+    isIndeterminate?: boolean;
+    /** The text to display in an HTML `label` element. */
+    labelText: string;
+    /** Visually show or hide the label text. When set to `false`, then the label
+     * text will be added to the parent component as its `aria-label` attribute. */
+    showLabel?: boolean;
+    /** The size of the linear or circular progress. */
+    size?: ProgressIndicatorSizes;
+    /** A number between 0 to 100 that defines the progress' value. */
+    value?: number;
+}
+/**
+ * A component that displays a progress status for any task that takes a long
+ * time to complete or consists of multiple steps. Examples include downloading,
+ * uploading, or processing.
+ */
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

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

@@ -0,0 +1,8 @@
+export declare enum ProgressIndicatorSizes {
+    Default = "default",
+    Small = "small"
+}
+export declare enum ProgressIndicatorTypes {
+    Circular = "circular",
+    Linear = "linear"
+}

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

@@ -6,7 +6,10 @@ interface SelectProps {
 }
 interface TextInputProps {
     labelText: string;
+    name: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     placeholder: string;
+    value?: string;
 }
 export interface SearchBarProps {
     /** Adds 'action' property to the `form` element. */
@@ -36,9 +39,6 @@ export interface SearchBarProps {
     onSubmit: (event: React.FormEvent) => void;
     /** Required props to render a `Select` element. */
     selectProps?: SelectProps | undefined;
-    /** Will be used to visually display the label text for this
-     * `SearchBar` component. False by default. */
-    showLabel?: boolean;
     /** Custom input element to render instead of a `TextInput` element. */
     textInputElement?: JSX.Element;
     /** Required props to render a `TextInput` element. */

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+export interface SliderProps {
+    /** Additional class name for the Slider component. */
+    className?: string;
+    /** The initial value for the single `Slider` or an array of two number
+     * values for the `isRangeSlider` case.
+     */
+    defaultValue?: number | number[];
+    /** Optional string to populate the HelperErrorText for standard state */
+    helperText?: string;
+    /** ID that other components can cross reference for accessibility purposes. */
+    id?: string;
+    /** Optional string to populate the `HelperErrorText` for the error state
+     * when `isInvalid` is true. */
+    invalidText?: string;
+    /** Adds the 'disabled' state to the slider and text input(s) when true. */
+    isDisabled?: boolean;
+    /** Adds the 'invalid' state to the slider and text input(s) when true. */
+    isInvalid?: boolean;
+    /** Offers the ability to render a slider with one value or
+     * a range slider with two values. */
+    isRangeSlider?: boolean;
+    /** Adds the 'required' attribute to the input(s) when true. */
+    isRequired?: boolean;
+    /** The `Slider`'s label. In the default single slider, this will be linked to
+     * the only `TextInput` component. In the range slider, this will be linked to
+     * the first `TextInput` component. If `showLabel` is false, then this value
+     * will be set in the `Slider`'s `aria-label` attribute. */
+    labelText: string;
+    /** Maximum value allowed. */
+    max?: number;
+    /** Minimum value allowed. */
+    min?: number;
+    /** The name prop indicates into which form this component belongs to. */
+    name?: string;
+    /** Callback function that gets the value(s) selected. */
+    onChange?: (val: number | number[]) => void;
+    /** Whether or not to display the "Required"/"Optional" text in the label text. */
+    optReqFlag?: boolean;
+    /** Offers the ability to hide the `TextInput` boxes. */
+    showBoxes?: boolean;
+    /** Offers the ability to hide the helper/invalid text. */
+    showHelperInvalidText?: boolean;
+    /** Offers the ability to show the label onscreen or hide it. Refer
+     * to the `labelText` property for more information. */
+    showLabel?: boolean;
+    /** Offers the ability to hide the static min/max values. */
+    showValues?: boolean;
+    /** The amount to increase or decrease when using the slider thumb(s). */
+    step?: number;
+}
+/**
+ * The `Slider` component renders a singular value slider or a range slider
+ * with a min and max value. The value(s) can be updated through the slider
+ * thumb(s) or through the text input(s) elements.
+ */
+export default function Slider(props: React.PropsWithChildren<SliderProps>): JSX.Element;

package/dist/components/Tabs/Tabs.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { TabList, Tab, TabPanels, TabPanel } from "@chakra-ui/react";
+import { Tab, TabList, TabPanels, TabPanel } from "@chakra-ui/react";
 export interface TabsContentDataProps {
     label: string;
     content: string | React.ReactNode;

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

@@ -11,6 +11,8 @@ export interface InputProps {
     };
     /** A class name for the TextInput parent div. */
     className?: string;
+    /** The starting value of the input field. */
+    defaultValue?: string;
     /** Populates the HelperErrorText for the standard state */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
@@ -26,6 +28,8 @@ export interface InputProps {
     /** Provides text for a `Label` component if `showLabel` is set to true;
      * populates an `aria-label` attribute if `showLabel` is set to false. */
     labelText: string;
+    /** Used to reference the input element in forms. */
+    name?: string;
     /** The action to perform on the `input`/`textarea`'s onChange function  */
     onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     /** Populates the placeholder for the input/textarea elements */
@@ -38,6 +42,8 @@ export interface InputProps {
     /** Offers the ability to show the "Required"/"Optional" label onscreen or
      * hide it. True by default. */
     showOptReqLabel?: boolean;
+    /** The amount to increase or decrease when using the number type. */
+    step?: number;
     /** HTML Input types as defined by MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input */
     type?: TextInputTypes;
     /** Populates the value of the input/textarea elements */