@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?: "slim" | "medium" | "large" | undefined;
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<HTMLButtonElement | HTMLAnchorElement>>;
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@windstream/react-shared-components",
3
- "version": "0.1.52",
3
+ "version": "0.1.54",
4
4
  "type": "module",
5
5
  "description": "Shared React components for Kinetic applications",
6
6
  "main": "dist/index.js",
@@ -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 isLast = index === links.length - 1;
30
- return !isLast ? (
31
- <li key={index} className="flex flex-none items-center">
32
- {link.image?.url && (
33
- <NextImage
34
- src={link.image.url}
35
- alt={link.image.alt || ""}
36
- width={20}
37
- height={20}
38
- className="mr-2"
39
- />
40
- )}
41
- <Button
42
- {...link}
43
- linkClassName={`label3 mr-2 whitespace-nowrap ${color}`}
44
- linkVariant="unstyled"
45
- />
46
- <MaterialIcon name="chevron_right" className={`${color} `} />
47
- </li>
48
- ) : (
49
- <li key={index} className="flex min-w-0 items-center">
50
- {link.image?.url && (
51
- <NextImage
52
- src={link.image.url}
53
- alt={link.image.alt || ""}
54
- width={20}
55
- height={20}
56
- className="mr-2"
57
- />
58
- )}
59
- <Text as="span" className={`body3 mr-2 break-words ${color}`}>
60
- {link.buttonLabel}
61
- </Text>
62
- </li>
63
- );
64
- })}
65
- </ol>
66
- </nav>
67
- );
68
- };
69
-
70
- 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 { 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;