design-react-kit 3.3.1 → 4.0.1

package/src/PasswordInput/PasswordInput.tsx

@@ -0,0 +1,43 @@
+import React, { Component, Fragment, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { Input } from '../Input/Input';
+
+export interface PasswordInputProps extends HTMLAttributes<HTMLInputElement> {
+  type: 'password' | HTMLInputElement['type'];
+}
+
+interface PasswordInputState {
+  showPassword: boolean;
+}
+
+export class PasswordInput extends Component<
+  PasswordInputProps,
+  PasswordInputState
+> {
+  state = {
+    showPassword: false
+  };
+
+  onPasswordToggle = () => {
+    this.setState((prevState) => ({
+      showPassword: !prevState.showPassword
+    }));
+  };
+
+  render() {
+    const { showPassword } = this.state;
+    const { type = 'password', ...rest } = this.props;
+
+    const className = classNames('btn-eye', {
+      'eye-off': showPassword,
+      'eye-on': !showPassword
+    });
+
+    return (
+      <Fragment>
+        <span className={className} onClick={this.onPasswordToggle} />
+        <Input {...rest} type={showPassword ? 'text' : (type as 'password')} />
+      </Fragment>
+    );
+  }
+}

package/src/Progress/Progress.tsx

@@ -0,0 +1,94 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+import isNumber from 'is-number';
+import { logError } from '../utils';
+
+export interface ProgressProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /**
+   * Classi aggiuntive da usare per il componente contenitore del Progress
+   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
+   * passare `true`.
+   * */
+  wrapperClassName?: string | true;
+  /** Classi aggiuntive da usare per il componente interno del Progress */
+  className?: string;
+  /** Valore corrente (numerico) */
+  value?: number | string;
+  /** Etichetta con testo per indicare il progresso corrente da mostrare ai dispositivi screen reader */
+  label?: string;
+  /** Quando non è possibile stabilire una percentuale di progressione utilizzare una Progress Bar di tipo indeterminato */
+  indeterminate?: boolean;
+  /** Le varianti di colore definite in Bootstrap Italia */
+  color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
+}
+
+export const Progress: FC<ProgressProps> = ({
+  wrapperClassName,
+  className,
+  tag = 'div',
+  value,
+  label,
+  indeterminate = false,
+  color,
+  role = 'progressbar',
+  ...attributes
+}) => {
+  const Tag = tag;
+  if (!isNumber(value) && !indeterminate) {
+    logError(`The passed "value" is not a valid number. You passed "${value}"`);
+  }
+  const numericValue = Number(value);
+  const wrapperClasses = classNames('progress-bar-wrapper');
+  const secondaryWrapperClasses = classNames(
+    wrapperClassName === true ? className : wrapperClassName,
+    'progress',
+    {
+      'progress-indeterminate': indeterminate,
+      'progress-color': color
+    }
+  );
+  const classes = classNames(className, 'progress-bar', {
+    [`bg-${color}`]: color
+  });
+
+  if (label && numericValue) {
+    return (
+      <Tag className={wrapperClasses}>
+        <div className='progress-bar-label'>
+          <span className='sr-only'>{label}</span>
+          {numericValue + '%'}
+        </div>
+        <Tag className={secondaryWrapperClasses}>
+          <div
+            {...attributes}
+            className={classes}
+            role='progressbar'
+            style={{ width: numericValue + '%' }}
+            aria-valuenow={numericValue}
+            aria-valuemin={0}
+            aria-valuemax={100}
+          />
+        </Tag>
+      </Tag>
+    );
+  }
+
+  return (
+    <Tag className={secondaryWrapperClasses}>
+      <div className='progress-bar-label'>
+        <span className='sr-only'>{label}</span>
+      </div>
+      <div
+        {...attributes}
+        className={classes}
+        role='progressbar'
+        style={{ width: numericValue + '%' }}
+        aria-valuenow={numericValue}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      />
+    </Tag>
+  );
+};

