Revisione componente Tab

package.json

@@ -104,6 +104,7 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^20.12.2",
     "@types/react": "^18.2.75",
+    "@types/react-bootstrap": "^0.32.37",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
     "bootstrap-italia": "2.12.1",
@@ -135,6 +136,7 @@
   "dependencies": {
     "classnames": "^2.3.1",
     "is-number": "^7.0.0",
+    "react-bootstrap": "^2.10.6",
     "react-stickup": "^1.12.1",
     "react-toastify": "^7.0.4",
     "react-transition-group": "^4.4.5",

src/Alert/Alert.tsx

@@ -28,12 +28,11 @@ export interface AlertProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-
 export const Alert: FC<AlertProps> = ({ color = 'success', isOpen = true, fade = true, testId, ...props }) => {
   const baseProps = {
     color,
     isOpen,
     fade
   };
   return <InnerAlert data-testid={testId} {...baseProps} {...props} />;
-};
+};

src/Autocomplete/Autocomplete.tsx

@@ -1,80 +1,81 @@
-import React, { FC} from 'react';
+import React, { FC } from 'react';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore non ci sono i types
 import BaseAutocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete
 
 export interface AutocompleteAttributes {
-    /** Identificativo */
-    id?: string;
-    /** Valori chiave - valore all'interno della select */
-    source: { value: string; label: string }[];
-    /** Placeholder (default: ``) */
-    placeholder?: string;
-    /** Valore di default (default: ``) */
-    defaultValue?: string;
-    /** Modalità display menu (default: `inline`) */
-    displayMenu?: string;
-    /** Funzione ritornante stringa in caso di nessun risultato */
-    tNoResults?: () => string;
-    /** Funzione ritornante stringa di suggerimento */
-    tAssistiveHint?: () => string;
-    /** Funzione ritornante stringa se la query è troppo corta */
-    tStatusQueryTooShort?: () => string;
-    /** Funzione ritornante stringa se non ci sono risultati di ricerca */
-    tStatusNoResults?: () => string;
-    /** Funzione ritornante stringa che identifica l'opzione selezionata */
-    tStatusSelectedOption?: () => string;
-    /** Funzione ritornante stringa che identifica i risultati */
-    tStatusResults?: () => string;
-    /** Classi aggiuntive da usare per il componente Button */
-    className?: string;
-    testId?: string;
+  /** Identificativo */
+  id?: string;
+  /** Valori chiave - valore all'interno della select */
+  source: { value: string; label: string }[];
+  /** Placeholder (default: ``) */
+  placeholder?: string;
+  /** Valore di default (default: ``) */
+  defaultValue?: string;
+  /** Modalità display menu (default: `inline`) */
+  displayMenu?: string;
+  /** Funzione ritornante stringa in caso di nessun risultato */
+  tNoResults?: () => string;
+  /** Funzione ritornante stringa di suggerimento */
+  tAssistiveHint?: () => string;
+  /** Funzione ritornante stringa se la query è troppo corta */
+  tStatusQueryTooShort?: () => string;
+  /** Funzione ritornante stringa se non ci sono risultati di ricerca */
+  tStatusNoResults?: () => string;
+  /** Funzione ritornante stringa che identifica l'opzione selezionata */
+  tStatusSelectedOption?: () => string;
+  /** Funzione ritornante stringa che identifica i risultati */
+  tStatusResults?: () => string;
+  /** Classi aggiuntive da usare per il componente Button */
+  className?: string;
+  testId?: string;
 }
 
-
 const tAssistiveHintDefault = () =>
-      'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento'
-const tNoResultsDefault = () => 'Nessun risultato trovato'
-const tStatusQueryTooShortDefault = (minQueryLength: number) => `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`
-const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca'
-const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) => `${selectedOption} ${index + 1} di ${length} è sottolineato`
+  'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';
+const tNoResultsDefault = () => 'Nessun risultato trovato';
+const tStatusQueryTooShortDefault = (minQueryLength: number) =>
+  `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
+const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';
+const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) =>
+  `${selectedOption} ${index + 1} di ${length} è sottolineato`;
 const tStatusResultsDefault = (length: number, contentSelectedOption: number) => {
-        const words = {
-        result: length === 1 ? 'risultato' : 'risultati',
-        is: length === 1 ? 'è' : 'sono',
-        available: length === 1 ? 'disponibile' : 'disponibili',
-    }
+  const words = {
+    result: length === 1 ? 'risultato' : 'risultati',
+    is: length === 1 ? 'è' : 'sono',
+    available: length === 1 ? 'disponibile' : 'disponibili'
+  };
 
-    return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`
-}
+  return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
+};
 
