@nypl/design-system-react-components 0.25.11 → 0.25.12

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.
Files changed (96) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/README.md +4 -16
  3. package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts +1 -0
  4. package/dist/components/Icons/IconTypes.d.ts +9 -7
  5. package/dist/components/Logo/LogoSvgs.d.ts +6 -0
  6. package/dist/components/Logo/LogoTypes.d.ts +6 -0
  7. package/dist/components/Pagination/Pagination.d.ts +6 -2
  8. package/dist/components/SearchBar/SearchBar.d.ts +1 -1
  9. package/dist/components/Template/Template.d.ts +1 -1
  10. package/dist/design-system-react-components.cjs.development.js +947 -438
  11. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  12. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  13. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  14. package/dist/design-system-react-components.esm.js +948 -439
  15. package/dist/design-system-react-components.esm.js.map +1 -1
  16. package/dist/styles.css +1 -1
  17. package/dist/theme/components/breadcrumb.d.ts +3 -0
  18. package/dist/theme/components/checkbox.d.ts +0 -2
  19. package/dist/theme/components/fieldset.d.ts +2 -0
  20. package/dist/theme/components/global.d.ts +15 -14
  21. package/dist/theme/components/globalMixins.d.ts +8 -8
  22. package/dist/theme/components/list.d.ts +6 -0
  23. package/dist/theme/components/notification.d.ts +3 -0
  24. package/dist/theme/components/radio.d.ts +3 -2
  25. package/dist/theme/components/select.d.ts +2 -9
  26. package/dist/theme/components/slider.d.ts +8 -4
  27. package/dist/theme/components/textInput.d.ts +8 -12
  28. package/dist/theme/components/toggle.d.ts +6 -2
  29. package/dist/theme/foundations/global.d.ts +31 -3
  30. package/dist/utils/utils.d.ts +10 -0
  31. package/package.json +1 -1
  32. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +18 -1
  33. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +10 -0
  34. package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx +1 -0
  35. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +99 -0
  36. package/src/components/Checkbox/Checkbox.stories.mdx +1 -1
  37. package/src/components/Checkbox/Checkbox.tsx +1 -0
  38. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +6 -6
  39. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +18 -18
  40. package/src/components/Fieldset/Fieldset.stories.mdx +1 -1
  41. package/src/components/Icons/Icon.stories.mdx +1 -1
  42. package/src/components/Icons/IconTypes.tsx +8 -6
  43. package/src/components/List/List.stories.mdx +1 -1
  44. package/src/components/Logo/Logo.stories.mdx +1 -1
  45. package/src/components/Logo/LogoSvgs.tsx +12 -0
  46. package/src/components/Logo/LogoTypes.tsx +6 -0
  47. package/src/components/Notification/Notification.stories.mdx +6 -1
  48. package/src/components/Notification/Notification.test.tsx +20 -9
  49. package/src/components/Notification/Notification.tsx +6 -4
  50. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +103 -8
  51. package/src/components/Pagination/Pagination.stories.mdx +54 -12
  52. package/src/components/Pagination/Pagination.test.tsx +63 -5
  53. package/src/components/Pagination/Pagination.tsx +45 -23
  54. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +3 -3
  55. package/src/components/Radio/Radio.stories.mdx +1 -1
  56. package/src/components/Radio/Radio.tsx +1 -0
  57. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +5 -5
  58. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +18 -18
  59. package/src/components/SearchBar/SearchBar.Test.tsx +20 -2
  60. package/src/components/SearchBar/SearchBar.stories.mdx +4 -4
  61. package/src/components/SearchBar/SearchBar.tsx +3 -2
  62. package/src/components/Select/Select.stories.mdx +1 -1
  63. package/src/components/Slider/Slider.stories.mdx +1 -1
  64. package/src/components/Slider/Slider.tsx +4 -1
  65. package/src/components/StyleGuide/Bidirectionality.stories.mdx +4 -4
  66. package/src/components/StyleGuide/Colors.stories.mdx +33 -18
  67. package/src/components/Template/Template.stories.mdx +1 -1
  68. package/src/components/Template/Template.tsx +2 -6
  69. package/src/components/Template/__snapshots__/Template.test.tsx.snap +2 -2
  70. package/src/components/Toggle/Toggle.stories.mdx +1 -1
  71. package/src/components/Toggle/Toggle.tsx +2 -1
  72. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +4 -4
  73. package/src/docs/Chakra.stories.mdx +1 -1
  74. package/src/styles/base/_place-holder.scss +2 -0
  75. package/src/styles.scss +0 -2
  76. package/src/theme/components/breadcrumb.ts +4 -0
  77. package/src/theme/components/checkbox.ts +3 -7
  78. package/src/theme/components/fieldset.ts +2 -0
  79. package/src/theme/components/global.ts +18 -15
  80. package/src/theme/components/globalMixins.ts +8 -8
  81. package/src/theme/components/list.ts +4 -0
  82. package/src/theme/components/notification.ts +3 -0
  83. package/src/theme/components/radio.ts +3 -6
  84. package/src/theme/components/select.ts +3 -3
  85. package/src/theme/components/slider.ts +12 -9
  86. package/src/theme/components/textInput.ts +2 -2
  87. package/src/theme/components/toggle.ts +41 -37
  88. package/src/theme/foundations/colors.ts +19 -12
  89. package/src/theme/foundations/global.ts +17 -5
  90. package/src/theme/foundations/typography.ts +1 -1
  91. package/src/utils/componentCategories.ts +1 -1
  92. package/src/utils/utils.ts +28 -0
  93. package/dist/components/Pagination/Pagination.stories.d.ts +0 -13
  94. package/src/components/Pagination/Pagination.stories.tsx +0 -54
  95. package/src/styles/base/_03-base.scss +0 -25
  96. package/src/styles/base/_04-focus.scss +0 -22
