design-react-kit 5.0.0-1 → 5.0.0-10

package/src/LinkList/LinkListItem.tsx

@@ -1,22 +1,21 @@
-import React, {
-  FC,
-  AnchorHTMLAttributes,
-  ElementType,
-  MouseEvent,
-  MouseEventHandler
-} from 'react';
+import React, { FC, AnchorHTMLAttributes, ElementType, MouseEvent, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
-export interface LinkListItemProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Indica se l'elemento è attivo o no */
   active?: boolean;
   /** Indica se l'elemento è disabilitato o no */
   disabled?: boolean;
+  /** Indica se l'elemento ha dimensioni larghe o no */
+  large?: boolean;
+  /** Indica se l'elemento è bold o no */
+  bold?: boolean;
   /** Indica se l'elemento è un titolo. */
   header?: boolean;
   /** Indica se l'elemento è un divisore */
   divider?: boolean;
+  /** Indica se l'elemento è in un dropdown */
+  inDropdown?: boolean;
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente LinkListItem */
@@ -25,8 +24,8 @@ export interface LinkListItemProps
   wrapperClassName?: string;
   /** Indica il link a cui l'elemento deve puntare. */
   href?: string;
-  /** Utilizzato per aumentare taglia/grandezza dell'elemento: può essere "medium" o "large". */
-  size?: 'medium' | 'large';
+  /** Indica il link route a cui l'elemento deve puntare. */
+  to?: string;
   testId?: string;
 }
 
@@ -34,18 +33,23 @@ const handleDisabledOnClick = (e: MouseEvent<HTMLAnchorElement>) => {
   e.preventDefault();
 };
 
