design-react-kit 3.3.1 → 4.0.1

package/src/components/Dimmer/DimmerButtons.js

@@ -1,35 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  color: PropTypes.string,
-  dark: PropTypes.string,
-  single: PropTypes.string,
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  single: false,
-  dark: false
-}
-
-const DimmerButtons = props => {
-  const { color, dark, className, single, ...attributes } = props
-  const { children, ...rest } = attributes
-  const classes = classNames('dimmer-buttons', className, {
-    'single-button': single,
-    'bg-dark': dark
-  })
-
-  return (
-    <div className={classes} {...rest}>
-      {children}
-    </div>
-  )
-}
-
-DimmerButtons.propTypes = propTypes
-DimmerButtons.defaultProps = defaultProps
-
-export default DimmerButtons

package/src/components/FontLoader/FontLoader.js

@@ -1,22 +0,0 @@
-import { Component } from 'react'
-
-export default class ToolkitFontLoader extends Component {
-  componentDidMount() {
-    if (typeof window !== 'undefined') {
-      const WebFont = require('webfontloader')
-      WebFont.load({
-        custom: {
-          families: [
-            'Titillium Web:300,400,600,700:latin-ext',
-            'Lora:400,700:latin-ext',
-            'Roboto Mono:400,700:latin-ext'
-          ]
-        }
-      })
-    }
-  }
-
-  render() {
-    return null
-  }
-}

package/src/components/FormGroup/FormGroup.js

@@ -1,137 +0,0 @@
-import React, { Component } from 'react'
-
-import { FormGroup as ReactStrapFormGroup, Input, Label } from 'reactstrap'
-
-class FormGroup extends Component {
-  state = {
-    active: this.props.active || false,
-    value: null
-  }
-
-  onFocus = (callback, active = true) => {
-    this.setState(
-      {
-        active
-      },
-      () => {
-        if (callback) {
-          callback()
-        }
-      }
-    )
-  }
-
-  onBlur = (callback, active = false) => {
-    this.setState(
-      {
-        active
-      },
-      () => {
-        if (callback) {
-          callback()
-        }
-      }
-    )
-  }
-
-  onChange = (callback, event) => {
-    let value
-    let target
-    if (event && event.persist) {
-      // SyntheticEvent
-      event.persist()
-      target = { event }
-      value = { target }
-    } else if (event.label) {
-      // Autocomplete
-      value = event.label
-    }
-
-    this.setState(
-      {
-        value
-      },
-      () => {
-        if (callback) {
-          callback(event)
-        }
-      }
-    )
-  }
-
-  render() {
-    const { active, value } = this.state
-    const { children, className, col, ...rest } = this.props
-
-    const hasValue = !!value
-
-    let classNames = [className, active ? 'active' : '', col ? 'col' : ''].join(
-      ' '
-    )
-
-    return (
-      <ReactStrapFormGroup {...rest} className={classNames}>
-        {(() =>
-          React.Children.map(children, child => {
-            if (child === null) return
-
-            const { onFocus, onBlur, onChange, className } = child.props
-
-            switch (child.type) {
-              case Input:
-                const isLabelActive = null
-
-                return React.cloneElement(child, {
-                  ...child.props,
-                  onFocus: () => {
-                    this.onFocus(onFocus)
-                  },
-                  onBlur: () => {
-                    this.onBlur(onBlur)
-                  },
-                  onChange: e => {
-                    this.onChange(onChange, e)
-                  },
-                  ...isLabelActive
-                })
-              case Label:
-                let hasChildValue = false
-
-                React.Children.toArray(children)
-                  .filter(child => {
-                    switch (child.type) {
-                      case Input:
-                        return true
-                      default:
-                        return false
-                    }
-                  })
-                  .map(child => {
-                    if (child.props.value) {
-                      hasChildValue = true
-                    }
-                    return false
-                  })
-
-                classNames =
-                  hasValue || hasChildValue
-                    ? [className, 'active'].join(' ')
-                    : className
-
-                return React.cloneElement(child, {
-                  ...child.props,
-                  className: classNames
-                })
-              default:
-                return child
-            }
-          }))()}
-      </ReactStrapFormGroup>
-    )
-  }
-}
-
-FormGroup.defaultProps = ReactStrapFormGroup.defaultProps
-FormGroup.propTypes = ReactStrapFormGroup.propTypes
-
-export default FormGroup

