From 655aa20454b68098ccaae753c4643adc8b549f63 Mon Sep 17 00:00:00 2001
From: Mukul Bansal <mukulbansal01@gmail.com>
Date: Sun, 15 Oct 2023 18:00:16 +0530
Subject: [PATCH] feat: add new nofile icon

affects: @medly-components/icons
---
 packages/icons/src/Icons.stories.mdx          | 33 ++++++++++++-------
 .../icons/src/assets/File/no_file_24px.svg    | 11 +++++++
 packages/icons/src/icons/File/NoFileIcon.tsx  | 21 ++++++++++++
 packages/icons/src/index.ts                   |  1 +
 4 files changed, 54 insertions(+), 12 deletions(-)
 create mode 100644 packages/icons/src/assets/File/no_file_24px.svg
 create mode 100644 packages/icons/src/icons/File/NoFileIcon.tsx

diff --git a/packages/icons/src/Icons.stories.mdx b/packages/icons/src/Icons.stories.mdx
index 6fae8d65f..1dc908803 100644
--- a/packages/icons/src/Icons.stories.mdx
+++ b/packages/icons/src/Icons.stories.mdx
@@ -541,6 +541,7 @@ import DownloadDoneIcon from './icons/File/DownloadDoneIcon';
 import FolderIcon from './icons/File/FolderIcon';
 import FolderOpenIcon from './icons/File/FolderOpenIcon';
 import FolderSharedIcon from './icons/File/FolderSharedIcon';
+import NoFileIcon from './icons/File/NoFileIcon';
 import PrintIcon from './icons/File/PrintIcon';
 import UploadIcon from './icons/File/UploadIcon';
 import Administratio338LineIcon from './icons/GSDD/Administratio338LineIcon';
@@ -1477,9 +1478,9 @@ import ToggleOnIcon from './icons/Toggle/ToggleOnIcon';
 
 # Icons
 
-The `Icon` component is a collection of SVG icons exported as React components.
+A collection of icons exported as React components (SVG icons).
 
-## How to use?
+### How to use
 
 ```tsx
 import { AddIcon } from '@medly-components/icons';
@@ -1487,14 +1488,14 @@ import { AddIcon } from '@medly-components/icons';
 <AddIcon />;
 ```
 
-## Variants
+### Variants
 
-Two variants are available for all the icons: `solid` | `flat`.
+There are two variants available for all the icons `solid` | `flat`.
 
--   The `solid` variant will reserve the space around the icon to show the background color. You must use the `withHoverEffect` prop to show the hover effect.
--   The `flat` (default variant) will show the icon without the hover effect and space around it.
+-   `solid` variant will reserve the space around the icon to show the background color. Also you can use the `withHoverEffect` prop to show the hover effect also.
+-   `flat` (default variant) will show the icon without the hover effect and space around it.
 
-The `pointer` cursor appears when you pass the `onClick` prop.
+`pointer` cursor will only appear when you pass the `onClick` prop.
 
 <Preview>
     <Wrapper>
@@ -1512,15 +1513,13 @@ The `pointer` cursor appears when you pass the `onClick` prop.
     </Wrapper>
 </Preview>
 
-## Props
+### Props
 
-While none of the props are necessary, you can still style all the icons according to your requirement using the following props mentioned in the table below:
+None of the props is required but still you can style all the icons according to your requirement using below props.
 
 <Props of={IconProps} />
 
-## Theme
-
-This component offers the following themes mentioned in the table below:
+### Theme
 
 <Props of={ThemeInterface} />
 
@@ -6952,6 +6951,16 @@ This component offers the following themes mentioned in the table below:
                     hoverIconColor={color('Hover icon color', defaultTheme.icon.colors.hovered.iconColor)}
                     hoverBgColor={color('Hover background color', defaultTheme.icon.colors.hovered.bgColor)}
             />
+            <NoFileIcon 
+                    size={select('Size', sizes, 'M')}
+                    variant={select('Variant', variants, 'flat')}
+                    disabled={boolean('Disabled', false)}
+                    withHoverEffect={boolean('With hover efect', false)}
+                    iconColor={color('Icon Color', defaultTheme.icon.colors.default.iconColor)}
+                    bgColor={color('Background Color', defaultTheme.icon.colors.default.bgColor)}
+                    hoverIconColor={color('Hover icon color', defaultTheme.icon.colors.hovered.iconColor)}
+                    hoverBgColor={color('Hover background color', defaultTheme.icon.colors.hovered.bgColor)}
+            />
             <PrintIcon 
                     size={select('Size', sizes, 'M')}
                     variant={select('Variant', variants, 'flat')}
