design-react-kit 5.6.0 → 5.7.0

package/src/Carousel/Carousel.tsx

@@ -0,0 +1,210 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+
+import {Splide, SplideProps} from '@splidejs/react-splide'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CONFIG_DEFAULT: any = {
+  slideFocus: false,
+  rewind: true,
+  perMove: 1,
+  i18n: {
+    prev: 'Slide precedente',
+    next: 'Slide successiva',
+    first: 'Vai alla prima slide',
+    last: 'Vai all’ultima slide',
+    slideX: 'Vai alla slide %s',
+    pageX: 'Vai a pagina %s',
+    play: 'Attiva autoplay',
+    pause: 'Pausa autoplay',
+    carousel: 'Carosello',
+    select: 'Seleziona una slide da mostrare',
+    slide: 'slide',
+    slideLabel: '%s di %s',
+  },
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CONFIGS: any= {
+  'landscape-three-cols': {
+    type: 'slide',
+    perPage: 3,
+    gap: 24,
+    padding: { left: 0, right: 0 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 2,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: false,
+      },
+    },
+  },
+  'landscape-three-cols-arrows': {
+    type: 'slide',
+    perPage: 3,
+    gap: 24,
+    padding: { left: 0, right: 0 },
+    arrows: true,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: true,
+      },
+      992: {
+        perPage: 2,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: true,
+      },
+    },
+  },
+  'big-image': {
+    type: 'loop',
+    perPage: 1,
+    gap: 48,
+    padding: { left: 320, right: 320 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 0,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 160, right: 160 },
+        arrows: false,
+      },
+    },
+  },
+  'standard-image': {
+    type: 'loop',
+    perPage: 3,
+    gap: 24,
+    padding: { left: 48, right: 48 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: false,
+      },
+      992: {
+        perPage: 2,
+        gap: 24,
+        padding: { left: 48, right: 48 },
+        arrows: false,
+      },
+    },
+  },
+  'landscape': {
+    type: 'slide',
+    perPage: 1,
+    gap: 24,
+    padding: { left: 0, right: 0 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 24, right: 24 },
+        arrows: false,
+      },
+    },
+  },
+  'calendar-wrapper': {
+    type: 'slide',
+    perPage: 4,
+    gap: 0,
+    padding: { left: 0, right: 0 },
+    arrows: false,
+    breakpoints: {
+      560: {
+        perPage: 1,
+        gap: 0,
+        padding: { left: 24, right: 24 },
+        arrows: false,
+      },
+      768: {
+        perPage: 2,
+        gap: 0,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 3,
+        gap: 0,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+    },
+  },
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const EXTRA_CLASSES: any= {
+  'landscape-three-cols': [
+    'it-carousel-landscape-abstract-three-cols'
+  ],
+  'landscape-three-cols-arrows': [
+    'it-carousel-landscape-abstract-three-cols-arrow-visible'
+  ],
+  'big-image': [
+    'it-carousel-landscape-abstract-three-cols',
+    'it-full-carousel',
+    'it-big-img'
+  ],
+  'standard-image': [
+    'it-carousel-landscape-abstract-three-cols',
+    'it-full-carousel',
+    'it-standard-image'
+  ],
+  'landscape': [
+    'it-carousel-landscape-abstract'
+  ],
+  'calendar-wrapper': [
+    'it-calendar-wrapper'
+  ]
+}
+
+export interface CarouselProps extends SplideProps {
+  type: string;
+  children?: React.ReactNode;
+}
+
+// Splide wrapper
+export const Carousel: FC<CarouselProps> = ({
+  className = '',
+  type,
+  children,
+  ...attributes
+}) => {
+  let conf = Object.assign({}, CONFIG_DEFAULT)
+  if (['big-image', 'standard-image'].includes(type)){
+    conf = Object.assign({}, conf, CONFIGS['landscape-three-cols'])
+  }
+  conf = Object.assign({}, conf, CONFIGS[type])
+  return <Splide
+    {...attributes}
+    className={classNames('it-carousel-wrapper', className, ...EXTRA_CLASSES[type])}
+    options={conf}>{children}</Splide>;
+};

package/src/Carousel/CarouselSlide.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {SplideSlide} from '@splidejs/react-splide'
+
+// Splide wrapper
+export const CarouselSlide: React.FC<JSX.IntrinsicElements['li']> = ({
+  children,
+}) => {
+
+  return <SplideSlide>
+    <div className='it-single-slide-wrapper'>
+      {children}
+    </div>
+  </SplideSlide>;
+};

package/src/Input/Input.tsx

@@ -62,7 +62,7 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   decrementLabel?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
-  /** Testo di validazione per l'elemento del moduleo form. */
+  /** Testo di validazione per l'elemento del modulo form. */
   validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
   infoText?: string;
@@ -77,8 +77,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   innerRef?: Ref<HTMLInputElement>;
   /** Utilizzare per mostrare testo statico non modificabile. */
   plaintext?: boolean;
-  /** Utilizzare per mostrare un elemento addon a fianco (prima o dopo) il campo input all'interno del componente */
-  addon?: boolean;
   /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */
   addonText?: string;
   /** Oggetto contenente la nuova mappatura per le classi CSS. */
@@ -118,7 +116,6 @@ export const Input = ({
   cssModule,
   type = 'text',
   tag,
-  addon,
   addonText,
   static: staticInput,
   plaintext,
@@ -173,13 +170,11 @@ export const Input = ({
   let { bsSize, valid, ...rest } = attributes;
 
   const Tag = getTag({ tag, plaintext, staticInput, type });
-  addon = addonText != null ? true : addon;
   const formControlClass = getFormControlClass(
     {
       plaintext,
       staticInput,
       type,
-      addon,
       normalized
     },
     cssModule
@@ -304,10 +299,8 @@ export const Input = ({
   };
 
   if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {
-    if (containerProps.extraLabelClass) {
+    if (containerProps.extraLabelClass && ['currency', 'percentage'].includes(type)) {
       containerProps.extraLabelClass = containerProps.extraLabelClass + ' input-symbol-label';
-    } else {
-      containerProps.extraLabelClass = 'input-symbol-label';
     }
     return (
       <InputContainer {...containerProps}>
@@ -363,16 +356,14 @@ export const Input = ({
 
   if (indeterminateCheckboxInput) {
     return (
-      <InputContainer {...containerProps}>
-        <Tag
-          {...rest}
-          {...extraAttributes}
-          {...sharedAttributes}
-          className={inputClasses}
-          data-testid={testId}
-          indeterminate={'true'}
-        />
-      </InputContainer>
+      <Tag
+        {...rest}
+        {...extraAttributes}
+        {...sharedAttributes}
+        className={inputClasses}
+        data-testid={testId}
+        indeterminate={'true'}
+      />
     );
   }
 

package/src/Input/utils.tsx

@@ -8,9 +8,9 @@ type ValidationProps = Pick<InputProps, 'valid'>;
 type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
   staticInput?: boolean;
 };
-type FormControlProps = Pick<InputProps, 'addon' | 'normalized'> & TypeProps;
+type FormControlProps = Pick<InputProps, 'normalized'> & TypeProps;
 
-function getFormControlClassInternal({ plaintext, staticInput, type = 'text', addon, normalized }: FormControlProps) {
+function getFormControlClassInternal({ plaintext, staticInput, type = 'text', normalized }: FormControlProps) {
   const formControlClass = 'form-control';
   if (plaintext || staticInput || normalized) {
     return `${formControlClass}-plaintext`;
@@ -19,9 +19,7 @@ function getFormControlClassInternal({ plaintext, staticInput, type = 'text', ad
     return `${formControlClass}-file`;
   }
   if (['radio', 'checkbox'].indexOf(type) > -1) {
-    if (addon) {
-      return null;
-    }
+    return null;
   }
   return formControlClass;
 }

package/src/Transfer/BacktransferButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon } from '../Icon/Icon';
+import { useTransferContext } from './useTransferContext';
+
+const BacktransferButton = () => {
+  const { targetCandidates, sourceItems, targetItems, setSourceItems, setTargetItems, setTargetCandidates } =
+    useTransferContext();
+  const handleTransfer: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+    const newTargetItems = targetItems.filter((item) => !targetCandidates.includes(item.id));
+    const newSourceItems = sourceItems.concat(targetItems.filter((item) => targetCandidates.includes(item.id)));
+    setSourceItems({ items: newSourceItems });
+    setTargetItems({ items: newTargetItems });
+    setTargetCandidates([]);
+  };
+  return (
+    <>
+      <a
+        className={`backtransfer ${targetCandidates.length > 0 ? 'active' : ''}`}
+        href='#'
+        role='button'
+        aria-label='Sposta indietro'
+        onClick={handleTransfer}
+        data-testid='backtransfer-button'
+      >
+        <Icon icon='it-arrow-left' />
+      </a>
+      <span className='visually-hidden'>Etichetta per freccia sinistra</span>
+    </>
+  );
+};
+
+export { BacktransferButton };

package/src/Transfer/Item.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FormGroup, Input, Label } from '..';
+
+const Item = ({ id, children }: { id: string; children: React.ReactNode }) => {
+  return (
+    <>
+      {id} - {children}
+    </>
+  );
+};
+
+const InternalItem = ({
+  id,
+  checked,
+  children,
+  onChange
+}: {
+  id: string;
+  checked?: boolean;
+  children: React.ReactNode;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}) => {
+  return (
+    <FormGroup check>
+      <Input checked={checked} onChange={onChange} id={id} type='checkbox' />
+      <Label for={id} check>
+        {children}
+      </Label>
+    </FormGroup>
+  );
+};
+
+export { InternalItem, Item };

package/src/Transfer/ResetButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Icon } from '../Icon/Icon';
+import { useTransferContext } from './useTransferContext';
+
+const ResetButton = () => {
+  const { reset, isChanged } = useTransferContext();
+  const handleReset: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+    reset();
+  };
+  return (
+    <>
+      <a
+        className={`reset ${isChanged ? 'active' : ''}`}
+        href='#'
+        role='button'
+        aria-label='Reset'
+        onClick={handleReset}
+        data-testid='reset-button'
+      >
+        <Icon icon='it-restore' />
+      </a>
+      <span className='visually-hidden'>Etichetta per icona di reset</span>
+    </>
+  );
+};
+
+export { ResetButton };

package/src/Transfer/SelectAllCheckbox.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormGroup, Input, Label } from '..';
+
+const SelectAllCheckbox = ({
+  className,
+  description,
+  checked,
+  id,
+  onChange,
+  children
+}: {
+  className?: string;
+  id: string;
+  checked?: boolean;
+  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  children: React.ReactNode;
+  description?: string;
+}) => {
+  return (
+    <FormGroup check>
+      <Input className={className} checked={checked} onChange={onChange} id={id} type='checkbox' />
+      <Label for={id} check>
+        {children}
+        {description && <span className='descr'>{description}</span>}
+      </Label>
+    </FormGroup>
+  );
+};
+
+export { SelectAllCheckbox };

package/src/Transfer/Source.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect } from 'react';
+import { InternalItem, Item } from './Item';
+import { SelectAllCheckbox } from './SelectAllCheckbox';
+import { useTransferContext } from './useTransferContext';
+
+const SourceItem = ({ id, children }: { id: string; children: React.ReactNode }) => {
+  const { sourceCandidates, setSourceCandidates } = useTransferContext();
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      setSourceCandidates([...new Set([...sourceCandidates, e.target.id])]);
+    } else {
+      setSourceCandidates(sourceCandidates.filter((item) => item !== e.target.id));
+    }
+  };
+  const isChecked = sourceCandidates.includes(id);
+  return (
+    <InternalItem checked={isChecked} id={id} onChange={handleChange}>
+      {children}
+    </InternalItem>
+  );
+};
+
+const Source: React.FC<{ children?: React.ReactNode }> & {
+  Header: React.FC<{ children?: React.ReactNode }>;
+} = ({ children }) => {
+  const { sourceItems, setSourceItems } = useTransferContext();
+  const otherComponents: React.ReactNode[] = [];
+  const childrenSource = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === Item) {
+      const { id, children } = child.props;
+      return { id, content: children };
+    }
+    otherComponents.push(child);
+    return null;
+  })?.filter((item) => item !== null);
+
+  useEffect(() => {
+    if (!childrenSource) return;
+    setSourceItems({ items: childrenSource, setOriginals: true });
+  }, []);
+
+  return (
+    <div className='it-transfer-wrapper source' data-testid='transfer-source'>
+      {otherComponents}
+      {sourceItems.map(({ id, content }) => (
+        <SourceItem key={id} id={id}>
+          {content}
+        </SourceItem>
+      ))}
+
+      <br />
+    </div>
+  );
+};
+
+Source.Header = ({ children }: { children?: React.ReactNode }) => {
+  const { sourceItems, sourceCandidates, setSourceCandidates } = useTransferContext();
+
+  const getStatus = () => {
+    if (sourceCandidates.length === 0) {
+      return { checked: false };
+    }
+    if (sourceItems.every((item) => sourceCandidates.includes(item.id))) {
+      return { checked: true };
+    }
+    return { checked: false, className: 'semi-checked' };
+  };
+
+  return (
+    <div className='transfer-header' data-testid='transfer-source-header'>
+      <SelectAllCheckbox
+        {...getStatus()}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setSourceCandidates([...new Set(sourceItems.map((item) => item.id))]);
+          } else {
+            setSourceCandidates([]);
+          }
+        }}
+        id='transfer-source-header'
+        description={children ? 'Source' : undefined}
+      >
+        {children ? children : 'Source'}
+      </SelectAllCheckbox>
+    </div>
+  );
+};
+
+export { Source };

