design-react-kit 5.5.1 → 5.6.1

package/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');

package/src/Icon/Icon.tsx

@@ -47,7 +47,7 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
   size?: 'xl' | 'lg' | '' | 'sm' | 'xs';
   /**
    * Il nome dell'icona da mostrare. 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>
+   * <a href="https://italia.github.io/design-react-kit/?path=/story/documentazione-utilities-icon--lista-icone" target="_blank">Lista icone</a>.
    * In caso di un'immagine esterna l'URL da utilizzare.
    **/
   icon: string;
@@ -65,7 +65,7 @@ export const Icon: FC<IconProps> = ({
   color = '',
   size = '',
   icon = '',
-  title,
+  title = '',
   className,
   padding = false,
   onIconLoad,
@@ -108,8 +108,26 @@ export const Icon: FC<IconProps> = ({
   }
 
   if (!IconComponent) {
-    return <EmptyIcon className={classes} role='img' {...attributes} data-testid={testId} />;
+    return (
+      <EmptyIcon
+        className={classes}
+        role={title === '' ? undefined : 'img'}
+        aria-hidden={title === '' ? true : false}
+        title={title}
+        {...attributes}
+        data-testid={testId}
+      />
+    );
   }
 
-  return <IconComponent className={classes} role='img' title={title} data-testid={testId} {...attributes} />;
+  return (
+    <IconComponent
+      className={classes}
+      role={title === '' ? undefined : 'img'}
+      aria-hidden={title === '' ? true : false}
+      title={title}
+      data-testid={testId}
+      {...attributes}
+    />
+  );
 };

package/src/Icon/assets/index.ts

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

package/src/Input/Input.tsx

@@ -77,8 +77,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   innerRef?: Ref<HTMLInputElement>;
   /** Utilizzare per mostrare testo statico non modificabile. */
   plaintext?: boolean;
-  /** Utilizzare per mostrare un elemento addon a fianco (prima o dopo) il campo input all'interno del componente */
-  addon?: boolean;
   /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */
   addonText?: string;
   /** Oggetto contenente la nuova mappatura per le classi CSS. */
@@ -118,7 +116,6 @@ export const Input = ({
   cssModule,
   type = 'text',
   tag,
-  addon,
   addonText,
   static: staticInput,
   plaintext,
@@ -173,13 +170,11 @@ export const Input = ({
   let { bsSize, valid, ...rest } = attributes;
 
   const Tag = getTag({ tag, plaintext, staticInput, type });
-  addon = addonText != null ? true : addon;
   const formControlClass = getFormControlClass(
     {
       plaintext,
       staticInput,
       type,
-      addon,
       normalized
     },
     cssModule
@@ -203,8 +198,8 @@ export const Input = ({
   }
 
   // associate the input field with the help text
-  const infoId = id ? `${id}Description` : undefined;
-  if (id) {
+  const infoId = id && infoText ? `${id}Description` : undefined;
+  if (infoId) {
     extraAttributes['aria-describedby'] = infoId;
   }
 
@@ -296,11 +291,17 @@ export const Input = ({
     }
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
     nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
+    const ev1 = new Event('change', { bubbles: true });
     const ev2 = new Event('input', { bubbles: true });
+    inputRef.current?.dispatchEvent(ev1);
     inputRef.current?.dispatchEvent(ev2);
+    inputRef.current?.focus();
   };
 
   if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {
+    if (containerProps.extraLabelClass && ['currency', 'percentage'].includes(type)) {
+      containerProps.extraLabelClass = containerProps.extraLabelClass + ' input-symbol-label';
+    }
     return (
       <InputContainer {...containerProps}>
         <div
@@ -308,8 +309,6 @@ export const Input = ({
             'input-group': true,
             'input-number': true,
             disabled: rest.disabled,
-            'input-number-percentage': type === 'percentage',
-            'input-number-currency': type === 'currency',
             'input-number-adaptive': type === 'adaptive'
           })}
           style={{ width }}
@@ -328,10 +327,10 @@ export const Input = ({
             ref={inputRef}
           />
           <span className='input-group-text align-buttons flex-column'>
-            <button className='input-number-add' onClick={() => clickIncrDecr(1)} type='button'>
+            <button className='input-number-add' onClick={() => clickIncrDecr(1)}>
               <span className='visually-hidden'>{incrementLabel || ''}</span>
             </button>
-            <button className='input-number-sub' onClick={() => clickIncrDecr(-1)} type='button'>
+            <button className='input-number-sub' onClick={() => clickIncrDecr(-1)}>
               <span className='visually-hidden'>{decrementLabel || ''}</span>
             </button>
           </span>
@@ -416,4 +415,4 @@ export const Input = ({
   }
 
   return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
-};
+};

package/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}>

package/src/Input/TextArea.tsx

@@ -57,10 +57,7 @@ export const TextArea = ({
   const extraAttributes: { ['aria-describedby']?: string } = {};
 
   //Chiamo questa funzione per impostare classNames a 'form-control'
-  const formControlClass = getFormControlClass(
-    {},
-    cssModule
-  );
+  const formControlClass = getFormControlClass({}, cssModule);
   // associate the input field with the help text
   const infoId = id ? `${id}Description` : undefined;
   if (id) {

package/src/Input/utils.tsx

@@ -8,9 +8,9 @@ type ValidationProps = Pick<InputProps, 'valid'>;
 type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
   staticInput?: boolean;
 };
-type FormControlProps = Pick<InputProps, 'addon' | 'normalized'> & TypeProps;
+type FormControlProps = Pick<InputProps, 'normalized'> & TypeProps;
 
-function getFormControlClassInternal({ plaintext, staticInput, type = 'text', addon, normalized }: FormControlProps) {
+function getFormControlClassInternal({ plaintext, staticInput, type = 'text', normalized }: FormControlProps) {
   const formControlClass = 'form-control';
   if (plaintext || staticInput || normalized) {
     return `${formControlClass}-plaintext`;
@@ -19,9 +19,7 @@ function getFormControlClassInternal({ plaintext, staticInput, type = 'text', ad
     return `${formControlClass}-file`;
   }
   if (['radio', 'checkbox'].indexOf(type) > -1) {
-    if (addon) {
-      return null;
-    }
+    return null;
   }
   return formControlClass;
 }
@@ -117,8 +115,7 @@ export function getClasses(
         // we can model here only if stylings
         'form-control-plaintext': normalizedOnlyCondition,
         'form-control': passwordOnlyCondition,
-        'input-password': passwordOnlyCondition,
-        'focus--mouse': passwordOnlyCondition || normalizedOnlyCondition
+        'input-password': passwordOnlyCondition
       }
     ),
     cssModule

package/src/List/List.tsx

@@ -16,14 +16,7 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
   testId?: string;
 }
 
-export const List: FC<ListProps> = ({
-  className,
-  wrapperClassName,
-  tag = 'div',
-  noWrapper,
-  testId,
-  ...attributes
-}) => {
+export const List: FC<ListProps> = ({ className, wrapperClassName, tag = 'div', noWrapper, testId, ...attributes }) => {
   const Tag = tag;
   const wrapperClasses = classNames('it-list-wrapper', wrapperClassName);
   const classes = classNames(className, 'it-list');

package/src/List/ListItem.tsx

@@ -39,46 +39,37 @@ export const ListItem: FC<ListItemProps> & {
   children,
   ...attributes
 }) => {
-    const Tag = tag;
-    const classes = classNames(
-      className,
-      { active },
-      'list-item'
-    ),
-      classesItem = classNames(className, {
-        'it-rounded-icon': icon,
-        'avatar size-lg': avatar,
-        'it-thumb': img
-      }),
-      leftItem = icon || avatar || img;
-
-    if (href) {
-      return (
-        <li className={wrapperClassName} data-testid={testId}>
-          <a href={href || '#'} {...attributes} className={classes}>
-            <div className="it-right-zone">{children}</div>
-          </a>
-        </li>
-      );
-    }
+  const Tag = tag;
+  const classes = classNames(className, { active }, 'list-item'),
+    classesItem = classNames(className, {
+      'it-rounded-icon': icon,
+      'avatar size-lg': avatar,
+      'it-thumb': img
+    }),
+    leftItem = icon || avatar || img;
 
+  if (href) {
     return (
       <li className={wrapperClassName} data-testid={testId}>
-        <Tag
-          {...attributes}
-          className={classes}
-          href={href}
-          to={to}
-        >
-          {leftItem && <div className={classesItem}>{leftItem}</div>}
-          <div className="it-right-zone">{children}</div>
-        </Tag>
+        <a href={href || '#'} {...attributes} className={classes}>
+          <div className='it-right-zone'>{children}</div>
+        </a>
       </li>
     );
-  };
+  }
+
+  return (
+    <li className={wrapperClassName} data-testid={testId}>
+      <Tag {...attributes} className={classes} href={href} to={to}>
+        {leftItem && <div className={classesItem}>{leftItem}</div>}
+        <div className='it-right-zone'>{children}</div>
+      </Tag>
+    </li>
+  );
+};
 
 const MultipleAction: FC<ListItemProps> = ({ children }) => {
-  return <span className='it-multiple'>{children}</span>
+  return <span className='it-multiple'>{children}</span>;
 };
 
 ListItem.MultipleAction = MultipleAction;

package/src/NavScroll/types.ts

@@ -87,8 +87,8 @@ export type useNavScrollResult = {
    */
   getActiveRef: () => RefObject<Element> | null;
   /**
-  * A list of active ids (the full hierarchy).
-  */
+   * A list of active ids (the full hierarchy).
+   */
   percentage: number;
 };
 

package/src/ResponsiveImage/ResponsiveImage.tsx

@@ -12,26 +12,32 @@ export interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
   proportioned?: boolean;
 }
 
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, proportioned=false, children, ...attributes }) => {
+export const ResponsiveImage: FC<ResponsiveImageProps> = ({
+  alt,
+  testId,
+  proportioned = false,
+  children,
+  ...attributes
+}) => {
   if (children) {
     if (proportioned) {
-      return(
+      return (
         <div className='img-responsive-wrapper'>
           <div className='img-responsive'>
             <figure className='img-wrapper'>
-              <img {...attributes} alt={alt}  className='figure-img img-fluid rounded' />
+              <img {...attributes} alt={alt} className='figure-img img-fluid rounded' />
               {children}
             </figure>
           </div>
         </div>
-      )
+      );
     } else {
-      return(
+      return (
         <figure className='figure img-full w-100 img-responsive-wrapper'>
-          <img {...attributes} alt={alt}  className='figure-img img-fluid rounded' />
+          <img {...attributes} alt={alt} className='figure-img img-fluid rounded' />
           {children}
         </figure>
-      )
+      );
     }
   } else {
     return (

package/src/Skiplink/Skiplink.tsx

@@ -12,18 +12,23 @@ export interface SkiplinkProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const Skiplink: FC<SkiplinkProps> = ({ ariaLabel=null, className, tag = 'div', nav=false, testId, children, ...attributes }) => {
+export const Skiplink: FC<SkiplinkProps> = ({
+  ariaLabel = null,
+  className,
+  tag = 'div',
+  nav = false,
+  testId,
+  children,
+  ...attributes
+}) => {
   const Tag = nav ? 'nav' : tag;
   const classes = classNames(className, 'skiplinks');
   if (nav) {
     return (
-      <Tag aria-label={ariaLabel} className={classes} {...attributes} data-testid={testId} >
-        <ul>
-          {children}
-        </ul>
+      <Tag aria-label={ariaLabel} className={classes} {...attributes} data-testid={testId}>
+        <ul>{children}</ul>
       </Tag>
-    )
-
+    );
   } else {
     return <Tag aria-label={ariaLabel} className={classes} {...attributes} data-testid={testId} />;
   }

package/src/Skiplink/SkiplinkItem.tsx

@@ -31,7 +31,7 @@ export const SkiplinkItem: FC<SkiplinkItemProps> = ({
 
   if (navItem) {
     return (
-      <li className={classes} >
+      <li className={classes}>
         <Tag {...attributes} {...extraHref} data-testid={testId} />
       </li>
     );

package/src/Stepper/StepperHeaderElement.tsx

@@ -29,14 +29,14 @@ export interface StepperHeaderElementProps extends HTMLAttributes<HTMLLIElement>
   appendIcon?: string;
   /** Icona da mostrare alla sinistra dell'etichetta dello step */
   prependIcon?: string;
+  /** Titolo dell'icona da mostrare alla destra dell'etichetta dello step */
+  appendIconTitle?: string;
+  /** Titolo dell'icona da mostrare alla sinistra dell'etichetta dello step */
+  prependIconTitle?: string;
   /** Utilizzare questo attributo per elementi aggiuntivi da mostrare su dispositivi mobile per lo step attivo */
   stepperNumber?: ReactNode;
   /** Nasconde il bordo inferiore azzurro per lo step */
   noLine?: boolean;
-  /** @deprecated Usare `appendIcon` */
-  icon?: string;
-  /** @deprecated Usare `prependIcon` */
-  iconName?: string;
   testId?: string;
 }
 
@@ -45,8 +45,8 @@ export const StepperHeaderElement: FC<StepperHeaderElementProps> = ({
   variant,
   appendIcon,
   prependIcon,
-  icon,
-  iconName,
+  appendIconTitle,
+  prependIconTitle,
   noLine,
   stepperNumber,
   testId,
@@ -61,14 +61,12 @@ export const StepperHeaderElement: FC<StepperHeaderElementProps> = ({
   const iconClass = classNames('icon', 'steppers-success');
   const spanClass = classNames('steppers-number');
 
-  const iconToAppend = appendIcon || icon;
-  const iconToPrepend = prependIcon || iconName;
   return (
     <Tag {...attributes} className={wrapperClasses} data-testid={testId}>
-      {iconToPrepend && <Icon icon={iconToPrepend} />}
+      {prependIcon && <Icon icon={prependIcon} title={prependIconTitle} />}
       {stepperNumber && <span className={spanClass}>{stepperNumber}</span>}
       {children}
-      {iconToAppend && <Icon icon={iconToAppend} className={iconClass} />}
+      {appendIcon && <Icon icon={appendIcon} title={appendIconTitle} className={iconClass} />}
     </Tag>
   );
 };

package/src/Tab/TabNav.tsx

@@ -0,0 +1,111 @@
+import classNames from 'classnames';
+import React, { ElementType, FC, useRef } from 'react';
+import { Nav, NavProps } from 'react-bootstrap';
+
+export interface TabNavProps extends NavProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati
+   * @default ul
+   */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Tab */
+  className?: string;
+  /** Imposta l'orientameno delle tab in verticale
+   * @default false
+   */
+  vertical?: boolean;
+  /** Imposta la tab con sfondo scuro
+   * @default false
+   */
+  dark?: boolean;
+  /** Imposta la tab con design tipo card
+   * @default false
+   */
+  card?: boolean;
+  testId?: string;
+}
+
+export const TabNav: FC<TabNavProps> = ({
+  className,
+  vertical = false,
+  dark = false,
+  card = false,
+  tag = 'ul',
+  testId,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const rootRef = useRef<HTMLInputElement>();
+
+  const classes = classNames(
+    className,
+    'nav-tabs',
+    { 'nav-tabs-vertical': vertical },
+    { 'nav-dark': dark },
+    { 'nav-tabs-cards': card }
+  );
+  let currentTabIndex = 0;
+  let activeTabIndex = -1;
+
+  // Ugly workaround to keep Bootstrap Italia behaviour
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>, disabled: boolean = false) => {
+    const queriedElements = rootRef.current?.querySelectorAll('.nav-link');
+    if (queriedElements) {
+      for (let i = 0; i < queriedElements.length; i++) {
+        if (queriedElements[i].ariaSelected === 'true') {
+          activeTabIndex = i;
+        }
+        // Disabled elements ignore current focused tab
+        if (!disabled && document.activeElement === queriedElements[i]) {
+          currentTabIndex = i;
+        }
+        queriedElements[i].ariaSelected = 'false';
+      }
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          event.stopPropagation();
+          event.preventDefault();
+          if (currentTabIndex - 1 < 0) {
+            currentTabIndex = queriedElements.length;
+          }
+          currentTabIndex = (currentTabIndex - 1) % queriedElements.length;
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          event.stopPropagation();
+          event.preventDefault();
+          currentTabIndex = (currentTabIndex + 1) % queriedElements.length;
+          break;
+        case 'Enter':
+          event.stopPropagation();
+          event.preventDefault();
+          (queriedElements[currentTabIndex] as HTMLElement).click();
+          break;
+        case 'Tab':
+          break;
+        default:
+          return;
+      }
+      if (queriedElements[currentTabIndex].ariaDisabled === 'true') {
+        handleKeyDown(event, true);
+      } else {
+        (queriedElements[currentTabIndex] as HTMLElement).focus({ preventScroll: true });
+        setTimeout(() => {
+          queriedElements[activeTabIndex].ariaSelected = 'true';
+        }, 300);
+      }
+    }
+  };
+
+  return (
+    <Nav
+      ref={rootRef}
+      as={Tag}
+      className={classes}
+      data-testid={testId}
+      {...attributes}
+      onKeyDown={handleKeyDown}
+    ></Nav>
+  );
+};

package/src/Tab/TabNavItem.tsx

@@ -0,0 +1,14 @@
+import React, { ElementType, FC } from 'react';
+import { Nav, NavItemProps } from 'react-bootstrap';
+
+export interface TabNavItemProps extends NavItemProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  testId?: string;
+}
+
+export const TabNavItem: FC<TabNavItemProps> = ({ tag = 'li', testId, ...attributes }) => {
+  const Tag = tag;
+
+  return <Nav.Item as={Tag} role='presentation' data-testid={testId} {...attributes}></Nav.Item>;
+};

package/src/Tab/TabNavLink.tsx

@@ -0,0 +1,14 @@
+import React, { ElementType, FC } from 'react';
+import { Nav, NavLinkProps } from 'react-bootstrap';
+
+export interface TabNavLinkProps extends NavLinkProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  testId?: string;
+}
+
+export const TabNavLink: FC<TabNavLinkProps> = ({ tag, testId, ...attributes }) => {
+  const Tag = tag;
+
+  return <Nav.Link as={Tag} data-testid={testId} {...attributes}></Nav.Link>;
+};

package/src/Tab/TabPanel.tsx

@@ -0,0 +1,14 @@
+import React, { ElementType, FC } from 'react';
+import { NavProps, Tab } from 'react-bootstrap';
+
+export interface TabsProps extends NavProps {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  testId?: string;
+}
+
+export const TabContainer: FC<TabsProps> = ({ tag, testId, ...attributes }) => {
+  const Tag = tag;
+
+  return <Tab.Container as={Tag} data-testid={testId} {...attributes}></Tab.Container>;
+};

package/src/Timeline/TimelinePin.tsx

@@ -40,7 +40,7 @@ export const TimelinePin: FC<TimelinePinProps> = ({
   nowText,
   testId,
   className,
-  tag='h3',
+  tag = 'h3',
   ...attributes
 }) => {
   const { children, ...rest } = attributes;
@@ -51,7 +51,7 @@ export const TimelinePin: FC<TimelinePinProps> = ({
   });
   const pinIcon = (
     <div className='pin-icon'>
-      <Icon icon={iconName || icon} role="img" title={iconTitle} />
+      <Icon icon={iconName || icon} role='img' title={iconTitle} />
     </div>
   );
   const pinLabel = (

package/src/Toggle/Toggle.tsx

@@ -23,7 +23,7 @@ export const Toggle: FC<ToggleProps> = ({ label, testId, ...rest }) => {
     <div className='toggles' data-testid={testId}>
       <Label check for={rest.id}>
         {label}
-        <Input {...rest} type='checkbox' aria-describedby={rest.id ? rest.id + 'Description' : '' } />
+        <Input {...rest} type='checkbox' aria-describedby={rest.id ? rest.id + 'Description' : ''} />
         <span className='lever' />
       </Label>
     </div>