@adobe/spectrum-design-data 0.4.0 → 0.7.0

package/components/status-light.json

@@ -9,140 +9,96 @@
     "category": "status",
     "documentationUrl": "https://spectrum.adobe.com/page/status-light/"
   },
-  "options": {
-    "label": {
-      "type": "string"
-    },
-    "variant": {
-      "type": "string",
-      "default": "informative",
-      "values": [
-        {
-          "value": "informative"
-        },
-        {
-          "value": "neutral"
-        },
-        {
-          "value": "positive"
-        },
-        {
-          "value": "notice"
-        },
-        {
-          "value": "negative"
-        },
-        {
-          "value": "indigo"
-        },
-        {
-          "value": "celery"
-        },
-        {
-          "value": "chartreuse"
-        },
-        {
-          "value": "yellow"
-        },
-        {
-          "value": "magenta"
-        },
-        {
-          "value": "fuchsia"
-        },
-        {
-          "value": "purple"
-        },
-        {
-          "value": "seafoam"
-        },
-        {
-          "value": "pink"
-        },
-        {
-          "value": "turquoise"
-        },
-        {
-          "value": "cinnamon"
-        },
-        {
-          "value": "brown"
-        },
-        {
-          "value": "silver"
-        },
-        {
-          "value": "gray"
-        },
-        {
-          "value": "red"
-        },
-        {
-          "value": "orange"
-        },
-        {
-          "value": "green"
-        },
-        {
-          "value": "cyan"
-        }
-      ]
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories."
     },
-    "size": {
-      "type": "string",
-      "default": "m",
-      "values": [
-        {
-          "value": "s"
-        },
-        {
-          "value": "m"
-        },
-        {
-          "value": "l"
-        },
-        {
-          "value": "xl"
-        }
-      ]
-    }
-  },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "tokenBindings": [
     {
-      "token": "component-height-75",
-      "context": "Height"
+      "type": "guideline",
+      "content": "Status lights indicate the state or condition of an item. They convey semantic meaning such as statuses and categories."
     },
     {
-      "token": "component-height-100",
-      "context": "Height"
+      "type": "guideline",
+      "content": "Status lights should always include a label. Color alone is not enough to communicate the status."
     },
     {
-      "token": "component-height-200",
-      "context": "Height"
+      "type": "guideline",
+      "content": "When status lights have a semantic meaning, they use semantic colors. Use these variants for the following statuses:"
     },
     {
-      "token": "component-height-300",
-      "context": "Height"
+      "type": "guideline",
+      "content": "When status lights are used to color code categories and labels that are commonly found in data visualization, they use non-semantic label colors. The ideal usage for these is when there are 8 or fewer categories or labels being color coded."
     },
     {
-      "token": "status-light-dot-size-small",
-      "context": "Dot size"
+      "type": "guideline",
+      "content": "Status lights come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page."
     },
     {
-      "token": "status-light-dot-size-medium",
-      "context": "Dot size"
+      "type": "guideline",
+      "content": "When the text is too long for the horizontal space available, it wraps to form another line."
     },
     {
-      "token": "status-light-dot-size-large",
-      "context": "Dot size"
+      "type": "guideline",
+      "content": "Semantic status lights should never be used for color coding categories or labels, and vice versa."
     },
     {
-      "token": "status-light-dot-extra-large",
-      "context": "Dot size"
+      "type": "guideline",
+      "content": "A status light should always include a label with text that clearly communicates about the kind of status being shown. Do not change the text color to match the dot."
+    }
+  ],
+  "options": {
+    "label": { "type": "string" },
+    "variant": {
+      "type": "string",
+      "default": "informative",
+      "values": [
+        { "value": "informative" },
+        { "value": "neutral" },
+        { "value": "positive" },
+        { "value": "notice" },
+        { "value": "negative" },
+        { "value": "indigo" },
+        { "value": "celery" },
+        { "value": "chartreuse" },
+        { "value": "yellow" },
+        { "value": "magenta" },
+        { "value": "fuchsia" },
+        { "value": "purple" },
+        { "value": "seafoam" },
+        { "value": "pink" },
+        { "value": "turquoise" },
+        { "value": "cinnamon" },
+        { "value": "brown" },
+        { "value": "silver" },
+        { "value": "gray" },
+        { "value": "red" },
+        { "value": "orange" },
+        { "value": "green" },
+        { "value": "cyan" }
+      ]
     },
+    "size": {
+      "type": "string",
+      "default": "m",
+      "values": [
+        { "value": "s" },
+        { "value": "m" },
+        { "value": "l" },
+        { "value": "xl" }
+      ]
+    }
+  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "tokenBindings": [
+    { "token": "component-height-75", "context": "Height" },
+    { "token": "component-height-100", "context": "Height" },
+    { "token": "component-height-200", "context": "Height" },
+    { "token": "component-height-300", "context": "Height" },
+    { "token": "status-light-dot-size-small", "context": "Dot size" },
+    { "token": "status-light-dot-size-medium", "context": "Dot size" },
+    { "token": "status-light-dot-size-large", "context": "Dot size" },
+    { "token": "status-light-dot-extra-large", "context": "Dot size" },
     {
       "token": "status-light-text-to-visual-75",
       "context": "Spacing (dot to label) "
@@ -207,128 +163,36 @@
       "token": "component-bottom-to-text-300",
       "context": "Spacing (top/bottom edge to label)"
     },
-    {
-      "token": "default-font-family",
-      "context": "Label"
-    },
-    {
-      "token": "regular-font-weight",
-      "context": "Label"
-    },
-    {
-      "token": "default-font-style",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-75",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-100",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-200",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-300",
-      "context": "Label"
-    },
-    {
-      "token": "line-height-100",
-      "context": "Label"
-    },
-    {
-      "token": "cjk-line-height-100",
-      "context": "Label"
-    },
-    {
-      "token": "informative-visual-color",
-      "context": "Semantic (Dot) "
-    },
-    {
-      "token": "neutral-visual-color",
-      "context": "Semantic (Dot) "
-    },
-    {
-      "token": "positive-visual-color",
-      "context": "Semantic (Dot) "
-    },
-    {
-      "token": "notice-visual-color",
-      "context": "Semantic (Dot) "
-    },
-    {
-      "token": "negative-visual-color",
-      "context": "Semantic (Dot) "
-    },
-    {
-      "token": "celery-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "chartreuse-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "cyan-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "fuchsia-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "purple-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "magenta-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "indigo-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "seafoam-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "yellow-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "pink-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "turquoise-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "cinnamon-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "brown-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "silver-visual-color",
-      "context": "Non-semantic (Dot)  "
-    },
-    {
-      "token": "gray-600",
-      "context": "Label"
-    },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Label"
-    }
+    { "token": "default-font-family", "context": "Label" },
+    { "token": "regular-font-weight", "context": "Label" },
+    { "token": "default-font-style", "context": "Label" },
+    { "token": "font-size-75", "context": "Label" },
+    { "token": "font-size-100", "context": "Label" },
+    { "token": "font-size-200", "context": "Label" },
+    { "token": "font-size-300", "context": "Label" },
+    { "token": "line-height-100", "context": "Label" },
+    { "token": "cjk-line-height-100", "context": "Label" },
+    { "token": "informative-visual-color", "context": "Semantic (Dot) " },
+    { "token": "neutral-visual-color", "context": "Semantic (Dot) " },
+    { "token": "positive-visual-color", "context": "Semantic (Dot) " },
+    { "token": "notice-visual-color", "context": "Semantic (Dot) " },
+    { "token": "negative-visual-color", "context": "Semantic (Dot) " },
+    { "token": "celery-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "chartreuse-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "cyan-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "fuchsia-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "purple-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "magenta-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "indigo-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "seafoam-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "yellow-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "pink-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "turquoise-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "cinnamon-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "brown-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "silver-visual-color", "context": "Non-semantic (Dot)  " },
+    { "token": "gray-600", "context": "Label" },
+    { "token": "neutral-content-color-default", "context": "Label" }
   ],
-  "accessibility": {
-    "focusable": false
-  }
+  "accessibility": { "focusable": false }
 }

