design-react-kit 3.3.1 → 4.0.1

package/src/Alert/Alert.tsx

@@ -0,0 +1,39 @@
+import React, {
+  FC,
+  HTMLAttributes,
+  MouseEventHandler,
+  ElementType,
+  Ref
+} from 'react';
+import { Alert as InnerAlert, FadeProps, CSSModule } from 'reactstrap';
+
+// Copy over from reactstrap and add new ones
+export interface AlertProps extends HTMLAttributes<HTMLElement> {
+  closeClassName?: string;
+  closeAriaLabel?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
+  /** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert. Valore di default: true. */
+  fade?: boolean;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  transition?: FadeProps;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement>;
+  isOpen?: boolean;
+  toggle?: MouseEventHandler<any>;
+}
+
+const defaultProps = {
+  color: 'success',
+  isOpen: true,
+  fade: true
+};
+
+export const Alert: FC<AlertProps> = (props) => {
+  return <InnerAlert {...props} />;
+};
+
+Alert.defaultProps = defaultProps;

package/src/Avatar/AvatarContainer.tsx

@@ -0,0 +1,22 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarContainerProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarContainer */
+  className?: string;
+}
+
+export const AvatarContainer: FC<AvatarContainerProps> = ({
+  className,
+  tag = 'div',
+  ...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} />;
+};

package/src/Avatar/AvatarExtraText.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarExtraTextProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarExtraText */
+  className?: string;
+}
+
+export const AvatarExtraText: FC<AvatarExtraTextProps> = ({
+  className,
+  tag = 'div',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClass = classNames('extra-text', className);
+  return <Tag className={wrapperClass} {...attributes} />;
+};

package/src/Avatar/AvatarGroupContainer.tsx

@@ -0,0 +1,23 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+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 */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente più esterno di AvatarGroupContainer */
+  wrapperClassName?: string;
+}
+
+export const AvatarGroupContainer: FC<AvatarGroupContainerProps> = ({
+  className,
+  tag = 'ul',
+  wrapperClassName,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('avatar-group-stacked', wrapperClassName);
+  return <Tag {...attributes} className={wrapperClasses}></Tag>;
+};

package/src/Avatar/AvatarIcon.tsx

@@ -0,0 +1,57 @@
+import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarIconProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Utilizzarlo in caso di utilizzo di componenti personalizzati, come ad esempio
+   * un link gestito da handler onClick.
+   * */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarIcon */
+  className?: string;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'green' | 'orange' | 'red' | string;
+  /** Le dimensioni dell'icona definite in Bootstrap Italia */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /**
+   * Quando definito rende l'icona un link cliccabile. Nota: se definito ignora la prop Tag.
+   * */
+  href?: string;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement | HTMLAnchorElement>;
+}
+
+export const AvatarIcon: FC<AvatarIconProps> = ({
+  className,
+  tag = 'div',
+  size = 'md',
+  href,
+  color,
+  innerRef,
+  children,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const typeClass = classNames('avatar', {
+    [`size-${size}`]: size,
+    [`avatar-${color}`]: color
+  });
+  if (href) {
+    return (
+      <a
+        href={href}
+        {...attributes}
+        className={typeClass}
+        ref={innerRef as Ref<HTMLAnchorElement>}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <Tag {...attributes} className={typeClass}>
+      {children}
+    </Tag>
+  );
+};

package/src/Avatar/AvatarPresence.tsx

@@ -0,0 +1,24 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarPresenceProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarPresence */
+  className?: string;
+  /** Utilizzare questo attributo per indicare il tipo di presenza dell'utente. */
+  presence: 'active' | 'busy' | 'hidden' | string;
+}
+
+export const AvatarPresence: FC<AvatarPresenceProps> = ({
+  className,
+  tag = 'div',
+  presence,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const typeClass = classNames('avatar-presence', {
+    presence
+  });
+  return <Tag {...attributes} className={typeClass} />;
+};

package/src/Avatar/AvatarStatus.tsx

@@ -0,0 +1,24 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarStatusProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarStatus */
+  className?: string;
+  /** Utilizzare questo attributo per indicare il tipo di stato dell'utente. */
+  status: 'approved' | 'declined' | 'notify' | string;
+}
+
+export const AvatarStatus: FC<AvatarStatusProps> = ({
+  className,
+  tag = 'div',
+  status,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const typeClass = classNames('avatar-status', {
+    status
+  });
+  return <Tag {...attributes} className={typeClass} />;
+};

package/src/Avatar/AvatarWrapper.tsx

@@ -0,0 +1,24 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface AvatarWrapperProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente AvatarStatus */
+  className?: string;
+  /** Utilizzare questo attributo qualora si volesse utilizzare un componente AvatarExtraText all'interno dell'Avatar. */
+  extra?: 'text' | string;
+}
+
+export const AvatarWrapper: FC<AvatarWrapperProps> = ({
+  className,
+  tag = 'div',
+  extra,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClass = classNames('avatar-wrapper', className, {
+    [`avatar-extra-${extra}`]: extra
+  });
+  return <Tag {...attributes} className={wrapperClass} />;
+};

package/src/Badge/Badge.tsx

@@ -0,0 +1,40 @@
+import React, {
+  FC,
+  HTMLAttributes,
+  ElementType,
+  Ref,
+  ReactChild,
+  AnchorHTMLAttributes
+} from 'react';
+import { Badge as BadgeReact, CSSModule } from 'reactstrap';
+
+export type BadgeProps = {
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
+  /** Quando attivo rende i Badge arrotondati */
+  pill?: boolean;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement>;
+  /** Il contenuto del badge */
+  children: ReactChild;
+} & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>);
+
+export const Badge: FC<BadgeProps> = ({
+  color = 'secondary',
+  pill = false,
+  tag = 'span',
+  children,
+  ...attributes
+}) => {
+  return (
+    <BadgeReact color={color} pill={pill} tag={tag} {...attributes}>
+      {children}
+    </BadgeReact>
+  );
+};

package/src/BottomNav/BottomNav.tsx

@@ -0,0 +1,20 @@
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+
+export interface BottomNavProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente BottomNav */
+  className?: string;
+}
+
+export const BottomNav: FC<BottomNavProps> = ({
+  tag = 'nav',
+  ...attributes
+}) => {
+  const Tag = tag;
+  return (
+    <Tag className='bottom-nav'>
+      <ul {...attributes} />
+    </Tag>
+  );
+};

