design-react-kit 5.2.0 → 5.4.0

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/Hero/Hero.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classname from 'classnames';
+import React, { ElementType, FC, HTMLAttributes } from 'react';
 
 export interface HeroProps extends HTMLAttributes<HTMLElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
@@ -16,7 +16,7 @@ export interface HeroProps extends HTMLAttributes<HTMLElement> {
 }
 
 export const Hero: FC<HeroProps> = ({
-  tag: Tag = 'div',
+  tag: Tag = 'section',
   small,
   centered,
   overlay,

package/src/Icon/Icon.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { FC, ImgHTMLAttributes, SVGProps, useEffect, useState } from 'react';
 import { EmptyIcon } from './EmptyIcon';
-import { IconName, allIcons, isBundledIcon, loadIcon } from './assets/index';
+import { IconName, SVGRProps, allIcons, isBundledIcon, loadIcon } from './assets/index';
 export type { IconName } from './assets';
 
 export const iconsList = allIcons;
@@ -61,16 +61,11 @@ export interface IconProps extends SVGProps<SVGSVGElement> {
   testId?: string;
 }
 
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
-
 export const Icon: FC<IconProps> = ({
   color = '',
   size = '',
   icon = '',
-  title = 'icon',
+  title,
   className,
   padding = false,
   onIconLoad,

package/src/Icon/assets/ItAndroid.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItAndroidSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItApple.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItAppleSquare.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowDown.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowDownCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowDownTriangle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowLeft.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowLeftCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowLeftTriangle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowRight.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowRightCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowRightTriangle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowUp.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowUpCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItArrowUpTriangle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItBan.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItBehance.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItBookmark.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItBox.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItBurger.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCalendar.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCamera.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCard.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItChartLine.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCheck.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCheckCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItChevronLeft.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItChevronRight.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItClip.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItClock.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItClose.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCloseBig.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCloseCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCodeCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCollapse.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItComment.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItCopy.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItDelete.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItDesignersItalia.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItDownload.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItError.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItExchangeCircle.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg

package/src/Icon/assets/ItExpand.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
-interface SVGRProps {
-  title?: string;
-  titleId?: string;
-}
+import { SVGRProps } from '.';
 export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg