@nypl/design-system-react-components 1.3.0-rc-2 → 1.3.1

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