Add AssetIcon props documentation and Storybook story

packages/components/asset/README.mdx

@@ -5,7 +5,7 @@ status: 'stable'
 slug: /components/asset/
 github: 'https://github.com/contentful/forma-36/tree/main/packages/components/asset'
 storybook: 'https://f36-storybook.contentful.com/?path=/story/components-asset--basic'
-typescript: ./src/Asset.tsx
+typescript: ./src/Asset.tsx,./src/AssetIcon/AssetIcon.tsx
 ---
 
 Represent an asset visually without showing the actual asset.
@@ -15,9 +15,9 @@ Useful in a file selector, a drag-n-drop component or in lists.
 ## Import
 
 ```js static=true
-import { Asset } from '@contentful/f36-components';
+import { Asset, AssetIcon } from '@contentful/f36-components';
 // or
-import { Asset } from '@contentful/f36-asset';
+import { Asset, AssetIcon } from '@contentful/f36-asset';
 ```
 
 ## Examples
@@ -44,6 +44,20 @@ If asset `status` is set to `archived`, an image icon is displayed instead of th
 
 ```
 
+### AssetIcon
+
+`AssetIcon` renders only the icon that represents an asset's type. It can be used independently from the `Asset` component.
+
+```jsx file=examples/AssetIconExample.tsx
+
+```
+
 ## Props (API reference)
 
+### Asset
+
 <PropsTable of="Asset" />
+
+### AssetIcon
+
+<PropsTable of="AssetIcon" />

packages/components/asset/examples/AssetIconExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Flex } from '@contentful/f36-core';
+import { AssetIcon } from '@contentful/f36-asset';
+
+export default function AssetIconExample() {
+  return (
+    <Flex gap="spacingM" flexWrap="wrap">
+      <AssetIcon type="archive" />
+      <AssetIcon type="audio" />
+      <AssetIcon type="code" />
+      <AssetIcon type="image" />
+      <AssetIcon type="markup" />
+      <AssetIcon type="pdf" />
+      <AssetIcon type="plaintext" />
+      <AssetIcon type="presentation" />
+      <AssetIcon type="richtext" />
+      <AssetIcon type="spreadsheet" />
+      <AssetIcon type="video" />
+    </Flex>
+  );
+}

packages/components/asset/src/AssetIcon/AssetIcon.tsx

@@ -18,8 +18,7 @@ import type { AssetType } from '../types';
 import { cx } from '@emotion/css';
 import { getAssetIconStyles } from './AssetIcon.styles';
 
-export interface AssetIconProps
-  extends Omit<GeneratedIconProps, 'illustration' | 'ref'> {
+export interface AssetIconProps extends GeneratedIconProps {
   type?: AssetType;
 }
 

packages/components/asset/stories/AssetIcon.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Flex } from '@contentful/f36-core';
+import { Text } from '@contentful/f36-typography';
+import { AssetIcon } from '../src/AssetIcon/AssetIcon';
+import { types } from '../src/types';
+
+import type { AssetIconProps } from '../src/AssetIcon/AssetIcon';
+
+export default {
+  argTypes: {
+    className: { control: { disable: true } },
+    testId: { control: { disable: true } },
+    type: {
+      control: 'select',
+      options: Object.keys(types),
+    },
+  },
+  args: {
+    type: 'image',
+  },
+  component: AssetIcon,
+  parameters: {
+    propTypes: AssetIcon['__docgenInfo'],
+  },
+  title: 'Components/Asset/AssetIcon',
+} as Meta;
+
+export const Basic: StoryObj<AssetIconProps> = {
+  render: (args) => {
+    return <AssetIcon {...args} />;
+  },
+};
+
+export const Overview = () => (
+  <Flex gap="spacingM" flexWrap="wrap">
+    {Object.keys(types).map((type) => (
+      <Flex key={type} flexDirection="column" alignItems="center" gap="spacingXs">
+        <AssetIcon type={type as AssetIconProps['type']} />
+        <Text>{type}</Text>
+      </Flex>
+    ))}
+  </Flex>
+);