design-react-kit 3.3.1 → 4.0.1

package/src/Grid/GridList.tsx

@@ -0,0 +1,20 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface GridListProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Classi aggiuntive da usare per il componente LinkListItem */
+  className?: string;
+}
+
+export const GridList: FC<GridListProps> = ({
+  className,
+  children,
+  ...attributes
+}) => {
+  const classes = classname('it-grid-list-wrapper', className);
+  return (
+    <div {...attributes} className={classes}>
+      {children}
+    </div>
+  );
+};

package/src/Grid/GridRow.tsx

@@ -0,0 +1,20 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface GridRowProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Classi aggiuntive da usare per il componente LinkListItem */
+  className?: string;
+}
+
+export const GridRow: FC<GridRowProps> = ({
+  className,
+  children,
+  ...attributes
+}) => {
+  const classes = classname('grid-row', className);
+  return (
+    <div {...attributes} className={classes}>
+      {children}
+    </div>
+  );
+};

package/src/Grid/index.ts

@@ -0,0 +1,11 @@
+export { GridItem } from './GridItem';
+export { GridItemText } from './GridItemText';
+export { GridItemTextWrapper } from './GridItemTextWrapper';
+export { GridList } from './GridList';
+export { GridRow } from './GridRow';
+
+export type { GridItemProps } from './GridItem';
+export type { GridItemTextProps } from './GridItemText';
+export type { GridItemTextWrapperProps } from './GridItemTextWrapper';
+export type { GridListProps } from './GridList';
+export type { GridRowProps } from './GridRow';

package/src/{components/Header/Header.js → Header/Header.tsx}

@@ -1,29 +1,29 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
 
-import HeaderContext, { CENTER, NAVBAR } from './HeaderContext'
+import { HeaderContext, CENTER, NAVBAR } from './HeaderContext';
 
-const propTypes = {
-  /** Classi addizionali per il componente Header */
-  className: PropTypes.string,
-  // cannot use variables above here or storybook writes the full import stacktrace
+export interface HeaderProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente Header */
+  className?: string;
   /** Tipo di componente Header: può essere solamente uno di questi tre tipi */
-  type: PropTypes.oneOf(['slim', 'center', 'navbar']).isRequired,
+  type: 'slim' | 'center' | 'navbar';
   /** Riduce la grandezza del componente Header. Funziona solamente con Header "center". */
-  small: PropTypes.bool,
+  small?: boolean;
   /** Imposta il tema per il componente Header. Per gli Header di tipo "slim" o "center"
    *  il valore di default è "dark". Per l'Header di tipo "nav" il tema di default è "light"
    *  in mobile, mentre "dark" in versione desktop.
    */
-  theme: PropTypes.oneOf(['', 'light', 'dark'])
+  theme?: 'light' | 'dark' | '';
 }
 
-const defaultProps = {
-  small: false
-}
-
-const Header = ({ className, small, theme, type, ...attributes }) => {
+export const Header: FC<HeaderProps> = ({
+  className,
+  small = false,
+  theme = '',
+  type,
+  ...attributes
+}) => {
   // use context here as theme
   const classes = classNames(className, {
     [`it-header-${type}-wrapper`]: type,
@@ -31,15 +31,10 @@ const Header = ({ className, small, theme, type, ...attributes }) => {
     [`theme-${theme}`]: type !== NAVBAR && theme,
     'theme-dark-mobile': type === NAVBAR && theme === 'dark',
     'theme-light-desk': type === NAVBAR && theme === 'light'
-  })
+  });
   return (
     <HeaderContext.Provider value={{ type }}>
       <div className={classes} {...attributes} />
     </HeaderContext.Provider>
-  )
-}
-
-Header.propTypes = propTypes
-Header.defaultProps = defaultProps
-
-export default Header
+  );
+};

package/src/Header/HeaderBrand.tsx

