- {NUCLEO_ICONS.map(({ className, duplicate, icon: Glyph, name, source }) => (
+ {NUCLEO_ICONS.map(({ className, icon: Glyph, name, source }) => (
{source ?
: null}
@@ -92,7 +87,6 @@ export function IconCatalogue() {
{name}
- {duplicate ? Consolidated exact duplicate: {duplicate} : null}
))}
diff --git a/apps/web/src/design-audit/inventory.ts b/apps/web/src/design-audit/inventory.ts
index 7f8a41ab..18187258 100644
--- a/apps/web/src/design-audit/inventory.ts
+++ b/apps/web/src/design-audit/inventory.ts
@@ -21,6 +21,12 @@ export const AUDIT_INVENTORY: readonly AuditGroup[] = [
id: "foundations",
label: "Foundations",
items: [
+ {
+ id: "shared-adoption",
+ label: "One foundation, gradual adoption",
+ source: "apps/web/src/design-audit/adoption.tsx",
+ states: ["shared-foundation", "audit-field-select"],
+ },
{
id: "colours",
label: "Colour roles",
diff --git a/apps/web/src/design-audit/page.test.tsx b/apps/web/src/design-audit/page.test.tsx
index 986e4283..612093d2 100644
--- a/apps/web/src/design-audit/page.test.tsx
+++ b/apps/web/src/design-audit/page.test.tsx
@@ -2,6 +2,7 @@ import { describe, expect, it } from "bun:test";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
+import { AUDIT_INVENTORY } from "./inventory";
import { DesignAuditPage } from "./page";
describe("design audit page", () => {
@@ -18,4 +19,33 @@ describe("design audit page", () => {
expect(markup).toContain(`id="${id}"`);
}
});
+
+ it("documents one shared foundation with only the audit field Select adopted", () => {
+ let markup = renderToStaticMarkup(createElement(DesignAuditPage));
+ let adoptedControls = markup.match(
+ /
([\s\S]*?)<\/ul>/,
+ )?.[1] ?? "";
+
+ expect(markup).toContain("One foundation, gradual adoption");
+ expect(adoptedControls.match(/- {
+ expect(AUDIT_INVENTORY.map(group => group.id)).toEqual([
+ "foundations",
+ "controls",
+ "surfaces",
+ "authored-content",
+ ]);
+ expect(
+ AUDIT_INVENTORY.flatMap(group => group.items).find(item => item.id === "shared-adoption"),
+ ).toEqual({
+ id: "shared-adoption",
+ label: "One foundation, gradual adoption",
+ source: "apps/web/src/design-audit/adoption.tsx",
+ states: ["shared-foundation", "audit-field-select"],
+ });
+ });
});
diff --git a/apps/web/src/design-audit/page.tsx b/apps/web/src/design-audit/page.tsx
index 80598ceb..9df23b9b 100644
--- a/apps/web/src/design-audit/page.tsx
+++ b/apps/web/src/design-audit/page.tsx
@@ -1,4 +1,5 @@
import { AuditFrame, AuditSection } from "./frame";
+import { Adoption } from "./adoption";
import { AuthoredContent } from "./authored-content";
import { Controls } from "./controls";
import { Foundations } from "./foundations";
@@ -16,6 +17,7 @@ export function DesignAuditPage() {
return (
+
diff --git a/apps/web/src/design-audit/specimens.test.tsx b/apps/web/src/design-audit/specimens.test.tsx
index 0ca17fd2..0ac187a4 100644
--- a/apps/web/src/design-audit/specimens.test.tsx
+++ b/apps/web/src/design-audit/specimens.test.tsx
@@ -37,7 +37,8 @@ describe("design audit specimens", () => {
for (let id of ["colours", "typography", "spacing", "radii", "shadows", "icons"]) {
expect(markup).toContain(`data-audit-item="${id}"`);
}
- expect(markup).toContain("Consolidated exact duplicate");
+ expect(markup).toContain("Panel close");
+ expect(markup).not.toContain("Consolidated exact duplicate");
expect(markup).toContain("Strong resting");
expect(markup).toContain("--button-edge-width");
for (
diff --git a/apps/web/src/design-audit/styles.css b/apps/web/src/design-audit/styles.css
index 077d282b..10c87ce5 100644
--- a/apps/web/src/design-audit/styles.css
+++ b/apps/web/src/design-audit/styles.css
@@ -133,13 +133,6 @@
margin-block-end: 1rem;
}
-.design-audit-plate-heading {
- display: flex;
- align-items: baseline;
- flex-wrap: wrap;
- column-gap: 0.75rem;
-}
-
.design-audit-plate h3 {
font-size: var(--text-lg);
font-weight: 600;
@@ -155,6 +148,7 @@
}
.design-audit-source {
+ display: block;
min-width: 0;
font-family: var(--font-mono);
font-size: var(--text-sm);
@@ -168,17 +162,58 @@
}
.design-audit-state {
- display: inline-flex;
- align-items: center;
- min-height: 1.5rem;
- padding-inline: 0.5rem;
- border-radius: 9999px;
- background: var(--color-gray-200);
font-size: var(--text-sm);
+ line-height: var(--text-sm--line-height);
font-weight: 500;
+ color: var(--color-text-quaternary);
+}
+
+.design-audit-adoption {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 1.5rem;
+ padding-block: 0.75rem;
+ border-block: var(--edge-width) solid var(--color-edge);
+}
+
+.design-audit-adoption h4,
+.design-audit-adoption p,
+.design-audit-adoption ul {
+ margin: 0;
+}
+
+.design-audit-adoption h4 {
+ font-size: var(--text-sm);
+ line-height: var(--text-sm--line-height);
+}
+
+.design-audit-adoption p,
+.design-audit-adoption li {
+ font-size: var(--text-sm);
+ line-height: var(--text-sm--line-height);
color: var(--color-text-tertiary);
}
+.design-audit-adoption p {
+ margin-block-start: 0.25rem;
+}
+
+.design-audit-adoption ul {
+ padding: 0;
+ list-style: none;
+}
+
+.design-audit-adoption li {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.25rem 0.75rem;
+ margin-block-start: 0.25rem;
+}
+
+.design-audit-adoption strong {
+ color: var(--color-text-primary);
+}
+
@media (max-width: 639px) {
.design-audit {
padding-right: max(1rem, env(safe-area-inset-right));
@@ -201,4 +236,8 @@
overflow-x: auto;
margin-block-end: 2rem;
}
+
+ .design-audit-adoption {
+ grid-template-columns: 1fr;
+ }
}