@adobe/spectrum-design-data 0.0.1 → 0.2.0

package/components/help-text.json

@@ -0,0 +1,209 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/help-text.json",
+  "specVersion": "1.0.0-draft",
+  "name": "help-text",
+  "displayName": "Help text",
+  "description": "Help text provides either an informative description or an error message that gives more context about what a user needs to input. It’s commonly used in forms.",
+  "meta": {
+    "category": "inputs",
+    "documentationUrl": "https://spectrum.adobe.com/page/help-text/"
+  },
+  "options": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "default": "neutral",
+      "values": [
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "negative"
+        }
+      ]
+    },
+    "hideIcon": {
+      "type": "boolean",
+      "default": false,
+      "description": "Only applicable if variant is negative."
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Help text cannot be both disabled and negative variant."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "component-height-75",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "component-height-100",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "component-height-200",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "component-height-300",
+      "context": "Minimum Height"
+    },
+    {
+      "token": "workflow-icon-size-75",
+      "context": "Icon size"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon size"
+    },
+    {
+      "token": "workflow-icon-size-200",
+      "context": "Icon size"
+    },
+    {
+      "token": "workflow-icon-size-300",
+      "context": "Icon size"
+    },
+    {
+      "token": "text-to-visual-75",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "text-to-visual-100",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "text-to-visual-200",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "text-to-visual-300",
+      "context": "Spacing (alert icon to text)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-75",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-100",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-200",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-workflow-icon-300",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "component-top-to-text-75",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-top-to-text-200",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-top-to-text-300",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-75",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-100",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-200",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-300",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "neutral-subdued-content-color-default",
+      "context": "Text"
+    },
+    {
+      "token": "disabled-content-color-default",
+      "context": "Text and alert icon (disabled)"
+    },
+    {
+      "token": "negative-content-color-default",
+      "context": "Text and alert icon (warning)"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Text"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Text"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Text"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Text"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Text"
+    }
+  ],
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/illustrated-message.json

@@ -0,0 +1,175 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/illustrated-message.json",
+  "specVersion": "1.0.0-draft",
+  "name": "illustrated-message",
+  "displayName": "Illustrated message",
+  "description": "An illustrated message displays an illustration with a short title and description, often used for empty states or error states.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/illustrated-message/"
+  },
+  "options": {
+    "illustration": {
+      "type": "string",
+      "description": "Optional illustration or icon displayed above the message."
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "description": "Size of the illustration.",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
+    },
+    "orientation": {
+      "type": "string",
+      "default": "vertical",
+      "description": "Orientation of the illustrated message.",
+      "values": [
+        {
+          "value": "vertical"
+        },
+        {
+          "value": "horizontal"
+        }
+      ]
+    },
+    "title": {
+      "type": "string",
+      "description": "Primary heading text of the message."
+    },
+    "description": {
+      "type": "string",
+      "description": "Secondary descriptive text providing context or instructions."
+    },
+    "primaryActionLabel": {
+      "type": "string",
+      "description": "Label for the primary action button. If undefined, no primary action is shown."
+    },
+    "secondaryActionLabel": {
+      "type": "string",
+      "description": "Label for the secondary action button. If undefined, no secondary action is shown."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "illustrated-message-vertical-maximum-width",
+      "context": "Maximum width (Vertical variant)"
+    },
+    {
+      "token": "illustrated-message-horizontal-maximum-width",
+      "context": "Maximum width (Horizontal variant)"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (Illustration to heading)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (Illustration to heading)"
+    },
+    {
+      "token": "spacing-75",
+      "context": "Spacing (Heading to description - vertical)"
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (Description to action - vertical)"
+    },
+    {
+      "token": "title-sans-serif-font-family",
+      "context": "Title"
+    },
+    {
+      "token": "title-sans-serif-font-weight",
+      "context": "Title"
+    },
+    {
+      "token": "title-sans-serif-font-style",
+      "context": "Title"
+    },
+    {
+      "token": "title-line-height",
+      "context": "Title"
+    },
+    {
+      "token": "illustrated-message-small-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "illustrated-message-small-cjk-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "illustrated-message-medium-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "illustrated-message-medium-cjk-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "illustrated-message-large-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "illustrated-message-large-cjk-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "body-sans-serif-font-family",
+      "context": "Description"
+    },
+    {
+      "token": "body-sans-serif-font-weight",
+      "context": "Description"
+    },
+    {
+      "token": "body-sans-serif-font-style",
+      "context": "Description"
+    },
+    {
+      "token": "line-height-200",
+      "context": "Description"
+    },
+    {
+      "token": "illustrated-message-small-body-font-size",
+      "context": "Description"
+    },
+    {
+      "token": "illustrated-message-medium-body-font-size",
+      "context": "Description"
+    },
+    {
+      "token": "illustrated-message-large-body-font-size",
+      "context": "Description"
+    },
+    {
+      "token": "neutral-content-color-default",
+      "context": "Illustration color"
+    },
+    {
+      "token": "heading-color",
+      "context": "Heading color"
+    },
+    {
+      "token": "body-color",
+      "context": "Description color"
+    }
+  ],
+  "accessibility": {
+    "focusable": false
+  }
+}