@@ -0,0 +1,90 @@
+import React, {
+  AnchorHTMLAttributes,
+  ElementType,
+  ReactChild,
+  PureComponent
+} from 'react';
+import classNames from 'classnames';
+import { CSSModule, NavbarBrand } from 'reactstrap';
+import { HeaderContext, CENTER } from './HeaderContext';
+import { Icon } from '../Icon/Icon';
+
+export interface HeaderBrandProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente HeaderBrand */
+  className?: string;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+  /** Da usare con il componente Header Nav in versione "responsive" */
+  responsive?: boolean;
+  /** Da utilizzare per specificare URL risorsa esterna. */
+  href?: string;
+  /** Icona da utilizzare nel componente. Utilizzata unicamente quando l'Header è di tipo Center.  */
+  iconName?: string;
+  /** Elementi React da renderizzare al proprio interno. */
+  children: ReactChild | ReactChild[];
+}
+
+export class HeaderBrand extends PureComponent<HeaderBrandProps> {
+  static contextType = HeaderContext;
+
+  render() {
+    const {
+      className,
+      href,
+      iconName,
+      children,
+      tag = 'a',
+      responsive = false,
+      ...attributes
+    } = this.props;
+    const { type } = this.context;
+    const defaultAttributes = { tag };
+    if (type !== CENTER) {
+      const classes = classNames('d-lg-block', className, {
+        'd-none': !responsive
+      });
+      return (
+        <NavbarBrand
+          className={classes}
+          href={href}
+          {...attributes}
+          {...defaultAttributes}
+        >
+          {children}
+        </NavbarBrand>
+      );
+    }
+    return (
+      <div className='it-brand-wrapper'>
+        <a href={href}>
+          {iconName && <Icon icon={iconName} />}
+          <div className='it-brand-text'>
+            {React.Children.map(children, (child, i) => {
+              if (
+                typeof child !== 'object' ||
+                child == null ||
+                !('props' in child)
+              ) {
+                return child;
+              }
+              // convention here: first item is the main title, while others subtext
+              const className = classNames(
+                child.props.className,
+                { 'd-none d-md-block': i } // subtext is anything but first element
+              );
+
+              const props = {
+                className
+              };
+
+              return React.cloneElement(child, props);
+            })}
+          </div>
+        </a>
+      </div>
+    );
+  }
+}

package/src/Header/HeaderContent.tsx

@@ -0,0 +1,42 @@
+import React, { HTMLAttributes, PureComponent } from 'react';
+import classNames from 'classnames';
+import { Navbar } from 'reactstrap';
+
+import { HeaderContext, SLIM, CENTER, NAVBAR } from './HeaderContext';
+
+export interface HeaderContentProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente HeaderContent */
+  className?: string;
+  /** Da utilizzare per indicare che all'interno dell'Header verrà utilizzato un Megamenu */
+  megamenu?: boolean;
+  /** Parametro per il controllo responsive del componente secondo Bootstrap Italia. */
+  expand?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export class HeaderContent extends PureComponent<HeaderContentProps> {
+  static contextType = HeaderContext;
+  render() {
+    const { className, megamenu, ...attributes } = this.props;
+    const { type } = this.context;
+    const classes = classNames(className, {
+      'it-header-slim-wrapper-content': type === SLIM,
+      'it-header-center-content-wrapper': type === CENTER,
+      navbar: type === NAVBAR,
+      'has-megamenu': megamenu
+    });
+
+    const Content =
+      type === NAVBAR ? (
+        <Navbar className={classes} {...attributes} />
+      ) : (
+        <div className={classes} {...attributes} />
+      );
+    return (
+      <div className='container'>
+        <div className='row'>
+          <div className='col-12'>{Content}</div>
+        </div>
+      </div>
+    );
+  }
+}

package/src/Header/HeaderContext.tsx

@@ -0,0 +1,9 @@
+import React, { Context } from 'react';
+
+export const SLIM = 'slim';
+export const CENTER = 'center';
+export const NAVBAR = 'navbar';
+
+export const HeaderContext: Context<{
+  type?: typeof SLIM | typeof CENTER | typeof NAVBAR;
+}> = React.createContext({});

