design-react-kit 3.3.1 → 4.0.1

package/src/components/Offcanvas/Offcanvas.js

@@ -1,101 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Transition from 'react-transition-group/Transition'
-
-import { Util, Button } from 'reactstrap'
-
-const {
-  TransitionTimeouts,
-  TransitionPropTypeKeys,
-  TransitionStatuses,
-  pick,
-  omit
-} = Util
-
-const propTypes = {
-  ...Transition.propTypes, // eslint-disable-line react/forbid-foreign-prop-types
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  onClose: PropTypes.func,
-  isOpen: PropTypes.bool
-}
-
-const defaultProps = {
-  ...Transition.defaultProps,
-  timeout: TransitionTimeouts.Collapse,
-  tag: 'div'
-}
-
-const transitionStatusToClassHash = {
-  [TransitionStatuses.ENTERING]: 'navbar-collapsable d-block',
-  [TransitionStatuses.ENTERED]: 'navbar-collapsable d-block expanded',
-  [TransitionStatuses.EXITING]: 'navbar-collapsable d-block',
-  [TransitionStatuses.EXITED]: 'navbar-collapsable'
-}
-
-const defaultStyle = {
-  transition: '400ms ease-in-out',
-  transitionProperty: 'opacity'
-}
-
-const transitionStyles = {
-  entering: {
-    opacity: 0
-  },
-  entered: {
-    opacity: 1
-  },
-  exiting: {
-    opacity: 0
-  }
-}
-
-function getTransitionClass(status) {
-  return transitionStatusToClassHash[status] || ''
-}
-
-export default class Offcanvas extends Component {
-  render() {
-    const { tag: Tag, children, isOpen, onClose, ...attributes } = this.props
-
-    const transitionProps = pick(attributes, TransitionPropTypeKeys)
-    const childProps = omit(attributes, TransitionPropTypeKeys)
-
-    return (
-      <Transition {...transitionProps} in={isOpen}>
-        {status => {
-          const transitionClass = getTransitionClass(status)
-          const currentStyles = transitionStyles[status]
-
-          return (
-            <div
-              className={transitionClass}
-              style={{
-                ...defaultStyle,
-                ...childProps.style,
-                ...currentStyles
-              }}
-              {...childProps}>
-              <div className="close-div" onClick={onClose}>
-                <Button className="close-menu" color="">
-                  <span className="it-close" />
-                  close
-                </Button>
-              </div>
-              <div className="menu-wrapper">
-                <Tag>{children}</Tag>
-              </div>
-            </div>
-          )
-        }}
-      </Transition>
-    )
-  }
-}
-
-Offcanvas.propTypes = propTypes
-Offcanvas.defaultProps = defaultProps

package/src/components/Pager/Pager.js

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  'aria-label': PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'nav',
-  'aria-label': 'pagination'
-}
-
-const Pager = props => {
-  const { children, className, tag: Tag, 'aria-label': label } = props
-
-  const classes = classNames(className, 'pagination-wrapper')
-
-  return (
-    <Tag className={classes} aria-label={label}>
-      {children}
-    </Tag>
-  )
-}
-
-Pager.propTypes = propTypes
-Pager.defaultProps = defaultProps
-
-export default Pager

package/src/components/PagerList/PagerList.js

@@ -1,28 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  className: PropTypes.string,
-  size: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
-}
-
-const defaultProps = {
-  tag: 'ul'
-}
-
-const PagerList = props => {
-  const { className, size, tag: Tag, ...attributes } = props
-
-  const listClasses = classNames(className, 'pagination', {
-    [`pagination-${size}`]: !!size
-  })
-
-  return <Tag {...attributes} className={listClasses} />
-}
-
-PagerList.propTypes = propTypes
-PagerList.defaultProps = defaultProps
-
-export default PagerList

package/src/components/PasswordInput/PasswordInput.js

