@nypl/design-system-react-components 1.4.0-rc2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,1786 @@
1
+ # Changelog
2
+
3
+ All notable changes to this project will be documented in this file.
4
+
5
+ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
6
+ 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)
7
+ ========
8
+
9
+ ## Prerelease
10
+
11
+ ## 1.4.0 (January 26, 2023)
12
+
13
+ ### Adds
14
+
15
+ - Adds the `MultiSelect`, `MultiSelectGroup`, `FilterBar` component.
16
+ - Adds the `useMultiSelect`, `useFilterBar` hook.
17
+ - Adds the `onChangeEnd` prop in the `Slider` component.
18
+ - Adds `autocomplete` attribute to `TextInput`s with type `"tel"`, `"email"`,
19
+ and `"url"`.
20
+ - Adds docs for `Links` and `Repetitive Actions` to the `Accessibility Guide`.
21
+
22
+ ### Updates
23
+
24
+ - Updates the hex value for `ui.gray.xx-dark`, `ui.gray.xxx-dark`,
25
+ `ui.gray.xxxx-dark`, `dark.ui.bg.page`, `dark.ui.bg.hover`, `dark.ui.bg.active`,
26
+ `dark.ui.disabled.secondary`, `dark.ui.error.primary`, `dark.ui.error.secondary`,
27
+ `dark.ui.focus`, `dark.ui.link.primary`, `dark.ui.link.secondary`,
28
+ `dark.ui.status.primary`, `dark.ui.status.secondary`, `dark.ui.success.primary`,
29
+ `dark.ui.success.secondary`, `dark.ui.warning.primary`
30
+ and `dark.ui.warning.secondary`.
31
+ - Updates the layout of the category `RadioGroup` to `column` for the mobie
32
+ view of the `FeedbackBox` component.
33
+ - Updates the background color for the `"iconOnly"` and `"text"` variants of
34
+ the `Button` component.
35
+ - Updates the DOM in the header of the `FeedbackBox` component to improve
36
+ accessibility.
37
+ - Updates the `Link` component to include descriptive text for screen readers
38
+ in the component's `"external"` variant.
39
+ - Updates the `HelperErrorText` component to set the `ariaLive` default value
40
+ to `"polite"`.
41
+ - Updates the `Accessibility` details for the `Notification` component.
42
+
43
+ ### Fixes
44
+
45
+ - Fixes spacing and alignment issues in the `FeedbackBox` component.
46
+ - Fixes the width of the Privacy Policy link in the `FeedbackBox` component.
47
+ - Fixes issue where `aria-describedby` attribute was not being added to
48
+ some `TextInput`s.
49
+
50
+ ### Removes
51
+
52
+ - Removes the `Link` component warning about the deprecated `button` variant.
53
+ This change is temporary and will be reverted once teams are able to update
54
+ their `Link`s appropriately.
55
+ - Removes the `arial-label` attribute from the `CheckboxGroup` and `RadioGroup`
56
+ components for improved accessibility. Using the attribute is redundant with
57
+ the existing "screen reader only" `<legend>` element.
58
+
59
+ ## 1.3.1 (December 15, 2022)
60
+
61
+ ### Adds
62
+
63
+ - Adds the optional `isClearableCallback` prop to the `TextInput` component. This prop works with the `isClearable` prop and the passed function is invoked when the "clear" button is clicked. This is most helpful for controlled `TextInput` component implementations.
64
+
65
+ ### Updates
66
+
67
+ - Updates the background color for the `hover` state in the `secondary` variant of the `Button` component.
68
+
69
+ ### Fixes
70
+
71
+ - Fixes the z-index value of the SVG icon in the `Select` component so it does not render above other elements on a consuming application's page.
72
+
73
+ ## 1.3.0 (December 8, 2022)
74
+
75
+ This release is exactly the same as the `1.3.0-rc` release candidate published on December 2, 2022. The `rc` release was reviewed and validated.
76
+
77
+ ## 1.3.0-rc (Release Candidate December 2, 2022)
78
+
79
+ ### Adds
80
+
81
+ - Adds additional color options to `Icon` component.
82
+ - Adds reusable iconColors and iconNames arrays/types for DRYer, easier-to-update code.
83
+ - Adds the following color options to the color theme object: `ui.bg.page`, `ui.typography.inverse.body`, `ui.typography.inverse.heading`, `dark.ui.typography.inverse.body`, and `dark.ui.typography.inverse.heading`.
84
+ - Adds the `StyledList` component.
85
+ - Adds the `FeedbackBox` component, `useFeedbackBox` component hook, and `useStateWithDependencies` helper hook.
86
+
87
+ ### Updates
88
+
89
+ - Updates the data displayed on the Colors Style Guide to expand the contrast details for the `ui` and `dark.ui` color.
90
+ - Updates the `md` breakpoint to `"37.5em"`, which is equal to `"600px"`.
91
+
92
+ ### Fixes
93
+
94
+ - Adds Node environment variable to npm script that Vercel uses to build the site. This patches an error from webpack not building correctly.
95
+
96
+ ## 1.2.2 (November 10, 2022)
97
+
98
+ ### Adds
99
+
100
+ - Adds an `isClearable` prop to the `TextInput` component. When set to `true`, a close `Button` component will render on top of the input element. Once clicked, any text value in the input field will be cleared and focus will return to the input element.
101
+ - Adds the `isClearable` property to the `textInputProps` prop object in the `SearchBar` component. This allows the `isClearable` prop to be passed to the `TextInput` component to render the close `Button` component.
102
+
103
+ ### Updates
104
+
105
+ - Updates the `Icon` and `Logo` documentation to include size values in px.
106
+ - Updates the spacing within the `tertiary` variant of the `Hero` component.
107
+ - Updates the `Buttons Style Guide` to extend the information about button sizes.
108
+ - Updates the `viewport` options in Storybook to align with the Reservoir breakpoints.
109
+
110
+ ### Fixes
111
+
112
+ - Fixes an invalid TOC link on the `Card` component Storybook page.
113
+ - Fixes the sizing of the `errorFilled` and `errorOutline` icons in the `Icon` component.
114
+ - Adds new props to Chakra's `ToolTip` to more forcefully close the DS `ToolTip`. New props include `closeDelay`, `closeOnClick`, `closeOnEsc`, and `closeOnMouseDown`.
115
+
116
+ ### Removes
117
+
118
+ - Removes the `Button` component warning about the deprecated `link` variant. This change is temporary and will be reverted once teams are able to update their `Button`s appropriately.
119
+
120
+ ## 1.2.1 (October 27, 2022)
121
+
122
+ ### Adds
123
+
124
+ - Adds the `"buttonPrimary"`, `"buttonSecondary"`, `"buttonPill"`, `"buttonCallout"`, `"buttonNoBrand"`, `"buttonDisabled"` variants for the the `Link` component, set through the `type` prop.
125
+
126
+ ### Deprecates
127
+
128
+ - Deprecates the `"button"` `type` variant for the `Link` component. Use any of the new `"buttonX"` variants instead.
129
+
130
+ ### Updates
131
+
132
+ - Updates the `AlphabetFilter` component by adding `aria-label=“Filter by letter"` attribute
133
+ and removing the `role` attribute on the `<nav>` element.
134
+ - Updates `AlphabetFilter` border color for the `active letter` indicator from
135
+ `ui.gray.medium` to `ui.gray.dark`.
136
+ - Updates background styles for `Hero` component's `primary` and `campaign` variants.
137
+ - Updates the hover styles for the `Checkbox` and `Radio` components.
138
+ - Improves `TagSet` `"filter"` type accessibility by adding an `aria-label` that includes `"click to remove filter"`, when `isDismissible` is true.
139
+
140
+ ### Fixes
141
+
142
+ - Updates Storybook npm packages to fix copying documentation and table of contents heading linking.
143
+
144
+ ## 1.2.0 (October 17, 2022)
145
+
146
+ ### Adds
147
+
148
+ - Adds a variant for `NYCDOE` to the `Logo` component.
149
+ - Adds the `TagSet` component.
150
+ - Adds the `AlphabetFilter` component.
151
+ - Adds the `AudioPlayer` component.
152
+ - Adds the `requiredLabelText` prop to the `TextInput` and `Label` component.
153
+ This allows customizing the "(Required)" text for other languages.
154
+
155
+ ### Updates
156
+
157
+ - Updates the `hamburger` SVG for the `Icon` component to allow for color assignments.
158
+ - Updates `ComponentWrapper` prop `descriptionText` type to `string | JSX.Element`.
159
+
160
+ ## 1.1.2 (September 29, 2022)
161
+
162
+ ### Adds
163
+
164
+ - Adds the `size` prop to the `Button` component. The accepted values are "small",
165
+ "medium", and "large". The default size value is "medium".
166
+ - Adds the `value` prop to the `Slider` component to programmatically update the
167
+ values of the `Slider` component.
168
+ - Adds the `value` prop to the `CheckboxGroup` component to programmatically
169
+ update the values of the `Checkbox`es within it.
170
+
171
+ ### Updates
172
+
173
+ - Updates the colors for the `secondary` and `iconOnly` variants of the `Button` component.
174
+ - Updates the `Tooltip` component to remove the dropshadow effect.
175
+ - Updates whether the content inside of an `Accordion` is always rendered through the `isAlwaysRendered` prop.
176
+ - Updates the spacing of the icon and text in the `Notification` component.
177
+ - Updates the padding and placement of the links in the `Footer` component.
178
+ - Updates how content in the `Table` component is aligned.
179
+ - Updates the `Button` styles in the `Header`, `Notification`, `SearchBar`, and
180
+ `Tabs` components based on the new `size` prop.
181
+ - Updates the `content` prop of the `Tooltip` component to accept number values.
182
+
183
+ ### Removals
184
+
185
+ - Removed the `data-testid` attribute from the `Button` component.
186
+
187
+ ## 1.1.1 (September 19, 2022)
188
+
189
+ ### Adds
190
+
191
+ - Adds the `text` variant in the `Button` component.
192
+
193
+ ### Fixes
194
+
195
+ - Fixes a bug where the `defaultValue` for a `TextInput` component was not being passed correctly to the Chakra input element.
196
+
197
+ ### Deprecates
198
+
199
+ - Deprecates the `link` variant in the `Button` component.
200
+
201
+ ## 1.1.0 (Ausut 30, 2022)
202
+
203
+ This release is exactly the same as the `1.1.0-rc5` release candidate which was published and reviewed. Minor bug fixes, listed below, were made.
204
+
205
+ ### Fixes
206
+
207
+ - Fixes how the "footer" area is rendered in the `TemplateAppContainer`.
208
+ - Fixes ARIA labels in the `Footer`.
209
+
210
+ ## 1.1.0-rc5 (Release Candidate August 14, 2022)
211
+
212
+ ### Header Feature
213
+
214
+ - Adds static `Header` component with login dropdown (functionality to be added later).
215
+ - Implements focus lock in `Login` component in the `Header`'s internal `Login` component.
216
+ - Adds the `SkipNavigation` to the `Header` component.
217
+ - Adds the `SitewideAlerts` component used internally in the `Header` component. This component dynamically fetches and renders NYPL sitewide alerts.
218
+ - Adds login functionality, which includes reading cookie values with new package, js-cookie, making an API call for patron details, and showing a different UI to logged in users.
219
+ - Adds refresh login functionality, which is used when a cookie's accessToken has expired and the server responds to a request for patron details with a 401. It attempts to refresh the token and, if successful, refetches the patron's details.
220
+ - Adds the desktop search form to the `Header` component with the `SearchButton` and `SearchForm` components.
221
+ - Refactors `SearchButton` and `SearchForm` to implement the mobile search form.
222
+ - Adds the mobile navigation menu for the `Header` component with `MobileNav` and `MobileNavButton` components.
223
+ - Adds the mobile login menu for the `Header` component.
224
+ - Adds React context for the `Header`'s patron state data through `HeaderContext` and `HeaderProvider`.
225
+ - Better namespacing for Header-only components.
226
+ - Sets Header Auth links for production and development environments.
227
+ - Adds the `EncoreCatalogLogOutTimer` function to keep track of the patron's current site and when they should be logged out of Encore/Catalog after a timeout period.
228
+ - Uses legacy SVG icons for parity with the existing `Header` component.
229
+
230
+ ### Adds
231
+
232
+ - Adds `Tooltip` component.
233
+ - Adds the basic `Footer` React component and documentation. Uses "legacy" SVG icons in the `Footer` component for social media icons.
234
+ - Adds @chakra-ui/focus-lock packages to dependencies and peerDependencies.
235
+ - Adds the `useCloseDropDown` hook to manage closing dropdown-like components through clicks outside of it and by pressing the escape key.
236
+ - Adds the `react-ga` package to send Google Analytics events in the `Header` component.
237
+
238
+ ### Updates
239
+
240
+ - Updates the `onClick` event type for the `Pagination` links `onClick` function.
241
+ - Updates the `Link` component's `onClick` event type.
242
+ - Makes small, clarifying update to `Color Mode` story in Storybook.
243
+
244
+ ### Fixes
245
+
246
+ - Fixes the styling for the `Image` component in the `Hero` "secondary" variant.
247
+
248
+ ## 1.0.8 (August 11, 2022)
249
+
250
+ ### Adds
251
+
252
+ - Adds new color values under ui:
253
+ - `bg.default`, `bg.hover`, `bg.active`, `border.default`, `border.hover`, `typography.heading`, and `typography.body`.
254
+ - Adds new colors values under ui.gray:
255
+ - `xxxx-dark` and `xxx-dark`.
256
+ - Adds UI fills colors for dark mode in the codebase and also exported in the `useNYPLTheme` hook.
257
+ - Adds an optional `panelMaxHeight` prop to the `Accordion` component that determines the height of the panel and displays a scrollbar if content exceeds it.
258
+
259
+ ### Updates
260
+
261
+ - Updates color value for `xx-dark`.
262
+ - Updates the style of the TOC on the `Style Guide` pages to match the style of the TOC on the component pages.
263
+ - Updates the `Template` components to use CSS grid instead of flexbox.
264
+ - Updates the `Template` documentation with the new pattern for using individual `Template` components that go above the main `TemplateContent` component.
265
+ - Updates the `Placeholder` component's CSS to better display in the `Template` components.
266
+ - Updates how HTML attributes are passed down in the `Image` component to the HTML `img` element.
267
+ - Updates the `Accordion` so that its panel content only renders when the `Accordion` is open.
268
+
269
+ ## 1.0.7 (July 29, 2022)
270
+
271
+ ### Updates
272
+
273
+ - Updates border color in the `Description` variant of the `List` component.
274
+ - Updates how options are passed to the `SearchBar` component for its internal `Select` component.
275
+ - Updates how style props are passed to the `Link` component when using with third-party libraries, such as React Router.
276
+ - Updates the layout of the `Image` in the `Hero` "secondary" and "fiftyFifty" variants for mobile and desktop.
277
+
278
+ ## 1.0.6 (July 21, 2022)
279
+
280
+ ### Adds
281
+
282
+ - Adds the `isLazy` prop to the `Image` component which is set to `false` by default.
283
+
284
+ ### Updates
285
+
286
+ - Updates the following components to use React's `forwardRef` wrapper function to pass along refs to the correct DOM element. This is for third-party packages and components such as Chakra's `Tooltip` to work correctly.
287
+ - `Accordion`, `Breadcrumbs`, `Button`, `ButtonGroup`, `Card`, `ComponentWrapper`, `FieldSet`, `Form`, `SimpleGrid`, `Heading`, `HelperErrorText`, `Hero`, `HorizontalRule`, `Icon`, `Image`, `Label`, `List`, `Logo`, `Modal`, `Notification`, `Pagination`, `ProgressIndicator`, `SearchBar`, `SkeletonLoader`, `SkipNavigation`, `Slider`, `StatusBadge`, `StructuredContent`, `Table`, `Tabs`, `Template`, `TemplateAppContainer`, `Text`, `VideoPlayer`.
288
+ - Updates `padding-left` and `padding-right` style properties to `padding-start` and `padding-end`, respectively. Updates `margin-left` and `margin-right` style properties to `margin-start` and `margin-end`, respectively. These changes apply to inline CSS, shorthand Chakra style prop syntax, and Chakra theme file syntax. Note that `margin-start/end` and `padding-start/end` get converted to `margin-inline-start/end` and `padding-inline-start/end` respectively by Chakra UI.
289
+ - Updates the `Icon` component to include variants for legacy versions of `Account` (filled and unfilled), `Facebook`, `Instagram`, `Twitter` and `YouTube`.
290
+ - Updates the `Icon` component to include variants for `Warning` (filled and oultine).
291
+
292
+ ### Removes
293
+
294
+ - Removes the packages `@mdx-js/react` and `babel-loader` since they are not needed by Storybook.
295
+
296
+ ## 1.0.5 (July 7, 2022)
297
+
298
+ ### Adds
299
+
300
+ - Exports `ColorCard`.
301
+
302
+ ### Updates
303
+
304
+ - Updates the `Icon` component to include variants for `actionCheckCircleFilled`, `actionRegistration`, `decorativeEnvelope`, `decorativeLibraryCard` and `decorativeShoppingBag`.
305
+ - Updates the docs for the `Colors` Style Guide to include additional data related to contrast and WCAG compliance.
306
+ - Updates the `Checkbox` and `Radio` components to use `ui.gray.dark` for the default border color.
307
+ - Updates Storybook packages.
308
+
309
+ ### Fixes
310
+
311
+ - Fixes `useNYPLBreakpoints` hook so it internally controls its own state. This eliminates server/client rendering issues on its initial load.
312
+
313
+ ## 1.0.4 (June 23, 2022)
314
+
315
+ ### Adds
316
+
317
+ - Adds the `useNYPLBreakpoints` hook. This hook internally uses Chakra's `useMediaQuery` hook to get the current responsive media query breakpoint.
318
+ - Adds `ui.gray.xx-dark` to the color palette.
319
+ - Adds npm packages useful for lazy loading images in the `Image` component.
320
+ - Adds text case styles for `Text` component.
321
+ - Exports `ColorModeScript`, `cookieStorageManager`, `localStorageManager`, `useColorMode`, and `useColorModeValue` from Chakra UI for consuming application usage.
322
+ - Adds a "Color Mode" documentation page in Storybook.
323
+ - Adds `ui.white` as default background color to `Checkbox` and `Radio` components.
324
+ - Adds text case styles for `Heading` component
325
+
326
+ ### Updates
327
+
328
+ - Updates the `Logo` component to include a variant for `MLN Color`.
329
+ - Updates the `Icon` component to include variants for `Facebook`, `Instagram`, `Tumblr`, `Twitter` and `YouTube`.
330
+ - Updates the `Icon` component to include variants for `Building`, `Exit`, `Locator`, `Power` and `Settings`.
331
+ - Updates to Storybook version 6.5.
332
+ - Explicitly sets the default color mode value to `"light"`.
333
+ - Updates how the `styles.scss` and `resources.scss` files are organized and compiled so that they can be imported in any tech stack.
334
+ - Updates the docs for the `Table` commponent to remove the example that does not include column headers.
335
+ - Updates the `Button`, `Select` and `TextInput` components to use NYPL standard minimum height in mobile viewport.
336
+ - Updates the `SearchBar` component to change how the width of the internal `Select` component is handled.
337
+
338
+ ### Fixes
339
+
340
+ - Fixes the styles for the sub-labels in the `DatePicker` component.
341
+
342
+ ## 1.0.3 (June 9, 2022)
343
+
344
+ ### Adds
345
+
346
+ - Adds prop validation for the `TextInput` "number" type for the `min` and `max` props.
347
+ - Adds `min` and `max` prop value validation for the `Slider` component, including in the "range" mode.
348
+
349
+ ### Updates
350
+
351
+ - Updates the `TemplateAppContainer`'s responsive styles for its sidebar component.
352
+ - Updates how the `Radio`'s label is hidden when the `showLabel` prop is set to "false" to fix the "no label" accessibility issue.
353
+ - Updates the `Logo` component to include new variants for `NYPL Text Only`.
354
+ - Updates the `Card`'s full-click functionality styling for its wrapper element.
355
+ - Updates how the `Card`'s `Image` component is displayed in the mobile view; sizes and aspect ratios are maintained instead of always displaying as 100% width.
356
+ - Updates hover style to add right border color on hover for `Select` element.
357
+ - Updates the `Table` component to be responsive for a mobile viewport.
358
+ - Updates the `Table` component to make the `columnHeaders` prop required.
359
+
360
+ ### Fixes
361
+
362
+ - Fixes the border color for the `Accordion` button.
363
+ - Fixes a false warning message logged from the `Table` component.
364
+ - Fixes the background color for the `Toggle` button.
365
+
366
+ ## 1.0.2 (June 1, 2022)
367
+
368
+ ### Adds
369
+
370
+ - Adds `noSpace` prop to the `Heading` component.
371
+ - Adds validation for equal headers and data column to the `Table` component.
372
+ - Adds `className`, `helperTextStyles`, and `showHelperInvalidText` props to the `ComponentWrapper` component.
373
+
374
+ ### Updates
375
+
376
+ - Updates the `fontSize` and `padding` attributes in the single variant of the `Accordion` component.
377
+ - Updates all QA urls from Tugboat QA to Vercel.
378
+ - Updates the `Logo` component to include new variants for `Apple App Store`, `Clever Badge` and `Google Play`.
379
+ - Pins the Chakra UI "react" and "system" packages to a certain range since Chakra v2 uses React 18 and creates backwards compatibility issues.
380
+ - Updates buttons setup as icon only to get the same hover styles as `secondary` button in the `Button` component.
381
+ - Updates and refactors the `Checkbox`, `Radio`, `Select`, `Slider`, `TextInput` and `Toggle` components to use the `ComponentWrapper` component for similar DOM structure.
382
+ - Updates how `CheckboxGroup` and `RadioGroup` handle `Checkbox` and `Radio` components when `isFullWidth` is true and there is JSX as labels.
383
+
384
+ ### Fixes
385
+
386
+ - Fixes how `Image`s are rendered with a non-default `aspectRatio` value and with a `caption` value or a `credit` value or both.
387
+ - Fixes the extra margin added by the `SkipNavigation` component.
388
+ - Updates various component implementations in Storybook documentation pages to remove inadvertent console errors and warnings.
389
+ - Fixes sizing in the `Card` component for the "body" and "right" sections when the `isAlignedRightActions` prop is set to `true`.
390
+ - Allows `Button`s in the `ButtonGroup` to manage their own `isDisabled` state.
391
+ - Fixes how the `onChange` prop is set in `Checkbox` so it only gets called once per rendering.
392
+
393
+ ## 1.0.1 (May 31, 2022)
394
+
395
+ _NOTE_: This version number was previously released in 2019 and is marked as deprecated in npm. The next version bump from `1.0.0` is `1.0.2`.
396
+
397
+ ## 1.0.0 (May 12, 2022)
398
+
399
+ This is the first stable release of the NYPL Reservoir Design System! We've been looking forward to this moment for over two years.
400
+
401
+ ### Updates
402
+
403
+ - Updates all links throughout the documentation to point to the new production URLs.
404
+
405
+ ## 0.28.0 (May 9, 2022)
406
+
407
+ ### Adds
408
+
409
+ - Adds `max`, `maxLength`, `min`, and `onClick` props to the `TextInput` component.
410
+ - 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.
411
+ - Adds the `ButtonGroup` component for `Button` layout.
412
+
413
+ ### Updates
414
+
415
+ - 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.
416
+ - Updates how the `id` is passed in the `DatePicker`'s custom `TextInput` component.
417
+ - 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`.
418
+ - Updates the spacing for caption and credit text from `margin-bottom` to `margin-top` in `Image` component
419
+ - Updates how the `DatePicker` and `Slider` components internally use `TextInput`.
420
+ - Updates how the `Pagination` component internally uses `Link`.
421
+ - Updates how the `Tabs` component internally uses `Button`.
422
+ - 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.
423
+ - Updates the values for the `name` prop for the `Icon` and `Logo` components.
424
+ - Updates the `Table` component to allow JSX elements to be rendered in the data cells.
425
+
426
+ ### Removals
427
+
428
+ - Removes the `additionalStyles` attributes from the `Breadcrumbs`, `Button`, `Heading`, `HelperErrorText`, `Icon`, `Link`, `List`, `Logo`, `Select`, `TextInput`, and `Toggle` components.
429
+ - Removes `getVariant` and `getStorybookEnumValues` helper functions.
430
+ - Removes all Typescript enum objects in favor of string literal types.
431
+ - Remove the bottom margin attribute that is applied to the parent element for the `Select` component.
432
+ - Removes the `attributes` prop from: `Button`, `Link`, and `TextInput` components.
433
+
434
+ ## 0.27.0 (April 27, 2022)
435
+
436
+ ### Adds
437
+
438
+ - 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.
439
+ - Adds `@chakra-ui/storybook-addon` so stories automatically pick up the Chakra-based NYPL theme.
440
+
441
+ ### Updates
442
+
443
+ - Updates React and React DOM to version 17.
444
+ - Updates Chakra packages `@chakra-ui/react` and `@chakra-ui/system`.
445
+ - Updates the `HelperErrorText` styling to correctly display when used with a `Select` element with a `labelPosition` of inline.
446
+
447
+ ### Removals
448
+
449
+ - Removes the following packages: `@storybook/addon-queryparams` and `react-router-dom`.
450
+
451
+ ## 0.26.1 (April 22, 2022)
452
+
453
+ ### Updates
454
+
455
+ - Updates storybook URL from /reservoir/v0_26 to /reservoir/v0.]
456
+ - Updates the `Header`'s bottom navigation links to be underlined and red when hovered.
457
+
458
+ ### Fixes
459
+
460
+ - Adds updated package-lock file to fix bad installations.
461
+
462
+ ## 0.26.0 (April 22, 2022)
463
+
464
+ ### Adds
465
+
466
+ - Exports the `useCarouselStyles` and `useWindowSize` hooks and adds documentation for all hooks in Storybook.
467
+ - Adds additional semantic design tokens from `fontWeights` and `fontSizes` to the `useNYPLTheme` hook.
468
+ - 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`.
469
+ - Adds the `isRequired` prop to the `Label` component.
470
+ - Adds the `labelPosition` prop to the `Select` component, so that the label can be styled inline with the select input.
471
+ - 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.
472
+ - Adds the functionality to pass all valid HTML attributes to a Reservoir component, such as `data-*` props.
473
+ - Adds semantic design tokens for `spacing` theme object.
474
+ - 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.
475
+ - Adds styles to target native HTML basic elements inside the `StructuredContent` component.
476
+ - Adds `Reservoir` branding to Storybook.
477
+
478
+ ### Changes
479
+
480
+ - Updates the hex color value for `ui.gray.light-cool`, `ui.disabled.primary` and `section.blogs.primary`.
481
+ - Updates the default background color used in the `Accordion` component.
482
+ - Updates the default background color used in the `Hero` component.
483
+ - Updates the background color used in the `SkeletonLoader` component.
484
+ - Updates the background color used in the `VideoPlayer` component.
485
+ - Updates the background colors used in the `Tabs` component.
486
+ - Updates the colors for "secondary" and "pill" variants of the `Button` component.
487
+ - Updates the color values used in the `disabled` state for the `Checkbox`, `Radio`, `Select`, `Slider`, `TextInput` and `Toggle` components.
488
+ - Updates the `Checkbox` component to use "3px" for the border radius.
489
+ - Makes the id prop required for all "Form Elements".
490
+ - 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)`.
491
+ - Renames the `optReqFlag` prop to `showRequiredLabel` in the `CheckboxGroup`, `Fieldset`, `RadioGroup`, and `Slider` components.
492
+ - Renames the `showOptReqLabel` prop to `showRequiredLabel` in the `DatePicker`, `Select`, and `TextInput` components.
493
+ - Uses the design token "text.caption" variable for the `Notification`'s font size.
494
+ - Updates the styling for the `HelperErrorText` to be consistent for all components that use it
495
+ - Refactors the `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Fieldset`, `Label`, `Radio`, `RadioGroup`, `Select`, `Slider`, `TextInput`, and `Toggle` to better use the updated `HelperErrorText` styling.
496
+ - Renames the `Card`'s `center` prop to `isCentered` and `border` prop to `isBordered`.
497
+ - Renames the `SkeletonLoader` component's `border` prop to `isBordered`.
498
+ - 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.
499
+ - Updates the `Fieldset` component to render the "Optional"/"Required" text in the `legend` element as pseudo CSS in the `::after` rule.
500
+ - Passes the `isRequired` prop in the `RadioGroup` and `CheckboxGroup` to the `Fieldset` wrapper component.
501
+ - Updates the `focus` styles for the `Radio`, `Select` and `TextInput` components.
502
+ - 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.
503
+ - Updates styles for `React Datepicker`'s calendar popup in the `DatePicker` component.
504
+ - Updates storybook URL from /storybook-static/ to /reservoir/v0_26.
505
+ - Updates all references to "design system" in the Storybook documentation to include "Reservoir" in the name of the design system.
506
+ - Updates language on the `Welcome` page.
507
+
508
+ ### Removals
509
+
510
+ - Removes the default `Optional` text displayed in the `Label` and `Fieldset` components.
511
+ - Removes the `optReqFlag` prop in the `Label` component.
512
+ - Removes the default autogenerated id for all components, as well as the `uuid` package.
513
+ - 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`.
514
+
515
+ ### Fixes
516
+
517
+ - Fixes how the `Button` component gets rendered inside the `Form` and `FormField` component layout.
518
+ - Fixes how the `Select` component is controlled in the `SearchBar` component.
519
+
520
+ ## 0.25.13 (April 1, 2022)
521
+
522
+ ### Adds
523
+
524
+ - 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.
525
+ - Adds an `Accessibility Guide` section to Storybook with a "Skip Navigation" page.
526
+ - 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.
527
+ - Adds an optional key – `accordionType` to the `Accordion`'s `contentData` prop, which allows users to switch the background color of the `Accordion`'s button.
528
+ - Created new `LayoutTypes` enum for row and column layouts.
529
+ - Adds the value "Default" to the `IconSizes` enum.
530
+
531
+ ### Changes
532
+
533
+ - Updates Storybook's sidebar categories and documentation.
534
+ - Updates the `Image`'s caption font size to "12px" (`text.tag`).
535
+ - Updates the `Checkbox`'s and `Radio`'s `labelText` prop to accept strings and JSX Elements.
536
+ - Updates the `Toggle`'s internal styling for the default and small sizes.
537
+ - Updates the `Accordion` button's background color when expanded, adds a border color when hovered over, and adjusts the padding.
538
+ - Updates the `CardImage`'s margin bottom in the row and column layouts for mobile to be the same.
539
+ - Updates the `CardImage` to have width 100% on mobile regardless of size.
540
+ - Updates all the console warnings with consistent NYPL branding prefix label.
541
+ - Renames the `Accordion` prop `contentData` to `accordionData`.
542
+ - Renames the `Breadcrumbs` prop `colorVariant` to `breadcrumbsType`.
543
+ - Renames the `Card` prop `center` to `isCentered`.
544
+ - Updates the `Card` prop `layout` to use the `LayoutTypes` enum instead of `CardLayouts`.
545
+ - Updates the `CheckboxGroup` prop `layout` to use the `LayoutTypes` enum instead of `CheckboxGroupLayoutTypes`.
546
+ - Renames the `Heading` prop `displaySize` to `size.
547
+ - Renames the `HeadingDisplaySizes` enum to `HeadingSizes.
548
+ - Renames the `Hero` prop `image` to `imageComponent`.
549
+ - Renames the `Image` prop `imageSize` to `size`.
550
+ - Renames the `Notification` prop `centered` to `isCentered`.
551
+ - Updates the `RadioGroup` prop `layout` to use the `LayoutTypes` enum instead of `RadioGroupLayoutTypes`.
552
+ - Internal updates to the `SearchBar` component based on updates from the `Select` and `TextInput` components.
553
+ - Renames the `Select` prop `type` to `selectType`.
554
+ - Updates the `SkeletonLoader` prop `layout` to use the `LayoutTypes` enum instead of `SkeletonLoaderLayouts`.
555
+ - Renames the `StructuredContentImage` prop `imageSize` to `size` (this component is based on the `Image` component).
556
+ - Internal updates to the `StructuredContent` component based on updates from the `Image` and `Heading` components.
557
+ - Renames the `Tabs` prop `contentData` to `tabsData`.
558
+ - Renames the `Text` prop `displaySize` to `size`.
559
+ - Renames the `TextInput` prop `variant` to `textInputType`.
560
+ - 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.
561
+ - Updates the `Hero` prop `image` to `imageAlt` and `imageSrc`. Internally, an `Image` component is created.
562
+ - Renames the `Image` component props `imageAspectRatio` to `aspectRatio`, `imageCaption` to `caption`, and `imageCredit` to `credit`.
563
+ - 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.
564
+ - Renames the `ToggleSizes.tsx` file to `ToggleTypes.tsx`. Updates the values from `Large` and `Small` to `Default` and `Small`.
565
+ - Minor update to the logic for the `ProgressIndicator` sizing prop and styles.
566
+
567
+ ### Fixes
568
+
569
+ - Fixes bug where the Next button in `Pagination` would navigate to the previous page.
570
+ - Fixes the alignment of the first link in the `Pagination` component.
571
+ - Fixes the `Breadcrumbs`' SVG arrow icon fill color for the "Blogs" variant.
572
+ - Fixes the margin right value for list items in the `List` component for the inline style.
573
+ - Fixes bug in the `Select` component where the SVG arrow hides when the component is focused.
574
+ - Fixes the extra bottom spacing in the `HeroTypes.Campaign` `Hero` variant for the mobile view.
575
+ - 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.
576
+
577
+ ### Removals
578
+
579
+ - Removes the `CardLayouts`, `CheckboxGroupLayoutTypes`, `RadioGroupLayoutTypes`, and `SkeletonLoaderLayouts` enums.
580
+ - Removes the `CardTypes.tsx`,` CheckboxGroupLayoutTypes.tsx`, and `RadioGroupLayoutTypes.tsx` files.
581
+
582
+ ## 0.25.12 (March 18, 2022)
583
+
584
+ ### Adds
585
+
586
+ - Adds `Education` section colors to the color palette theme object.
587
+ - Adds a `currentPage` prop to the `Pagination` component, a value that updates the selected page programmatically without the user explicitly requesting it.
588
+
589
+ ### Changes
590
+
591
+ - Removes the margin from the global `.nypl p` CSS rule.
592
+ - Updates the top and bottom margin of the `List`'s `Unordered` and `Ordered` types.
593
+ - Updates the `Notification`'s icons to be decorative by default.
594
+ - Updates the default placeholder value for the `SearchBar`'s `TextInput` component.
595
+ - Updates the `SearchBar`'s `textInputProps` prop object to not require the `placeholder` property.
596
+ - Updates the `Logo` component to include new variants for `FirstBook` and `Open eBooks`.
597
+ - Updates the border and text styles for the `Select` component.
598
+ - Updates the `Breadcrumbs` component to inlcude an `Education` color variant.
599
+ - Updates the `Icon` component to include the `Education` color values.
600
+ - Updates the default font stack to fix a typo that was disabling `sans-serif` in the stack.
601
+ - Removes the `.nypl-ds` CSS class from the base SCSS file, from the `TemplateAppContainer` component, from the Storybook configuration, and from the entire repo.
602
+ - Moves the base styles from the SCSS global file to the Chakra theme global JS object.
603
+ - Updates the label font size for the `Radio` and `Checkbox` components to be "label.default".
604
+
605
+ ### Fixes
606
+
607
+ - Fixes the styles for the `Slider` to better accomodate the slider thumbs and the width of the container.
608
+ - Updates the alignment of the `Notifications`'s dismissible icon.
609
+ - Fixes the border and padding from the `fieldset` HTML element by removing it.
610
+ - Fixes alignment for long labels in the `Checkbox` and `Radio` components.
611
+ - Fixes the line height for long labels in the `Toggle` component.
612
+
613
+ ## 0.25.11 (March 3, 2022)
614
+
615
+ ### Updates
616
+
617
+ - Updates the `Logo` component to include new variants for `BPL`, `Clever`, `LPA`, `MLN`, `QPL`, `Schomburg`, `SimplyE` and `Treasures`.
618
+ - Updates font size to "12px" and top margin to "4px" for `HelperErrorText` component.
619
+ - Updates font size to "14px" for `TextInput` component.
620
+ - 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.
621
+ - 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.
622
+ - Updates a log message in the `Icon` component to be more descriptive.
623
+ - Updates the mobile styles for the image in the `StructuredContent` component.
624
+ - Updates the prop type for the "Definition" `List` type so DOM elements can be passed in the definition.
625
+
626
+ ### Fixes
627
+
628
+ - 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.
629
+ - Updates how `TabList` and `TabPanels` are returned in the `Tabs` component so no false log messages are consoled.
630
+ - Updates `List` component styling for inline.
631
+
632
+ ## 0.25.10 (February 22, 2022)
633
+
634
+ ### Adds
635
+
636
+ - Exports Chakra's `Flex` and `Spacer` components.
637
+ - Adds `TemplateAboveHeader` component in the set of "template" components.
638
+ - Adds the `aboveHeader` prop to the `TemplateAppContainer` component to render a `TemplateAboveHeader` component immediately before the `TemplateHeader` component.
639
+ - Adds the `additionalStyles` prop to the `Select` component.
640
+
641
+ ### Breaking Changes
642
+
643
+ - Renames the `Form` component's `"spacing"` prop to `"gap"` to be consistent with the `FormRow` and `FormField` components.
644
+ - Renames the `FormSpacing` enum to `FormGaps`.
645
+
646
+ ### Changes
647
+
648
+ - Passes an `onChange` prop to the `Select` component inside the `SearchBar` through its `selectProps` prop.
649
+ - 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.
650
+ - Updates the `Form` component to warn developers when a child component in the `FormRow` component _is not_ a `FormField`.
651
+ - Adds an `onSubmit` prop to the `Form` component.
652
+ - 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.
653
+ - Updates the `Fieldset` and `RadioGroup` so the `children` prop is declared through `React.PropsWithChildren` rather than in their respective prop interfaces.
654
+ - Adds snapshot tests for the `Accordion` component, as well as `id` props to the components within the `Accordion` so snapshot tests pass.
655
+ - Passes an `id` to the `Icon` in the `Select` component.
656
+ - Adds snapshot tests for the `Select` component.
657
+
658
+ ### Fixes
659
+
660
+ - Fixes `id` propagation issues in the `SearchBar` component and its children DS components.
661
+ - 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.
662
+ - Exports the `FullDateType` interface related to the `DatePicker` component.
663
+ - Fixes and removes bad console logs from the `Pagination` and `List` components.
664
+ - Fixes auto-generated `id`s in the `Tabs` component.
665
+ - Fixes the Figma link for the `Hero` component.
666
+ - Fixes `Card` component bug for passing styles to the `CardHeading` correctly.
667
+ - Fixes the `Table` component so that a custom header text color of white does not visually hide row headers on a white background.
668
+
669
+ ### Updates
670
+
671
+ - Updates the following packages: multiple `@storybook/...` packages, `autoprefixer`, `eslint-plugin-storybook`, `husky`, `lint-staged`, `semantic-release-slack-bot`, `storybook-addon-designs`.
672
+ - Removed the following packages: `postcss`, `pretty-quick`.
673
+ - Added `@chakra-ui/react`, `@chakra-ui/system`, `@emotion/react`, `@emotion/styled`, and `framer-motion` as "peerDependencies".
674
+ - Updates the node version in Github Action workflows from Node v12 to Node v14.
675
+ - Updates how `/dist/resources.scss` is created through gulp.
676
+
677
+ ## 0.25.9 (February 3, 2022)
678
+
679
+ ### Adds
680
+
681
+ - Adds the `Logo` component.
682
+ - Adds the `noBrandButtonType` boolean prop to the `SearchBar` component to render the `NoBrand` `Button` variant style.
683
+ - Adds element-specific design tokens for `fontSizes` and `fontWeights`.
684
+ - Adds the `StructuredContent` component.
685
+ - Adds the `additionalImageStyles` and `additionalFigureStyles` props to the `Image` component to specifically target the `img` element's style and the `figure` HTML elements.
686
+ - Adds the `Table` component.
687
+
688
+ ### Breaking Changes
689
+
690
+ - Completely removes the `CardEdition` and `Input` components and related files and references.
691
+ - Removes all references of the `BEM` CSS pattern.
692
+ - Removes all references to logos from the `Icon` component.
693
+ - Removes passing in text to the `HelperErrorText` component as children. Now, the `text` prop is used to render its text.
694
+ - Renames the `SearchBar`'s `helperErrorText` prop to `helperText` to be consistent with other components.
695
+
696
+ ### Changes
697
+
698
+ - 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.
699
+ - Minor change to the `Notification`'s heading component so it adds a proper id to `NotificationHeading`.
700
+ - Updates the `Heading` component to use the DS `Link` component rather than Chakra's `Link` component.
701
+ - 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.
702
+ - Updates the `SearchBar` component to now be implemented with the `ComponentWrapper` component.
703
+ - 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.
704
+ - Renames `additionalStyles` prop to `additionalWrapperStyles` in the `Image` Component.
705
+ - Updates the label text style in the disabled state of the `Toggle` component.
706
+ - Updates the `Card` component so it gives a bottom margin to the `Image` component when the `imageAspectRatio` prop is set to `ImageRatios.Original`.
707
+ - Updates the `TextInput` component to use a white background for `static`, `error` and `focus` states.
708
+ - Updates `Select` component to use a white background for `static`, `error` and `focus` states.
709
+ - Updates the `Template` component to use `s` (16px) spacing on the left and right sides of the main content area.
710
+ - Updates the `HelperErrorText` component to allow HTML to be passed in as a string or HTML.
711
+ - Updates how the `HelperErrorText` component renders text in the following components: `Checkbox`, `CheckboxGroup`, `ComponentWrapper`, `DatePicker`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `Slider`, `TextInput`, `Toggle`, `VideoPlayer`.
712
+ - Updates the `HorizontalRule` component to use "100%" as the default value for the `width` prop.
713
+
714
+ ### Fixes
715
+
716
+ - Fixes the styling of custom anchor elements when passed as a child in the `Link` component.
717
+ - 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.
718
+ - Fixes the Storybook `level` prop value for the `Heading` component so it updates the component.
719
+ - 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.
720
+
721
+ ## 0.25.8 (January 6, 2022)
722
+
723
+ ### Adds
724
+
725
+ - Adds `embedCode` prop to `VideoPlayer` component.
726
+ - Adds export statements for `ProgressIndicatorSizes` and `ProgressIndicatorTypes` enums to `index.ts`.
727
+ - Adds `ExtraSmall` and `ExtraExtraSmall` size variants to the `Image` component.
728
+ - Adds `ExtraSmall` and `ExtraExtraSmall` size variants for `CardImage` in the `Card` component.
729
+ - Adds `AlertNotificationImportant` icon to `Icon` component.
730
+ - Adds `Toggle` component.
731
+ - Adds `xxxs` (2px) spacing option to DS design tokens.
732
+ - Adds `external` variant to `Link` component.
733
+
734
+ ### Changes
735
+
736
+ - Changes category for `Table` component from `Basic Elements` to `Page Layout`.
737
+ - Updates the background color for the `Locations` variant in the `Breadcrumbs` component from `section.locations.secondary` to `section.locations.primary`.
738
+ - Updates the `Notification` component to show the `AlertNotificationImportant` icon for the `Standard` variant.
739
+ - Reduces the bottom margin on labels and legends for form components from "16px" to "8px", or "s" to "sx" in Chakra-theme variables.
740
+ - Updates docs for Chakra `Grid` component to use theme object values rather than CSS variables.
741
+ - Updates the spacing in the `Notification` component to improve the alignment of the icon and text elements.
742
+ - Updates the `Notification` component to optionally display/hide the `Icon` in the heading or content area.
743
+ - Updates the `ComponentWrapper` component to allow the internal `HelperErrorText` component to get set in the invalid state. Also added tests for this component.
744
+
745
+ ### Fixes
746
+
747
+ - 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.
748
+ - Updates the `Select` component's controlled state so that an initial empty `value` prop is acceptable.
749
+
750
+ ## 0.25.7 (December 20, 2021)
751
+
752
+ ### Fixes
753
+
754
+ - Removes `<=12.22` from node engine in `package.json` to reduce installation issues.
755
+
756
+ ## 0.25.6 (December 16, 2021)
757
+
758
+ ### Adds
759
+
760
+ - Adds export statements for `ProgressIndicator` and `Slider` components to `index.ts`.
761
+ - Adds `Blogs` variant to `Breadcrumbs` component.
762
+ - Adds the `placeholder` prop to the `Select` component.
763
+
764
+ ### Changes
765
+
766
+ - Adds "(Required)" text to the placeholder in the `SearchBar` component when `isRequired` is true.
767
+
768
+ ## 0.25.5 (December 9, 2021)
769
+
770
+ ### Fixes
771
+
772
+ - 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`.
773
+
774
+ ## 0.25.4 (December 9, 2021)
775
+
776
+ ### Adds
777
+
778
+ - Adds the `ProgressIndicator` component.
779
+ - Adds documentation for using `NYPL Design Tokens`.
780
+ - Adds the `ActionHelpDefault`, `ActionHelpOutline` and `ActionLaunch` icons to the `Icon` component.
781
+ - Adds the DS `Slider` component based on the Chakra `Slider` and `RangeSlider` components.
782
+ - Adds the `ButtonTypes.NoBrand` variant to the `Button` component.
783
+ - Adds the `additionalStyles` prop to the `Breadcrumbs` component.
784
+
785
+ ### Changes
786
+
787
+ - Updates the organization of SCSS files by deleting some files and combining others.
788
+ - Updates `@chakra-ui/react` to version 1.7.1 and `@chakra-ui/system` to version 1.8.1.
789
+ - Updates the `TextInput` component to now have `defaultValue` and `step` props.
790
+ - Updates `Latest Version` number for `Image`, `Notification` and `Pagination` components.
791
+ - Removes the Storybook "Knobs" addon.
792
+ - Updates the margin for labels in the `DatePicker` component when it is in the "date range" state.
793
+ - Updates the `DatePicker` component to have proper form spacing when in the "date range" state.
794
+ - Updates the `Tabs` component to comply with linting rules -- no functional or visual changes were made.
795
+ - Removes the `alignText` prop from the `Notification` component. Storybook was incorrectly displaying `alignText` as an available prop.
796
+
797
+ ### Fixes
798
+
799
+ - Exports components and variables that were initially missed when they were added: `ColorVariants`, `Fieldset`, `IconAlign`, `StatusBadgeTypes`,
800
+ - Fixes `SearchBar` by passing necessary props down to its `TextInput` through the `textInputProps` prop.
801
+ - Fixes `DatePicker` component unit tests.
802
+ - 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.
803
+
804
+ ### Breaking Changes
805
+
806
+ - 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.
807
+ - Changes the `Button`'s `disabled` prop to `isDisabled`.
808
+ - 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.
809
+
810
+ ### Deprecates
811
+
812
+ - Deprecates the `Input` component. The `Input` component will be removed from the NYPL Design System React Library in the first release of January 2022.
813
+ - Deprecates the `CardEdition` component. The `CardEdition` component will be removed from the NYPL Design System React Library in the first release of January 2022.
814
+
815
+ ## 0.25.3 (November 18, 2021)
816
+
817
+ ### Adds
818
+
819
+ - Adds the `ImageRatios`, `ImageSizes`, and `ImageTypes` enums.
820
+ - 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.
821
+ - 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".
822
+ - Adds new file type SVG files to use in the `Icon` component: Audio, Doc, GenericDoc, Image, PDF, Spreadsheet, Video.
823
+ - Adds `ActionCheckCircle` SVG file to use in the `Icon` component.
824
+
825
+ ### Changes
826
+
827
+ - Updates the Github Action for the changelog reminder.
828
+ - Updates the `Checkbox` component with an "indeterminate" state through the `isIndeterminate` prop.
829
+ - Updates the `CheckboxGroup` component story with an "indeterminate" state example.
830
+ - Updates the `CheckboxGroup` and `RadioGroup` components to use the `Fieldset` component.
831
+ - Updates the `HelperErrorText` and `TextInput` components with added `additionalStyles` prop.
832
+ - Updates the `Button` Style Guide documentation.
833
+ - Updates the `Iconography` Style Guide story documentation.
834
+ - Updates the `Button` font weight to "regular".
835
+
836
+ ### Fixes
837
+
838
+ - Fixes nondeterministic unit test in the `DatePicker` component.
839
+ - Version of latest `List` component release in its storybook page.
840
+ - 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.
841
+ - Fixes styling issues for the `Notification` dismissible button.
842
+ - Fixes `SearchBar` mobile styling for the `Select`, `TextInput`, and `Button` components.
843
+ - Fixes `SearchBar` focus flicker when the `Select` component is selected.
844
+
845
+ ### Breaking Changes
846
+
847
+ - Updates the `Notification` component to fix the custom icon alignment.
848
+ - Adds the `title` prop to the `Icon` component to render a `title` HTML element for accessible SVG icons.
849
+ - 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.
850
+ - Updates the `errorText` prop to `invalidText` for the `Checkbox` component.
851
+ - 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.
852
+ - 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`.
853
+ - 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.
854
+ - 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.
855
+ - 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.
856
+ - Removes deprecated CSS variables. Now the DS repo only uses the CSS variables exposed by Chakra that contain the `--nypl` prefix.
857
+
858
+ ## 0.25.2 (October 28, 2021)
859
+
860
+ ### Adds
861
+
862
+ - Adds custom `useCarouselStyles` hook for the `Tabs` mobile carousel functionality.
863
+ - Adds custom NYPL-theme radii values to use within Chakra, mostly for border radius values.
864
+ - Adds the `showHelperInvalidText` prop to form components to control displaying or hiding the content in the `HelperErrorText` component.
865
+ - Adds `useNYPLTheme` hook for consuming applications to use NYPL DS values.
866
+ - Adds the DS `ComponentWrapper` helper component for internal use.
867
+ - Adds `useWindowSize` hook for responsive styles and functionality.
868
+ - Adds Chakra Migration Guide for version `0.25.0` and greater.
869
+
870
+ ### Changes
871
+
872
+ - Updates the CSS vars name prefix to use `nypl`.
873
+ - Updates documentation in the README and updates the issue contribution template.
874
+ - Updates the following components to use the `showHelperInvalidText` prop: `Checkbox`, `CheckboxGroup`, `DatePicker`, `Radio`, `RadioGroup`, `SearchBar`, `Select`, `TextInput`, `VideoPlayer`.
875
+
876
+ ### Breaking Changes
877
+
878
+ - 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.
879
+ - Composes the DS `HelperErrorText` component with Chakra. BEM related props `modifiers` and `blockname` have been removed. The `isError` prop has been renamed to `isInvalid`.
880
+ - Composes the DS `VideoPlayer` component with Chakra. BEM related prop `modifiers` has been removed.
881
+ - Composes the DS `HorizontalRule` component with Chakra. BEM related prop `modifiers` has been removed, as well as the `attributes` prop.
882
+ - 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.
883
+
884
+ ## 0.25.1 (October 14, 2021)
885
+
886
+ ### Adds
887
+
888
+ - Updates the `Accordion` component to internally use Chakra components.
889
+ - Adds DS `SimpleGrid` component composed from Chakra's `Simplegrid` component.
890
+ - Adds DS `Text` component composed from Chakra's `Text` component.
891
+ - Update the NYPL Colors with updated color names and values.
892
+ - Composes the DS `TextInput` component from Chakra's `Input` and `Textarea` components.
893
+ - Composes the DS `Select` component from Chakra's `Select` component.
894
+ - Composes the DS `Hero` component from Chakra's component.
895
+ - Composes the DS `CheckboxGroup` component from Chakra's `CheckboxGroup` component.
896
+ - Composes the DS "Template" components (`Template`, `TemplateHeader`, `TemplateBreakout`, `TemplateContent`, `TemplateContentPrimary`, `TemplateContentSidebar`, `TemplateFooter`) from Chakra's `Box` component for page layouts through children components.
897
+ - Composes the DS `TemplateAppContainer` component from Chakra's `Box` component for page layouts through props.
898
+ - Composes the DS `Link` component with Chakra component and fixes the `Button` type.
899
+ - Exports Chakra's `Grid` and `GridItem` components.
900
+ - Composes the DS `Label` component with Chakra component and updates the font size.
901
+ - Composes the DS `StatusBadge` component from Chakra's component.
902
+ - Composes the DS `Forms` component using DS and Chakra components.
903
+ - Composes the DS `Icon` component with Chakra's `Icon` component. Added new props for `Icon` sizing, alignment, name, and rotation.
904
+ - Composes the DS `SearchBar` component from DS `Select`, `TextInput`, `Button`, and `HelperErrorText` components.
905
+ - Composes the DS `Breadcrumbs` component from Chakra's `Breadcumb`, `BreadcrumbItem` and `BreadcrumbLink` components.
906
+
907
+ ### Changes
908
+
909
+ - Updates spacing values to use NYPL spacing rather than "em"s.
910
+ - Updates the `SkeletonLoaderLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
911
+ - Updates the `CardLayouts` enum values from `Horizontal` and `Vertical` to `Row` and `Column`, respectively.
912
+ - Updates font size of the `legend` element used in `CheckboxGroup`, `DatePicker` and `RadioGroup`.
913
+ - Updates the radius values through Chakra's theme object.
914
+
915
+ ## 0.25.0 (September 30, 2021)
916
+
917
+ ### Breaking Changes
918
+
919
+ - Renames `HeadingDisplaySizes.tsx` to `HeadingTypes.tsx`.
920
+
921
+ ### Adds
922
+
923
+ - Integrates Chakra-UI into the codebase.
924
+ - Moved SCSS and CSS variable styles into a custom NYPL theme to extend Chakra's base theme.
925
+ - Adds `DSProvider` component to use the NYPL theme in consuming applications.
926
+ - Exports Chakra's `Box`, `Center`, `Circle`, `Square`, `Stack`, `HStack`, and `VStack` components.
927
+ - Composes the DS `Button` component from Chakra's `Button` component.
928
+ - Composes the DS `Heading` component from Chakra's `Heading` component.
929
+ - Composes the DS `Tabs` component from Chakra's `Tabs`, `TabList`, `Tab`, `TabPanels`, and `TabPanel` components.
930
+ - Composes the DS `Radio` component from Chakra's `Radio` component.
931
+ - Composes the DS `RadioGroup` component from Chakra's `RadioGroup` component.
932
+ - Composes the DS `Checkbox` component from Chakra's `Checkbox` component.
933
+ - Updates the `errorText` prop name to `invalidText`.
934
+
935
+ ### Removes
936
+
937
+ - Removes the `color-classes` SCSS mixin.
938
+
939
+ ### Changes
940
+
941
+ - Updates the development preview URL from the Netlify link to the Tugboat QA link.
942
+
943
+ ## 0.24.1
944
+
945
+ ### Adds
946
+
947
+ - Adds `FormSpacing` enum to DS exports.
948
+ - Adds `utility_account_filled`, `utility_account_unfilled`, `utility_hamburger` and `utility_search` icons to `Icon` component.
949
+
950
+ ### Changes
951
+
952
+ - Updates `General Guidelines` for `Buttons Style Guide`.
953
+
954
+ ### Fixes
955
+
956
+ - Fixes left padding on `Card` when `imageAtEnd` and `border` are both `true`.
957
+
958
+ ## 0.24.0
959
+
960
+ ### Breaking Changes
961
+
962
+ - Renames original `Card` components to be `CardEdition`.
963
+
964
+ ### Adds
965
+
966
+ - Adds the `DatePicker` component.
967
+ - Adds new `Card` component.
968
+ - Adds `spacing` prop to `Form` component to allow for spacing variations.
969
+ - Adds Style Guide `Forms`
970
+
971
+ ### Changes
972
+
973
+ - Exports `VideoPlayerAspectRatios`.
974
+ - Adds additional props for the `DatePicker` component based on its TAD Addendum section.
975
+ - Adds Tugboat QA configuration for PR preview deployments to replace Netlify.
976
+ - Updates the `DatePicker`, `TextInput`, `Select`, and `Label` components to pass an optional `showOptReqLabel` prop to conditionally render "Required"/"Optional" in the label text.
977
+
978
+ ### Fixes
979
+
980
+ - Fixes Accordion FAQ Storybook example rendering bug.
981
+
982
+ ## 0.23.4
983
+
984
+ ### Adds
985
+
986
+ - Adds TSDX as the bootstrapping tool to add opinionated configurations.
987
+ - Adds an `/example/` directory through TSDX with an small playground app.
988
+ - Snapshot testing through `react-test-renderer` and Jest.
989
+ - Typescript documentation file to be use as a development guide.
990
+ - Typescript documentation for `enum` variables in the TYPESCRIPT file.
991
+ - Adds `SkeletonLoaderLayouts` and `SkeletonLoaderImageRatios` enums to DS exports.
992
+ - Adds heading, description and helper text to `VideoPlayer` component.
993
+ - Adds `@storybook/addons-jest` plugin to display Jest/React Testing Library unit tests in a Storybook tab.
994
+
995
+ ### Changes
996
+
997
+ - Updates Style Guide `Spacing`.
998
+ - Updates `Hero` component to include `Campaign` variant.
999
+ - Updates `Hero` stories to use MDX format.
1000
+ - Updated warnings for too few or too many option children for the `Select` component.
1001
+ - Updates the README to include information on the production, development, and "preview" Storybook documentation instances.
1002
+ - Removes a custom SCSS breakpoint in `_Breadcrumbs.scss` in favor of mobile-first style rules.
1003
+ - Replaces Mocha, Chai, Sinon, and Enzyme for Jest and React Testing Library for unit testing.
1004
+ - Replaces webpack with rollup through TSDX.
1005
+ - Updates npm scripts to use TSDX for internal commands.
1006
+ - Replaces lodash with own functions.
1007
+ - Minor updates to Github Actions.
1008
+ - Adds PostCSS/autoprefixer to Rollup workflow instead of the default scss minifier.
1009
+
1010
+ ### Fixes
1011
+
1012
+ - Fixes the `bem` utility function so that it doesn't crash Storybook whenever the `modifiers` Controls prop option is empty.
1013
+
1014
+ ## 0.23.3
1015
+
1016
+ ### Fixes
1017
+
1018
+ - Removes the `storybook-static` directory from `.gitignore` so that the Github Actions deploy job can work properly.
1019
+
1020
+ ## 0.23.2
1021
+
1022
+ ### Adds
1023
+
1024
+ - Adds `Form` component.
1025
+ - Adds `Notification` component.
1026
+ - Adds Style Guide `Buttons`.
1027
+ - Adds `VideoPlayer` component.
1028
+ - Adds the ability to render a `textarea` element from the `TextInput` component.
1029
+
1030
+ ### Changes
1031
+
1032
+ - Updates stories for the `List` component to use MDX format.
1033
+ - Updates stories for the `Pagination` component to use MDX format.
1034
+ - 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.
1035
+ - Updates to the contributing documentation, pull request template, and the README.
1036
+ - Changes `DisplaySizes` to `HeadingDisplaySizes`.
1037
+ - Changes `Skeleton Loader` to be configurable via props.
1038
+ - Changes `Button` to use `16px` for left/right padding for buttons with text; icon only buttons still use `8px` left/right padding.
1039
+ - Changes `TextInput` label text to `font-weight: 500`.
1040
+
1041
+ ## 0.23.1
1042
+
1043
+ ### Adds
1044
+
1045
+ - Adds CSS vars for `font-weight`
1046
+ - Adds `displaySize` prop to `Heading`
1047
+ - Adds Style Guide `Iconography`
1048
+ - Adds new SVGs to be used with the `Icon` component. Among the new SVGs are: Error solid, Error outlined, Speaker Notes.
1049
+ - 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).
1050
+ - Adds `helperText` and `errorText` props to `Checkbox`
1051
+ - Adds `helperText` and `errorText` props to `Radio`
1052
+ - Adds `errorText`, `helperText`, `labelText`, `required` and `showLabel` props to `Select`
1053
+
1054
+ ### Changes
1055
+
1056
+ - Updates content in Style Guide `Typography`
1057
+ - Updates content in Style Guide `Breakpoints`
1058
+ - Changes `Link` story from `.tsx` to `.mdx`.
1059
+
1060
+ ### Deprecates
1061
+
1062
+ - Deprecates `ariaLabel`, `helperTextId`, `isRequired` and `labelId` props in `Select`
1063
+
1064
+ ## 0.23.0
1065
+
1066
+ ### Breaking Changes
1067
+
1068
+ - Removes `breakout` CSS from `Breadcrumbs`. To retain previous behavior, `Breadcrumbs` component should be a child of a `.content-header` element.
1069
+ - Removes `breakout` CSS from `Hero Secondary`. To retain previous behavior, `Hero` component should be a child of a `.content-header` element.
1070
+
1071
+ ### Adds
1072
+
1073
+ - Adds `HorizontalRule` component
1074
+ - Adds new `short` class for `Placeholder`
1075
+ - Adds `Style Guide` category to Storybook sidebar
1076
+
1077
+ ### Changes
1078
+
1079
+ - Changes `Breadcrumbs` story from `.tsx` to `.mdx`
1080
+ - Changes `Heading` story from `.tsx` to `.mdx`
1081
+ - Changes suggested DOM structure in `Template` Story
1082
+
1083
+ ## 0.22.2
1084
+
1085
+ ### Changes
1086
+
1087
+ - Adds documentation on layout bidirectionality
1088
+ - Changes `Pagination` to hide pagination UI when there are 0 or 1 pages.
1089
+
1090
+ ## 0.22.1
1091
+
1092
+ ### Changes
1093
+
1094
+ - Removes `color-classes` and `css-vars` mixins from `_03-mixins.scss`
1095
+ - Adds `color-classes` and `css-vars` mixins to `styles.scss`
1096
+ - Changes order of CSS `@import` rules in `styles.scss`
1097
+ - Adds quotes around `black` and `white` in `$colors` object in `_colors-utility.scss`
1098
+
1099
+ ## 0.22.0
1100
+
1101
+ ### Breaking Changes
1102
+
1103
+ - Removes `--ui-success` CSS variable and adds `--ui-success-primary` and `--ui-success-secondary`
1104
+ - Removes `checkboxId` prop from `Checkbox` component and employs `id` in its place.
1105
+ - Removes `defaultChecked` prop from `Checkbox` component.
1106
+ - Removed `labelOptions` prop from `Checkbox` component and employs `labelText` in its place.
1107
+
1108
+ ### Changes
1109
+
1110
+ - Added: Definition List component.
1111
+ - Changed: Separate Checkbox into its own component.
1112
+ - Changed: Separate Radio button into its own component.
1113
+ - Adds `Tertiary` state to Hero component
1114
+ - Changes `Brand` and `Utility` color values to match Figma main file
1115
+ - Changes `Radio` styles to use SASS vars in place of CSS vars
1116
+ - Adds `TextInput` component to handle email, hidden, number, password, text, textarea, tel and url input types
1117
+ - Adds default width and padding to `StatusBadge` component.
1118
+ - Hides pagination when there are 0 or 1 pages.
1119
+
1120
+ ### BugFixes
1121
+
1122
+ - Fixed layout bug for layouts that include a right sidebar column and DOM structure.
1123
+
1124
+ ## 0.21.2
1125
+
1126
+ ### Changes
1127
+
1128
+ - Adds `getPageHref` to `Pagination`
1129
+
1130
+ ## 0.21.1
1131
+
1132
+ ### Changes
1133
+
1134
+ - `Accordion`: Adds `fixed-height` modifier and `defaultOpen` prop
1135
+ - `List` defaults to grey bullets instead of black
1136
+ - Adds margins inside the default columns of `Card`
1137
+
1138
+ ### BugFixes
1139
+
1140
+ - Breadcrumbs now show up in light colours
1141
+ - Template reflow and breakpoints now happen at the same time
1142
+ - Fixes release github action
1143
+
1144
+ ## 0.21.0
1145
+
1146
+ ### Breaking Changes
1147
+
1148
+ - Removes `statusBadgeText` prop in StatusBadge to allow text to be inside component
1149
+
1150
+ ### Changes
1151
+
1152
+ - Add `method` and `action` to `SearchBar` `<form>`
1153
+
1154
+ ### Bugfixes
1155
+
1156
+ - Add the `attributes` property to the `SearchBar` `<form>`
1157
+ - Adds focus outline to the `Accordion` component so it appears when it is tabbed.
1158
+
1159
+ ## 0.20.2
1160
+
1161
+ ### Changes
1162
+
1163
+ - Exports mixins in a `resources.scss` file that can be used by consumers.
1164
+
1165
+ ### Bugfixes
1166
+
1167
+ - `Link` with class `button` has white text color
1168
+
1169
+ ## 0.20.1
1170
+
1171
+ ### Bugfixes
1172
+
1173
+ - Fixes `Pagination` when there are fewer than 4 pages
1174
+ - Adds `StatusBadge` component to `design-system-react-components` package
1175
+
1176
+ ## 0.20.0
1177
+
1178
+ ### Changes
1179
+
1180
+ - `Select`: selectedOption holds the selected value, instead of just the default.
1181
+ - `Hero`: `Hero.Secondary` now changes background color based on NYPL site section
1182
+ - `Hero`: All props are now optional
1183
+ - `Input`: added onChange prop to explicitly allow it to be used as a controlled component
1184
+ - Uses stricter linters and more Prettier configs.
1185
+
1186
+ ### Breaking Changes
1187
+
1188
+ - Removed `SectionTitle`
1189
+ - Scopes all element selects to the `.nypl-ds` class
1190
+
1191
+ ## 0.19.1
1192
+
1193
+ ### Breaking Changes
1194
+
1195
+ - Accordion: Accordion input styling affects only direct children
1196
+ - Checkbox: Allows checkbox to be used as a controlled component or uncontrolled component.
1197
+
1198
+ ## 0.19.0
1199
+
1200
+ ### Breaking Changes
1201
+
1202
+ - Updates `Pagination` component to match new design.
1203
+
1204
+ ## 0.18.7
1205
+
1206
+ ### Changes
1207
+
1208
+ - Adds actual `StatusBadge` component with props for setting levels [RENO-1882](https://jira.nypl.org/browse/RENO-1882)
1209
+
1210
+ ## 0.18.6
1211
+
1212
+ ### Changes
1213
+
1214
+ - 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)
1215
+
1216
+ ## 0.18.5
1217
+
1218
+ ### Changes
1219
+
1220
+ - Converts the Accordion component to open and close through CSS rather than through Javascript.
1221
+
1222
+ ## 0.18.4
1223
+
1224
+ ### Changes
1225
+
1226
+ - Updates the `Input` component to conditionally render an `id` attribute if an `id` prop value is passed to it.
1227
+
1228
+ ## 0.18.3
1229
+
1230
+ ### Changes
1231
+
1232
+ - Add `overflow: hidden` to `.no-scroll` styling on `<body>` for modal to prevent scroll element for content behind modal being displayed
1233
+
1234
+ ## 0.18.2
1235
+
1236
+ ### Changes
1237
+
1238
+ - Updates Accordion sets so that first item in list doesn't have `-1px` top margin
1239
+
1240
+ ## 0.18.1
1241
+
1242
+ ### Breaking Changes
1243
+
1244
+ - 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.
1245
+
1246
+ ### Updates
1247
+
1248
+ - Updates the `Input` component to allow it to render a "hidden" input type.
1249
+
1250
+ ## 0.18.0
1251
+
1252
+ ### Breaking Changes
1253
+
1254
+ - Removes type, color, and line-height declarations from `body` tags and moves them to the `.nypl-ds` namespace
1255
+
1256
+ ## 0.17.4
1257
+
1258
+ ### Changes
1259
+
1260
+ - Moves footer outside of `.nypl-ds` namespace on Template story
1261
+
1262
+ ## 0.17.3
1263
+
1264
+ ### Adds
1265
+
1266
+ - `SkeletonLoader` component for loading screens
1267
+
1268
+ ## 0.17.2
1269
+
1270
+ ### Adds
1271
+
1272
+ - `selectedOption` to `Pagination` story
1273
+
1274
+ ## 0.17.1
1275
+
1276
+ ### Adds
1277
+
1278
+ - `FiftyFifty` Hero type styling
1279
+
1280
+ ## 0.17.0
1281
+
1282
+ ### Breaking Changes
1283
+
1284
+ - Sets up the default `font-size` value in the `.nypl-ds` namespace.
1285
+
1286
+ ## 0.16.1
1287
+
1288
+ ### Adds
1289
+
1290
+ - Styling for `Accordion` sets
1291
+
1292
+ ### Changes
1293
+
1294
+ - `className`s within `Accordion` for content
1295
+ - Hover stylings for `Accordion`
1296
+
1297
+ ## 0.16.0
1298
+
1299
+ ### Breaking Changes
1300
+
1301
+ - Removes the padding on the `breakout` mixin
1302
+ - Removes the padding on the `wrapper` mixin at the `xl` breakpoint
1303
+
1304
+ ## 0.15.1
1305
+
1306
+ ### Removes
1307
+
1308
+ - `arrow_xsmall` and `search_small` icons
1309
+
1310
+ ## 0.15.0
1311
+
1312
+ ### Breaking Changes
1313
+
1314
+ - Fixes a bug in which content was not centered within `Button` when button was made larger than the text content
1315
+
1316
+ ### Removes
1317
+
1318
+ - Additional `Button` CSS that was no longer used after Button API refactor in 0.13.0
1319
+ - Deprecates `SearchResultItem`
1320
+
1321
+ ## 0.14.0
1322
+
1323
+ ### Breaking Changes
1324
+
1325
+ - `Image` now has an `alt` prop instead of an `altText` prop
1326
+ - Removes `isDecorative` property in favor of an empty `alt`
1327
+
1328
+ ### Adds
1329
+
1330
+ - Adds HTML `<img>` props to the `Image` component
1331
+
1332
+ ## 0.13.0
1333
+
1334
+ ### Breaking Changes
1335
+
1336
+ - Removes all icon props from `Button`. Button now uses `Icon` as a child
1337
+ - Removes `ButtonIconPositions`
1338
+
1339
+ ### Changes
1340
+
1341
+ - Makes `Button`'s `onClick` property optional
1342
+
1343
+ ## 0.12.0
1344
+
1345
+ ### Breaking Changes
1346
+
1347
+ - Moves box-sizing declarations to a `.nypl-ds` namespace. All future "global" CSS settings will move to exist under this namespace.
1348
+
1349
+ ### Adds
1350
+
1351
+ - Universal focus styling
1352
+
1353
+ ## 0.11.5
1354
+
1355
+ ### Changes
1356
+
1357
+ - Updates the margin on action-links from `xxs` to `xs`
1358
+
1359
+ ## 0.11.4
1360
+
1361
+ ### Changes
1362
+
1363
+ - Removes the `description` tag from the `<span>` element wrapping svg icons (#360)
1364
+
1365
+ ## 0.11.3
1366
+
1367
+ ### Changes
1368
+
1369
+ - `Icon` now accepts children for custom icons
1370
+
1371
+ ## 0.11.2
1372
+
1373
+ ### Adds
1374
+
1375
+ - Status Badge component as stories
1376
+
1377
+ ## 0.11.1
1378
+
1379
+ ### Changes
1380
+
1381
+ - DS bundle is now compiled for es5 instead of es6 to accommodate for IE11 and the arrow functions we're using in DS
1382
+
1383
+ ## 0.11.0
1384
+
1385
+ ## Breaking Changes
1386
+
1387
+ - Removes options from the `Pagination` component
1388
+
1389
+ ## 0.10.4
1390
+
1391
+ ### Changes
1392
+
1393
+ - Updates the `Link` component's `linkType` prop to `type`, implements `React.forwardRef` to use with other libraries, and updates the stories.
1394
+
1395
+ ## 0.10.3
1396
+
1397
+ ### Changes
1398
+
1399
+ - Updates the `Icon` component's `name` prop to allow for `LogoNames` enum types.
1400
+
1401
+ ### Adds
1402
+
1403
+ - Adds a "negative" NYPL logo to be used on non-white backgrounds.
1404
+
1405
+ ## 0.10.2
1406
+
1407
+ ### Changes
1408
+
1409
+ - Updates the formatting of svg file names to use underscores
1410
+
1411
+ ## 0.10.1
1412
+
1413
+ ### Changes
1414
+
1415
+ - Updates the `Input` element to allow props and attributes to be able to render input elements of type "radio".
1416
+
1417
+ ## 0.10.0
1418
+
1419
+ ### Removes
1420
+
1421
+ - Deprecates `SectionName` in favor of the stories under `Colors—Brand`
1422
+
1423
+ ## 0.9.3
1424
+
1425
+ ### Adds
1426
+
1427
+ - SVGs for NYPL full logo lockup, Queens Public Library Logo, and Brooklyn Public Library Logo
1428
+
1429
+ ## 0.9.2
1430
+
1431
+ ### Adds
1432
+
1433
+ - CSS to style [React Autosuggest](https://github.com/moroshko/react-autosuggest/)
1434
+
1435
+ ## 0.9.1
1436
+
1437
+ ### Changes
1438
+
1439
+ - `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`.
1440
+
1441
+ ## 0.9.0
1442
+
1443
+ ### Breaking Changes
1444
+
1445
+ - Removes `$color-spotlight`, `$color-your-interests`, `$color-support`, and `$color-help`
1446
+ - Removes all `$nypl-` prefixed Sass variables
1447
+ - `$color-success` is now `--ui-success`.
1448
+ - Breakpoint variables are now prefixed with `breakpoint`.
1449
+ - Type sizing variables are now prefixed with `font-size`.
1450
+ - Typeface variables are now prefixed with `typeface`.
1451
+ - 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).
1452
+
1453
+ ### Adds
1454
+
1455
+ - Exposes color and typography constants as CSS variables
1456
+ - Adds Section colors for `--section-research-library-lpa`, `--section-research-library-schomburg`, and `--section-research-library-schwartzman`
1457
+
1458
+ ### Removes
1459
+
1460
+ - Letterspacing property on all body copy
1461
+
1462
+ ## 0.8.0
1463
+
1464
+ ### Removes
1465
+
1466
+ - `width: 100%` on svgs
1467
+
1468
+ ## 0.7.2
1469
+
1470
+ ### Adds
1471
+
1472
+ - Adds icons for `accessibility_full`, `accessibility_partial`, `clock`, `check`, and `close`
1473
+
1474
+ ### Changes
1475
+
1476
+ - Updates the `download` icon to Google Material Design's icon.
1477
+
1478
+ ## 0.7.1
1479
+
1480
+ ### Changes
1481
+
1482
+ - Updated the Select component to take in a ref using ForwardRef and also a `name` prop.
1483
+
1484
+ ## 0.7.0
1485
+
1486
+ ### Breaking Changes
1487
+
1488
+ - `FormDropDown` and `Dropdown` are now `Select`
1489
+ - `Textfield` has been retired in favor of `Input`
1490
+ - `Input` type is now controlled via an enum defined in `InputTypes` instead of a string
1491
+ - Changes `referenceId` to `htmlFor` on `Label`
1492
+ - Deprecates `DateRangeForm`, `BodyText`, `SearchPromo`, `Container`, and `RNHeaderWithSearch`
1493
+ - `Button` now accepts an `onClick` instead of a `callback`
1494
+ - In the `ButtonTypes` enum, `Filled` and `Outline` have been changed to `Primary` and `Secondary`, respectively
1495
+ - `Accordion` now accepts `accordionLabel` and `labelId` instead of `buttonOpts` properties
1496
+ - Removes project-specific styles for now deprecated `EditionCard`
1497
+ - Removes project-specific styles of `.search-results-list` and `.form-item--radios`
1498
+ - `UnorderedList` is now `List`, with an enum to control whether is it ordered or unordered
1499
+ - `Input` `id` is no longer prepended with `input-`
1500
+ - `Button` `id` is no longer prepended with `btn-`
1501
+ - `SearchBar` no longer has props for `selectChangeHandler`, `selectBlurHandler`, or `searchChangeHandler`.
1502
+ - `Input` offers `ariaLabel` and `ariaLabelledby` props in favor of `labelId` and `helperTextId`
1503
+ - Removes `headingAttributes?: {}` from `SectionTitle`
1504
+
1505
+ ### Adds
1506
+
1507
+ - Adds `aria-live` and `aria-atomic` to `HelperErrorText` in its errored state
1508
+ - Adds "Optional", "Required", or empty string inside `Label` for forms
1509
+ - Adds `IconNames` enum to make `allSVGs` array globally accessible
1510
+ - Adds `width: 100%` globally to SVGs
1511
+ - `Card` now constrains items in its `image` column to the column width
1512
+ - Adds the `forwardRef` implementation to the `Input` component
1513
+ - Adds `disabled` prop to `Input` and `Button` components
1514
+ - Adds `disabled` styling to `Button.Primary`
1515
+ - Adds `className?: string;` as additional props to all components
1516
+ - Adds `attributes?: { [key: string]: string }; ` to `Input`, `Button`, `Select`, `Link`, and `Image`
1517
+ - Adds `justify-content: center` for `Button` with icon to adjust for mobile
1518
+
1519
+ ### Changes
1520
+
1521
+ - Fixes bug in former `FormDropdown` (now `Select`) where the select value would not change if `selectedOption` were passed
1522
+ - `Link`'s scss now references `$ui-link-primary` instead of `$nypl-blue-regular`
1523
+ - Changes `Select`'s SCSS to use the updated styling from Filament Group
1524
+ - `Image` is wrapped in `figure` when `imageCaption` or `imageCredit` is passed to `Image`
1525
+ - Adds `viewport` properties to any SVG files that were missing it
1526
+
1527
+ ### Removes
1528
+
1529
+ - Removes `HelperErrorTextOptions`
1530
+
1531
+ ## 0.6.0
1532
+
1533
+ ### Breaking Changes
1534
+
1535
+ - Removes `RNSectionTitle`
1536
+
1537
+ ### Changes
1538
+
1539
+ - Updates `$nypl-blue-regular` from #0071ce to #0576d3
1540
+ - `$nypl-blue-regular` is now extended with `$ui-link-primary`
1541
+
1542
+ ## [0.5.0]
1543
+
1544
+ ### Breaking Changes
1545
+
1546
+ - `EditionCard` is now `Card`
1547
+ - Buttons from black by default to blue
1548
+
1549
+ ### Adds
1550
+
1551
+ - Icon for audiobook
1552
+ - Changes the line-height values on some of the heading mixins
1553
+
1554
+ ## [0.4.1]
1555
+
1556
+ ### Changes
1557
+
1558
+ - Makes all IDs optional
1559
+
1560
+ ## [0.4.0]
1561
+
1562
+ ### Breaking Changes
1563
+
1564
+ - Concatenates `BasicLink`, `UnderlineLink`, and `IconLink` into `Link` with `LinkTypes` enum
1565
+ - Moves styles into their corresponding component folders
1566
+ - Moves base styles into the react-components package
1567
+ - Deprecates `@nypl/design-system-styles`
1568
+
1569
+ ### Changes
1570
+
1571
+ - Moves tests into their corresponding component folders
1572
+ - Flattens component structure to export as one package.
1573
+ - Exports `Icon`
1574
+
1575
+ ## [0.3.7]
1576
+
1577
+ - Fixed `dist` script so it clears the folder
1578
+ - Added `viewBox` to `arrow` icon
1579
+
1580
+ ## [0.3.6]
1581
+
1582
+ - added `Template` stories
1583
+ - fixed `Accordion` buttons
1584
+ - added `viewBox` to `arrow-xsmall` icon
1585
+
1586
+ ## [0.3.5]
1587
+
1588
+ - Move `Placeholder`, `Modal`, `SectionName` and `Container` from `/00-base` into top-level `/components`
1589
+ - Fix Storybook errors for Headings with Bold and Headings with Link.
1590
+ - Move `Headings/*` from `/02-molecules` into top-level `/components`
1591
+ - Inlined icons inside `react-components`
1592
+ - No longer publishing `@nypl/design-system-icons` package
1593
+
1594
+ ## [0.3.4]
1595
+
1596
+ - Exported `searchValue` and `selectedField` in `RNHeaderWithSearch`
1597
+
1598
+ ## [0.3.3]
1599
+
1600
+ - Added `blockName` handling to `DateRangeForm`
1601
+
1602
+ ## [0.3.1]
1603
+
1604
+ - Exports `SectionName` and `Image`
1605
+
1606
+ ## [0.3.0]
1607
+
1608
+ ### Breaking Changes
1609
+
1610
+ - Edition Card no longer accepts strings for links and descriptions
1611
+
1612
+ ### Changed
1613
+
1614
+ - Added `iconName` as an optional prop in `IconLink`
1615
+
1616
+ ## [0.2.1] - 2020-04-23
1617
+
1618
+ ### Removed
1619
+
1620
+ - `HeaderWithImageRight` component and corresponding story
1621
+
1622
+ ## [0.2.0] - 2020-04-13
1623
+
1624
+ ### Changed
1625
+
1626
+ - 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)
1627
+
1628
+ ## [0.1.1]
1629
+
1630
+ ### Changed
1631
+
1632
+ - `Textfield` id is no longer duplicated
1633
+ - `Dropdown` now applies `bem` `blockName`
1634
+ - `Pagination` now passes in `blockName` into `Dropdown`
1635
+
1636
+ ## [0.1.0]
1637
+
1638
+ ### Breaking Changes
1639
+
1640
+ - Large classes now have `Opts` inteface that allows for the component to be built over multiple steps. This affects:
1641
+ - `HelperErrorText`
1642
+ - `Label`
1643
+ - `TextField`
1644
+ - `Button`
1645
+ - Deprecated `SearchResultsList`, `IconLinkList` and `EditionsList` in favor of `UnorderedList`
1646
+ - `type` in `Button` now corresponds to html button types. `buttonType` in button corresponds to the visual categories of buttons (eg: `filled`, `outline`)
1647
+ - `subtitle` in `SearchResultsItem` changed to `subtitleContent` to take a JSX
1648
+ - `Label` and `Button` only accept children when called directly
1649
+
1650
+ ### Added:
1651
+
1652
+ - `Checkbox`
1653
+ - `DateRangeForm`
1654
+ - `Input`
1655
+ - `Accordion`
1656
+ - `UnorderedList`
1657
+ - # `Modal`
1658
+
1659
+ ## [0.0.17] - 2020-03-17
1660
+
1661
+ - Changelog update
1662
+
1663
+ ## [0.0.16]
1664
+
1665
+ - `HeaderImgRight` accepts elements
1666
+
1667
+ ## [0.0.15] - 2020-03-3
1668
+
1669
+ ### Changed
1670
+
1671
+ - `Button` component accepts content to render from its `content` prop or its `children` prop.
1672
+
1673
+ ## [0.0.14] - 2020-02-18
1674
+
1675
+ ### Changed
1676
+
1677
+ - `EditionCard` `EditionInfo` fields accept elements
1678
+ - `EditionCard` `ReadOnline` and `Download` fields accept elements
1679
+
1680
+ ### [0.0.14] - 2020-02-18
1681
+
1682
+ - added `noLinkElement` to `EditionCard` to receive an element
1683
+
1684
+ ## [0.0.11] — 2020-01-23
1685
+
1686
+ ### Added
1687
+
1688
+ - `EditionsList`
1689
+
1690
+ ## [0.0.10] - 2020-01-14
1691
+
1692
+ ### Added
1693
+
1694
+ - `Dropdown` which controls `FormDropdown` and its corresponding `Label`
1695
+ - `Label`
1696
+ - `HelperErrorText`
1697
+ - `Pagination`
1698
+ - `EditionCard` component
1699
+ - `SearchResultItem` component that uses `EditionCard`
1700
+ - `RN Header With Search`
1701
+ - a story for `RN Section Title`, which is just a collection of styles
1702
+ - `SearchResultsList` component
1703
+
1704
+ ### Changed
1705
+
1706
+ - added `iconModifiers` to `Button`
1707
+ - `buttonId` in `Button` is now required
1708
+ - refactored `FormDropdown` to not include its own `label`
1709
+ - `RN Header With Search`
1710
+ - a story for `RN Section Title`, which is just a collection of styles
1711
+ - `Link` -> `BasicLink` for clarity
1712
+ - Bugfixes in `UnderlineLink` and `IconLink`
1713
+ - Added stories for `BasicLink`
1714
+ - `Link` missing URL error message
1715
+ - Consolidated `Heading` and `PageTitle`
1716
+ - `Heading` now only takes a single span
1717
+ - Added ResearchNow specific `SearchBar` error state
1718
+ - A11Y changes for `SearchBar` and `HeaderWithSearch`
1719
+ - Added stories for AT-79, AT-264 and AT-3
1720
+ - `selectedOption` added to `FormDropdown` stores selected state
1721
+
1722
+ ## [0.0.7] - 2020-01-03
1723
+
1724
+ ### Added
1725
+
1726
+ - 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`.
1727
+
1728
+ ## [0.0.6] - 2019-12-31
1729
+
1730
+ ### Added
1731
+
1732
+ - `Image` for 2:1 ratio
1733
+ - `PageTitle`
1734
+ - `Header with Image Right`
1735
+ - `FormDropdown`
1736
+ - `SearchPromo`
1737
+
1738
+ ### Changed
1739
+
1740
+ - Moved heading-related atoms from `01-atoms/Text` into `01-atoms/Text/Heading`
1741
+ - Updated `Searchbar` component to include Parameters
1742
+ - Changed `Breadcrumb` export from `Breadcrumbs`
1743
+
1744
+ ## [0.0.5] - 2019-12-06
1745
+
1746
+ ### Changed
1747
+
1748
+ - `Icon` import
1749
+
1750
+ ## [0.0.4] - 2019-12-06
1751
+
1752
+ ### Added
1753
+
1754
+ - `Body text` component for plain-text elements
1755
+ - `UnderlineLink` and `IconLink` for links
1756
+ - `Icon` component that uses the `design-system-icons` package.
1757
+ - `SectionTitle` and `Heading` for heading components
1758
+ - `IconLink-List`for the list of subject links
1759
+ - `Button` and `TextField` for the searchbar
1760
+ - `SearchBar` component
1761
+
1762
+ ### Changed
1763
+
1764
+ - `Breadcrumb` now shows icon in mobile view
1765
+
1766
+ ## [0.0.3] - 2019-11-15
1767
+
1768
+ ### Changed
1769
+
1770
+ - Changed `Breadcrumb` to `Breadcrumbs` to match Twig
1771
+ - Changed the Breadcrumbs props to accept components
1772
+
1773
+ ## [0.0.2] - 2019-11-13
1774
+
1775
+ ### Added
1776
+
1777
+ - Started a change log
1778
+ - Added the Breadcrumb React Component
1779
+
1780
+ ### Changed
1781
+
1782
+ - Changed folder structure to match Twig
1783
+
1784
+ ## [0.0.1] - 2019-11-13
1785
+
1786
+ - Published as a test