package/src/Header/HeaderLinkZone.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface HeaderLinkZoneProps extends HTMLAttributes<HTMLElement> {
+  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
+  className?: string;
+}
+
+export const HeaderLinkZone: FC<HeaderLinkZoneProps> = ({
+  className,
+  ...attributes
+}) => {
+  const classes = classNames(className);
+  return (
+    <div className='nav-mobile'>
+      <nav className={classes} {...attributes} />
+    </div>
+  );
+};

package/src/Header/HeaderRightZone.tsx

@@ -0,0 +1,26 @@
+import React, { PureComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { HeaderContext, SLIM } from './HeaderContext';
+
+export interface HeaderRightZoneProps extends HTMLAttributes<HTMLElement> {
+  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
+  className?: string;
+}
+
+export class HeaderRightZone extends PureComponent<HeaderRightZoneProps> {
+  static contextType = HeaderContext;
+
+  render() {
+    const { className, ...attributes } = this.props;
+    const { type } = this.context;
+    const classes = classNames(className, {
+      // BI >= 1.3.6
+      'it-header-slim-right-zone': type === SLIM,
+      // BI < 1.3.6
+      'header-slim-right-zone': type === SLIM,
+      'it-right-zone': type !== SLIM
+    });
+    return <div className={classes} {...attributes} />;
+  }
+}

package/src/Header/HeaderSearch.tsx

@@ -0,0 +1,33 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon/Icon';
+
+export interface HeaderSearchProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente HeaderSearch */
+  className?: string;
+  /** Etichetta di testo da applicare all'elemento. In caso di stringa vuota non verrà mostrato alcun testo */
+  label: string;
+  /** Nome dell'icona da utilizzare */
+  iconName: string;
+  /** Indirizzo di indirizzamento al click dell'icona */
+  href?: string;
+}
+
+export const HeaderSearch: FC<HeaderSearchProps> = ({
+  className,
+  label,
+  href,
+  iconName = 'it-search',
+  ...attributes
+}) => {
+  const classes = classNames('it-search-wrapper', className);
+  return (
+    <div className={classes} {...attributes}>
+      {label && <span className='d-none d-md-block'>{label}</span>}
+      <a className='search-link rounded-icon' aria-label={label} href={href}>
+        <Icon icon={iconName} />
+      </a>
+    </div>
+  );
+};

package/src/Header/HeaderSocialsZone.tsx

@@ -0,0 +1,26 @@
+import React, { FC, HTMLAttributes, ReactChild } from 'react';
+import classNames from 'classnames';
+
+export interface HeaderSocialsZoneProps extends HTMLAttributes<HTMLElement> {
+  /** Classi addizionali per il componente HeaderSocialsZone, verrà applicato all'elemento wrapper più esterno. */
+  className?: string;
+  /** Etichetta utilizzata per presentare i social presenti. In caso di stringa vuota non verrà mostrata alcuna etichetta */
+  label?: string;
+  /** Utilizzato per elencare i social da mostrare */
+  children?: ReactChild;
+}
+
+export const HeaderSocialsZone: FC<HeaderSocialsZoneProps> = ({
+  className,
+  children,
+  label,
+  ...attributes
+}) => {
+  const classes = classNames('it-socials d-none d-md-flex', className);
+  return (
+    <div className={classes} {...attributes}>
+      {label && <span>{label}</span>}
+      {children}
+    </div>
+  );
+};

package/src/Header/HeaderToggler.tsx

