design-react-kit 5.3.0 → 5.4.1

package/dist/types/Card/CardCategory.d.ts

@@ -6,6 +6,12 @@ export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
     date?: string;
     /** Se usato come link, passare l'URL target. */
     href?: string;
+    /** Descrizione della data (es. 'Data evento') */
+    dateDescription?: string;
+    /** Descrizione del testo (es. 'Titolo evento') */
+    textDescription?: string;
+    /** Titolo dell' icona */
+    iconTitle?: string;
     /** Da utilizzare al posto di url quando la gestione del click è in JS */
     onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     testId?: string;

package/dist/types/Forward/Forward.d.ts

@@ -1,9 +1,8 @@
-import { FC, AnchorHTMLAttributes, MutableRefObject } from 'react';
+import { FC, AnchorHTMLAttributes } from 'react';
 export interface ForwardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Classi aggiuntive da usare per il componente Forward */
     className?: string;
     /** Riferimento al nodo a cui scorrere quando premuto */
-    scrollToRef: MutableRefObject<Element | null>;
     testId?: string;
 }
 export declare const Forward: FC<ForwardProps>;

package/dist/types/Grid/GridItemTextWrapper.d.ts

@@ -1,7 +1,9 @@
-import { FC, HTMLAttributes } from 'react';
+import { ElementType, FC, HTMLAttributes } from 'react';
 export interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElement> {
     /** Classi aggiuntive da usare per l'elemento */
     className?: string;
     testId?: string;
+    /** Tag dell'elemento (può essere ad esempio trasformato in figcaption) */
+    tag?: ElementType;
 }
 export declare const GridItemTextWrapper: FC<GridItemTextWrapperProps>;

package/dist/types/Input/TextArea.d.ts

@@ -1,4 +1,4 @@
-import React, { Ref, ReactNode, TextareaHTMLAttributes } from 'react';
+import React, { ReactNode, Ref, TextareaHTMLAttributes } from 'react';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     /** Etichetta del campo TextArea. */

package/dist/types/ResponsiveImage/ResponsiveImage.d.ts

@@ -7,5 +7,7 @@ export interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
     /** Il titolo dell'immagine */
     title?: string;
     testId?: string;
+    /** Indica se l'immagine deve essere considerata proporzionata */
+    proportioned?: boolean;
 }
 export declare const ResponsiveImage: FC<ResponsiveImageProps>;

package/dist/types/Timeline/TimelinePin.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes } from 'react';
+import { ElementType, FC, HTMLAttributes } from 'react';
 export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
     /** Classi aggiuntive da usare per il componente TimelinePin */
     className?: string;
@@ -9,6 +9,10 @@ export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
      * @deprecated. Utilizzare `iconName`.
      * */
     icon?: string;
+    /**
+     * Titolo dell'icona all'interno del TimelinePin.
+     * */
+    iconTitle?: string;
     /** Etichetta da associare all'elemento */
     label: string;
     /** Quando abilitato indica che l'evento TimelinePin è collocato nel presente (azzurro) */
@@ -17,6 +21,8 @@ export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
     nowText?: string;
     /** Quando abilitato indica che l'evento TimelinePin è collocato nel passato (blu scuro) */
     past?: boolean;
+    /** Tag del pin da utilizzare a seconda della struttura */
+    tag?: ElementType;
     testId?: string;
 }
 export declare const TimelinePin: FC<TimelinePinProps>;

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/italia/design-react-kit/issues"
   },
-  "version": "5.3.0",
+  "version": "5.4.1",
   "license": "BSD-3",
   "type": "module",
   "module": "./dist/index.js",
@@ -65,7 +65,7 @@
     "postversion": "echo \"You can now publish your version using 'git push --follow-tags'\""
   },
   "peerDependencies": {
-    "bootstrap-italia": "2.8.8",
+    "bootstrap-italia": "2.11.0",
     "react": ">=18.2.0"
   },
   "browserslist": [
@@ -97,7 +97,7 @@
     "@types/react": "^18.2.75",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
-    "bootstrap-italia": "^2.10.0",
+    "bootstrap-italia": "^2.11.0",
     "browserslist-config-design-italia": "^1.0.0",
     "eslint": "^9.10.0",
     "eslint-plugin-mdx": "^3.1.5",
@@ -111,6 +111,7 @@
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-layout-masonry": "^1.2.0",
     "sass": "^1.75.0",
     "storybook": "^8.0.5",
     "ts-jest": "^29.1.2",

package/src/Card/CardCategory.tsx

@@ -10,33 +10,42 @@ export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
   date?: string;
   /** Se usato come link, passare l'URL target. */
   href?: string;
+  /** Descrizione della data (es. 'Data evento') */
+  dateDescription?: string;
+  /** Descrizione del testo (es. 'Titolo evento') */
+  textDescription?: string;
+  /** Titolo dell' icona */
+  iconTitle?: string;
   /** Da utilizzare al posto di url quando la gestione del click è in JS */
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   testId?: string;
 }
 
