@windstream/react-shared-components 0.0.51 → 0.0.52
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/dist/core.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/checklist/types.ts +6 -6
- package/src/components/link/index.tsx +97 -97
package/dist/core.d.ts
CHANGED
|
@@ -331,7 +331,7 @@ type ButtonCustomProps = {
|
|
|
331
331
|
};
|
|
332
332
|
type ButtonProps = ButtonCustomProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className">;
|
|
333
333
|
|
|
334
|
-
declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "
|
|
334
|
+
declare const BrandButton: React$1.ForwardRefExoticComponent<_shared_components_brand_button_types.ButtonCustomProps & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "className" | "children"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
335
335
|
|
|
336
336
|
declare const Checklist: React__default.FC<ChecklistProps>;
|
|
337
337
|
|
package/dist/index.d.ts
CHANGED
|
@@ -61,7 +61,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
|
|
|
61
61
|
size?: "slim" | "medium" | "large" | undefined;
|
|
62
62
|
label?: string | undefined;
|
|
63
63
|
errorText?: string | undefined;
|
|
64
|
-
prefixIconName?: "
|
|
64
|
+
prefixIconName?: "search" | "location_on" | undefined;
|
|
65
65
|
prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
|
|
66
66
|
prefixIconFill?: boolean | undefined;
|
|
67
67
|
suffixIconFill?: boolean | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export type ChecklistProps = {
|
|
2
|
-
items:
|
|
3
|
-
// TODO: add icon names as needed
|
|
4
|
-
listIconName?: "check";
|
|
5
|
-
listItemClassName?: string;
|
|
6
|
-
};
|
|
1
|
+
export type ChecklistProps = {
|
|
2
|
+
items: React.ReactNode[];
|
|
3
|
+
// TODO: add icon names as needed
|
|
4
|
+
listIconName?: "check";
|
|
5
|
+
listItemClassName?: string;
|
|
6
|
+
};
|
|
@@ -1,97 +1,97 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
|
|
3
|
-
import React, { forwardRef } from "react";
|
|
4
|
-
import { cx } from "../../utils";
|
|
5
|
-
import { LinkProps } from "./types";
|
|
6
|
-
|
|
7
|
-
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
|
|
8
|
-
(
|
|
9
|
-
{
|
|
10
|
-
children,
|
|
11
|
-
href,
|
|
12
|
-
className = "",
|
|
13
|
-
onClick,
|
|
14
|
-
variant = "unstyled",
|
|
15
|
-
style,
|
|
16
|
-
external = false,
|
|
17
|
-
disabled = false,
|
|
18
|
-
...props
|
|
19
|
-
},
|
|
20
|
-
ref
|
|
21
|
-
) => {
|
|
22
|
-
// Get Tailwind classes for different variants
|
|
23
|
-
const getVariantClasses = () => {
|
|
24
|
-
if (variant === "unstyled") return "";
|
|
25
|
-
|
|
26
|
-
// TODO: Add styles based on the figma design for all variants
|
|
27
|
-
const baseClasses =
|
|
28
|
-
"transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
|
|
29
|
-
|
|
30
|
-
const variantClasses = {
|
|
31
|
-
default: "text-text underline",
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
const stateClasses = [
|
|
35
|
-
disabled
|
|
36
|
-
? "opacity-60 cursor-not-allowed pointer-events-none"
|
|
37
|
-
: "cursor-pointer",
|
|
38
|
-
]
|
|
39
|
-
.filter(Boolean)
|
|
40
|
-
.join(" ");
|
|
41
|
-
|
|
42
|
-
return [
|
|
43
|
-
baseClasses,
|
|
44
|
-
variantClasses[variant as keyof typeof variantClasses] ||
|
|
45
|
-
variantClasses.default,
|
|
46
|
-
stateClasses,
|
|
47
|
-
]
|
|
48
|
-
.filter(Boolean)
|
|
49
|
-
.join(" ");
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
const tailwindClasses = getVariantClasses();
|
|
53
|
-
|
|
54
|
-
// Handle click events
|
|
55
|
-
const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
|
56
|
-
if (disabled) {
|
|
57
|
-
event.preventDefault();
|
|
58
|
-
return;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
onClick?.(event);
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// Combine all classes
|
|
65
|
-
const combinedClassName = cx(
|
|
66
|
-
tailwindClasses,
|
|
67
|
-
`link--${variant}`,
|
|
68
|
-
disabled && "link--disabled",
|
|
69
|
-
className
|
|
70
|
-
);
|
|
71
|
-
|
|
72
|
-
// Determine link props based on external/internal
|
|
73
|
-
const linkProps = {
|
|
74
|
-
...props,
|
|
75
|
-
ref,
|
|
76
|
-
className: combinedClassName,
|
|
77
|
-
style,
|
|
78
|
-
href: disabled ? undefined : href,
|
|
79
|
-
onClick: handleClick,
|
|
80
|
-
...(external &&
|
|
81
|
-
!disabled && {
|
|
82
|
-
target: "_blank",
|
|
83
|
-
rel: "noopener noreferrer",
|
|
84
|
-
}),
|
|
85
|
-
...(disabled && {
|
|
86
|
-
"aria-disabled": true,
|
|
87
|
-
tabIndex: -1,
|
|
88
|
-
}),
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
return <a {...linkProps}>{children}</a>;
|
|
92
|
-
}
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
Link.displayName = "Link";
|
|
96
|
-
|
|
97
|
-
export type { LinkProps };
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
import React, { forwardRef } from "react";
|
|
4
|
+
import { cx } from "../../utils";
|
|
5
|
+
import { LinkProps } from "./types";
|
|
6
|
+
|
|
7
|
+
export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
|
|
8
|
+
(
|
|
9
|
+
{
|
|
10
|
+
children,
|
|
11
|
+
href,
|
|
12
|
+
className = "",
|
|
13
|
+
onClick,
|
|
14
|
+
variant = "unstyled",
|
|
15
|
+
style,
|
|
16
|
+
external = false,
|
|
17
|
+
disabled = false,
|
|
18
|
+
...props
|
|
19
|
+
},
|
|
20
|
+
ref
|
|
21
|
+
) => {
|
|
22
|
+
// Get Tailwind classes for different variants
|
|
23
|
+
const getVariantClasses = () => {
|
|
24
|
+
if (variant === "unstyled") return "";
|
|
25
|
+
|
|
26
|
+
// TODO: Add styles based on the figma design for all variants
|
|
27
|
+
const baseClasses =
|
|
28
|
+
"transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
|
|
29
|
+
|
|
30
|
+
const variantClasses = {
|
|
31
|
+
default: "text-text underline",
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const stateClasses = [
|
|
35
|
+
disabled
|
|
36
|
+
? "opacity-60 cursor-not-allowed pointer-events-none"
|
|
37
|
+
: "cursor-pointer",
|
|
38
|
+
]
|
|
39
|
+
.filter(Boolean)
|
|
40
|
+
.join(" ");
|
|
41
|
+
|
|
42
|
+
return [
|
|
43
|
+
baseClasses,
|
|
44
|
+
variantClasses[variant as keyof typeof variantClasses] ||
|
|
45
|
+
variantClasses.default,
|
|
46
|
+
stateClasses,
|
|
47
|
+
]
|
|
48
|
+
.filter(Boolean)
|
|
49
|
+
.join(" ");
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
const tailwindClasses = getVariantClasses();
|
|
53
|
+
|
|
54
|
+
// Handle click events
|
|
55
|
+
const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
|
56
|
+
if (disabled) {
|
|
57
|
+
event.preventDefault();
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
onClick?.(event);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
// Combine all classes
|
|
65
|
+
const combinedClassName = cx(
|
|
66
|
+
tailwindClasses,
|
|
67
|
+
`link--${variant}`,
|
|
68
|
+
disabled && "link--disabled",
|
|
69
|
+
className
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Determine link props based on external/internal
|
|
73
|
+
const linkProps = {
|
|
74
|
+
...props,
|
|
75
|
+
ref,
|
|
76
|
+
className: combinedClassName,
|
|
77
|
+
style,
|
|
78
|
+
href: disabled ? undefined : href,
|
|
79
|
+
onClick: handleClick,
|
|
80
|
+
...(external &&
|
|
81
|
+
!disabled && {
|
|
82
|
+
target: "_blank",
|
|
83
|
+
rel: "noopener noreferrer",
|
|
84
|
+
}),
|
|
85
|
+
...(disabled && {
|
|
86
|
+
"aria-disabled": true,
|
|
87
|
+
tabIndex: -1,
|
|
88
|
+
}),
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
return <a {...linkProps}>{children}</a>;
|
|
92
|
+
}
|
|
93
|
+
);
|
|
94
|
+
|
|
95
|
+
Link.displayName = "Link";
|
|
96
|
+
|
|
97
|
+
export type { LinkProps };
|