@nypl/design-system-react-components 1.1.2 → 1.2.0-rc

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