-export const Autocomplete: FC<AutocompleteAttributes>  = ({
-    tAssistiveHint = tAssistiveHintDefault,
-    tNoResults = tNoResultsDefault,
-    tStatusQueryTooShort = tStatusQueryTooShortDefault,
-    tStatusNoResults = tStatusNoResultsDefault,
-    tStatusSelectedOption = tStatusSelectedOptionDefault,
-    tStatusResults = tStatusResultsDefault,
-    placeholder = '',
-    defaultValue = '',
-    displayMenu = 'inline',
-    source,
-    ...attributes
-  }) => {
-
-    return <BaseAutocomplete 
-        id='autocomplete'
-        source={source}
-        placeholder={placeholder}
-        defaultValue={defaultValue}
-        displayMenu={displayMenu}
-        tAssistiveHint = {tAssistiveHint}
-        tNoResults = {tNoResults}
-        tStatusQueryTooShort = {tStatusQueryTooShort}
-        tStatusNoResults = {tStatusNoResults}
-        tStatusSelectedOption = {tStatusSelectedOption}
-        tStatusResults = {tStatusResults}
-        {...attributes}
-    />;
-  };
-  
+export const Autocomplete: FC<AutocompleteAttributes> = ({
+  tAssistiveHint = tAssistiveHintDefault,
+  tNoResults = tNoResultsDefault,
+  tStatusQueryTooShort = tStatusQueryTooShortDefault,
+  tStatusNoResults = tStatusNoResultsDefault,
+  tStatusSelectedOption = tStatusSelectedOptionDefault,
+  tStatusResults = tStatusResultsDefault,
+  placeholder = '',
+  defaultValue = '',
+  displayMenu = 'inline',
+  source,
+  ...attributes
+}) => {
+  return (
+    <BaseAutocomplete
+      id='autocomplete'
+      source={source}
+      placeholder={placeholder}
+      defaultValue={defaultValue}
+      displayMenu={displayMenu}
+      tAssistiveHint={tAssistiveHint}
+      tNoResults={tNoResults}
+      tStatusQueryTooShort={tStatusQueryTooShort}
+      tStatusNoResults={tStatusNoResults}
+      tStatusSelectedOption={tStatusSelectedOption}
+      tStatusResults={tStatusResults}
+      {...attributes}
+    />
+  );
+};

src/BackToTop/BackToTop.tsx

