@windstream/react-shared-components 0.1.52 → 0.1.54
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
CHANGED
|
@@ -60,7 +60,7 @@ type InputFieldProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
|
60
60
|
declare const InputField: ForwardRefRenderFunction<HTMLInputElement, InputFieldProps>;
|
|
61
61
|
declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> & {
|
|
62
62
|
state?: "default" | "focus" | "active" | "hover" | "filled" | "error" | undefined;
|
|
63
|
-
size?: "
|
|
63
|
+
size?: "medium" | "large" | "slim" | undefined;
|
|
64
64
|
label?: string | undefined;
|
|
65
65
|
errorText?: string | undefined;
|
|
66
66
|
prefixIconName?: "search" | "location_on" | undefined;
|
|
@@ -346,7 +346,7 @@ type ButtonAsAnchor = ButtonCustomProps & Omit<AnchorHTMLAttributes<HTMLAnchorEl
|
|
|
346
346
|
};
|
|
347
347
|
type ButtonProps = ButtonAsButton | ButtonAsAnchor;
|
|
348
348
|
|
|
349
|
-
declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<
|
|
349
|
+
declare const BrandButton: React__default.ForwardRefExoticComponent<ButtonProps$2 & React__default.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
|
|
350
350
|
|
|
351
351
|
declare const Checklist: React__default.FC<ChecklistProps>;
|
|
352
352
|
|
package/package.json
CHANGED
|
@@ -1,70 +1,76 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import Button from "../button";
|
|
3
|
-
import { BreadcrumbNavigationProps } from "./types";
|
|
4
|
-
|
|
5
|
-
import { MaterialIcon } from "@shared/components/material-icon";
|
|
6
|
-
import { NextImage } from "@shared/components/next-image";
|
|
7
|
-
import { Text } from "@shared/components/text";
|
|
8
|
-
|
|
9
|
-
export const BreadcrumbNavigation: React.FC<
|
|
10
|
-
BreadcrumbNavigationProps
|
|
11
|
-
> = props => {
|
|
12
|
-
const { links = [], textColor = "dark", maxWidth = true } = props;
|
|
13
|
-
const color =
|
|
14
|
-
textColor === "dark"
|
|
15
|
-
? "text-white xl:text-text"
|
|
16
|
-
: "text-text xl:text-white";
|
|
17
|
-
if (!links.length) return null;
|
|
18
|
-
return (
|
|
19
|
-
<nav
|
|
20
|
-
aria-label="Breadcrumb"
|
|
21
|
-
className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
|
|
22
|
-
>
|
|
23
|
-
<ol
|
|
24
|
-
className={
|
|
25
|
-
"relative right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 xl:absolute xl:mx-auto xl:flex-wrap xl:px-3"
|
|
26
|
-
}
|
|
27
|
-
>
|
|
28
|
-
{links.map((link, index) => {
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Button from "../button";
|
|
3
|
+
import { BreadcrumbNavigationProps } from "./types";
|
|
4
|
+
|
|
5
|
+
import { MaterialIcon } from "@shared/components/material-icon";
|
|
6
|
+
import { NextImage } from "@shared/components/next-image";
|
|
7
|
+
import { Text } from "@shared/components/text";
|
|
8
|
+
|
|
9
|
+
export const BreadcrumbNavigation: React.FC<
|
|
10
|
+
BreadcrumbNavigationProps
|
|
11
|
+
> = props => {
|
|
12
|
+
const { links = [], textColor = "dark", maxWidth = true } = props;
|
|
13
|
+
const color =
|
|
14
|
+
textColor === "dark"
|
|
15
|
+
? "text-white xl:text-text"
|
|
16
|
+
: "text-text xl:text-white";
|
|
17
|
+
if (!links.length) return null;
|
|
18
|
+
return (
|
|
19
|
+
<nav
|
|
20
|
+
aria-label="Breadcrumb"
|
|
21
|
+
className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
|
|
22
|
+
>
|
|
23
|
+
<ol
|
|
24
|
+
className={
|
|
25
|
+
"relative right-0 z-10 mx-0 flex w-full flex-nowrap items-center gap-2 px-7 pb-0 pt-8 md:px-14 xl:absolute xl:mx-auto xl:flex-wrap xl:px-3"
|
|
26
|
+
}
|
|
27
|
+
>
|
|
28
|
+
{links.map((link, index) => {
|
|
29
|
+
const { image, ...linkProps } = link;
|
|
30
|
+
const imageSrc = image?.url
|
|
31
|
+
? image.url.startsWith("//")
|
|
32
|
+
? `https:${image.url}`
|
|
33
|
+
: image.url
|
|
34
|
+
: "";
|
|
35
|
+
const isLast = index === links.length - 1;
|
|
36
|
+
return !isLast ? (
|
|
37
|
+
<li key={index} className="flex flex-none items-center">
|
|
38
|
+
{imageSrc && (
|
|
39
|
+
<NextImage
|
|
40
|
+
src={imageSrc}
|
|
41
|
+
alt={image?.alt || ""}
|
|
42
|
+
width={20}
|
|
43
|
+
height={20}
|
|
44
|
+
className="mr-2"
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
<Button
|
|
48
|
+
{...linkProps}
|
|
49
|
+
linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
|
|
50
|
+
linkVariant="unstyled"
|
|
51
|
+
/>
|
|
52
|
+
<MaterialIcon name="chevron_right" className={`${color} `} />
|
|
53
|
+
</li>
|
|
54
|
+
) : (
|
|
55
|
+
<li key={index} className="flex min-w-0 items-center">
|
|
56
|
+
{imageSrc && (
|
|
57
|
+
<NextImage
|
|
58
|
+
src={imageSrc}
|
|
59
|
+
alt={image?.alt || ""}
|
|
60
|
+
width={20}
|
|
61
|
+
height={20}
|
|
62
|
+
className="mr-2"
|
|
63
|
+
/>
|
|
64
|
+
)}
|
|
65
|
+
<Text as="span" className={`body3 mr-2 break-words ${color}`}>
|
|
66
|
+
{link.buttonLabel}
|
|
67
|
+
</Text>
|
|
68
|
+
</li>
|
|
69
|
+
);
|
|
70
|
+
})}
|
|
71
|
+
</ol>
|
|
72
|
+
</nav>
|
|
73
|
+
);
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export default BreadcrumbNavigation;
|