feat(FolderIcon): add new component

packages/react/src/components/FolderIcon/FolderIcon.api.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/blocks';
+import LinkTo from '@storybook/addon-links/react';
+import { TableInterface } from '~storybook/components/TableInterface';
+
+<Meta title="Components API/FolderIcon" />
+
+# FolderIcon API
+
+```js
+import { FolderIcon } from '@esfront/react';
+```
+
+## Component name
+
+The name `ESFolderIcon` can be used when providing default props or style overrides in the theme.
+
+## Props
+
+<TableInterface variant="props" name="FolderIconProps" />
+
+<br />
+
+## CSS
+
+<TableInterface variant="css" name="FolderIconClasses" />
+
+<br />
+
+## Demos
+
+<ul>
+  <li>
+    <LinkTo kind="components-FolderIcon" story="demo">
+      <code>FolderIcon</code>
+    </LinkTo>
+  </li>
+</ul>

packages/react/src/components/FolderIcon/FolderIcon.classes.ts

@@ -0,0 +1,31 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type FolderIconClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+
+  filled: string;
+
+  variantOutlined: string;
+  variantContained: string;
+  variantColored: string;
+  variantDefault: string;
+
+  /** Styles applied to the icon element. */
+  icon: string;
+};
+export type FolderIconClassKey = keyof FolderIconClasses;
+
+export function getFolderIconUtilityClass(slot: string): string {
+  return generateUtilityClass('ESFolderIcon', slot);
+}
+
+export const folderIconClasses: FolderIconClasses = generateUtilityClasses('ESFolderIcon', [
+  'root',
+  'filled',
+  'variantOutlined',
+  'variantContained',
+  'variantColored',
+  'variantDefault',
+  'icon',
+]);

packages/react/src/components/FolderIcon/FolderIcon.stories.tsx

@@ -0,0 +1,98 @@
+import { ComponentProps } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react';
+
+import { FolderIcon } from './';
+
+type Args = ComponentProps<typeof FolderIcon>;
+
+const meta: Meta<Args> = {
+  tags: ['autodocs'],
+  component: FolderIcon,
+  parameters: {
+    references: ['FolderIcon'],
+  },
+  argTypes: {
+    color: {
+      control: { type: 'text' },
+    },
+    variant: {
+      options: ['outline', 'contained', 'default', 'colored'],
+      control: { type: 'select' },
+    },
+    className: {
+      table: {
+        disable: true,
+      },
+    },
+    classes: {
+      table: {
+        disable: true,
+      },
+    },
+    sx: {
+      table: {
+        disable: true,
+      },
+    },
+    icon: {
+      table: {
+        disable: true,
+      },
+    },
+    SvgIconProps: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    variant: 'default',
+    size: '500',
+    filled: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<Args>;
+
+export const Demo: Story = {
+  render: (args) => {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+          padding: '10px',
+        }}
+      >
+        <FolderIcon color={args.color} filled={args.filled} size={args.size} variant={args.variant} />
+      </div>
+    );
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    return (
+      <div
+        style={{
+          paddingTop: '20px',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '16px',
+        }}
+      >
+        <FolderIcon filled size="800" />
+        <FolderIcon filled size="700" />
+        <FolderIcon filled size="600" />
+        <FolderIcon filled />
+        <FolderIcon filled size="400" />
+        <FolderIcon filled size="300" />
+        <FolderIcon filled size="200" />
+        <FolderIcon filled size="100" />
+      </div>
+    );
+  },
+};