@tangle-network/ui 11.19.0 → 11.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.20.0
+
+### Minor Changes
+
+- 24ea445: IconTile gains `xl` (64px) and `2xl` (80px) sizes for page and profile headers, so an app can show an entity's face at header scale without a local avatar component.
+
 ## 11.19.0
 
 ### Minor Changes

package/dist/primitives/icon-tile.d.ts

@@ -17,7 +17,12 @@ import * as React from "react";
 export interface IconTileProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   /** Defaults to a tone derived from `name`, or violet when there is no name. */
   tone?: CategoryTone;
-  size?: "xs" | "sm" | "md" | "lg";
+  /**
+   * `xs` to `lg` (20 to 40px) sit in rows and cards. `xl` (64px) and `2xl`
+   * (80px) are for a page or profile header, where the tile is the thing's
+   * face rather than a list marker.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   src?: string;
   icon?: React.ReactNode;
   /** The thing's name. Supplies the initials and the derived tone. */

package/dist/primitives/icon-tile.js

@@ -7,7 +7,9 @@ const SIZE = {
 	xs: "size-5 rounded-[5px] text-[10px] [&_svg]:size-3",
 	sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
 	md: "size-8 rounded-md text-xs [&_svg]:size-4",
-	lg: "size-10 rounded-lg text-sm [&_svg]:size-5"
+	lg: "size-10 rounded-lg text-sm [&_svg]:size-5",
+	xl: "size-16 rounded-2xl text-xl [&_svg]:size-8",
+	"2xl": "size-20 rounded-2xl text-2xl [&_svg]:size-10"
 };
 /** Up to two initials: the first letters of the first two words, or of the one word. */
 function initialsOf(name) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.19.0",
+  "version": "11.20.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.13.0",
+    "@tangle-network/brand": "^1.15.1",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/icon-tile.stories.tsx

@@ -62,10 +62,10 @@ export const Sizes: Story = {
   render: () => (
     <BothThemes>
       <div className="flex items-end gap-3">
-        {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
           <IconTile key={size} size={size} name="Tangle Network" />
         ))}
-        {(["xs", "sm", "md", "lg"] as const).map((size) => (
+        {(["xs", "sm", "md", "lg", "xl", "2xl"] as const).map((size) => (
           <IconTile key={`g-${size}`} size={size} tone="cyan" icon={<Globe />} />
         ))}
       </div>

package/src/primitives/icon-tile.test.tsx

@@ -0,0 +1,39 @@
+import { render } from "@testing-library/react";
+import { Globe } from "lucide-react";
+import { describe, expect, it } from "vitest";
+import { IconTile, initialsOf } from "./icon-tile";
+
+describe("IconTile", () => {
+  it.each([
+    ["xs", "size-5"],
+    ["sm", "size-6"],
+    ["md", "size-8"],
+    ["lg", "size-10"],
+    ["xl", "size-16"],
+    ["2xl", "size-20"],
+  ] as const)("renders size %s as %s", (size, cls) => {
+    const { container } = render(<IconTile size={size} name="Tangle Network" />);
+    expect(container.firstElementChild).toHaveClass(cls);
+  });
+
+  it("scales the glyph with the large sizes", () => {
+    const { container } = render(<IconTile size="2xl" tone="cyan" icon={<Globe />} />);
+    expect(container.firstElementChild?.className).toContain("[&_svg]:size-10");
+  });
+
+  it("shows initials and is decorative without a label", () => {
+    const { container } = render(<IconTile size="xl" name="Acme Robotics" />);
+    const tile = container.firstElementChild;
+    expect(tile).toHaveTextContent("AR");
+    expect(tile).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("is an image with an accessible name when labelled", () => {
+    const { getByRole } = render(<IconTile size="xl" name="Acme" label="Acme" />);
+    expect(getByRole("img", { name: "Acme" })).toBeInTheDocument();
+  });
+
+  it("keeps an emoji whole in the initials", () => {
+    expect(initialsOf("🦊")).toBe("🦊");
+  });
+});

package/src/primitives/icon-tile.tsx

@@ -18,7 +18,12 @@ import { type CategoryTone, TONE_CLASSES, toneFor } from "./tone";
 export interface IconTileProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
   /** Defaults to a tone derived from `name`, or violet when there is no name. */
   tone?: CategoryTone;
-  size?: "xs" | "sm" | "md" | "lg";
+  /**
+   * `xs` to `lg` (20 to 40px) sit in rows and cards. `xl` (64px) and `2xl`
+   * (80px) are for a page or profile header, where the tile is the thing's
+   * face rather than a list marker.
+   */
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
   src?: string;
   icon?: React.ReactNode;
   /** The thing's name. Supplies the initials and the derived tone. */
@@ -32,6 +37,8 @@ const SIZE = {
   sm: "size-6 rounded-md text-[11px] [&_svg]:size-3.5",
   md: "size-8 rounded-md text-xs [&_svg]:size-4",
   lg: "size-10 rounded-lg text-sm [&_svg]:size-5",
+  xl: "size-16 rounded-2xl text-xl [&_svg]:size-8",
+  "2xl": "size-20 rounded-2xl text-2xl [&_svg]:size-10",
 } as const;
 
 /** Up to two initials: the first letters of the first two words, or of the one word. */