package/src/Transfer/Target.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect } from 'react';
+import { InternalItem, Item } from './Item';
+import { SelectAllCheckbox } from './SelectAllCheckbox';
+import { useTransferContext } from './useTransferContext';
+
+const TargetItem = ({ id, children }: { id: string; children: React.ReactNode }) => {
+  const { targetCandidates, setTargetCandidates } = useTransferContext();
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.checked) {
+      setTargetCandidates([...new Set([...targetCandidates, e.target.id])]);
+    } else {
+      setTargetCandidates(targetCandidates.filter((item) => item !== e.target.id));
+    }
+  };
+  const isChecked = targetCandidates.includes(id);
+  return (
+    <InternalItem checked={isChecked} id={id} onChange={handleChange}>
+      {children}
+    </InternalItem>
+  );
+};
+
+const Target: React.FC<{ children?: React.ReactNode }> & {
+  Header: React.FC<{ children?: React.ReactNode }>;
+} = ({ children }) => {
+  const { targetItems, setTargetItems } = useTransferContext();
+  const otherComponents: React.ReactNode[] = [];
+  const childrenTarget = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === Item) {
+      const { id, children } = child.props;
+      return { id, content: children };
+    }
+    otherComponents.push(child);
+    return null;
+  })?.filter((item) => item !== null);
+
+  useEffect(() => {
+    if (!childrenTarget) return;
+    setTargetItems({ items: childrenTarget, setOriginals: true });
+  }, []);
+
+  return (
+    <div className='it-transfer-wrapper target' data-testid='transfer-target'>
+      {otherComponents}
+      {targetItems.map(({ id, content }) => (
+        <TargetItem key={id} id={id}>
+          {content}
+        </TargetItem>
+      ))}
+    </div>
+  );
+};
+
+Target.Header = ({ children }: { children?: React.ReactNode }) => {
+  const { targetItems, targetCandidates, setTargetCandidates } = useTransferContext();
+
+  const getStatus = () => {
+    if (targetCandidates.length === 0) {
+      return { checked: false };
+    }
+    if (targetItems.every((item) => targetCandidates.includes(item.id))) {
+      return { checked: true };
+    }
+    return { checked: false, className: 'semi-checked' };
+  };
+
+  return (
+    <div className='transfer-header' data-testid='transfer-target-header'>
+      <SelectAllCheckbox
+        {...getStatus()}
+        onChange={(e) => {
+          if (e.target.checked) {
+            setTargetCandidates([...new Set(targetItems.map((item) => item.id))]);
+          } else {
+            setTargetCandidates([]);
+          }
+        }}
+        id='transfer-target-header'
+        description={children ? 'Target' : undefined}
+      >
+        {children ? children : 'Target'}
+      </SelectAllCheckbox>
+    </div>
+  );
+};
+
+export { Target };

