feat: add color inputs

jest.setup.ts

@@ -1 +1,7 @@
 import "@testing-library/jest-dom";
+
+global.ResizeObserver = jest.fn(() => ({
+  observe: jest.fn(),
+  disconnect: jest.fn(),
+  unobserve: jest.fn(),
+}));

package.json

@@ -20,6 +20,7 @@
     "build:icons": "npx @svgr/cli --config-file .svgrrc src/svgs"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-slider": "^1.1.2",
     "color": "^4.2.3",
     "next": "14.0.3",

src/app/page.tsx

@@ -1,5 +1,11 @@
 import { ContrastResults } from "@/components/contrast-results";
+import { ColorInputs } from "@/components/color-inputs";
 
 export default function Home() {
-  return <ContrastResults />;
+  return (
+    <>
+      <ContrastResults />
+      <ColorInputs />
+    </>
+  );
 }

src/components/color-inputs/__tests__/panel.test.tsx

@@ -0,0 +1,19 @@
+import { describe, it } from "@jest/globals";
+import { render } from "@testing-library/react";
+
+import { Panel } from "../panel";
+
+describe("Color Panel", () => {
+  it("Correct rendering and unmount", () => {
+    const screen = render(<Panel label="Background" />);
+
+    expect(() => screen.unmount()).not.toThrow();
+  });
+
+  it("Should show label and children properties", () => {
+    const screen = render(<Panel label="Background">Content</Panel>);
+
+    expect(screen.getByText("Content")).toBeInTheDocument();
+    expect(screen.getByText("Background")).toBeInTheDocument();
+  });
+});