package/CHANGELOG.md CHANGED
@@ -8,6 +8,37 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
8
8
 
9
9
  ## Prerelease
10
10
 
11
+ ## 0.25.12 (March 18, 2022)
12
+
13
+ ## Adds
14
+
15
+ - Adds `Education` section colors to the color palette theme object.
16
+ - Adds a `currentPage` prop to the `Pagination` component, a value that updates the selected page programmatically without the user explicitly requesting it.
17
+
18
+ ### Changes
19
+
20
+ - Removes the margin from the global `.nypl p` CSS rule.
21
+ - Updates the top and bottom margin of the `List`'s `Unordered` and `Ordered` types.
22
+ - Updates the `Notification`'s icons to be decorative by default.
23
+ - Updates the default placeholder value for the `SearchBar`'s `TextInput` component.
24
+ - Updates the `SearchBar`'s `textInputProps` prop object to not require the `placeholder` property.
25
+ - Updates the `Logo` component to include new variants for `FirstBook` and `Open eBooks`.
26
+ - Updates the border and text styles for the `Select` component.
27
+ - Updates the `Breadcrumbs` component to inlcude an `Education` color variant.
28
+ - Updates the `Icon` component to include the `Education` color values.
29
+ - Updates the default font stack to fix a typo that was disabling `sans-serif` in the stack.
30
+ - Removes the `.nypl-ds` CSS class from the base SCSS file, from the `TemplateAppContainer` component, from the Storybook configuration, and from the entire repo.
31
+ - Moves the base styles from the SCSS global file to the Chakra theme global JS object.
32
+ - Updates the label font size for the `Radio` and `Checkbox` components to be "label.default".
33
+
34
+ ### Fixes
35
+
36
+ - Fixes the styles for the `Slider` to better accomodate the slider thumbs and the width of the container.
37
+ - Updates the alignment of the `Notifications`'s dismissible icon.
38
+ - Fixes the border and padding from the `fieldset` HTML element by removing it.
39
+ - Fixes alignment for long labels in the `Checkbox` and `Radio` components.
40
+ - Fixes the line height for long labels in the `Toggle` component.
41
+
11
42
  ## 0.25.11 (March 3, 2022)
12
43
 
13
44
  ### Updates
package/README.md CHANGED
@@ -116,17 +116,7 @@ $ npm install @nypl/design-system-react-components
116
116
  @import "~@nypl/design-system-react-components/dist/styles.css";
