@windstream/react-shared-components 0.2.62 → 0.2.63

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.2.62",
+  "version": "0.2.63",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/components/video-link/vimeo-embed.tsx

@@ -5,18 +5,27 @@ import Player from "@vimeo/player";
 import { cx } from "@shared/utils/cx";
 
 const extractVimeoIdandHash = (href: string) => {
-  // Strip query parameters and fragments
-  const cleanHref = href.split(/[?#]/)[0].replace(/\/+$/, "");
-  const match =
-    cleanHref.match(/vimeo\.com\/(?:.*\/)?(\d{6,})/) ||
-    cleanHref.match(/player\.vimeo\.com\/video\/(\d{6,})/);
+  // Strip query parameters and fragments without a backtracking-prone regex
+  let cleanHref = href.split(/[?#]/)[0];
+  while (cleanHref.endsWith("/")) cleanHref = cleanHref.slice(0, -1);
 
-  const parts = cleanHref.split("/");
-  const hash = parts[parts.length - 1];
+  const parts = cleanHref.split("/").filter(Boolean);
+
+  // Locate the vimeo domain segment (vimeo.com or player.vimeo.com) manually
+  // instead of a backtracking regex like `(?:.*\/)?(\d{6,})`
+  const domainIndex = parts.findIndex(
+    part => part === "vimeo.com" || part === "player.vimeo.com"
+  );
+  if (domainIndex === -1) return "";
 
-  if (!match?.[1]) return "";
-  if (match[1] === hash) return match[1];
-  return `${match[1]}/${hash}`;
+  const id = parts.find(
+    (part, i) => i > domainIndex && /^\d{6,}$/.test(part)
+  );
+  if (!id) return "";
+
+  const hash = parts[parts.length - 1];
+  if (id === hash) return id;
+  return `${id}/${hash}`;
 };
 
 export const getVimeoEmbedId = (link?: string): string => {

package/src/contentful/blocks/image-promo-bar/index.tsx

@@ -164,7 +164,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               </div>
             )}
           </div>
-          <aside className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
+          <div className="flex w-full flex-1 shrink-0 items-center justify-center lg:w-auto">
             {/* Media Section: only when no Video Link is attached at all */}
             {image && !hasVideoLink && (
               <div
@@ -203,7 +203,7 @@ export const ImagePromoBar: React.FC<ImagePromoBarProps> = ({
               isAboveTheFold={isAboveTheFold}
               onVideoEvent={onVideoEvent}
             />
-          </aside>
+          </div>
         </div>
       </div>
 

package/src/hooks/contentful/use-contentful-rich-text.test.tsx

@@ -276,6 +276,18 @@ describe("renderContentfulRichText", () => {
       const a = container.querySelector("a")!;
       expect(a).toHaveClass("custom-link");
     });
+
+    it("uses a separate class for links inside list items", () => {
+      const list = makeList(false, ["List link"]);
+      list.content[0].content = [makeHyperlink("/list-link", "List link")];
+      const doc = makeDoc(makeHyperlink("/paragraph-link", "Paragraph link"), list);
+
+      const { container } = render(<>{renderContentfulRichText(doc)}</>);
+      const links = container.querySelectorAll("a");
+
+      expect(links[0]).toHaveClass("body1", "font-bold");
+      expect(links[1]).toHaveClass("body2");
+    });
   });
 
   describe("Custom options merge", () => {

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -267,10 +267,23 @@ export function renderContentfulRichText(
   className: string = "body1",
   linkClassName: string = "body1 font-bold",
   options?: Options,
-  links?: any
+  links?: any,
+  listLinkClassName: string = "body2"
 ): ReactNode | null {
   if (!doc || !Array.isArray(doc.content)) return null;
 
+  const listItemHyperlinks = new WeakSet<object>();
+  const collectListItemHyperlinks = (node: any, isInListItem = false) => {
+    const isListItem = isInListItem || node?.nodeType === BLOCKS.LIST_ITEM;
+    if (isListItem && node?.nodeType === INLINES.HYPERLINK) {
+      listItemHyperlinks.add(node);
+    }
+    node?.content?.forEach((child: any) =>
+      collectListItemHyperlinks(child, isListItem)
+    );
+  };
+  collectListItemHyperlinks(doc);
+
   const defaultOptions = getDefaultOptions(links);
   const merged: Options = {
     ...defaultOptions,
@@ -301,7 +314,9 @@ export function renderContentfulRichText(
             target={shouldOpenBlank ? "_blank" : undefined}
             rel={shouldOpenBlank ? "noopener" : undefined}
             variant="default"
-            className={linkClassName}
+            className={
+              listItemHyperlinks.has(node) ? listLinkClassName : linkClassName
+            }
           >
             {children}
           </Link>