@commercetools/nimbus-mcp 0.1.0 → 2.11.0

package/data/docs/routes/components-media-avatar.json

@@ -0,0 +1,427 @@
+{
+  "meta": {
+    "id": "Components-Avatar",
+    "title": "Avatar",
+    "exportName": "Avatar",
+    "description": "A small image or icon that identifies and personalizes the user within the interface.",
+    "lifecycleState": "Stable",
+    "order": 999,
+    "repoPath": "packages/nimbus/src/components/avatar/avatar.mdx",
+    "menu": [
+      "Components",
+      "Media",
+      "Avatar"
+    ],
+    "route": "components/media/avatar",
+    "tags": [
+      "component",
+      "avatar",
+      "user",
+      "profile",
+      "image"
+    ],
+    "toc": [
+      {
+        "value": "Overview",
+        "href": "#overview",
+        "depth": 2,
+        "numbering": [
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Resources",
+        "href": "#resources",
+        "depth": 3,
+        "numbering": [
+          1,
+          1,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Variables",
+        "href": "#variables",
+        "depth": 2,
+        "numbering": [
+          1,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Size",
+        "href": "#size",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          1
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Initials and images",
+        "href": "#initials-and-images",
+        "depth": 3,
+        "numbering": [
+          1,
+          2,
+          2
+        ],
+        "parent": "root"
+      },
+      {
+        "value": "Avatar initials",
+        "href": "#avatar-initials",
+        "depth": 4,
+        "numbering": [
+          1,
+          2,
+          2,
+          1
+        ],
+        "parent": "root"
+      }
+    ],
+    "figmaLink": "https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=346-2611&t=WljaKGkdJ1dZn3oM-4",
+    "layout": "app-frame",
+    "tabs": [
+      {
+        "key": "overview",
+        "title": "Overview",
+        "order": 0
+      },
+      {
+        "key": "dev",
+        "title": "Implementation",
+        "order": 3
+      },
+      {
+        "key": "a11y",
+        "title": "Accessibility",
+        "order": 4
+      }
+    ]
+  },
+  "mdx": "\n## Overview\n\nAvatar components can include images or the initials of the user’s first and\nlast name.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=346-2611&t=WljaKGkdJ1dZn3oM-4)\n\n## Variables\n\nGet familiar with the features.\n\n### Size\n\n**Medium** (40px)\n\nMost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" size=\"md\" />\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" size=\"md\" /> {/* Shows initials when no image */}\n  </Stack>\n)\n```\n\n**X-Small** (32px)\n\nUse small circle avatars in tighter areas like text fields and dropdown fields\nor when it is less important information.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" size=\"xs\" />\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" size=\"xs\" /> {/* Shows initials when no image */}\n  </Stack>\n)\n```\n\n**2x-Small** (24px)\n\nUse these in condensed areas like notifications or filters.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" size=\"2xs\" />\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" size=\"2xs\" /> {/* Shows initials when no image */}\n  </Stack>\n)\n```\n\n### Initials and images\n\n#### Avatar initials\n\nThe default and fallback for avatar graphics is to use initials. Default color\nshould use Primary, but is open to custom colors.\n\n```jsx live\nconst App = () => (\n  <Avatar firstName=\"Adam\" lastName=\"Vadam\" />\n)\n```\n",
+  "views": {
+    "overview": {
+      "mdx": "\n## Overview\n\nAvatar components can include images or the initials of the user’s first and\nlast name.\n\n### Resources\n\nDeep dive into implementation details and access the Nimbus design library.\n\n[Figma library](https://www.figma.com/design/AvtPX6g7OGGCRvNlatGOIY/NIMBUS-design-system?node-id=346-2611&t=WljaKGkdJ1dZn3oM-4)\n\n## Variables\n\nGet familiar with the features.\n\n### Size\n\n**Medium** (40px)\n\nMost commonly used in the upper right hand side of the page paired with a\ndrop-down menu.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" size=\"md\" />\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" size=\"md\" /> {/* Shows initials when no image */}\n  </Stack>\n)\n```\n\n**X-Small** (32px)\n\nUse small circle avatars in tighter areas like text fields and dropdown fields\nor when it is less important information.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" size=\"xs\" />\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" size=\"xs\" /> {/* Shows initials when no image */}\n  </Stack>\n)\n```\n\n**2x-Small** (24px)\n\nUse these in condensed areas like notifications or filters.\n\n```jsx live\nconst App = () => (\n  <Stack direction=\"horizontal\">\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" size=\"2xs\" />\n    <Avatar firstName=\"Adam\" lastName=\"Vadam\" size=\"2xs\" /> {/* Shows initials when no image */}\n  </Stack>\n)\n```\n\n### Initials and images\n\n#### Avatar initials\n\nThe default and fallback for avatar graphics is to use initials. Default color\nshould use Primary, but is open to custom colors.\n\n```jsx live\nconst App = () => (\n  <Avatar firstName=\"Adam\" lastName=\"Vadam\" />\n)\n```\n",
+      "toc": [
+        {
+          "value": "Overview",
+          "href": "#overview",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Variables",
+          "href": "#variables",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size",
+          "href": "#size",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Initials and images",
+          "href": "#initials-and-images",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Avatar initials",
+          "href": "#avatar-initials",
+          "depth": 4,
+          "numbering": [
+            1,
+            2,
+            2,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "a11y": {
+      "mdx": "\n## Accessibility\n\nAccessibility ensures that digital content and functionality are usable by\neveryone, including people with disabilities, by addressing visual, auditory,\ncognitive, and physical limitations.\n\n```jsx live\nconst App = () => (\n  <Avatar firstName=\"Adam\" lastName=\"Vadam\" src=\"https://thispersondoesnotexist.com/ \" />\n)\n```\n\n### Accessibility standards\n\n- **Non-text content:** Avatars must have a text alternative. Use the `alt`\n  attribute on the `<img>` tag (if the avatar is an image) or through `ARIA` if\n  the avatar is more complex. The alt text should describe the avatar's purpose\n  or what it represents (e.g., \"User profile picture,\" \"John Doe's avatar,\"\n  \"Company logo\"). If the avatar is purely decorative and doesn't convey any\n  meaningful information, the alt attribute should be empty (`alt=\"\"`).\n- **Info and relationships:** If the avatar is associated with other information\n  (e.g., a username, profile link), the relationship should be programmatically\n  determinable. This can be achieved using semantic `HTML` (e.g., placing the\n  avatar and username within a single element) or ARIA attributes (e.g.,\n  `aria-labelledby` or `aria-describedby`).\n- **Use of color:** Don't rely on color alone to convey information about the\n  avatar (e.g., using a colored border to indicate status). Any information\n  conveyed by color must also be available through other means.\n- **Color contrast:** If the avatar contains any text (which is less common),\n  that text must meet minimum contrast ratio requirements.\n- **Keyboard accessibility:** If the avatar is interactive (e.g., clicking it\n  opens a profile), it must be operable using the keyboard. Users should be able\n  to navigate to the avatar using the Tab key and activate it using the Enter or\n  Space key.\n- **Link purpose:** If the avatar is a link, its purpose should be clear from\n  the surrounding context or from the avatar's alt text. Avoid generic link text\n  like \"Click here.\"\n- **Focus visible:** If the avatar is interactive, it should have a visible\n  focus indicator when it receives keyboard focus.\n- **On focus:** If the avatar is interactive and its appearance changes on\n  focus, the change should not be disorienting or unexpected.\n- **Name, role, value:** Assistive technologies should be able to correctly\n  interpret the role of the avatar (e.g., `image`, `link`) and its name (from\n  the alt text).\n",
+      "toc": [
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility standards",
+          "href": "#accessibility-standards",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        }
+      ]
+    },
+    "dev": {
+      "mdx": "\n## Getting started\n\n### Import\n\n```tsx\nimport { Avatar, type AvatarProps } from \"@commercetools/nimbus\";\n```\n\n### Basic usage\n\nThe simplest implementation displays an avatar with initials derived from first\nand last names:\n\n```jsx live-dev\nconst App = () => (\n  <Avatar firstName=\"John\" lastName=\"Doe\" />\n)\n```\n\n## Usage examples\n\n### Size options\n\nThe `2xs`, `xs`, and `md` size variants are available to match your interface\ndensity:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Avatar firstName=\"John\" lastName=\"Doe\" size=\"2xs\" />\n    <Avatar firstName=\"John\" lastName=\"Doe\" size=\"xs\" />\n    <Avatar firstName=\"John\" lastName=\"Doe\" size=\"md\" />\n  </Stack>\n)\n```\n\n### Color palettes\n\nAvatars support different color palettes to convey semantic meaning or match\nyour design theme:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Avatar firstName=\"John\" lastName=\"Doe\" colorPalette=\"primary\" />\n    <Avatar firstName=\"Jane\" lastName=\"Smith\" colorPalette=\"positive\" />\n    <Avatar firstName=\"Alex\" lastName=\"Chen\" colorPalette=\"info\" />\n    <Avatar firstName=\"Maria\" lastName=\"Garcia\" colorPalette=\"critical\" />\n    <Avatar firstName=\"Sam\" lastName=\"Wilson\" colorPalette=\"cyan\" />\n  </Stack>\n)\n```\n\n### With image\n\nWhen a `src` prop is provided, the Avatar displays the image. If the image fails\nto load, it automatically falls back to initials:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Avatar\n      firstName=\"Jane\"\n      lastName=\"Smith\"\n      src=\"https://i.pravatar.cc/150?img=1\"\n      alt=\"Jane Smith's profile picture\"\n    />\n    <Avatar\n      firstName=\"Alex\"\n      lastName=\"Johnson\"\n      src=\"https://i.pravatar.cc/150?img=2\"\n      alt=\"Alex Johnson's profile picture\"\n    />\n  </Stack>\n)\n```\n\n### Initials fallback\n\nThe Avatar automatically extracts and displays initials from the provided first\nand last names. This serves as a fallback when no image is available or when the\nimage fails to load:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\">\n    <Avatar\n      firstName=\"Maria\"\n      lastName=\"Garcia\"\n      src=\"https://www.gravatar.com/avatar/thisWill404?s=200&d=404\" />\n    <Avatar\n      firstName=\"Chen\"\n      lastName=\"Wei\"\n      src=\"https://www.gravatar.com/avatar/thisWill404?s=200&d=404\" />\n    <Avatar\n      firstName=\"Aisha\"\n      lastName=\"Patel\"\n      src=\"https://www.gravatar.com/avatar/thisWill404?s=200&d=404\" />\n  </Stack>\n)\n```\n\n## Component requirements\n\n## Accessibility\n\nThe Avatar component handles most accessibility requirements internally,\nincluding automatic labeling with the user's full name.\n\n- **Labeling**: The component automatically generates an internationalized\n  accessible label from the `firstName` and `lastName` props. When providing an\n  image via the `src` prop, always include an `alt` attribute for screen\n  readers.\n- **Role**: Renders as a `<figure>` element with an `aria-label` that includes\n  the full name (e.g., \"Avatar image for John Doe\").\n\nIf your use case requires tracking and analytics for this component, it is good\npractice to add a **persistent**, **unique** id to the component:\n\n```tsx\nconst PERSISTENT_ID = \"example-avatar\";\n\nexport const Example = () => (\n  <Avatar id={PERSISTENT_ID} firstName=\"John\" lastName=\"Doe\" />\n);\n```\n\n#### Keyboard navigation\n\nAvatars are non-interactive elements and do not receive focus or support\nkeyboard interaction by default. If you need to make an avatar interactive\n(e.g., clickable), wrap it in a button or interactive element:\n\n```tsx\n<button onClick={handleClick} aria-label=\"View profile\">\n  <Avatar firstName=\"John\" lastName=\"Doe\" />\n</button>\n```\n\n## API reference\n\n<PropsTable id=\"Avatar\" />\n\n## Common patterns\n\n### User profile header\n\nCombine Avatar with text components to create a user profile header:\n\n```jsx live-dev\nconst App = () => (\n  <Stack direction=\"row\" gap=\"400\" alignItems=\"center\">\n    <Avatar\n      firstName=\"Sarah\"\n      lastName=\"Johnson\"\n      src=\"https://i.pravatar.cc/150?img=5\"\n      size=\"md\"\n    />\n    <Stack direction=\"column\" gap=\"100\">\n      <Text fontSize=\"md\" fontWeight=\"600\">Sarah Johnson</Text>\n      <Text fontSize=\"sm\" color=\"neutral.11\">Product Manager</Text>\n    </Stack>\n  </Stack>\n)\n```\n\n### Comment or message list\n\nDisplay avatars alongside user content in comments or messages:\n\n```jsx live-dev\nconst App = () => {\n  const comments = [\n    { id: 1, author: { firstName: \"Alex\", lastName: \"Chen\" }, text: \"Great work on this feature!\", time: \"2 hours ago\" },\n    { id: 2, author: { firstName: \"Maria\", lastName: \"Garcia\" }, text: \"I agree, this is really helpful.\", time: \"1 hour ago\" },\n    { id: 3, author: { firstName: \"James\", lastName: \"Wilson\" }, text: \"Looking forward to the next update.\", time: \"30 minutes ago\" },\n  ];\n\n  return (\n    <Stack direction=\"column\" gap=\"600\">\n      {comments.map((comment) => (\n        <Stack key={comment.id} direction=\"row\" gap=\"400\">\n          <Avatar\n            firstName={comment.author.firstName}\n            lastName={comment.author.lastName}\n            size=\"xs\"\n          />\n          <Stack direction=\"column\" gap=\"100\" flex=\"1\">\n            <Stack direction=\"row\" gap=\"200\" alignItems=\"baseline\">\n              <Text fontSize=\"sm\" fontWeight=\"600\">\n                {comment.author.firstName} {comment.author.lastName}\n              </Text>\n              <Text fontSize=\"xs\" color=\"neutral.11\">{comment.time}</Text>\n            </Stack>\n            <Text fontSize=\"sm\">{comment.text}</Text>\n          </Stack>\n        </Stack>\n      ))}\n    </Stack>\n  );\n}\n```\n\n## Testing your implementation\n\nThese examples demonstrate how to test your implementation when using Avatar\nwithin your application. As the component's internal functionality is already\ntested by Nimbus, these patterns help you verify your integration and\napplication-specific logic.\n\n### Basic rendering tests\n\nVerify the Avatar renders with expected elements and labels\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Avatar, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Avatar - Basic rendering\", () => {\n  it(\"renders avatar with initials\", () => {\n    render(\n      <NimbusProvider>\n        <Avatar firstName=\"John\" lastName=\"Doe\" />\n      </NimbusProvider>\n    );\n\n    expect(screen.getByRole(\"figure\")).toBeInTheDocument();\n    expect(screen.getByLabelText(/John Doe/i)).toBeInTheDocument();\n    expect(screen.getByText(\"JD\")).toBeInTheDocument();\n  });\n\n  it(\"renders avatar with image\", () => {\n    render(\n      <NimbusProvider>\n        <Avatar\n          firstName=\"Jane\"\n          lastName=\"Smith\"\n          src=\"https://example.com/avatar.jpg\"\n          alt=\"Jane Smith profile\"\n        />\n      </NimbusProvider>\n    );\n\n    const image = screen.getByAltText(\"Jane Smith profile\");\n    expect(image).toBeInTheDocument();\n    expect(image).toHaveAttribute(\"src\", \"https://example.com/avatar.jpg\");\n  });\n});\n```\n\n### Size variant tests\n\nTest different size options\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Avatar, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Avatar - Size variants\", () => {\n  it(\"renders different sizes correctly\", () => {\n    const { rerender } = render(\n      <NimbusProvider>\n        <Avatar firstName=\"John\" lastName=\"Doe\" size=\"2xs\" />\n      </NimbusProvider>\n    );\n\n    let avatar = screen.getByRole(\"figure\");\n    expect(avatar).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <Avatar firstName=\"John\" lastName=\"Doe\" size=\"xs\" />\n      </NimbusProvider>\n    );\n\n    avatar = screen.getByRole(\"figure\");\n    expect(avatar).toBeInTheDocument();\n\n    rerender(\n      <NimbusProvider>\n        <Avatar firstName=\"John\" lastName=\"Doe\" size=\"md\" />\n      </NimbusProvider>\n    );\n\n    avatar = screen.getByRole(\"figure\");\n    expect(avatar).toBeInTheDocument();\n  });\n});\n```\n\n### Accessibility tests\n\nVerify accessibility attributes and labeling\n\n```tsx\nimport { describe, it, expect } from \"vitest\";\nimport { render, screen } from \"@testing-library/react\";\nimport { Avatar, NimbusProvider } from \"@commercetools/nimbus\";\n\ndescribe(\"Avatar - Accessibility\", () => {\n  it(\"has correct aria-label with full name\", () => {\n    render(\n      <NimbusProvider>\n        <Avatar firstName=\"Maria\" lastName=\"Garcia\" />\n      </NimbusProvider>\n    );\n\n    const avatar = screen.getByLabelText(/Maria Garcia/i);\n    expect(avatar).toBeInTheDocument();\n    expect(avatar.tagName).toBe(\"FIGURE\");\n  });\n\n  it(\"applies custom id for tracking\", () => {\n    const PERSISTENT_ID = \"test-avatar-id\";\n\n    render(\n      <NimbusProvider>\n        <Avatar id={PERSISTENT_ID} firstName=\"John\" lastName=\"Doe\" />\n      </NimbusProvider>\n    );\n\n    const avatar = screen.getByRole(\"figure\");\n    expect(avatar).toHaveAttribute(\"id\", PERSISTENT_ID);\n  });\n});\n```\n\n\n## Resources\n\n- [Storybook](https://nimbus-storybook.vercel.app/?path=/docs/components-avatar--docs)\n",
+      "toc": [
+        {
+          "value": "Getting started",
+          "href": "#getting-started",
+          "depth": 2,
+          "numbering": [
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Import",
+          "href": "#import",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic usage",
+          "href": "#basic-usage",
+          "depth": 3,
+          "numbering": [
+            1,
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Usage examples",
+          "href": "#usage-examples",
+          "depth": 2,
+          "numbering": [
+            1,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size options",
+          "href": "#size-options",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Color palettes",
+          "href": "#color-palettes",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "With image",
+          "href": "#with-image",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Initials fallback",
+          "href": "#initials-fallback",
+          "depth": 3,
+          "numbering": [
+            1,
+            2,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Component requirements",
+          "href": "#component-requirements",
+          "depth": 2,
+          "numbering": [
+            1,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility",
+          "href": "#accessibility",
+          "depth": 2,
+          "numbering": [
+            1,
+            4
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Keyboard navigation",
+          "href": "#keyboard-navigation",
+          "depth": 4,
+          "numbering": [
+            1,
+            4,
+            1,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "API reference",
+          "href": "#api-reference",
+          "depth": 2,
+          "numbering": [
+            1,
+            5
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Common patterns",
+          "href": "#common-patterns",
+          "depth": 2,
+          "numbering": [
+            1,
+            6
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "User profile header",
+          "href": "#user-profile-header",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Comment or message list",
+          "href": "#comment-or-message-list",
+          "depth": 3,
+          "numbering": [
+            1,
+            6,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Testing your implementation",
+          "href": "#testing-your-implementation",
+          "depth": 2,
+          "numbering": [
+            1,
+            7
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Basic rendering tests",
+          "href": "#basic-rendering-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            1
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Size variant tests",
+          "href": "#size-variant-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            2
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Accessibility tests",
+          "href": "#accessibility-tests",
+          "depth": 3,
+          "numbering": [
+            1,
+            7,
+            3
+          ],
+          "parent": "root"
+        },
+        {
+          "value": "Resources",
+          "href": "#resources",
+          "depth": 2,
+          "numbering": [
+            1,
+            8
+          ],
+          "parent": "root"
+        }
+      ]
+    }
+  }
+}