@@ -1,41 +0,0 @@
-import React, { Component, Fragment } from 'react'
-
-import Input from '../Input/Input'
-
-class PasswordInput extends Component {
-  state = {
-    showPassword: false
-  }
-
-  static defaultProps = {
-    type: 'password'
-  }
-
-  onPasswordToggle = () => {
-    this.setState(prevState => ({
-      showPassword: !prevState.showPassword
-    }))
-  }
-
-  render() {
-    const { showPassword } = this.state
-    const { type, ...rest } = this.props
-
-    const classNames = ['btn-eye', showPassword ? 'eye-off' : 'eye-on'].join(
-      ' '
-    )
-
-    return (
-      <Fragment>
-        <span className={classNames} onClick={this.onPasswordToggle} />
-        <Input {...rest} type={showPassword ? 'text' : type} />
-      </Fragment>
-    )
-  }
-}
-
-PasswordInput.propTypes = {
-  ...Input.propTypes
-}
-
-export default PasswordInput

package/src/components/PasswordMeter/PasswordMeter.js

@@ -1,80 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-const defaultSteps = [
-  {
-    score: 0,
-    label: 'inserisci almeno 8 caratteri e una lettera maiuscola',
-    className: 'danger'
-  },
-  {
-    score: 1,
-    label: 'password troppo debole',
-    className: 'danger'
-  },
-  {
-    score: 25,
-    label: 'password debole',
-    className: 'danger'
-  },
-  {
-    score: 50,
-    label: 'password sicura',
-    className: 'warning'
-  },
-  {
-    score: 75,
-    label: 'password molto sicura',
-    className: 'success'
-  }
-]
-
-class PasswordMeter extends Component {
-  static defaultProps = {
-    score: 0,
-    steps: defaultSteps
-  }
-
-  render() {
-    const { steps, score } = this.props
-
-    const currentStep = steps
-      .filter(step => step.score <= score)
-      .reduce((acc, current) => (acc.score > current.score ? acc : current))
-
-    const { label, className } = currentStep
-
-    return (
-      <div className="psw-wrapper">
-        <span className={`psw-text text-${className} ${className}`}>
-          {label}
-        </span>
-        <div className="progress rounded-0 position-relative psw-meter">
-          <div className="row position-absolute w-100 m-0">
-            <div className="col-3 border-left border-right border-white" />
-            <div className="col-3 border-left border-right border-white" />
-            <div className="col-3 border-left border-right border-white" />
-            <div className="col-3 border-left border-right border-white" />
-          </div>
-          <div
-            className={`progress-bar bg-${className} ${className}`}
-            style={{ width: `${score}%` }}
-          />
-        </div>
-      </div>
-    )
-  }
-}
-
-PasswordMeter.propTypes = {
-  score: PropTypes.number,
-  steps: PropTypes.arrayOf(
-    PropTypes.shape({
-      score: PropTypes.number,
-      label: PropTypes.string,
-      className: PropTypes.string
-    })
-  )
-}
-
-export default PasswordMeter

package/src/components/Progress/Progress.js

@@ -1,88 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  value: PropTypes.number,
-  label: PropTypes.string,
-  indeterminate: PropTypes.bool,
-  color: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div',
-  role: 'progressbar',
-  indeterminate: false
-}
-
-class Progress extends React.Component {
-  render() {
-    const {
-      className,
-      tag: Tag,
-      value,
-      label,
-      indeterminate,
-      color,
-      ...attributes
-    } = this.props
-    const wrapperClasses = classNames('progress-bar-wrapper')
-    const secondaryWrapperClasses = classNames(
-      className,
-      indeterminate ? 'progress-indeterminate' : false,
-      color ? 'progress-color' : false,
-      'progress'
-    )
-    const classes = classNames(
-      className,
-      'progress-bar',
-      color ? `bg-${this.props.color}` : false
-    )
-
-    if (label && value) {
-      return (
-        <Tag className={wrapperClasses}>
-          <div className="progress-bar-label">
-            <span className="sr-only">{this.props.label}</span>
-            {this.props.value + '%'}
-          </div>
-          <Tag className={secondaryWrapperClasses}>
-            <div
-              {...attributes}
-              className={classes}
-              role="progressbar"
-              style={{ width: this.props.value + '%' }}
-              aria-valuenow={this.props.value}
-              aria-valuemin="0"
-              aria-valuemax="100"
-            />
-          </Tag>
-        </Tag>
-      )
-    }
-
-    return (
-      <Tag className={secondaryWrapperClasses}>
-        <div className="progress-bar-label">
-          <span className="sr-only">{this.props.label}</span>
-        </div>
-        <div
-          {...attributes}
-          className={classes}
-          role="progressbar"
-          style={{ width: this.props.value + '%' }}
-          aria-valuenow={this.props.value}
-          aria-valuemin="0"
-          aria-valuemax="100"
-        />
-      </Tag>
-    )
-  }
-}
-
-Progress.propTypes = propTypes
-Progress.defaultProps = defaultProps
-
-export default Progress