package/src/Rating/Rating.tsx

@@ -0,0 +1,130 @@
+import React, { Fragment, FC, ReactNode } from 'react';
+import classNames from 'classnames';
+
+import { FormGroup, Label } from 'reactstrap';
+import { Input } from '../Input/Input';
+import type { InputProps } from '../Input/Input';
+import { Icon } from '../Icon/Icon';
+import { noop } from '../utils';
+
+type UnusedProps =
+  | 'bsSize'
+  | 'size'
+  | 'static'
+  | 'plaintext'
+  | 'normalized'
+  | 'addon'
+  | 'placeholder'
+  | 'label'
+  | 'value'
+  | 'type';
+export interface RatingProps extends Omit<InputProps, UnusedProps> {
+  /** La lista di 5 id, per ciascun elemento intero del Rating. La lista deve essere ordinata dal rating 1 al rating 5.  */
+  inputs: string[];
+  /** 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?: (value: 1 | 2 | 3 | 4 | 5) => string;
+  /** Da utilizzare in caso legenda principale del Rating. Passare una componente React da mostrare come legenda (all'interno del tag `<legend>`). È possibile mostrare la leggenda solo ai dispositivi screen reader */
+  legend?: ReactNode | { content: ReactNode; srOnly: boolean };
+  /** Parametro name da dare all'input */
+  name: string;
+  /** Classi aggiuntive da usare per il componente wrapper del Rating */
+  wrapperClassName?: string;
+  /** Classi aggiuntive da usare per ciascun elemento all'interno del componente Rating */
+  className?: string;
+  /** Callback chiamata ad ogni cambio di valore di rating. Il nuovo valore ed il name verranno passati: `function (n, name) => void` */
+  onChangeRating?: (value: 1 | 2 | 3 | 4 | 5 | number, name: string) => void;
+  /** Rende il componente read-only */
+  readOnly?: boolean;
+  /** Il valore corrente del componente: deve essere compreso tra 1 e 5 */
+  value?: 1 | 2 | 3 | 4 | 5 | number;
+}
+
+export const isCustomLegendObject = (
+  legend: ReactNode | { content: ReactNode; srOnly: boolean }
+): legend is { content: ReactNode; srOnly: boolean } => {
+  return legend != null && typeof legend === 'object' && 'content' in legend;
+};
+
+export const Rating: FC<RatingProps> = ({
+  className,
+  inputs,
+  legend,
+  name,
+  readOnly,
+  value,
+  wrapperClassName,
+  labelTemplate = (value: 1 | 2 | 3 | 4 | 5) => `Valuta ${value} stelle su 5`,
+  onChangeRating = noop,
+  ...attributes
+}) => {
+  // Input data
+  // On the DOM we have to go from 5 to 1
+  const safeInputs = (inputs || []).reverse();
+
+  // Fields
+  const labelFn = labelTemplate;
+
+  const onChange = readOnly ? noop : onChangeRating;
+
+  const wrapperClasses = classNames(wrapperClassName, {
+    'rating-read-only': readOnly,
+    'rating-label': legend
+  });
+  const fieldClasses = classNames(className);
+  const extraFieldAttrs = readOnly ? { 'aria-hidden': true } : {};
+
+  // Legend
+  const isLegendString = typeof legend === 'string';
+
+  let legendClass: string = '';
+  let legendText: ReactNode = legend as string;
+
+  if (isCustomLegendObject(legend)) {
+    legendClass = classNames({
+      'sr-only': legend.srOnly
+    });
+    legendText = legend.content;
+  }
+
+  const legendContent =
+    isCustomLegendObject(legend) || isLegendString ? (
+      <legend className={legendClass}>{legendText}</legend>
+    ) : (
+      legend
+    );
+
+  return (
+    <FormGroup
+      cssModule={{ 'form-group': 'rating' }}
+      tag='fieldset'
+      className={wrapperClasses}
+      {...attributes}
+    >
+      {legend && legendContent}
+      {safeInputs.map((id, i) => {
+        const currentValue = (5 - i) as 1 | 2 | 3 | 4 | 5;
+
+        return (
+          <Fragment key={id}>
+            <Input
+              type='radio'
+              id={id}
+              name={name}
+              value={String(currentValue)}
+              cssModule={{ 'form-control': ' ' }}
+              className={fieldClasses}
+              onChange={() => 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(currentValue)}</span>
+            </Label>
+          </Fragment>
+        );
+      })}
+    </FormGroup>
+  );
+};

package/src/ResponsiveImage/ResponsiveImage.tsx

@@ -0,0 +1,25 @@
+import React, { FC, HTMLAttributes } from 'react';
+
+export interface ResponsiveImageProps 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 ResponsiveImage: FC<ResponsiveImageProps> = ({
+  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/Section/Section.tsx

@@ -0,0 +1,86 @@
+import React, { FC, HTMLAttributes, ReactChild } from 'react';
+import classNames from 'classnames';
+import { notifyDeprecation } from '../utils';
+
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Classi aggiuntive da usare per il contenitore più esterno
+   * Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
+   * passare `true`.
+   * */
+  wrapperClassName?: string | true;
+  /** Classi aggiuntive da usare per il contenitore più interno */
+  className?: string;
+  /**
+   * Colore utilizzato per lo sfondo del componente Section.
+   * In caso di `primary` o `neutral` si consiglia di applicare la classe `.white-color` al contenuto per garantire la leggibilità dei testi.
+   * */
+  color?: 'primary' | 'neutral' | 'muted' | string;
+  /**
+   * Indicare l'URL dell'immagine da utilizzare come sfondo della sezione.
+   */
+  image?: string;
+  /** Il contenuto della sezione */
+  children?: ReactChild | ReactChild[];
+  /** Quando abilitato applica lo sfondo di tipo "neutral" al componente.
+   * @deprecated. Utilizzare `color="neutral"`
+   */
+  neutral?: boolean;
+  /** Quando abilitato applica lo sfondo di tipo "muted" al componente.
+   * @deprecated. Utilizzare `color="muted"`
+   */
+  muted?: boolean;
+}
+
+export const Section: FC<SectionProps> = ({
+  color,
+  image,
+  wrapperClassName,
+  className,
+  children,
+  neutral,
+  muted,
+  ...rest
+}) => {
+  const classes = classNames(
+    'section',
+    wrapperClassName === true ? className : wrapperClassName,
+    {
+      [`section-${color}`]: color,
+      'section-image': image
+    }
+  );
+
+  if (neutral || muted) {
+    notifyDeprecation(
+      `Please use the prop "color" instead of the "${
+        neutral ? 'neutral' : 'muted'
+      }" for the Section component.`
+    );
+  }
+
+  // have them separated from the classes above or these will conflict with the color prop
+  // concatenate them at the end. Worst case a duplicate class will appear
+  const deprecatedClasses = classNames({
+    'section-neutral': neutral,
+    'section-muted': muted
+  });
+
+  const innerClasses = classNames('section-content', className);
+
+  const styleClass = {
+    backgroundImageClass: image ? { backgroundImage: `url(${image})` } : {}
+  };
+
+  return (
+    <div
+      className={`${classes}${
+        deprecatedClasses ? ' ' + deprecatedClasses : ''
+      }`}
+      style={styleClass.backgroundImageClass}
+      {...rest}
+    >
+      <div className={innerClasses}>{children}</div>
+    </div>
+  );
+};

package/src/Select/Select.tsx

@@ -0,0 +1,97 @@
+import React, { FC, ReactElement } from 'react';
+import SelectBase, { components } from 'react-select';
+import { Icon } from '../Icon/Icon';
+import type {
+  Props as SelectBaseProps,
+  IndicatorProps,
+  OptionTypeBase,
+  GroupTypeBase,
+  OptionProps
+} from 'react-select';
+import { styles } from './shared';
+
+export interface SelectProps<
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType>
+> extends SelectBaseProps<OptionType, IsMulti, GroupType> {
+  icon?: boolean;
+  clearText?: string;
+}
+
+const DropdownIndicator = <
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+>(
+  props: IndicatorProps<OptionType, IsMulti, GroupType>
+) => {
+  return (
+    <components.DropdownIndicator {...props}>
+      <Icon icon='it-arrow-down-triangle' aria-hidden />
+    </components.DropdownIndicator>
+  );
+};
+
+const Option = <
+  OptionType extends OptionTypeBase,
+  IsMulti extends boolean,
+  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+>(
+  props: OptionProps<OptionType, IsMulti, GroupType>
+) => {
+  return (
+    <div className='select-pill text-primary'>
+      <components.Option {...props} />
+    </div>
+  );
+};
+
+const CustomClearText: FC<{ clearText: string }> = ({ clearText }) => (
+  <>{clearText}</>
+);
+
+export const Select = <
+  OptionType extends OptionTypeBase = { label: string; value: string },
+  IsMulti extends boolean = false,
+  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+>({
+  clearText = 'Annulla',
+  icon = false,
+  ...props
+}: SelectProps<OptionType, IsMulti, GroupType>): ReactElement<
+  SelectProps<OptionType, IsMulti, GroupType>
+> => {
+  // @TODO: move it outside when migrating to hooks
+  const ClearIndicator = <
+    OptionType extends OptionTypeBase,
+    IsMulti extends boolean,
+    GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+  >(
+    clearIndicatorProps: IndicatorProps<OptionType, IsMulti, GroupType>
+  ) => {
+    const {
+      children = <CustomClearText clearText={clearText} />,
+      innerProps: { ref, ...restInnerProps }
+    } = clearIndicatorProps;
+    return (
+      <div className='select-pill text-primary' {...restInnerProps} ref={ref}>
+        <div style={{ padding: '0px 5px' }}>{children}</div>
+      </div>
+    );
+  };
+
+  const selectComponents = {
+    ...props.components,
+    Option,
+    DropdownIndicator,
+    IndicatorSeparator: null
+  };
+
+  if (props.isClearable) {
+    selectComponents.ClearIndicator = ClearIndicator;
+  }
+  return (
+    <SelectBase {...props} components={selectComponents} styles={styles} />
+  );
+};

package/src/Select/shared.tsx

@@ -0,0 +1,45 @@
+const black = '#000';
+const primary = '#06c';
+const primaryDark = '#435a70';
+const primaryDarker = '#17324d';
+
+// Types here depend of react-select internal emotion dep + more parametric stuff
+// @TODO: fix it this way for now, will review later on
+export const styles = {
+  container: (provided: any) => ({ ...provided, height: '2.5rem' }),
+  control: (provided: any) => ({
+    ...provided,
+    height: '2.5rem',
+    borderRadius: '0',
+    borderLeft: 'none',
+    borderRight: 'none',
+    borderTop: 'none',
+    borderBottom: `solid ${primaryDark} 1px`,
+    boxShadow: 'none',
+    '&:hover': { borderBottom: `solid ${primaryDark} 1.25px` } // border style on hover
+  }),
+  dropdownIndicator: (provided: any) => ({
+    ...provided,
+    fill: primaryDark
+  }),
+  option: (provided: any, { isDisabled, isFocused, isSelected }: any) => ({
+    ...provided,
+    background: 'white',
+    textDecoration: isFocused || isSelected ? 'underline' : 'none',
+    color: isSelected ? primaryDarker : primary,
+    cursor: isDisabled ? 'not-allowed' : 'pointer'
+  }),
+  placeholder: (provided: any) => ({
+    ...provided,
+    fill: primaryDark
+  }),
+  singleValue: (provided: any) => ({
+    ...provided,
+    color: black,
+    fontWeight: 'bold'
+  }),
+  valueContainer: (provided: any) => ({
+    ...provided,
+    height: '2.5rem'
+  })
+};

package/src/Sidebar/Sidebar.tsx

@@ -0,0 +1,46 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Sidebar */
+  className?: string;
+  /** Indica se il componente Sideebar corrente è di tipo annidato o no */
+  secondary?: boolean;
+  /** Quando attivo aggiunge una linea separatrice a sinistra */
+  left?: boolean;
+  /** Quando attivo aggiunge una linea separatrice a destra */
+  right?: boolean;
+  /** Quando attivo cambia il tema del componente Sidebar rendendola scura */
+  dark?: boolean;
+}
+
+export const Sidebar: FC<SidebarProps> = ({
+  className,
+  tag = 'div',
+  secondary = false,
+  left = false,
+  right = false,
+  dark = false,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('sidebar-wrapper', className, {
+    'it-line-left-side': left,
+    'it-line-right-side': right,
+    'theme-dark': dark
+  });
+
+  const wrapperClassesLinkList = classNames('sidebar-linklist-wrapper', {
+    'linklist-secondary': secondary
+  });
+  if (secondary) {
+    return <Tag {...attributes} className={wrapperClassesLinkList} />;
+  }
+  return (
+    <Tag className={wrapperClasses}>
+      <Tag {...attributes} className={wrapperClassesLinkList} />
+    </Tag>
+  );
+};

package/src/Skiplink/Skiplink.tsx

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

package/src/Skiplink/SkiplinkItem.tsx

@@ -0,0 +1,29 @@
+import React, { FC, ElementType, AnchorHTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface SkiplinkItemProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Skiplink */
+  className?: string;
+  /** Abilitare questo attributo per renderizzare lo SkipLinkItem al focus */
+  focusable?: boolean;
+}
+
+export const SkiplinkItem: FC<SkiplinkItemProps> = ({
+  className,
+  tag = 'a',
+  focusable = true,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames(className, 'sr-only', {
+    'sr-only-focusable': focusable
+  });
+
+  // Add an extra href for focusable if the user passes an onClick rather than href prop
+  const extraHref = attributes.onClick ? { href: '#' } : {};
+
+  return <Tag className={classes} {...attributes} {...extraHref} />;
+};

package/src/Spinner/Spinner.tsx

@@ -0,0 +1,55 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface SpinnerProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Spinner */
+  className?: string;
+  /** Utilizzato per indicare lo stato attivo di caricamento (animato) */
+  active?: boolean;
+  /** Utilizzato per ottenere la versione ridotta del componente Spinner */
+  small?: boolean;
+  /** Utilizzato per ottenere una animazione alternativa in fase di caricamento */
+  double?: boolean;
+  /** Etichetta con testo da mostrare ai dispositivi screen reader */
+  label?: string;
+}
+
+export const Spinner: FC<SpinnerProps> = ({
+  className,
+  tag = 'span',
+  active = false,
+  small = false,
+  double = false,
+  label = 'Caricamento',
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('progress-spinner', {
+    'progress-spinner-active': active,
+    'size-sm': small,
+    'progress-spinner-double': double
+  });
+
+  const classes = classNames(className, 'sr-only');
+  if (double) {
+    return (
+      <Tag className={wrapperClasses}>
+        <div className='progress-spinner-inner' />
+        <div className='progress-spinner-inner' />
+        <Tag {...attributes} className={classes}>
+          {label}
+        </Tag>
+      </Tag>
+    );
+  }
+
+  return (
+    <Tag className={wrapperClasses}>
+      <Tag {...attributes} className={classes}>
+        {label}
+      </Tag>
+    </Tag>
+  );
+};