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

package/CHANGELOG.md

@@ -8,6 +8,34 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.8 (January 6, 2022)
+
+### Adds
+
+- Adds `embedCode` prop to `VideoPlayer` component.
+- Adds export statements for `ProgressIndicatorSizes` and `ProgressIndicatorTypes` enums to `index.ts`.
+- Adds `ExtraSmall` and `ExtraExtraSmall` size variants to the `Image` component.
+- Adds `ExtraSmall` and `ExtraExtraSmall` size variants for `CardImage` in the `Card` component.
+- Adds `AlertNotificationImportant` icon to `Icon` component.
+- Adds `Toggle` component.
+- Adds `xxxs` (2px) spacing option to DS design tokens.
+- Adds `external` variant to `Link` component.
+
+### Changes
+
+- Changes category for `Table` component from `Basic Elements` to `Page Layout`.
+- Updates the background color for the `Locations` variant in the `Breadcrumbs` component from `section.locations.secondary` to `section.locations.primary`.
+- Updates the `Notification` component to show the `AlertNotificationImportant` icon for the `Standard` variant.
+- Reduces the bottom margin on labels and legends for form components from "16px" to "8px", or "s" to "sx" in Chakra-theme variables.
+- Updates docs for Chakra `Grid` component to use theme object values rather than CSS variables.
+- Updates the spacing in the `Notification` component to improve the alignment of the icon and text elements.
+- Updates the `Notification` component to optionally display/hide the `Icon` in the heading or content area.
+
+### Fixes
+
+- Fixes two bugs in the `Slider`: (1) unable to call the `onChange` function when it is not passed, and (2) fixing the default array value for the range slider so it mounts properly.
+- Updates the `Select` component's controlled state so that an initial empty `value` prop is acceptable.
+
 ## 0.25.7 (December 20, 2021)
 
 ### Fixes
@@ -20,6 +48,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 - Adds export statements for `ProgressIndicator` and `Slider` components to `index.ts`.
 - Adds `Blogs` variant to `Breadcrumbs` component.
+- Adds the `placeholder` prop to the `Select` component.
 
 ### Changes
 

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

@@ -5,6 +5,7 @@ declare const _default: {
     action_help_default: string;
     action_help_outline: string;
     action_launch: string;
+    alert_notification_important: string;
     arrow: string;
     brooklyn: string;
     check: string;

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

@@ -46,6 +46,7 @@ export declare enum IconNames {
     ActionCheckCircle = "action_check_circle",
     ActionHelpDefault = "action_help_default",
     ActionHelpOutline = "action_help_outline",
+    AlertNotificationImportant = "alert_notification_important",
     ActionLaunch = "action_launch",
     Arrow = "arrow",
     Check = "check",

package/dist/components/Image/ImageTypes.d.ts

@@ -12,7 +12,9 @@ export declare enum ImageSizes {
     Default = "default",
     Large = "large",
     Medium = "medium",
-    Small = "small"
+    Small = "small",
+    ExtraSmall = "xsmall",
+    ExtraExtraSmall = "xxsmall"
 }
 export declare enum ImageTypes {
     Default = "default",

package/dist/components/Link/LinkTypes.d.ts

@@ -3,5 +3,6 @@ export declare enum LinkTypes {
     Backwards = "backwards",
     Button = "button",
     Default = "default",
+    External = "external",
     Forwards = "forwards"
 }

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

@@ -29,6 +29,8 @@ export interface NotificationProps extends BasePropsWithoutAlignText {
     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.

package/dist/components/Select/Select.d.ts

@@ -26,6 +26,8 @@ export interface SelectProps {
     /** The callback function to get the selected value.
      * Should be passed along with `value` for controlled components. */
     onChange?: (event: React.FormEvent) => void;
+    /** Placeholder text in the select element. */
+    placeholder?: string;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Offers the ability to show the select's label onscreen or hide it. Refer

package/dist/components/Toggle/Toggle.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { ToggleSizes } from "./ToggleSizes";
+export interface ToggleProps {
+    /** Optionally pass in additional Chakra-based styles. */
+    additionalStyles?: {
+        [key: string]: any;
+    };
+    /** Used for uncontrolled scenarios.  Sets the state of the Toggle when the page first loads.
+     *   If true, the toggle will be initially set to the "on" position. */
+    defaultChecked?: boolean;
+    /** 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;
+    /** When using the Toggle as a "controlled" form element, you can specify
+     * the Toggle's checked state using this prop.
+     * Learn more about controlled and uncontrolled form fields:
+     * https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ */
+    isChecked?: boolean;
+    /** Adds the 'disabled' and `aria-disabled` attributes to the input when true.
+     * This also makes the text italic and color scheme gray. */
+    isDisabled?: boolean;
+    /** Adds the 'aria-invalid' attribute to the input when true. This also makes
+     * the color theme "NYPL error" red for the button and text. */
+    isInvalid?: boolean;
+    /** Adds the 'required' attribute to the input when true. */
+    isRequired?: boolean;
+    /** The checkbox's label. This will serve as the text content for a `<label>`
+     * element if `showlabel` is true, or an "aria-label" if `showLabel` is false. */
+    labelText: string;
+    /** The name prop indicates into which group of checkboxes this checkbox
+     * belongs. If none is specified, 'default' will be used */
+    name?: string;
+    /** The action to perform on the `<input>`'s onChange function  */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Offers the ability to hide the helper/invalid text. */
+    size?: ToggleSizes;
+}
+export declare const onChangeDefault: () => void;
+/**
+ * Component that renders Chakra's `Switch` component along with NYPL defaults.
+ */
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+export default Toggle;

package/dist/components/Toggle/ToggleSizes.d.ts

@@ -0,0 +1,4 @@
+export declare enum ToggleSizes {
+    Large = "large",
+    Small = "small"
+}

package/dist/components/VideoPlayer/VideoPlayer.d.ts

@@ -7,19 +7,21 @@ export interface VideoPlayerProps {
     className?: string;
     /** Optional string to set the text for a video description */
     descriptionText?: string;
+    /** Optional string to set a code snippet provided by YouTube or Vimeo; the `videoPlayer` component will accept the `embedCode` prop or the `videoId` and `videoType` props */
+    embedCode?: string;
     /** Optional string to set the text for a `Heading` component */
     headingText?: string;
     /** Optional string to set the text for a `HelperErrorText` component */
     helperText?: string;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added */
+    /** Optional title to be added to the `<iframe>` element for improved accessibility; this title should describe in a few words the content of the video; if omitted, a generic title will be added; if a `title` attribute is already present in the `embedCode` prop, this prop will be ignored */
     iframeTitle?: string;
     /** Offers the ability to hide the helper/invalid text. */
     showHelperInvalidText?: boolean;
     /** Required YouTube or Vimeo video ID. This value can be pulled from a video's YouTube or Vimeo URL. */
-    videoId: string;
+    videoId?: string;
     /** Required. Used to specify which video service is being used. */
-    videoType: VideoPlayerTypes;
+    videoType?: VideoPlayerTypes;
 }
 export default function VideoPlayer(props: React.PropsWithChildren<VideoPlayerProps>): JSX.Element;