@purpurds/illustrative-icon 0.0.1

package/src/illustrative-icon.stories.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import * as components from "./all-illustrative-icon-components";
+import { IllustrativeIconSearchFieldDuocolor } from "./components/search-field-duocolor";
+
+const meta = {
+  title: "Components/IllustrativeIcon",
+  component: IllustrativeIconSearchFieldDuocolor,
+  parameters: {
+    design: [
+      {
+        name: "IllustrativeIcon",
+        type: "figma",
+        url: "https://www.figma.com/design/pwHRVifi0TRqqn02OLJQrB/Illustrative-icons?node-id=0-1",
+      },
+    ],
+  },
+} satisfies Meta<typeof IllustrativeIconSearchFieldDuocolor>;
+
+export default meta;
+type Story = StoryObj<typeof IllustrativeIconSearchFieldDuocolor>;
+
+export const Showcase: Story = {
+  parameters: {},
+  args: {
+    autoplay: true,
+    allyTitle: "search field animation",
+    "data-testid": "",
+    className: "",
+  },
+  argTypes: {},
+
+  render: ({ ...args }) => (
+    <div style={{ height: "200px", width: "200px" }}>
+      <IllustrativeIconSearchFieldDuocolor {...args} />
+    </div>
+  ),
+};
+
+const RenderComponent = ({ index }: { index: number }) => {
+  const [autoplay, setAutoplay] = useState(false);
+  const [name, Component] = Object.entries(components)[index];
+
+  return (
+    <button
+      onClick={() => setAutoplay(true)}
+      type="button"
+      style={{
+        all: "unset",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 20,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexShrink: 0,
+            padding: 4,
+            background: "#fff",
+            borderRadius: 4,
+            border: "1px solid hsla(203, 50%, 30%, 0.15)",
+            boxShadow: "rgba(0, 0, 0, 0.10) 0 1px 3px 0",
+            width: "6rem",
+            height: "6rem",
+          }}
+        >
+          <Component autoplay={autoplay} onAnimationEnd={() => setAutoplay(false)} />
+        </div>
+        <p
+          style={{
+            margin: 0,
+            color: "#2E3438",
+            fontSize: 14,
+            lineHeight: 1.2,
+            fontFamily: "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif",
+          }}
+        >
+          {name.replace("IllustrativeIcon", "")}
+        </p>
+      </div>
+    </button>
+  );
+};
+
+export const AllComponents: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: `To see the animations, click on the icons. 
+        Use the icons in the following manner: \`<IllustrativeIconSearchFieldDuocolor />\` `,
+      },
+      source: {
+        code: `
+<>
+  <IllustrativeIcon404ErrorDuocolor />
+  <IllustrativeIcon404ErrorOffblack />
+  <IllustrativeIconCartCheckmarkDuocolor />
+  ...
+</>`,
+      },
+    },
+  },
+  render: () => (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+        gap: 20,
+      }}
+    >
+      {Object.entries(components).map(([name], index) => (
+        <RenderComponent key={name} index={index} />
+      ))}
+    </div>
+  ),
+};

package/src/illustrative-icon.test.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { axe } from "vitest-axe";
+import * as axeMatchers from "vitest-axe/matchers";
+
+import "vitest-canvas-mock";
+import animationData from "./assets/404-error-duocolor.json";
+import { IllustrativeIcon } from "./illustrative-icon";
+
+expect.extend(matchers);
+expect.extend(axeMatchers);
+
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  })),
+});
+
+describe("IllustrativeIcon", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("basic test", () => {
+    render(<IllustrativeIcon data-testid="illustrative-icon" json={animationData} />);
+    expect(screen.getByTestId("illustrative-icon")).toBeInTheDocument();
+  });
+
+  it("is accessible", async () => {
+    const { container } = render(<IllustrativeIcon json={animationData} />);
+    const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/illustrative-icon.tsx

@@ -0,0 +1,90 @@
+import React, { ForwardedRef, forwardRef, useEffect, useRef, useState } from "react";
+import lottie, { AnimationItem } from "lottie-web/build/player/lottie_light";
+
+export * from "./all-illustrative-icon-components";
+
+export type IllustrativeBaseIconProps = {
+  ["data-testid"]?: string;
+  allyTitle?: string;
+  autoplay?: boolean;
+  className?: string;
+  onAnimationEnd?: () => void;
+};
+
+export type IllustrativeIconProps = {
+  json: object;
+} & IllustrativeBaseIconProps;
+
+export const IllustrativeIcon = forwardRef(
+  (
+    {
+      ["data-testid"]: dataTestid,
+      allyTitle,
+      className,
+      json,
+      autoplay = true,
+      onAnimationEnd,
+      ...props
+    }: IllustrativeIconProps,
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const animationRef = useRef<AnimationItem | null>(null);
+    const [reduceMotion, setReduceMotion] = useState(false);
+
+    const classes = className;
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const handleReduceMotionChange = (event: any) => {
+      setReduceMotion(event.matches);
+    };
+
+    useEffect(() => {
+      const mediaQuery = window.matchMedia("(prefers-reduced-motion)");
+
+      setReduceMotion(mediaQuery.matches);
+
+      mediaQuery.addEventListener("change", handleReduceMotionChange);
+
+      return () => {
+        mediaQuery.removeEventListener("change", handleReduceMotionChange);
+      };
+    }, []);
+
+    useEffect(() => {
+      if (containerRef.current) {
+        animationRef.current = lottie.loadAnimation({
+          container: containerRef.current,
+          renderer: "svg",
+          loop: false,
+          autoplay: !reduceMotion && autoplay,
+          animationData: json,
+          rendererSettings: {
+            preserveAspectRatio: "xMidYMid slice",
+          },
+        });
+
+        animationRef.current.addEventListener("complete", () => {
+          onAnimationEnd?.();
+        });
+
+        if ((reduceMotion || !autoplay) && animationRef.current) {
+          const totalFrames = animationRef.current.getDuration(true);
+          animationRef.current.goToAndStop(totalFrames - 1, true);
+        }
+      }
+
+      return () => {
+        animationRef.current?.destroy();
+      };
+    }, [reduceMotion, json, autoplay, onAnimationEnd]);
+
+    return (
+      <div aria-label={allyTitle} data-testid={dataTestid} ref={ref} className={classes} {...props}>
+        <div ref={containerRef} />
+      </div>
+    );
+  }
+);
+
+IllustrativeIcon.displayName = "IllustrativeIcon";