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

package/CHANGELOG.md

@@ -8,6 +8,123 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+## 0.25.10 (February 22, 2022)
+
+### Adds
+
+- Exports Chakra's `Flex` and `Spacer` components.
+- Adds `TemplateAboveHeader` component in the set of "template" components.
+- Adds the `aboveHeader` prop to the `TemplateAppContainer` component to render a `TemplateAboveHeader` component immediately before the `TemplateHeader` component.
+
+### Breaking Changes
+
+- Renames the `Form` component's `"spacing"` prop to `"gap"` to be consistent with the `FormRow` and `FormField` components.
+- Renames the `FormSpacing` enum to `FormGaps`.
+
+### Changes
+
+- Passes an `onChange` prop to the `Select` component inside the `SearchBar` through its `selectProps` prop.
+- Adds snapshot tests for the `Tabs` component and better checks to warn the user that the `Tabs` is missing data if data wasn't passed as props or children.
+- Updates the `Form` component to warn developers when a child component in the `FormRow` component _is not_ a `FormField`.
+- Adds an `onSubmit` prop to the `Form` component.
+- Adds the `renderHeaderElement` prop to the `TemplateAppContainer` component. This prop is used to control whether the `TemplateAppContainer` component should render its own `<header>` HTML element through its `header` prop, or let the user pass in their own component that renders the `<header>` HTML element.
+- Updates the `Fieldset` and `RadioGroup` so the `children` prop is declared through `React.PropsWithChildren` rather than in their respective prop interfaces.
+- Adds snapshot tests for the `Accordion` component, as well as `id` props to the components within the `Accordion` so snapshot tests pass.
+- Passes an `id` to the `Icon` in the `Select` component.
+- Adds snapshot tests for the `Select` componnet.
+
+### Fixes
+
+- Fixes `id` propagation issues in the `SearchBar` component and its children DS components.
+- Fixing `Breadcrumbs` related logging issue with a CSS pseudo-selector and setting the `aria-label` to "Breadcrumbs". Adding an accessibility test that should fail when more than one `Breadcrumbs` component is rendered on a page since that landmark should only be rendered once on a web page.
+- Exports the `FullDateType` interface related to the `DatePicker` component.
+- Fixes and removes bad console logs from the `Pagination` and `List` components.
+- Fixes auto-generated `id`s in the `Tabs` component.
+- Fixes the Figma link for the `Hero` component.
+- Fixes `Card` component bug for passing styles to the `CardHeading` correctly.
+- Fixes the `Table` component so that a custom header text color of white does not visually hide row headers on a white background.
+
+### Updates
+
+- Updates the following packages: multiple `@storybook/...` packages, `autoprefixer`, `eslint-plugin-storybook`, `husky`, `lint-staged`, `semantic-release-slack-bot`, `storybook-addon-designs`.
+- Removed the following packages: `postcss`, `pretty-quick`.
+- Added `@chakra-ui/react`, `@chakra-ui/system`, `@emotion/react`, `@emotion/styled`, and `framer-motion` as "peerDependencies".
+- Updates the node version in Github Action workflows from Node v12 to Node v14.
+- Updates how `/dist/resources.scss` is created through gulp.
+
+## 0.25.9 (February 3, 2022)
+
+### Adds
+
+- Adds the `Logo` component.
+- Adds the `noBrandButtonType` boolean prop to the `SearchBar` component to render the `NoBrand` `Button` variant style.
+- Adds element-specific design tokens for `fontSizes` and `fontWeights`.
+- Adds the `StructuredContent` component.
+- Adds the `additionalImageStyles` and `additionalFigureStyles` props to the `Image` component to specifically target the `img` element's style and the `figure` HTML elements.
+- Adds the `Table` component.
+
+### Breaking Changes
+
+- Completely removes the `CardEdition` and `Input` components and related files and references.
+- Removes all references of the `BEM` CSS pattern.
+- Removes all references to logos from the `Icon` component.
+- Removes passing in text to the `HelperErrorText` component as children. Now, the `text` prop is used to render its text.
+- Renames the `SearchBar`'s `helperErrorText` prop to `helperText` to be consistent with other components.
+
+### Changes
+
+- Updates the `Form`, `HorizontalRule`, `Image` component by removing the native HTML attributes as props. This sets the props allowed to the list of props declared in their own files.
+- Minor change to the `Notification`'s heading component so it adds a proper id to `NotificationHeading`.
+- Updates the `Heading` component to use the DS `Link` component rather than Chakra's `Link` component.
+- Updates the style of links rendered in the `Heading` component so they are styled as standard links. The only exception is for links used in the `Card` component for the _full-click functionality_ feature. Otherwise, links in `Card` headings are styled as standard links.
+- Updates the `SearchBar` component to now be implemented with the `ComponentWrapper` component.
+- Removes the `ButtonTypes.SearchBar` variant style for the `Button` component. The style object is now set and passed directly to the `Button` component in the `SearchBar` component through the `additionalStyles` prop.
+- Renames `additionalStyles` prop to `additionalWrapperStyles` in the `Image` Component.
+- Updates the label text style in the disabled state of the `Toggle` component.
+- Updates the `Card` component so it gives a bottom margin to the `Image` component when the `imageAspectRatio` prop is set to `ImageRatios.Original`.
+- Updates the `TextInput` component to use a white background for `static`, `error` and `focus` states.
+- Updates `Select` component to use a white background for `static`, `error` and `focus` states.
+- Updates the `Template` component to use `s` (16px) spacing on the left and right sides of the main content area.
+- Updates the `HelperErrorText` component to allow HTML to be passed in as a string or HTML.
+- Updates how the `HelperErrorText` component renders text in the following components: `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`, `VideoPlayer`.
+- Updates the `HorizontalRule` component to use "100%" as the default value for the `width` prop.
+
+### Fixes
+
+- Fixes the styling of custom anchor elements when passed as a child in the `Link` component.
+- Allows the `TemplateAppContainer` and `TemplateFooter` components to use the `renderFooterElement` prop. This is `true` by default so it renders an HTML `footer` element. If a custom footer component that renders its own HTML `<footer>` must be used, then setting `renderFooterElement` to false will not render two nested `footer` elements.
+- Fixes the Storybook `level` prop value for the `Heading` component so it updates the component.
+- Removes wrapper divs around custom image elements used in the `Card` component. Also passes the aspect ratio as `ImageRatios.Original` when the custom image element is passed to the `Card` component.
+
+## 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.
+- Updates the `ComponentWrapper` component to allow the internal `HelperErrorText` component to get set in the invalid state. Also added tests for this component.
+
+### 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 +137,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
 
