@adobe/spectrum-design-data 0.1.0 → 0.2.0

package/components/alert-banner.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/alert-banner.json",
+  "specVersion": "1.0.0-draft",
+  "name": "alert-banner",
+  "displayName": "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/"
+  },
+  "options": {
+    "text": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "default": "neutral",
+      "values": [
+        {
+          "value": "neutral"
+        },
+        {
+          "value": "informative"
+        },
+        {
+          "value": "negative"
+        },
+        {
+          "value": "accent"
+        }
+      ]
+    },
+    "actionLabel": {
+      "type": "string",
+      "description": "If undefined, this button does not appear."
+    },
+    "isDismissible": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon asset"
+    },
+    {
+      "token": "alert-banner-minimum-height",
+      "context": "Height"
+    },
+    {
+      "token": "alert-banner-width",
+      "context": "Width"
+    },
+    {
+      "token": "text-to-visual-300",
+      "context": "Spacing (icon to text)"
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (start edge to text and icon)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (close button to end edge)"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (close button to end edge)"
+    },
+    {
+      "token": "alert-banner-top-to-workflow-icon",
+      "context": "Spacing (top/bottom edge to icon)"
+    },
+    {
+      "token": "alert-banner-top-to-text",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "alert-banner-bottom-to-text",
+      "context": "Spacing (top/bottom edge to text)"
+    },
+    {
+      "token": "neutral-subdued-background-color-default",
+      "context": "Background"
+    },
+    {
+      "token": "informative-background-color-default",
+      "context": "Background"
+    },
+    {
+      "token": "negative-background-color-default",
+      "context": "Background"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Text"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Text"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Text"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Text"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Text"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Text"
+    }
+  ],
+  "accessibility": {
+    "focusable": false,
+    "wcag": [
+      {
+        "criterion": "4.1.3",
+        "level": "AA",
+        "title": "Status Messages"
+      }
+    ]
+  }
+}

package/components/alert-dialog.json

@@ -0,0 +1,180 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/alert-dialog.json",
+  "specVersion": "1.0.0-draft",
+  "name": "alert-dialog",
+  "displayName": "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/"
+  },
+  "options": {
+    "title": {
+      "type": "string"
+    },
+    "description": {
+      "type": "string"
+    },
+    "variant": {
+      "type": "string",
+      "default": "confirmation",
+      "values": [
+        {
+          "value": "confirmation"
+        },
+        {
+          "value": "information"
+        },
+        {
+          "value": "warning"
+        },
+        {
+          "value": "destructive"
+        },
+        {
+          "value": "error"
+        }
+      ]
+    },
+    "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."
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "heading-sans-serif-font-family",
+      "context": "Title"
+    },
+    {
+      "token": "heading-sans-serif-font-weight",
+      "context": "Title"
+    },
+    {
+      "token": "heading-sans-serif-font-style",
+      "context": "Title"
+    },
+    {
+      "token": "alert-dialog-title-font-size",
+      "context": "Title"
+    },
+    {
+      "token": "heading-line-height",
+      "context": "Title"
+    },
+    {
+      "token": "heading-color",
+      "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": "alert-dialog-body-font-size",
+      "context": "Description"
+    },
+    {
+      "token": "line-height-200",
+      "context": "Description"
+    },
+    {
+      "token": "body-color",
+      "context": "Description"
+    },
+    {
+      "token": "alert-dialog-maximum-width",
+      "context": "Maximum width"
+    },
+    {
+      "token": "alert-dialog-minimum-width",
+      "context": "Minimum width"
+    },
+    {
+      "token": "corner-radius-extra-large-default",
+      "context": "Rounding"
+    },
+    {
+      "token": "spacing-500",
+      "context": "Spacing (edge to content)"
+    },
+    {
+      "token": "spacing-400",
+      "context": "Spacing (edge to content)"
+    },
+    {
+      "token": "alert-dialog-top-to-alert-icon",
+      "context": "Icon asset (error and warning variants)"
+    },
+    {
+      "token": "spacing-300",
+      "context": "Spacing (title to description)"
+    },
+    {
+      "token": "workflow-icon-size-100",
+      "context": "Icon (error and warning variants)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Minimum spacing (title to icon)"
+    },
+    {
+      "token": "background-color-layer2",
+      "context": "Background"
+    },
+    {
+      "token": "overlay-color",
+      "context": "Overlay"
+    },
+    {
+      "token": "overlay-opacity",
+      "context": "Overlay"
+    },
+    {
+      "token": "notice-visual-color",
+      "context": "Icon (warning variant)"
+    },
+    {
+      "token": "negative-visual-color",
+      "context": "Icon (error variant)"
+    }
+  ],
+  "accessibility": {
+    "role": "dialog",
+    "intents": ["dismiss"],
+    "focusable": false,
+    "keyboardIntents": ["dismiss"],
+    "wcag": [
+      {
+        "criterion": "2.4.3",
+        "level": "A",
+        "title": "Focus Order"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/avatar-group.json

@@ -0,0 +1,166 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/avatar-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "avatar-group",
+  "displayName": "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/"
+  },
+  "options": {
+    "label": {
+      "type": "string",
+      "description": "Optional text label displayed with the avatar group (e.g., group name)."
+    },
+    "size": {
+      "type": "number",
+      "default": 100,
+      "values": [
+        {
+          "value": 50
+        },
+        {
+          "value": 75
+        },
+        {
+          "value": 100
+        },
+        {
+          "value": 200
+        },
+        {
+          "value": 300
+        },
+        {
+          "value": 400
+        },
+        {
+          "value": 500
+        }
+      ]
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "avatar-group-size-50",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-75",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-100",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-200",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-300",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-400",
+      "context": "Size"
+    },
+    {
+      "token": "avatar-group-size-500",
+      "context": "Size"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (avatar group to label)"
+    },
+    {
+      "token": "avatar-to-avatar-50",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-75",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-100",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-200",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-300",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-400",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "avatar-to-avatar-500",
+      "context": "Spacing (avatar to avatar)"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Layout"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Layout"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-50",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-400",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-500",
+      "context": "Layout"
+    },
+    {
+      "token": "font-size-600",
+      "context": "Layout"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Layout"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Layout"
+    }
+  ],
+  "accessibility": {
+    "role": "group",
+    "focusable": false
+  }
+}