@blotch/dolan 22.2.7 → 22.2.8

package/dist/ui/components/button/button.test.ts

@@ -102,6 +102,23 @@ const renderButton = async (
 })
 class StaticAttributesHost {}
 
+/**
+ * A sign-in button with the provider's mark, an app's own SVG.
+ */
+@Component({
+  imports: [UiButton, UiIcon],
+  template: `
+    <ui-button variant="outline">
+      <ui-icon [svg]="mark" />
+      Continue with GitHub
+    </ui-button>
+  `,
+})
+class OwnSvgHost {
+  readonly mark =
+    '<svg viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/></svg>';
+}
+
 const IOS_26 = { platform: 'iOS', osVersion: '26.0' };
 const IOS_18 = { platform: 'iOS', osVersion: '18.5' };
 const ANDROID = { platform: 'Android', osVersion: '15' };
@@ -314,6 +331,19 @@ describe('UiButton', () => {
     );
   });
 
+  it("puts an icon of the app's own SVG before the label, in the label color", async () => {
+    const { container, getByText } = await render(OwnSvgHost);
+    const icon = container.querySelector('svg')!;
+
+    expect(container.firstElementChild!.classList).toContain('gap-2');
+    expect(
+      icon.compareDocumentPosition(getByText('Continue with GitHub')),
+    ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+    expect(icon.getAttribute('content')).toContain(
+      `fill="${ICON_LIGHT_COLORS['foreground']}"`,
+    );
+  });
+
   it('puts one icon on each side of the label', async () => {
     const { host, getByText, icons, update } = await renderButton();
     await update(() => {

package/dist/ui/components/icon/icon.test.ts

@@ -1,6 +1,6 @@
-import { Component, signal } from '@angular/core';
+import { Component, ErrorHandler, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { UiIcon } from './icon';
 import {
   ICON_DARK_COLORS,
@@ -122,6 +122,121 @@ describe('UiIcon on its own', () => {
   });
 });
 
+/** A one-color mark, written as an app would: no namespace. */
+const ONE_COLOR_MARK =
+  '<svg viewBox="0 0 16 16"><path fill="currentColor" d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"/></svg>';
+
+/** A multi-color mark, which already has the namespace. */
+const TWO_COLOR_MARK =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1"><path fill="#4285f4" d="M0 0h1v1H0z"/><path fill="#34a853" d="M1 0h1v1H1z"/></svg>';
+
+@Component({
+  imports: [UiIcon],
+  template: `<ui-icon [svg]="svg()" [color]="color()" size="lg" />`,
+})
+class SvgHost {
+  readonly svg = signal(ONE_COLOR_MARK);
+  readonly color = signal<string | undefined>(undefined);
+}
+
+const renderSvg = async (providers: Parameters<typeof render>[1] = {}) => {
+  const result = await render(SvgHost, providers);
+  return {
+    ...result,
+    host: result.componentRef.instance as SvgHost,
+    content: () =>
+      result.container.querySelector('svg')!.getAttribute('content')!,
+  };
+};
+
+describe("UiIcon with an app's own svg", () => {
+  it('draws the markup at the size given, with currentColor in the theme foreground', async () => {
+    const { container, content } = await renderSvg();
+    expect(container.querySelector('svg')!.getAttribute('style')).toContain(
+      '32px',
+    );
+    expect(content()).toContain('d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0Z"');
+    expect(content()).toContain(`fill="${ICON_LIGHT_COLORS['foreground']}"`);
+    expect(content()).not.toContain('currentColor');
+  });
+
+  it('follows the color scheme and the color input, as the set does', async () => {
+    const { host, content } = await renderSvg({
+      providers: [provideIconTheme({ colorScheme: 'dark' })],
+    });
+    expect(content()).toContain(ICON_DARK_COLORS['foreground']);
+
+    host.color.set('var(--primary)');
+    await waitForUpdate();
+    expect(content()).toContain(ICON_DARK_COLORS['primary']);
+  });
+
+  it('keeps the colors a multi-color mark writes out', async () => {
+    const { host, content } = await renderSvg();
+    host.svg.set(TWO_COLOR_MARK);
+    host.color.set('rgb(255, 0, 0)');
+    await waitForUpdate();
+    expect(content()).toBe(TWO_COLOR_MARK);
+  });
+
+  // The web preview draws the markup as an image, which a browser leaves
+  // blank without the namespace.
+  it('adds the SVG namespace when the markup has none, and only then', async () => {
+    const { host, content } = await renderSvg();
+    expect(content()).toMatch(
+      /^<svg xmlns="http:\/\/www\.w3\.org\/2000\/svg" viewBox="0 0 16 16">/,
+    );
+
+    host.svg.set(TWO_COLOR_MARK);
+    await waitForUpdate();
+    expect(content().match(/xmlns=/g)).toHaveLength(1);
+  });
+});
+
+@Component({
+  imports: [UiIcon],
+  template: `<ui-icon [name]="name()" [svg]="svg()" />`,
+})
+class NameAndSvgHost {
+  readonly name = signal<IconName | undefined>(undefined);
+  readonly svg = signal<string | undefined>(undefined);
+}
+
+/**
+ * Renders the host, keeping the errors Angular reports: an error in change
+ * detection goes to the app's ErrorHandler rather than out of render().
+ */
+const renderNameAndSvg = async () => {
+  const handleError = vi.fn();
+  const result = await render(NameAndSvgHost, {
+    providers: [{ provide: ErrorHandler, useValue: { handleError } }],
+  });
+  return {
+    host: result.componentRef.instance as NameAndSvgHost,
+    handleError,
+  };
+};
+
+const NAME_OR_SVG = new Error('<ui-icon> needs a name or an svg, not both.');
+
+describe('UiIcon without exactly one of name and svg', () => {
+  it('reports an error with neither', async () => {
+    const { handleError } = await renderNameAndSvg();
+    expect(handleError).toHaveBeenCalledWith(NAME_OR_SVG);
+  });
+
+  it('reports an error with both', async () => {
+    const { host, handleError } = await renderNameAndSvg();
+    host.name.set('check');
+    await waitForUpdate();
+    handleError.mockClear();
+
+    host.svg.set(ONE_COLOR_MARK);
+    await waitForUpdate();
+    expect(handleError).toHaveBeenCalledWith(NAME_OR_SVG);
+  });
+});
+
 describe('ICONS registry', () => {
   it('exports at least one icon', () => {
     expect(Object.keys(ICONS).length).toBeGreaterThan(0);

package/dist/ui/components/icon/icon.ts

@@ -7,6 +7,19 @@ import { type IconName, ICONS } from './icons';
 
 const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
 
+/**
+ * Gives the markup's root `<svg>` the SVG namespace when it has none. The web
+ * preview draws `content` as an image of the markup, and a browser draws
+ * nothing for an SVG image without the namespace. An app's own SVG often
+ * leaves it out, since an `<svg>` written in an HTML page doesn't need it.
+ */
+const withSvgNamespace = (markup: string): string =>
+  markup.replace(/<svg\b([^>]*)>/, (tag, attributes: string) =>
+    /\sxmlns\s*=/.test(attributes)
+      ? tag
+      : `<svg xmlns="http://www.w3.org/2000/svg"${attributes}>`,
+  );
+
 /**
  * The icon is its host, an `<svg>` (registerHostElement, below). Angular gives
  * a component's host every static attribute the app writes on it, so
@@ -18,6 +31,9 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
  * Lynx's native <svg> element can't contain child nodes in the flat element
  * model. Passing the full SVG string as the `content` attribute is how Lynx
  * renders vector graphics without a DOM tree.
+ *
+ * It draws an icon from the set (`name`) or the app's own markup (`svg`),
+ * such as a sign-in provider's mark, which the set can't hold.
  */
 @Component({
   selector: 'ui-icon',
@@ -31,7 +47,15 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   template: '',
 })
 export class UiIcon {
-  readonly name = input.required<IconName>();
+  /** An icon from the set (see `ICONS`). Give this or `svg`. */
+  readonly name = input<IconName | undefined>(undefined);
+  /**
+   * SVG markup to draw instead of an icon from the set. `currentColor` in it
+   * takes the icon's color, as in the set's icons, so a one-color mark
+   * follows the theme; colors written out stay, so a multi-color one keeps
+   * them. Give this or `name`.
+   */
+  readonly svg = input<string | undefined>(undefined);
   readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
   /**
    * A literal color or a theme token (`var(--primary)`). Without one, the icon
@@ -60,11 +84,24 @@ export class UiIcon {
     // climbs on every render/interaction as each tick re-runs and re-throws.
     // split/join is ES2019-safe and is preferred over `replace(/.../g)` here
     // because the search term is a plain literal and needs no regex escaping.
-    return ICONS[this.name()]
+    return this.#markup()
       .split('currentColor')
       .join(this.#resolveColor(this.color()));
   }
 
+  /**
+   * The markup to draw. Neither input, or both, is a mistake in the template
+   * that the compiler can't catch, since neither input can be required, so
+   * it fails loudly rather than drawing an empty box or picking one.
+   */
+  #markup(): string {
+    const name = this.name();
+    const svg = this.svg();
+    if (svg !== undefined && name === undefined) return withSvgNamespace(svg);
+    if (name !== undefined && svg === undefined) return ICONS[name];
+    throw new Error('<ui-icon> needs a name or an svg, not both.');
+  }
+
   protected readonly sizePx = computed(() => SIZE_MAP[this.size()]);
 
   protected readonly svgClass = computed(() => cn(this.userClass()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotch/dolan",
-  "version": "22.2.7",
+  "version": "22.2.8",
   "description": "CLI for adding @blotch/ui components to your project",
   "homepage": "https://github.com/Blotch-Smart-Frames/AngularLynx#readme",
   "bugs": {