@nypl/design-system-react-components 3.4.2 → 3.4.3-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.
Files changed (17) hide show
  1. package/dist/design-system-react-components.cjs +51 -51
  2. package/dist/design-system-react-components.js +11719 -10999
  3. package/dist/src/theme/components/header.d.ts +100 -0
  4. package/dist/src/theme/components/headerLogin.d.ts +333 -0
  5. package/dist/src/theme/components/headerLoginButton.d.ts +72 -0
  6. package/dist/src/theme/components/headerLowerNav.d.ts +78 -0
  7. package/dist/src/theme/components/headerMobileIconNav.d.ts +28 -0
  8. package/dist/src/theme/components/headerMobileNav.d.ts +92 -0
  9. package/dist/src/theme/components/headerMobileNavButton.d.ts +36 -0
  10. package/dist/src/theme/components/headerSearchButton.d.ts +85 -0
  11. package/dist/src/theme/components/headerSearchForm.d.ts +185 -0
  12. package/dist/src/theme/components/headerSitewideAlerts.d.ts +43 -0
  13. package/dist/src/theme/components/headerUpperNav.d.ts +60 -0
  14. package/dist/src/theme/components/newsletterSignup.d.ts +1 -1
  15. package/dist/src/theme/components/slider.d.ts +3 -3
  16. package/dist/src/theme/foundations/breakpoints.d.ts +6 -0
  17. package/package.json +2 -1
