V3 Asset, Avatar, and Profile

@stellar/design-system-website/docs/components/elements/asset.mdx

@@ -0,0 +1,35 @@
+---
+slug: /asset
+description: "Asset or asset pair displayed in a circle."
+---
+
+# Asset
+
+<ComponentDescription componentName="Asset" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="Asset">
+  <Asset
+    variant="single"
+    size="sm"
+    sourceOne={{
+      image: "https://cryptologos.cc/logos/stellar-xlm-logo.svg?v=024",
+      altText: "XLM",
+    }}
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps
+  componentName="Asset"
+  relatedType={[
+    "AssetBaseProps",
+    "SingleAssetProps",
+    "MultiAssetProps",
+    "AssetSource",
+  ]}
+/>

@stellar/design-system-website/docs/components/elements/avatar.mdx

@@ -1,6 +1,6 @@
 ---
 slug: /avatar
-description: "Identicon as an avatar."
+description: "Avatar as an identicon, user initials, or a profile icon."
 ---
 
 # Avatar
@@ -11,10 +11,17 @@ description: "Identicon as an avatar."
 
 ```tsx live
 <PreviewBlock componentName="Avatar">
-  <Avatar publicAddress="GD4XW236EFCESNO4RKGG5PWML2WNQIJS335XECBW4GRARXKE64VIMOLZ" />
+  <Avatar size="sm" />
 </PreviewBlock>
 ```
 
 ## Props
 
-<ComponentProps componentName="Avatar" />
+<ComponentProps
+  componentName="Avatar"
+  relatedType={[
+    "AvatarBaseProps",
+    "AvatarStellarAddressProps",
+    "AvatarUserNameProps",
+  ]}
+/>

@stellar/design-system-website/docs/components/profile/profile.mdx

@@ -13,7 +13,7 @@ description: "Avatar with Stellar address."
 <PreviewBlock componentName="Profile">
   <Profile
     publicAddress="GAVL6PM6TDJ7FBRCRL6GJ5WO2TWSH6ZRNU2HOARQ4RYMDUGSW7XWS57G"
-    size="md"
+    size="sm"
   />
 </PreviewBlock>
 ```

@stellar/design-system-website/src/componentPreview/assetPreview.tsx

@@ -0,0 +1,61 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+const updateSourceTwo = {
+  prop: "sourceTwo",
+  value: {
+    altText: "USDC",
+    image: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=024",
+  },
+};
+
+export const assetPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "single",
+          label: "Single",
+          updateRelated: {
+            prop: "sourceTwo",
+            value: undefined,
+          },
+        },
+        {
+          value: "swap",
+          label: "Swap",
+          updateRelated: updateSourceTwo,
+        },
+        {
+          value: "pair",
+          label: "Pair",
+          updateRelated: updateSourceTwo,
+        },
+        {
+          value: "platform",
+          label: "Platform",
+          updateRelated: updateSourceTwo,
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/componentPreview/avatarPreview.tsx

@@ -1,5 +1,60 @@
 import { ComponentPreview } from "@site/src/components/PreviewBlock";
 
 export const avatarPreview: ComponentPreview = {
-  options: [],
+  options: [
+    {
+      type: "select",
+      prop: "size",
+      options: [
+        {
+          value: "sm",
+          label: "SM",
+        },
+        {
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "publicAddress",
+      options: [
+        {
+          value: "",
+          label: "No public address",
+        },
+        {
+          value: "GD4XW236EFCESNO4RKGG5PWML2WNQIJS335XECBW4GRARXKE64VIMOLZ",
+          label: "Public address",
+          updateRelated: {
+            prop: "userName",
+            value: undefined,
+          },
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "userName",
+      options: [
+        {
+          value: "",
+          label: "No user name",
+        },
+        {
+          value: "User Name",
+          label: "User name",
+          updateRelated: {
+            prop: "publicAddress",
+            value: undefined,
+          },
+        },
+      ],
+    },
+  ],
 };

@stellar/design-system-website/src/componentPreview/profilePreview.tsx

@@ -6,17 +6,17 @@ export const profilePreview: ComponentPreview = {
       type: "select",
       prop: "size",
       options: [
-        {
-          value: "md",
-          label: "MD",
-        },
         {
           value: "sm",
           label: "SM",
         },
         {
-          value: "xs",
-          label: "XS",
+          value: "md",
+          label: "MD",
+        },
+        {
+          value: "lg",
+          label: "LG",
         },
       ],
     },

@stellar/design-system-website/src/components/ComponentProps/index.tsx

@@ -10,7 +10,7 @@ export const ComponentProps = ({
 }: {
   componentName: string;
   // To associate custom types that are used in the component. For example,
-  // AssetIconSource in AssetIcon.
+  // AssetSource in Asset.
   relatedType?: string[];
 }) => {
   const component = SdsDocs?.children?.find(
@@ -28,6 +28,16 @@ export const ComponentProps = ({
   const PropRow = ({ p }: { p: any }) => {
     const defaultVal = p.comment?.blockTags?.[0]?.content?.[0];
 
+    // Don't show row that is optional and undefined
+    // (used in discriminated union types)
+    if (
+      p?.flags?.isOptional &&
+      p.type.type === "intrinsic" &&
+      p.type.name === "undefined"
+    ) {
+      return null;
+    }
+
     return (
       <tr key={p.id}>
         <td>
@@ -54,7 +64,7 @@ export const ComponentProps = ({
     );
   };
 
-  const props = component.children.map((p) => <PropRow p={p} />);
+  const props = component?.children?.map((p) => <PropRow p={p} />);
 
   const relatedTypeProps = relatedTypes?.map((t) => {
     const props = t.children || t?.type?.declaration?.children;

@stellar/design-system-website/src/components/ElementPropType.tsx

@@ -35,6 +35,8 @@ export const ElementPropType = ({ type }: { type: any }) => {
       return <code>{`() => void`}</code>;
     case "array":
       return <code>{`${type?.elementType?.name || ""}[]`}</code>;
+    case "literal":
+      return <code>{type.value}</code>;
     case "intrinsic":
     case "reference":
       return <code>{type.name}</code>;