design-react-kit 5.0.0-1 → 5.0.0-3

package/package.json

@@ -14,12 +14,16 @@
     "Marco Liberati",
     "Francesco Zaia",
     "Sanyam Dogra",
-    "Silvio Relli"
+    "Silvio Relli",
+    "Sabatino Galasso",
+    "Andrea Stagi",
+    "Federico Turbino",
+    "Nicola Squartini"
   ],
   "bugs": {
     "url": "https://github.com/italia/design-react-kit/issues"
   },
-  "version": "5.0.0-1",
+  "version": "5.0.0-3",
   "license": "BSD-3",
   "module": "dist/esm/index.js",
   "main": "./src/index.tsx",
@@ -51,6 +55,7 @@
     "lint": "npx eslint src stories test --ext js,ts,tsx,jsx,mdx",
     "lint:staged": "npx eslint --ext js,ts,tsx,jsx,mdx",
     "prepare": "tsdx build --format cjs,esm && husky install",
+    "format-code": "npx prettier . --write",
     "size": "size-limit",
     "analyze": "size-limit --why",
     "prestorybook": "npm run svg:import",
@@ -61,7 +66,7 @@
     "chromatic": "npx chromatic"
   },
   "peerDependencies": {
-    "bootstrap-italia": "^2.3.4",
+    "bootstrap-italia": "2.7.9",
     "react": ">=17.0.2"
   },
   "browserslist": [
@@ -112,7 +117,7 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "bootstrap-italia": "^2.6.1",
+    "bootstrap-italia": "2.7.8",
     "browserslist-config-design-italia": "^1.0.0",
     "chromatic": "^6.8.0",
     "circular-dependency-plugin": "^5.2.2",

package/src/Accordion/AccordionBody.tsx

@@ -104,11 +104,7 @@ export const AccordionBody = ({
         const style = height == null ? null : { height };
 
         return (
-          <Tag
-            className={classes}
-            style={{ ...childProps.style, ...style }}
-            {...childProps}
-          >
+          <Tag className={classes} style={{ ...childProps.style, ...style }} {...childProps}>
             <div className={listClasses}>{children}</div>
           </Tag>
         );

package/src/Accordion/AccordionItem.tsx

@@ -8,11 +8,7 @@ export interface AccordionItemProps {
   className?: string;
 }
 
-export const AccordionItem: FC<AccordionItemProps> = ({
-  tag = 'div',
-  className,
-  ...attributes
-}) => {
+export const AccordionItem: FC<AccordionItemProps> = ({ tag = 'div', className, ...attributes }) => {
   const Tag = tag;
   const classes = classNames('accordion-item', className);
 

package/src/Alert/Alert.tsx

@@ -1,10 +1,4 @@
-import React, {
-  FC,
-  HTMLAttributes,
-  MouseEventHandler,
-  ElementType,
-  Ref
-} from 'react';
+import React, { FC, HTMLAttributes, MouseEventHandler, ElementType, Ref } from 'react';
 import { Alert as InnerAlert, FadeProps } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
 

package/src/Avatar/AvatarContainer.tsx

@@ -9,18 +9,11 @@ export interface AvatarContainerProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const AvatarContainer: FC<AvatarContainerProps> = ({
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
+export const AvatarContainer: FC<AvatarContainerProps> = ({ className, tag = 'div', testId, ...attributes }) => {
   const Tag = tag;
   const wrapperClasses = classNames(
     'd-flex align-items-center justify-content-around flex-wrap flex-sm-nowrap',
     className
   );
-  return (
-    <Tag {...attributes} className={wrapperClasses} data-testid={testId} />
-  );
+  return <Tag {...attributes} className={wrapperClasses} data-testid={testId} />;
 };

package/src/Avatar/AvatarExtraText.tsx

@@ -9,12 +9,7 @@ export interface AvatarExtraTextProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const AvatarExtraText: FC<AvatarExtraTextProps> = ({
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
+export const AvatarExtraText: FC<AvatarExtraTextProps> = ({ className, tag = 'div', testId, ...attributes }) => {
   const Tag = tag;
   const wrapperClass = classNames('extra-text', className);
   return <Tag className={wrapperClass} {...attributes} data-testid={testId} />;

package/src/Avatar/AvatarGroupContainer.tsx

@@ -1,8 +1,7 @@
 import React, { FC, HTMLAttributes, ElementType } from 'react';
 import classNames from 'classnames';
 
-export interface AvatarGroupContainerProps
-  extends HTMLAttributes<HTMLUListElement> {
+export interface AvatarGroupContainerProps extends HTMLAttributes<HTMLUListElement> {
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente interno AvatarGroupContainer */
@@ -21,7 +20,5 @@ export const AvatarGroupContainer: FC<AvatarGroupContainerProps> = ({
 }) => {
   const Tag = tag;
   const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);
-  return (
-    <Tag {...attributes} className={wrapperClasses} data-testid={testId} />
-  );
+  return <Tag {...attributes} className={wrapperClasses} data-testid={testId} />;
 };

package/src/Avatar/AvatarStatus.tsx

@@ -11,13 +11,7 @@ export interface AvatarStatusProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const AvatarStatus: FC<AvatarStatusProps> = ({
-  className,
-  tag = 'div',
-  status,
-  testId,
-  ...attributes
-}) => {
+export const AvatarStatus: FC<AvatarStatusProps> = ({ className, tag = 'div', status, testId, ...attributes }) => {
   const Tag = tag;
   const typeClass = classNames('avatar-status', {
     status

package/src/Avatar/AvatarWrapper.tsx

@@ -11,13 +11,7 @@ export interface AvatarWrapperProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const AvatarWrapper: FC<AvatarWrapperProps> = ({
-  className,
-  tag = 'div',
-  extra,
-  testId,
-  ...attributes
-}) => {
+export const AvatarWrapper: FC<AvatarWrapperProps> = ({ className, tag = 'div', extra, testId, ...attributes }) => {
   const Tag = tag;
   const wrapperClass = classNames('avatar-wrapper', className, {
     [`avatar-extra-${extra}`]: extra

package/src/BackToTop/BackToTop.tsx

@@ -66,11 +66,7 @@ export const BackToTop = ({
       style={{ padding: 0 }}
       color={!dark ? 'primary' : ''}
     >
-      <Icon
-        color={dark ? 'secondary' : 'white'}
-        icon='it-arrow-up'
-        style={{ top: 0 }}
-      />
+      <Icon color={dark ? 'secondary' : 'white'} icon='it-arrow-up' style={{ top: 0 }} />
     </Button>
   );
 };

package/src/Badge/Badge.tsx

@@ -1,11 +1,4 @@
-import React, {
-  FC,
-  HTMLAttributes,
-  ElementType,
-  Ref,
-  ReactChild,
-  AnchorHTMLAttributes
-} from 'react';
+import React, { FC, HTMLAttributes, ElementType, Ref, ReactChild, AnchorHTMLAttributes } from 'react';
 import { Badge as BadgeReact } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
 
@@ -36,13 +29,7 @@ export const Badge: FC<BadgeProps> = ({
   ...attributes
 }) => {
   return (
-    <BadgeReact
-      color={color}
-      pill={pill}
-      tag={tag}
-      {...attributes}
-      data-testid={testId}
-    >
+    <BadgeReact color={color} pill={pill} tag={tag} {...attributes} data-testid={testId}>
       {children}
     </BadgeReact>
   );

package/src/BottomNav/BottomNav.tsx

@@ -8,11 +8,7 @@ export interface BottomNavProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const BottomNav: FC<BottomNavProps> = ({
-  tag = 'nav',
-  testId,
-  ...attributes
-}) => {
+export const BottomNav: FC<BottomNavProps> = ({ tag = 'nav', testId, ...attributes }) => {
   const Tag = tag;
   return (
     <Tag className='bottom-nav' data-testid={testId}>

package/src/BottomNav/BottomNavItem.tsx

@@ -59,11 +59,7 @@ export const BottomNavItem: FC<BottomNavItemProps> = ({
   );
   return (
     <li {...attributes} data-testid={testId}>
-      <Tag
-        href={url || link || '#'}
-        className={activeClass}
-        onClick={onLinkClick}
-      >
+      <Tag href={url || link || '#'} className={activeClass} onClick={onLinkClick}>
         {badgeWrapper}
         {alertWrapper}
         <Icon icon={iconName} />

package/src/Button/Button.tsx

@@ -46,13 +46,5 @@ export const Button: FC<ButtonProps> = ({
 
   const baseProps = { color, tag };
 
-  return (
-    <ButtonBase
-      className={classes}
-      data-testid={testId}
-      {...baseProps}
-      {...attributes}
-      {...ariaAttributes}
-    />
-  );
+  return <ButtonBase className={classes} data-testid={testId} {...baseProps} {...attributes} {...ariaAttributes} />;
 };

package/src/Callout/Callout.tsx

@@ -32,11 +32,7 @@ export const Callout: FC<CalloutProps> = ({
   });
   return (
     <Tag className={classes} {...attributes} data-testid={testId}>
-      {!highlight && !detailed ? (
-        <div className='callout-inner'>{children}</div>
-      ) : (
-        children
-      )}
+      {!highlight && !detailed ? <div className='callout-inner'>{children}</div> : children}
     </Tag>
   );
 };

package/src/Callout/CalloutTitle.tsx

@@ -9,13 +9,7 @@ export interface CalloutTitleProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CalloutTitle: FC<CalloutTitleProps> = ({
-  children,
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
+export const CalloutTitle: FC<CalloutTitleProps> = ({ children, className, tag = 'div', testId, ...attributes }) => {
   const Tag = tag;
   const classes = classNames(className, 'callout-title');
   return (

package/src/Card/Card.tsx

@@ -57,12 +57,7 @@ export const Card: FC<CardProps> = ({
 
   return (
     <div className={wrapperClasses} data-testid={testId}>
-      <CardBase
-        {...attributes}
-        className={cardClasses}
-        tag={tag}
-        href={tag === 'a' ? href : undefined}
-      />
+      <CardBase {...attributes} className={cardClasses} tag={tag} href={tag === 'a' ? href : undefined} />
     </div>
   );
 };

package/src/Card/CardBody.tsx

@@ -17,8 +17,6 @@ export interface CardBodyProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CardBody: FC<CardBodyProps> = ({
-  tag = 'div',
-  testId,
-  ...props
-}) => <InnerCardBody {...props} tag={tag} data-testid={testId} />;
+export const CardBody: FC<CardBodyProps> = ({ tag = 'div', testId, ...props }) => (
+  <InnerCardBody {...props} tag={tag} data-testid={testId} />
+);

package/src/Card/CardCategory.tsx

@@ -15,15 +15,7 @@ export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CardCategory: FC<CardCategoryProps> = ({
-  iconName,
-  date,
-  href,
-  onClick,
-  testId,
-  children,
-  ...rest
-}) => {
+export const CardCategory: FC<CardCategoryProps> = ({ iconName, date, href, onClick, testId, children, ...rest }) => {
   const classes = classNames({
     'category-top': date || ' ',
     'categoryicon-top': iconName

package/src/Card/CardFooterCTA.tsx

@@ -9,12 +9,7 @@ export interface CardFooterCTAProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CardFooterCTA: FC<CardFooterCTAProps> = ({
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
+export const CardFooterCTA: FC<CardFooterCTAProps> = ({ className, tag = 'div', testId, ...attributes }) => {
   const Tag = tag;
   const classes = classNames(className, 'it-card-footer');
   return <Tag className={classes} {...attributes} data-testid={testId} />;

package/src/Card/CardSignature.tsx

@@ -9,12 +9,7 @@ export interface CardSignatureProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CardSignature: FC<CardSignatureProps> = ({
-  className,
-  tag = 'span',
-  testId,
-  ...attributes
-}) => {
+export const CardSignature: FC<CardSignatureProps> = ({ className, tag = 'span', testId, ...attributes }) => {
   const Tag = tag;
   const classes = classNames(className, 'card-signature');
   return <Tag className={classes} {...attributes} data-testid={testId} />;

package/src/Card/CardTag.tsx

@@ -9,12 +9,7 @@ export interface CardTagProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   testId?: string;
 }
 
-export const CardTag: FC<CardTagProps> = ({
-  className,
-  tag = 'a',
-  testId,
-  ...attributes
-}) => {
+export const CardTag: FC<CardTagProps> = ({ className, tag = 'a', testId, ...attributes }) => {
   const Tag = tag;
   const classes = classNames(className, 'card-tag');
   return <Tag className={classes} {...attributes} data-testid={testId} />;

package/src/Chips/ChipLabel.tsx

@@ -9,12 +9,7 @@ export interface ChipLabelProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const ChipLabel: FC<ChipLabelProps> = ({
-  className,
-  tag = 'span',
-  testId,
-  ...attributes
-}) => {
+export const ChipLabel: FC<ChipLabelProps> = ({ className, tag = 'span', testId, ...attributes }) => {
   const Tag = tag;
   const classes = classNames(className, 'chip-label');
   return <Tag {...attributes} className={classes} data-testid={testId} />;

package/src/Collapse/Collapse.tsx

@@ -78,11 +78,7 @@ export const Collapse: FC<CollapseProps> = ({
             <span className='it-close'></span>close
           </button>
         </div>
-        {megamenu ? (
-          <div className='menu-wrapper'>{children}</div>
-        ) : (
-          <>{children}</>
-        )}
+        {megamenu ? <div className='menu-wrapper'>{children}</div> : <>{children}</>}
       </CollapseBase>
     );
   }

package/src/CookieBar/CookieBar.tsx

@@ -9,15 +9,8 @@ export interface CookieBarProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CookieBar: FC<CookieBarProps> = ({
-  tag = 'div',
-  className,
-  testId,
-  ...attributes
-}) => {
+export const CookieBar: FC<CookieBarProps> = ({ tag = 'div', className, testId, ...attributes }) => {
   const Tag = tag;
   const wrapperClasses = classNames('cookiebar show', className);
-  return (
-    <Tag {...attributes} className={wrapperClasses} data-testid={testId} />
-  );
+  return <Tag {...attributes} className={wrapperClasses} data-testid={testId} />;
 };

package/src/CookieBar/CookieBarButton.tsx

@@ -1,9 +1,4 @@
-import React, {
-  ElementType,
-  FC,
-  ButtonHTMLAttributes,
-  AnchorHTMLAttributes
-} from 'react';
+import React, { ElementType, FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 export type CookieBarButtonProps = {
@@ -12,17 +7,9 @@ export type CookieBarButtonProps = {
   /** Classi aggiuntive da usare per il componente CookieBarButton */
   className?: string;
   testId?: string;
-} & (
-  | ButtonHTMLAttributes<HTMLButtonElement>
-  | AnchorHTMLAttributes<HTMLAnchorElement>
-);
+} & (ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
 
-export const CookieBarButton: FC<CookieBarButtonProps> = ({
-  tag = 'button',
-  className,
-  testId,
-  ...attributes
-}) => {
+export const CookieBarButton: FC<CookieBarButtonProps> = ({ tag = 'button', className, testId, ...attributes }) => {
   const Tag = tag;
   const activeClass = classNames(className, 'cookiebar-btn');
   return <Tag className={activeClass} {...attributes} data-testid={testId} />;

package/src/CookieBar/CookieBarButtons.tsx

@@ -9,12 +9,7 @@ export interface CookieBarButtonsProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const CookieBarButtons: FC<CookieBarButtonsProps> = ({
-  className,
-  tag = 'div',
-  testId,
-  ...attributes
-}) => {
+export const CookieBarButtons: FC<CookieBarButtonsProps> = ({ className, tag = 'div', testId, ...attributes }) => {
   const Tag = tag;
   const buttonClasses = classNames(className, 'cookiebar-buttons');
   return <Tag className={buttonClasses} {...attributes} data-testid={testId} />;

package/src/Dimmer/Dimmer.tsx

@@ -19,22 +19,11 @@ export interface DimmerProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const Dimmer: FC<DimmerProps> = ({
-  icon,
-  color,
-  className,
-  wrapperClassName,
-  testId,
-  ...attributes
-}) => {
+export const Dimmer: FC<DimmerProps> = ({ icon, color, className, wrapperClassName, testId, ...attributes }) => {
   const { children, ...rest } = attributes;
-  const classes = classNames(
-    'dimmer',
-    wrapperClassName === true ? className : wrapperClassName,
-    {
-      [`dimmer-${color}`]: color
-    }
-  );
+  const classes = classNames('dimmer', wrapperClassName === true ? className : wrapperClassName, {
+    [`dimmer-${color}`]: color
+  });
   const innerClasses = classNames('dimmer-inner', className);
   const dimmerIcon = icon && (
     <div className='dimmer-icon'>
@@ -43,12 +32,7 @@ export const Dimmer: FC<DimmerProps> = ({
   );
 
   return (
-    <div
-      className={classes}
-      {...rest}
-      style={{ display: 'flex' }}
-      data-testid={testId}
-    >
+    <div className={classes} {...rest} style={{ display: 'flex' }} data-testid={testId}>
       <div className={innerClasses} {...rest}>
         {dimmerIcon}
         {children}

package/src/Forward/Forward.tsx

@@ -9,13 +9,7 @@ export interface ForwardProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   testId?: string;
 }
 
-export const Forward: FC<ForwardProps> = ({
-  className,
-  scrollToRef,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const Forward: FC<ForwardProps> = ({ className, scrollToRef, children, testId, ...attributes }) => {
   const classes = classNames(className, 'forward');
   return (
     <a

package/src/Grid/GridItem.tsx

@@ -9,13 +9,7 @@ export interface GridItemProps extends HTMLAttributes<HTMLSpanElement> {
   testId?: string;
 }
 
-export const GridItem: FC<GridItemProps> = ({
-  tag: Tag = 'div',
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const GridItem: FC<GridItemProps> = ({ tag: Tag = 'div', className, children, testId, ...attributes }) => {
   const classes = classname('it-grid-item-wrapper', className);
   return (
     <Tag {...attributes} className={classes} data-testid={testId}>

package/src/Grid/GridItemText.tsx

@@ -7,12 +7,7 @@ export interface GridItemTextProps extends HTMLAttributes<HTMLSpanElement> {
   testId?: string;
 }
 
-export const GridItemText: FC<GridItemTextProps> = ({
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const GridItemText: FC<GridItemTextProps> = ({ className, children, testId, ...attributes }) => {
   const classes = classname('it-griditem-text', className);
   return (
     <span {...attributes} className={classes} data-testid={testId}>

package/src/Grid/GridItemTextWrapper.tsx

@@ -1,19 +1,13 @@
 import React, { FC, HTMLAttributes } from 'react';
 import classname from 'classnames';
 
-export interface GridItemTextWrapperProps
-  extends HTMLAttributes<HTMLSpanElement> {
+export interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElement> {
   /** Classi aggiuntive da usare per l'elemento */
   className?: string;
   testId?: string;
 }
 
-export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({ className, children, testId, ...attributes }) => {
   const classes = classname('it-griditem-text-wrapper', className);
   return (
     <span {...attributes} className={classes} data-testid={testId}>

package/src/Grid/GridList.tsx

@@ -7,12 +7,7 @@ export interface GridListProps extends HTMLAttributes<HTMLSpanElement> {
   testId?: string;
 }
 
-export const GridList: FC<GridListProps> = ({
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const GridList: FC<GridListProps> = ({ className, children, testId, ...attributes }) => {
   const classes = classname('it-grid-list-wrapper', className);
   return (
     <div {...attributes} className={classes} data-testid={testId}>

package/src/Grid/GridRow.tsx

@@ -7,12 +7,7 @@ export interface GridRowProps extends HTMLAttributes<HTMLSpanElement> {
   testId?: string;
 }
 
-export const GridRow: FC<GridRowProps> = ({
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const GridRow: FC<GridRowProps> = ({ className, children, testId, ...attributes }) => {
   const classes = classname('grid-row', className);
   return (
     <div {...attributes} className={classes} data-testid={testId}>

package/src/Header/Header.tsx

@@ -18,14 +18,7 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement> {
   testId?: string;
 }
 
-export const Header: FC<HeaderProps> = ({
-  className,
-  small = false,
-  theme = '',
-  type,
-  testId,
-  ...attributes
-}) => {
+export const Header: FC<HeaderProps> = ({ className, small = false, theme = '', type, testId, ...attributes }) => {
   // use context here as theme
   const classes = classNames(className, {
     [`it-header-${type}-wrapper`]: type,