@adobe/spectrum-design-data 0.4.0 → 0.7.0

package/components/avatar-group.json

@@ -9,83 +9,67 @@
     "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"
-    },
+  "documentBlocks": [
     {
-      "token": "avatar-group-size-75",
-      "context": "Size"
+      "type": "purpose",
+      "content": "Avatar groups display a collection of avatars representing people or entities."
     },
     {
-      "token": "avatar-group-size-100",
-      "context": "Size"
+      "type": "guideline",
+      "content": "An avatar group displays a set of related avatars together. It’s typically used to represent a collection of people or entities."
     },
     {
-      "token": "avatar-group-size-200",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Avatar sizes scale exponentially, based on the Spectrum type scale. Avatar has preset sizes to flex across all surfaces and can also be customized to fit appropriately for your context."
     },
     {
-      "token": "avatar-group-size-300",
-      "context": "Size"
+      "type": "guideline",
+      "content": "An Avatar group can have an optional text label that clearly describes the group or number of users that it represents."
     },
     {
-      "token": "avatar-group-size-400",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Individual avatars inside Avatar group can be navigated using a keyboard. The keyboard focus state adds a focus ring around the avatar."
     },
     {
-      "token": "avatar-group-size-500",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Each individual avatar has a stroke applied to better show distinction between individual users in the group. By default, the outline color is a neutral gray, but the stroke color should be adjusted manually to match the background where the avatar group is placed."
     },
     {
-      "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)"
+      "type": "guideline",
+      "content": "When using a colored background the avatar stroke color should remain set as default for both light and dark themes."
+    }
+  ],
+  "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)"
@@ -106,61 +90,19 @@
       "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"
-    }
+    { "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
-  }
+  "accessibility": { "role": "group", "focusable": false }
 }

package/components/avatar.json

@@ -9,238 +9,124 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/avatar/"
   },
