AssetIcon docs + preview

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

@@ -0,0 +1,27 @@
+---
+slug: /asset-icon
+---
+
+# Asset icon
+
+<ComponentDescription componentName="AssetIcon" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="AssetIcon">
+  <AssetIcon
+    source={[
+      {
+        altText: "XLM",
+        image: "https://cryptologos.cc/logos/stellar-xlm-logo.svg?v=024",
+        imageSize: "80%",
+      },
+    ]}
+  />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="AssetIcon" relatedType={["AssetIconSource"]} />

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

@@ -0,0 +1,31 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const assetIconPreview: ComponentPreview = {
+  options: [
+    {
+      type: "select",
+      prop: "source",
+      customValue: [
+        {
+          altText: "XLM",
+          image: "https://cryptologos.cc/logos/stellar-xlm-logo.svg?v=024",
+          imageSize: "80%",
+        },
+        {
+          altText: "USDC",
+          image: "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=024",
+        },
+      ],
+      options: [
+        {
+          value: "",
+          label: "Single",
+        },
+        {
+          value: "pair",
+          label: "Pair",
+        },
+      ],
+    },
+  ],
+};

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

@@ -1,13 +1,17 @@
-import React from "react";
+import React, { Fragment } from "react";
 import SdsDocs from "@stellar/design-system/docs/components.json";
 import { Element } from "@site/src/components/Element";
 import { ParseSummary } from "@site/src/components/ParseSummary";
 import { ElementPropType } from "@site/src/components/ElementPropType";
 
 export const ComponentProps = ({
   componentName,
+  relatedType,
 }: {
   componentName: string;
+  // To associate custom types that are used in the component. For example,
+  // AssetIconSource in AssetIcon.
+  relatedType?: string[];
 }) => {
   const component = SdsDocs?.children?.find(
     (c) => c.name === `${componentName}Props` && c.variant === "declaration",
@@ -17,7 +21,11 @@ export const ComponentProps = ({
     throw Error(`Component "${componentName}" props not found.`);
   }
 
-  const props = component.children.map((p) => {
+  const relatedTypes = relatedType?.map((t) =>
+    SdsDocs?.children?.find((c) => c.name === t && c.variant === "declaration"),
+  );
+
+  const PropRow = ({ p }: { p: any }) => {
     const defaultVal = p.comment?.blockTags?.[0]?.content?.[0];
 
     return (
@@ -44,6 +52,23 @@ export const ComponentProps = ({
         </td>
       </tr>
     );
+  };
+
+  const props = component.children.map((p) => <PropRow p={p} />);
+
+  const relatedTypeProps = relatedTypes?.map((t) => {
+    return (
+      <Fragment key={`t-${t.id}`}>
+        <tr>
+          <td colSpan={5}>
+            <code>{t.name}</code>
+          </td>
+        </tr>
+        {t?.type?.declaration?.children?.map((t) => (
+          <PropRow p={t} />
+        ))}
+      </Fragment>
+    );
   });
 
   return (
@@ -58,8 +83,12 @@ export const ComponentProps = ({
             <th>Description</th>
           </tr>
         </thead>
-        <tbody>{props}</tbody>
+        <tbody>
+          {props}
+          {relatedTypeProps}
+        </tbody>
       </table>
+
       {component.comment?.summary ? (
         <p>
           <ParseSummary summary={component.comment.summary} />

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

@@ -12,6 +12,8 @@ export const ElementPropType = ({ type }: { type: any }) => {
       // TODO: we currently have only this type for functions, but it would be
       // nice to parse it properly
       return <code>{`() => void`}</code>;
+    case "array":
+      return <code>{`${type?.elementType?.name || ""}[]`}</code>;
     case "intrinsic":
     case "reference":
       return <code>{type.name}</code>;

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

@@ -6,6 +6,7 @@ import "./styles.css";
 // =============================================================================
 // Preview imports
 // =============================================================================
+import { assetIconPreview } from "@site/src/componentPreview/assetIconPreview";
 import { avatarPreview } from "@site/src/componentPreview/avatarPreview";
 import { badgePreview } from "@site/src/componentPreview/badgePreview";
 import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
@@ -23,6 +24,7 @@ import { titlePreview } from "@site/src/componentPreview/titlePreview";
 // Component previews
 // =============================================================================
 const previews: { [key: string]: ComponentPreview } = {
+  AssetIcon: assetIconPreview,
   Avatar: avatarPreview,
   Badge: badgePreview,
   Banner: bannerPreview,

@stellar/design-system/src/components/AssetIcon/index.tsx

@@ -1,17 +1,28 @@
 import "./styles.scss";
 
-type AssetIconSource = {
+/** */
+export type AssetIconSource = {
+  /** Image URL */
   image: string;
+  /** Image alt text */
   altText: string;
+  /** Custom size of the image inside the circle */
   imageSize?: string;
+  /** Custom background color */
   backgroundColor?: string;
 };
 
-type AssetIconProps = {
+/** */
+export interface AssetIconProps {
+  /** Asset source data */
   source: AssetIconSource[];
+  /** Asset border color */
   borderColor?: string;
-};
+}
 
+/**
+ * Asset image displayed in a circle from a URL source. The component accepts multiple sources to show currency pair, for example.
+ */
 export const AssetIcon: React.FC<AssetIconProps> = ({
   source,
   borderColor,