117
117
  ```
118
118
 
119
- 3. Add the `nypl-ds` CSS class
120
-
121
- Some CSS rules in the Design System, such as the universal focus styling and the box-model, are namespaced to the `.nypl-ds` class. To include those in your app, add `.nypl-ds` to whichever wrapper tag makes sense in your application (e.g., `<div class="app">` or `<div class="container">`).
122
-
123
- ```jsx
124
- <div class="app nypl-ds">
125
- <!-- your code here -->
126
- </div>
127
- ```
128
-
129
- 4. Import the `DSProvider` component
119
+ 3. Import the `DSProvider` component
130
120
 
131
121
  In order to use DS components in a consuming application, there is a necessary step that must be done for component styles to properly render. Consuming applications need to wrap all the DS components with a simple provider component. Fortunately, this only needs to be done once at the top level of the consuming application.
132
122
 
@@ -141,7 +131,7 @@ const ApplicationContainer = (props) => {
141
131
  // ...
142
132
  return (
143
133
  <DSProvider>
144
- <div className="my-app nypl-ds">
134
+ <div className="my-app">
145
135
  // ...
146
136
  {children}
147
137
  </div>
@@ -150,7 +140,7 @@ const ApplicationContainer = (props) => {
150
140
  };
151
141
  ```
152
142
 
153
- 5. Use DS components!
143
+ 4. Use DS components!
154
144
 
155
145
  Consult Storybook for the list of available components and props that they require.
156
146
 