package/dist/src/theme/components/headerMobileNavButton.d.ts ADDED
@@ -0,0 +1,36 @@
1
+ declare const HeaderMobileNavButton: {
2
+ baseStyle: ({ isOpen }: {
3
+ isOpen: any;
4
+ }) => {
5
+ alignItems: string;
6
+ backgroundColor: string;
7
+ border: string;
8
+ borderRadius: string;
9
+ display: string;
10
+ justifyContent: string;
11
+ svg: {
12
+ fill: string;
13
+ marginLeft: string;
14
+ };
15
+ _hover: {
16
+ backgroundColor: string;
17
+ svg: {
18
+ fill: string;
19
+ };
20
+ };
21
+ _focus: {
22
+ borderRadius: string;
23
+ outlineColor: string;
24
+ outlineOffset: string;
25
+ outlineStyle: string;
26
+ outlineWidth: string;
27
+ };
28
+ _dark: {
29
+ backgroundColor: string;
30
+ svg: {
31
+ fill: string;
32
+ };
33
+ };
34
+ };
35
+ };
36
+ export default HeaderMobileNavButton;
package/dist/src/theme/components/headerSearchButton.d.ts ADDED
@@ -0,0 +1,85 @@
1
+ declare const HeaderSearchButton: {
2
+ baseStyle: ({ isOpen }: {
3
+ isOpen: any;
4
+ }) => {
5
+ alignItems: string;
6
+ borderRadius: string;
7
+ backgroundColor: string;
8
+ color: string;
9
+ display: string;
10
+ fontFamily: string;
11
+ fontSize: string;
12
+ fontWeight: string;
13
+ justifyContent: string;
14
+ minHeight: {
15
+ mh: string;
16
+ };
17
+ minWidth: {
18
+ mh: string;
19
+ };
20
+ textDecoration: string;
21
+ _dark: {
22
+ bgColor: string;
23
+ color: string;
24
+ };
25
+ span: {
26
+ alignItems: string;
27
+ borderBottom: {
28
+ mh: string;
29
+ };
30
+ display: string;
31
+ _dark: {
32
+ borderBottom: string | {
33
+ mh: string;
34
+ };
35
+ borderColor: {
36
+ mh: string;
37
+ };
38
+ };
39
+ };
40
+ svg: {
41
+ marginLeft: {
42
+ base: string;
43
+ mh: string;
44
+ };
45
+ fill: {
46
+ base: string;
47
+ mh: string;
48
+ };
49
+ _dark: {
50
+ fill: {
51
+ base: string;
52
+ mh: string;
53
+ };
54
+ };
55
+ };
56
+ _hover: {
57
+ backgroundColor: string;
58
+ color: string;
59
+ textDecoration: string;
60
+ svg: {
61
+ fill: {
62
+ base: string;
63
+ mh: string;
64
+ };
65
+ };
66
+ _dark: {
67
+ color: string;
68
+ svg: {
69
+ fill: {
70
+ base: string;
71
+ mh: string;
72
+ };
73
+ };
74
+ };
75
+ };
76
+ _focus: {
77
+ borderRadius: string;
78
+ outlineColor: string;
79
+ outlineOffset: string;
80
+ outlineStyle: string;
81
+ outlineWidth: string;
82
+ };
83
+ };
84
+ };
85
+ export default HeaderSearchButton;
package/dist/src/theme/components/headerSearchForm.d.ts ADDED
@@ -0,0 +1,185 @@
1
+ declare const HeaderSearchForm: {
2
+ parts: string[];
3
+ baseStyle: {
4
+ color: string;
5
+ backgroundColor: string;
6
+ left: string;
7
+ minHeight: {
8
+ base: string;
9
+ mh: string;
10
+ };
11
+ position: string;
12
+ whiteSpace: string;
13
+ width: string;
14
+ zIndex: string;
15
+ svg: {
16
+ color: string;
17
+ fill: string;
18
+ marginTop: string;
19
+ };
20
+ form: {
21
+ margin: {
22
+ mh: string;
23
+ };
24
+ maxWidth: {
25
+ mh: string;
26
+ };
27
+ whiteSpace: string;
28
+ "> div": {
29
+ margin: string;
30
+ marginLeft: {
31
+ mh: string;
32
+ lh: string;
33
+ };
34
+ marginRight: {
35
+ mh: string;
36
+ };
37
+ };
38
+ };
39
+ "#radio-group-search-type": {
40
+ margin: {
41
+ base: string;
42
+ mh: string;
43
+ };
44
+ };
45
+ textInput: {
46
+ label: {
47
+ color: string;
48
+ fontSize: {
49
+ base: string;
50
+ mh: string;
51
+ };
52
+ };
53
+ input: {
54
+ borderRadius: {
55
+ mh: string;
56
+ };
57
+ color: string;
58
+ lineHeight: string;
59
+ minHeight: {
60
+ base: string;
61
+ mh: string;
62
+ };
63
+ paddingLeft: {
64
+ base: string;
65
+ mh: string;
66
+ };
67
+ _placeholder: {
68
+ fontSize: {
69
+ base: string;
70
+ };
71
+ fontStyle: string;
72
+ };
73
+ _focus: {
74
+ borderRadius: string;
75
+ outlineColor: string;
76
+ outlineOffset: string;
77
+ outlineStyle: string;
78
+ outlineWidth: string;
79
+ };
80
+ _hover: {
81
+ borderRadius: string;
82
+ outlineColor: string;
83
+ outlineOffset: string;
84
+ outlineStyle: string;
85
+ outlineWidth: string;
86
+ };
87
+ _dark: {
88
+ color: string;
89
+ };
90
+ };
91
+ };
92
+ searchBtn: {
93
+ alignSelf: string;
94
+ backgroundColor: string;
95
+ borderColor: string;
96
+ borderRadius: string;
97
+ borderWidth: string;
98
+ height: {
99
+ base: string;
100
+ mh: string;
101
+ };
102
+ marginTop: string;
103
+ marginEnd: string;
104
+ maxHeight: string;
105
+ svg: {
106
+ marginTop: string;
107
+ };
108
+ width: {
109
+ base: string;
110
+ mh: string;
111
+ };
112
+ _focus: {
113
+ borderRadius: string;
114
+ outlineColor: string;
115
+ outlineOffset: string;
116
+ outlineStyle: string;
117
+ outlineWidth: string;
118
+ };
119
+ _hover: {
120
+ borderRadius: string;
121
+ outlineColor: string;
122
+ outlineOffset: string;
123
+ outlineStyle: string;
124
+ outlineWidth: string;
125
+ backgroundColor: string;
126
+ };
127
+ };
128
+ radio: {
129
+ backgroundColor: string;
130
+ border: string;
131
+ _focus: {
132
+ borderRadius: string;
133
+ outlineColor: string;
134
+ outlineOffset: string;
135
+ outlineStyle: string;
136
+ outlineWidth: string;
137
+ };
138
+ _hover: {
139
+ borderRadius: string;
140
+ outlineColor: string;
141
+ outlineOffset: string;
142
+ outlineStyle: string;
143
+ outlineWidth: string;
144
+ };
145
+ };
146
+ ".chakra-radio": {
147
+ alignItems: string;
148
+ };
149
+ ".chakra-radio__label": {
150
+ fontWeight: string;
151
+ };
152
+ mobileBtns: {
153
+ alignItems: string;
154
+ backgroundColor: string;
155
+ borderRadius: string;
156
+ display: string;
157
+ fontSize: string;
158
+ flex: string;
159
+ justifyContent: string;
160
+ padding: string;
161
+ svg: {
162
+ fill: string;
163
+ marginLeft: string;
164
+ };
165
+ _hover: {
166
+ backgroundColor: string;
167
+ };
168
+ _focus: {
169
+ borderRadius: string;
170
+ outlineColor: string;
171
+ outlineOffset: string;
172
+ outlineStyle: string;
173
+ outlineWidth: string;
174
+ };
175
+ };
176
+ _dark: {
177
+ bgColor: string;
178
+ color: string;
179
+ label: {
180
+ color: string;
181
+ };
182
+ };
183
+ };
184
+ };
185
+ export default HeaderSearchForm;
package/dist/src/theme/components/headerSitewideAlerts.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ declare const SitewideAlerts: {
2
+ baseStyle: {
3
+ backgroundColor: string;
4
+ borderBottom: {
5
+ base: string;
6
+ mh: string;
7
+ };
8
+ fontSize: string;
9
+ fontWeight: string;
10
+ lineHeight: string;
11
+ minHeight: {
12
+ base: string;
13
+ mh: string;
14
+ };
15
+ paddingX: string;
16
+ ul: {
17
+ marginBottom: string;
18
+ a: {
19
+ textDecoration: string;
20
+ };
21
+ p: {
22
+ marginBottom: string;
23
+ marginTop: string;
24
+ };
25
+ _dark: {
26
+ color: string;
27
+ a: {
28
+ color: string;
29
+ _hover: {
30
+ color: string;
31
+ };
32
+ };
33
+ };
34
+ };
35
+ _dark: {
36
+ backgroundColor: string;
37
+ borderBottom: string;
38
+ borderColor: string;
39
+ color: string;
40
+ };
41
+ };
42
+ };
43
+ export default SitewideAlerts;
package/dist/src/theme/components/headerUpperNav.d.ts ADDED
@@ -0,0 +1,60 @@
1
+ declare const HeaderUpperNav: {
2
+ parts: string[];
3
+ baseStyle: {
4
+ height: string;
5
+ ul: {
6
+ alignItems: string;
7
+ display: string;
8
+ margin: string;
9
+ whiteSpace: string;
10
+ };
11
+ li: {
12
+ fontSize: string;
13
+ fontWeight: string;
14
+ marginRight: string;
15
+ _last: {
16
+ marginRight: string;
17
+ };
18
+ };
19
+ a: {
20
+ color: string;
21
+ position: string;
22
+ textDecoration: string;
23
+ _hover: {
24
+ color: string;
25
+ textDecoration: string;
26
+ };
27
+ _focus: {
28
+ borderRadius: string;
29
+ outlineColor: string;
30
+ outlineOffset: string;
31
+ outlineStyle: string;
32
+ outlineWidth: string;
33
+ };
34
+ _dark: {
35
+ color: string;
36
+ _hover: {
37
+ color: string;
38
+ };
39
+ };
40
+ };
41
+ svg: {
42
+ _dark: {
43
+ fill: string;
44
+ };
45
+ };
46
+ donateLink: {
47
+ color: string;
48
+ _hover: {
49
+ color: string;
50
+ };
51
+ _dark: {
52
+ bgColor: string;
53
+ _hover: {
54
+ bgColor: string;
55
+ };
56
+ };
57
+ };
58
+ };
59
+ };
60
+ export default HeaderUpperNav;
package/dist/src/theme/components/newsletterSignup.d.ts CHANGED
@@ -35,7 +35,7 @@ declare const NewsletterSignup: {
35
35
  md: "dark.ui.border.default";
36
36
  };
