@windstream/react-shared-components 0.2.0 → 0.2.1

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.
Files changed (9) hide show
  1. package/dist/contentful/index.esm.js +2 -2
  2. package/dist/contentful/index.esm.js.map +1 -1
  3. package/dist/contentful/index.js +1 -1
  4. package/dist/contentful/index.js.map +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
  8. package/src/contentful/blocks/breadcrumbs/index.tsx +95 -95
  9. package/src/contentful/blocks/find-kinetic/index.tsx +147 -164
package/src/contentful/blocks/find-kinetic/index.tsx CHANGED
@@ -1,164 +1,147 @@
1
- import React from "react";
2
- import { FindKineticProps, ThemeKey } from "./types";
3
-
4
- import { Link } from "@shared/components/link";
5
- import { Text } from "@shared/components/text";
6
- import { NextImage } from "@shared/next";
7
-
8
- export const FindKinetic: React.FC<FindKineticProps> = ({
9
- background = "white",
10
- description,
11
- enableHeading,
12
- image,
13
- list = [],
14
- localPathPrefix = "/local",
15
- subTitle,
16
- title,
17
- color = "dark",
18
- maxWidth = true,
19
- columns = 3,
20
- }) => {
21
- const bgColorClasses: Record<ThemeKey, string> = {
22
- blue: "bg-[#07B2E2]",
23
- green: "bg-[#26B170]",
24
- yellow: "bg-[#F5FF1E]",
25
- purple: "bg-[#931D69]",
26
- white: "bg-white",
27
- navy: "bg-[#00002D]",
28
- };
29
- const normalizedLocalPathPrefix = localPathPrefix
30
- ? `/${localPathPrefix.replace(/^\/+|\/+$/g, "")}`
31
- : "";
32
-
33
- const getLocationHref = (code: string) =>
34
- `${normalizedLocalPathPrefix}/${code.toLowerCase()}`;
35
-
36
- return (
37
- <div
38
- className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
39
- >
40
- <div
41
- className={`${maxWidth ? "max-w-120 xl:mx-auto" : ""} mx-5 mb-5 mt-12 xl:my-20`}
42
- >
43
- {title && (
44
- <Text
45
- as={enableHeading ? "h1" : "h2"}
46
- className="heading2 md:heading1 text-center"
47
- >
48
- {title}
49
- </Text>
50
- )}
51
- {subTitle && (
52
- <Text
53
- as={enableHeading ? "h2" : "h3"}
54
- className="subheading1 mt-4 text-center"
55
- >
56
- {subTitle}
57
- </Text>
58
- )}
59
-
60
- <div className="mt-2 flex flex-col items-center xl:mt-8 xl:flex-row xl:gap-10">
61
- <div className="flex w-full flex-col items-start gap-10 self-stretch xl:flex-[1_0_0]">
62
- {description && (
63
- <Text as="p" className={`body1 w-full ${!image ? "text-center" : ""}`}>
64
- {description}
65
- </Text>
66
- )}
67
- {list.length > 0 && (
68
- <>
69
- <ul className="grid w-full grid-cols-2 gap-x-6 gap-y-5 md:hidden">
70
- {(() => {
71
- const sortedList = [...list].sort((a, b) =>
72
- a.name.localeCompare(b.name)
73
- );
74
- const numColumns = 2;
75
- const numRows = Math.ceil(sortedList.length / numColumns);
76
- const rearranged: (typeof sortedList[0] | null)[] = [];
77
- for (let row = 0; row < numRows; row++) {
78
- for (let col = 0; col < numColumns; col++) {
79
- const index = col * numRows + row;
80
- rearranged.push(index < sortedList.length ? sortedList[index] : null);
81
- }
82
- }
83
- return rearranged.map((item, index: number) =>
84
- item ? (
85
- <li key={`item-list-2-${index}`}>
86
- <Link href={getLocationHref(item.code)} className="label1">
87
- {item.name}
88
- </Link>
89
- </li>
90
- ) : (
91
- <li key={`item-list-2-${index}`} aria-hidden="true" />
92
- )
93
- );
94
- })()}
95
- </ul>
96
- <ul className="hidden w-full gap-x-6 gap-y-5 md:grid md:grid-cols-3 xl:hidden">
97
- {(() => {
98
- const sortedList = [...list].sort((a, b) =>
99
- a.name.localeCompare(b.name)
100
- );
101
- const numColumns = 3;
102
- const numRows = Math.ceil(sortedList.length / numColumns);
103
- const rearranged: (typeof sortedList[0] | null)[] = [];
104
- for (let row = 0; row < numRows; row++) {
105
- for (let col = 0; col < numColumns; col++) {
106
- const index = col * numRows + row;
107
- rearranged.push(index < sortedList.length ? sortedList[index] : null);
108
- }
109
- }
110
- return rearranged.map((item, index: number) =>
111
- item ? (
112
- <li key={`item-list-md-${index}`}>
113
- <Link href={getLocationHref(item.code)} className="label1">
114
- {item.name}
115
- </Link>
116
- </li>
117
- ) : (
118
- <li key={`item-list-md-${index}`} aria-hidden="true" />
119
- )
120
- );
121
- })()}
122
- </ul>
123
- <ul className={`hidden w-full gap-x-6 gap-y-5 xl:grid xl:grid-cols-${columns}`}>
124
- {(() => {
125
- const sortedList = [...list].sort((a, b) =>
126
- a.name.localeCompare(b.name)
127
- );
128
- const numColumns = columns;
129
- const numRows = Math.ceil(sortedList.length / numColumns);
130
- const rearranged: (typeof sortedList[0] | null)[] = [];
131
- for (let row = 0; row < numRows; row++) {
132
- for (let col = 0; col < numColumns; col++) {
133
- const index = col * numRows + row;
134
- rearranged.push(index < sortedList.length ? sortedList[index] : null);
135
- }
136
- }
137
- return rearranged.map((item, index: number) =>
138
- item ? (
139
- <li key={`item-list-xl-${index}`}>
140
- <Link href={getLocationHref(item.code)} className="label1">
141
- {item.name}
142
- </Link>
143
- </li>
144
- ) : (
145
- <li key={`item-list-xl-${index}`} aria-hidden="true" />
146
- )
147
- );
148
- })()}
149
- </ul>
150
- </>
151
- )}
152
- </div>
153
- {image && (
154
- <aside className="hidden md:block xl:flex-shrink-0">
155
- <NextImage width={472} height={100} src={image} alt="image" />
156
- </aside>
157
- )}
158
- </div>
159
- </div>
160
- </div>
161
- );
162
- };
163
-
164
- export default FindKinetic;
1
+ import React from "react";
2
+ import { FindKineticProps, ThemeKey } from "./types";
3
+
4
+ import { Link } from "@shared/components/link";
5
+ import { Text } from "@shared/components/text";
6
+ import { NextImage } from "@shared/next";
7
+
8
+ export const FindKinetic: React.FC<FindKineticProps> = ({
9
+ background = "white",
10
+ description,
11
+ enableHeading,
12
+ image,
13
+ list = [],
14
+ localPathPrefix = "/local",
15
+ subTitle,
16
+ title,
17
+ color = "dark",
18
+ maxWidth = true,
19
+ }) => {
20
+ const bgColorClasses: Record<ThemeKey, string> = {
21
+ blue: "bg-[#07B2E2]",
22
+ green: "bg-[#26B170]",
23
+ yellow: "bg-[#F5FF1E]",
24
+ purple: "bg-[#931D69]",
25
+ white: "bg-white",
26
+ navy: "bg-[#00002D]",
27
+ };
28
+ const normalizedLocalPathPrefix = localPathPrefix
29
+ ? `/${localPathPrefix.replace(/^\/+|\/+$/g, "")}`
30
+ : "";
31
+
32
+ const getLocationHref = (code: string) =>
33
+ `${normalizedLocalPathPrefix}/${code.toLowerCase()}`;
34
+
35
+ return (
36
+ <div
37
+ className={`${bgColorClasses[background]} component-container overflow-hidden ${color == "dark" ? "text-text" : "text-white"}`}
38
+ >
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`}
41
+ >
42
+ {title && (
43
+ <Text
44
+ as={enableHeading ? "h1" : "h2"}
45
+ className="heading2 md:heading1 md:text-center"
46
+ >
47
+ {title}
48
+ </Text>
49
+ )}
50
+ {subTitle && (
51
+ <Text
52
+ as={enableHeading ? "h2" : "h3"}
53
+ className="subheading1 mt-4 md:text-center"
54
+ >
55
+ {subTitle}
56
+ </Text>
57
+ )}
58
+
59
+ <div
60
+ className={`mt-8 flex flex-col items-center xl:flex-row ${image ? "xl:mt-16" : "xl:mt-10"} gap-10`}
61
+ >
62
+ <div
63
+ className={`flex flex-col ${image ? "items:center xl:items-start" : "items-center"} gap-10 self-stretch xl:flex-[1_0_0]`}
64
+ >
65
+ {description && (
66
+ <Text as="p" className="body1">
67
+ {description}
68
+ </Text>
69
+ )}
70
+ {list.length > 0 && (
71
+ <>
72
+ <ul className="grid w-full grid-cols-2 gap-x-6 gap-y-5 md:hidden">
73
+ {(() => {
74
+ const sortedList = [...list].sort((a, b) =>
75
+ a.name.localeCompare(b.name)
76
+ );
77
+ const numColumns = 2;
78
+ const numRows = Math.ceil(sortedList.length / numColumns);
79
+ const rearranged = [];
80
+ for (let row = 0; row < numRows; row++) {
81
+ for (let col = 0; col < numColumns; col++) {
82
+ const index = col * numRows + row;
83
+ if (index < sortedList.length) {
84
+ rearranged.push(sortedList[index]);
85
+ }
86
+ }
87
+ }
88
+ return rearranged.map((item, index: number) => (
89
+ <li key={`item-list-2-${index}`}>
90
+ <Link
91
+ href={getLocationHref(item.code)}
92
+ className="label1"
93
+ >
94
+ {item.name}
95
+ </Link>
96
+ </li>
97
+ ));
98
+ })()}
99
+ </ul>
100
+ <ul
101
+ className={`hidden ${image ? "gap-x-6" : "gap-x-20"} gap-y-5 md:grid ${image ? "md:grid-cols-3" : "md:grid-cols-4"}`}
102
+ >
103
+ {(() => {
104
+ const sortedList = [...list].sort((a, b) =>
105
+ a.name.localeCompare(b.name)
106
+ );
107
+ const numColumns = 3;
108
+ const numRows = Math.ceil(sortedList.length / numColumns);
109
+ const rearranged = [];
110
+ for (let row = 0; row < numRows; row++) {
111
+ for (let col = 0; col < numColumns; col++) {
112
+ const index = col * numRows + row;
113
+ if (index < sortedList.length) {
114
+ rearranged.push(sortedList[index]);
115
+ }
116
+ }
117
+ }
118
+ return rearranged.map((item, index: number) => (
119
+ <li
120
+ key={`item-list-3-${index}`}
121
+ className={`${image ? "" : "w-[172px]"}`}
122
+ >
123
+ <Link
124
+ href={getLocationHref(item.code)}
125
+ className="label1"
126
+ >
127
+ {item.name}
128
+ </Link>
129
+ </li>
130
+ ));
131
+ })()}
132
+ </ul>
133
+ </>
134
+ )}
135
+ </div>
136
+ {image && (
137
+ <aside className="hidden md:block">
138
+ <NextImage width={472} height={100} src={image} alt="image" />
139
+ </aside>
140
+ )}
141
+ </div>
142
+ </div>
143
+ </div>
144
+ );
145
+ };
146
+
147
+ export default FindKinetic;