package/src/BottomNav/BottomNavItem.tsx

@@ -0,0 +1,75 @@
+import React, { ElementType, FC, HTMLAttributes, MouseEvent } from 'react';
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+
+export interface BottomNavItemProps extends HTMLAttributes<HTMLLIElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente BottomNavItem */
+  className?: string;
+  /** Quando abilitato mostra l'elemento come attivo */
+  active?: boolean;
+  /** Indica l'URL a cui puntare (utilizzare o questo o onClick) */
+  url?: string;
+  /** Etichetta da associare all'elemento */
+  label?: string;
+  /** Testo esplicativo per dispositivi screen reader. */
+  srText?: string;
+  /** Icona da utilizzare per l'elemento */
+  iconName?: string;
+  /** Quando abilitato indica una sezione che richiede attenzione o presenta nuovi contenuti */
+  alert?: boolean;
+  /** Visualizza dei badge con indicazioni numeriche in alto a destra dell'icona */
+  badge?: number;
+  /** Da utilizzare al posto di url quando la gestione del click è in JS */
+  onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  /**
+   * Indica l'URL a cui far puntare il componente BottomNavItem.
+   * @deprecated. Usare `url` o `onLinkClick`
+   * */
+  link?: string;
+}
+
+export const BottomNavItem: FC<BottomNavItemProps> = ({
+  active = false,
+  badge,
+  alert = false,
+  url,
+  srText,
+  iconName = 'it-comment',
+  label,
+  tag = 'a',
+  onLinkClick,
+  link,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const activeClass = classNames({ active });
+  const badgeWrapper = Boolean(badge) && (
+    <div className='badge-wrapper'>
+      <span className='bottom-nav-badge'>{badge}</span>
+    </div>
+  );
+  const alertWrapper = Boolean(alert) && (
+    <div className='badge-wrapper'>
+      <span className='bottom-nav-alert' />
+    </div>
+  );
+  return (
+    <li {...attributes}>
+      <Tag
+        href={url || link || '#'}
+        className={activeClass}
+        onClick={onLinkClick}
+      >
+        {badgeWrapper}
+        {alertWrapper}
+        <Icon icon={iconName} />
+        <span className='bottom-nav-label'>
+          {label}
+          {srText ? <span className='sr-only'>{srText}</span> : null}
+        </span>
+      </Tag>
+    </li>
+  );
+};

package/src/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,40 @@
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+import { Breadcrumb as BreadcrumbBase, CSSModule } from 'reactstrap';
+import classNames from 'classnames';
+
+export interface BreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati per la l'elemento lista interno */
+  listTag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Nav */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente di lista interno */
+  listClassName?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Indica se si vuole la versione con fondo scuro */
+  dark?: boolean;
+  /** Etichetta significativa per descrivere il tipo di navigazione */
+  'aria-label'?: string;
+}
+
+export const Breadcrumb: FC<BreadcrumbProps> = ({
+  className,
+  listClassName,
+  dark,
+  'aria-label': label,
+  ...attributes
+}) => {
+  const classes = classNames(className, 'breadcrumb-container');
+  const listClasses = classNames(listClassName, { dark });
+  const ariaLabel = label ?? 'breadcrumb';
+  return (
+    <BreadcrumbBase
+      className={classes}
+      listClassName={listClasses}
+      aria-label={ariaLabel}
+      {...attributes}
+    />
+  );
+};