37
37
  borderLeftColor: {
38
- md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.section.books-and-more.primary" | "dark.brand.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
38
+ md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.brand.primary" | "dark.section.books-and-more.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
39
39
  };
40
40
  };
41
41
  padding: {
package/dist/src/theme/components/slider.d.ts CHANGED
@@ -79,12 +79,12 @@ declare const CustomSlider: {
79
79
  };
80
80
  sizes?: {
81
81
  [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
82
- keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
82
+ keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
83
83
  }>;
84
84
  };
85
85
  variants?: {
86
86
  [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
87
- keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
87
+ keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
88
88
  }>;
89
89
  };
90
90
  defaultProps?: {
@@ -92,6 +92,6 @@ declare const CustomSlider: {
92
92
  variant?: string | number;
93
93
  colorScheme?: string;
94
94
  };
95
- parts: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
95
+ parts: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
96
96
  };
97
97
  export default CustomSlider;
package/dist/src/theme/foundations/breakpoints.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ export declare const headerBreakpoints: {
2
+ mh: string;
3
+ lh: string;
4
+ };
1
5
  /**
2
6
  * Breakpoints from "src/styles/base/_01-breakpoints.scss"
3
7
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
@@ -16,7 +20,9 @@
16
20
  declare const _default: {
17
21
  sm: string;
18
22
  md: string;
23
+ mh: string;
19
24
  lg: string;
25
+ lh: string;
20
26
  xl: string;
21
27
  "2xl": string;
22
28
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "3.4.2",
3
+ "version": "3.4.3-rc",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -113,6 +113,7 @@
113
113
  "jest-axe": "9.0.0",
114
114
  "jest-environment-jsdom": "29.7.0",
115
115
  "jest-transformer-svg": "2.0.2",
116
+ "js-cookie": "^3.0.5",
116
117
  "lint-staged": "10.5.4",
117
118
  "normalize.css": "8.0.1",
118
119
  "prettier": "2.4.1",