design-react-kit 3.3.1 → 4.0.1

package/src/Card/CardCategory.tsx

@@ -0,0 +1,48 @@
+import React, { FC, HTMLAttributes, MouseEvent } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon/Icon';
+
+export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
+  /** Mostra un'icona nella Card. Passare il nome dell'icona per utilizzarlo. */
+  iconName?: string;
+  /** Mostra la data nella Card. Passare una data già formattata come stringa. */
+  date?: string;
+  /** Se usato come link, passare l'URL target. */
+  href?: string;
+  /** Da utilizzare al posto di url quando la gestione del click è in JS */
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export const CardCategory: FC<CardCategoryProps> = ({
+  iconName,
+  date,
+  href,
+  onClick,
+  children,
+  ...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>
+  );
+  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} />;
+
+  return (
+    <div className={classes} {...rest}>
+      {categoryLink}
+      {categoryIcon}
+      {categoryText}
+      {categoryDate}
+    </div>
+  );
+};

package/src/Card/CardFooterCTA.tsx

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

package/src/Card/CardReadMore.tsx

@@ -0,0 +1,35 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon/Icon';
+
+export interface CardReadMoreProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente CardReadMore*/
+  className?: string;
+  /** Il contenuto in testo da mostrare */
+  text: string;
+  /** Passare l'URL target. */
+  href?: string;
+  /** Mostra un'icona nella Card per l'azione "Leggi di più". Passare il nome dell'icona per utilizzarlo. */
+  iconName?: string;
+}
+
+export const CardReadMore: FC<CardReadMoreProps> = ({
+  className,
+  text,
+  iconName = 'it-arrow-right',
+  tag = 'a',
+  href,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames(className, 'read-more');
+  return (
+    <Tag className={classes} href={href} {...attributes}>
+      <span className='text'>{text}</span>
+      {iconName && <Icon icon={iconName} />}
+    </Tag>
+  );
+};

package/src/Card/CardSignature.tsx

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

package/src/Card/CardTag.tsx

@@ -0,0 +1,19 @@
+import React, { AnchorHTMLAttributes, FC, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface CardTagProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente CardTag*/
+  className?: string;
+}
+
+export const CardTag: FC<CardTagProps> = ({
+  className,
+  tag = 'a',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames(className, 'card-tag');
+  return <Tag className={classes} {...attributes} />;
+};

package/src/Card/CardTagsHeader.tsx

@@ -0,0 +1,28 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface CardTagsHeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Mostra la data nella Card. Passare una data già formattata come stringa. */
+  date?: string;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente CardTagsHeader */
+  className?: string;
+}
+
+export const CardTagsHeader: FC<CardTagsHeaderProps> = ({
+  date,
+  children,
+  className,
+  tag = 'div',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('head-tags', className);
+  return (
+    <Tag className={classes} {...attributes}>
+      {children}
+      {date && <span className='data'>{date}</span>}
+    </Tag>
+  );
+};

package/src/Card/CardText.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import { CardText as InnerCardText, 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 CardTextProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente CardText */
+  className?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+}
+
+export const CardText: FC<CardTextProps> = (props) => {
+  return <InnerCardText {...props} />;
+};

package/src/Card/CardTitle.tsx

@@ -0,0 +1,17 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import { CardTitle as InnerCardTitle } 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 CardTitleProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente CardTitle */
+  className?: string;
+}
+
+export const CardTitle: FC<CardTitleProps> = (props) => {
+  return <InnerCardTitle {...props} />;
+};

package/src/Chips/Chip.tsx

@@ -0,0 +1,37 @@
+import React, { HTMLAttributes, FC, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface ChipProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Chip */
+  className?: string;
+  /** Impostarlo su `true` per centrare la label all'interno */
+  simple?: boolean;
+  /** Impostarlo su `true` per una versione più grande del componente Chip. */
+  large?: boolean;
+  /** Impostarlo su `true` per renderizzare il componente Chip come disabilitato */
+  disabled?: boolean;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
+}
+
+export const Chip: FC<ChipProps> = ({
+  className,
+  color = '',
+  tag = 'div',
+  simple = false,
+  large = false,
+  disabled = false,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('chip', className, {
+    'chip-simple': simple,
+    'chip-lg': large,
+    'chip-disabled': disabled,
+    [`chip-${color}`]: color
+  });
+
+  return <Tag className={classes} {...attributes} />;
+};

package/src/Chips/ChipLabel.tsx

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

package/src/Collapse/Collapse.tsx

@@ -0,0 +1,100 @@
+import React, { ElementType, FC, HTMLAttributes, Ref } from 'react';
+import classNames from 'classnames';
+
+import { Collapse as CollapseBase, CSSModule } from 'reactstrap';
+
+// Copy over from reactstrap and add new ones
+export interface CollapseProps extends HTMLAttributes<HTMLElement> {
+  /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
+  isOpen?: boolean;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Indica se il componente Collapse è usato all'interno di un componente navbar */
+  navbar?: boolean;
+  /** Indica se il componente Collapse ha al suo interno un Megamenu */
+  megamenu?: boolean;
+  /** Indica se il componente Collapse è usato all'interno di un componente Header */
+  header?: boolean;
+  delay?: {
+    show: number;
+    hide: number;
+  };
+  /** Funzione chiamata all'apertura del componente Collapse */
+  onOpened?: () => void;
+  /** Funzione chiamata alla chiusura del componente Collapse */
+  onClosed?: () => void;
+  /** Funzione chiamata durante la trasizione di apertura del componente Collapse */
+  onEntering?: () => void;
+  /** Funzione chiamata al termine della trasizione di apertura del componente Collapse */
+  onEntered?: () => void;
+  onExit?: () => void;
+  /** Funzione chiamata durante la trasizione di chiusura del componente Collapse */
+  onExiting?: () => void;
+  /** Funzione chiamata al termine della trasizione di chiusura del componente Collapse */
+  onExited?: () => void;
+  /** Funzione chiamata su click di overlay dell'HeaderNav aperto. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
+  onOverlayClick?: () => void;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: Ref<HTMLElement>;
+}
+
+export const Collapse: FC<CollapseProps> = ({
+  header = false,
+  className,
+  navbar,
+  megamenu,
+  children,
+  isOpen = false,
+  onOverlayClick,
+  cssModule,
+  ...attributes
+}) => {
+  const newCssModule = {
+    'navbar-collapse': 'navbar-collapsable',
+    ...cssModule
+  };
+  if (megamenu || navbar || header) {
+    const classes = classNames(className, 'navbar-collapse', {
+      expanded: isOpen
+    });
+    const style = { display: isOpen ? 'block' : 'none' };
+    return (
+      <CollapseBase
+        className={classes}
+        cssModule={newCssModule}
+        navbar={navbar}
+        style={style}
+        {...attributes}
+      >
+        <div className='overlay' style={style} onClick={onOverlayClick}></div>
+        <div className='close-div sr-only'>
+          <button className='btn close-menu' type='button'>
+            <span className='it-close'></span>close
+          </button>
+        </div>
+        {megamenu ? (
+          <div className='menu-wrapper'>{children}</div>
+        ) : (
+          <>{children}</>
+        )}
+      </CollapseBase>
+    );
+  }
+  const classes = classNames(className, {
+    'link-list-wrapper': header
+  });
+
+  return (
+    <CollapseBase
+      className={classes}
+      cssModule={newCssModule}
+      {...attributes}
+      navbar={navbar}
+      isOpen={isOpen}
+    >
+      {children}
+    </CollapseBase>
+  );
+};

package/src/CookieBar/CookieBar.tsx

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

package/src/CookieBar/CookieBarButton.tsx

@@ -0,0 +1,27 @@
+import React, {
+  ElementType,
+  FC,
+  ButtonHTMLAttributes,
+  AnchorHTMLAttributes
+} from 'react';
+import classNames from 'classnames';
+
+export type CookieBarButtonProps = {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente CookieBarButton */
+  className?: string;
+} & (
+  | ButtonHTMLAttributes<HTMLButtonElement>
+  | AnchorHTMLAttributes<HTMLAnchorElement>
+);
+
+export const CookieBarButton: FC<CookieBarButtonProps> = ({
+  tag = 'button',
+  className,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const activeClass = classNames(className, 'cookiebar-btn');
+  return <Tag className={activeClass} {...attributes} />;
+};

package/src/CookieBar/CookieBarButtons.tsx

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

package/src/Dimmer/Dimmer.tsx

@@ -0,0 +1,51 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon/Icon';
+
+export interface DimmerProps extends HTMLAttributes<HTMLElement> {
+  /** Il nome dell'icona da mostrare. Per una lista completa vedi: @TODO-URL */
+  icon?: string;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
+  /** Classi aggiuntive da usare per il componente Dimmer */
+  className?: string;
+  /**
+   * Classi aggiuntive da usare per il componente contenitore del Dimmer
+   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
+   * passare `true`.
+   * */
+  wrapperClassName?: string | true;
+}
+
+export const Dimmer: FC<DimmerProps> = ({
+  icon,
+  color,
+  className,
+  wrapperClassName,
+  ...attributes
+}) => {
+  const { children, ...rest } = attributes;
+  const classes = classNames(
+    'dimmer',
+    wrapperClassName === true ? className : wrapperClassName,
+    {
+      [`dimmer-${color}`]: color
+    }
+  );
+  const innerClasses = classNames('dimmer-inner', className);
+  const dimmerIcon = icon && (
+    <div className='dimmer-icon'>
+      <Icon icon={icon} />
+    </div>
+  );
+
+  return (
+    <div className={classes} {...rest} style={{ display: 'flex' }}>
+      <div className={innerClasses} {...rest}>
+        {dimmerIcon}
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/Dimmer/DimmerButtons.tsx

@@ -0,0 +1,35 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface DimmerButtonsProps extends HTMLAttributes<HTMLElement> {
+  /** Le varianti di colore definite in Bootstrap Italia per il componente Dimmer */
+  color?: 'primary' | string;
+  /** Classi aggiuntive da usare per il componente Dimmer */
+  className?: string;
+  /** Da utilizzare in presenza di un singolo bottone: quando abilitato ne centra il contenuto. */
+  single?: boolean;
+  /** Da utilizzare con `false` per abilitare il precedente comportamento senza sfondo scuro.
+   * @deprecated
+   */
+  dark?: boolean;
+}
+
+export const DimmerButtons: FC<DimmerButtonsProps> = ({
+  color,
+  className,
+  single = false,
+  dark = true,
+  ...attributes
+}) => {
+  const { children, ...rest } = attributes;
+  const classes = classNames('dimmer-buttons', className, {
+    'bg-dark': dark,
+    'single-button': single
+  });
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};

package/src/FontLoader/FontLoader.tsx

@@ -0,0 +1,32 @@
+import { Component } from 'react';
+
+export interface FontLoaderProps {
+  /**
+   * Una lista di font aggiuntivi da caricare.
+   * I font di default Titillium Web, Lora and Roboto Mono vengono aggiunti a questa lista e caricati sempre.
+   * */
+  fonts?: string[];
+}
+
+const defaultFonts = [
+  'Titillium Web:300,400,600,700:latin-ext',
+  'Lora:400,700:latin-ext',
+  'Roboto Mono:400,700:latin-ext'
+];
+
+export class FontLoader extends Component<FontLoaderProps> {
+  componentDidMount() {
+    if (typeof window !== 'undefined') {
+      const WebFont = require('webfontloader');
+      WebFont.load({
+        custom: {
+          families: [...defaultFonts, ...(this.props.fonts || [])]
+        }
+      });
+    }
+  }
+
+  render() {
+    return null;
+  }
+}

package/src/Forward/Forward.tsx

@@ -0,0 +1,40 @@
+import React, { FC, AnchorHTMLAttributes, MutableRefObject } from 'react';
+import classNames from 'classnames';
+
+// SSR does have no access to the Element global variable, so mock it
+if (typeof window === 'undefined') {
+  global.Element =
+    typeof Element === 'undefined'
+      ? (function () {} as typeof Element)
+      : Element;
+}
+
+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>;
+}
+
+export const Forward: FC<ForwardProps> = ({
+  className,
+  scrollToRef,
+  children,
+  ...attributes
+}) => {
+  const classes = classNames(className, 'forward');
+  return (
+    <a
+      className={classes}
+      onClick={() =>
+        scrollToRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        })
+      }
+      {...attributes}
+    >
+      {children}
+    </a>
+  );
+};

package/src/Grid/GridItem.tsx

@@ -0,0 +1,23 @@
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface GridItemProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Classi aggiuntive da usare per il componente LinkListItem */
+  className?: string;
+  /** Indica il tag da utilizzare per il titolo */
+  tag?: ElementType;
+}
+
+export const GridItem: FC<GridItemProps> = ({
+  tag: Tag = 'div',
+  className,
+  children,
+  ...attributes
+}) => {
+  const classes = classname('it-grid-item-wrapper', className);
+  return (
+    <Tag {...attributes} className={classes}>
+      {children}
+    </Tag>
+  );
+};

package/src/Grid/GridItemText.tsx

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

package/src/Grid/GridItemTextWrapper.tsx

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