@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

package/src/lib/Components/ListItem/ListItem.figma.tsx

@@ -0,0 +1,431 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import { ChevronRight, Placeholder, Settings } from '../../Symbols';
+import { Button } from '../Button';
+import { Checkbox } from '../Checkbox';
+import { Spot } from '../Spot';
+import { Switch } from '../Switch/Switch';
+import { Tag } from '../Tag';
+import { Trend } from '../Trend';
+import {
+  ListItem,
+  ListItemContent,
+  ListItemContentRow,
+  ListItemDescription,
+  ListItemLeading,
+  ListItemTitle,
+  ListItemTrailing,
+} from './ListItem';
+
+const commonProps = {
+  titleArea: figma.boolean('show-title-tag', {
+    true: (
+      <ListItemContentRow>
+        <ListItemTitle>Title</ListItemTitle>
+        <Tag label='Label' size='sm' appearance='base' />
+      </ListItemContentRow>
+    ),
+    false: <ListItemTitle>Title</ListItemTitle>,
+  }),
+  descriptionArea: figma.enum('density', {
+    compact: undefined,
+    expanded: figma.boolean('show-description', {
+      true: figma.boolean('show-description-tag', {
+        true: figma.boolean('show-description-network', {
+          true: (
+            <ListItemContentRow>
+              <ListItemDescription>Description</ListItemDescription>
+              <Tag label='Label' size='sm' appearance='gray' />
+              <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />
+            </ListItemContentRow>
+          ),
+          false: (
+            <ListItemContentRow>
+              <ListItemDescription>Description</ListItemDescription>
+              <Tag label='Label' size='sm' appearance='gray' />
+            </ListItemContentRow>
+          ),
+        }),
+        false: figma.boolean('show-description-network', {
+          true: (
+            <ListItemContentRow>
+              <ListItemDescription>Description</ListItemDescription>
+              <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />
+            </ListItemContentRow>
+          ),
+          false: <ListItemDescription>Description</ListItemDescription>,
+        }),
+      }),
+      false: figma.boolean('show-description-tag', {
+        true: figma.boolean('show-description-network', {
+          true: (
+            <ListItemContentRow>
+              <Tag label='Label' size='sm' appearance='gray' />
+              <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />
+            </ListItemContentRow>
+          ),
+          false: <Tag label='Label' size='sm' appearance='gray' />,
+        }),
+        false: figma.boolean('show-description-network', {
+          true: <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />,
+          false: undefined,
+        }),
+      }),
+    }),
+  }),
+  leadingContent: figma.enum('leading-content', {
+    'no-icon': undefined,
+    coin: figma.enum('density', {
+      compact: <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />,
+      expanded: <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />,
+    }),
+    network: figma.enum('density', {
+      compact: <CryptoIcon ledgerId='ethereum' ticker='ETH' size={24} />,
+      expanded: <CryptoIcon ledgerId='ethereum' ticker='ETH' size={48} />,
+    }),
+    flag: figma.enum('density', {
+      compact: <CryptoIcon ledgerId='united-states' ticker='USD' size={24} />,
+      expanded: <CryptoIcon ledgerId='united-states' ticker='USD' size={48} />,
+    }),
+    spot: <Spot size={48} appearance='icon' icon={Settings} />,
+    'interface-icon': <Placeholder size={24} />,
+  }),
+  checkbox: figma.boolean('show-checkbox', {
+    true: <Checkbox checked={false} onCheckedChange={() => {}} />,
+    false: undefined,
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  density: figma.enum('density', {
+    compact: 'compact',
+    expanded: 'expanded',
+  }),
+};
+
+// —— trailing-content: none ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'none' },
+    props: {
+      ...commonProps,
+      chevron: figma.boolean('show-chevron', {
+        true: (
+          <ListItemTrailing>
+            <ChevronRight size={24} />
+          </ListItemTrailing>
+        ),
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        {props.chevron}
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: value (without subvalue) ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'value', 'show-subvalue': false },
+    props: {
+      ...commonProps,
+      value: figma.string('value'),
+      chevron: figma.boolean('show-chevron', {
+        true: <ChevronRight size={24} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <ListItemTitle>{props.value}</ListItemTitle>
+          {props.chevron}
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: value (with subvalue) ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'value', 'show-subvalue': true },
+    props: {
+      ...commonProps,
+      value: figma.string('value'),
+      subvalue: figma.string('subvalue'),
+      chevron: figma.boolean('show-chevron', {
+        true: <ChevronRight size={24} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <ListItemContent>
+            <ListItemTitle>{props.value}</ListItemTitle>
+            <ListItemDescription>{props.subvalue}</ListItemDescription>
+          </ListItemContent>
+          {props.chevron}
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: icon ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'icon' },
+    props: {
+      ...commonProps,
+      chevron: figma.boolean('show-chevron', {
+        true: <ChevronRight size={24} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <Placeholder size={24} />
+          {props.chevron}
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: tag ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'tag' },
+    props: {
+      ...commonProps,
+      chevron: figma.boolean('show-chevron', {
+        true: <ChevronRight size={24} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <Tag label='Label' appearance='base' size='sm' />
+          {props.chevron}
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: toggle ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Switch } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'toggle' },
+    props: {
+      ...commonProps,
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <Switch checked={false} onCheckedChange={() => {}} />
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: value+trend ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder, ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'value+trend' },
+    props: {
+      ...commonProps,
+      value: figma.string('value'),
+      chevron: figma.boolean('show-chevron', {
+        true: <ChevronRight size={24} />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <ListItemContent
+            style={{ flexDirection: 'row', alignItems: 'center', gap: 's4' }}
+          >
+            <ListItemTitle>{props.value}</ListItemTitle>
+            <Trend value={5.25} size='sm' />
+          </ListItemContent>
+          {props.chevron}
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);
+
+// —— trailing-content: button ——
+figma.connect(
+  ListItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2255%3A4155',
+  {
+    imports: [
+      "import { ListItem, ListItemLeading, ListItemContent, ListItemContentRow, ListItemTitle, ListItemDescription, ListItemTrailing } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Spot } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Settings, Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import { Checkbox } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Button } from '@ledgerhq/lumen-ui-rnative'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    variant: { 'trailing-content': 'button' },
+    props: {
+      ...commonProps,
+    },
+    example: (props) => (
+      <ListItem disabled={props.disabled} density={props.density}>
+        <ListItemLeading>
+          {props.checkbox}
+          {props.leadingContent}
+          <ListItemContent>
+            {props.titleArea}
+            {props.descriptionArea}
+          </ListItemContent>
+        </ListItemLeading>
+        <ListItemTrailing>
+          <Button appearance='transparent' size='sm' onPress={() => {}}>
+            Label
+          </Button>
+        </ListItemTrailing>
+      </ListItem>
+    ),
+  },
+);

package/src/lib/Components/ListItem/ListItem.mdx

@@ -13,11 +13,7 @@ import {
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/ListItem' of={ListItemStories} />
 
@@ -443,131 +439,6 @@ import { ChevronRight } from '@ledgerhq/lumen-ui-rnative/symbols';
 </ListItem>
 ```
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the ListItem component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the composite pattern correctly'
-      description='ListItemContent should be nested inside ListItemLeading to group visual and text content together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ListItem>
-  <ListItemLeading>
-    <Spot appearance='icon' icon={Settings} />
-    <ListItemContent>
-      <ListItemTitle>Settings</ListItemTitle>
-      <ListItemDescription>Manage preferences</ListItemDescription>
-    </ListItemContent>
-  </ListItemLeading>
-  <ListItemTrailing>
-    <ChevronRight size={24} />
-  </ListItemTrailing>
-</ListItem>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place ListItemContent outside ListItemLeading"
-      description='ListItemContent must be inside ListItemLeading for proper layout'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - ListItemContent outside ListItemLeading
-<ListItem>
-  <ListItemLeading>
-    <Spot appearance='icon' icon={Settings} />
-  </ListItemLeading>
-  <ListItemContent>
-    <ListItemTitle>Settings</ListItemTitle>
-  </ListItemContent>
-</ListItem>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use ListItemContentRow for inline Tags'
-      description='Wrap title or description with a Tag inside ListItemContentRow for proper layout'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ListItemContent>
-  <ListItemContentRow>
-    <ListItemTitle>New Item</ListItemTitle>
-    <Tag label='New' appearance='base' size='sm' />
-  </ListItemContentRow>
-  <ListItemDescription>Recently added</ListItemDescription>
-</ListItemContent>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't place Tags outside ListItemContentRow"
-      description='Tags placed directly inside ListItemContent break the layout'
-    >
-
-{/* prettier-ignore */}
-```tsx
-// DON'T - Tag outside ListItemContentRow
-<ListItemContent>
-  <ListItemTitle>New Item</ListItemTitle>
-  <ListItemDescription>Recently added</ListItemDescription>
-  <Tag label='New' appearance='base' size='sm' />
-</ListItemContent>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use concise text for title and description'
-      description='Keep title and description short since they truncate to one line'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ListItemContent>
-  <ListItemTitle>Account Settings</ListItemTitle>
-  <ListItemDescription>Manage preferences</ListItemDescription>
-</ListItemContent>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use long text"
-      description='Title and description truncate to one line'
-    >
-
-{/* prettier-ignore */}
-```tsx
-<ListItemContent>
-  <ListItemTitle>
-    This is a very long title that will be truncated
-  </ListItemTitle>
-  <ListItemDescription>
-    This is also a very long description that will be truncated
-  </ListItemDescription>
-</ListItemContent>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/MediaBanner/MediaBanner.figma.tsx

@@ -0,0 +1,32 @@
+import figma from '@figma/code-connect';
+import {
+  MediaBanner,
+  MediaBannerDescription,
+  MediaBannerTitle,
+} from './MediaBanner';
+
+figma.connect(
+  MediaBanner,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=18788-44622',
+  {
+    imports: [
+      "import { MediaBanner, MediaBannerTitle, MediaBannerDescription } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      onClose: figma.boolean('show-close', {
+        true: () => {},
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <MediaBanner
+        imageUrl='/image.jpg'
+        onClose={props.onClose}
+        closeAccessibilityLabel='Close banner'
+      >
+        <MediaBannerTitle>Title</MediaBannerTitle>
+        <MediaBannerDescription>Description</MediaBannerDescription>
+      </MediaBanner>
+    ),
+  },
+);

package/src/lib/Components/MediaBanner/MediaBanner.mdx

@@ -7,8 +7,6 @@ import {
 } from './MediaBanner';
 import { Box } from '../Utility';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/MediaBanner' of={MediaBannerStories} />
 
@@ -144,7 +142,6 @@ Use the `lx` prop for layout adjustments like margins or positioning:
 </MediaBanner>
 ```
 
-<CommonRulesDoAndDont />
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/MediaButton/MediaButton.figma.tsx

@@ -0,0 +1,60 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import { Placeholder } from '../../Symbols';
+import { MediaButton } from './MediaButton';
+
+figma.connect(
+  MediaButton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6389-45680',
+  {
+    imports: [
+      "import { MediaButton } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+      "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+    ],
+    props: {
+      appearance: figma.enum('appearance', {
+        plain: 'gray',
+        transparent: 'transparent',
+        'no-background': 'no-background',
+      }),
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+      }),
+      leadingContent: figma.enum('leading-content', {
+        'interface-icon': figma.enum('size', {
+          sm: <Placeholder size={24} />,
+          md: <Placeholder size={32} />,
+        }),
+        coin: figma.enum('size', {
+          sm: <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />,
+          md: <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />,
+        }),
+        stock: figma.enum('size', {
+          sm: <CryptoIcon size={24} ledgerId='walmart' ticker='WMT' />,
+          md: <CryptoIcon size={32} ledgerId='walmart' ticker='WMT' />,
+        }),
+        none: undefined,
+      }),
+      leadingContentShape: figma.enum('leading-content', {
+        'interface-icon': 'flat',
+        coin: 'rounded',
+        stock: 'rounded',
+        none: 'flat',
+      }),
+      children: figma.string('label'),
+    },
+    example: (props) => (
+      <MediaButton
+        appearance={props.appearance}
+        size={props.size}
+        leadingContent={props.leadingContent}
+        leadingContentShape={props.leadingContentShape}
+        onPress={() => {}}
+      >
+        {props.children}
+      </MediaButton>
+    ),
+  },
+);