package/src/Button/Button.tsx

@@ -0,0 +1,55 @@
+import React, { FC, ButtonHTMLAttributes, ElementType, Ref } from 'react';
+import classNames from 'classnames';
+
+import { Button as ButtonBase } from 'reactstrap';
+import type { CSSModule } from 'reactstrap';
+
+// reactstrap wrapper
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Quando abilitato, estende il componente Button fino a prendere tutta la larghezza disponibile */
+  block?: boolean;
+  /** Utilizzarlo disabilitare il colore di sfondo, ed applicarlo invece al bordo.  */
+  outline?: boolean;
+  /** Utilizzarlo in caso di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Button */
+  className?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  innerRef?: Ref<HTMLButtonElement>;
+  /** Da utilizzare si usa una icona nel contenuto del Button */
+  icon?: boolean;
+  /** Da utilizzare per le varianti di dimensione del componente Button */
+  size?: 'lg' | 'sm' | 'xs';
+  /** Da utilizzare per i bottoni di chiusura all'interno di altri componenti (i.e. Chips, Modali, etc...) */
+  close?: boolean;
+  active?: boolean;
+  href?: string;
+}
+
+export const Button: FC<ButtonProps> = ({
+  tag = 'button',
+  icon = false,
+  color = '',
+  className,
+  ...attributes
+}) => {
+  const classes = classNames(className, {
+    'btn-icon': icon
+  });
+
+  const ariaAttributes = {
+    ...(attributes.disabled && { 'aria-disabled': true })
+  };
+
+  const baseProps = { color, tag };
+
+  return (
+    <ButtonBase
+      className={classes}
+      {...baseProps}
+      {...attributes}
+      {...ariaAttributes}
+    />
+  );
+};

package/src/Callout/Callout.tsx

