From 6767107c7367e0734dde06c96510481fb9ae3548 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Wed, 27 Sep 2023 16:02:05 -0400
Subject: [PATCH] Avatar docs + preview

---
 .../docs/components/elements/_category_.json  |  6 ++++++
 .../docs/components/elements/avatar.mdx       | 19 +++++++++++++++++++
 .../src/componentPreview/avatarPreview.tsx    |  5 +++++
 .../src/components/PreviewBlock/index.tsx     |  2 ++
 .../src/components/Avatar/index.tsx           |  9 +++++++--
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 @stellar/design-system-website/docs/components/elements/_category_.json
 create mode 100644 @stellar/design-system-website/docs/components/elements/avatar.mdx
 create mode 100644 @stellar/design-system-website/src/componentPreview/avatarPreview.tsx

diff --git a/@stellar/design-system-website/docs/components/elements/_category_.json b/@stellar/design-system-website/docs/components/elements/_category_.json
new file mode 100644
index 00000000..55441b99
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/elements/_category_.json
@@ -0,0 +1,6 @@
+{
+  "label": "Elements",
+  "link": {
+    "type": "generated-index"
+  }
+}
diff --git a/@stellar/design-system-website/docs/components/elements/avatar.mdx b/@stellar/design-system-website/docs/components/elements/avatar.mdx
new file mode 100644
index 00000000..a9fa4756
--- /dev/null
+++ b/@stellar/design-system-website/docs/components/elements/avatar.mdx
@@ -0,0 +1,19 @@
+---
+slug: /avatar
+---
+
+# Avatar
+
+<ComponentDescription componentName="Avatar" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Avatar">
+  <Avatar publicAddress="GD4XW236EFCESNO4RKGG5PWML2WNQIJS335XECBW4GRARXKE64VIMOLZ" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="Avatar" />
diff --git a/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx b/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx
new file mode 100644
index 00000000..7ada7139
--- /dev/null
+++ b/@stellar/design-system-website/src/componentPreview/avatarPreview.tsx
@@ -0,0 +1,5 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const avatarPreview: ComponentPreview = {
+  options: [],
+};
diff --git a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
index 48d4933b..861207e0 100644
--- a/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
+++ b/@stellar/design-system-website/src/components/PreviewBlock/index.tsx
@@ -14,6 +14,7 @@ import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { paragraphPreview } from "@site/src/componentPreview/paragraphPreview";
 import { titlePreview } from "@site/src/componentPreview/titlePreview";
 import { notificationPreview } from "@site/src/componentPreview/notificationPreview ";
+import { avatarPreview } from "@site/src/componentPreview/avatarPreview";
 
 // =============================================================================
 // Component previews
@@ -27,6 +28,7 @@ const previews: { [key: string]: ComponentPreview } = {
   Paragraph: paragraphPreview,
   Title: titlePreview,
   Notification: notificationPreview,
+  Avatar: avatarPreview,
 };
 
 type Theme = "sds-theme-light" | "sds-theme-dark";
diff --git a/@stellar/design-system/src/components/Avatar/index.tsx b/@stellar/design-system/src/components/Avatar/index.tsx
index 97013bc2..f4247a7c 100644
--- a/@stellar/design-system/src/components/Avatar/index.tsx
+++ b/@stellar/design-system/src/components/Avatar/index.tsx
@@ -1,10 +1,15 @@
 import { createStellarIdenticon } from "../../helpers/createStellarIdenticon";
 import "./styles.scss";
 
-type AvatarProps = {
+/** */
+export interface AvatarProps {
+  /** Public Stellar address */
   publicAddress: string;
-};
+}
 
+/**
+ * Unique identicon of public Stellar address. [We’re using stellar-identicon-js](https://github.com/Lobstrco/stellar-identicon-js).
+ */
 export const Avatar: React.FC<AvatarProps> = ({
   publicAddress,
 }: AvatarProps) => {