@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/shape-background-wrapper/index.test.tsx

@@ -0,0 +1,284 @@
+import React from "react";
+import { ShapeBackgroundWrapper } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("ShapeBackgroundWrapper", () => {
+  describe("Rendering with show=true (default)", () => {
+    it("renders children inside shape-bg-content wrapper", () => {
+      render(
+        <ShapeBackgroundWrapper background="white">
+          <p>Child content</p>
+        </ShapeBackgroundWrapper>
+      );
+      expect(screen.getByText("Child content")).toBeInTheDocument();
+      expect(
+        screen.getByText("Child content").closest(".shape-bg-content")
+      ).toBeInTheDocument();
+    });
+
+    it("renders the outer container with shape-bg class", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Test</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
+    });
+
+    it("renders content div with z-[1] for layering above SVG", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Layered</span>
+        </ShapeBackgroundWrapper>
+      );
+      const content = container.querySelector(".shape-bg-content");
+      expect(content).toHaveClass("relative", "z-[1]");
+    });
+  });
+
+  describe("Rendering with show=false", () => {
+    it("renders children without shape-bg wrapper", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} background="navy">
+          <p>Hidden shape</p>
+        </ShapeBackgroundWrapper>
+      );
+      expect(screen.getByText("Hidden shape")).toBeInTheDocument();
+      expect(container.querySelector(".shape-bg")).not.toBeInTheDocument();
+    });
+
+    it("does not render any SVG when show is false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} path="path1" background="white">
+          <span>No SVG</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector("svg")).not.toBeInTheDocument();
+    });
+
+    it("applies className when show is false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} className="custom-class">
+          <span>Styled</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.firstChild).toHaveClass("custom-class");
+    });
+
+    it("applies custom background style when show is false and background is non-theme", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper
+          show={false}
+          background="linear-gradient(red, blue)"
+        >
+          <span>Gradient</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.firstChild).toHaveStyle({
+        background: "linear-gradient(red, blue)",
+      });
+    });
+  });
+
+  describe("SVG path rendering", () => {
+    it("renders path1 SVG when path='path1'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path1" background="white">
+          <span>Path1</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "2262");
+      expect(svgs[0]).toHaveAttribute("height", "4359");
+    });
+
+    it("renders path2 SVG by default", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Default path</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3739");
+      expect(svgs[0]).toHaveAttribute("height", "3666");
+    });
+
+    it("renders path3 SVG when path='path3'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path3" background="white">
+          <span>Path3</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3044");
+      expect(svgs[0]).toHaveAttribute("height", "3248");
+    });
+
+    it("renders path4 SVG when path='path4'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path4" background="white">
+          <span>Path4</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3739");
+      expect(svgs[0]).toHaveAttribute("height", "3666");
+    });
+
+    it("does not render SVG for unrecognized path value", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path={"path5" as any} background="white">
+          <span>Unknown</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector("svg")).not.toBeInTheDocument();
+    });
+
+    it("marks SVG with aria-hidden and focusable=false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path1" background="white">
+          <span>Accessible</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg).toHaveAttribute("aria-hidden", "true");
+      expect(svg).toHaveAttribute("focusable", "false");
+    });
+
+    it("applies pointer-events-none to SVG", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path2" background="white">
+          <span>Non-interactive</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg).toHaveClass("pointer-events-none");
+    });
+  });
+
+  describe("Background themes", () => {
+    it.each([
+      ["blue", "bg-[#07B2E2]"],
+      ["green", "bg-[#26B170]"],
+      ["yellow", "bg-[#F5FF1E]"],
+      ["purple", "bg-[#931D69]"],
+      ["white", "bg-white"],
+      ["navy", "bg-[#00002D]"],
+    ] as const)("applies %s background class", (bg, expectedClass) => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background={bg}>
+          <span>BG Test</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain(expectedClass);
+    });
+
+    it("applies inline style for custom (non-theme) background", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="#FF5733">
+          <span>Custom BG</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg") as HTMLElement;
+      expect(outer.style.background).toBe("rgb(255, 87, 51)");
+    });
+
+    it("falls back to bg-white when no background provided", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper>
+          <span>No BG</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain("bg-white");
+    });
+  });
+
+  describe("Fill color (SVG)", () => {
+    it.each([
+      ["blue", "text-[#07B2E2]"],
+      ["green", "text-[#26B170]"],
+      ["yellow", "text-[#F5FF1E]"],
+      ["purple", "text-[#931D69]"],
+      ["white", "text-white"],
+      ["navy", "text-[#00002D]"],
+    ] as const)("applies %s fill color to SVG", (fill, expectedClass) => {
+      const { container } = render(
+        <ShapeBackgroundWrapper fill={fill} background="white">
+          <span>Fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain(expectedClass);
+    });
+
+    it("defaults to yellow fill when fill not specified", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Default fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
+    });
+
+    it("falls back to yellow for unrecognized fill value", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper fill="magenta" background="white">
+          <span>Unknown fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
+    });
+  });
+
+  describe("className prop", () => {
+    it("applies custom className to shape-bg wrapper", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper className="extra-class" background="white">
+          <span>Classy</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer).toHaveClass("extra-class");
+    });
+
+    it("handles undefined className without errors", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>No class</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
+    });
+  });
+
+  describe("maxFit prop", () => {
+    it("applies max-content class when maxFit is true", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper maxFit={true} background="white">
+          <span>Max fit</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain("max-content");
+    });
+
+    it("does not apply max-content when maxFit is false/undefined", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>No max fit</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).not.toContain("max-content");
+    });
+  });
+});