@@ -34,7 +34,7 @@ const backToTop = () => {
 };
 
 export const BackToTop = ({
-  ariaLabel='Torna su',
+  ariaLabel = 'Torna su',
   className,
   dark = false,
   small = false,

src/Card/CardCategory.tsx

@@ -21,15 +21,26 @@ export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CardCategory: FC<CardCategoryProps> = ({ iconName, iconTitle, date, href, onClick, testId, children, textDescription, dateDescription, ...rest }) => {
+export const CardCategory: FC<CardCategoryProps> = ({
+  iconName,
+  iconTitle,
+  date,
+  href,
+  onClick,
+  testId,
+  children,
+  textDescription,
+  dateDescription,
+  ...rest
+}) => {
   const classes = classNames({
     'category-top': date || ' ',
     'categoryicon-top': iconName
   });
   // Simple category link
   const categoryLink = !iconName && (
     <>
-      {textDescription && <span className="visually-hidden">{textDescription}</span>}
+      {textDescription && <span className='visually-hidden'>{textDescription}</span>}
       <a href={href} className='category' onClick={onClick}>
         {children}
       </a>
@@ -44,8 +55,10 @@ export const CardCategory: FC<CardCategoryProps> = ({ iconName, iconTitle, date,
     <div className={classes} {...rest} data-testid={testId}>
       {categoryLink}
       {categoryIcon}
-      {categoryText && textDescription && <span className="visually-hidden">{textDescription}</span>}{categoryText}
-      {dateDescription && <span className="visually-hidden">{dateDescription}</span>}{categoryDate}
+      {categoryText && textDescription && <span className='visually-hidden'>{textDescription}</span>}
+      {categoryText}
+      {dateDescription && <span className='visually-hidden'>{dateDescription}</span>}
+      {categoryDate}
     </div>
   );
 };

src/Collapse/Collapse.tsx

@@ -6,7 +6,6 @@ import { CSSModule } from 'reactstrap/types/lib/utils';
 
 import { Icon } from '../Icon/Icon';
 
-
 // Copy over from reactstrap and add new ones
 export interface CollapseProps extends HTMLAttributes<HTMLElement> {
   /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
@@ -43,7 +42,7 @@ export interface CollapseProps extends HTMLAttributes<HTMLElement> {
   /** Da utilizzare per impostare un riferimento all'elemento DOM */
   innerRef?: Ref<HTMLElement>;
   /** Testo pulsante di chiusura per screen reader */
-  closeSrText?: string,
+  closeSrText?: string;
   testId?: string;
 }
 
@@ -57,7 +56,7 @@ export const Collapse: FC<CollapseProps> = ({
   onOverlayClick,
   cssModule,
   testId,
-  closeSrText='Nascondi la navigazione',
+  closeSrText = 'Nascondi la navigazione',
   ...attributes
 }) => {
   const newCssModule = {
@@ -69,13 +68,10 @@ export const Collapse: FC<CollapseProps> = ({
       expanded: isOpen
     });
     const style = { display: isOpen ? 'block' : 'none' };
-    const overlayClasses = classNames(
-      'overlay',
-      {
-        'fade' : isOpen,
-        'show' : isOpen
-      }
-    )
+    const overlayClasses = classNames('overlay', {
+      fade: isOpen,
+      show: isOpen
+    });
     return (
       <CollapseBase
         className={classes}
@@ -88,8 +84,8 @@ export const Collapse: FC<CollapseProps> = ({
         <div className={overlayClasses} style={style} onClick={onOverlayClick}></div>
         <div className='close-div'>
           <button className='btn close-menu' type='button' onClick={onOverlayClick}>
-            <span className="visually-hidden">{closeSrText}</span>
-            <Icon color='white' icon='it-close-big'/>
+            <span className='visually-hidden'>{closeSrText}</span>
+            <Icon color='white' icon='it-close-big' />
           </button>
         </div>
         {megamenu ? <div className='menu-wrapper '>{children}</div> : <>{children}</>}

src/Dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { ElementType, FC } from 'react';
-import { Dropdown as BSDRopdown, DropdownProps as  BSDRopdownProps} from 'reactstrap';
+import { Dropdown as BSDRopdown, DropdownProps as BSDRopdownProps } from 'reactstrap';
 export interface DropdownProps extends BSDRopdownProps {
   tag?: ElementType;
   inNavbar?: boolean;
@@ -21,7 +21,7 @@ export const Dropdown: FC<DropdownProps> = ({
   ...attributes
 }) => {
   const classes = classNames(className, {
-    'text-center': textCenter,
+    'text-center': textCenter
   });
 
   const [isOpen, setIsOpen] = React.useState(false);
@@ -41,10 +41,8 @@ export const Dropdown: FC<DropdownProps> = ({
     >
       {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        React.Children.map(children, (child: any) =>
-          React.cloneElement(child, { inNavbar: inNavbar })
-        )
-      }    
+        React.Children.map(children, (child: any) => React.cloneElement(child, { inNavbar: inNavbar }))
+      }
     </BSDRopdown>
   );
 };

src/Forward/Forward.tsx

@@ -15,14 +15,14 @@ export const Forward: FC<ForwardProps> = ({ className, children, testId, ...attr
     <a
       className={classes}
       onClick={(e) => {
-        e.preventDefault()
+        e.preventDefault();
         if (attributes.href) {
-          const scrollToRef = document.querySelector(attributes.href)
+          const scrollToRef = document.querySelector(attributes.href);
           if (scrollToRef) {
             scrollToRef.scrollIntoView({
               behavior: 'smooth',
               block: 'start'
-            })
+            });
           }
         }
       }}

src/Grid/GridItemTextWrapper.tsx

@@ -9,7 +9,13 @@ export interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElement
   tag?: ElementType;
 }
 
-export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({ className, children, testId, tag='span', ...attributes }) => {
+export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({
+  className,
+  children,
+  testId,
+  tag = 'span',
+  ...attributes
+}) => {
   const classes = classname('it-griditem-text-wrapper', className);
   const Tag = tag;
   return (

src/Header/HeaderToggler.tsx

@@ -21,7 +21,7 @@ export interface HeaderTogglerProps extends ButtonHTMLAttributes<HTMLButtonEleme
 
 const BUTTON = 'button';
 
-export const HeaderToggler = ({ className, tag, type, isOpen=false, testId, ...attributes }: HeaderTogglerProps) => {
+export const HeaderToggler = ({ className, tag, type, isOpen = false, testId, ...attributes }: HeaderTogglerProps) => {
   const HeaderType = useHeaderContext();
   const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
   const defaultType = HeaderType === SLIM ? undefined : BUTTON;
@@ -32,7 +32,7 @@ export const HeaderToggler = ({ className, tag, type, isOpen=false, testId, ...a
     },
     className
   );
-  const expanded = isOpen ? "true" : "false"
+  const expanded = isOpen ? 'true' : 'false';
   useEffect(() => {
     document.querySelectorAll('.container-fluid').forEach((element) => {
       element.classList.remove('container-fluid');

src/Icon/assets/index.ts

@@ -698,4 +698,4 @@ export const allIcons = Object.keys(iconList);
 export interface SVGRProps {
   title?: string;
   titleId?: string;
-}
+}

src/Input/Input.tsx

@@ -416,4 +416,4 @@ export const Input = ({
   }
 
   return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
-};
+};

src/Input/InputContainer.tsx

@@ -38,7 +38,6 @@ export const InputContainer: FC<InputContainerProps> = ({
   iconLeft,
   children
 }) => {
-
   if (hasButtonRight || hasIconLeft) {
     return (
       <div className={wrapperClass} data-testid={testId}>