package/src/components/Rating/Rating.js

@@ -1,130 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-import { FormGroup, Label } from 'reactstrap'
-import Input from '../Input/Input'
-import Icon from '../Icon/Icon'
-import { noop } from '../utils'
-
-const propTypes = {
-  /** La lista di id per ciascun elemento intero del Rating. La lista deve essere ordinata dal rating 1 al rating 5.  */
-  inputs: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /** Il campo "label" è impostato di default su "Valuta ${n} stelle su 5", ma può essere personalizzato con questa funzione che riceve il numero input come argomento `function (n: number) => string`. */
-  labelTemplate: PropTypes.func,
-  /** Da utilizzare in caso legenda principale del Rating. Passare una componente React da mostrare come legenda (all'interno del tag `<legend>`). It is possible also to show the legend of screen readers only */
-  legend: PropTypes.oneOf([
-    PropTypes.node,
-    PropTypes.string,
-    PropTypes.shape({ content: PropTypes.string, srOnly: PropTypes.bool })
-  ]),
-  /** Mostra la leggenda solo ai dispositivi screen reader */
-
-  /** Parametro name da dare all'input */
-  name: PropTypes.string,
-  /** Classi aggiuntive da usare per il componente wrapper del Rating */
-  wrapperClassName: PropTypes.string,
-  /** Classi aggiuntive da usare per ciascun elemento all'interno del componente Rating */
-  className: PropTypes.string,
-  /** Callback chiamata ad ogni cambio di valore di rating. Il nuovo valore ed il name verranno passati: `function (n, name) => void` */
-  onChangeRating: PropTypes.func,
-  /** Rende il componente read-only */
-  readOnly: PropTypes.bool,
-  /** Il valore corrente del componente */
-  value: PropTypes.number
-}
-
-const defaultProps = {
-  onChangeRating: (value, name) => {},
-  labelTemplate: value => `Valuta ${value} stelle su 5`
-}
-
-const Rating = props => {
-  const {
-    className,
-    inputs,
-    labelTemplate,
-    legend,
-    name,
-    onChangeRating,
-    readOnly,
-    value,
-    wrapperClassName,
-    ...attributes
-  } = props
-
-  // Input data
-  // On the DOM we have to go from 5 to 1
-  const safeInputs = (inputs || []).reverse()
-
-  // Fields
-  const labelFn = labelTemplate
-
-  const onChange = readOnly ? onChangeRating : noop
-
-  const wrapperClasses = classNames(wrapperClassName, {
-    'rating-read-only': readOnly,
-    'rating-label': legend
-  })
-  const fieldClasses = classNames(className)
-  const extraFieldAttrs = readOnly ? { ariaHidden: 'true' } : {}
-
-  // Legend
-  const isLegendString = typeof legend === 'string'
-  const isLegendObject =
-    legend != null &&
-    typeof legend === 'object' &&
-    typeof legend.content === 'string'
-
-  const legendClass = classNames({
-    'sr-only': isLegendObject && legend.srOnly
-  })
-
-  const legendText = isLegendObject ? legend.content : legend
-
-  const legendContent =
-    isLegendObject || isLegendString ? (
-      <span className={legendClass}>{legendText}</span>
-    ) : (
-      legend
-    )
-
-  return (
-    <FormGroup
-      cssModule={{ 'form-group': 'rating' }}
-      tag="fieldset"
-      className={wrapperClasses}
-      {...attributes}>
-      {legend && <legend>{legendContent}</legend>}
-      {safeInputs.map((id, i) => {
-        const currentValue = 5 - i
-
-        return (
-          <>
-            <Input
-              type="radio"
-              id={id}
-              name={name}
-              value={currentValue}
-              cssModule={{ 'form-control': ' ' }}
-              className={fieldClasses}
-              onClick={() => onChange(currentValue, name)}
-              checked={value === currentValue}
-              disabled={readOnly}
-              {...extraFieldAttrs}
-            />
-            <Label className="full" for={id}>
-              <Icon icon="it-star-full" size="sm" />
-              <span className="sr-only">{labelFn(5 - i)}</span>
-            </Label>
-          </>
-        )
-      })}
-    </FormGroup>
-  )
-}
-
-Rating.propTypes = propTypes
-Rating.defaultProps = defaultProps
-
-export default Rating