diff --git a/packages/icons/src/assets/File/no_file_24px.svg b/packages/icons/src/assets/File/no_file_24px.svg
new file mode 100644
index 000000000..6c6aff97d
--- /dev/null
+++ b/packages/icons/src/assets/File/no_file_24px.svg
@@ -0,0 +1,11 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_15726_19200)">
+<path d="M24 4L24.234 4.014C24.6804 4.06665 25.0961 4.26816 25.414 4.58602C25.7318 4.90389 25.9334 5.31957 25.986 5.766L26 6V14L26.01 14.3C26.0816 15.2523 26.4915 16.1477 27.1657 16.8241C27.8399 17.5005 28.7339 17.9133 29.686 17.988L30 18H38L38.234 18.014C38.6804 18.0666 39.0961 18.2682 39.414 18.586C39.7318 18.9039 39.9334 19.3196 39.986 19.766L40 20V38C40.0001 39.5304 39.4153 41.003 38.3654 42.1165C37.3155 43.23 35.8798 43.9002 34.352 43.99L34 44H14C12.4696 44.0001 10.997 43.4153 9.88348 42.3654C8.76999 41.3155 8.09978 39.8798 8.01 38.352L8 38V10C7.99991 8.46958 8.58465 6.99697 9.63457 5.88348C10.6845 4.76999 12.1202 4.09978 13.648 4.01L14 4H24ZM21.022 22.28C20.6215 22.0416 20.1503 21.9506 19.6899 22.0227C19.2294 22.0947 18.8086 22.3253 18.5001 22.6746C18.1915 23.024 18.0147 23.4701 18.0001 23.9359C17.9855 24.4017 18.134 24.858 18.42 25.226L18.586 25.414L21.17 28L18.586 30.586L18.42 30.774C18.1217 31.1588 17.974 31.6393 18.0047 32.1252C18.0354 32.6111 18.2422 33.0692 18.5865 33.4135C18.9308 33.7578 19.3889 33.9646 19.8748 33.9953C20.3607 34.0259 20.8412 33.8783 21.226 33.58L21.414 33.414L24 30.83L26.586 33.414L26.774 33.58C27.1588 33.8783 27.6393 34.0259 28.1252 33.9953C28.6111 33.9646 29.0692 33.7578 29.4135 33.4135C29.7578 33.0692 29.9646 32.6111 29.9953 32.1252C30.0259 31.6393 29.8783 31.1588 29.58 30.774L29.414 30.586L26.83 28L29.414 25.414L29.58 25.226C29.8783 24.8412 30.0259 24.3607 29.9953 23.8748C29.9646 23.3889 29.7578 22.9308 29.4135 22.5865C29.0692 22.2422 28.6111 22.0354 28.1252 22.0047C27.6393 21.9741 27.1588 22.1217 26.774 22.42L26.586 22.586L24 25.17L21.414 22.586L21.226 22.42L21.022 22.28Z" fill="#B0BCC8"/>
+<path d="M38.002 13.9981H30.002L30 5.99609L38.002 13.9981Z" fill="#B0BCC8"/>
+</g>
+<defs>
+<clipPath id="clip0_15726_19200">
+<rect width="48" height="48" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/icons/src/icons/File/NoFileIcon.tsx b/packages/icons/src/icons/File/NoFileIcon.tsx
new file mode 100644
index 000000000..259e06acf
--- /dev/null
+++ b/packages/icons/src/icons/File/NoFileIcon.tsx
@@ -0,0 +1,21 @@
+import { WithStyle } from '@medly-components/utils';
+import type { FC } from 'react';
+import { memo } from 'react';
+import SvgIcon, { SvgIconProps } from '../../SvgIcon';
+import NoFileIconSvg from '../../assets/File/no_file_24px.svg';
+
+const Component: FC<SvgIconProps> = memo(props => {
+    const { size, variant, iconColor, bgColor, hoverBgColor, hoverIconColor, withHoverEffect, margin, fillOpacity, ...restProps } = props;
+    return (
+        <SvgIcon
+            {...{ size, variant, iconColor, bgColor, hoverBgColor, hoverIconColor, withHoverEffect, margin, fillOpacity, ...restProps }}
+        >
+            <NoFileIconSvg {...restProps} width="1em" height="1em" />
+        </SvgIcon>
+    );
+});
+Component.displayName = 'NoFileIcon';
+
+const NoFileIcon: FC<SvgIconProps> & WithStyle = Object.assign(Component, { Style: SvgIcon });
+
+export default NoFileIcon;
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index 44fbf773e..db5b05c48 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -534,6 +534,7 @@ export { default as DownloadDoneIcon } from './icons/File/DownloadDoneIcon';
 export { default as FolderIcon } from './icons/File/FolderIcon';
 export { default as FolderOpenIcon } from './icons/File/FolderOpenIcon';
 export { default as FolderSharedIcon } from './icons/File/FolderSharedIcon';
+export { default as NoFileIcon } from './icons/File/NoFileIcon';
 export { default as PrintIcon } from './icons/File/PrintIcon';
 export { default as UploadIcon } from './icons/File/UploadIcon';
 export { default as Administratio338LineIcon } from './icons/GSDD/Administratio338LineIcon';