Avatar docs + preview

stellar · Sep 27, 2023 · 6767107 · 6767107
1 parent ee42785
commit 6767107
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 2 deletions.
diff --git a/@stellar/design-system-website/docs/components/elements/_category_.json 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
@@ -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
@@ -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
@@ -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
@@ -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) => {