package/components/in-field-progress-button.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/in-field-progress-button.json",
+  "specVersion": "1.0.0-draft",
+  "name": "in-field-progress-button",
+  "displayName": "In field progress button",
+  "description": "In field progress buttons provide interactive controls within form fields for actions like clearing, adding, or disclosing additional content.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-field-progress-button/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "style": {
+      "type": "string",
+      "values": [
+        {
+          "value": "disclosure"
+        },
+        {
+          "value": "clear"
+        },
+        {
+          "value": "dash"
+        },
+        {
+          "value": "add"
+        }
+      ]
+    },
+    "isQuiet": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "accessibility": {
+    "role": "button",
+    "intents": ["trigger"],
+    "focusable": true,
+    "keyboardIntents": ["activate"],
+    "wcag": [
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/in-field-progress-circle.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/in-field-progress-circle.json",
+  "specVersion": "1.0.0-draft",
+  "name": "in-field-progress-circle",
+  "displayName": "In field progress circle",
+  "description": "In field progress circles indicate progress for loading states within form fields and input areas.",
+  "meta": {
+    "category": "feedback",
+    "documentationUrl": "https://spectrum.adobe.com/page/in-field-progress-circle/"
+  },
+  "options": {
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "staticColor": {
+      "type": "string",
+      "values": [
+        {
+          "value": "white"
+        },
+        {
+          "value": "black"
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "in-field-progress-circle-size-75",
+      "context": "Height"
+    },
+    {
+      "token": "in-field-progress-circle-size-100",
+      "context": "Height"
+    },
+    {
+      "token": "in-field-progress-circle-size-200",
+      "context": "Height"
+    },
+    {
+      "token": "in-field-progress-circle-size-300",
+      "context": "Height"
+    },
+    {
+      "token": "gray-300",
+      "context": "Track and fill"
+    },
+    {
+      "token": "accent-content-color-default",
+      "context": "Track and fill"
+    },
+    {
+      "token": "transparent-white-300",
+      "context": "Track and fill (static white)"
+    },
+    {
+      "token": "transparent-white-900",
+      "context": "Track and fill (static white)"
+    },
+    {
+      "token": "transparent-black-300",
+      "context": "Track and fill (static black)"
+    },
+    {
+      "token": "transparent-black-900",
+      "context": "Track and fill (static black)"
+    },
+    {
+      "token": "progress-circle-thickness-small",
+      "context": "S1 Thickness"
+    },
+    {
+      "token": "progress-circle-thickness-medium",
+      "context": "S1 Thickness"
+    },
+    {
+      "token": "progress-circle-thickness-large",
+      "context": "S1 Thickness"
+    }
+  ],
+  "accessibility": {
+    "role": "progressbar",
+    "focusable": false,
+    "wcag": [
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      },
+      {
+        "criterion": "4.1.3",
+        "level": "AA",
+        "title": "Status Messages"
+      }
+    ]
+  }
+}