@adobe/spectrum-design-data 0.1.0 → 0.2.0

package/components/popover.json

@@ -0,0 +1,174 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/popover.json",
+  "specVersion": "1.0.0-draft",
+  "name": "popover",
+  "displayName": "Popover",
+  "description": "Popovers are containers used to display transient content such as menus, options, additional actions, and more. They visually stand out through stroke and drop shadow and float on top of the interface.",
+  "meta": {
+    "category": "containers",
+    "documentationUrl": "https://spectrum.adobe.com/page/popover/"
+  },
+  "options": {
+    "width": {
+      "type": "number"
+    },
+    "height": {
+      "type": "number"
+    },
+    "hideTip": {
+      "type": "boolean",
+      "default": false
+    },
+    "placement": {
+      "type": "string",
+      "default": "top",
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "top left"
+        },
+        {
+          "value": "top right"
+        },
+        {
+          "value": "top start"
+        },
+        {
+          "value": "top end"
+        },
+        {
+          "value": "bottom"
+        },
+        {
+          "value": "bottom left"
+        },
+        {
+          "value": "bottom right"
+        },
+        {
+          "value": "bottom start"
+        },
+        {
+          "value": "bottom end"
+        },
+        {
+          "value": "left"
+        },
+        {
+          "value": "left top"
+        },
+        {
+          "value": "left bottom"
+        },
+        {
+          "value": "start"
+        },
+        {
+          "value": "start top"
+        },
+        {
+          "value": "start bottom"
+        },
+        {
+          "value": "right"
+        },
+        {
+          "value": "right top"
+        },
+        {
+          "value": "right bottom"
+        },
+        {
+          "value": "end"
+        },
+        {
+          "value": "end top"
+        },
+        {
+          "value": "end bottom"
+        }
+      ]
+    },
+    "offset": {
+      "type": "number",
+      "default": 8,
+      "description": "pixel measurement"
+    },
+    "crossOffset": {
+      "type": "number",
+      "default": 0
+    },
+    "containerPadding": {
+      "type": "number",
+      "default": 8,
+      "description": "pixel measurement"
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "corner-radius-large-default",
+      "context": "Rounding"
+    },
+    {
+      "token": "popover-tip-width",
+      "context": "Tip"
+    },
+    {
+      "token": "popover-tip-height",
+      "context": "Tip"
+    },
+    {
+      "token": "popover-edge-to-content-area",
+      "context": "Spacing (left/right edge to content area)"
+    },
+    {
+      "token": "spacing-100",
+      "context": "Spacing (tip to source)"
+    },
+    {
+      "token": "border-width-100",
+      "context": "Border"
+    },
+    {
+      "token": "background-layer-2-color",
+      "context": "Background and border"
+    },
+    {
+      "token": "popover-border-color",
+      "context": "Background and border"
+    },
+    {
+      "token": "drop-shadow-elevated-color",
+      "context": "Drop shadow"
+    },
+    {
+      "token": "drop-shadow-elevated-x",
+      "context": "Drop shadow"
+    },
+    {
+      "token": "drop-shadow-elevated-y",
+      "context": "Drop shadow"
+    },
+    {
+      "token": "drop-shadow-elevated-blur",
+      "context": "Drop shadow"
+    }
+  ],
+  "accessibility": {
+    "intents": ["dismiss"],
+    "focusable": false,
+    "wcag": [
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
+    ]
+  }
+}

package/components/progress-bar.json