package/src/contentful/blocks/shape-background-wrapper/index.tsx

@@ -1,124 +1,124 @@
-// ShapeBackgroundWrapper.tsx
-import React from "react";
-import { ShapeBackgroundWrapperProps, ThemeKey } from "./types";
-
-export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
-  children,
-  background,
-  className,
-  fill = "yellow",
-  maxFit,
-  show = true,
-  path = "path2",
-}) => {
-  const variantClass = `${path}`;
-
-  const textColorClasses: Record<ThemeKey, string> = {
-    blue: "text-[#07B2E2]",
-    green: "text-[#26B170]",
-    yellow: "text-[#F5FF1E]",
-    purple: "text-[#931D69]",
-    white: "text-white",
-    navy: "text-[#00002D]",
-  };
-
-  const bgColorClasses: Record<ThemeKey, string> = {
-    blue: "bg-[#07B2E2]",
-    green: "bg-[#26B170]",
-    yellow: "bg-[#F5FF1E]",
-    purple: "bg-[#931D69]",
-    white: "bg-white",
-    navy: "bg-[#00002D]",
-  };
-
-  const isThemeKey =
-    typeof background === "string" && background in bgColorClasses;
-
-  const bgClass = isThemeKey
-    ? bgColorClasses[background as ThemeKey]
-    : undefined;
-  const bgStyle = background && !isThemeKey ? { background } : undefined;
-
-  const fillClass =
-    fill in textColorClasses
-      ? textColorClasses[fill as ThemeKey]
-      : "text-[#F5FF1E]";
-
-  if (!show) {
-    return (
-      <div className={className} style={bgStyle}>
-        {children}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${
-        bgClass ?? (!bgStyle ? "bg-white" : "")
-      }`}
-      style={bgStyle}
-    >
-      {path === "path1" && (
-        <svg
-          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2371px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
-          width="2262"
-          height="4359"
-          viewBox="0 0 2262 4359"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path d="M1838.72 444.021C2216.45 758.242 2351.22 1060.81 2202.83 1982.25C2062.95 2851.55 1923.57 4265.14 1394.48 4348.94C1079.75 4409.66 766.955 4172.68 508.523 4003.04C340.876 3884.89 192.855 3774.9 26.6866 3661.93C-27.6562 3624.7 8.69435 3542.15 74.1261 3555.69C415.628 3626.61 686.916 3615.36 942.942 3443.48C1410.95 3163.54 1632.32 2141.02 1629.56 1543.75C1637.51 910.76 1276.06 582.318 829.643 352.709C587.562 235.528 333.508 169.963 100.699 149.757C31.9431 143.965 25.0259 47.9703 92.459 33.1281C623.196 -84.6769 1404.59 131.886 1839.84 443.573" />
-        </svg>
-      )}
-      {path === "path2" && (
-        <svg
-          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[45.8px] z-0 translate-x-[-101%] ${variantClass} fill-current ${fillClass}`}
-          width="3739"
-          height="3666"
-          viewBox="0 0 3739 3666"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.09 4009.1 647.09 3634.26 264.38C3417.79 27.9944 3025.37 31.7818 2716.76 13.9013C2511.72 8.81634 2327.31 8.87399 2126.55 0.511773C2060.73 -2.00127 2040.7 85.9475 2101.3 114.087C2417.76 260.743 2628.86 431.51 2731.94 722.142C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.97 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
-        </svg>
-      )}
-      {path === "path3" && (
-        <svg
-          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2600px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
-          width="3044"
-          height="3248"
-          viewBox="0 0 3044 3248"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path d="M1.21857 1353.6C-0.931975 1765.46 120.504 2015.15 791.765 2417.01C1424.98 2796.19 2407.16 3469.31 2746.34 3175.04C2955.08 3005.86 2971.76 2677.32 3002.33 2420C3016.95 2248.7 3026.23 2094.39 3043.38 1926.83C3048.81 1871.88 2976.24 1850.67 2949.63 1899.96C2810.91 2157.33 2657.35 2325.33 2408.95 2396.88C1976.88 2546.15 1201.39 2136.59 819.655 1812.63C409.231 1476.27 393.475 1067.19 486.97 656.895C542.372 438.358 637.352 239.983 749.974 79.7081C783.347 32.4684 725.487 -23.7534 679.587 11.5067C317.699 288.49 35.1358 906.671 0.328344 1354.07" />
-        </svg>
-      )}
-      {path === "path4" && (
-        <svg
-          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-1966.1px] z-0 translate-x-[-48%] ${variantClass} fill-current ${fillClass}`}
-          width="3739"
-          height="3666"
-          viewBox="0 0 3739 3666"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          focusable="false"
-        >
-          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.1 4009.1 647.091 3634.26 264.381C3417.79 27.9951 3025.37 31.7826 2716.76 13.902C2511.72 8.81709 2327.31 8.87474 2126.55 0.512528C2060.73 -2.00052 2040.7 85.9483 2101.3 114.088C2417.76 260.743 2628.86 431.51 2731.94 722.143C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.98 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
-        </svg>
-      )}
-
-      <div className="shape-bg-content relative z-[1]">{children}</div>
-    </div>
-  );
-};
-
-export default ShapeBackgroundWrapper;
+// ShapeBackgroundWrapper.tsx
+import React from "react";
+import { ShapeBackgroundWrapperProps, ThemeKey } from "./types";
+
+export const ShapeBackgroundWrapper: React.FC<ShapeBackgroundWrapperProps> = ({
+  children,
+  background,
+  className,
+  fill = "yellow",
+  maxFit,
+  show = true,
+  path = "path2",
+}) => {
+  const variantClass = `${path}`;
+
+  const textColorClasses: Record<ThemeKey, string> = {
+    blue: "text-[#07B2E2]",
+    green: "text-[#26B170]",
+    yellow: "text-[#F5FF1E]",
+    purple: "text-[#931D69]",
+    white: "text-white",
+    navy: "text-[#00002D]",
+  };
+
+  const bgColorClasses: Record<ThemeKey, string> = {
+    blue: "bg-[#07B2E2]",
+    green: "bg-[#26B170]",
+    yellow: "bg-[#F5FF1E]",
+    purple: "bg-[#931D69]",
+    white: "bg-white",
+    navy: "bg-[#00002D]",
+  };
+
+  const isThemeKey =
+    typeof background === "string" && background in bgColorClasses;
+
+  const bgClass = isThemeKey
+    ? bgColorClasses[background as ThemeKey]
+    : undefined;
+  const bgStyle = background && !isThemeKey ? { background } : undefined;
+
+  const fillClass =
+    fill in textColorClasses
+      ? textColorClasses[fill as ThemeKey]
+      : "text-[#F5FF1E]";
+
+  if (!show) {
+    return (
+      <div className={className} style={bgStyle}>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`shape-bg relative overflow-hidden ${className ?? ""} ${maxFit ? "max-content" : ""} ${
+        bgClass ?? (!bgStyle ? "bg-white" : "")
+      }`}
+      style={bgStyle}
+    >
+      {path === "path1" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2371px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
+          width="2262"
+          height="4359"
+          viewBox="0 0 2262 4359"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1838.72 444.021C2216.45 758.242 2351.22 1060.81 2202.83 1982.25C2062.95 2851.55 1923.57 4265.14 1394.48 4348.94C1079.75 4409.66 766.955 4172.68 508.523 4003.04C340.876 3884.89 192.855 3774.9 26.6866 3661.93C-27.6562 3624.7 8.69435 3542.15 74.1261 3555.69C415.628 3626.61 686.916 3615.36 942.942 3443.48C1410.95 3163.54 1632.32 2141.02 1629.56 1543.75C1637.51 910.76 1276.06 582.318 829.643 352.709C587.562 235.528 333.508 169.963 100.699 149.757C31.9431 143.965 25.0259 47.9703 92.459 33.1281C623.196 -84.6769 1404.59 131.886 1839.84 443.573" />
+        </svg>
+      )}
+      {path === "path2" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[45.8px] z-0 translate-x-[-101%] ${variantClass} fill-current ${fillClass}`}
+          width="3739"
+          height="3666"
+          viewBox="0 0 3739 3666"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.09 4009.1 647.09 3634.26 264.38C3417.79 27.9944 3025.37 31.7818 2716.76 13.9013C2511.72 8.81634 2327.31 8.87399 2126.55 0.511773C2060.73 -2.00127 2040.7 85.9475 2101.3 114.087C2417.76 260.743 2628.86 431.51 2731.94 722.142C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.97 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
+        </svg>
+      )}
+      {path === "path3" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-2600px] z-0 translate-x-[-55%] ${variantClass} fill-current ${fillClass}`}
+          width="3044"
+          height="3248"
+          viewBox="0 0 3044 3248"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1.21857 1353.6C-0.931975 1765.46 120.504 2015.15 791.765 2417.01C1424.98 2796.19 2407.16 3469.31 2746.34 3175.04C2955.08 3005.86 2971.76 2677.32 3002.33 2420C3016.95 2248.7 3026.23 2094.39 3043.38 1926.83C3048.81 1871.88 2976.24 1850.67 2949.63 1899.96C2810.91 2157.33 2657.35 2325.33 2408.95 2396.88C1976.88 2546.15 1201.39 2136.59 819.655 1812.63C409.231 1476.27 393.475 1067.19 486.97 656.895C542.372 438.358 637.352 239.983 749.974 79.7081C783.347 32.4684 725.487 -23.7534 679.587 11.5067C317.699 288.49 35.1358 906.671 0.328344 1354.07" />
+        </svg>
+      )}
+      {path === "path4" && (
+        <svg
+          className={`shape-bg-svg pointer-events-none absolute left-1/2 top-[-1966.1px] z-0 translate-x-[-48%] ${variantClass} fill-current ${fillClass}`}
+          width="3739"
+          height="3666"
+          viewBox="0 0 3739 3666"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <path d="M1662.93 3664.31C2153.52 3637.23 2442.1 3474.65 2872.31 2646.41C3278.25 1865.1 4009.1 647.091 3634.26 264.381C3417.79 27.9951 3025.37 31.7826 2716.76 13.902C2511.72 8.81709 2327.31 8.87474 2126.55 0.512528C2060.73 -2.00052 2040.7 85.9483 2101.3 114.088C2417.76 260.743 2628.86 431.51 2731.94 722.143C2940.79 1225.9 2508.91 2178.82 2150.63 2656.7C1779.64 3169.63 1293.64 3217.84 798.345 3136.04C534.128 3085.8 291.072 2986.98 92.1133 2864.4C33.4593 2828.06 -29.3236 2901.01 15.967 2953.13C371.841 3364.12 1128.29 3656.09 1663.56 3665.34" />
+        </svg>
+      )}
+
+      <div className="shape-bg-content relative z-[1]">{children}</div>
+    </div>
+  );
+};
+
+export default ShapeBackgroundWrapper;

package/src/contentful/blocks/shape-background-wrapper/types.ts

@@ -1,36 +1,36 @@
-import React from "react";
-
-export const svgPaths: Record<string, string> = {
-  path1:
-    "M6183.96 7035.43C6943.82 6952.66 7380.2 6676.58 7990.48 5362.95C8565.72 4123.69 9615.39 2181.9 9006.03 1622.93C8652.98 1276.95 8045.02 1315.49 7564.14 1313.75C7245.36 1323.32 6958.63 1339.47 6647.54 1342.72C6545.53 1343.83 6520.42 1482.38 6615.44 1520.24C7116.37 1719.55 7456.61 1965.53 7637.69 2405.03C7996.29 3164.74 7392.93 4672.05 6870.51 5439.14C6330.05 6261.86 5579.71 6377.14 4804.66 6292.58C4390.94 6237.27 4007.68 6104.9 3689.42 5932.73C3595.96 5881.89 3503.99 5999.87 3577.76 6076.26C4158.63 6680.16 5353 7066.59 6184.5 7035.07",
-  path2:
-    "M7084.87 3152.11C6998.44 2399.11 6718.09 1965.81 5389.62 1356.34C4136.36 781.869 2172.07 -265.216 1610.51 336.377C1262.56 684.784 1303.76 1287.15 1303.81 1763.48C1314.67 2079.29 1332.06 2363.37 1336.52 2671.54C1338.02 2772.59 1477.99 2797.98 1515.86 2704.01C1715.18 2208.55 1962.22 1872.45 2405.24 1694.74C3170.84 1342.39 4694.82 1945.74 5471.2 2466.11C6303.81 3004.57 6423.02 3748.26 6340.57 4515.68C6286.3 4925.29 6154.1 5304.42 5981.5 5619.04C5930.51 5711.42 6049.97 5802.96 6126.81 5730.18C6734.29 5157.06 7119.9 3975.43 7084.95 3151.67",
-  path3:
-    "M3161.08 2245.08C2401.23 2327.85 1964.85 2603.93 1354.57 3917.56C779.331 5156.82 -270.345 7098.61 339.023 7657.58C692.066 8003.56 1300.03 7965.02 1780.91 7966.76C2099.69 7957.19 2386.42 7941.04 2697.51 7937.79C2799.52 7936.68 2824.63 7798.13 2729.61 7760.27C2228.68 7560.96 1888.43 7314.98 1707.36 6875.48C1348.76 6115.77 1952.12 4608.46 2474.54 3841.37C3015 3018.65 3765.34 2903.37 4540.39 2987.93C4954.11 3043.24 5337.36 3175.61 5655.63 3347.77C5749.09 3398.62 5841.06 3280.64 5767.29 3204.25C5186.41 2600.35 3992.04 2213.93 3160.55 2245.44",
-  path4:
-    "M2260.18 6128.4C2346.6 6881.39 2626.96 7314.69 3955.43 7924.16C5208.69 8498.64 7172.98 9545.72 7734.98 8944.21C8082.94 8595.81 8041.74 7993.44 8041.68 7517.11C8030.82 7201.3 8013.43 6917.22 8008.98 6609.05C8007.48 6508 7867.51 6482.61 7829.64 6576.58C7630.32 7072.04 7383.27 7408.14 6940.26 7585.85C6174.65 7938.2 4650.68 7334.85 3874.29 6814.48C3041.68 6276.02 2922.48 5532.33 3004.93 4764.91C3059.2 4355.3 3191.4 3976.17 3364 3661.56C3414.98 3569.17 3295.53 3477.63 3218.68 3550.41C2611.21 4123.53 2225.6 5305.17 2260.54 6128.92",
-
-  path5:
-    "M1282.49 -1892.66C1660.21 -1578.44 1794.98 -1275.87 1646.6 -354.424C1506.72 514.868 1367.34 1928.46 838.242 2012.26C523.517 2072.99 210.72 1836 -47.7117 1666.37C-215.358 1548.21 -363.379 1438.22 -529.548 1325.25C-583.891 1288.03 -547.54 1205.47 -482.108 1219.01C-140.607 1289.93 130.682 1278.68 386.707 1106.8C854.714 826.863 1076.08 -195.662 1073.33 -792.933C1081.27 -1425.92 719.826 -1754.36 273.408 -1983.97C31.3272 -2101.15 -222.727 -2166.72 -455.536 -2186.92C-524.291 -2192.71 -531.208 -2288.71 -463.775 -2303.55C66.962 -2421.36 848.353 -2204.79 1283.6 -1893.11",
-};
-
-export type ThemeKey =
-  | "blue"
-  | "green"
-  | "yellow"
-  | "purple"
-  | "white"
-  | "navy";
-
-// Infers the union of keys from the svgPaths constant
-export type SvgPathKey = keyof typeof svgPaths;
-
-export type ShapeBackgroundWrapperProps = {
-  path?: SvgPathKey;
-  fill?: ThemeKey | string;
-  className?: string;
-  children?: React.ReactNode;
-  maxFit?: boolean;
-  background?: ThemeKey | string;
-  show?: boolean;
-};
+import React from "react";
+
+export const svgPaths: Record<string, string> = {
+  path1:
+    "M6183.96 7035.43C6943.82 6952.66 7380.2 6676.58 7990.48 5362.95C8565.72 4123.69 9615.39 2181.9 9006.03 1622.93C8652.98 1276.95 8045.02 1315.49 7564.14 1313.75C7245.36 1323.32 6958.63 1339.47 6647.54 1342.72C6545.53 1343.83 6520.42 1482.38 6615.44 1520.24C7116.37 1719.55 7456.61 1965.53 7637.69 2405.03C7996.29 3164.74 7392.93 4672.05 6870.51 5439.14C6330.05 6261.86 5579.71 6377.14 4804.66 6292.58C4390.94 6237.27 4007.68 6104.9 3689.42 5932.73C3595.96 5881.89 3503.99 5999.87 3577.76 6076.26C4158.63 6680.16 5353 7066.59 6184.5 7035.07",
+  path2:
+    "M7084.87 3152.11C6998.44 2399.11 6718.09 1965.81 5389.62 1356.34C4136.36 781.869 2172.07 -265.216 1610.51 336.377C1262.56 684.784 1303.76 1287.15 1303.81 1763.48C1314.67 2079.29 1332.06 2363.37 1336.52 2671.54C1338.02 2772.59 1477.99 2797.98 1515.86 2704.01C1715.18 2208.55 1962.22 1872.45 2405.24 1694.74C3170.84 1342.39 4694.82 1945.74 5471.2 2466.11C6303.81 3004.57 6423.02 3748.26 6340.57 4515.68C6286.3 4925.29 6154.1 5304.42 5981.5 5619.04C5930.51 5711.42 6049.97 5802.96 6126.81 5730.18C6734.29 5157.06 7119.9 3975.43 7084.95 3151.67",
+  path3:
+    "M3161.08 2245.08C2401.23 2327.85 1964.85 2603.93 1354.57 3917.56C779.331 5156.82 -270.345 7098.61 339.023 7657.58C692.066 8003.56 1300.03 7965.02 1780.91 7966.76C2099.69 7957.19 2386.42 7941.04 2697.51 7937.79C2799.52 7936.68 2824.63 7798.13 2729.61 7760.27C2228.68 7560.96 1888.43 7314.98 1707.36 6875.48C1348.76 6115.77 1952.12 4608.46 2474.54 3841.37C3015 3018.65 3765.34 2903.37 4540.39 2987.93C4954.11 3043.24 5337.36 3175.61 5655.63 3347.77C5749.09 3398.62 5841.06 3280.64 5767.29 3204.25C5186.41 2600.35 3992.04 2213.93 3160.55 2245.44",
+  path4:
+    "M2260.18 6128.4C2346.6 6881.39 2626.96 7314.69 3955.43 7924.16C5208.69 8498.64 7172.98 9545.72 7734.98 8944.21C8082.94 8595.81 8041.74 7993.44 8041.68 7517.11C8030.82 7201.3 8013.43 6917.22 8008.98 6609.05C8007.48 6508 7867.51 6482.61 7829.64 6576.58C7630.32 7072.04 7383.27 7408.14 6940.26 7585.85C6174.65 7938.2 4650.68 7334.85 3874.29 6814.48C3041.68 6276.02 2922.48 5532.33 3004.93 4764.91C3059.2 4355.3 3191.4 3976.17 3364 3661.56C3414.98 3569.17 3295.53 3477.63 3218.68 3550.41C2611.21 4123.53 2225.6 5305.17 2260.54 6128.92",
+
+  path5:
+    "M1282.49 -1892.66C1660.21 -1578.44 1794.98 -1275.87 1646.6 -354.424C1506.72 514.868 1367.34 1928.46 838.242 2012.26C523.517 2072.99 210.72 1836 -47.7117 1666.37C-215.358 1548.21 -363.379 1438.22 -529.548 1325.25C-583.891 1288.03 -547.54 1205.47 -482.108 1219.01C-140.607 1289.93 130.682 1278.68 386.707 1106.8C854.714 826.863 1076.08 -195.662 1073.33 -792.933C1081.27 -1425.92 719.826 -1754.36 273.408 -1983.97C31.3272 -2101.15 -222.727 -2166.72 -455.536 -2186.92C-524.291 -2192.71 -531.208 -2288.71 -463.775 -2303.55C66.962 -2421.36 848.353 -2204.79 1283.6 -1893.11",
+};
+
+export type ThemeKey =
+  | "blue"
+  | "green"
+  | "yellow"
+  | "purple"
+  | "white"
+  | "navy";
+
+// Infers the union of keys from the svgPaths constant
+export type SvgPathKey = keyof typeof svgPaths;
+
+export type ShapeBackgroundWrapperProps = {
+  path?: SvgPathKey;
+  fill?: ThemeKey | string;
+  className?: string;
+  children?: React.ReactNode;
+  maxFit?: boolean;
+  background?: ThemeKey | string;
+  show?: boolean;
+};

package/src/contentful/blocks/text/Text.stories.tsx

@@ -1,23 +1,23 @@
-import { Text } from "./index";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof Text> = {
-  title: "Contentful Blocks/Text",
-  component: Text,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-    docs: {
-      page: DocsPage,
-      description: {
-        component: "Contentful text block.",
-      },
-    },
-  },
-  args: { fields: {} },
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+import { Text } from "./index";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Text> = {
+  title: "Contentful Blocks/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      page: DocsPage,
+      description: {
+        component: "Contentful text block.",
+      },
+    },
+  },
+  args: { fields: {} },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};