@windstream/react-shared-components 0.1.55 → 0.1.57

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windstream/react-shared-components",
3
- "version": "0.1.55",
3
+ "version": "0.1.57",
4
4
  "type": "module",
5
5
  "description": "Shared React components for Kinetic applications",
6
6
  "main": "dist/index.js",
@@ -1,76 +1,75 @@
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;
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 { Text } from "@shared/components/text";
7
+
8
+ export const BreadcrumbNavigation: React.FC<
9
+ BreadcrumbNavigationProps
10
+ > = props => {
11
+ const { links = [], textColor = "dark", maxWidth = true } = props;
12
+ const color =
13
+ textColor === "dark"
14
+ ? "text-white xl:text-text"
15
+ : "text-text xl:text-white";
16
+ if (!links.length) return null;
17
+ return (
18
+ <nav
19
+ aria-label="Breadcrumb"
20
+ className={`${maxWidth ? "mx-5 max-w-120 xl:mx-auto" : "mx-auto"} relative`}
21
+ >
22
+ <ol
23
+ className={
24
+ "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"
25
+ }
26
+ >
27
+ {links.map((link, index) => {
28
+ const { image, ...linkProps } = link;
29
+ const imageSrc = image?.url
30
+ ? image.url.startsWith("//")
31
+ ? `https:${image.url}`
32
+ : image.url
33
+ : "";
34
+ const isLast = index === links.length - 1;
35
+ return !isLast ? (
36
+ <li key={index} className="flex flex-none items-center">
37
+ {imageSrc && (
38
+ <img
39
+ src={imageSrc}
40
+ alt={image?.alt || ""}
41
+ width={20}
42
+ height={20}
43
+ className="mr-2"
44
+ />
45
+ )}
46
+ <Button
47
+ {...linkProps}
48
+ linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
49
+ linkVariant="unstyled"
50
+ />
51
+ <MaterialIcon name="chevron_right" className={`${color} `} />
52
+ </li>
53
+ ) : (
54
+ <li key={index} className="flex min-w-0 items-center">
55
+ {imageSrc && (
56
+ <img
57
+ src={imageSrc}
58
+ alt={image?.alt || ""}
59
+ width={20}
60
+ height={20}
61
+ className="mr-2"
62
+ />
63
+ )}
64
+ <Text as="span" className={`body3 mr-2 break-words ${color}`}>
65
+ {link.buttonLabel}
66
+ </Text>
67
+ </li>
68
+ );
69
+ })}
70
+ </ol>
71
+ </nav>
72
+ );
73
+ };
74
+
75
+ export default BreadcrumbNavigation;