@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

package/CHANGELOG.md

@@ -1,1399 +0,0 @@
-# Changelog
-
-All notable changes to this project will be documented in this file.
-
-The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
-Currently, this repo is in Prerelease. When it is released, this project will adhere to [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
-========
-
-## Prerelease
-
-## 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
-
-- Adds `max`, `maxLength`, `min`, and `onClick` props to the `TextInput` component.
-- Adds the `SkipNavigation` component and adds this component inside the `TemplateAppContainer` component. The `SkipNavigation` component renders accessible links to the main content of a page and accessibility information on NYPL.org.
-- Adds the `ButtonGroup` component for `Button` layout.
-
-### Updates
-
-- Updates how styles are passed down to internal components in `Card`, `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Hero`, `Notification`, `Pagination`, `Radio`, `RadioGroup`, `SearchBar`, and `Slider`. This is based on removing the `additionalStyles` prop and passing down styles to the `__css` prop.
-- Updates how the `id` is passed in the `DatePicker`'s custom `TextInput` component.
-- Updates how some prop values are passed. Instead of using a Typescript enum object, a Typescript type with the string literal values is used. This still restricts the accepted values for certain props. The enum to string literal type conversion includes the following variables: `AccordionType`, `BreadcrumbsTypes`, `ButtonTypes`, `DatePickerTypes`, `FormGaps` (deleted), `GridGaps`, `HeadingSizes`, `HeadingLevels`, `HeroTypes`, `IconAlign`, `IconTypes`, `IconRotationTypes`, `IconColors`, `IconSizes`, `IconNames`, `LinkTypes`, `ListTypes`, `LogoColors`, `LogoSizes`, `LogoNames`, `NotificationTypes`, `SelectTypes`, `LabelPositions`, `SkeletonLoaderImageRatios`, `StatusBadgeTypes`, `StructuredContentImagePosition`, `TextSizes`, `TextInputTypes`, `TextInputFormats`, `TextInputVariants`, `ToggleSizes`, `VideoPlayerTypes`, `VideoPlayerAspectRatios`, and `LayoutTypes`.
-- Updates the spacing for caption and credit text from `margin-bottom` to `margin-top` in `Image` component
-- Updates how the `DatePicker` and `Slider` components internally use `TextInput`.
-- Updates how the `Pagination` component internally uses `Link`.
-- Updates how the `Tabs` component internally uses `Button`.
-- Updates how images are passed to the `Hero` component. Instead of `imageAlt` and `imageSrc` props, now an object must be passed to the `imageProps` prop.
-- Updates the values for the `name` prop for the `Icon` and `Logo` components.
-- Updates the `Table` component to allow JSX elements to be rendered in the data cells.
-
-### Removals
-
-- Removes the `additionalStyles` attributes from the `Breadcrumbs`, `Button`, `Heading`, `HelperErrorText`, `Icon`, `Link`, `List`, `Logo`, `Select`, `TextInput`, and `Toggle` components.
-- Removes `getVariant` and `getStorybookEnumValues` helper functions.
-- Removes all Typescript enum objects in favor of string literal types.
-- Remove the bottom margin attribute that is applied to the parent element for the `Select` component.
-- Removes the `attributes` prop from: `Button`, `Link`, and `TextInput` components.
-
-## 0.27.0 (April 27, 2022)
-
-### Adds
-
-- Adds two patterns for rendering the updated `Modal` component. This is still an ongoing work-in-progress as the `Modal` gets finalized but it is now using Chakra under-the-hood.
-- Adds `@chakra-ui/storybook-addon` so stories automatically pick up the Chakra-based NYPL theme.
-
-### Updates
-
-- Updates React and React DOM to version 17.
-- Updates Chakra packages `@chakra-ui/react` and `@chakra-ui/system`.
-- Updates the `HelperErrorText` styling to correctly display when used with a `Select` element with a `labelPosition` of inline.
-
-### Removals
-
-- Removes the following packages: `@storybook/addon-queryparams` and `react-router-dom`.
-
-## 0.26.1 (April 22, 2022)
-
-### Updates
-
-- Updates storybook URL from /reservoir/v0_26 to /reservoir/v0.
-
-### Fixes
-
-- Adds updated package-lock file to fix bad installations.
-
-## 0.26.0 (April 22, 2022)
-
-### Adds
-
-- Exports the `useCarouselStyles` and `useWindowSize` hooks and adds documentation for all hooks in Storybook.
-- Adds additional semantic design tokens from `fontWeights` and `fontSizes` to the `useNYPLTheme` hook.
-- Adds a warning if a required `id` prop is not passed to one of the "Form Elements": `Button`, `Checkbox`, `CheckboxGroup`, `DatePicker`, `Fieldset`, `Form`, `Label`, `ProgressIndicator`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`.
-- Adds the `isRequired` prop to the `Label` component.
-- Adds the `labelPosition` prop to the `Select` component, so that the label can be styled inline with the select input.
-- Adds Chakra's "Style Props" functionality to every Reservoir component. For composed components, such as the `SearchBar` component, these style props are passed to wrapper element. This update also updates the snapshot tests for every component.
-- Adds the functionality to pass all valid HTML attributes to a Reservoir component, such as `data-*` props.
-- Adds semantic design tokens for `spacing` theme object.
-- Adds the `isAlignedRightActions` prop to the `Card` component to render `CardActions` components to the right of the main content area. This only works for the `Card`'s row layout.
-- Adds styles to target native HTML basic elements inside the `StructuredContent` component.
-- Adds `Reservoir` branding to Storybook.
-
-### Changes
-
-- Updates the hex color value for `ui.gray.light-cool`, `ui.disabled.primary` and `section.blogs.primary`.
-- Updates the default background color used in the `Accordion` component.
-- Updates the default background color used in the `Hero` component.
-- Updates the background color used in the `SkeletonLoader` component.
-- Updates the background color used in the `VideoPlayer` component.
-- Updates the background colors used in the `Tabs` component.
-- Updates the colors for "secondary" and "pill" variants of the `Button` component.
-- Updates the color values used in the `disabled` state for the `Checkbox`, `Radio`, `Select`, `Slider`, `TextInput` and `Toggle` components.
-- Updates the `Checkbox` component to use "3px" for the border radius.
-- Makes the id prop required for all "Form Elements".
-- Updates how the `Required` text in the `Label` and `Fieldset` components is displayed. Instead of floating to the right of the label and legend elements, it is now displayed inlined as `(Required)`.
-- Renames the `optReqFlag` prop to `showRequiredLabel` in the `CheckboxGroup`, `Fieldset`, `RadioGroup`, and `Slider` components.
-- Renames the `showOptReqLabel` prop to `showRequiredLabel` in the `DatePicker`, `Select`, and `TextInput` components.
-- Uses the design token "text.caption" variable for the `Notification`'s font size.
-- Updates the styling for the `HelperErrorText` to be consistent for all components that use it
-- Refactors the `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Fieldset`, `Label`, `Radio`, `RadioGroup`, `Select`, `Slider`, `TextInput`, and `Toggle` to better use the updated `HelperErrorText` styling.
-- Renames the `Card`'s `center` prop to `isCentered` and `border` prop to `isBordered`.
-- Renames the `SkeletonLoader` component's `border` prop to `isBordered`.
-- Refactors the DS `RadioGroup` component so it internally implements Chakra's `RadioGroup` component rather than the `useRadioGroup` hook. The "uncontrolled" version of Chakra's `RadioGroup` is not working and will be investigated in the future. It is recommended to use the controlled component pattern.
-- Updates the `Fieldset` component to render the "Optional"/"Required" text in the `legend` element as pseudo CSS in the `::after` rule.
-- Passes the `isRequired` prop in the `RadioGroup` and `CheckboxGroup` to the `Fieldset` wrapper component.
-- Updates the `focus` styles for the `Radio`, `Select` and `TextInput` components.
-- Updates the references of the `<dl>` element from "Definition" to "Description", as that's the official name in HTML5. This affects the `List` element and its `ListTypes.Description` enum value.
-- Updates styles for `React Datepicker`'s calendar popup in the `DatePicker` component.
-- Updates storybook URL from /storybook-static/ to /reservoir/v0_26.
-- Updates all references to "design system" in the Storybook documentation to include "Reservoir" in the name of the design system.
-- Updates language on the `Welcome` page.
-
-### Removals
-
-- Removes the default `Optional` text displayed in the `Label` and `Fieldset` components.
-- Removes the `optReqFlag` prop in the `Label` component.
-- Removes the default autogenerated id for all components, as well as the `uuid` package.
-- Removes the `HorizontalRule`'s `height` and `width` props from its prop interface in favor of Chakra's style props; the default values are still set for `height` and `width`.
-
-### Fixes
-
-- Fixes how the `Button` component gets rendered inside the `Form` and `FormField` component layout.
-- Fixes how the `Select` component is controlled in the `SearchBar` component.
-
-## 0.25.13 (April 1, 2022)
-
-### Adds
-
-- Adds a `contentId` prop to the `TemplateAppContainer` component and adds an `id` prop to the `TemplateContent` component. The default value of these `id`s are both set to "mainContent" and it will render as an attribute on the `main` HTML element. This is used as the target for the skip navigation link in consuming applications.
-- Adds an `Accessibility Guide` section to Storybook with a "Skip Navigation" page.
-- Adds the `isFullWidth` prop to the `CheckboxGroup` and `RadioGroup` components. This sets the wrapper element to be full width for labels that need to span its container.
-- Adds an optional key – `accordionType` to the `Accordion`'s `contentData` prop, which allows users to switch the background color of the `Accordion`'s button.
-- Created new `LayoutTypes` enum for row and column layouts.
-- Adds the value "Default" to the `IconSizes` enum.
-
-### Changes
-
-- Updates Storybook's sidebar categories and documentation.
-- Updates the `Image`'s caption font size to "12px" (`text.tag`).
-- Updates the `Checkbox`'s and `Radio`'s `labelText` prop to accept strings and JSX Elements.
-- Updates the `Toggle`'s internal styling for the default and small sizes.
-- Updates the `Accordion` button's background color when expanded, adds a border color when hovered over, and adjusts the padding.
-- Updates the `CardImage`'s margin bottom in the row and column layouts for mobile to be the same.
-- Updates the `CardImage` to have width 100% on mobile regardless of size.
-- Updates all the console warnings with consistent NYPL branding prefix label.
-- Renames the `Accordion` prop `contentData` to `accordionData`.
-- Renames the `Breadcrumbs` prop `colorVariant` to `breadcrumbsType`.
-- Renames the `Card` prop `center` to `isCentered`.
-- Updates the `Card` prop `layout` to use the `LayoutTypes` enum instead of `CardLayouts`.
-- Updates the `CheckboxGroup` prop `layout` to use the `LayoutTypes` enum instead of `CheckboxGroupLayoutTypes`.
-- Renames the `Heading` prop `displaySize` to `size.
-- Renames the `HeadingDisplaySizes` enum to `HeadingSizes.
-- Renames the `Hero` prop `image` to `imageComponent`.
-- Renames the `Image` prop `imageSize` to `size`.
-- Renames the `Notification` prop `centered` to `isCentered`.
-- Updates the `RadioGroup` prop `layout` to use the `LayoutTypes` enum instead of `RadioGroupLayoutTypes`.
-- Internal updates to the `SearchBar` component based on updates from the `Select` and `TextInput` components.
-- Renames the `Select` prop `type` to `selectType`.
-- Updates the `SkeletonLoader` prop `layout` to use the `LayoutTypes` enum instead of `SkeletonLoaderLayouts`.
-- Renames the `StructuredContentImage` prop `imageSize` to `size` (this component is based on the `Image` component).
-- Internal updates to the `StructuredContent` component based on updates from the `Image` and `Heading` components.
-- Renames the `Tabs` prop `contentData` to `tabsData`.
-- Renames the `Text` prop `displaySize` to `size`.
-- Renames the `TextInput` prop `variant` to `textInputType`.
-- Updates the `Card` image-related props into one main prop named `imageProps`. This new prop contains the following properties: alt, aspectRatio, caption, component, credit, isAtEnd, size, and src.
-- Updates the `Hero` prop `image` to `imageAlt` and `imageSrc`. Internally, an `Image` component is created.
-- Renames the `Image` component props `imageAspectRatio` to `aspectRatio`, `imageCaption` to `caption`, and `imageCredit` to `credit`.
-- Updates the `StructuredContent` image-related props into one main prop named `imageProps`. This new prop contains the following properties: alt, aspectRatio, caption, component, credit, position, size, and src.
-- Renames the `ToggleSizes.tsx` file to `ToggleTypes.tsx`. Updates the values from `Large` and `Small` to `Default` and `Small`.
-- Minor update to the logic for the `ProgressIndicator` sizing prop and styles.
-
-### Fixes
-
-- Fixes bug where the Next button in `Pagination` would navigate to the previous page.
-- Fixes the alignment of the first link in the `Pagination` component.
-- Fixes the `Breadcrumbs`' SVG arrow icon fill color for the "Blogs" variant.
-- Fixes the margin right value for list items in the `List` component for the inline style.
-- Fixes bug in the `Select` component where the SVG arrow hides when the component is focused.
-- Fixes the extra bottom spacing in the `HeroTypes.Campaign` `Hero` variant for the mobile view.
-- Fixes the `Slider` component so it doesn't cause a stack overflow client-side issue when updating the slider thumbs through the keyboard arrows. The values are now returned through Chakra's `onChange` callback instead of the `onChangeEnd` callback.
-
-### Removals
-
-- Removes the `CardLayouts`, `CheckboxGroupLayoutTypes`, `RadioGroupLayoutTypes`, and `SkeletonLoaderLayouts` enums.
-- Removes the `CardTypes.tsx`,` CheckboxGroupLayoutTypes.tsx`, and `RadioGroupLayoutTypes.tsx` files.
-
-## 0.25.12 (March 18, 2022)
-
-### Adds
-
-- Adds `Education` section colors to the color palette theme object.
-- Adds a `currentPage` prop to the `Pagination` component, a value that updates the selected page programmatically without the user explicitly requesting it.
-
-### Changes
-
-- Removes the margin from the global `.nypl p` CSS rule.
-- Updates the top and bottom margin of the `List`'s `Unordered` and `Ordered` types.
-- Updates the `Notification`'s icons to be decorative by default.
-- Updates the default placeholder value for the `SearchBar`'s `TextInput` component.
-- Updates the `SearchBar`'s `textInputProps` prop object to not require the `placeholder` property.
-- Updates the `Logo` component to include new variants for `FirstBook` and `Open eBooks`.
-- Updates the border and text styles for the `Select` component.
-- Updates the `Breadcrumbs` component to inlcude an `Education` color variant.
-- Updates the `Icon` component to include the `Education` color values.
-- Updates the default font stack to fix a typo that was disabling `sans-serif` in the stack.
-- Removes the `.nypl-ds` CSS class from the base SCSS file, from the `TemplateAppContainer` component, from the Storybook configuration, and from the entire repo.
-- Moves the base styles from the SCSS global file to the Chakra theme global JS object.
-- Updates the label font size for the `Radio` and `Checkbox` components to be "label.default".
-
-### Fixes
-
-- Fixes the styles for the `Slider` to better accomodate the slider thumbs and the width of the container.
-- Updates the alignment of the `Notifications`'s dismissible icon.
-- Fixes the border and padding from the `fieldset` HTML element by removing it.
-- Fixes alignment for long labels in the `Checkbox` and `Radio` components.
-- Fixes the line height for long labels in the `Toggle` component.
-
-## 0.25.11 (March 3, 2022)
-
-### Updates
-
-- Updates the `Logo` component to include new variants for `BPL`, `Clever`, `LPA`, `MLN`, `QPL`, `Schomburg`, `SimplyE` and `Treasures`.
-- Updates font size to "12px" and top margin to "4px" for `HelperErrorText` component.
-- Updates font size to "14px" for `TextInput` component.
-- Adds an `aria-label` attribute to the `Notification` component to use with its `aside` HTML landmark element. Added an "Accessibility" section in the `Notification` Storybook page to note that this component should not be used within a `header` or `footer` HTML landmark element.
-- Updates the `Notification` component to handle link color inside the content area, better styling for centering and the dismissible variation, and updated background color for the "Announcement" and "Warning" types.
-- Updates a log message in the `Icon` component to be more descriptive.
-- Updates the mobile styles for the image in the `StructuredContent` component.
-- Updates the prop type for the "Definition" `List` type so DOM elements can be passed in the definition.
-
-### Fixes
-
-- Updates the bottom margin of the `Select` in the `SearchBar` so that the helper text has standard gap between the main form components and itself.
-- Updates how `TabList` and `TabPanels` are returned in the `Tabs` component so no false log messages are consoled.
-- Updates `List` component styling for inline.
-
-## 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.
-- Adds the `additionalStyles` prop to the `Select` 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` component.
-
-### 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
-
-- 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.
-- Adds the `placeholder` prop to the `Select` 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
-
-- Adds the `ImageRatios`, `ImageSizes`, and `ImageTypes` enums.
-- Composes the DS `Fieldset` component with Chakra. This always renders a `legend` element as its first child but it can be optionally hidden from the screen.
-- Adds the ability to make an entire `Card` component clickable with Chakra's `LinkBox` and `LinkOverlay` components. Links in the `CardActions` component can still be accessed in this state by clicking with the mouse or tabbing and pressing "enter".
-- Adds new file type SVG files to use in the `Icon` component: Audio, Doc, GenericDoc, Image, PDF, Spreadsheet, Video.
-- Adds `ActionCheckCircle` SVG file to use in the `Icon` component.
-
-### Changes
-
-- Updates the Github Action for the changelog reminder.
-- Updates the `Checkbox` component with an "indeterminate" state through the `isIndeterminate` prop.
-- Updates the `CheckboxGroup` component story with an "indeterminate" state example.
-- Updates the `CheckboxGroup` and `RadioGroup` components to use the `Fieldset` component.
-- Updates the `HelperErrorText` and `TextInput` components with added `additionalStyles` prop.
-- Updates the `Button` Style Guide documentation.
-- Updates the `Iconography` Style Guide story documentation.
-- Updates the `Button` font weight to "regular".
-
-### Fixes
-
-- Fixes nondeterministic unit test in the `DatePicker` component.
-- Version of latest `List` component release in its storybook page.
-- Adds validation to the `height` prop in the `HorizontalRule` so percentage values are not used. If a percentage value is used, the default "2px" value is set.
-- Fixes styling issues for the `Notification` dismissible button.
-- Fixes `SearchBar` mobile styling for the `Select`, `TextInput`, and `Button` components.
-- Fixes `SearchBar` focus flicker when the `Select` component is selected.
-
-### Breaking Changes
-
-- Updates the `Notification` component to fix the custom icon alignment.
-- Adds the `title` prop to the `Icon` component to render a `title` HTML element for accessible SVG icons.
-- Updates the default font size of the `Button` component to `"-1"` (14px) for all variants except the `Link` variant. Removes the `bem` function from internal use and makes it clearer that the `ButtonGroup` Chakra component is exported in the Design System.
-- Updates the `errorText` prop to `invalidText` for the `Checkbox` component.
-- Composes the DS `Pagination` component with Chakra. Removes the BEM-related props and updates the `currentPage` prop to `initialPage`. The current selected page is now kept in state inside the `Pagination` component and returned to the user through `getPageHref` or `onPageChange`. This also adds better aria attributes to the list inside the `Pagination` component.
-- Composes the DS `Image` component with Chakra styling and updates all `Image` references in other DS components. The `attributes` prop and the BEM related props `blockname` and `modifiers` have been removed. Adds the following new props: `additionalStyles`, `component`, `imageAspectRatio`, `imageSize`, `imageType`.
-- 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)
-
-### Adds
-
-- Adds custom `useCarouselStyles` hook for the `Tabs` mobile carousel functionality.
-- Adds custom NYPL-theme radii values to use within Chakra, mostly for border radius values.
-- Adds the `showHelperInvalidText` prop to form components to control displaying or hiding the content in the `HelperErrorText` component.
-- Adds `useNYPLTheme` hook for consuming applications to use NYPL DS values.
-- Adds the DS `ComponentWrapper` helper component for internal use.
-- Adds `useWindowSize` hook for responsive styles and functionality.
-- Adds Chakra Migration Guide for version `0.25.0` and greater.
-
-### Changes
-
-- Updates the CSS vars name prefix to use `nypl`.
-- Updates documentation in the README and updates the issue contribution template.
-- Updates the following components to use the `showHelperInvalidText` prop: `Checkbox`, `CheckboxGroup`, `DatePicker`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `TextInput`, `VideoPlayer`.
-
-### Breaking Changes
-
-- Composes the DS `Notification` component with Chakra components. Removes the `NotificationHeading` and `NotificationContent` components as exports and are only used internally in `Notification`. Instead of children component, `Notification` accepts the heading and content values through the `notificationHeading` and `notificationContent` props, respectively.
-- Composes the DS `HelperErrorText` component with Chakra. BEM related props `modifiers` and `blockname` have been removed. The `isError` prop has been renamed to `isInvalid`.
-- Composes the DS `VideoPlayer` component with Chakra. BEM related prop `modifiers` has been removed.
-- Composes the DS `HorizontalRule` component with Chakra. BEM related prop `modifiers` has been removed, as well as the `attributes` prop.
-- Composes the DS `List` component with Chakra. BEM related props `modifiers` and `blockname` have been removed. The `noStyling` prop is now used for the no list style variant style.
-
-## 0.25.1 (October 14, 2021)
-
-### Adds
-
-- Updates the `Accordion` component to internally use Chakra components.
-- Adds DS `SimpleGrid` component composed from Chakra's `Simplegrid` component.
-- Adds DS `Text` component composed from Chakra's `Text` component.
-- Update the NYPL Colors with updated color names and values.
-- Composes the DS `TextInput` component from Chakra's `Input` and `Textarea` components.
-- Composes the DS `Select` component from Chakra's `Select` component.
-- Composes the DS `Hero` component from Chakra's component.
-- Composes the DS `CheckboxGroup` component from Chakra's `CheckboxGroup` component.
-- Composes the DS "Template" components (`Template`, `TemplateHeader`, `TemplateBreakout`, `TemplateContent`, `TemplateContentPrimary`, `TemplateContentSidebar`, `TemplateFooter`) from Chakra's `Box` component for page layouts through children components.
-- Composes the DS `TemplateAppContainer` component from Chakra's `Box` component for page layouts through props.
-- Composes the DS `Link` component with Chakra component and fixes the `Button` type.
-- Exports Chakra's `Grid` and `GridItem` components.
-- Composes the DS `Label` component with Chakra component and updates the font size.
-- Composes the DS `StatusBadge` component from Chakra's component.
-- Composes the DS `Forms` component using DS and Chakra components.
-- Composes the DS `Icon` component with Chakra's `Icon` component. Added new props for `Icon` sizing, alignment, name, and rotation.
-- Composes the DS `SearchBar` component from DS `Select`, `TextInput`, `Button`, and `HelperErrorText` components.
-- Composes the DS `Breadcrumbs` component from Chakra's `Breadcumb`, `BreadcrumbItem` and `BreadcrumbLink` components.
-
-### Changes
-
-- Updates spacing values to use NYPL spacing rather than "em"s.
-- Updates the `SkeletonLoaderLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
-- Updates the `CardLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
-- Updates font size of the `legend` element used in `CheckboxGroup`, `DatePicker` and `RadioGroup`.
-- Updates the radius values through Chakra's theme object.
-
-## 0.25.0 (September 30, 2021)
-
-### Breaking Changes
-
-- Renames `HeadingDisplaySizes.tsx` to `HeadingTypes.tsx`.
-
-### Adds
-
-- Integrates Chakra-UI into the codebase.
-- Moved SCSS and CSS variable styles into a custom NYPL theme to extend Chakra's base theme.
-- Adds `DSProvider` component to use the NYPL theme in consuming applications.
-- Exports Chakra's `Box`, `Center`, `Circle`, `Square`, `Stack`, `HStack`, and `VStack` components.
-- Composes the DS `Button` component from Chakra's `Button` component.
-- Composes the DS `Heading` component from Chakra's `Heading` component.
-- Composes the DS `Tabs` component from Chakra's `Tabs`, `TabList`, `Tab`, `TabPanels`, and `TabPanel` components.
-- Composes the DS `Radio` component from Chakra's `Radio` component.
-- Composes the DS `RadioGroup` component from Chakra's `RadioGroup` component.
-- Composes the DS `Checkbox` component from Chakra's `Checkbox` component.
-- Updates the `errorText` prop name to `invalidText`.
-
-### Removes
-
-- Removes the `color-classes` SCSS mixin.
-
-### Changes
-
-- Updates the development preview URL from the Netlify link to the Tugboat QA link.
-
-## 0.24.1
-
-### Adds
-
-- Adds `FormSpacing` enum to DS exports.
-- Adds `utility_account_filled`, `utility_account_unfilled`, `utility_hamburger` and `utility_search` icons to `Icon` component.
-
-### Changes
-
-- Updates `General Guidelines` for `Buttons Style Guide`.
-
-### Fixes
-
-- Fixes left padding on `Card` when `imageAtEnd` and `border` are both `true`.
-
-## 0.24.0
-
-### Breaking Changes
-
-- Renames original `Card` components to be `CardEdition`.
-
-### Adds
-
-- Adds the `DatePicker` component.
-- Adds new `Card` component.
-- Adds `spacing` prop to `Form` component to allow for spacing variations.
-- Adds Style Guide `Forms`
-
-### Changes
-
-- Exports `VideoPlayerAspectRatios`.
-- Adds additional props for the `DatePicker` component based on its TAD Addendum section.
-- Adds Tugboat QA configuration for PR preview deployments to replace Netlify.
-- Updates the `DatePicker`, `TextInput`, `Select`, and `Label` components to pass an optional `showOptReqLabel` prop to conditionally render "Required"/"Optional" in the label text.
-
-### Fixes
-
-- Fixes Accordion FAQ Storybook example rendering bug.
-
-## 0.23.4
-
-### Adds
-
-- Adds TSDX as the bootstrapping tool to add opinionated configurations.
-- Adds an `/example/` directory through TSDX with an small playground app.
-- Snapshot testing through `react-test-renderer` and Jest.
-- Typescript documentation file to be use as a development guide.
-- Typescript documentation for `enum` variables in the TYPESCRIPT file.
-- Adds `SkeletonLoaderLayouts` and `SkeletonLoaderImageRatios` enums to DS exports.
-- Adds heading, description and helper text to `VideoPlayer` component.
-- Adds `@storybook/addons-jest` plugin to display Jest/React Testing Library unit tests in a Storybook tab.
-
-### Changes
-
-- Updates Style Guide `Spacing`.
-- Updates `Hero` component to include `Campaign` variant.
-- Updates `Hero` stories to use MDX format.
-- Updated warnings for too few or too many option children for the `Select` component.
-- Updates the README to include information on the production, development, and "preview" Storybook documentation instances.
-- Removes a custom SCSS breakpoint in `_Breadcrumbs.scss` in favor of mobile-first style rules.
-- Replaces Mocha, Chai, Sinon, and Enzyme for Jest and React Testing Library for unit testing.
-- Replaces webpack with rollup through TSDX.
-- Updates npm scripts to use TSDX for internal commands.
-- Replaces lodash with own functions.
-- Minor updates to Github Actions.
-- Adds PostCSS/autoprefixer to Rollup workflow instead of the default scss minifier.
-
-### Fixes
-
-- Fixes the `bem` utility function so that it doesn't crash Storybook whenever the `modifiers` Controls prop option is empty.
-
-## 0.23.3
-
-### Fixes
-
-- Removes the `storybook-static` directory from `.gitignore` so that the Github Actions deploy job can work properly.
-
-## 0.23.2
-
-### Adds
-
-- Adds `Form` component.
-- Adds `Notification` component.
-- Adds Style Guide `Buttons`.
-- Adds `VideoPlayer` component.
-- Adds the ability to render a `textarea` element from the `TextInput` component.
-
-### Changes
-
-- Updates stories for the `List` component to use MDX format.
-- Updates stories for the `Pagination` component to use MDX format.
-- Updates how children are rendered in the `List` component. Direct children `li`, `dt`, and `dd` elements can still be passed, but specific data structures can be passed to the `listItems` prop to render the appropriate children element.
-- Updates to the contributing documentation, pull request template, and the README.
-- Changes `DisplaySizes` to `HeadingDisplaySizes`.
-- Changes `Skeleton Loader` to be configurable via props.
-- Changes `Button` to use `16px` for left/right padding for buttons with text; icon only buttons still use `8px` left/right padding.
-- Changes `TextInput` label text to `font-weight: 500`.
-
-## 0.23.1
-
-### Adds
-
-- Adds CSS vars for `font-weight`
-- Adds `displaySize` prop to `Heading`
-- Adds Style Guide `Iconography`
-- Adds new SVGs to be used with the `Icon` component. Among the new SVGs are: Error solid, Error outlined, Speaker Notes.
-- Adds ability to change the color of an SVG icon with classes such as: `ui-black` (default), `ui-white`, `brand-primary` (red), `section-research-secondary` (turquoise).
-- Adds `helperText` and `errorText` props to `Checkbox`
-- Adds `helperText` and `errorText` props to `Radio`
-- Adds `errorText`, `helperText`, `labelText`, `required` and `showLabel` props to `Select`
-
-### Changes
-
-- Updates content in Style Guide `Typography`
-- Updates content in Style Guide `Breakpoints`
-- Changes `Link` story from `.tsx` to `.mdx`.
-
-### Deprecates
-
-- Deprecates `ariaLabel`, `helperTextId`, `isRequired` and `labelId` props in `Select`
-
-## 0.23.0
-
-### Breaking Changes
-
-- Removes `breakout` CSS from `Breadcrumbs`. To retain previous behavior, `Breadcrumbs` component should be a child of a `.content-header` element.
-- Removes `breakout` CSS from `Hero Secondary`. To retain previous behavior, `Hero` component should be a child of a `.content-header` element.
-
-### Adds
-
-- Adds `HorizontalRule` component
-- Adds new `short` class for `Placeholder`
-- Adds `Style Guide` category to Storybook sidebar
-
-### Changes
-
-- Changes `Breadcrumbs` story from `.tsx` to `.mdx`
-- Changes `Heading` story from `.tsx` to `.mdx`
-- Changes suggested DOM structure in `Template` Story
-
-## 0.22.2
-
-### Changes
-
-- Adds documentation on layout bidirectionality
-- Changes `Pagination` to hide pagination UI when there are 0 or 1 pages.
-
-## 0.22.1
-
-### Changes
-
-- Removes `color-classes` and `css-vars` mixins from `_03-mixins.scss`
-- Adds `color-classes` and `css-vars` mixins to `styles.scss`
-- Changes order of CSS `@import` rules in `styles.scss`
-- Adds quotes around `black` and `white` in `$colors` object in `_colors-utility.scss`
-
-## 0.22.0
-
-### Breaking Changes
-
-- Removes `--ui-success` CSS variable and adds `--ui-success-primary` and `--ui-success-secondary`
-- Removes `checkboxId` prop from `Checkbox` component and employs `id` in its place.
-- Removes `defaultChecked` prop from `Checkbox` component.
-- Removed `labelOptions` prop from `Checkbox` component and employs `labelText` in its place.
-
-### Changes
-
-- Added: Definition List component.
-- Changed: Separate Checkbox into its own component.
-- Changed: Separate Radio button into its own component.
-- Adds `Tertiary` state to Hero component
-- Changes `Brand` and `Utility` color values to match Figma main file
-- Changes `Radio` styles to use SASS vars in place of CSS vars
-- Adds `TextInput` component to handle email, hidden, number, password, text, textarea, tel and url input types
-- Adds default width and padding to `StatusBadge` component.
-- Hides pagination when there are 0 or 1 pages.
-
-### BugFixes
-
-- Fixed layout bug for layouts that include a right sidebar column and DOM structure.
-
-## 0.21.2
-
-### Changes
-
-- Adds `getPageHref` to `Pagination`
-
-## 0.21.1
-
-### Changes
-
-- `Accordion`: Adds `fixed-height` modifier and `defaultOpen` prop
-- `List` defaults to grey bullets instead of black
-- Adds margins inside the default columns of `Card`
-
-### BugFixes
-
-- Breadcrumbs now show up in light colours
-- Template reflow and breakpoints now happen at the same time
-- Fixes release github action
-
-## 0.21.0
-
-### Breaking Changes
-
-- Removes `statusBadgeText` prop in StatusBadge to allow text to be inside component
-
-### Changes
-
-- Add `method` and `action` to `SearchBar` `<form>`
-
-### Bugfixes
-
-- Add the `attributes` property to the `SearchBar` `<form>`
-- Adds focus outline to the `Accordion` component so it appears when it is tabbed.
-
-## 0.20.2
-
-### Changes
-
-- Exports mixins in a `resources.scss` file that can be used by consumers.
-
-### Bugfixes
-
-- `Link` with class `button` has white text color
-
-## 0.20.1
-
-### Bugfixes
-
-- Fixes `Pagination` when there are fewer than 4 pages
-- Adds `StatusBadge` component to `design-system-react-components` package
-
-## 0.20.0
-
-### Changes
-
-- `Select`: selectedOption holds the selected value, instead of just the default.
-- `Hero`: `Hero.Secondary` now changes background color based on NYPL site section
-- `Hero`: All props are now optional
-- `Input`: added onChange prop to explicitly allow it to be used as a controlled component
-- Uses stricter linters and more Prettier configs.
-
-### Breaking Changes
-
-- Removed `SectionTitle`
-- Scopes all element selects to the `.nypl-ds` class
-
-## 0.19.1
-
-### Breaking Changes
-
-- Accordion: Accordion input styling affects only direct children
-- Checkbox: Allows checkbox to be used as a controlled component or uncontrolled component.
-
-## 0.19.0
-
-### Breaking Changes
-
-- Updates `Pagination` component to match new design.
-
-## 0.18.7
-
-### Changes
-
-- Adds actual `StatusBadge` component with props for setting levels [RENO-1882](https://jira.nypl.org/browse/RENO-1882)
-
-## 0.18.6
-
-### Changes
-
-- Updates `Hero`'s primary option to have a larger top/bottom padding on the inner content via [Reno-1670](https://jira.nypl.org/browse/RENO-1670)
-
-## 0.18.5
-
-### Changes
-
-- Converts the Accordion component to open and close through CSS rather than through Javascript.
-
-## 0.18.4
-
-### Changes
-
-- Updates the `Input` component to conditionally render an `id` attribute if an `id` prop value is passed to it.
-
-## 0.18.3
-
-### Changes
-
-- Add `overflow: hidden` to `.no-scroll` styling on `<body>` for modal to prevent scroll element for content behind modal being displayed
-
-## 0.18.2
-
-### Changes
-
-- Updates Accordion sets so that first item in list doesn't have `-1px` top margin
-
-## 0.18.1
-
-### Breaking Changes
-
-- For `Input` components that use the `.input-group` class, on mobile those input elements are now stacked on top of each other rather than side-to-side.
-
-### Updates
-
-- Updates the `Input` component to allow it to render a "hidden" input type.
-
-## 0.18.0
-
-### Breaking Changes
-
-- Removes type, color, and line-height declarations from `body` tags and moves them to the `.nypl-ds` namespace
-
-## 0.17.4
-
-### Changes
-
-- Moves footer outside of `.nypl-ds` namespace on Template story
-
-## 0.17.3
-
-### Adds
-
-- `SkeletonLoader` component for loading screens
-
-## 0.17.2
-
-### Adds
-
-- `selectedOption` to `Pagination` story
-
-## 0.17.1
-
-### Adds
-
-- `FiftyFifty` Hero type styling
-
-## 0.17.0
-
-### Breaking Changes
-
-- Sets up the default `font-size` value in the `.nypl-ds` namespace.
-
-## 0.16.1
-
-### Adds
-
-- Styling for `Accordion` sets
-
-### Changes
-
-- `className`s within `Accordion` for content
-- Hover stylings for `Accordion`
-
-## 0.16.0
-
-### Breaking Changes
-
-- Removes the padding on the `breakout` mixin
-- Removes the padding on the `wrapper` mixin at the `xl` breakpoint
-
-## 0.15.1
-
-### Removes
-
-- `arrow_xsmall` and `search_small` icons
-
-## 0.15.0
-
-### Breaking Changes
-
-- Fixes a bug in which content was not centered within `Button` when button was made larger than the text content
-
-### Removes
-
-- Additional `Button` CSS that was no longer used after Button API refactor in 0.13.0
-- Deprecates `SearchResultItem`
-
-## 0.14.0
-
-### Breaking Changes
-
-- `Image` now has an `alt` prop instead of an `altText` prop
-- Removes `isDecorative` property in favor of an empty `alt`
-
-### Adds
-
-- Adds HTML `<img>` props to the `Image` component
-
-## 0.13.0
-
-### Breaking Changes
-
-- Removes all icon props from `Button`. Button now uses `Icon` as a child
-- Removes `ButtonIconPositions`
-
-### Changes
-
-- Makes `Button`'s `onClick` property optional
-
-## 0.12.0
-
-### Breaking Changes
-
-- Moves box-sizing declarations to a `.nypl-ds` namespace. All future "global" CSS settings will move to exist under this namespace.
-
-### Adds
-
-- Universal focus styling
-
-## 0.11.5
-
-### Changes
-
-- Updates the margin on action-links from `xxs` to `xs`
-
-## 0.11.4
-
-### Changes
-
-- Removes the `description` tag from the `<span>` element wrapping svg icons (#360)
-
-## 0.11.3
-
-### Changes
-
-- `Icon` now accepts children for custom icons
-
-## 0.11.2
-
-### Adds
-
-- Status Badge component as stories
-
-## 0.11.1
-
-### Changes
-
-- DS bundle is now compiled for es5 instead of es6 to accommodate for IE11 and the arrow functions we're using in DS
-
-## 0.11.0
-
-## Breaking Changes
-
-- Removes options from the `Pagination` component
-
-## 0.10.4
-
-### Changes
-
-- Updates the `Link` component's `linkType` prop to `type`, implements `React.forwardRef` to use with other libraries, and updates the stories.
-
-## 0.10.3
-
-### Changes
-
-- Updates the `Icon` component's `name` prop to allow for `LogoNames` enum types.
-
-### Adds
-
-- Adds a "negative" NYPL logo to be used on non-white backgrounds.
-
-## 0.10.2
-
-### Changes
-
-- Updates the formatting of svg file names to use underscores
-
-## 0.10.1
-
-### Changes
-
-- Updates the `Input` element to allow props and attributes to be able to render input elements of type "radio".
-
-## 0.10.0
-
-### Removes
-
-- Deprecates `SectionName` in favor of the stories under `Colors—Brand`
-
-## 0.9.3
-
-### Adds
-
-- SVGs for NYPL full logo lockup, Queens Public Library Logo, and Brooklyn Public Library Logo
-
-## 0.9.2
-
-### Adds
-
-- CSS to style [React Autosuggest](https://github.com/moroshko/react-autosuggest/)
-
-## 0.9.1
-
-### Changes
-
-- `Breadcrumbs`'s background color now reflects the app's globally applied section modifier, such as `.nypl--locations`. It recognizes these for `--locations`, `--whats-on`, `--research`, and `--books-and-more`.
-
-## 0.9.0
-
-### Breaking Changes
-
-- Removes `$color-spotlight`, `$color-your-interests`, `$color-support`, and `$color-help`
-- Removes all `$nypl-` prefixed Sass variables
-- `$color-success` is now `--ui-success`.
-- Breakpoint variables are now prefixed with `breakpoint`.
-- Type sizing variables are now prefixed with `font-size`.
-- Typeface variables are now prefixed with `typeface`.
-- Removes `--font-size-1p5`, which was originally added as certain designs call out `20px` for headings and others at `18px`. Figma documentation refers to `18px` only as of [0.1.1](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10975%3A16).
-
-### Adds
-
-- Exposes color and typography constants as CSS variables
-- Adds Section colors for `--section-research-library-lpa`, `--section-research-library-schomburg`, and `--section-research-library-schwartzman`
-
-### Removes
-
-- Letterspacing property on all body copy
-
-## 0.8.0
-
-### Removes
-
-- `width: 100%` on svgs
-
-## 0.7.2
-
-### Adds
-
-- Adds icons for `accessibility_full`, `accessibility_partial`, `clock`, `check`, and `close`
-
-### Changes
-
-- Updates the `download` icon to Google Material Design's icon.
-
-## 0.7.1
-
-### Changes
-
-- Updated the Select component to take in a ref using ForwardRef and also a `name` prop.
-
-## 0.7.0
-
-### Breaking Changes
-
-- `FormDropDown` and `Dropdown` are now `Select`
-- `Textfield` has been retired in favor of `Input`
-- `Input` type is now controlled via an enum defined in `InputTypes` instead of a string
-- Changes `referenceId` to `htmlFor` on `Label`
-- Deprecates `DateRangeForm`, `BodyText`, `SearchPromo`, `Container`, and `RNHeaderWithSearch`
-- `Button` now accepts an `onClick` instead of a `callback`
-- In the `ButtonTypes` enum, `Filled` and `Outline` have been changed to `Primary` and `Secondary`, respectively
-- `Accordion` now accepts `accordionLabel` and `labelId` instead of `buttonOpts` properties
-- Removes project-specific styles for now deprecated `EditionCard`
-- Removes project-specific styles of `.search-results-list` and `.form-item--radios`
-- `UnorderedList` is now `List`, with an enum to control whether is it ordered or unordered
-- `Input` `id` is no longer prepended with `input-`
-- `Button` `id` is no longer prepended with `btn-`
-- `SearchBar` no longer has props for `selectChangeHandler`, `selectBlurHandler`, or `searchChangeHandler`.
-- `Input` offers `ariaLabel` and `ariaLabelledby` props in favor of `labelId` and `helperTextId`
-- Removes `headingAttributes?: {}` from `SectionTitle`
-
-### Adds
-
-- Adds `aria-live` and `aria-atomic` to `HelperErrorText` in its errored state
-- Adds "Optional", "Required", or empty string inside `Label` for forms
-- Adds `IconNames` enum to make `allSVGs` array globally accessible
-- Adds `width: 100%` globally to SVGs
-- `Card` now constrains items in its `image` column to the column width
-- Adds the `forwardRef` implementation to the `Input` component
-- Adds `disabled` prop to `Input` and `Button` components
-- Adds `disabled` styling to `Button.Primary`
-- Adds `className?: string;` as additional props to all components
-- Adds `attributes?: { [key: string]: string }; ` to `Input`, `Button`, `Select`, `Link`, and `Image`
-- Adds `justify-content: center` for `Button` with icon to adjust for mobile
-
-### Changes
-
-- Fixes bug in former `FormDropdown` (now `Select`) where the select value would not change if `selectedOption` were passed
-- `Link`'s scss now references `$ui-link-primary` instead of `$nypl-blue-regular`
-- Changes `Select`'s SCSS to use the updated styling from Filament Group
-- `Image` is wrapped in `figure` when `imageCaption` or `imageCredit` is passed to `Image`
-- Adds `viewport` properties to any SVG files that were missing it
-
-### Removes
-
-- Removes `HelperErrorTextOptions`
-
-## 0.6.0
-
-### Breaking Changes
-
-- Removes `RNSectionTitle`
-
-### Changes
-
-- Updates `$nypl-blue-regular` from #0071ce to #0576d3
-- `$nypl-blue-regular` is now extended with `$ui-link-primary`
-
-## [0.5.0]
-
-### Breaking Changes
-
-- `EditionCard` is now `Card`
-- Buttons from black by default to blue
-
-### Adds
-
-- Icon for audiobook
-- Changes the line-height values on some of the heading mixins
-
-## [0.4.1]
-
-### Changes
-
-- Makes all IDs optional
-
-## [0.4.0]
-
-### Breaking Changes
-
-- Concatenates `BasicLink`, `UnderlineLink`, and `IconLink` into `Link` with `LinkTypes` enum
-- Moves styles into their corresponding component folders
-- Moves base styles into the react-components package
-- Deprecates `@nypl/design-system-styles`
-
-### Changes
-
-- Moves tests into their corresponding component folders
-- Flattens component structure to export as one package.
-- Exports `Icon`
-
-## [0.3.7]
-
-- Fixed `dist` script so it clears the folder
-- Added `viewBox` to `arrow` icon
-
-## [0.3.6]
-
-- added `Template` stories
-- fixed `Accordion` buttons
-- added `viewBox` to `arrow-xsmall` icon
-
-## [0.3.5]
-
-- Move `Placeholder`, `Modal`, `SectionName` and `Container` from `/00-base` into top-level `/components`
-- Fix Storybook errors for Headings with Bold and Headings with Link.
-- Move `Headings/*` from `/02-molecules` into top-level `/components`
-- Inlined icons inside `react-components`
-- No longer publishing `@nypl/design-system-icons` package
-
-## [0.3.4]
-
-- Exported `searchValue` and `selectedField` in `RNHeaderWithSearch`
-
-## [0.3.3]
-
-- Added `blockName` handling to `DateRangeForm`
-
-## [0.3.1]
-
-- Exports `SectionName` and `Image`
-
-## [0.3.0]
-
-### Breaking Changes
-
-- Edition Card no longer accepts strings for links and descriptions
-
-### Changed
-
-- Added `iconName` as an optional prop in `IconLink`
-
-## [0.2.1] - 2020-04-23
-
-### Removed
-
-- `HeaderWithImageRight` component and corresponding story
-
-## [0.2.0] - 2020-04-13
-
-### Changed
-
-- Reworks `HeaderWithImageRight` into `Hero`, which accepts values from an enum to display different kinds of heros based on [this documentation page](https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10968%3A5314)
-
-## [0.1.1]
-
-### Changed
-
-- `Textfield` id is no longer duplicated
-- `Dropdown` now applies `bem` `blockName`
-- `Pagination` now passes in `blockName` into `Dropdown`
-
-## [0.1.0]
-
-### Breaking Changes
-
-- Large classes now have `Opts` inteface that allows for the component to be built over multiple steps. This affects:
-  - `HelperErrorText`
-  - `Label`
-  - `TextField`
-  - `Button`
-- Deprecated `SearchResultsList`, `IconLinkList` and `EditionsList` in favor of `UnorderedList`
-- `type` in `Button` now corresponds to html button types. `buttonType` in button corresponds to the visual categories of buttons (eg: `filled`, `outline`)
-- `subtitle` in `SearchResultsItem` changed to `subtitleContent` to take a JSX
-- `Label` and `Button` only accept children when called directly
-
-### Added:
-
-- `Checkbox`
-- `DateRangeForm`
-- `Input`
-- `Accordion`
-- `UnorderedList`
-- # `Modal`
-
-## [0.0.17] - 2020-03-17
-
-- Changelog update
-
-## [0.0.16]
-
-- `HeaderImgRight` accepts elements
-
-## [0.0.15] - 2020-03-3
-
-### Changed
-
-- `Button` component accepts content to render from its `content` prop or its `children` prop.
-
-## [0.0.14] - 2020-02-18
-
-### Changed
-
-- `EditionCard` `EditionInfo` fields accept elements
-- `EditionCard` `ReadOnline` and `Download` fields accept elements
-
-### [0.0.14] - 2020-02-18
-
-- added `noLinkElement` to `EditionCard` to receive an element
-
-## [0.0.11] — 2020-01-23
-
-### Added
-
-- `EditionsList`
-
-## [0.0.10] - 2020-01-14
-
-### Added
-
-- `Dropdown` which controls `FormDropdown` and its corresponding `Label`
-- `Label`
-- `HelperErrorText`
-- `Pagination`
-- `EditionCard` component
-- `SearchResultItem` component that uses `EditionCard`
-- `RN Header With Search`
-- a story for `RN Section Title`, which is just a collection of styles
-- `SearchResultsList` component
-
-### Changed
-
-- added `iconModifiers` to `Button`
-- `buttonId` in `Button` is now required
-- refactored `FormDropdown` to not include its own `label`
-- `RN Header With Search`
-- a story for `RN Section Title`, which is just a collection of styles
-- `Link` -> `BasicLink` for clarity
-- Bugfixes in `UnderlineLink` and `IconLink`
-- Added stories for `BasicLink`
-- `Link` missing URL error message
-- Consolidated `Heading` and `PageTitle`
-- `Heading` now only takes a single span
-- Added ResearchNow specific `SearchBar` error state
-- A11Y changes for `SearchBar` and `HeaderWithSearch`
-- Added stories for AT-79, AT-264 and AT-3
-- `selectedOption` added to `FormDropdown` stores selected state
-
-## [0.0.7] - 2020-01-03
-
-### Added
-
-- A webpack file in order to build and distribute a compiled version of the react components. Does not replace the /lib folder usage, but the main file is now pointing to `/dist/design-system-react-components.min.js`.
-
-## [0.0.6] - 2019-12-31
-
-### Added
-
-- `Image` for 2:1 ratio
-- `PageTitle`
-- `Header with Image Right`
-- `FormDropdown`
-- `SearchPromo`
-
-### Changed
-
-- Moved heading-related atoms from `01-atoms/Text` into `01-atoms/Text/Heading`
-- Updated `Searchbar` component to include Parameters
-- Changed `Breadcrumb` export from `Breadcrumbs`
-
-## [0.0.5] - 2019-12-06
-
-### Changed
-
-- `Icon` import
-
-## [0.0.4] - 2019-12-06
-
-### Added
-
-- `Body text` component for plain-text elements
-- `UnderlineLink` and `IconLink` for links
-- `Icon` component that uses the `design-system-icons` package.
-- `SectionTitle` and `Heading` for heading components
-- `IconLink-List`for the list of subject links
-- `Button` and `TextField` for the searchbar
-- `SearchBar` component
-
-### Changed
-
-- `Breadcrumb` now shows icon in mobile view
-
-## [0.0.3] - 2019-11-15
-
-### Changed
-
-- Changed `Breadcrumb` to `Breadcrumbs` to match Twig
-- Changed the Breadcrumbs props to accept components
-
-## [0.0.2] - 2019-11-13
-
-### Added
-
-- Started a change log
-- Added the Breadcrumb React Component
-
-### Changed
-
-- Changed folder structure to match Twig
-
-## [0.0.1] - 2019-11-13
-
-- Published as a test