docs: name avatar properly

dhis2 · Jan 3, 2024 · 631b8f6 · 631b8f6
1 parent 4cd1944
commit 631b8f6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/docs/docs/components/alertbar.md b/docs/docs/components/alertbar.md
@@ -180,9 +180,9 @@ As you can see with all the demo's above, we've used the `AlertStack` component
 To use the `AlertStack` component, you can simply wrap your `AlertBar` component in the `AlertStack` component. The `AlertStack` component will then take care of the positioning.
 
 ```jsx
-import { AlertStack, AlertBar } from '@dhis2/ui'
+import { AlertStack, AlertBar } from '@dhis2/ui';
 
-;<AlertStack>
+<AlertStack>
     <AlertBar>...</AlertBar>
     <AlertBar>...</AlertBar>
     <AlertBar>...</AlertBar>

diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md
@@ -1,5 +1,6 @@
 ---
-title: Avatar
+title: User Avatar
+id: avatar
 ---
 
 import { Demo } from '@site/src/components/DemoComponent.jsx'
@@ -8,9 +9,9 @@ import { UserAvatar } from '@dhis2/ui'
 
 import API from '../../../components/user-avatar/API.md'
 
-# Avatar
+# User Avatar
 
-An avatar is a visual icon that represents a user.
+A User Avatar is a visual icon that represents a user.
 
 <Demo>
     <UserAvatar name="Karimbe Olefeme"/>
@@ -48,6 +49,16 @@ An avatar is a visual icon that represents a user.
 
 Avatars are available in different sizes. Use the size that works best for the space available and the context.
 
+The Demo above lists the different sizes available. The related JSX is:
+
+```jsx
+<UserAvatar extrasmall name="Example Person"/>
+<UserAvatar small name="Example Person"/>
+<UserAvatar medium name="Example Person"/>
+<UserAvatar large name="Example Person"/>
+<UserAvatar extralarge name="Example Person"/>
+```
+
 ## API Reference
 
 <API />

diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -42,7 +42,6 @@ const sidebars = {
         {
             Components: [
                 'components/alertbar',
-                'components/avatar',
                 'components/button',
                 'components/card',
                 'components/calendar',
@@ -68,6 +67,7 @@ const sidebars = {
                 'components/tag',
                 'components/tooltip',
                 'components/transfer',
+                'components/avatar',
             ],
         },
         {