package/components/steplist.json

@@ -9,18 +9,49 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/steplist/"
   },
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "Step lists display progress through a sequence of steps, with each step marked as completed, current, or incomplete."
+    },
+    {
+      "type": "guideline",
+      "content": "Steplists show progress across a series of discrete steps in a process. Use them for setups, wizards, or other flows with a fixed number of stages. They can be displayed horizontally or vertically."
+    },
+    {
+      "type": "guideline",
+      "content": "A current step in a steplist is styled to indicate the user's active position within a sequence. This styling helps orient the user by showing which step they are currently working on or viewing. It typically uses a distinct visual treatment, such as displaying the number of the step, to differentiate it from completed or incomplete steps. This ensures clarity in navigation and reinforces the sense of progress through the workflow."
+    },
+    {
+      "type": "guideline",
+      "content": "Represents an individual step within the steplist. Each item conveys a specific stage in a process or workflow."
+    },
+    {
+      "type": "guideline",
+      "content": "By default, steplists are horizontal and should be used for wider layouts or panels to keep the user’s focus moving from left to right. Vertical steplists should be used for more narrow layouts or panels to accommodate more steps without crowding."
+    },
+    {
+      "type": "guideline",
+      "content": "Users can’t click on incomplete steps. The steplist follows a linear flow, requiring completion of the previous step before moving to the next."
+    },
+    {
+      "type": "guideline",
+      "content": "Completed steps display a checkmark, while remaining steps retain their numeric indicators. The current step uses a darker fill to indicate selection. This treatment is available in medium, large, and extra-large sizes."
+    },
+    {
+      "type": "guideline",
+      "content": "When a step’s label is long for the available horizontal space, it wraps to form another line."
+    },
+    {
+      "type": "guideline",
+      "content": "Labels are optional in a steplist. Here are three recommended approaches:"
+    }
+  ],
   "options": {
     "orientation": {
       "type": "string",
       "default": "horizontal",
-      "values": [
-        {
-          "value": "horizontal"
-        },
-        {
-          "value": "vertical"
-        }
-      ]
+      "values": [{ "value": "horizontal" }, { "value": "vertical" }]
     },
     "items": {
       "type": "array",
@@ -57,9 +88,7 @@
       "description": "The identifier or label of the currently active step."
     }
   },
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
+  "lifecycle": { "introduced": "1.0.0-draft" },
   "tokenBindings": [
     {
       "token": "steplist-step-default-width-small",
@@ -109,46 +138,16 @@
       "token": "steplist-step-to-track-size-extra-large",
       "context": "Spacing (step to track)"
     },
-    {
-      "token": "steplist-bottom-to-text",
-      "context": "Text adjustment"
-    },
-    {
-      "token": "border-width-200",
-      "context": "Visual border"
-    },
-    {
-      "token": "text-to-visual-75",
-      "context": "Spacing (text to visual)"
-    },
-    {
-      "token": "text-to-visual-100",
-      "context": "Spacing (text to visual)"
-    },
-    {
-      "token": "text-to-visual-200",
-      "context": "Spacing (text to visual)"
-    },
-    {
-      "token": "text-to-visual-300",
-      "context": "Spacing (text to visual)"
-    },
-    {
-      "token": "steplist-visual-size-small",
-      "context": "Visual size"
-    },
-    {
-      "token": "steplist-visual-size-medium",
-      "context": "Visual size"
-    },
-    {
-      "token": "steplist-visual-size-large",
-      "context": "Visual size"
-    },
-    {
-      "token": "steplist-visual-size-extra-large",
-      "context": "Visual size"
-    },
+    { "token": "steplist-bottom-to-text", "context": "Text adjustment" },
+    { "token": "border-width-200", "context": "Visual border" },
+    { "token": "text-to-visual-75", "context": "Spacing (text to visual)" },
+    { "token": "text-to-visual-100", "context": "Spacing (text to visual)" },
+    { "token": "text-to-visual-200", "context": "Spacing (text to visual)" },
+    { "token": "text-to-visual-300", "context": "Spacing (text to visual)" },
+    { "token": "steplist-visual-size-small", "context": "Visual size" },
+    { "token": "steplist-visual-size-medium", "context": "Visual size" },
+    { "token": "steplist-visual-size-large", "context": "Visual size" },
+    { "token": "steplist-visual-size-extra-large", "context": "Visual size" },
     {
       "token": "steplist-track-thickness-thickness",
       "context": "Steplist track thickness"
@@ -157,30 +156,15 @@
       "token": "neutral-subdued-content-color-default",
       "context": "Step text"
     },
-    {
-      "token": "neutral-subdued-content-color-hover",
-      "context": "Step text"
-    },
+    { "token": "neutral-subdued-content-color-hover", "context": "Step text" },
     {
       "token": "neutral-subdued-content-color-key-focus",
       "context": "Step text"
     },
-    {
-      "token": "neutral-content-color-default",
-      "context": "Step text"
-    },
-    {
-      "token": "neutral-content-color-key-focus",
-      "context": "Step text"
-    },
-    {
-      "token": "accent-content-color-default",
-      "context": "Step text"
-    },
-    {
-      "token": "accent-content-color-key-focus",
-      "context": "Step text"
-    },
+    { "token": "neutral-content-color-default", "context": "Step text" },
+    { "token": "neutral-content-color-key-focus", "context": "Step text" },
+    { "token": "accent-content-color-default", "context": "Step text" },
+    { "token": "accent-content-color-key-focus", "context": "Step text" },
     {
       "token": "neutral-subdued-background-color-default",
       "context": "Step visual"
@@ -193,102 +177,34 @@
       "token": "neutral-subdued-background-color-key-focus",
       "context": "Step visual"
     },
-    {
-      "token": "neutral-background-color-default",
-      "context": "Step visual"
-    },
-    {
-      "token": "neutral-background-color-key-focus",
-      "context": "Step visual"
-    },
-    {
-      "token": "neutral-visual-color",
-      "context": "Step visual"
-    },
-    {
-      "token": "accent-background-color-default",
-      "context": "Step visual"
-    },
-    {
-      "token": "accent-background-color-key-focus",
-      "context": "Step visual"
-    },
-    {
-      "token": "accent-background-color-hover",
-      "context": "Step visual"
-    },
-    {
-      "token": "gray-25",
-      "context": "Step visual text"
-    },
-    {
-      "token": "white",
-      "context": "Step visual text"
-    },
-    {
-      "token": "accent-visual-color",
-      "context": "Steplist track"
-    },
-    {
-      "token": "disabled-content-color",
-      "context": "Disabled"
-    },
-    {
-      "token": "disabled-background-color",
-      "context": "Disabled"
-    },
-    {
-      "token": "default-font-family",
-      "context": "Label"
-    },
-    {
-      "token": "regular-font-weight",
-      "context": "Label"
-    },
-    {
-      "token": "default-font-style",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-75",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-100",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-200",
-      "context": "Label"
-    },
-    {
-      "token": "font-size-300",
-      "context": "Label"
-    },
-    {
-      "token": "line-height-100",
-      "context": "Label"
-    },
-    {
-      "token": "cjk-line-height-100",
-      "context": "Label"
-    }
+    { "token": "neutral-background-color-default", "context": "Step visual" },
+    { "token": "neutral-background-color-key-focus", "context": "Step visual" },
+    { "token": "neutral-visual-color", "context": "Step visual" },
+    { "token": "accent-background-color-default", "context": "Step visual" },
+    { "token": "accent-background-color-key-focus", "context": "Step visual" },
+    { "token": "accent-background-color-hover", "context": "Step visual" },
+    { "token": "gray-25", "context": "Step visual text" },
+    { "token": "white", "context": "Step visual text" },
+    { "token": "accent-visual-color", "context": "Steplist track" },
+    { "token": "disabled-content-color", "context": "Disabled" },
+    { "token": "disabled-background-color", "context": "Disabled" },
+    { "token": "default-font-family", "context": "Label" },
+    { "token": "regular-font-weight", "context": "Label" },
+    { "token": "default-font-style", "context": "Label" },
+    { "token": "font-size-75", "context": "Label" },
+    { "token": "font-size-100", "context": "Label" },
+    { "token": "font-size-200", "context": "Label" },
+    { "token": "font-size-300", "context": "Label" },
+    { "token": "line-height-100", "context": "Label" },
+    { "token": "cjk-line-height-100", "context": "Label" }
   ],
   "accessibility": {
     "intents": ["navigate"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "activate"],
     "wcag": [
-      {
-        "criterion": "2.1.1",
-        "level": "A",
-        "title": "Keyboard"
-      },
-      {
-        "criterion": "4.1.2",
-        "level": "A",
-        "title": "Name, Role, Value"
-      }
+      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
+      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
     ]
   }
 }