@@ -181,13 +171,11 @@ function NewComponent(props) {
181
171
 
182
172
  ### NYPL DS, NYPL Header, and NYPL Footer
183
173
 
184
- Please note that, if used, the NYPL Header and Footer components should be _outside_ of the `.nypl-ds` wrapper class.
185
-
186
174
  ```jsx
187
175
  <body>
188
176
  <NYPLHeader />
189
177
 
190
- <div class="app nypl-ds">
178
+ <div class="app">
191
179
  <!-- your code here -->
192
180
  </div>
193
181
 
package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  export declare enum ColorVariants {
2
2
  Blogs = "blogs",
3
3
  BooksAndMore = "booksAndMore",
4
+ Education = "education",
4
5
  Locations = "locations",
5
6
  Research = "research",
6
7
  WhatsOn = "whatsOn"
package/dist/components/Icons/IconTypes.d.ts CHANGED
@@ -18,19 +18,21 @@ export declare enum IconColors {
18
18
  UiWhite = "ui.white",
19
19
  BrandPrimary = "brand.primary",
20
20
  BrandSecondary = "brand.secondary",
21
- SectionWhatsOnPrimary = "section.whats-on.primary",
22
- SectionWhatsOnSecondary = "section.whats-on.secondary",
21
+ SectionBlogsPrimary = "section.blogs.primary",
22
+ SectionBlogsSecondary = "section.blogs.secondary",
23
23
  SectionBooksAndMorePrimary = "section.books-and-more.primary",
24
24
  SectionBooksAndMoreSecondary = "section.books-and-more.secondary",
25
- SectionResearchPrimary = "section.research.primary",
26
- SectionResearchSecondary = "section.research.secondary",
25
+ SectionEducationPrimary = "section.education.primary",
26
+ SectionEducationSecondary = "section.education.secondary",
27
27
  SectionLocationsPrimary = "section.locations.primary",
28
28
  SectionLocationsSecondary = "section.locations.secondary",
29
- SectionBlogsPrimary = "section.blogs.primary",
30
- SectionBlogsSecondary = "section.blogs.secondary",
29
+ SectionResearchPrimary = "section.research.primary",
30
+ SectionResearchSecondary = "section.research.secondary",
31
31
  SectionResearchLibraryLpa = "section.research-library.lpa",
32
32
  SectionResearchLibrarySchomburg = "section.research-library.schomburg",
33
- SectionResearchLibrarySchwartzman = "section.research-library.schwartzman"
33
+ SectionResearchLibrarySchwartzman = "section.research-library.schwartzman",
34
+ SectionWhatsOnPrimary = "section.whats-on.primary",
35
+ SectionWhatsOnSecondary = "section.whats-on.secondary"
34
36
  }
35
37
  export declare enum IconSizes {
36
38
  Small = "small",
package/dist/components/Logo/LogoSvgs.d.ts CHANGED
@@ -3,6 +3,8 @@ declare const _default: {
3
3
  logo_bpl_white: string;
4
4
  logo_clever_color: string;
5
5
  logo_clever_white: string;
6
+ logo_firstbook_color: string;
7
+ logo_firstbook_color_negative: string;
6
8
  logo_lpa_black: string;
7
9
  logo_lpa_color: string;
8
10
  logo_lpa_white: string;
@@ -12,6 +14,10 @@ declare const _default: {
12
14
  logo_nypl_full_white: string;
13
15
  logo_nypl_lion_black: string;
14
16
  logo_nypl_lion_white: string;
17
+ logo_openebooks_color: string;
18
+ logo_openebooks_negative: string;
19
+ logo_openebooks_wtext_color: string;
20
+ logo_openebooks_wtext_negative: string;
15
21
  logo_qpl_alt_black: string;
16
22
  logo_qpl_alt_white: string;
17
23
  logo_qpl_black: string;
package/dist/components/Logo/LogoTypes.d.ts CHANGED
@@ -16,6 +16,8 @@ export declare enum LogoNames {
16
16
  BrooklynPublicLibraryWhite = "logo_bpl_white",
17
17
  CleverColor = "logo_clever_color",
18
18
  CleverWhite = "logo_clever_white",
19
+ FirstBookColor = "logo_firstbook_color",
20
+ FirstBookColorNegative = "logo_firstbook_color_negative",
19
21
  LPAColor = "logo_lpa_color",
20
22
  LPABlack = "logo_lpa_black",
21
23
  LPAWhite = "logo_lpa_white",
@@ -25,6 +27,10 @@ export declare enum LogoNames {
25
27
  NYPLWhite = "logo_nypl_full_white",
26
28
  NYPLLionBlack = "logo_nypl_lion_black",
27
29
  NYPLLionWhite = "logo_nypl_lion_white",
30
+ OpenEBooksColor = "logo_openebooks_color",
31
+ OpenEBooksNegative = "logo_openebooks_negative",
32
+ OpenEBooksWithTextColor = "logo_openebooks_wtext_color",
33
+ OpenEBooksWithTextNegative = "logo_openebooks_wtext_negative",
28
34
  QueensPublicLibraryColor = "logo_qpl_color",
29
35
  QueensPublicLibraryBlack = "logo_qpl_black",
30
36
  QueensPublicLibraryWhite = "logo_qpl_white",
package/dist/components/Pagination/Pagination.d.ts CHANGED
@@ -2,14 +2,18 @@ import React from "react";
2
2
  export interface PaginationProps {
3
3
  /** Additional className. */
4
4
  className?: string;
5
+ /** The currentPage can be used to programatically force the selected page to change
6
+ * without the user explicitly requesting it – for example, if the user should be
7
+ * brought back to the first page of a set of results after a new search. */
8
+ currentPage?: number;
5
9
  /** The callback function that takes a page number and returns a string
6
10
  * to use for a link's `href` attribute. This is used when the current
7
11
  * page should refresh when navigating. */
8
12
  getPageHref?: undefined | ((pageNumber: number) => string);
9
13
  /** ID that other components can cross reference for accessibility purposes. */
10
14
  id?: string;
11
- /** The current page selected. */
12
- initialPage: number;
15
+ /** The initially selected page (default value is 1). */
16
+ initialPage?: number;
13
17
  /** The callback function called when an item is selected and the current
14
18
  * page should not refresh. */
15
19
  onPageChange?: (selected: number) => void;
package/dist/components/SearchBar/SearchBar.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface SelectProps extends BaseProps {
9
9
  optionsData: string[];
10
10
  }
11
11
  export interface TextInputProps extends BaseProps {
12
- placeholder: string;
12
+ placeholder?: string;
13
13
  value?: string;
14
14
  }
15
15
  export interface SearchBarProps {
package/dist/components/Template/Template.d.ts CHANGED
@@ -35,7 +35,7 @@ export interface TemplateAppContainerProps extends TemplateFooterProps, Template
35
35
  }
36
36
  /**
37
37
  * The main top-level parent component that wraps all template-related
38
- * components. For backwards compatibility, this renders a `nypl-ds` CSS class.
38
+ * components.
39
39
  */
40
40
  declare const Template: (props: React.PropsWithChildren<TemplateProps>) => JSX.Element;
41
41
  /**