package/src/components/Forward/Forward.js

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-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() {} : Element
-}
-
-const propTypes = {
-  className: PropTypes.string,
-  scrollToRef: PropTypes.shape({ current: PropTypes.instanceOf(Element) })
-}
-
-const Forward = ({ className, scrollToRef, ...attributes }) => {
-  const classes = classNames(className, 'forward')
-  return (
-    <a
-      className={classes}
-      onClick={() =>
-        scrollToRef.current.scrollIntoView({
-          behavior: 'smooth',
-          block: 'start'
-        })
-      }
-      {...attributes}
-    />
-  )
-}
-
-Forward.propTypes = propTypes
-export default Forward

package/src/components/Header/HeaderBrand.js

@@ -1,86 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { NavbarBrand } from 'reactstrap'
-import HeaderContext, { CENTER } from './HeaderContext'
-import Icon from '../Icon/Icon'
-
-const propTypes = {
-  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  /** Classi aggiuntive da usare per il componente HeaderBrand */
-  className: PropTypes.string,
-  /** Da usare per la sovrascrittura di classi predefinite */
-  cssModule: PropTypes.object,
-  /** Da usare con il componente Header Nav in versione "responsive" */
-  responsive: PropTypes.bool,
-  /** Da utilizzare per specificare URL risorsa esterna. */
-  href: PropTypes.string,
-  /** Icona da utilizzare nel componente. Utilizzata unicamente quando l'Header è di tipo Center.  */
-  iconName: PropTypes.string,
-  /** Elementi React da renderizzare al proprio interno. */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ])
-}
-
-const defaultProps = {
-  tag: 'a',
-  responsive: false
-}
-
-export default class HeaderBrand extends PureComponent {
-  static propTypes = propTypes
-  static defaultProps = defaultProps
-  static contextType = HeaderContext
-
-  addChildClasses(child, i) {
-    // convention here: first item is the main title, while others subtext
-    const className = classNames(
-      child.props.className,
-      'no_toc',
-      { 'd-none d-md-block': i } // subtext is anything but first element
-    )
-
-    const props = {
-      className
-    }
-
-    return React.cloneElement(child, props)
-  }
-
-  render() {
-    const {
-      className,
-      href,
-      iconName,
-      children,
-      responsive,
-      ...attributes
-    } = this.props
-    const { type } = this.context
-    if (type !== CENTER) {
-      const classes = classNames('d-lg-block', className, {
-        'd-none': !responsive
-      })
-      return (
-        <NavbarBrand className={classes} href={href} {...attributes}>
-          {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) =>
-              this.addChildClasses(child, i)
-            )}
-          </div>
-        </a>
-      </div>
-    )
-  }
-}

package/src/components/Header/HeaderContent.js

@@ -1,49 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { Navbar } from 'reactstrap'
-
-import HeaderContext, { SLIM, CENTER, NAVBAR } from './HeaderContext'
-
-const propTypes = {
-  /** Classi addizionali per il componente HeaderContent */
-  className: PropTypes.string,
-  /** Da utilizzare per indicare che all'interno dell'Header verrà utilizzato un Megamenu */
-  megamenu: PropTypes.bool,
-  /** Parametro per il controllo responsive del componente: valori Bootstrap standard sono "sm", "md", "lg", "xl" */
-  expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-}
-
-const defaultProps = {}
-
-class HeaderContent extends PureComponent {
-  static propTypes = propTypes
-  static defaultProps = defaultProps
-  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>
-    )
-  }
-}
-
-export default HeaderContent

package/src/components/Header/HeaderContext.js

@@ -1,14 +0,0 @@
-import React from 'react'
-
-/**
- * HeaderContext
- * {
- *  type: PropTypes.oneOf([SLIM, CENTER, NAVBAR]).isRequired
- * }
- */
-
-export default React.createContext({})
-
-export const SLIM = 'slim'
-export const CENTER = 'center'
-export const NAVBAR = 'navbar'

package/src/components/Header/HeaderLinkZone.js