package/src/Transfer/Transfer.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BacktransferButton } from './BacktransferButton';
+import { Item } from './Item';
+import { ResetButton } from './ResetButton';
+import { Source } from './Source';
+import { Target } from './Target';
+import { TransferButton } from './TransferButton';
+import { TransferContextProvider, useTransfer } from './useTransferContext';
+
+const Transfer = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <TransferContextProvider>
+      <div data-testid='test-id-transfer'>{children}</div>
+    </TransferContextProvider>
+  );
+};
+
+Transfer.Source = Source;
+Transfer.Target = Target;
+
+Transfer.Item = Item;
+
+Transfer.TransferButton = TransferButton;
+
+Transfer.BacktransferButton = BacktransferButton;
+
+Transfer.ResetButton = ResetButton;
+
+Transfer.useTransfer = useTransfer;
+
+export { Transfer };

package/src/Transfer/TransferButton.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icon } from '../Icon/Icon';
+import { useTransferContext } from './useTransferContext';
+
+const TransferButton = () => {
+  const { sourceCandidates, sourceItems, targetItems, setSourceItems, setTargetItems, setSourceCandidates } =
+    useTransferContext();
+  const handleTransfer: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
+    e.preventDefault();
+    const newSourceItems = sourceItems.filter((item) => !sourceCandidates.includes(item.id));
+    const newTargetItems = targetItems.concat(sourceItems.filter((item) => sourceCandidates.includes(item.id)));
+    setSourceItems({ items: newSourceItems });
+    setTargetItems({ items: newTargetItems });
+    setSourceCandidates([]);
+  };
+  return (
+    <>
+      <a
+        data-testid='transfer-button'
+        className={`transfer ${sourceCandidates.length > 0 ? 'active' : ''}`}
+        href='#'
+        role='button'
+        aria-label='Sposta avanti'
+        onClick={handleTransfer}
+      >
+        <Icon icon='it-arrow-right' />
+      </a>
+      <span className='visually-hidden'>Etichetta per freccia destra</span>
+    </>
+  );
+};
+
+export { TransferButton };