@windstream/react-shared-components 0.2.9 → 0.2.11
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/contentful/index.esm.js +1 -1
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +1 -1
- package/dist/contentful/index.js.map +1 -1
- package/dist/core.d.ts +2 -2
- package/dist/index.d.ts +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/components/list/index.tsx +96 -96
- package/src/components/material-icon/index.tsx +48 -48
- package/src/contentful/blocks/find-kinetic/index.tsx +46 -21
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { cx } from "../../utils/cx";
|
|
3
|
-
import type { IconProps } from "./types";
|
|
4
|
-
|
|
5
|
-
const MaterialIcon: React.FC<IconProps> = ({
|
|
6
|
-
name,
|
|
7
|
-
fill = 0,
|
|
8
|
-
opticalSize = "48dp",
|
|
9
|
-
weight = "200",
|
|
10
|
-
emphasis = 145,
|
|
11
|
-
size = 24,
|
|
12
|
-
color = "currentColor",
|
|
13
|
-
style = {},
|
|
14
|
-
className,
|
|
15
|
-
onClick,
|
|
16
|
-
dataTestId,
|
|
17
|
-
}) => {
|
|
18
|
-
const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
|
|
19
|
-
|
|
20
|
-
const combinedStyle: React.CSSProperties = {
|
|
21
|
-
fontVariationSettings,
|
|
22
|
-
fontSize: `${size}px`,
|
|
23
|
-
fontFamily: "'Material Symbols Rounded'",
|
|
24
|
-
color: color || "currentColor",
|
|
25
|
-
...style,
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<span
|
|
30
|
-
style={combinedStyle}
|
|
31
|
-
className={cx(
|
|
32
|
-
"material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
|
|
33
|
-
className
|
|
34
|
-
)}
|
|
35
|
-
onClick={onClick}
|
|
36
|
-
data-testid={dataTestId}
|
|
37
|
-
aria-hidden={"true"}
|
|
38
|
-
>
|
|
39
|
-
{name}
|
|
40
|
-
</span>
|
|
41
|
-
);
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export { MaterialIcon };
|
|
45
|
-
|
|
46
|
-
MaterialIcon.displayName = "MaterialIcon";
|
|
47
|
-
|
|
48
|
-
export type { IconProps, IconName, Size } from "./types";
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { cx } from "../../utils/cx";
|
|
3
|
+
import type { IconProps } from "./types";
|
|
4
|
+
|
|
5
|
+
const MaterialIcon: React.FC<IconProps> = ({
|
|
6
|
+
name,
|
|
7
|
+
fill = 0,
|
|
8
|
+
opticalSize = "48dp",
|
|
9
|
+
weight = "200",
|
|
10
|
+
emphasis = 145,
|
|
11
|
+
size = 24,
|
|
12
|
+
color = "currentColor",
|
|
13
|
+
style = {},
|
|
14
|
+
className,
|
|
15
|
+
onClick,
|
|
16
|
+
dataTestId,
|
|
17
|
+
}) => {
|
|
18
|
+
const fontVariationSettings = `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${emphasis}, 'opsz' ${opticalSize.substring(0, 2)}`;
|
|
19
|
+
|
|
20
|
+
const combinedStyle: React.CSSProperties = {
|
|
21
|
+
fontVariationSettings,
|
|
22
|
+
fontSize: `${size}px`,
|
|
23
|
+
fontFamily: "'Material Symbols Rounded'",
|
|
24
|
+
color: color || "currentColor",
|
|
25
|
+
...style,
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<span
|
|
30
|
+
style={combinedStyle}
|
|
31
|
+
className={cx(
|
|
32
|
+
"material-symbols-rounded inline-block max-w-[52px] overflow-hidden",
|
|
33
|
+
className
|
|
34
|
+
)}
|
|
35
|
+
onClick={onClick}
|
|
36
|
+
data-testid={dataTestId}
|
|
37
|
+
aria-hidden={"true"}
|
|
38
|
+
>
|
|
39
|
+
{name}
|
|
40
|
+
</span>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
export { MaterialIcon };
|
|
45
|
+
|
|
46
|
+
MaterialIcon.displayName = "MaterialIcon";
|
|
47
|
+
|
|
48
|
+
export type { IconProps, IconName, Size } from "./types";
|
|
@@ -37,12 +37,12 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
|
|
|
37
37
|
className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
|
|
38
38
|
>
|
|
39
39
|
<div
|
|
40
|
-
className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20`}
|
|
40
|
+
className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 ${image ? "mt-12" : "mt-0 xl:mt-0"} xl:my-20 md:px-5 xl:px-10`}
|
|
41
41
|
>
|
|
42
42
|
{title && (
|
|
43
43
|
<Text
|
|
44
44
|
as={enableHeading ? "h1" : "h2"}
|
|
45
|
-
className="heading2 md:heading1
|
|
45
|
+
className="heading2 md:heading1 text-center"
|
|
46
46
|
>
|
|
47
47
|
{title}
|
|
48
48
|
</Text>
|
|
@@ -50,7 +50,7 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
|
|
|
50
50
|
{subTitle && (
|
|
51
51
|
<Text
|
|
52
52
|
as={enableHeading ? "h2" : "h3"}
|
|
53
|
-
className="subheading1 mt-4
|
|
53
|
+
className="subheading1 mt-4 text-center"
|
|
54
54
|
>
|
|
55
55
|
{subTitle}
|
|
56
56
|
</Text>
|
|
@@ -60,10 +60,10 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
|
|
|
60
60
|
className={`mt-8 flex flex-col items-center xl:flex-row ${image ? "xl:mt-16" : "xl:mt-10"} gap-10`}
|
|
61
61
|
>
|
|
62
62
|
<div
|
|
63
|
-
className={`flex flex-col ${image ? "xl:items-start" : "items-center"}
|
|
63
|
+
className={`flex flex-col gap-10 self-stretch xl:flex-[1_0_0] ${image ? "xl:items-start pl-2 md:px-4 lg:pl-12 xl:pl-16" : "items-center"}`}
|
|
64
64
|
>
|
|
65
65
|
{description && (
|
|
66
|
-
<Text as="p" className=
|
|
66
|
+
<Text as="p" className={`body1 text-center${image ? " lg:text-left" : ""}`}>
|
|
67
67
|
{description}
|
|
68
68
|
</Text>
|
|
69
69
|
)}
|
|
@@ -98,38 +98,63 @@ export const FindKinetic: React.FC<FindKineticProps> = ({
|
|
|
98
98
|
})()}
|
|
99
99
|
</ul>
|
|
100
100
|
<ul
|
|
101
|
-
className={`hidden ${image ? "gap-x-6" : "gap-x-20"} gap-y-5 md:grid
|
|
101
|
+
className={`hidden ${image ? "gap-x-6" : "gap-x-20"} gap-y-5 md:grid md:grid-cols-3 ${image ? "" : "xl:hidden"}`}
|
|
102
102
|
>
|
|
103
103
|
{(() => {
|
|
104
104
|
const sortedList = [...list].sort((a, b) =>
|
|
105
105
|
a.name.localeCompare(b.name)
|
|
106
106
|
);
|
|
107
|
+
|
|
107
108
|
const numColumns = 3;
|
|
108
109
|
const numRows = Math.ceil(sortedList.length / numColumns);
|
|
109
110
|
const rearranged = [];
|
|
110
111
|
for (let row = 0; row < numRows; row++) {
|
|
111
112
|
for (let col = 0; col < numColumns; col++) {
|
|
112
113
|
const index = col * numRows + row;
|
|
113
|
-
|
|
114
|
-
rearranged.push(sortedList[index]);
|
|
115
|
-
}
|
|
114
|
+
rearranged.push(index < sortedList.length ? sortedList[index] : null); // ← holds position
|
|
116
115
|
}
|
|
117
116
|
}
|
|
118
|
-
return rearranged.map((item, index: number) =>
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
<Link
|
|
124
|
-
href={getLocationHref(item.code)}
|
|
125
|
-
className="label1"
|
|
117
|
+
return rearranged.map((item, index: number) =>
|
|
118
|
+
item ? (
|
|
119
|
+
<li
|
|
120
|
+
key={`item-list-3-${index}`}
|
|
121
|
+
className={`${image ? "" : "w-[172px]"}`}
|
|
126
122
|
>
|
|
127
|
-
{item.
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
123
|
+
<Link href={getLocationHref(item.code)} className="label1">
|
|
124
|
+
{item.name}
|
|
125
|
+
</Link>
|
|
126
|
+
</li>
|
|
127
|
+
) : <li key={`empty-3-${index}`} aria-hidden="true" />
|
|
128
|
+
);
|
|
131
129
|
})()}
|
|
132
130
|
</ul>
|
|
131
|
+
{!image && (
|
|
132
|
+
<ul className="hidden xl:grid xl:grid-cols-4 gap-x-20 gap-y-5">
|
|
133
|
+
{(() => {
|
|
134
|
+
const sortedList = [...list].sort((a, b) =>
|
|
135
|
+
a.name.localeCompare(b.name)
|
|
136
|
+
);
|
|
137
|
+
const numColumns = 4;
|
|
138
|
+
const numRows = Math.ceil(sortedList.length / numColumns);
|
|
139
|
+
const rearranged = [];
|
|
140
|
+
for (let row = 0; row < numRows; row++) {
|
|
141
|
+
for (let col = 0; col < numColumns; col++) {
|
|
142
|
+
const index = col * numRows + row;
|
|
143
|
+
rearranged.push(index < sortedList.length ? sortedList[index] : null);
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
return rearranged.map((item, index: number) =>
|
|
147
|
+
item ? (
|
|
148
|
+
<li key={`item-list-4-${index}`} className="w-[172px]">
|
|
149
|
+
<Link href={getLocationHref(item.code)} className="label1">
|
|
150
|
+
{item.name}
|
|
151
|
+
</Link>
|
|
152
|
+
</li>
|
|
153
|
+
) : <li key={`empty-4-${index}`} aria-hidden="true" />
|
|
154
|
+
);
|
|
155
|
+
})()}
|
|
156
|
+
</ul>
|
|
157
|
+
)}
|
|
133
158
|
</>
|
|
134
159
|
)}
|
|
135
160
|
</div>
|