@@ -0,0 +1,229 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/progress-bar.json",
+  "specVersion": "1.0.0-draft",
+  "name": "progress-bar",
+  "displayName": "Progress bar",
+  "description": "Progress bars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way. They can represent either determinate or indeterminate progress.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/progress-bar/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "default": "default",
+      "values": [
+        {
+          "value": "default"
+        },
+        {
+          "value": "over background"
+        }
+      ]
+    },
+    "staticColor": {
+      "type": "string",
+      "description": "Static color can only be white, otherwise it is default.",
+      "values": [
+        {
+          "value": "white"
+        }
+      ]
+    },
+    "label": {
+      "type": "string"
+    },
+    "labelPosition": {
+      "type": "string",
+      "default": "top",
+      "values": [
+        {
+          "value": "top"
+        },
+        {
+          "value": "side"
+        }
+      ]
+    },
+    "hideLabel": {
+      "type": "boolean",
+      "default": false
+    },
+    "value": {
+      "type": "number",
+      "description": "Not applicable when indeterminate."
+    },
+    "minValue": {
+      "type": "number",
+      "default": 0,
+      "description": "Not applicable when indeterminate."
+    },
+    "maxValue": {
+      "type": "number",
+      "default": 1,
+      "description": "Not applicable when indeterminate."
+    },
+    "valueLabel": {
+      "type": "string"
+    },
+    "width": {
+      "type": "number"
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
+      ]
+    },
+    "isIndeterminate": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "progress-bar-minimum-width",
+      "context": "Minimum width"
+    },
+    {
+      "token": "progress-bar-maximum-width",
+      "context": "Maximum width"
+    },
+    {
+      "token": "spacing-75",
+      "context": "Spacing (field label to progress bar)"
+    },
+    {
+      "token": "spacing-200",
+      "context": "Minimum spacing (field label to text)"
+    },
+    {
+      "token": "component-top-to-text-75",
+      "context": "Spacing (top edge to text)"
+    },
+    {
+      "token": "component-top-to-text-100",
+      "context": "Spacing (top edge to text)"
+    },
+    {
+      "token": "component-top-to-text-200",
+      "context": "Spacing (top edge to text)"
+    },
+    {
+      "token": "component-top-to-text-300",
+      "context": "Spacing (top edge to text)"
+    },
+    {
+      "token": "progress-bar-thickness-small",
+      "context": "Thickness (track)"
+    },
+    {
+      "token": "progress-bar-thickness-medium",
+      "context": "Thickness (track)"
+    },
+    {
+      "token": "progress-bar-thickness-large",
+      "context": "Thickness (track)"
+    },
+    {
+      "token": "progress-bar-thickness-extra-large",
+      "context": "Thickness (track)"
+    },
+    {
+      "token": "corner-radius-full",
+      "context": "Rounding"
+    },
+    {
+      "token": "default-font-family",
+      "context": "Value"
+    },
+    {
+      "token": "regular-font-weight",
+      "context": "Value"
+    },
+    {
+      "token": "default-font-style",
+      "context": "Value"
+    },
+    {
+      "token": "font-size-75",
+      "context": "Value"
+    },
+    {
+      "token": "font-size-100",
+      "context": "Value"
+    },
+    {
+      "token": "font-size-200",
+      "context": "Value"
+    },
+    {
+      "token": "font-size-300",
+      "context": "Value"
+    },
+    {
+      "token": "line-height-100",
+      "context": "Value"
+    },
+    {
+      "token": "cjk-line-height-100",
+      "context": "Value"
+    },
+    {
+      "token": "neutral-subdued-content-color-default",
+      "context": "Text"
+    },
+    {
+      "token": "track-color",
+      "context": "Track and indicator"
+    },
+    {
+      "token": "accent-content-color-default",
+      "context": "Track and indicator"
+    },
+    {
+      "token": "static-white-text-color",
+      "context": "Text (white)"
+    },
+    {
+      "token": "static-white-track-color",
+      "context": "Track and indicator (white)"
+    },
+    {
+      "token": "static-white-track-indicator-color",
+      "context": "Track and indicator (white)"
+    }
+  ],
+  "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"
+      }
+    ]
+  }
+}

package/components/progress-circle.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/component.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/components/progress-circle.json",
+  "specVersion": "1.0.0-draft",
+  "name": "progress-circle",
+  "displayName": "Progress circle",
+  "description": "Progress circles show the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. They can represent determinate or indeterminate progress.",
+  "meta": {
+    "category": "status",
+    "documentationUrl": "https://spectrum.adobe.com/page/progress-circle/"
+  },
+  "options": {
+    "variant": {
+      "type": "string",
+      "default": "default",
+      "values": [
+        {
+          "value": "default"
+        },
+        {
+          "value": "over background"
+        }
+      ]
+    },
+    "value": {
+      "type": "number",
+      "description": "Not applicable when indeterminate."
+    },
+    "minValue": {
+      "type": "number",
+      "default": 0,
+      "description": "Not applicable when indeterminate."
+    },
+    "maxValue": {
+      "type": "number",
+      "default": 1,
+      "description": "Not applicable when indeterminate."
+    },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        }
+      ]
+    },
+    "isIndeterminate": {
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
+  "tokenBindings": [
+    {
+      "token": "progress-circle-size-small",
+      "context": "Size"
+    },
+    {
+      "token": "progress-circle-size-medium",
+      "context": "Size"
+    },
+    {
+      "token": "progress-circle-size-large",
+      "context": "Size"
+    },
+    {
+      "token": "progress-circle-thickness-small",
+      "context": "Thickness"
+    },
+    {
+      "token": "progress-circle-thickness-medium",
+      "context": "Thickness"
+    },
+    {
+      "token": "progress-circle-thickness-large",
+      "context": "Thickness"
+    },
+    {
+      "token": "corner-radius-full",
+      "context": "Rounding (fill)"
+    },
+    {
+      "token": "track-color",
+      "context": "Track and fill"
+    },
+    {
+      "token": "accent-content-color-default",
+      "context": "Track and fill"
+    },
+    {
+      "token": "static-white-track-color",
+      "context": "Track and fill (white)"
+    },
+    {
+      "token": "static-white-track-indicator-color",
+      "context": "Track and fill (white)"
+    },
+    {
+      "token": "static-black-track-color",
+      "context": "Track and fill (black)"
+    },
+    {
+      "token": "static-black-track-indicator-color",
+      "context": "Track and fill (black)"
+    }
+  ],
+  "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"
+      }
+    ]
+  }
+}