-  "options": {
-    "size": {
-      "type": "number",
-      "default": 500,
-      "values": [
-        {
-          "value": 50
-        },
-        {
-          "value": 75
-        },
-        {
-          "value": 100
-        },
-        {
-          "value": 200
-        },
-        {
-          "value": 300
-        },
-        {
-          "value": 400
-        },
-        {
-          "value": 500
-        },
-        {
-          "value": 600
-        },
-        {
-          "value": 700
-        },
-        {
-          "value": 800
-        },
-        {
-          "value": 900
-        },
-        {
-          "value": 1000
-        },
-        {
-          "value": 1100
-        },
-        {
-          "value": 1200
-        },
-        {
-          "value": 1300
-        },
-        {
-          "value": 1400
-        },
-        {
-          "value": 1500
-        }
-      ]
-    },
-    "image": {
-      "type": "string",
-      "default": "user image",
-      "values": [
-        {
-          "value": "user image"
-        },
-        {
-          "value": "gradient image"
-        },
-        {
-          "value": "gradient"
-        },
-        {
-          "value": "guest image"
-        },
-        {
-          "value": "initials"
-        }
-      ]
-    },
-    "isDisabled": {
-      "type": "boolean",
-      "default": false
-    },
-    "showStroke": {
-      "type": "boolean",
-      "default": false
-    }
-  },
-  "states": [
-    {
-      "name": "down",
-      "trigger": "interaction"
-    },
-    {
-      "name": "keyboard-focus",
-      "trigger": "interaction"
-    }
-  ],
-  "lifecycle": {
-    "introduced": "1.0.0-draft"
-  },
-  "tokenBindings": [
-    {
-      "token": "avatar-size-50",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-75",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-100",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-200",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-300",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-400",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-500",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-600",
-      "context": "Size"
-    },
-    {
-      "token": "avatar-size-700",
-      "context": "Size"
-    },
+  "documentBlocks": [
     {
-      "token": "avatar-size-800",
-      "context": "Size"
+      "type": "purpose",
+      "content": "An avatar is a thumbnail representation of an entity, such as a user or an organization."
     },
     {
-      "token": "avatar-size-900",
-      "context": "Size"
+      "type": "guideline",
+      "content": "An avatar in a disabled state shows that an avatar exists, but is not available or a user is not active in that circumstance. This can be used to maintain layout continuity and communicate that an avatar may become available or active later."
     },
     {
-      "token": "avatar-size-1000",
-      "context": "Size"
+      "type": "guideline",
+      "content": "When used as an individual Avatar, showStroke is false by default. When used in Avatar group, showStroke is true by default to create separation between the stacked group of Avatar components."
     },
     {
-      "token": "avatar-size-1100",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Avatar sizes scale exponentially, based on the Spectrum type scale. Avatar has preset sizes to flex across all surfaces and can also be customized to fit appropriately for your context."
     },
     {
-      "token": "avatar-size-1200",
-      "context": "Size"
+      "type": "guideline",
+      "content": "An avatar has multiple visual styles, depending on the user preference. These show up as branded gradient images, initials of the user’s name, as well as any image that a user uploads. For users who do not have Adobe accounts, they will default to the guest avatar."
     },
     {
-      "token": "avatar-size-1300",
-      "context": "Size"
+      "type": "guideline",
+      "content": "An avatar can be navigated using a keyboard. The keyboard focus state adds a blue ring to the avatar in focus."
     },
     {
-      "token": "avatar-size-1400",
-      "context": "Size"
+      "type": "guideline",
+      "content": "An avatar group displays a set of related avatars together. It’s typically used to represent a collection of people or entities."
     },
     {
-      "token": "avatar-size-1500",
-      "context": "Size"
+      "type": "guideline",
+      "content": "Use branded generic avatars when a user has not set their avatar image. These images are designed to be abstracted from all genders, locales, and cultures."
     },
     {
-      "token": "avatar-border-thickness",
-      "context": "Border"
+      "type": "guideline",
+      "content": "The initials avatar is designed to work with latin characters only and supports 1 or 2 characters that are programmatically identified by the first name and last name in a user’s account settings. For users with non-latin characters, their default avatar should be the gradient image style."
     },
     {
-      "token": "focus-indicator-thickness",
-      "context": "Focus indicator"
-    },
-    {
-      "token": "focus-indicator-gap",
-      "context": "Focus indicator"
-    },
-    {
-      "token": "avatar-gradient-stop-1",
-      "context": "0% "
-    },
-    {
-      "token": "static-[color]-400",
-      "context": "0% "
-    },
-    {
-      "token": "avatar-gradient-stop-2",
-      "context": "66% "
-    },
-    {
-      "token": "static-[color]-600",
-      "context": "66% "
-    },
-    {
-      "token": "avatar-gradient-stop-3",
-      "context": "100% "
-    },
-    {
-      "token": "static-[color]-800",
-      "context": "100% "
-    },
-    {
-      "token": "gradient-angle",
-      "context": "Top-left to bottom-right"
-    },
-    {
-      "token": "default-font-family",
-      "context": "Text (List view item)"
-    },
-    {
-      "token": "extra-bold-font-weight",
-      "context": "Text (List view item)"
-    },
-    {
-      "token": "default-font-style",
-      "context": "Text (List view item)"
+      "type": "guideline",
+      "content": "The guest avatar style is designed for users who may be interacting with Adobe products, but are not logged in or do not have an Adobe account."
+    }
+  ],
+  "options": {
+    "size": {
+      "type": "number",
+      "default": 500,
+      "values": [
+        { "value": 50 },
+        { "value": 75 },
+        { "value": 100 },
+        { "value": 200 },
+        { "value": 300 },
+        { "value": 400 },
+        { "value": 500 },
+        { "value": 600 },
+        { "value": 700 },
+        { "value": 800 },
+        { "value": 900 },
+        { "value": 1000 },
+        { "value": 1100 },
+        { "value": 1200 },
+        { "value": 1300 },
+        { "value": 1400 },
+        { "value": 1500 }
+      ]
     },
-    {
-      "token": "font-size-100",
-      "context": "Text (List view item)"
+    "image": {
+      "type": "string",
+      "default": "user image",
+      "values": [
+        { "value": "user image" },
+        { "value": "gradient image" },
+        { "value": "gradient" },
+        { "value": "guest image" },
+        { "value": "initials" }
+      ]
     },
-    {
-      "token": "line-height-100",
-      "context": "Text (List view item)"
-    }
+    "isDisabled": { "type": "boolean", "default": false },
+    "showStroke": { "type": "boolean", "default": false }
+  },
+  "states": [
+    { "name": "down", "trigger": "interaction" },
+    { "name": "keyboard-focus", "trigger": "interaction" }
+  ],
+  "lifecycle": { "introduced": "1.0.0-draft" },
+  "tokenBindings": [
+    { "token": "avatar-size-50", "context": "Size" },
+    { "token": "avatar-size-75", "context": "Size" },
+    { "token": "avatar-size-100", "context": "Size" },
+    { "token": "avatar-size-200", "context": "Size" },
+    { "token": "avatar-size-300", "context": "Size" },
+    { "token": "avatar-size-400", "context": "Size" },
+    { "token": "avatar-size-500", "context": "Size" },
+    { "token": "avatar-size-600", "context": "Size" },
+    { "token": "avatar-size-700", "context": "Size" },
+    { "token": "avatar-size-800", "context": "Size" },
+    { "token": "avatar-size-900", "context": "Size" },
+    { "token": "avatar-size-1000", "context": "Size" },
+    { "token": "avatar-size-1100", "context": "Size" },
+    { "token": "avatar-size-1200", "context": "Size" },
+    { "token": "avatar-size-1300", "context": "Size" },
+    { "token": "avatar-size-1400", "context": "Size" },
+    { "token": "avatar-size-1500", "context": "Size" },
+    { "token": "avatar-border-thickness", "context": "Border" },
+    { "token": "focus-indicator-thickness", "context": "Focus indicator" },
+    { "token": "focus-indicator-gap", "context": "Focus indicator" },
+    { "token": "avatar-gradient-stop-1", "context": "0% " },
+    { "token": "static-[color]-400", "context": "0% " },
+    { "token": "avatar-gradient-stop-2", "context": "66% " },
+    { "token": "static-[color]-600", "context": "66% " },
+    { "token": "avatar-gradient-stop-3", "context": "100% " },
+    { "token": "static-[color]-800", "context": "100% " },
+    { "token": "gradient-angle", "context": "Top-left to bottom-right" },
+    { "token": "default-font-family", "context": "Text (List view item)" },
+    { "token": "extra-bold-font-weight", "context": "Text (List view item)" },
+    { "token": "default-font-style", "context": "Text (List view item)" },
+    { "token": "font-size-100", "context": "Text (List view item)" },
+    { "token": "line-height-100", "context": "Text (List view item)" }
   ],
-  "accessibility": {
-    "focusable": false
-  }
+  "accessibility": { "focusable": false }
 }