package/src/components/Section/Section.js

@@ -1,49 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  muted: PropTypes.string,
-  color: PropTypes.string,
-  neutral: PropTypes.string,
-  image: PropTypes.string,
-  className: PropTypes.string
-}
-
-const Section = props => {
-  const {
-    muted,
-    color,
-    neutral,
-    image,
-    className,
-
-    ...attributes
-  } = props
-  const { children, ...rest } = attributes
-
-  const classes = classNames('section', className, {
-    'section-muted': muted,
-    [`section-${color}`]: color,
-    'section-neutral': neutral,
-    'section-image': image
-  })
-
-  const innerClasses = classNames('section-content', className)
-
-  const styleClass = {
-    backgroundImageClass: {
-      'background-image': [`url(${image})`]
-    }
-  }
-
-  return (
-    <div className={classes} style={styleClass.backgroundImageClass} {...rest}>
-      <div className={innerClasses}>{children}</div>
-    </div>
-  )
-}
-
-Section.propTypes = propTypes
-
-export default Section

package/src/components/Separator/Separator.js

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import PropTypes from 'prop-types'
-import classname from 'classnames'
-
-const Separator = ({ colorTop, colorBottom, classNames }) => {
-  const styleTop = classname('Separator-room', colorTop, classNames.top)
-  const styleBottom = classname(
-    'Separator Separator--up',
-    colorBottom,
-    classNames.bottom
-  )
-  return (
-    <div>
-      <hr className={styleTop} />
-      <hr className={styleBottom} />
-    </div>
-  )
-}
-
-Separator.propTypes = {
-  colorTop: PropTypes.string,
-  colorBottom: PropTypes.string,
-  classNames: PropTypes.shape({
-    top: PropTypes.string,
-    bottom: PropTypes.string
-  })
-}
-
-Separator.defaultProps = {
-  classNames: {}
-}
-
-export default Separator

package/src/components/Sidebar/Sidebar.js

@@ -1,53 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string,
-  secondary: PropTypes.bool,
-  left: PropTypes.bool,
-  right: PropTypes.bool,
-  dark: PropTypes.bool
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const Sidebar = props => {
-  const {
-    className,
-    tag: Tag,
-    secondary,
-    left,
-    right,
-    dark,
-    ...attributes
-  } = props
-  const wrapperClasses = classNames(
-    className,
-    left ? 'it-line-left-side' : false,
-    right ? 'it-line-right-side' : false,
-    dark ? 'theme-dark' : false,
-    'sidebar-wrapper'
-  )
-
-  const wrapperClassesLinkList = classNames(
-    secondary ? 'linklist-secondary' : false,
-    'sidebar-linklist-wrapper'
-  )
-  if (secondary) {
-    return <Tag {...attributes} className={wrapperClassesLinkList} />
-  }
-  return (
-    <Tag className={wrapperClasses}>
-      <Tag {...attributes} className={wrapperClassesLinkList} />
-    </Tag>
-  )
-}
-
-Sidebar.propTypes = propTypes
-Sidebar.defaultProps = defaultProps
-
-export default Sidebar

package/src/components/Skiplink/Skiplink.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'div'
-}
-
-const Skiplink = props => {
-  const { className, tag: Tag, ...attributes } = props
-
-  const classes = classNames(className, 'skiplinks')
-
-  return <Tag className={classes} {...attributes} />
-}
-
-Skiplink.propTypes = propTypes
-Skiplink.defaultProps = defaultProps
-
-export default Skiplink

package/src/components/Skiplink/SkiplinkItem.js

@@ -1,25 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
-
-const propTypes = {
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  className: PropTypes.string
-}
-
-const defaultProps = {
-  tag: 'a'
-}
-
-const SkiplinkItem = props => {
-  const { className, tag: Tag, ...attributes } = props
-
-  const classes = classNames(className, 'sr-only', 'sr-only-focusable')
-
-  return <Tag className={classes} {...attributes} />
-}
-
-SkiplinkItem.propTypes = propTypes
-SkiplinkItem.defaultProps = defaultProps
-
-export default SkiplinkItem