feat: TET-905 add FileIcon component

src/components/FileIcon/FileIcon.props.ts

@@ -0,0 +1,20 @@
+import { BaseProps } from '@/types';
+
+export type IconType =
+  | 'Sketch'
+  | 'Photoshop'
+  | 'Excel'
+  | 'Word'
+  | 'Pdf'
+  | 'Spreadsheet'
+  | 'Document'
+  | 'File'
+  | 'Archive'
+  | 'Figma';
+export type Size = 'Large' | 'Medium';
+
+export type FileIconProps = {
+  iconType: IconType;
+  size?: Size;
+  custom?: BaseProps;
+};

src/components/FileIcon/FileIcon.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { FileIcon } from './FileIcon';
+
+import { FileIconDocs } from '@/docs-components/FileIconDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  title: 'File Icon',
+  component: FileIcon,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      page: () => (
+        <TetDocs docs="">
+          <FileIconDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof FileIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    iconType: 'Archive',
+    size: 'Large',
+  },
+};

src/components/FileIcon/FileIcon.styles.ts

@@ -0,0 +1,9 @@
+import { BaseProps } from '@/types';
+
+export type FileIconConfig = BaseProps;
+
+export const defaultConfig = {} satisfies FileIconConfig;
+
+export const fileIconStyles = {
+  defaultConfig,
+};

src/components/FileIcon/FileIcon.test.tsx

@@ -0,0 +1,24 @@
+import { FileIcon } from './FileIcon';
+
+import { customPropTester } from '@/tests/customPropTester';
+import { render } from '@/tests/render';
+
+const getFileIcon = (jsx: JSX.Element) => {
+  const { getByTestId } = render(jsx);
+
+  return getByTestId('file-icon');
+};
+
+describe('FileIcon', () => {
+  customPropTester(<FileIcon iconType="Photoshop" />, {
+    containerId: 'file-icon',
+    props: {
+      size: ['Large', 'Medium'],
+    },
+  });
+
+  it('should render the file icon', () => {
+    const fileIcon = getFileIcon(<FileIcon iconType="Photoshop" />);
+    expect(fileIcon).toBeInTheDocument();
+  });
+});

src/components/FileIcon/FileIcon.tsx

@@ -0,0 +1,23 @@
+import { useMemo, type FC } from 'react';
+
+import { FileIconProps } from './FileIcon.props';
+import { stylesBuilder } from './stylesBuilder';
+import { renderProperIcon } from './utils';
+
+import { tet } from '@/tetrisly';
+import type { MarginProps } from '@/types';
+
+export const FileIcon: FC<FileIconProps & MarginProps> = ({
+  iconType,
+  size = 'Large',
+  custom,
+  ...restProps
+}) => {
+  const styles = useMemo(() => stylesBuilder(custom), [custom]);
+
+  return (
+    <tet.div {...styles.container} data-testid="file-icon" {...restProps}>
+      {renderProperIcon(iconType, size)}
+    </tet.div>
+  );
+};

src/components/FileIcon/index.tsx

@@ -0,0 +1,2 @@
+export { FileIcon } from './FileIcon';
+export type { FileIconProps } from './FileIcon.props';

src/components/FileIcon/stylesBuilder.ts

@@ -0,0 +1,18 @@
+import { defaultConfig, FileIconConfig } from './FileIcon.styles';
+
+import { mergeConfigWithCustom } from '@/services';
+import { BaseProps } from '@/types';
+
+type StylesBuilderParams = {
+  container: BaseProps;
+};
+
+export const stylesBuilder = (custom?: FileIconConfig): StylesBuilderParams => {
+  const { ...container } = mergeConfigWithCustom({ defaultConfig, custom });
+
+  return {
+    container: {
+      ...container,
+    },
+  };
+};

src/docs-components/FileIconDocs.tsx

@@ -0,0 +1,54 @@
+import { FileIcon } from '@/components/FileIcon/FileIcon';
+import { tet } from '@/tetrisly';
+
+const iconTypes = [
+  'Sketch',
+  'Photoshop',
+  'Excel',
+  'Word',
+  'Pdf',
+  'Spreadsheet',
+  'Document',
+  'File',
+  'Archive',
+  'Figma',
+] as const;
+
+export const FileIconDocs = () => (
+  <tet.section py="$space-component-padding-4xLarge">
+    <tet.div px="$dimension-1000" py="$dimension-500">
+      <tet.div display="flex" gap="30px 50px" flexWrap="wrap">
+        {iconTypes.map((iconType) => (
+          <tet.div
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+            w="64px"
+          >
+            <tet.div marginBottom="5px" color="rgb(85, 95, 109)">
+              {iconType}
+            </tet.div>
+            <tet.div
+              key={iconType}
+              display="flex"
+              flexDirection="column"
+              flexShrink="0"
+              flexGrow="1"
+              w="64px"
+              h="128px"
+              border="1.2px dashed"
+              borderColor="rgba(151, 71, 255, 1)"
+              borderRadius="8px"
+              opacity="0px"
+              padding="16px"
+              gap="16px"
+            >
+              <FileIcon iconType={iconType} size="Large" />
+              <FileIcon iconType={iconType} size="Medium" />
+            </tet.div>
+          </tet.div>
+        ))}
+      </tet.div>
+    </tet.div>
+  </tet.section>
+);

src/index.ts

@@ -9,6 +9,7 @@ export * from './components/CheckboxGroup';
 export * from './components/CornerDialog';
 export * from './components/Counter';
 export * from './components/Divider';
+export * from './components/FileIcon';
 export * from './components/FileItem';
 export * from './components/HelperText';
 export * from './components/Icon';