design-react-kit 3.3.1 → 4.0.1

package/src/Stepper/StepperContainer.tsx

@@ -0,0 +1,30 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface StepperContainerProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Abilita il tema scuro per il componente Stepper */
+  dark?: boolean;
+  /** Abilita la navigazione per mobile */
+  mobile?: boolean;
+}
+
+export const StepperContainer: FC<StepperContainerProps> = ({
+  tag = 'div',
+  mobile,
+  dark,
+  className,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClass = classNames(
+    'steppers',
+    className,
+    { 'bg-dark': dark },
+    { 'mobile-examples': mobile }
+  );
+  return <Tag {...attributes} className={wrapperClass} />;
+};

package/src/Stepper/StepperContent.tsx

@@ -0,0 +1,51 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface StepperContentProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Abilita il tema scuro per il componente StepperContent */
+  dark?: boolean;
+}
+
+const contentStyleLight = {
+  height: '400px',
+  border: '2px dashed #eee',
+  background: '#fafafa',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#333'
+};
+
+const contentStyleDark = {
+  height: '400px',
+  border: '2px dashed #eee',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#EEE',
+  borderColor: '#aaa',
+  background: '#17324d',
+  opacity: 0.5
+};
+
+export const StepperContent: FC<StepperContentProps> = ({
+  tag = 'div',
+  className,
+  dark,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames('steppers-content', classNames);
+  return (
+    <Tag
+      {...attributes}
+      className={classes}
+      style={(dark && contentStyleDark) || contentStyleLight}
+      aria-live='polite'
+    />
+  );
+};

package/src/Stepper/StepperDots.tsx

@@ -0,0 +1,21 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface StepperDotsProps extends HTMLAttributes<HTMLElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Badge */
+  className?: string;
+  /** Abilita il tema scuro per il componente StepperDots */
+  dark?: boolean;
+}
+
+export const StepperDots: FC<StepperDotsProps> = ({
+  tag = 'ul',
+  className,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClass = classNames('steppers-dots', className);
+  return <Tag {...attributes} className={wrapperClass} />;
+};

package/src/Stepper/StepperHeader.tsx

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

package/src/Stepper/StepperHeaderElement.tsx

@@ -0,0 +1,77 @@
+import React, { FC, HTMLAttributes, ElementType, ReactNode } from 'react';
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+
+const variants = {
+  confirmed: 'confirmed',
+  active: 'active',
+  done: 'done',
+  mobile: 'steppers-index',
+  // @deprecated
+  'steppers-index': 'steppers-index'
+} as const;
+
+export interface StepperHeaderElementProps
+  extends HTMLAttributes<HTMLLIElement> {
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente StepperHeader */
+  className?: string;
+  /**
+   * Il tipo di step:
+   * * confirmed (confermato),
+   * * active (attivo - su mobile viene mostrato solo questo)
+   * * done (completato)
+   * * mobile (visibile solo su mobile, usato per mostrare lo stato attuale di progresso)
+   * * steppers-index (deprecato) usare mobile
+   * */
+  variant?: keyof typeof variants;
+  /** Icona da mostrare alla destra dell'etichetta dello step */
+  appendIcon?: string;
+  /** Icona da mostrare alla sinistra dell'etichetta dello step */
+  prependIcon?: string;
+  /** Utilizzare questo attributo per elementi aggiuntivi da mostrare su dispositivi mobile per lo step attivo */
+  stepperNumber?: ReactNode;
+  /** Nasconde il bordo inferiore azzurro per lo step */
+  noLine?: boolean;
+  /** @deprecated Usare `appendIcon` */
+  icon?: string;
+  /** @deprecated Usare `prependIcon` */
+  iconName?: string;
+}
+
+export const StepperHeaderElement: FC<StepperHeaderElementProps> = ({
+  tag = 'li',
+  variant,
+  appendIcon,
+  prependIcon,
+  icon,
+  iconName,
+  noLine,
+  stepperNumber,
+  children,
+  className,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames(
+    variant ? variants[variant] : '',
+    className,
+    {
+      'no-line': noLine
+    }
+  );
+  const iconClass = classNames('icon', 'steppers-success');
+  const spanClass = classNames('steppers-number');
+
+  const iconToAppend = appendIcon || icon;
+  const iconToPepend = prependIcon || iconName;
+  return (
+    <Tag {...attributes} className={wrapperClasses}>
+      {iconToPepend && <Icon icon={iconToPepend} />}
+      {stepperNumber && <span className={spanClass}>{stepperNumber}</span>}
+      {children}
+      {iconToAppend && <Icon icon={iconToAppend} className={iconClass} />}
+    </Tag>
+  );
+};

package/src/Stepper/StepperNav.tsx

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

package/src/ThumbNav/ThumbNav.tsx

@@ -0,0 +1,37 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface ThumbNavProps extends HTMLAttributes<HTMLUListElement> {
+  fixedWidth?: boolean;
+  isSmall?: boolean;
+  isVertical?: boolean;
+  noZoomOnHover?: boolean;
+  overlayOnHover?: 'black' | 'primary';
+  position?: 'top' | 'right' | 'bottom' | 'left';
+  rowItems?: 2 | 3 | 4 | 5;
+}
+
+export const ThumbNav: FC<ThumbNavProps> = ({
+  isSmall = false,
+  fixedWidth = false,
+  isVertical = false,
+  noZoomOnHover = false,
+  rowItems,
+  overlayOnHover,
+  position,
+  ...attributes
+}) => {
+  const classes = classNames('thumb-nav', {
+    'thumb-nav-fixed': fixedWidth,
+    'thumb-nav-small': isSmall,
+    'thumb-nav-vertical':
+      isVertical || position === 'left' || position === 'right',
+    'thumb-nav-nozoom': noZoomOnHover,
+    [`thumb-nav-${overlayOnHover}`]: overlayOnHover,
+    [`thumb-nav-${position}`]: position,
+    'thumb-nav-auto': rowItems != null,
+    [`thumb-nav-auto-${rowItems}`]: rowItems != null
+  });
+
+  return <ul className={classes} {...attributes} />;
+};

package/src/ThumbNav/ThumbNavItem.tsx

@@ -0,0 +1,35 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import resizer from 'bootstrap-italia/dist/assets/resizer-3x2.svg';
+
+export interface ThumbNavItemProps extends HTMLAttributes<HTMLLIElement> {
+  active?: boolean;
+  targetUrl?: string;
+  imageUrl: string;
+  actionDescription?: string;
+}
+
+export const ThumbNavItem: FC<ThumbNavItemProps> = ({
+  active = false,
+  targetUrl,
+  imageUrl,
+  actionDescription,
+  ...attributes
+}) => {
+  const classes = classNames({ active: active });
+
+  return (
+    <li {...attributes}>
+      <img
+        src={resizer}
+        className='thumb-nav-resizer'
+        aria-hidden='true'
+        alt=''
+      />
+      <a href={targetUrl} className={classes}>
+        <img src={imageUrl} alt={actionDescription} />
+      </a>
+    </li>
+  );
+};

package/src/Timeline/TimelinePin.tsx

@@ -0,0 +1,67 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '../Icon/Icon';
+
+export interface TimelinePinProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente TimelinePin */
+  className?: string;
+  /** Mostra un'icona all'interno del TimelinePin. Passare il nome dell'icona per utilizzarlo. */
+  iconName?: string;
+  /**
+   * Mostra un'icona all'interno del TimelinePin. Passare il nome dell'icona per utilizzarlo.
+   * @deprecated. Utilizzare `iconName`.
+   * */
+  icon?: string;
+  /** Etichetta da associare all'elemento */
+  label: string;
+  /** Quando abilitato indica che l'evento TimelinePin è collocato nel presente (azzurro) */
+  now?: boolean;
+  /** Da utilizzare per mostrare un'etichetta per l'evento nel presente */
+  nowText?: string;
+  /** Quando abilitato indica che l'evento TimelinePin è collocato nel passato (blu scuro) */
+  past?: boolean;
+}
+
+export const TimelinePin: FC<TimelinePinProps> = ({
+  iconName = 'it-code-circle',
+  icon = 'it-code-circle',
+  label = ' ',
+  past,
+  now,
+  nowText,
+  className,
+  ...attributes
+}) => {
+  const { children, ...rest } = attributes;
+  const classes = classNames('timeline-element', className);
+  const innerClasses = classNames('it-pin-wrapper', className, {
+    'it-evidence': past,
+    'it-now': now
+  });
+  const pinIcon = (
+    <div className='pin-icon'>
+      <Icon icon={iconName || icon} />
+    </div>
+  );
+  const pinLabel = (
+    <div className='pin-text'>
+      <span>{label}</span>
+    </div>
+  );
+
+  const pinTextNow = now && (
+    <span className='it-now-label d-none d-lg-flex'>{nowText}</span>
+  );
+
+  return (
+    <div className={classes}>
+      {pinTextNow}
+      <div className={innerClasses} {...rest}>
+        {pinIcon}
+        {pinLabel}
+      </div>
+      {children}
+    </div>
+  );
+};

package/src/Timeline/TimelineWrapper.tsx

@@ -0,0 +1,19 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classnames from 'classnames';
+
+export interface TimelineProps extends HTMLAttributes<HTMLElement> {
+  /** Classi aggiuntive da usare per il componente TimelineProps */
+  className?: string;
+}
+
+export const Timeline: FC<TimelineProps> = (props) => {
+  const { className, ...attributes } = props;
+  const { children, ...rest } = attributes;
+  const timelineWrapper = classnames(className, 'it-timeline-wrapper');
+
+  return (
+    <div className={timelineWrapper} {...rest}>
+      {children}
+    </div>
+  );
+};

package/src/Toggle/Toggle.tsx

@@ -0,0 +1,29 @@
+import React, { ElementType, FC, ReactNode } from 'react';
+
+import { Label, Input, CSSModule } from 'reactstrap';
+import { InputProps } from '../Input/Input';
+
+export interface ToggleProps extends InputProps {
+  /** Label da mostrare per il componente */
+  label: string | ReactNode;
+  /** Dimensioni ammissibili per il componente */
+  bsSize?: 'lg' | 'sm';
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Da utilizzare per impostare un riferimento all'elemento DOM */
+  innerRef?: React.Ref<HTMLInputElement>;
+  /** Oggetto contenente la nuova mappatura per le classi CSS. */
+  cssModule?: CSSModule;
+}
+
+export const Toggle: FC<ToggleProps> = ({ label, ...rest }) => {
+  return (
+    <div className='toggles'>
+      <Label check>
+        {label}
+        <Input {...rest} type='checkbox' />
+        <span className='lever' />
+      </Label>
+    </div>
+  );
+};

package/src/Toolbar/Toolbar.tsx

@@ -0,0 +1,28 @@
+import React, { ElementType, FC, HTMLAttributes, createContext } from 'react';
+import classnames from 'classnames';
+
+export const SizeContext = createContext<ToolbarProps['size']>(undefined);
+
+export interface ToolbarProps extends HTMLAttributes<HTMLElement> {
+  tag?: ElementType;
+  size?: 'large' | 'medium' | 'small';
+}
+
+export const Toolbar: FC<ToolbarProps> = ({
+  tag = 'nav',
+  size,
+  children,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classnames('toolbar', {
+    [`toolbar-${size}`]: size && size !== 'large'
+  });
+  return (
+    <SizeContext.Provider value={size || 'large'}>
+      <Tag className={classes} {...attributes}>
+        <ul>{children}</ul>
+      </Tag>
+    </SizeContext.Provider>
+  );
+};

package/src/Toolbar/ToolbarDividerItem.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const ToolbarDividerItem = () => (
+  <li className='toolbar-divider' aria-hidden={true} />
+);

package/src/Toolbar/ToolbarItem.tsx

@@ -0,0 +1,95 @@
+import React, {
+  ElementType,
+  FC,
+  HTMLAttributes,
+  MouseEvent,
+  useContext
+} from 'react';
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+import { SizeContext, ToolbarProps } from './Toolbar';
+
+export interface ToolbarItemProps extends HTMLAttributes<HTMLElement> {
+  tag?: ElementType;
+  active?: boolean;
+  disabled?: boolean;
+  url?: string;
+  label?: string;
+  iconName: string;
+  isIconSmall?: boolean;
+  alert?: boolean;
+  badge?: number;
+  onLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+const disabledMessage = ' elemento disabilitato';
+
+function ToolbarItemLabel({
+  label,
+  size,
+  disabled
+}: {
+  label: ToolbarItemProps['label'];
+  size: ToolbarProps['size'];
+  disabled: ToolbarItemProps['disabled'];
+}) {
+  const showSrText = size && size !== 'large';
+  if (disabled) {
+    if (!label || showSrText) {
+      return <span className='sr-only'>{disabledMessage}</span>;
+    }
+    return (
+      <>
+        <span className='toolbar-label'>{label}</span>
+        <span className='sr-only'>{disabledMessage}</span>
+      </>
+    );
+  }
+  if (!label) {
+    return null;
+  }
+  return showSrText ? (
+    <span className='sr-only'>{label}</span>
+  ) : (
+    <span className='toolbar-label'>{label}</span>
+  );
+}
+
+export const ToolbarItem: FC<ToolbarItemProps> = ({
+  active = false,
+  badge,
+  url,
+  iconName,
+  label,
+  tag = 'a',
+  disabled,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const size = useContext(SizeContext);
+  const activeClass = classNames({ active, disabled });
+  const badgeWrapper = Boolean(badge) && (
+    <div className='badge-wrapper'>
+      <span className='toolbar-badge'>{badge}</span>
+    </div>
+  );
+
+  const ariaAttributes = {
+    ...(disabled && { 'aria-disabled': true })
+  };
+
+  return (
+    <li>
+      <Tag
+        href={url || '#'}
+        className={activeClass}
+        {...attributes}
+        {...ariaAttributes}
+      >
+        {badgeWrapper}
+        <Icon icon={iconName} size={size === 'small' ? 'sm' : ''} />
+        <ToolbarItemLabel label={label} size={size} disabled={disabled} />
+      </Tag>
+    </li>
+  );
+};

package/src/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const svgUrl: string;
+  export default svgUrl;
+}