@@ -0,0 +1,46 @@
+import React, { PureComponent, ElementType, ButtonHTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { NavbarToggler } from 'reactstrap';
+
+import { HeaderContext, SLIM, NAVBAR } from './HeaderContext';
+
+export interface HeaderTogglerProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Tipo di elemento DOM da utilizzare: di default "a" per Header Slim, "button" per altri tipi di Header.
+   * Se fornito questo sovrascriverà il valore di default.
+   */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente HeaderToggler */
+  className?: string;
+  /** Indica l'attributo "type" sull'elemento DOM. Di default '' per Header Slim, "button" per altri tipi di Header.
+   * Se fornito questo sovrascriverà il valore di default.
+   */
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export class HeaderToggler extends PureComponent<HeaderTogglerProps> {
+  static contextType = HeaderContext;
+  render() {
+    const { className, tag, type, ...attributes } = this.props;
+    const { type: HeaderType } = this.context;
+    const BUTTON = 'button';
+    const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
+    const defaultType = HeaderType === SLIM ? undefined : BUTTON;
+    const classes = classNames(
+      {
+        'it-opener d-lg-none': HeaderType === SLIM,
+        'custom-navbar-toggler': HeaderType === NAVBAR
+      },
+      className
+    );
+    return (
+      <NavbarToggler
+        className={classes}
+        {...attributes}
+        tag={tag || defaultTag}
+        type={type || defaultType}
+        href='#'
+      />
+    );
+  }
+}

package/src/{components/Header/Headers.js → Header/Headers.tsx}

@@ -1,23 +1,22 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Sticky, StickyProvider } from 'react-stickup'
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { Sticky, StickyProvider } from 'react-stickup';
 
-const propTypes = {
+export interface HeadersProps extends HTMLAttributes<HTMLElement> {
   /** Aggiunge un ombra per enfatizzare il componente rispetto alla pagina in cui è contenuto */
-  shadow: PropTypes.bool,
+  shadow?: boolean;
   /** Aggiunge il comportamento "sticky" ai componenti Header contenuti */
-  sticky: PropTypes.bool,
+  sticky?: boolean;
   /** Classi addizionali per il componente Headers */
-  className: PropTypes.string
+  className?: string;
 }
 
-const defaultProps = {
-  shadow: false,
-  sticky: false
-}
-
-const Headers = ({ className, shadow, sticky, ...attributes }) => {
+export const Headers: FC<HeadersProps> = ({
+  className,
+  shadow = false,
+  sticky = false,
+  ...attributes
+}) => {
   const classes = classNames(
     'it-header-wrapper',
     {
@@ -25,9 +24,9 @@ const Headers = ({ className, shadow, sticky, ...attributes }) => {
       'it-header-sticky': sticky
     },
     className
-  )
+  );
   if (!sticky) {
-    return <div className={classes} {...attributes}></div>
+    return <div className={classes} {...attributes}></div>;
   }
   return (
     <StickyProvider>
@@ -35,9 +34,5 @@ const Headers = ({ className, shadow, sticky, ...attributes }) => {
         <div className={classes} {...attributes}></div>
       </Sticky>
     </StickyProvider>
-  )
-}
-
-Headers.propTypes = propTypes
-Headers.defaultProps = defaultProps
-export default Headers
+  );
+};

package/src/Hero/Hero.tsx

@@ -0,0 +1,34 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classname from 'classnames';
+
+export interface HeroProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Indica se il componente Hero deve ridurre l'altezza */
+  small?: boolean;
+  /** Indica al componente Hero di centrare i contenuti testuali orizzontalmente */
+  centered?: boolean;
+  /** Da utilizzare per creare un testi in overlay su immagini, al fine di migliorare la leggibilità di testo */
+  overlay?: 'dark' | 'primary' | 'filter';
+  /** Aggiunge margine negativo in fondo al componente Hero per creare una sovrapposizione con il contenuto seguente. */
+  overlap?: boolean;
+}
+
+export const Hero: FC<HeroProps> = ({
+  tag: Tag = 'div',
+  small,
+  centered,
+  overlay,
+  overlap,
+  className,
+  ...attributes
+}) => {
+  const classes = classname('it-hero-wrapper', className, {
+    'it-overlay': overlay,
+    ['it-' + overlay]: overlay,
+    'it-hero-small-size': small,
+    'it-text-centered': centered,
+    'it-bottom-overlapping-content': overlap
+  });
+  return <Tag className={classes} {...attributes} />;
+};

