@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/contentful/blocks/image-promo-bar/youtube-embed.test.tsx

@@ -1,104 +1,104 @@
-import React from "react";
-import { YoutubeEmbed } from "./youtube-embed";
-
-import { render, screen } from "@testing-library/react";
-
-jest.mock("@shared/utils", () => ({
-  cx: (...args: any[]) => args.filter(Boolean).join(" "),
-}));
-
-describe("YoutubeEmbed", () => {
-  it("renders iframe with extracted video id from watch URL", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    const iframe = screen.getByTitle("Embedded youtube");
-    expect(iframe.getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/dQw4w9WgXcQ"
-    );
-  });
-
-  it("extracts id from youtu.be short URL", () => {
-    render(<YoutubeEmbed link="https://youtu.be/dQw4w9WgXcQ" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
-      "/embed/dQw4w9WgXcQ"
-    );
-  });
-
-  it("extracts id from embed URL", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/embed/dQw4w9WgXcQ" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
-      "/embed/dQw4w9WgXcQ"
-    );
-  });
-
-  it("returns empty embedId for invalid URL", () => {
-    render(<YoutubeEmbed link="https://example.com/notavideo" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
-  });
-
-  it("returns empty embedId when link is empty", () => {
-    render(<YoutubeEmbed link="" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
-  });
-
-  it("returns empty embedId when link is undefined", () => {
-    render(<YoutubeEmbed link={undefined} />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
-  });
-
-  it("appends autoplay param when autoplay is true", () => {
-    render(
-      <YoutubeEmbed
-        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-        autoplay={true}
-      />
-    );
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
-    );
-  });
-
-  it("does not append autoplay param when autoplay is false", () => {
-    render(
-      <YoutubeEmbed
-        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-        autoplay={false}
-      />
-    );
-    expect(
-      screen.getByTitle("Embedded youtube").getAttribute("src")
-    ).not.toContain("autoplay");
-  });
-
-  it("applies containerClassName", () => {
-    const { container } = render(
-      <YoutubeEmbed
-        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-        containerClassName="extra"
-      />
-    );
-    expect(container.firstElementChild?.className).toContain("extra");
-  });
-
-  it("has correct iframe attributes", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
-    const iframe = screen.getByTitle("Embedded youtube");
-    expect(iframe).toHaveAttribute(
-      "allow",
-      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-    );
-    expect(iframe).toHaveAttribute("allowFullScreen");
-  });
-
-  it("returns empty embedId when match length is not 11", () => {
-    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=short" />);
-    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
-      "https://www.youtube.com/embed/"
-    );
-  });
-});
+import React from "react";
+import { YoutubeEmbed } from "./youtube-embed";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("YoutubeEmbed", () => {
+  it("renders iframe with extracted video id from watch URL", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    const iframe = screen.getByTitle("Embedded youtube");
+    expect(iframe.getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/dQw4w9WgXcQ"
+    );
+  });
+
+  it("extracts id from youtu.be short URL", () => {
+    render(<YoutubeEmbed link="https://youtu.be/dQw4w9WgXcQ" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
+      "/embed/dQw4w9WgXcQ"
+    );
+  });
+
+  it("extracts id from embed URL", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/embed/dQw4w9WgXcQ" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
+      "/embed/dQw4w9WgXcQ"
+    );
+  });
+
+  it("returns empty embedId for invalid URL", () => {
+    render(<YoutubeEmbed link="https://example.com/notavideo" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+
+  it("returns empty embedId when link is empty", () => {
+    render(<YoutubeEmbed link="" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+
+  it("returns empty embedId when link is undefined", () => {
+    render(<YoutubeEmbed link={undefined} />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+
+  it("appends autoplay param when autoplay is true", () => {
+    render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        autoplay={true}
+      />
+    );
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
+    );
+  });
+
+  it("does not append autoplay param when autoplay is false", () => {
+    render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        autoplay={false}
+      />
+    );
+    expect(
+      screen.getByTitle("Embedded youtube").getAttribute("src")
+    ).not.toContain("autoplay");
+  });
+
+  it("applies containerClassName", () => {
+    const { container } = render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        containerClassName="extra"
+      />
+    );
+    expect(container.firstElementChild?.className).toContain("extra");
+  });
+
+  it("has correct iframe attributes", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    const iframe = screen.getByTitle("Embedded youtube");
+    expect(iframe).toHaveAttribute(
+      "allow",
+      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    );
+    expect(iframe).toHaveAttribute("allowFullScreen");
+  });
+
+  it("returns empty embedId when match length is not 11", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=short" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+});

package/src/contentful/blocks/image-promo-bar/youtube-embed.tsx

@@ -1,46 +1,46 @@
-import React, { useMemo } from "react";
-import { VideoEmbedProps } from "./types";
-
-import { cx } from "@shared/utils";
-
-// import styles from "./styles.module.scss";
-
-export type Props = {
-  containerClassName?: string;
-  autoplay?: boolean; // Add the autoplay prop
-} & VideoEmbedProps;
-
-export const YoutubeEmbed: React.FC<Props> = props => {
-  const { link, containerClassName, autoplay = false } = props;
-
-  const embedId = useMemo(() => {
-    if (!link) return "";
-
-    const href = link.toString();
-    const regExp =
-      /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    const match = href.match(regExp);
-
-    return match && match[7].length === 11 ? match[7] : "";
-  }, [link]);
-
-  // Add autoplay parameter to the URL if autoplay is true
-  const autoplayParam = autoplay ? "?autoplay=1" : "";
-
-  return (
-    <div
-      className={cx(
-        "relative h-0 w-full overflow-hidden pb-[56.25%]",
-        containerClassName
-      )}
-    >
-      <iframe
-        className="absolute left-0 top-0 h-full w-full"
-        src={`https://www.youtube.com/embed/${embedId}${autoplayParam}`}
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        allowFullScreen={true}
-        title="Embedded youtube"
-      />
-    </div>
-  );
-};
+import React, { useMemo } from "react";
+import { VideoEmbedProps } from "./types";
+
+import { cx } from "@shared/utils";
+
+// import styles from "./styles.module.scss";
+
+export type Props = {
+  containerClassName?: string;
+  autoplay?: boolean; // Add the autoplay prop
+} & VideoEmbedProps;
+
+export const YoutubeEmbed: React.FC<Props> = props => {
+  const { link, containerClassName, autoplay = false } = props;
+
+  const embedId = useMemo(() => {
+    if (!link) return "";
+
+    const href = link.toString();
+    const regExp =
+      /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+    const match = href.match(regExp);
+
+    return match && match[7].length === 11 ? match[7] : "";
+  }, [link]);
+
+  // Add autoplay parameter to the URL if autoplay is true
+  const autoplayParam = autoplay ? "?autoplay=1" : "";
+
+  return (
+    <div
+      className={cx(
+        "relative h-0 w-full overflow-hidden pb-[56.25%]",
+        containerClassName
+      )}
+    >
+      <iframe
+        className="absolute left-0 top-0 h-full w-full"
+        src={`https://www.youtube.com/embed/${embedId}${autoplayParam}`}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen={true}
+        title="Embedded youtube"
+      />
+    </div>
+  );
+};

package/src/contentful/blocks/modal/constants.ts

@@ -1,53 +1,53 @@
-export const backdropAnimationVariants = {
-  closed: {
-    opacity: 0,
-  },
-  open: {
-    opacity: 1,
-  },
-};
-
-export const contentAnimationVariants = {
-  closed: {
-    opacity: 0,
-    scale: 0.96,
-  },
-  open: {
-    opacity: 1,
-    scale: 1,
-  },
-};
-
-export const popperAnimationVariants = {
-  closed: {
-    opacity: 0,
-    y: "-100%",
-    x: "-50%",
-  },
-  open: {
-    opacity: 1,
-    y: "-50%",
-    x: "-50%",
-  },
-};
-
-export const bottomSheetAnimationVariants = {
-  closed: {
-    opacity: 0,
-    y: "100%",
-    x: "-50%",
-  },
-  open: {
-    opacity: 1,
-    y: "-50%",
-    x: "-50%",
-  },
-};
-
-export const sizeToPixel = {
-  xs: "475px",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1280px",
-};
+export const backdropAnimationVariants = {
+  closed: {
+    opacity: 0,
+  },
+  open: {
+    opacity: 1,
+  },
+};
+
+export const contentAnimationVariants = {
+  closed: {
+    opacity: 0,
+    scale: 0.96,
+  },
+  open: {
+    opacity: 1,
+    scale: 1,
+  },
+};
+
+export const popperAnimationVariants = {
+  closed: {
+    opacity: 0,
+    y: "-100%",
+    x: "-50%",
+  },
+  open: {
+    opacity: 1,
+    y: "-50%",
+    x: "-50%",
+  },
+};
+
+export const bottomSheetAnimationVariants = {
+  closed: {
+    opacity: 0,
+    y: "100%",
+    x: "-50%",
+  },
+  open: {
+    opacity: 1,
+    y: "-50%",
+    x: "-50%",
+  },
+};
+
+export const sizeToPixel = {
+  xs: "475px",
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+};