-export const CardCategory: FC<CardCategoryProps> = ({ iconName, date, href, onClick, testId, children, ...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 && (
-    <a href={href} className='category' onClick={onClick}>
-      {children}
-    </a>
+    <>
+      {textDescription && <span className="visually-hidden">{textDescription}</span>}
+      <a href={href} className='category' onClick={onClick}>
+        {children}
+      </a>
+    </>
   );
   const categoryDate = date && <span className='data'>{date}</span>;
   // Category with icon
   const categoryText = iconName && <span className='text'>{children}</span>;
-  const categoryIcon = iconName && <Icon icon={iconName} />;
+  const categoryIcon = iconName && <Icon icon={iconName} title={iconTitle} />;
 
   return (
     <div className={classes} {...rest} data-testid={testId}>
       {categoryLink}
       {categoryIcon}
-      {categoryText}
-      {categoryDate}
+      {categoryText && textDescription && <span className="visually-hidden">{textDescription}</span>}{categoryText}
+      {dateDescription && <span className="visually-hidden">{dateDescription}</span>}{categoryDate}
     </div>
   );
 };

package/src/Forward/Forward.tsx

@@ -1,25 +1,31 @@
-import React, { FC, AnchorHTMLAttributes, MutableRefObject } from 'react';
+import React, { FC, AnchorHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 export interface ForwardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Classi aggiuntive da usare per il componente Forward */
   className?: string;
   /** Riferimento al nodo a cui scorrere quando premuto */
-  scrollToRef: MutableRefObject<Element | null>;
+  // scrollToRef: MutableRefObject<Element | null>;
   testId?: string;
 }
 
-export const Forward: FC<ForwardProps> = ({ className, scrollToRef, children, testId, ...attributes }) => {
+export const Forward: FC<ForwardProps> = ({ className, children, testId, ...attributes }) => {
   const classes = classNames(className, 'forward');
   return (
     <a
       className={classes}
-      onClick={() =>
-        scrollToRef.current?.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start'
-        })
-      }
+      onClick={(e) => {
+        e.preventDefault()
+        if (attributes.href) {
+          const scrollToRef = document.querySelector(attributes.href)
+          if (scrollToRef) {
+            scrollToRef.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            })
+          }
+        }
+      }}
       data-testid={testId}
       {...attributes}
     >

package/src/Grid/GridItemTextWrapper.tsx

@@ -1,17 +1,20 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 import classname from 'classnames';
 
 export interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElement> {
   /** Classi aggiuntive da usare per l'elemento */
   className?: string;
   testId?: string;
+  /** Tag dell'elemento (può essere ad esempio trasformato in figcaption) */
+  tag?: ElementType;
 }
 
