feat: upload con avatar ok

src/Upload/Upload.tsx

@@ -1,72 +1,98 @@
-import classNames from "classnames";
-import React, { ElementType, InputHTMLAttributes, ReactNode } from "react";
-import { Icon, IconProps } from "../Icon/Icon";
+import classNames from 'classnames';
+import React, { ElementType, InputHTMLAttributes, ReactNode } from 'react';
+import { Icon, IconProps } from '../Icon/Icon';
 
 export interface UploadProps extends InputHTMLAttributes<HTMLInputElement> {
-    /** L'id che lega il componente con la label */
-    id: string;
-    /** Etichetta del per il componente Upload, default 'Upload' */
-    label?: string | ReactNode;
-    /**
-     * Il nome dell'icona da mostrare, default è 'it-upload'. Per una lista completa vedi:
-     * <a href="https://italia.github.io/design-react-kit/?path=/story/componenti-icon--lista-icone" target="_blank">Lista icone</a>
-     * 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;
+  /** L'id che lega il componente con la label */
+  id: string;
+  /** Etichetta del per il componente Upload, default 'Upload' */
+  label?: string | ReactNode;
+  /**
+   * Il nome dell'icona da mostrare, default è 'it-upload'. Per una lista completa vedi:
+   * <a href="https://italia.github.io/design-react-kit/?path=/story/componenti-icon--lista-icone" target="_blank">Lista icone</a>
+   * 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 l'input è con un avatar */
+  isAvatar?: boolean;
+  avatarImg?: ReactNode;
+  /** Indica che l'avatar è piccolo */
+  avatarSmall?: boolean;
+  testId?: string;
 }
 
-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';
-            ['aria-describedby']?: string;
-        } = {
-            id,
-            type: 'file'
-        };
+export const Upload = ({
+  id,
+  className,
+  icon = 'it-upload',
+  iconSize,
+  label = 'Upload',
+  tag = 'input',
+  isAvatar,
+  avatarImg,
+  avatarSmall,
+  testId,
+  ...attributes
+}: UploadProps) => {
+  const Tag = tag,
+    classes = classNames(
+      className,
+      {
+        upload: isAvatar ? false : true
+      },
+      { 'upload-avatar': isAvatar }
+    ),
+    classesAvatarWrapper = classNames({
+      'avatar-upload-wrapper': true,
+      'size-sm': avatarSmall
+    }),
+    extraAttributes: {
+      id?: string;
+      type: 'file';
+      ['aria-describedby']?: string;
+    } = {
+      id,
+      type: 'file'
+    };
 
-    // associate the input field with the help text
-    const infoId = id ? `${id}Description` : undefined;
-    if (id) {
-        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>
-        )
-    }
+  // associate the input field with the help text
+  const infoId = id ? `${id}Description` : undefined;
+  if (id) {
+    extraAttributes['aria-describedby'] = infoId;
+  }
 
+  if (isAvatar) {
     return (
-        <>
+      <div className={classesAvatarWrapper}>
+        <div className='avatar size-xxl avatar-upload'>
+          {avatarImg}
+          <div className='upload-avatar-container'>
             <Tag {...attributes} {...extraAttributes} className={classes} data-testid={testId} />
             <label htmlFor={id}>
-                <Icon icon={icon} size={iconSize} />
-                <span>{label}</span>
+              <Icon icon={icon} size={iconSize} />
+              <span>{label}</span>
             </label>
-        </>
-    )
-}
+          </div>
+        </div>
+        <div className='avatar-upload-icon'>
+          <Icon icon='it-camera' size='sm' />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Tag {...attributes} {...extraAttributes} className={classes} data-testid={testId} />
+      <label htmlFor={id}>
+        <Icon icon={icon} size={iconSize} />
+        <span>{label}</span>
+      </label>
+    </>
+  );
+};

stories/Components/Upload.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Upload, UploadList, UploadListItem } from '../../src';
+import { Col, Container, Row, Upload, UploadList, UploadListItem } from '../../src';
 import { UploadListItemProps } from '../../src/Upload/UploadListItem';
 
 const meta: Meta<typeof Upload> = {
@@ -13,7 +13,7 @@ export default meta;
 type Story = StoryObj<typeof Upload>;
 
 interface listaFilesArgsI {
-  [type: string]: UploadListItemProps
+  [type: string]: UploadListItemProps;
 }
 
 export const EsempioInput: Story = {
@@ -41,15 +41,15 @@ const listaFilesArgs: listaFilesArgsI = {
   },
   error: {
     uploadStatus: 'error',
-    fileName: 'nome-file-03.pdf',
+    fileName: 'nome-file-03.pdf'
   }
 };
 
 export const ListaFiles = {
   render: ({ ...listaFilesArgs }: listaFilesArgsI) => (
     <UploadList>
-      {Object.values(listaFilesArgs).map(type => {
-        return <UploadListItem key={type.fileName} {...type} />
+      {Object.values(listaFilesArgs).map((type) => {
+        return <UploadListItem key={type.fileName} {...type} />;
       })}
     </UploadList>
   ),
@@ -88,27 +88,48 @@ const listaFilesImmagineArgs: listaFilesArgsI = {
     previewImageSrc: 'https://picsum.photos/40/40?image=1058',
     previewImageAlt: 'descrizione immagine',
     uploadStatus: 'error',
-    fileName: 'nome-file-03.pdf',
+    fileName: 'nome-file-03.pdf'
   }
 };
 
 export const ListaFilesImmagine = {
   render: ({ ...listaFilesImmagineArgs }: listaFilesArgsI) => (
     <UploadList previewImage>
-      {Object.values(listaFilesImmagineArgs).map(type => {
-        return <UploadListItem key={type.fileName} {...type} />
+      {Object.values(listaFilesImmagineArgs).map((type) => {
+        return <UploadListItem key={type.fileName} {...type} />;
       })}
     </UploadList>
   ),
   args: {
-    ...listaFilesImmagineArgs,
+    ...listaFilesImmagineArgs
   }
 };
 
 export const UploadAvatar: Story = {
-  render: (args) => <Upload {...args} />,
+  render: (args) => (
+    <Container>
+      <Row>
+        <Col>
+          <Upload
+            {...args}
+            id='ExampleUpload3'
+            avatarImg={<img src='https://randomuser.me/api/portraits/men/21.jpg' alt='descrizione immagine' />}
+          />
+        </Col>
+        <Col>
+          <Upload
+            {...args}
+            id='ExampleUpload4'
+            avatarImg={<img src='https://randomuser.me/api/portraits/women/21.jpg' alt='descrizione immagine' />}
+            avatarSmall
+          />
+        </Col>
+      </Row>
+    </Container>
+  ),
   args: {
-    id: 'ExampleUpload',
+    label: 'Aggiorna',
+    icon: 'it-camera',
     isAvatar: true
   }
-};
+};