feat: iniziato con upload con avatar

src/Upload/Upload.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import React, { ElementType, InputHTMLAttributes, ReactNode } from "react";
-import { Icon } from "../Icon/Icon";
+import { Icon, IconProps } from "../Icon/Icon";
 
 export interface UploadProps extends InputHTMLAttributes<HTMLInputElement> {
     /** L'id che lega il componente con la label */
@@ -13,19 +13,22 @@ export interface UploadProps extends InputHTMLAttributes<HTMLInputElement> {
      * In caso di un'immagine esterna l'URL da utilizzare.
      **/
     icon?: string;
+    iconSize?: IconProps["size"];
     /** Utilizzarlo in caso di utilizzo di componenti personalizzati. Il valore di default è 'input' */
     tag?: ElementType;
     /** Classi aggiuntive da usare per il componente Upload */
     className?: string;
+    /** Indica che il formato è con un avatar */
+    isAvatar?: boolean;
     testId?: string;
 }
 
-export const Upload = ({ id, className, icon = 'it-upload', label = 'Upload', tag = 'input', testId, ...attributes }: UploadProps) => {
+export const Upload = ({ id, className, icon = 'it-upload', iconSize, label = 'Upload', tag = 'input', isAvatar, testId, ...attributes }: UploadProps) => {
     const
         Tag = tag,
         classes = classNames(className, {
             'upload': true
-        }),
+        }, { 'upload-avatar': isAvatar }),
         extraAttributes: {
             id?: string;
             type: 'file';
@@ -41,11 +44,27 @@ export const Upload = ({ id, className, icon = 'it-upload', label = 'Upload', ta
         extraAttributes['aria-describedby'] = infoId;
     }
 
+    if (isAvatar) {
+        return (
+            <div className="avatar-upload-wrapper">
+                <div className="avatar size-xxl avatar-upload">
+                    <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="descrizione immagine" />
+                    <form className="upload-avatar-container" method="post" action="" >
+                        <Upload id="upload3" icon="it-camera" iconSize="sm" className="upload-avatar" />
+                    </form>
+                </div>
+                <div className="avatar-upload-icon">
+                    <svg className="icon icon-sm" aria-hidden="true"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-camera"></use></svg>
+                </div>
+            </div>
+        )
+    }
+
     return (
         <>
             <Tag {...attributes} {...extraAttributes} className={classes} data-testid={testId} />
             <label htmlFor={id}>
-                <Icon icon={icon} />
+                <Icon icon={icon} size={iconSize} />
                 <span>{label}</span>
             </label>
         </>

stories/Components/Upload.stories.tsx

@@ -104,3 +104,11 @@ export const ListaFilesImmagine = {
     ...listaFilesImmagineArgs,
   }
 };
+
+export const UploadAvatar: Story = {
+  render: (args) => <Upload {...args} />,
+  args: {
+    id: 'ExampleUpload',
+    isAvatar: true
+  }
+};

stories/Documentation/Upload.mdx

@@ -15,3 +15,7 @@ import * as UploadStories from '../Components/Upload.stories';
 # Lista files con immagini
 
 <Canvas of={UploadStories.ListaFilesImmagine} />
+
+# Upload con Avatar
+
+<Canvas of={UploadStories.UploadAvatar} />