-export const LinkListItem: FC<LinkListItemProps> = ({
+export const LinkListItem: FC<LinkListItemProps> & {
+  TitleIconWrapper: typeof LinkListTitleIconWrapper;
+} = ({
   className,
   active,
   disabled,
   header,
   divider,
+  bold,
+  large,
   href,
-  size,
+  to,
   tag = 'a',
   wrapperClassName,
   testId,
   children,
+  inDropdown,
   ...attributes
 }) => {
   let Tag = tag;
@@ -56,7 +60,9 @@ export const LinkListItem: FC<LinkListItemProps> = ({
       disabled,
       header,
       divider,
-      size
+      large: large,
+      medium: bold,
+      'dropdown-item': inDropdown
     },
     'list-item'
   );
@@ -73,16 +79,16 @@ export const LinkListItem: FC<LinkListItemProps> = ({
     Tag = 'span';
   }
 
+  if (inDropdown) {
+    attributes['role'] = 'menuitem';
+    attributes['tabIndex'] = 0;
+  }
+
   if (header && href) {
     return (
       <li className={wrapperClassName} data-testid={testId}>
         <Tag>
-          <a
-            href={href || '#'}
-            {...attributes}
-            className={classes}
-            {...handlers}
-          >
+          <a href={href || '#'} {...attributes} className={classes} {...handlers}>
             {children}
           </a>
         </Tag>
@@ -92,9 +98,21 @@ export const LinkListItem: FC<LinkListItemProps> = ({
 
   return (
     <li className={wrapperClassName} data-testid={testId}>
-      <Tag {...attributes} className={classes} href={href} {...handlers}>
+      <Tag
+        role={attributes.onClick ? 'button' : undefined}
+        {...attributes}
+        className={classes}
+        href={href}
+        {...handlers}
+      >
         {children}
       </Tag>
     </li>
   );
 };
+
+const LinkListTitleIconWrapper: FC<LinkListItemProps> = ({ children }) => {
+  return <span className='list-item-title-icon-wrapper'>{children}</span>;
+};
+
+LinkListItem.TitleIconWrapper = LinkListTitleIconWrapper;

package/src/Megamenu/MegamenuFooter.tsx

@@ -4,17 +4,26 @@ import classNames from 'classnames';
 export interface MegamenuFooterProps extends HTMLAttributes<HTMLDivElement> {
   /** Classi aggiuntive da usare per il componente Megamenu Footer */
   className?: string;
+  vertical?: boolean;
 }
 
-export const MegamenuFooter: FC<MegamenuFooterProps> = ({
-  className,
-  children,
-  ...attributes
-}) => {
-  const classes = classNames(className, 'it-megamenu-footer');
+export const MegamenuFooter: FC<MegamenuFooterProps> & {
+  Item: typeof Item;
+} = ({ className, children, vertical, ...attributes }) => {
+  const classes = classNames(className, `it-footer-link-wrapper${vertical ? '-vertical' : ''}`);
   return (
     <div className={classes} {...attributes}>
       {children}
     </div>
   );
 };
+
+const Item: FC<HTMLAnchorElement> = ({ href, children }) => {
+  return (
+    <a href={href || '#'} className='it-footer-link'>
+      {children}
+    </a>
+  );
+};
+
+MegamenuFooter.Item = Item;

package/src/Megamenu/MegamenuHighlightColumn.tsx

@@ -8,12 +8,7 @@ export interface MegamenuHCProps extends ColProps {
   /** Classi aggiuntive da usare per il componente Megamenu Highlight Column */
   className?: string;
 }
-export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({
-  description,
-  className,
-  children,
-  ...attributes
-}) => {
+export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({ description, className, children, ...attributes }) => {
   const classes = classNames(className, 'it-vertical', {
     'it-description': description
   });
@@ -21,11 +16,7 @@ export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({
     <Col {...attributes}>
       <Row className='max-height-col'>
         <Col className={classes}>
-          {description ? (
-            <div className='description-content'>{children}</div>
-          ) : (
-            <>{children}</>
-          )}
+          {description ? <div className='description-content'>{children}</div> : <>{children}</>}
         </Col>
       </Row>
     </Col>

package/src/Megamenu/MegamenuItem.tsx

@@ -1,6 +1,7 @@
-import React, { FC, HTMLAttributes } from 'react';
+import React, { FC, HTMLAttributes, useRef } from 'react';
 import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
 import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
 
 export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
   /** Etichetta del megamenu visibile all'interno della barra di navigazione */
@@ -9,19 +10,29 @@ export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
   className?: string;
 }
 
-export const MegamenuItem: FC<MegamenuItemProps> = ({
-  itemName,
-  className,
-  children,
-  ...attributes
-}) => {
+export const MegamenuItem: FC<MegamenuItemProps> = ({ itemName, className, children, ...attributes }) => {
   const classes = classNames(className, 'megamenu');
+  const [isOpen, setShowButton] = React.useState(false);
+  const toggleRef = useRef<DropdownToggle>(null);
+  const toggleClasses = classNames('px-lg-2', 'px-xl-3', {
+    show: isOpen
+  });
+  const setMegamenuButtonClass = () => {
+    //setShowButton(contact);
+    if (toggleRef && toggleRef.current) {
+      setShowButton(toggleRef.current.context.isOpen);
+    }
+  };
+
   return (
-    <UncontrolledDropdown nav tag='li' className={classes} {...attributes}>
-      <DropdownToggle caret nav>
-        {itemName}
+    <UncontrolledDropdown nav tag='li' className={classes} {...attributes} inNavbar onToggle={setMegamenuButtonClass}>
+      <DropdownToggle caret nav tag='button' className={toggleClasses} ref={toggleRef}>
+        <span>{itemName}</span>
+        <Icon icon='it-expand' size='xs' className='ms-1' />
       </DropdownToggle>
-      <DropdownMenu>{children}</DropdownMenu>
+      <DropdownMenu>
+        <div className='megamenu pb-5 pt-3 py-lg-0'>{children}</div>
+      </DropdownMenu>
     </UncontrolledDropdown>
   );
 };

package/src/Modal/ModalBody.tsx

@@ -7,6 +7,4 @@ export interface ModalBodyProps extends HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
 }
 
-export const ModalBody: FC<ModalBodyProps> = (props) => (
-  <InnerModalBody {...props} />
-);
+export const ModalBody: FC<ModalBodyProps> = (props) => <InnerModalBody {...props} />;

package/src/Modal/ModalFooter.tsx

@@ -7,6 +7,4 @@ export interface ModalFooterProps extends HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
 }
 
-export const ModalFooter: FC<ModalFooterProps> = (props) => (
-  <InnerModalFooter {...props} />
-);
+export const ModalFooter: FC<ModalFooterProps> = (props) => <InnerModalFooter {...props} />;

package/src/Modal/ModalHeader.tsx

@@ -34,10 +34,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   cssModule,
   ...props
 }) => {
-  const classes = mapToCssModules(
-    classNames(className, 'modal-header'),
-    cssModule
-  );
+  const classes = mapToCssModules(classNames(className, 'modal-header'), cssModule);
 
   let CloseButton;
 
@@ -55,9 +52,7 @@ export const ModalHeader: FC<ModalHeaderProps> = ({
   return (
     <WrapTag {...props} className={classes}>
       {icon != null ? <Icon icon={icon} /> : null}
-      <Tag className={mapToCssModules('modal-title', cssModule)}>
-        {children}
-      </Tag>
+      <Tag className={mapToCssModules('modal-title', cssModule)}>{children}</Tag>
       {close || CloseButton}
     </WrapTag>
   );

package/src/Nav/Nav.tsx

@@ -35,22 +35,9 @@ export interface NavProps extends HTMLAttributes<HTMLUListElement> {
   secondary?: boolean;
 }
 
-export const Nav: FC<NavProps> = ({
-  className,
-  tag = 'ul',
-  vertical = false,
-  secondary,
-  ...attributes
-}) => {
+export const Nav: FC<NavProps> = ({ className, tag = 'ul', vertical = false, secondary, ...attributes }) => {
   const classes = classNames(className, {
     'navbar-secondary': secondary
   });
-  return (
-    <NavBase
-      className={classes}
-      tag={tag}
-      vertical={vertical}
-      {...attributes}
-    />
-  );
+  return <NavBase className={classes} tag={tag} vertical={vertical} {...attributes} />;
 };

package/src/Notification/Notification.tsx

@@ -3,9 +3,7 @@ import { ToastProps, useToast, cssTransition } from 'react-toastify';
 import { NotificationToastProps } from './NotificationContent';
 import { NotificationCommonProps } from './types';
 
-export type NotificationProps = Omit<ToastProps, 'transition'> &
-  NotificationCommonProps &
-  NotificationToastProps;
+export type NotificationProps = Omit<ToastProps, 'transition'> & NotificationCommonProps & NotificationToastProps;
 
 const dummyTransition = cssTransition({ enter: '', exit: '' });
 
@@ -14,16 +12,7 @@ export const Notification: FC<NotificationProps> = (props) => {
     ...props,
     transition: dummyTransition
   });
-  const {
-    children,
-    autoClose,
-    onClick,
-    role,
-    toastId,
-    deleteToast,
-    closeToast,
-    isIn
-  } = props;
+  const { children, autoClose, onClick, role, toastId, deleteToast, closeToast, isIn } = props;
 
   const customStyle: CSSProperties = {
     display: isIn ? 'block' : 'none'

package/src/Notification/NotificationContent.tsx

@@ -24,14 +24,14 @@ type NotificationElementProps = {
 
 export const getBorderStyleFix = (fix: NotificationCommonProps['fix']) => {
   const borderReset = ['top', 'bottom', 'right', 'left']
-    .filter((curPosition) =>
-      fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'
-    )
+    .filter((curPosition) => (fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'))
     .map(
       (borderPosition) =>
-        `border${
-          borderPosition[0].toUpperCase() + borderPosition.substring(1)
-        }` as 'borderTop' | 'borderBottom' | 'borderLeft' | 'borderRight'
+        `border${borderPosition[0].toUpperCase() + borderPosition.substring(1)}` as
+          | 'borderTop'
+          | 'borderBottom'
+          | 'borderLeft'
+          | 'borderRight'
     );
 
   const customStyle: CSSProperties = {};
@@ -66,17 +66,10 @@ function pickIcon(state: NotificationToastProps['state']) {
   }
 }
 
-function NotificationElement({
-  closeToast,
-  toastProps,
-  title,
-  body,
-  options
-}: NotificationElementProps) {
+function NotificationElement({ closeToast, toastProps, title, body, options }: NotificationElementProps) {
   const globalFix = usePosition();
   const { icon: userIcon, state, fix: localFix, dismissable } = options;
-  const fixPosition =
-    localFix == null && globalFix ? globalFix : localFix || globalFix;
+  const fixPosition = localFix == null && globalFix ? globalFix : localFix || globalFix;
   const { autoClose, style } = toastProps;
   const content = typeof body === 'string' ? <p>{body}</p> : body;
   const icon = userIcon || pickIcon(state);
@@ -125,11 +118,5 @@ export const createNotification = (
   closeToast?: () => void,
   toastProps?: any
 ) => (
-  <NotificationElement
-    title={title}
-    body={body}
-    options={options}
-    closeToast={closeToast}
-    toastProps={toastProps}
-  />
+  <NotificationElement title={title} body={body} options={options} closeToast={closeToast} toastProps={toastProps} />
 );

package/src/Notification/NotificationManager.tsx

@@ -37,8 +37,7 @@ export const NotificationManager = (props: NotificationManagerProps) => {
     enableMultiContainer: props.containerId != null // enable multi container when an explicit id is passed
   };
 
-  const { getToastToRender, containerRef, isToastActive } =
-    useToastContainer(hookProps);
+  const { getToastToRender, containerRef, isToastActive } = useToastContainer(hookProps);
 
   const { containerId, style, fix } = props;
 

package/src/Notification/core.tsx

@@ -4,28 +4,17 @@ import { createNotification } from './NotificationContent';
 import type { NotificationOptions } from './NotificationContent';
 import { NotificationId } from './types';
 
-export function notify(
-  title: string,
-  options?: NotificationOptions
-): NotificationId;
+export function notify(title: string, options?: NotificationOptions): NotificationId;
 
-export function notify(
-  title: string,
-  body: ReactChild,
-  options?: NotificationOptions
-): NotificationId;
+export function notify(title: string, body: ReactChild, options?: NotificationOptions): NotificationId;
 
 export function notify(
   title: string,
   bodyOrOptions?: ReactChild | NotificationOptions,
   options?: NotificationOptions
 ): NotificationId {
-  let body: ReactChild | undefined = isReactChild(bodyOrOptions)
-    ? bodyOrOptions
-    : undefined;
-  const safeOptions = isReactChild(bodyOrOptions)
-    ? { ...options }
-    : bodyOrOptions || {};
+  let body: ReactChild | undefined = isReactChild(bodyOrOptions) ? bodyOrOptions : undefined;
+  const safeOptions = isReactChild(bodyOrOptions) ? { ...options } : bodyOrOptions || {};
   const NotificationContent = createNotification(title, body, safeOptions);
   const internalOptions = {
     ...safeOptions,
@@ -34,13 +23,8 @@ export function notify(
   return toast(NotificationContent, internalOptions) as NotificationId;
 }
 
-function isReactChild(
-  el: ReactChild | NotificationOptions | undefined
-): el is ReactChild {
-  return (
-    el != null &&
-    (typeof el === 'string' || typeof el === 'number' || 'type' in el)
-  );
+function isReactChild(el: ReactChild | NotificationOptions | undefined): el is ReactChild {
+  return el != null && (typeof el === 'string' || typeof el === 'number' || 'type' in el);
 }
 
 notify.dismiss = (id?: NotificationId) => toast.dismiss(id);

package/src/Notification/usePosition.tsx

@@ -1,8 +1,7 @@
 import { createContext, useContext } from 'react';
 import { NotificationCommonProps } from './types';
 
-export const PositionContext =
-  createContext<NotificationCommonProps['fix']>(undefined);
+export const PositionContext = createContext<NotificationCommonProps['fix']>(undefined);
 
 export function usePosition() {
   const context = useContext(PositionContext);

package/src/Pager/Pager.tsx

@@ -33,9 +33,7 @@ export const Pager: FC<PagerProps> = ({
   });
   const listClasses = classNames(listClassName, 'pagination');
   const { ariaLabel, label } = total || {};
-  const totalAriaLabel = ariaLabel ? (
-    <span className='visually-hidden'>{ariaLabel}</span>
-  ) : null;
+  const totalAriaLabel = ariaLabel ? <span className='visually-hidden'>{ariaLabel}</span> : null;
   return (
     <Tag className={classes} {...attributes} data-testid={testId}>
       <ListTag className={listClasses}>{children}</ListTag>

package/src/Progress/Progress.tsx

@@ -43,14 +43,10 @@ export const Progress: FC<ProgressProps> = ({
   }
   const numericValue = Number(value);
   const wrapperClasses = classNames('progress-bar-wrapper');
-  const secondaryWrapperClasses = classNames(
-    wrapperClassName === true ? className : wrapperClassName,
-    'progress',
-    {
-      'progress-indeterminate': indeterminate,
-      'progress-color': color
-    }
-  );
+  const secondaryWrapperClasses = classNames(wrapperClassName === true ? className : wrapperClassName, 'progress', {
+    'progress-indeterminate': indeterminate,
+    'progress-color': color
+  });
   const classes = classNames(className, 'progress-bar', {
     [`bg-${color}`]: color
   });

package/src/Rating/Rating.tsx

@@ -90,11 +90,7 @@ export const Rating: FC<RatingProps> = ({
   }
 
   const legendContent =
-    isCustomLegendObject(legend) || isLegendString ? (
-      <legend className={legendClass}>{legendText}</legend>
-    ) : (
-      legend
-    );
+    isCustomLegendObject(legend) || isLegendString ? <legend className={legendClass}>{legendText}</legend> : legend;
 
   return (
     <FormGroup

package/src/ResponsiveImage/ResponsiveImage.tsx

@@ -10,11 +10,7 @@ export interface ResponsiveImageProps extends HTMLAttributes<HTMLImageElement> {
   testId?: string;
 }
 
-export const ResponsiveImage: FC<ResponsiveImageProps> = ({
-  alt,
-  testId,
-  ...attributes
-}) => {
+export const ResponsiveImage: FC<ResponsiveImageProps> = ({ alt, testId, ...attributes }) => {
   return (
     <div className='img-responsive-wrapper' data-testid={testId}>
       <div className='img-responsive'>

package/src/Section/Section.tsx

@@ -44,20 +44,14 @@ export const Section: FC<SectionProps> = ({
   muted,
   ...rest
 }) => {
-  const classes = classNames(
-    'section',
-    wrapperClassName === true ? className : wrapperClassName,
-    {
-      [`section-${color}`]: color,
-      'section-image': image
-    }
-  );
+  const classes = classNames('section', wrapperClassName === true ? className : wrapperClassName, {
+    [`section-${color}`]: color,
+    'section-image': image
+  });
 
   if (neutral || muted) {
     notifyDeprecation(
-      `Please use the prop "color" instead of the "${
-        neutral ? 'neutral' : 'muted'
-      }" for the Section component.`
+      `Please use the prop "color" instead of the "${neutral ? 'neutral' : 'muted'}" for the Section component.`
     );
   }
 
@@ -77,12 +71,7 @@ export const Section: FC<SectionProps> = ({
   const finalWrapperClassName = classNames(classes, deprecatedClasses);
 
   return (
-    <div
-      className={finalWrapperClassName}
-      style={styleClass.backgroundImageClass}
-      data-testid={testId}
-      {...rest}
-    >
+    <div className={finalWrapperClassName} style={styleClass.backgroundImageClass} data-testid={testId} {...rest}>
       <div className={innerClasses}>{children}</div>
     </div>
   );