-export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({ className, children, testId, ...attributes }) => {
+export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({ className, children, testId, tag='span', ...attributes }) => {
   const classes = classname('it-griditem-text-wrapper', className);
+  const Tag = tag;
   return (
-    <span {...attributes} className={classes} data-testid={testId}>
+    <Tag {...attributes} className={classes} data-testid={testId}>
       {children}
-    </span>
+    </Tag>
   );
 };

package/src/Input/TextArea.tsx

@@ -1,8 +1,8 @@
-import React, { Ref, ReactNode, TextareaHTMLAttributes } from 'react';
+import React, { ReactNode, Ref, TextareaHTMLAttributes } from 'react';
 
-import { InputContainer } from './InputContainer';
-import { getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
+import { InputContainer } from './InputContainer';
+import { getClasses, getFormControlClass, getValidationTextControlClass, useFocus } from './utils';
 
 export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Etichetta del campo TextArea. */
@@ -56,6 +56,11 @@ export const TextArea = ({
 
   const extraAttributes: { ['aria-describedby']?: string } = {};
 
+  //Chiamo questa funzione per impostare classNames a 'form-control'
+  const formControlClass = getFormControlClass(
+    {},
+    cssModule
+  );
   // associate the input field with the help text
   const infoId = id ? `${id}Description` : undefined;
   if (id) {
@@ -73,6 +78,7 @@ export const TextArea = ({
       label,
       validationText,
       normalized: Boolean(normalized),
+      formControlClass,
       validationTextControlClass,
       isFocused,
       originalWrapperClass

package/src/Input/utils.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useState, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 import { mapToCssModules } from '../utils';
 import type { InputProps } from './Input';
@@ -98,7 +98,7 @@ export function getClasses(
     ),
     cssModule
   );
-  const wrapperClass = mapToCssModules(classNames(className, originalWrapperClass, 'form-group'), cssModule);
+  const wrapperClass = mapToCssModules(classNames(originalWrapperClass, 'form-group'), cssModule);
   const validationTextClass = mapToCssModules(
     classNames(
       {

package/src/List/ListItem.tsx

@@ -55,11 +55,9 @@ export const ListItem: FC<ListItemProps> & {
     if (href) {
       return (
         <li className={wrapperClassName} data-testid={testId}>
-          <Tag>
-            <a href={href || '#'} {...attributes} className={classes}>
-              {children}
-            </a>
-          </Tag>
+          <a href={href || '#'} {...attributes} className={classes}>
+            <div className="it-right-zone">{children}</div>
+          </a>
         </li>
       );
     }

package/src/ResponsiveImage/ResponsiveImage.tsx

@@ -8,16 +8,40 @@ export interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
   /** Il titolo dell'immagine */
   title?: string;
   testId?: string;
+  /** Indica se l'immagine deve essere considerata proporzionata */
+  proportioned?: boolean;
 }
 
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, ...attributes }) => {
-  return (
-    <div className='img-responsive-wrapper' data-testid={testId}>
-      <div className='img-responsive'>
-        <div className='img-wrapper'>
-          <img {...attributes} alt={alt} />
+export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, proportioned=false, children, ...attributes }) => {
+  if (children) {
+    if (proportioned) {
+      return(
+        <div className='img-responsive-wrapper'>
+          <div className='img-responsive'>
+            <figure className='img-wrapper'>
+              <img {...attributes} alt={alt}  className='figure-img img-fluid rounded' />
+              {children}
+            </figure>
+          </div>
+        </div>
+      )
+    } else {
+      return(
+        <figure className='figure img-full w-100 img-responsive-wrapper'>
+          <img {...attributes} alt={alt}  className='figure-img img-fluid rounded' />
+          {children}
+        </figure>
+      )
+    }
+  } else {
+    return (
+      <div className='img-responsive-wrapper' data-testid={testId}>
+        <div className='img-responsive'>
+          <div className='img-wrapper'>
+            <img {...attributes} alt={alt} />
+          </div>
         </div>
       </div>
-    </div>
-  );
+    );
+  }
 };

package/src/ThumbNav/ThumbNavItem.tsx

@@ -21,7 +21,6 @@ export const ThumbNavItem: FC<ThumbNavItemProps> = ({
 
   return (
     <li {...attributes} data-testid={testId}>
-      <img src={'https://picsum.photos/240/160?image=1056'} className='thumb-nav-resizer' aria-hidden='true' alt='' />
       <a href={targetUrl} className={classes}>
         <img src={imageUrl} alt={actionDescription} />
       </a>

package/src/Timeline/TimelinePin.tsx

@@ -1,4 +1,4 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { Icon } from '../Icon/Icon';
@@ -13,6 +13,10 @@ export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
    * @deprecated. Utilizzare `iconName`.
    * */
   icon?: string;
+  /**
+   * Titolo dell'icona all'interno del TimelinePin.
+   * */
+  iconTitle?: string;
   /** Etichetta da associare all'elemento */
   label: string;
   /** Quando abilitato indica che l'evento TimelinePin è collocato nel presente (azzurro) */
@@ -21,18 +25,22 @@ export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
   nowText?: string;
   /** Quando abilitato indica che l'evento TimelinePin è collocato nel passato (blu scuro) */
   past?: boolean;
+  /** Tag del pin da utilizzare a seconda della struttura */
+  tag?: ElementType;
   testId?: string;
 }
 
 export const TimelinePin: FC<TimelinePinProps> = ({
   iconName = 'it-code-circle',
   icon = 'it-code-circle',
+  iconTitle = '',
   label = ' ',
   past,
   now,
   nowText,
   testId,
   className,
+  tag='h3',
   ...attributes
 }) => {
   const { children, ...rest } = attributes;
@@ -43,7 +51,7 @@ export const TimelinePin: FC<TimelinePinProps> = ({
   });
   const pinIcon = (
     <div className='pin-icon'>
-      <Icon icon={iconName || icon} />
+      <Icon icon={iconName || icon} role="img" title={iconTitle} />
     </div>
   );
   const pinLabel = (
@@ -53,14 +61,15 @@ export const TimelinePin: FC<TimelinePinProps> = ({
   );
 
   const pinTextNow = now && <span className='it-now-label d-none d-lg-flex'>{nowText}</span>;
+  const Tag = tag;
 
   return (
     <div className={classes} data-testid={testId}>
       {pinTextNow}
-      <div className={innerClasses} {...rest}>
+      <Tag className={innerClasses} {...rest}>
         {pinIcon}
         {pinLabel}
-      </div>
+      </Tag>
       {children}
     </div>
   );

package/src/Toolbar/ToolbarDividerItem.tsx

@@ -1,3 +1,3 @@
 import React from 'react';
 
-export const ToolbarDividerItem = () => <li className='toolbar-divider' aria-hidden={true} />;
+export const ToolbarDividerItem = () => <li className='toolbar-divider' role='separator' aria-orientation='vertical' />;

package/src/Toolbar/ToolbarItem.tsx

@@ -67,8 +67,6 @@ export interface ToolbarItemProps extends HTMLAttributes<HTMLElement> {
   onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 
-const disabledMessage = ' elemento disabilitato';
-
 function ToolbarItemLabel({
   label,
   size,
@@ -83,12 +81,11 @@ function ToolbarItemLabel({
   const showSrText = size && size !== 'large';
   if (disabled) {
     if (!label || showSrText) {
-      return <span className='visually-hidden'>{disabledMessage}</span>;
+      return <span></span>;
     }
     return (
       <>
         <span className='toolbar-label'>{label}</span>
-        <span className='visually-hidden'>{disabledMessage}</span>
       </>
     );
   }