@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  /** Classi addizionali per il componente HeaderLinkZone, applicata all'element "nav" annidato */
-  className: PropTypes.string
-}
-
-const defaultProps = {}
-
-const HeaderLinkZone = ({ className, ...attributes }) => {
-  const classes = classNames(className)
-  return (
-    <div className="nav-mobile">
-      <nav className={classes} {...attributes} />
-    </div>
-  )
-}
-
-HeaderLinkZone.propTypes = propTypes
-HeaderLinkZone.defaultProps = defaultProps
-
-export default HeaderLinkZone

package/src/components/Header/HeaderRightZone.js

@@ -1,33 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import HeaderContext, { SLIM } from './HeaderContext'
-
-const propTypes = {
-  /** Classi addizionali per il componente HeaderRightZone */
-  className: PropTypes.string
-}
-
-const defaultProps = {}
-
-class HeaderRightZone extends PureComponent {
-  static propTypes = propTypes
-  static defaultProps = defaultProps
-  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} />
-  }
-}
-
-export default HeaderRightZone

package/src/components/Header/HeaderSearch.js

@@ -1,36 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import Icon from '../Icon/Icon'
-
-const propTypes = {
-  /** Classi addizionali per il componente HeaderSearch */
-  className: PropTypes.string,
-  /** Etichetta di testo da applicare all'elemento. In caso di stringa vuota non verrà mostrato alcun testo */
-  label: PropTypes.string,
-  /** Nome dell'icona da utilizzare */
-  iconName: PropTypes.string,
-  /** Indirizzo di indirizzamento al click dell'icona */
-  href: PropTypes.string
-}
-
-const defaultProps = {
-  iconName: 'it-search'
-}
-
-const HeaderSearch = ({ className, label, href, iconName, ...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>
-  )
-}
-
-HeaderSearch.propTypes = propTypes
-HeaderSearch.defaultProps = defaultProps
-export default HeaderSearch

package/src/components/Header/HeaderSocialsZone.js

@@ -1,30 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  /** Classi addizionali per il componente HeaderSocialsZone, verrà applicato all'elemento wrapper più esterno. */
-  className: PropTypes.string,
-  /** Etichetta utilizzata per presentare i social presenti. In caso di stringa vuota non verrà mostrata alcuna etichetta */
-  label: PropTypes.string,
-  /** Utilizzato per elencare i social da mostrare */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ])
-}
-const defaultProps = {}
-
-const HeaderSocialsZone = ({ 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>
-  )
-}
-
-HeaderSocialsZone.propTypes = propTypes
-HeaderSocialsZone.defaultProps = defaultProps
-export default HeaderSocialsZone

package/src/components/Header/HeaderToggler.js

@@ -1,50 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import { NavbarToggler } from 'reactstrap'
-
-import HeaderContext, { SLIM, NAVBAR } from './HeaderContext'
-
-const propTypes = {
-  /** 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: PropTypes.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: PropTypes.string,
-  /** Classi addizionali per il componente HeaderToggler */
-  className: PropTypes.string
-}
-
-const defaultProps = {}
-
-export default class HeaderToggler extends PureComponent {
-  static propTypes = propTypes
-  static defaultProps = defaultProps
-  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 ? '' : 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/Hero/Hero.js

@@ -1,10 +0,0 @@
-import React from 'react'
-import { Jumbotron } from 'reactstrap'
-
-// We use this to override its display name (i.e. as shown into Storybook's info addon)
-export default function Hero(props) {
-  return <Jumbotron {...props} />
-}
-
-Hero.defaultProps = Jumbotron.defaultProps
-Hero.propTypes = Jumbotron.propTypes

package/src/components/Icon/Icon.js

@@ -1,42 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-import iconSprite from 'bootstrap-italia/dist/svg/sprite.svg'
-
-const propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.string,
-  size: PropTypes.string,
-  icon: PropTypes.string,
-  padding: PropTypes.bool
-}
-
-const defaultProps = {
-  color: '',
-  size: '',
-  icon: '',
-  padding: false
-}
-
-const Icon = ({ color, size, icon, className, padding, ...attributes }) => {
-  const classes = classNames(
-    'icon',
-    className,
-    {
-      [`icon-${color}`]: color,
-      [`icon-${size}`]: size,
-      'icon-padded': padding
-    },
-    size
-  )
-  return (
-    <svg className={classes} {...attributes}>
-      <use href={`${iconSprite}#${icon}`} />
-    </svg>
-  )
-}
-
-Icon.propTypes = propTypes
-Icon.defaultProps = defaultProps
-
-export default Icon