@@ -70,7 +188,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 ### 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.
+- 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)
 

package/README.md

@@ -250,7 +250,7 @@ Preview Storybook documentation sites are deployed to Tugboat QA for every pull
 
 ### React Component Documentation
 
-When actively developing components or fixing bugs, make sure that the related stories are created or updated. This means updating the respective `[component-name].stories.tsx` or `[component-name].stories.mdx` files. For more information on writing stories, check out the [Anatomy of a Story](https://github.com/NYPL/nypl-design-system/wiki/Anatomy-of-a-Story) wiki page.
+When actively developing components or fixing bugs, make sure that the related stories are created or updated. This means updating the respective `[component-name].stories.mdx` file. For information on how to write stories, check out the [Anatomy of a Story](https://github.com/NYPL/nypl-design-system/wiki/Anatomy-of-a-Story) wiki page.
 
 For stand-alone document pages in Storybook, you need to:
 

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

@@ -1,27 +1,27 @@
 import * as React from "react";
 import { ButtonTypes } from "./ButtonTypes";
-declare type ButtonElementType = "submit" | "button" | "reset";
+export declare type ButtonElementType = "submit" | "button" | "reset";
 interface ButtonProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
         [key: string]: any;
     };
-    /** Additional attributes passed to the button */
+    /** Additional attributes passed to the button. */
     attributes?: {
         [key: string]: any;
     };
-    /** The kind of button assigned through the `ButtonTypes` enum  */
+    /** The kind of button assigned through the `ButtonTypes` enum. */
     buttonType?: ButtonTypes;
     /** Additional className to use. */
     className?: string;
-    /** ID that other components can cross reference for accessibility purposes */
+    /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Adds 'disabled' property to the button */
+    /** 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 */
+    /** The action to perform on the `<button>`'s onClick function. */
     onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
     /** The HTML button type attribute. */
     type?: ButtonElementType;

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

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

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

@@ -5,7 +5,8 @@ import { ImageRatios, ImageSizes } from "../Image/ImageTypes";
 interface CardBaseProps {
     /** Optional value to control the alignment of the text and elements. */
     center?: boolean;
-    /** Optional value to render the layout in a row or column (default). */
+    /** Optional value to render the layout in a row or column.
+     * Default is `CardLayouts.Column`. */
     layout?: CardLayouts;
 }
 interface CardLinkBoxProps {
@@ -35,14 +36,15 @@ export interface CardProps extends CardBaseProps, CardLinkBoxProps {
     /** Text description of the image; to follow best practices for accessibility,
      * this prop should not be left blank if `imageSrc` is passed. */
     imageAlt?: string;
-    /** Optional value to control the aspect ratio of the `CardIage`; default
-     * value is `square`. */
+    /** Optional value to control the aspect ratio of the `CardImage`; default
+     * value is `ImageRatios.Square`. */
     imageAspectRatio?: ImageRatios;
     /** Optional boolean value to control the position of the `CardImage`. */
     imageAtEnd?: boolean;
     /** Custom image component used in place of DS `Image` component. */
     imageComponent?: JSX.Element;
-    /** Optional value to control the size of the `CardImage`. */
+    /** Optional value to control the size of the `CardImage`. Default value is
+     * `ImageSizes.Default`. */
     imageSize?: ImageSizes;
     /** The path to the image displayed within the `Card` component. */
     imageSrc?: string;

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

@@ -1,14 +1,15 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface CheckboxProps {
     /** className you can add in addition to 'input' */
     className?: string;
     /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** 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;
+    invalidText?: HelperErrorTextType;
     /** When using the Checkbox as a "controlled" form element, you can specify
      * the Checkbox's checked state using this prop.
      * Learn more about controlled and uncontrolled form fields:

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,16 +1,17 @@
 import * as React from "react";
 import { CheckboxGroupLayoutTypes } from "./CheckboxGroupLayoutTypes";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface CheckboxGroupProps {
     /** Any child node passed to the component. */
     children: React.ReactNode;
     /** Populates the initial value of the input */
     defaultValue?: string[];
     /** Optional string to populate the HelperErrorText for standard state */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** Optional string to populate the HelperErrorText for error state */
-    invalidText?: string;
+    invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' prop to the input when true. */
     isDisabled?: boolean;
     /** A`dds the 'aria-invalid' attribute to the input and

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

@@ -1,15 +1,21 @@
 import * as React from "react";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 export interface ComponentWrapperProps {
     /** The UI elements that will be wrapped by this component */
     children: React.ReactNode;
-    /** Optional string to set the text for a video description */
+    /** 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?: string;
+    helperText?: HelperErrorTextType;
     /** 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?: HelperErrorTextType;
+    /** Sets invalid text in the error state. */
+    isInvalid?: boolean;
 }
 declare function ComponentWrapper(props: React.PropsWithChildren<ComponentWrapperProps>): JSX.Element;
 export default ComponentWrapper;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { DatePickerTypes } from "./DatePickerTypes";
+import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
 import { TextInputRefType } from "../TextInput/TextInput";
-interface FullDateType {
+export interface FullDateType {
     /** Date object that gets returned for the onChange
      * function only for date ranges. */
     endDate?: Date;
@@ -33,7 +34,7 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     /** DatePicker date types that can be rendered. */
     dateType?: DatePickerTypes;
     /** Populates the `HelperErrorText` component in this component. */
-    helperText?: string;
+    helperText?: HelperErrorTextType;
     /** Populates the `HelperErrorText` component in the "From" `TextInput` component. */
     helperTextFrom?: string;
     /** Populates the `HelperErrorText` component in the "To" `TextInput` component. */
@@ -45,7 +46,7 @@ export interface DatePickerProps extends DatePickerWrapperProps {
     initialDateTo?: string;
     /** Populates the `HelperErrorText` error state for both "From"
      * and "To" input components. */
-    invalidText?: string;
+    invalidText?: HelperErrorTextType;
     /** Adds the 'disabled' property to the input element(s). */
     isDisabled?: boolean;
     /** Adds 'isInvalid' styling. */

package/dist/components/Fieldset/Fieldset.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
 interface FieldsetProps {
-    /** Children to render. Typically form-related components are used. */
-    children: React.ReactNode;
     /** Additional class name to add. */
     className?: string;
     /** ID that other components can cross reference for accessibility purposes */
@@ -21,5 +19,5 @@ interface FieldsetProps {
  * A wrapper component that renders a `fieldset` element along with a `legend`
  * element as its first child. Commonly used to wrap form components.
  */
-declare const Fieldset: React.FC<FieldsetProps>;
+declare const Fieldset: ({ children, className, id, isLegendHidden, isRequired, legendText, optReqFlag, }: React.PropsWithChildren<FieldsetProps>) => JSX.Element;
 export default Fieldset;

package/dist/components/Form/Form.d.ts

@@ -1,28 +1,29 @@
 import * as React from "react";
-import { FormSpacing } from "./FormTypes";
-export interface FormChildProps {
-    /** className to be applied to FormRow */
+import { FormGaps } from "./FormTypes";
+interface FormBaseProps {
+    /** className to be applied to FormRow, FormField, and Form */
     className?: string;
-    /** Spacing size (internal use) */
-    gap?: FormSpacing;
+    /** Optional spacing size; if omitted, the default `large` (2rem / 32px)
+     * spacing will be used; ```IMPORTANT: for general form layout, this prop
+     * should not be used``` */
+    gap?: FormGaps;
     /** ID that other components can cross reference (internal use) */
     id?: string;
 }
-export interface FormProps {
+export interface FormChildProps extends FormBaseProps {
+}
+export interface FormProps extends FormBaseProps {
     /** Optional form `action` attribute */
     action?: string;
-    /** Optional className you can add in addition to `form` */
-    className?: string;
-    /** Optional ID that other components can cross reference */
-    id?: string;
     /** Optional form `method` attribute */
     method?: "get" | "post";
-    /** Optional spacing size; if omitted, the default `large` (2rem / 32px) spacing will be used; ```IMPORTANT: for general form layout, this prop should not be used``` */
-    spacing?: FormSpacing;
+    /** Function to call for the `onSubmit` form event. */
+    onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 /** FormRow child-component */
 export declare function FormRow(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
 /** FormField child-component */
 export declare function FormField(props: React.PropsWithChildren<FormChildProps>): JSX.Element;
-/** main Form component */
-export default function Form(props: React.ComponentProps<"form"> & FormProps): JSX.Element;
+/** Main Form component */
+export default function Form(props: React.PropsWithChildren<FormProps>): JSX.Element;
+export {};

package/dist/components/Form/FormTypes.d.ts

@@ -1,2 +1,2 @@
-import { GridGaps as FormSpacing } from "../Grid/GridTypes";
-export { FormSpacing };
+import { GridGaps as FormGaps } from "../Grid/GridTypes";
+export { FormGaps };

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

@@ -7,15 +7,19 @@ export interface HeadingProps {
     };
     /** Optional className that appears in addition to `heading` */
     className?: string;
-    /** Optional size used to override the default styles of the semantic HTML `<h>` elements */
+    /** Optional size used to override the default styles of the semantic HTM
+     * `<h>` elements */
     displaySize?: HeadingDisplaySizes;
     /** Optional ID that other components can cross reference for accessibility purposes */
     id?: string;
-    /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed, `Heading` will default to `<h2>` */
+    /** Optional number 1-6 used to create the `<h*>` tag; if prop is not passed,
+     * `Heading` will default to `<h2>` */
     level?: HeadingLevels;
     /** Inner text of the `<h*>` element */
     text?: string;
-    /** Optional URL that header points to; when `url` prop is passed to `Heading`, a child `<a>` element is created and the heading text becomes an active link */
+    /** Optional URL that header points to; when `url` prop is passed to
+     * `Heading`, a child `<a>` element is created and the heading text becomes
+     * an active link */
     url?: string;
     /** Optional className for the URL when the `url` prop is passed */
     urlClass?: string;

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

@@ -5,10 +5,10 @@ export declare enum HeadingDisplaySizes {
     Callout = "callout"
 }
 export declare enum HeadingLevels {
-    One = 1,
-    Two = 2,
-    Three = 3,
-    Four = 4,
-    Five = 5,
-    Six = 6
+    One = "one",
+    Two = "two",
+    Three = "three",
+    Four = "four",
+    Five = "five",
+    Six = "six"
 }

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

@@ -1,5 +1,6 @@
-import * as React from "react";
+/// <reference types="react" />
 export declare type AriaLiveValues = "assertive" | "off" | "polite";
+export declare type HelperErrorTextType = string | JSX.Element;
 interface HelperErrorTextProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -21,9 +22,11 @@ interface HelperErrorTextProps {
     id?: string;
     /** Toggles between helper and invalid styling. */
     isInvalid?: boolean;
+    /** The text to display. */
+    text: HelperErrorTextType;
 }
 /**
  * Helper or Error text for forms
  */
-export default function HelperErrorText(props: React.PropsWithChildren<HelperErrorTextProps>): JSX.Element;
+export default function HelperErrorText({ additionalStyles, ariaAtomic, ariaLive, className, id, isInvalid, text, }: HelperErrorTextProps): JSX.Element;
 export {};

package/dist/components/HorizontalRule/HorizontalRule.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+/// <reference types="react" />
 export interface HorizontalRuleProps {
     /** Optional alignment value to align the horizontal rule to one side or the
      * other when the width is less than 100%. If omitted, the horizontal rule
@@ -13,7 +13,7 @@ export interface HorizontalRuleProps {
     height?: string;
     /** Optional width value. This value should be entered with the same
      * formatting as a CSS width attribute (ex. `50%`, `640px`, `20rem`). If
-     * omitted, the horizontal rule will have a default width of "auto". */
+     * omitted, the horizontal rule will have a default width of "100%". */
     width?: string;
 }
-export default function HorizontalRule(props: React.ComponentProps<"hr"> & HorizontalRuleProps): JSX.Element;
+export default function HorizontalRule(props: HorizontalRuleProps): JSX.Element;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes, LogoNames } from "./IconTypes";
+import { IconAlign, IconColors, IconNames, IconRotationTypes, IconSizes, IconTypes } from "./IconTypes";
 export interface IconProps {
     /** Optionally pass in additional Chakra-based styles. */
     additionalStyles?: {
@@ -7,7 +7,7 @@ export interface IconProps {
     };
     /** Aligns the icon. */
     align?: IconAlign;
-    /** className that appears in addition to "icon" */
+    /** Optional className that will be added to the parent element */
     className?: string;
     /** Overrides default icon color (black). */
     color?: IconColors;
@@ -19,14 +19,14 @@ export interface IconProps {
     /** ID that other components can cross reference for accessibility purposes */
     id?: string;
     /** The name of the icon you want to use. */
-    name?: IconNames | LogoNames;
+    name?: IconNames;
     /** Sets the icon size. */
     size?: IconSizes;
     /** For accessibility purposes, the text passed in the `title` prop gets
      * rendered in a `title` element in the SVG. This descriptive text is not
      * visible but is needed for screenreaders to describe the graphic. */
     title?: string;
-    /** Sets the icon variant type. */
+    /** FOR INTERNAL DS USE ONLY: the icon variant to display. */
     type?: IconTypes;
 }
 /**

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

@@ -5,8 +5,8 @@ declare const _default: {
     action_help_default: string;
     action_help_outline: string;
     action_launch: string;
+    alert_notification_important: string;
     arrow: string;
-    brooklyn: string;
     check: string;
     clock: string;
     close: string;
@@ -21,29 +21,9 @@ declare const _default: {
     file_type_spreadsheet: string;
     file_type_video: string;
     headset: string;
-    logo_brooklyn: string;
-    logo_nypl: string;
-    logo_nypl_negative: string;
-    logo_queens: string;
-    lpa_negative: string;
-    lpa_positive: string;
     minus: string;
-    nypl_circle_negative: string;
-    nypl_circle_positive: string;
-    nypl_full_lock_up_negative: string;
-    nypl_full_lock_up: string;
-    nypl_no_lion_negative: string;
-    nypl_no_lion_positive: string;
     plus: string;
-    queens_long: string;
-    queens_stacked: string;
-    schomburg_circle: string;
-    schomburg_positive: string;
     search: string;
-    simplye_black: string;
-    simplye_color: string;
-    snfl_negative: string;
-    snfl_positive: string;
     speaker_notes: string;
     utility_account_filled: string;
     utility_account_unfilled: 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",
@@ -71,26 +72,3 @@ export declare enum IconNames {
     UtilityHamburger = "utility_hamburger",
     UtilitySearch = "utility_search"
 }
-export declare enum LogoNames {
-    Brooklyn = "brooklyn",
-    LogoBrooklyn = "logo_brooklyn",
-    LogoNypl = "logo_nypl",
-    LogoNyplNegative = "logo_nypl_negative",
-    LogoQueens = "logo_queens",
-    LpaNegative = "lpa_negative",
-    LpaPositive = "lpa_positive",
-    NyplCircleNegative = "nypl_circle_negative",
-    NyplCirclePositive = "nypl_circle_positive",
-    NyplFullLockUpNegative = "nypl_full_lock_up_negative",
-    NyplFullLockUp = "nypl_full_lock_up",
-    NyplNoLionNegative = "nypl_no_lion_negative",
-    NyplNoLionPositive = "nypl_no_lion_positive",
-    QueensLong = "queens_long",
-    QueensStacked = "queens_stacked",
-    SchomburgCircle = "schomburg_circle",
-    SchomburgPositive = "schomburg_positive",
-    SimplyeBlack = "simplye_black",
-    SimplyeColor = "simplye_color",
-    SnflNegative = "snfl_negative",
-    SnflPositive = "snfl_positive"
-}

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

@@ -1,8 +1,8 @@
-import * as React from "react";
+/// <reference types="react" />
 import { ImageRatios, ImageSizes, ImageTypes } from "./ImageTypes";
 interface ImageWrapperProps {
     /** Optionally pass in additional Chakra-based styles. */
-    additionalStyles?: {
+    additionalWrapperStyles?: {
         [key: string]: any;
     };
     /** ClassName you can add in addition to 'image' */
@@ -13,6 +13,14 @@ interface ImageWrapperProps {
     imageSize?: ImageSizes;
 }
 export interface ImageProps extends ImageWrapperProps {
+    /** Optionally pass in additional Chakra-based styles only for the figure. */
+    additionalFigureStyles?: {
+        [key: string]: any;
+    };
+    /** Optionally pass in additional Chakra-based styles only for the image. */
+    additionalImageStyles?: {
+        [key: string]: any;
+    };
     /** Alternate text description of the image */
     alt: string;
     /** Custom image component */
@@ -28,5 +36,5 @@ export interface ImageProps extends ImageWrapperProps {
     /** The src attribute is required, and contains the path to the image you want to embed. */
     src: string;
 }
-export default function Image(props: React.ComponentProps<"img"> & ImageProps): JSX.Element;
+export default function Image(props: ImageProps): JSX.Element;
 export {};

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