@nypl/design-system-react-components 2.0.0-rc3 → 2.0.0-rc5

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 (8) hide show
  1. package/dist/design-system-react-components.cjs +61 -61
  2. package/dist/design-system-react-components.js +6367 -6009
  3. package/dist/src/components/Link/Link.d.ts +1 -0
  4. package/dist/src/components/SocialMediaLinks/SocialMediaLinks.d.ts +42 -0
  5. package/dist/src/components/SocialMediaLinks/SocialMediaLinksUtils.d.ts +7 -0
  6. package/dist/src/index.d.ts +1 -0
  7. package/dist/src/theme/components/socialmedialinks.d.ts +192 -0
  8. package/package.json +1 -1
package/dist/src/components/Link/Link.d.ts CHANGED
@@ -15,6 +15,7 @@ export interface LinkProps {
15
15
  * underline in hover state. */
16
16
  isUnderlined?: boolean;
17
17
  onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
18
+ rel?: string;
18
19
  /** Visibly hidden text that will only be read by screenreaders. */
19
20
  screenreaderOnlyText?: string;
20
21
  /** Prop that sets the HTML attribute to target where the link should go. */
package/dist/src/components/SocialMediaLinks/SocialMediaLinks.d.ts ADDED
@@ -0,0 +1,42 @@
1
+ import { LayoutTypes } from "../../helpers/types";
2
+ import React from "react";
3
+ export declare const borderTypeArray: readonly ["none", "circular", "straight"];
4
+ export type BorderType = typeof borderTypeArray[number];
5
+ export declare const colorTypeArray: readonly ["link", "textDefault", "textInverse"];
6
+ export type ColorType = typeof colorTypeArray[number];
7
+ export declare const sizeTypeArray: readonly ["small", "medium", "large"];
8
+ export type SizeType = typeof sizeTypeArray[number];
9
+ export declare const socialMediaLinkTypeArray: string[];
10
+ export type SocialMediaLinkType = typeof socialMediaLinkTypeArray[number];
11
+ export interface SocialMediaLinkDataProps {
12
+ /** Optional override for default platform name */
13
+ labelText?: string;
14
+ /** Required. Must be one of socialMediaLinkTypeArray */
15
+ type: SocialMediaLinkType;
16
+ /** Optional override for default social media url */
17
+ url?: string;
18
+ }
19
+ export interface SocialMediaLinksProps {
20
+ /** Optional border: straight, circular or none. */
21
+ borders?: BorderType;
22
+ /** Optional className you can add in addition to "social-media-links." */
23
+ className?: string;
24
+ /** Any of three optional values that will change the color of the svg and label text (if any). */
25
+ color?: ColorType;
26
+ /** ID that other components can cross-reference for accessibility purposes. */
27
+ id?: string;
28
+ /** Optional desktop layout. Smaller viewports are always in a column. */
29
+ layout?: LayoutTypes;
30
+ /** Optional array of social media platform types, urls, and label texts. */
31
+ linksData?: SocialMediaLinkDataProps[];
32
+ /** Optional true/false to display names of platforms along with icons.
33
+ * NOTE: Labels will NOT be shown with a circular border */
34
+ showLabels?: boolean;
35
+ /** Optional size: small, medium, or large. */
36
+ size?: SizeType;
37
+ }
38
+ /**
39
+ * The SocialMediaLinks component renders a list of links for accessing social media sites.
40
+ */
41
+ export declare const SocialMediaLinks: import("@chakra-ui/react").ChakraComponent<React.ForwardRefExoticComponent<SocialMediaLinksProps & React.RefAttributes<HTMLDivElement & HTMLUListElement & HTMLOListElement>>, {}>;
42
+ export default SocialMediaLinks;
package/dist/src/components/SocialMediaLinks/SocialMediaLinksUtils.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export declare const socialMediaDataMap: {
2
+ type: string;
3
+ iconName: string;
4
+ labelText: string;
5
+ url: string;
6
+ }[];
7
+ export declare function GetTableData(): any[];
package/dist/src/index.d.ts CHANGED
@@ -60,6 +60,7 @@ export { default as SkeletonLoader } from "./components/SkeletonLoader/SkeletonL
60
60
  export type { SkeletonLoaderImageRatios } from "./components/SkeletonLoader/SkeletonLoader";
61
61
  export { default as SkipNavigation } from "./components/SkipNavigation/SkipNavigation";
62
62
  export { default as Slider } from "./components/Slider/Slider";
63
+ export { default as SocialMediaLinks } from "./components/SocialMediaLinks/SocialMediaLinks";
63
64
  export { default as StatusBadge } from "./components/StatusBadge/StatusBadge";
64
65
  export type { StatusBadgeTypes } from "./components/StatusBadge/StatusBadge";
65
66
  export { default as StructuredContent } from "./components/StructuredContent/StructuredContent";
package/dist/src/theme/components/socialmedialinks.d.ts ADDED
@@ -0,0 +1,192 @@
1
+ import { StyleFunctionProps } from "@chakra-ui/theme-tools";
2
+ declare const SocialMediaLinks: {
3
+ baseStyle: {
4
+ display: string;
5
+ alignItems: string;
6
+ gap: string;
7
+ width: {
8
+ base: string;
9
+ md: string;
10
+ };
11
+ marginBottom: string;
12
+ li: {
13
+ marginInlineEnd: string;
14
+ marginTop: string;
15
+ width: {
16
+ base: string;
17
+ md: string;
18
+ };
19
+ _notFirst: {
20
+ marginTop: string;
21
+ };
22
+ };
23
+ a: {
24
+ display: string;
25
+ justifyContent: string;
26
+ alignContent: string;
27
+ flexWrap: string;
28
+ minWidth: {
29
+ base: string;
30
+ md: string;
31
+ };
32
+ minHeight: {
33
+ base: string;
34
+ md: string;
35
+ };
36
+ fontStyle: string;
37
+ fontSize: string;
38
+ textDecoration: string;
39
+ color: string;
40
+ _hover: {
41
+ color: string;
42
+ };
43
+ _visited: {
44
+ color: string;
45
+ };
46
+ _dark: {
47
+ color: string;
48
+ _hover: {
49
+ color: string;
50
+ };
51
+ _visited: {
52
+ color: string;
53
+ };
54
+ };
55
+ };
56
+ div: {
57
+ display: string;
58
+ alignItems: string;
59
+ gap: string;
60
+ alignSelf: string;
61
+ justifyContent: string;
62
+ width: string;
63
+ height: string;
64
+ };
65
+ svg: {
66
+ fill: string;
67
+ _dark: {
68
+ fill: string;
69
+ };
70
+ };
71
+ };
72
+ variants: {
73
+ straight(props: StyleFunctionProps): {
74
+ flexDirection: {
75
+ base: string;
76
+ md: any;
77
+ };
78
+ gap: string;
79
+ a: {
80
+ color: string;
81
+ _hover: {
82
+ color: string;
83
+ };
84
+ _visited: {
85
+ color: string;
86
+ };
87
+ _dark: {
88
+ borderColor: string;
89
+ color: string;
90
+ _hover: {
91
+ color: string;
92
+ };
93
+ _visited: {
94
+ color: string;
95
+ };
96
+ };
97
+ };
98
+ div: {
99
+ padding: string;
100
+ borderRadius: string;
101
+ borderWidth: string;
102
+ borderStyle: string;
103
+ borderColor: string;
104
+ _dark: {
105
+ borderColor: string;
106
+ };
107
+ };
108
+ svg: {
109
+ fill: string;
110
+ _dark: {
111
+ fill: string;
112
+ borderColor: string;
113
+ };
114
+ };
115
+ };
116
+ circular(props: StyleFunctionProps): {
117
+ flexDirection: {
118
+ base: string;
119
+ md: any;
120
+ };
121
+ gap: string;
122
+ a: {
123
+ color: string;
124
+ _hover: {
125
+ color: string;
126
+ };
127
+ _visited: {
128
+ color: string;
129
+ };
130
+ _dark: {
131
+ color: string;
132
+ _hover: {
133
+ color: string;
134
+ };
135
+ _visited: {
136
+ color: string;
137
+ };
138
+ };
139
+ };
140
+ div: {
141
+ padding: string;
142
+ borderRadius: string;
143
+ borderColor: string;
144
+ borderWidth: string;
145
+ borderStyle: string;
146
+ _dark: {
147
+ borderColor: string;
148
+ };
149
+ };
150
+ svg: {
151
+ fill: string;
152
+ _dark: {
153
+ fill: string;
154
+ };
155
+ };
156
+ };
157
+ none(props: StyleFunctionProps): {
158
+ flexDirection: {
159
+ base: string;
160
+ md: any;
161
+ };
162
+ a: {
163
+ color: string;
164
+ _hover: {
165
+ color: string;
166
+ };
167
+ _visited: {
168
+ color: string;
169
+ };
170
+ _dark: {
171
+ color: string;
172
+ _hover: {
173
+ color: string;
174
+ };
175
+ _visited: {
176
+ color: string;
177
+ };
178
+ };
179
+ };
180
+ svg: {
181
+ fill: string;
182
+ _dark: {
183
+ fill: string;
184
+ };
185
+ };
186
+ };
187
+ };
188
+ defaultProps: {
189
+ variant: string;
190
+ };
191
+ };
192
+ export default SocialMediaLinks;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "2.0.0-rc3",
3
+ "version": "2.0.0-rc5",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",