@adobe/design-data-spec 0.3.0 → 0.5.0

package/components/breadcrumbs.json

@@ -0,0 +1,263 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/breadcrumbs.json",
+  "specVersion": "1.0.0-draft",
+  "name": "breadcrumbs",
+  "displayName": "Breadcrumbs",
+  "description": "Breadcrumbs show hierarchy and navigational context for a user’s location within an app.",
+  "meta": {
+    "category": "navigation",
+    "documentationUrl": "https://spectrum.adobe.com/page/breadcrumbs/"
+  },
+  "options": {
+    "isMultiline": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the breadcrumb items will wrap to multiple lines."
+    },
+    "size": {
+      "type": "string",
+      "enum": ["m", "l"],
+      "default": "m",
+      "description": "Controls the overall size of the breadcrumb component."
+    },
+    "items": {
+      "type": "array",
+      "description": "An array of breadcrumb items.",
+      "items": {
+        "type": "object",
+        "properties": {
+          "label": {
+            "type": "string",
+            "description": "The text displayed for the breadcrumb item."
+          },
+          "href": {
+            "type": "string",
+            "description": "Optional URL the breadcrumb item links to."
+          },
+          "isCurrent": {
+            "type": "boolean",
+            "description": "Indicates if the breadcrumb item represents the current page.",
+            "default": false
+          },
+          "isDisabled": {
+            "type": "boolean",
+            "default": false
+          }
+        },
+        "required": ["label"]
+      }
+    },
+    "separator": {
+      "type": "string",
+      "enum": ["chevron", "none"],
+      "default": "chevron",
+      "description": "The separator icon used between breadcrumb items."
+    },
+    "isTruncated": {
+      "type": "boolean",
+      "default": false,
+      "description": "If true, the breadcrumb item is truncated and displayed as icon only."
+    },
+    "sizeOverride": {
+      "type": "string",
+      "enum": ["s", "m", "l", "xl"],
+      "description": "Overrides the size of the breadcrumb items when isMultiline is true."
+    }
+  },
+  "states": [
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    },
+    {
+      "name": "drag-and-drop",
+      "trigger": "prop"
+    }
+  ],
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "component-height-200",
+      "context": "Height"
+    },
+    {
+      "token": "breadcrumbs-text-to-separator-large",
+      "context": "Spacing (breadcrumb item/title to separator icon)"
+    },
+    {
+      "token": "breadcrumbs-start-edge-to-text-large",
+      "context": "Spacing (start and end edge to text)"
+    },
+    {
+      "token": "breadcrumbs-end-edge-to-text",
+      "context": "Spacing (start and end edge to text)"
+    },
+    {
+      "token": "component-top-to-text-200",
+      "context": "Spacing (top and bottom edge to text)"
+    },
+    {
+      "token": "component-bottom-to-text-200",
+      "context": "Spacing (top and bottom edge to text)"
+    },
+    {
+      "token": "breadcrumbs-top-to-truncated-menu",
+      "context": "Spacing (top and bottom edge to truncated menu button)"
+    },
+    {
+      "token": "breadcrumbs-top-to-separator-large",
+      "context": "Spacing (top and bottom edge to separator icon)"
+    },
+    {
+      "token": "breadcrumbs-truncated-menu-to-separator",
+      "context": "Spacing (truncated menu button to separator icon)"
+    },
+    {
+      "token": "breadcrumbs-start-edge-to-truncated-menu",
+      "context": "Spacing (start edge to truncated menu button)"
+    },
+    {
+      "token": "text-underline-thickness",
+      "context": "Breadcrumb item (hover, down, focus states)"
+    },
+    {
+      "token": "text-underline-gap",
+      "context": "Breadcrumb item (hover, down, focus states)"
+    },
+    {
+      "token": "focus-indicator-thickness",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "focus-indicator-gap",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Text (breadcrumb item and title)"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Text (breadcrumb item and title)"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Text (breadcrumb item and title)"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Text (breadcrumb item and title)"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Text (breadcrumb item and title)"
+    },
+    {
+      "token": "bold-font-weight",
+      "context": "Text (breadcrumb item and title)"
+    },
+    {
+      "token": "neutral-subdued-content-color-default",
+      "context": "Breadcrumb item and title"
+    },
+    {
+      "token": "neutral-content-color-default",
+      "context": "Breadcrumb item and title"
+    },
+    {
+      "token": "disabled-content-color",
+      "context": "Breadcrumb item (disabled)"
+    },
+    {
+      "token": "focus-indicator-color",
+      "context": "Focus indicator"
+    },
+    {
+      "token": "component-height-100",
+      "context": "Height (medium)"
+    },
+    {
+      "token": "breadcrumbs-text-to-separator-medium",
+      "context": "Spacing (breadcrumb item/title to separator icon, medium)"
+    },
+    {
+      "token": "breadcrumbs-start-edge-to-text-medium",
+      "context": "Spacing (start and end edge to text, medium)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top and bottom edge to text, medium)"
+    },
+    {
+      "token": "component-bottom-to-text-100",
+      "context": "Spacing (top and bottom edge to text, medium)"
+    },
+    {
+      "token": "breadcrumbs-top-to-separator-medium",
+      "context": "Spacing (top and bottom edge to separator icon, medium)"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Text (breadcrumb item and title, medium)"
+    },
+    {
+      "token": "breadcrumbs-height-multiline",
+      "context": "Height"
+    },
+    {
+      "token": "breadcrumbs-text-to-separator-multiline",
+      "context": "Spacing (breadcrumb item/title to separator icon, multiline)"
+    },
+    {
+      "token": "breadcrumbs-start-edge-to-text-multiline",
+      "context": "Spacing (start and end edge to text, multiline)"
+    },
+    {
+      "token": "breadcrumbs-top-to-text-multiline",
+      "context": "Spacing (top and bottom edge to text, multiline)"
+    },
+    {
+      "token": "breadcrumbs-bottom-to-text-multiline",
+      "context": "Spacing (top and bottom edge to text, multiline)"
+    },
+    {
+      "token": "breadcrumbs-top-to-separator-multiline",
+      "context": "Spacing (top edge to separator icon, multiline)"
+    },
+    {
+      "token": "breadcrumbs-separator-to-bottom-text-multiline",
+      "context": "Spacing (separator icon to bottom text, multiline)"
+    },
+    {
+      "token": "breadcrumbs-truncated-menu-to-bottom-text",
+      "context": "Spacing (truncated menu button to bottom text, multiline)"
+    },
+    {
+      "token": "breadcrumbs-top-text-to-bottom-text",
+      "context": "Spacing (top text to bottom text)"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Text (breadcrumb item and title, multiline)"
+    },
+    {
+      "token": "extra-bold-font-weight",
+      "context": "Text (breadcrumb item and title, multiline)"
+    },
+    {
+      "token": "heading-size-l",
+      "context": "Text (breadcrumb item and title, multiline)"
+    }
+  ]
+}

package/components/button-group.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/button-group.json",
+  "specVersion": "1.0.0-draft",
+  "name": "button-group",
+  "displayName": "Button group",
+  "description": "A button group is a grouping of buttons whose actions are related to each other.",
+  "meta": {
+    "category": "actions",
+    "documentationUrl": "https://spectrum.adobe.com/page/button-group/"
+  },
+  "options": {
+    "orientation": {
+      "type": "string",
+      "default": "horizontal",
+      "enum": ["horizontal", "vertical"]
+    },
+    "size": {
+      "type": "string",
+      "pattern": "^(x?s|m|x{0,3}l)$",
+      "enum": ["s", "m", "l", "xl"],
+      "default": "m"
+    },
+    "overflowMode": {
+      "type": "string",
+      "enum": ["wrap", "collapse"],
+      "default": "wrap"
+    },
+    "isDisabled": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "spacing-100",
+      "context": "Spacing (horizontal)"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Spacing (horizontal)"
+    }
+  ]
+}