package/src/Hero/HeroBackground.tsx

@@ -0,0 +1,25 @@
+import React, { FC, HTMLAttributes } from 'react';
+
+export interface HeroBackgroundProps extends HTMLAttributes<HTMLImageElement> {
+  /** Un testo alternativo per descrivere l'immagine mostrata */
+  alt: string;
+  /** L'URI dell'immagine da mostrare */
+  src: string;
+  /** Il titolo dell'immagine */
+  title?: string;
+}
+
+export const HeroBackground: FC<HeroBackgroundProps> = ({
+  alt,
+  ...attributes
+}) => {
+  return (
+    <div className='img-responsive-wrapper'>
+      <div className='img-responsive'>
+        <div className='img-wrapper'>
+          <img {...attributes} alt={alt} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Hero/HeroBody.tsx

@@ -0,0 +1,21 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+import { Col, Container, Row } from 'reactstrap';
+
+export interface HeroBodyProps extends HTMLAttributes<HTMLElement> {
+  /** Eventuali classi aggiuntive */
+  className?: string;
+}
+
+export const HeroBody: FC<HeroBodyProps> = ({ children, className }) => {
+  const classes = classname('it-hero-text-wrapper', 'bg-dark', className);
+  return (
+    <Container>
+      <Row>
+        <Col>
+          <div className={classes}>{children}</div>
+        </Col>
+      </Row>
+    </Container>
+  );
+};

package/src/Hero/HeroButton.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import classname from 'classnames';
+import { Button, ButtonProps } from '../Button/Button';
+
+export interface HeroButtonProps extends ButtonProps {
+  wrapperClassName?: string;
+}
+
+export const HeroButton: FC<HeroButtonProps> = ({
+  wrapperClassName,
+  ...attributes
+}) => {
+  const classes = classname('it-btn-container', wrapperClassName);
+  return (
+    <div className={classes}>
+      <Button size='sm' {...attributes} />
+    </div>
+  );
+};

package/src/Hero/HeroCategory.tsx

@@ -0,0 +1,15 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface HeroCategoryProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Eventuali classi aggiuntive per la categoria */
+  className?: string;
+}
+
+export const HeroCategory: FC<HeroCategoryProps> = ({
+  className,
+  ...attributes
+}) => {
+  const classes = classname('it-category', className);
+  return <span {...attributes} className={classes} />;
+};

package/src/Hero/HeroTitle.tsx

@@ -0,0 +1,16 @@
+import React, { ElementType, FC, HTMLAttributes } from 'react';
+import classname from 'classnames';
+
+export interface HeroTitleProps extends HTMLAttributes<HTMLSpanElement> {
+  /** Indica il tag da utilizzare per il titolo */
+  tag?: ElementType;
+}
+
+export const HeroTitle: FC<HeroTitleProps> = ({
+  tag: Tag = 'h1',
+  className,
+  ...attributes
+}) => {
+  const classes = classname(className);
+  return <Tag {...attributes} className={classes} />;
+};

package/src/Hero/index.ts

@@ -0,0 +1,13 @@
+export { Hero } from './Hero';
+export { HeroBackground } from './HeroBackground';
+export { HeroBody } from './HeroBody';
+export { HeroButton } from './HeroButton';
+export { HeroCategory } from './HeroCategory';
+export { HeroTitle } from './HeroTitle';
+
+export type { HeroProps } from './Hero';
+export type { HeroBackgroundProps } from './HeroBackground';
+export type { HeroBodyProps } from './HeroBody';
+export type { HeroButtonProps } from './HeroButton';
+export type { HeroCategoryProps } from './HeroCategory';
+export type { HeroTitleProps } from './HeroTitle';

package/src/Icon/EmptyIcon.tsx

@@ -0,0 +1,7 @@
+import React, { FC, SVGProps } from 'react';
+
+export const EmptyIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+    <path fill='none' d='M0 0h24v24H0z' />
+  </svg>
+);