@adobe/spectrum-component-api-schemas 6.0.0 → 6.1.0

package/test/schema-validation.test.js

@@ -1,131 +1,90 @@
+/*
+Copyright 2026 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
 import test from "ava";
-import {
-  readJSON,
-  getSchemaFiles,
-  createAjvInstance,
-  validateSchema,
-  validateExamples,
-} from "./utils/test-helpers.js";
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import { glob } from "glob";
+import { createRequire } from "module";
+import Ajv from "ajv/dist/2020.js";
+import addFormats from "ajv-formats";
+import * as url from "url";
 
-// Setup Ajv instance once for all tests
-let ajv;
-
-test.before(async () => {
-  ajv = await createAjvInstance();
-});
-
-test("component schema should be valid", async (t) => {
-  const componentSchema = await readJSON("schemas/component.json");
-  const result = validateSchema(componentSchema, ajv);
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
 
-  t.true(
-    result.valid,
-    `Component schema validation failed: ${JSON.stringify(result.errors, null, 2)}`,
-  );
-});
+const specPkgPath = createRequire(import.meta.url).resolve(
+  "@adobe/design-data-spec/package.json",
+);
+const specPkgDir = resolve(specPkgPath, "..");
+const componentsDir = resolve(specPkgDir, "components");
 
-test("all component schemas should validate against the definition", async (t) => {
-  const componentFiles = await getSchemaFiles("schemas/components/*.json");
-  const validationResults = [];
+const readJSON = async (filePath) =>
+  JSON.parse(await readFile(filePath, "utf8"));
 
-  for (const filePath of componentFiles) {
-    const schema = await readJSON(filePath);
-    const result = validateSchema(schema, ajv);
-
-    if (!result.valid) {
-      validationResults.push({
-        file: filePath,
-        errors: result.errors,
-      });
-    }
-  }
+let ajv;
+let componentSchema;
 
-  t.is(
-    validationResults.length,
-    0,
-    `Schema validation failed for:\n${validationResults
-      .map((r) => `${r.file}:\n${JSON.stringify(r.errors, null, 2)}`)
-      .join("\n\n")}`,
+test.before(async () => {
+  componentSchema = await readJSON(
+    resolve(specPkgDir, "schemas/component.schema.json"),
   );
-});
-
-test("all component examples should validate against their schemas", async (t) => {
-  const componentFiles = await getSchemaFiles("schemas/components/*.json");
-  const validationResults = [];
-
-  for (const filePath of componentFiles) {
-    const schema = await readJSON(filePath);
-    const result = validateExamples(schema, ajv);
 
-    if (!result.valid) {
-      validationResults.push({
-        file: filePath,
-        errors: result.errors,
-      });
-    }
-  }
-
-  t.is(
-    validationResults.length,
-    0,
-    `Example validation failed for:\n${validationResults
-      .map((r) => `${r.file}:\n${JSON.stringify(r.errors, null, 2)}`)
-      .join("\n\n")}`,
+  ajv = new Ajv({ allErrors: true, strict: false });
+  addFormats(ajv);
+  ajv.addSchema(
+    await readJSON(resolve(specPkgDir, "schemas/anatomy-part.schema.json")),
+  );
+  ajv.addSchema(
+    await readJSON(
+      resolve(specPkgDir, "schemas/state-declaration.schema.json"),
+    ),
   );
 });
 
-test("all type schemas should be valid JSON Schema", async (t) => {
-  const typeFiles = await getSchemaFiles("schemas/types/*.json");
-  const validationResults = [];
-
-  for (const filePath of typeFiles) {
-    const schema = await readJSON(filePath);
-    const result = validateSchema(schema, ajv);
+test("all component files should validate against component.schema.json", async (t) => {
+  const componentFiles = (await glob(`${componentsDir}/*.json`)).sort();
+  const validate = ajv.compile(componentSchema);
+  const failures = [];
 
-    if (!result.valid) {
-      validationResults.push({
-        file: filePath,
-        errors: result.errors,
-      });
+  for (const filePath of componentFiles) {
+    const data = await readJSON(filePath);
+    const valid = validate(data);
+    if (!valid) {
+      failures.push({ file: filePath, errors: validate.errors });
     }
   }
 
   t.is(
-    validationResults.length,
+    failures.length,
     0,
-    `Type schema validation failed for:\n${validationResults
-      .map((r) => `${r.file}:\n${JSON.stringify(r.errors, null, 2)}`)
+    `Schema validation failed:\n${failures
+      .map((f) => `${f.file}:\n${JSON.stringify(f.errors, null, 2)}`)
       .join("\n\n")}`,
   );
 });
 
-test("component schemas should have required metadata", async (t) => {
-  const componentFiles = await getSchemaFiles("schemas/components/*.json");
-  const missingMetadata = [];
+test("all component files should have required metadata", async (t) => {
+  const componentFiles = (await glob(`${componentsDir}/*.json`)).sort();
+  const missing = [];
 
   for (const filePath of componentFiles) {
-    const schema = await readJSON(filePath);
-
-    if (!schema.meta?.category) {
-      missingMetadata.push(`${filePath}: missing category`);
-    }
-
-    if (!schema.meta?.documentationUrl) {
-      missingMetadata.push(`${filePath}: missing documentationUrl`);
-    }
-
-    if (!schema.title) {
-      missingMetadata.push(`${filePath}: missing title`);
-    }
-
-    if (!Object.hasOwn(schema, "description")) {
-      missingMetadata.push(`${filePath}: missing description`);
-    }
+    const data = await readJSON(filePath);
+
+    if (!data.name) missing.push(`${filePath}: missing name`);
+    if (!data.displayName) missing.push(`${filePath}: missing displayName`);
+    if (!data.meta?.category)
+      missing.push(`${filePath}: missing meta.category`);
+    if (!data.meta?.documentationUrl)
+      missing.push(`${filePath}: missing meta.documentationUrl`);
   }
 
-  t.is(
-    missingMetadata.length,
-    0,
-    `Missing required metadata:\n${missingMetadata.join("\n")}`,
-  );
+  t.is(missing.length, 0, `Missing required metadata:\n${missing.join("\n")}`);
 });

package/schemas/component.json

@@ -1,32 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "title": "Component",
-  "type": "object",
-  "properties": {
-    "meta": {
-      "type": "object",
-      "properties": {
-        "category": {
-          "type": "string",
-          "enum": [
-            "actions",
-            "containers",
-            "data visualization",
-            "feedback",
-            "inputs",
-            "navigation",
-            "status",
-            "typography"
-          ]
-        },
-        "documentationUrl": {
-          "type": "string",
-          "format": "uri"
-        }
-      },
-      "required": ["category", "documentationUrl"]
-    }
-  },
-  "required": ["meta", "title", "description", "properties", "$id"]
-}

package/schemas/components/accordion.json

@@ -1,74 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/accordion.json",
-  "title": "Accordion",
-  "description": "An accordion is a vertically stacked set of interactive headings that each contain a title and a content area.",
-  "meta": {
-    "category": "inputs",
-    "documentationUrl": "https://spectrum.adobe.com/page/accordion/"
-  },
-  "type": "object",
-  "properties": {
-    "state": {
-      "type": "string",
-      "enum": ["default", "hover", "down", "keyboard focus"],
-      "default": "default"
-    },
-    "size": {
-      "type": "string",
-      "enum": ["s", "m", "l", "xl"],
-      "default": "m"
-    },
-    "isQuiet": {
-      "type": "boolean",
-      "default": false
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "density": {
-      "type": "string",
-      "enum": ["compact", "regular", "spacious"],
-      "default": "regular"
-    },
-    "items": {
-      "type": "array",
-      "description": "An array of accordion items.",
-      "items": {
-        "type": "object",
-        "properties": {
-          "label": {
-            "type": "string",
-            "description": "The text label displayed for the accordion item."
-          },
-          "content": {
-            "type": "string",
-            "description": "The content shown when the accordion item is expanded."
-          },
-          "isExpanded": {
-            "type": "boolean",
-            "default": false,
-            "description": "Whether the accordion item is expanded by default."
-          },
-          "hasSwitch": {
-            "type": "boolean",
-            "default": false,
-            "description": "If true, the accordion item includes a switch."
-          },
-          "hasActionButton": {
-            "type": "boolean",
-            "default": false,
-            "description": "If true, the accordion item includes an action button."
-          }
-        },
-        "required": ["label"]
-      }
-    },
-    "isMultiple": {
-      "type": "boolean",
-      "default": false,
-      "description": "If true, multiple accordion items can be expanded at the same time."
-    }
-  }
-}

package/schemas/components/action-bar.json

@@ -1,18 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/action-bar.json",
-  "title": "Action bar",
-  "description": "Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.",
-  "meta": {
-    "category": "actions",
-    "documentationUrl": "https://spectrum.adobe.com/page/action-bar/"
-  },
-  "type": "object",
-  "properties": {
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "examples": [{ "isEmphasized": true }, { "isEmphasized": false }, {}]
-}

package/schemas/components/action-button.json

@@ -1,62 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/action-button.json",
-  "title": "Action button",
-  "description": "Action buttons allow users to perform an action or mark a selection. They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.",
-  "meta": {
-    "category": "actions",
-    "documentationUrl": "https://spectrum.adobe.com/page/action-button/"
-  },
-  "type": "object",
-  "properties": {
-    "label": {
-      "type": "string"
-    },
-    "hideLabel": {
-      "type": "boolean",
-      "default": false
-    },
-    "icon": {
-      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json",
-      "description": "Icon must be present if the label is not defined."
-    },
-    "size": {
-      "type": "string",
-      "enum": ["xs", "s", "m", "l", "xl"],
-      "default": "m"
-    },
-    "isQuiet": {
-      "type": "boolean",
-      "default": false
-    },
-    "isSelected": {
-      "type": "boolean",
-      "default": false
-    },
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
-    },
-    "staticColor": {
-      "type": "string",
-      "enum": ["white", "black"],
-      "description": "Static color must not be set for the default version of this component."
-    },
-    "selectedTextColor": {
-      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/hex-color.json"
-    },
-    "hasHoldIcon": {
-      "type": "boolean",
-      "default": false
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "state": {
-      "type": "string",
-      "enum": ["default", "hover", "down", "keyboard focus"],
-      "default": "default"
-    }
-  }
-}

package/schemas/components/action-group.json

@@ -1,69 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/action-group.json",
-  "title": "Action group",
-  "description": "An action group is a grouping of action buttons that are related to each other.",
-  "meta": {
-    "category": "actions",
-    "documentationUrl": "https://spectrum.adobe.com/page/action-group/"
-  },
-  "type": "object",
-  "properties": {
-    "orientation": {
-      "type": "string",
-      "enum": ["horizontal", "vertical"],
-      "default": "horizontal"
-    },
-    "size": {
-      "type": "string",
-      "enum": ["s", "m", "l", "xl"],
-      "default": "m"
-    },
-    "density": {
-      "type": "string",
-      "enum": ["regular", "compact"],
-      "default": "regular"
-    },
-    "isJustified": {
-      "type": "boolean",
-      "default": false
-    },
-    "isQuiet": {
-      "type": "boolean",
-      "default": false
-    },
-    "isEmphasized": {
-      "type": "boolean",
-      "default": false
-    },
-    "enableSelection": {
-      "type": "boolean",
-      "default": false
-    },
-    "selectionMode": {
-      "type": "string",
-      "enum": ["single", "multiple"],
-      "default": "single",
-      "description": "Only applicable if selection is enabled"
-    },
-    "allowsEmptySelection": {
-      "type": "boolean",
-      "default": false,
-      "description": "Only applicable if selection is enabled"
-    },
-    "overflowMode": {
-      "type": "string",
-      "enum": ["wrap", "collapse"],
-      "default": "wrap"
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "examples": [
-    {
-      "size": "s"
-    }
-  ]
-}

package/schemas/components/alert-banner.json

@@ -1,29 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/alert-banner.json",
-  "title": "Alert banner",
-  "description": "Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.",
-  "meta": {
-    "category": "feedback",
-    "documentationUrl": "https://spectrum.adobe.com/page/alert-banner/"
-  },
-  "type": "object",
-  "properties": {
-    "text": {
-      "type": "string"
-    },
-    "variant": {
-      "type": "string",
-      "enum": ["neutral", "informative", "negative", "accent"],
-      "default": "neutral"
-    },
-    "actionLabel": {
-      "type": "string",
-      "description": "If undefined, this button does not appear."
-    },
-    "isDismissible": {
-      "type": "boolean",
-      "default": false
-    }
-  }
-}

package/schemas/components/alert-dialog.json

@@ -1,42 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/alert-dialog.json",
-  "title": "Alert dialog",
-  "description": "Alert dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions until an action is selected.",
-  "meta": {
-    "category": "feedback",
-    "documentationUrl": "https://spectrum.adobe.com/page/alert-dialog/"
-  },
-  "type": "object",
-  "properties": {
-    "title": {
-      "type": "string"
-    },
-    "description": {
-      "type": "string"
-    },
-    "variant": {
-      "type": "string",
-      "enum": [
-        "confirmation",
-        "information",
-        "warning",
-        "destructive",
-        "error"
-      ],
-      "default": "confirmation"
-    },
-    "primaryActionLabel": {
-      "type": "string"
-    },
-    "secondaryActionLabel": {
-      "type": "string",
-      "description": "If undefined, this button does not appear."
-    },
-    "cancelActionLabel": {
-      "type": "string",
-      "default": "cancel",
-      "description": "If undefined, this button does not appear."
-    }
-  }
-}

package/schemas/components/avatar-group.json

@@ -1,22 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/avatar-group.json",
-  "title": "Avatar group",
-  "description": "Avatar groups display a collection of avatars representing people or entities.",
-  "meta": {
-    "category": "actions",
-    "documentationUrl": "https://spectrum.adobe.com/page/avatar-group/"
-  },
-  "type": "object",
-  "properties": {
-    "label": {
-      "type": "string",
-      "description": "Optional text label displayed with the avatar group (e.g., group name)."
-    },
-    "size": {
-      "type": "number",
-      "enum": [50, 75, 100, 200, 300, 400, 500],
-      "default": 100
-    }
-  }
-}

package/schemas/components/avatar.json

@@ -1,45 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/avatar.json",
-  "title": "Avatar",
-  "description": "An avatar is a thumbnail representation of an entity, such as a user or an organization.",
-  "meta": {
-    "category": "navigation",
-    "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
-  },
-  "type": "object",
-  "properties": {
-    "size": {
-      "type": "number",
-      "enum": [
-        50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200,
-        1300, 1400, 1500
-      ],
-      "default": 500
-    },
-    "image": {
-      "type": "string",
-      "enum": [
-        "user image",
-        "gradient image",
-        "gradient",
-        "guest image",
-        "initials"
-      ],
-      "default": "user image"
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "showStroke": {
-      "type": "boolean",
-      "default": false
-    },
-    "state": {
-      "type": "string",
-      "enum": ["default", "down", "keyboard focus"],
-      "default": "default"
-    }
-  }
-}

package/schemas/components/badge.json

@@ -1,69 +0,0 @@
-{
-  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
-  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/badge.json",
-  "title": "Badge",
-  "description": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
-  "meta": {
-    "category": "status",
-    "documentationUrl": "https://spectrum.adobe.com/page/badge/"
-  },
-  "type": "object",
-  "properties": {
-    "label": {
-      "type": "string",
-      "description": "When the label is not defined, the badge appears as icon-only."
-    },
-    "icon": {
-      "$ref": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json"
-    },
-    "variant": {
-      "type": "string",
-      "enum": [
-        "neutral",
-        "info",
-        "positive",
-        "negative",
-        "indigo",
-        "yellow",
-        "magenta",
-        "fuchsia",
-        "purple",
-        "seafoam",
-        "accent",
-        "notice",
-        "gray",
-        "red",
-        "orange",
-        "chartreuse",
-        "celery",
-        "green",
-        "cyan",
-        "blue",
-        "pink",
-        "turquoise",
-        "brown",
-        "cinnamon",
-        "silver"
-      ]
-    },
-    "style": {
-      "type": "string",
-      "enum": ["bold", "subtle", "outline"]
-    },
-    "fixed": {
-      "type": "string",
-      "enum": ["none", "top", "right", "bottom", "left"],
-      "default": "none"
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "size": {
-      "type": "string",
-      "pattern": "^(x?s|m|x{0,3}l)$",
-      "enum": ["s", "m", "l", "xl"],
-      "default": "s"
-    }
-  }
-}