@@ -0,0 +1,35 @@
+import React, { FC, ElementType, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface CalloutProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive per il componente */
+  className?: string;
+  /** Permette di dichiarare il colore del bordo e del titolo */
+  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
+  /** Permette personalizzare il tag utilizzato per il Callout (diverso da "div"). Accetta sia tag HTML che componenti React. */
+  tag?: ElementType;
+  /** Abilita il Callout di tipo Highlight */
+  highlight?: boolean;
+  /** Abilita il Callout di tipo Approfondimento */
+  detailed?: boolean;
+}
+
+export const Callout: FC<CalloutProps> = ({
+  children,
+  color = '',
+  highlight = false,
+  detailed,
+  tag = 'div',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('callout', color, {
+    'callout-highlight': highlight,
+    'callout-more': detailed
+  });
+  return (
+    <Tag className={classes} {...attributes}>
+      {children}
+    </Tag>
+  );
+};

package/src/Callout/CalloutText.tsx

@@ -0,0 +1,29 @@
+import React, { FC, ElementType, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface CalloutTextProps extends HTMLAttributes<HTMLElement> {
+  /** Aumenta la dimensione del testo nel paragrafo contenuto  */
+  bigText?: boolean;
+  /** Classi aggiuntive per il componente */
+  className?: string;
+  /** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da "div"). Accetta sia tag HTML che componenti React. */
+  tag?: ElementType;
+}
+
+export const CalloutText: FC<CalloutTextProps> = ({
+  bigText = false,
+  children,
+  className,
+  tag = 'p',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames(className, {
+    'callout-big-text': bigText
+  });
+  return (
+    <Tag className={classes} {...attributes}>
+      {children}
+    </Tag>
+  );
+};

package/src/Callout/CalloutTitle.tsx

@@ -0,0 +1,24 @@
+import React, { FC, ElementType, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface CalloutTitleProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive per il componente */
+  className?: string;
+  /** Permette personalizzare il tag utilizzato per il contenitore del titolo (diverso da "div"). Accetta sia tag HTML che componenti React. */
+  tag?: ElementType;
+}
+
+export const CalloutTitle: FC<CalloutTitleProps> = ({
+  children,
+  className,
+  tag = 'div',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames(className, 'callout-title');
+  return (
+    <Tag className={classes} {...attributes}>
+      {children}
+    </Tag>
+  );
+};

package/src/Card/Card.tsx

@@ -0,0 +1,49 @@
+import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
+import classNames from 'classnames';
+import { Card as CardBase, CSSModule } from 'reactstrap';
+
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Card */
+  className?: string;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement>;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Abilita la versione teaser della Card */
+  teaser?: boolean;
+  /** Quando attivo distanzia la Card nella versione mobile */
+  spacing?: boolean;
+  /** Quando attivo rimuove il componente contenitore della carta. Utile per card multiple nello stesso contenitore */
+  noWrapper?: boolean;
+  /** Classi aggiuntive per l'elemento contenitore */
+  wrapperClassName?: string;
+}
+
+export const Card: FC<CardProps> = ({
+  tag = 'div',
+  teaser,
+  spacing,
+  noWrapper = false,
+  wrapperClassName,
+  ...attributes
+}) => {
+  const wrapperClasses = classNames('card-wrapper', wrapperClassName, {
+    'card-space': spacing,
+    'card-teaser-wrapper': teaser
+  });
+  const cardClasses = classNames(attributes.className, {
+    'card-teaser': teaser
+  });
+
+  if (noWrapper) {
+    return <CardBase {...attributes} className={cardClasses} tag={tag} />;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <CardBase {...attributes} className={cardClasses} tag={tag} />
+    </div>
+  );
+};

package/src/Card/CardBody.tsx

@@ -0,0 +1,21 @@
+import React, { FC, HTMLAttributes, ElementType, Ref } from 'react';
+import { CardBody as InnerCardBody, CSSModule } from 'reactstrap';
+
+// Note: this is a wrapper class around a reactstrap component.
+// TODO: remove this class and restore the direct import when
+// https://github.com/storybookjs/storybook/issues/10536 gets resolved
+
+export interface CardBodyProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Card */
+  className?: string;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement>;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+}
+
+export const CardBody: FC<CardBodyProps> = ({ tag = 'div', ...props }) => (
+  <InnerCardBody {...props} tag={tag} />
+);