design-react-kit 5.0.0-1 → 5.0.0-3

package/src/Icon/assets/ItVimeoSquare.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       width={24}

package/src/Icon/assets/ItWarning.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItWarningCircle.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItWhatsapp.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItWhatsappSquare.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItWifi.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItYoutube.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItZoomIn.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/ItZoomOut.tsx

@@ -4,11 +4,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-export const component = ({
-  title,
-  titleId,
-  ...props
-}: SVGProps<SVGSVGElement> & SVGRProps) => {
+export const component = ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'

package/src/Icon/assets/index.ts

@@ -1,4 +1,8 @@
 const iconList: Record<string, boolean> = {
+  'it-android-square': true,
+  'it-android': true,
+  'it-apple-square': true,
+  'it-apple': true,
   'it-arrow-down-circle': true,
   'it-arrow-down-triangle': true,
   'it-arrow-down': true,
@@ -168,6 +172,18 @@ export type IconName = keyof typeof iconList;
 
 export const loadIcon = (name: IconName) => {
   switch (name) {
+    case 'it-android-square': {
+      return import('./ItAndroidSquare');
+    }
+    case 'it-android': {
+      return import('./ItAndroid');
+    }
+    case 'it-apple-square': {
+      return import('./ItAppleSquare');
+    }
+    case 'it-apple': {
+      return import('./ItApple');
+    }
     case 'it-arrow-down-circle': {
       return import('./ItArrowDownCircle');
     }

package/src/Input/Input.tsx

@@ -1,22 +1,9 @@
-import React, {
-  InputHTMLAttributes,
-  ElementType,
-  Ref,
-  ReactNode,
-  useCallback,
-  useState
-} from 'react';
+import React, { InputHTMLAttributes, ElementType, Ref, ReactNode, useCallback, useState } from 'react';
 import isNumber from 'is-number';
 
 import { InputContainer } from './InputContainer';
 import { Icon } from '../Icon/Icon';
-import {
-  getTag,
-  getFormControlClass,
-  getClasses,
-  getInfoTextControlClass,
-  useFocus
-} from './utils';
+import { getTag, getFormControlClass, getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 import { notifyDeprecation } from '../utils';
 // taken from reactstrap types
@@ -57,6 +44,8 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
+  /** Testo di validazione per l'elemento del moduleo form. */
+  validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
   infoText?: string;
   /** Il valore nel campo Input. */
@@ -106,7 +95,7 @@ export const Input = ({
   id,
   className,
   cssModule,
-  type,
+  type = 'text',
   state,
   tag,
   addon,
@@ -114,6 +103,7 @@ export const Input = ({
   plaintext,
   innerRef,
   label,
+  validationText,
   infoText,
   placeholder,
   normalized,
@@ -128,11 +118,10 @@ export const Input = ({
   const [isHidden, setHidden] = useState(true);
   const [hasIcon, toggleIcon] = useState(true);
 
-  const { toggleFocusLabel, toggleBlurLabel, isFocused } =
-    useFocus<HTMLInputElement>({
-      onFocus: attributes.onFocus,
-      onBlur: attributes.onBlur
-    });
+  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus<HTMLInputElement>({
+    onFocus: attributes.onFocus,
+    onBlur: attributes.onBlur
+  });
 
   const toggleShow = useCallback(() => {
     setHidden(!isHidden);
@@ -152,10 +141,7 @@ export const Input = ({
     },
     cssModule
   );
-  const infoTextControlClass = getInfoTextControlClass(
-    { valid, invalid },
-    cssModule
-  );
+  const validationTextControlClass = getValidationTextControlClass({ valid, invalid }, cssModule);
 
   if (state && valid == null && invalid == null) {
     invalid = state === 'danger';
@@ -168,9 +154,7 @@ export const Input = ({
     ['aria-describedby']?: string;
   } = {};
   if (size && !isNumber(size)) {
-    notifyDeprecation(
-      'Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.'
-    );
+    notifyDeprecation('Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.');
     bsSize = size as unknown as InputProps['bsSize'];
   } else {
     extraAttributes.size = size;
@@ -188,13 +172,7 @@ export const Input = ({
 
   if (
     attributes.children &&
-    !(
-      plaintext ||
-      staticInput ||
-      type === 'select' ||
-      typeof Tag !== 'string' ||
-      Tag === 'select'
-    )
+    !(plaintext || staticInput || type === 'select' || typeof Tag !== 'string' || Tag === 'select')
   ) {
     notifyDeprecation(
       `Input with a type of "${type}" cannot have children. Please use "value"/"defaultValue" instead.`
@@ -204,9 +182,12 @@ export const Input = ({
 
   const inputPassword = extraAttributes.type === 'password';
 
+  const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked');
+
   // Styling
-  const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
+  const { activeClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
     className,
+    type,
     {
       valid,
       invalid,
@@ -214,11 +195,11 @@ export const Input = ({
       placeholder,
       value,
       label,
-      infoText,
+      validationText,
       normalized: Boolean(normalized),
       inputPassword,
       formControlClass,
-      infoTextControlClass,
+      validationTextControlClass,
       isFocused: isFocused,
       originalWrapperClass: originalWrapperClass || originalWrapperClassOld
     },
@@ -238,10 +219,11 @@ export const Input = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
 
@@ -273,6 +255,21 @@ export const Input = ({
     );
   }
 
+  if (indeterminateCheckboxInput) {
+    return (
+      <InputContainer {...containerProps}>
+        <Tag
+          {...rest}
+          {...extraAttributes}
+          {...sharedAttributes}
+          className={inputClasses}
+          data-testid={testId}
+          indeterminate={'true'}
+        />
+      </InputContainer>
+    );
+  }
+
   if (inputPassword) {
     return (
       <InputContainer {...containerProps}>
@@ -310,27 +307,13 @@ export const Input = ({
       </InputContainer>
     );
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return (
       <InputContainer {...containerProps}>
-        <Tag
-          {...rest}
-          {...extraAttributes}
-          {...sharedAttributes}
-          className={inputClasses}
-          data-testid={testId}
-        />
+        <Tag {...rest} {...extraAttributes} {...sharedAttributes} className={inputClasses} data-testid={testId} />
       </InputContainer>
     );
   }
 
-  return (
-    <Tag
-      {...rest}
-      {...extraAttributes}
-      className={inputClasses}
-      {...sharedAttributes}
-      data-testid={testId}
-    />
-  );
+  return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
 };

package/src/Input/InputContainer.tsx

@@ -3,22 +3,24 @@ import React, { FC, HTMLAttributes, ReactNode } from 'react';
 export interface InputContainerProps extends HTMLAttributes<HTMLElement> {
   wrapperClass: string;
   activeClass: string;
-  infoTextClass: string;
+  validationTextClass: string;
   label: string | ReactNode | undefined;
-  infoText: string | undefined;
+  validationText: string | undefined;
   id: string | undefined;
   infoId: string | undefined;
+  infoText: string | undefined;
   testId?: string;
 }
 
 export const InputContainer: FC<InputContainerProps> = ({
   id,
   infoId,
+  infoText,
   testId,
   activeClass,
   label,
-  infoTextClass,
-  infoText,
+  validationTextClass,
+  validationText,
   wrapperClass,
   children
 }) => {
@@ -28,9 +30,12 @@ export const InputContainer: FC<InputContainerProps> = ({
       <label htmlFor={id} className={activeClass}>
         {label}
       </label>
-      <small id={infoId} className={infoTextClass}>
-        {infoText}
-      </small>
+      {infoText && (
+        <small id={infoId} className='form-text'>
+          {infoText}
+        </small>
+      )}
+      <div className={validationTextClass}>{validationText}</div>
     </div>
   );
 };

package/src/Input/TextArea.tsx

@@ -1,15 +1,16 @@
 import React, { Ref, ReactNode, TextareaHTMLAttributes } from 'react';
 
 import { InputContainer } from './InputContainer';
-import { getClasses, getInfoTextControlClass, useFocus } from './utils';
+import { getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 
-export interface TextAreaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Etichetta del campo TextArea. */
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
+  /** Testo di validazione per l'elemento del moduleo */
+  validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */
   infoText?: string;
   /** Il valore nel campo TextArea. */
@@ -38,6 +39,7 @@ export const TextArea = ({
   cssModule,
   innerRef,
   label,
+  validationText,
   infoText,
   placeholder,
   normalized,
@@ -48,16 +50,12 @@ export const TextArea = ({
   testId,
   ...attributes
 }: TextAreaProps) => {
-  const { toggleFocusLabel, toggleBlurLabel, isFocused } =
-    useFocus<HTMLTextAreaElement>({
-      onFocus: attributes.onFocus,
-      onBlur: attributes.onBlur
-    });
+  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus<HTMLTextAreaElement>({
+    onFocus: attributes.onFocus,
+    onBlur: attributes.onBlur
+  });
 
-  const infoTextControlClass = getInfoTextControlClass(
-    { valid, invalid },
-    cssModule
-  );
+  const validationTextControlClass = getValidationTextControlClass({ valid, invalid }, cssModule);
 
   const extraAttributes: { ['aria-describedby']?: string } = {};
 
@@ -68,17 +66,18 @@ export const TextArea = ({
   }
 
   // Styling
-  const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
+  const { activeClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
     className,
+    'textarea',
     {
       valid,
       invalid,
       placeholder,
       value,
       label,
-      infoText,
+      validationText,
       normalized: Boolean(normalized),
-      infoTextControlClass,
+      validationTextControlClass,
       isFocused,
       originalWrapperClass
     },
@@ -98,10 +97,11 @@ export const TextArea = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
 
@@ -134,7 +134,7 @@ export const TextArea = ({
       </InputContainer>
     );
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return (
       <InputContainer {...containerProps}>
         <textarea

package/src/Input/utils.tsx

@@ -10,13 +10,7 @@ type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
 };
 type FormControlProps = Pick<InputProps, 'addon' | 'normalized'> & TypeProps;
 
-function getFormControlClassInternal({
-  plaintext,
-  staticInput,
-  type = 'text',
-  addon,
-  normalized
-}: FormControlProps) {
+function getFormControlClassInternal({ plaintext, staticInput, type = 'text', addon, normalized }: FormControlProps) {
   const formControlClass = 'form-control';
   if (plaintext || staticInput || normalized) {
     return `${formControlClass}-plaintext`;
@@ -32,17 +26,11 @@ function getFormControlClassInternal({
   return formControlClass;
 }
 
-export function getFormControlClass(
-  props: FormControlProps,
-  cssModule?: CSSModule
-) {
+export function getFormControlClass(props: FormControlProps, cssModule?: CSSModule) {
   return mapToCssModules(getFormControlClassInternal(props), cssModule);
 }
 
-export function getInfoTextControlClass(
-  { invalid }: ValidationProps,
-  cssModule?: CSSModule
-) {
+export function getValidationTextControlClass({ invalid }: ValidationProps, cssModule?: CSSModule) {
   return mapToCssModules(
     classNames({
       'form-text': true,
@@ -52,12 +40,7 @@ export function getInfoTextControlClass(
   );
 }
 
-export function getTag({
-  tag,
-  plaintext,
-  staticInput,
-  type = 'text'
-}: Pick<InputProps, 'tag'> & TypeProps) {
+export function getTag({ tag, plaintext, staticInput, type = 'text' }: Pick<InputProps, 'tag'> & TypeProps) {
   if (tag) {
     return tag;
   }
@@ -71,19 +54,17 @@ export function getTag({
 }
 
 type InputClassesParams = ValidationProps &
-  Pick<
-    InputProps,
-    'bsSize' | 'placeholder' | 'value' | 'label' | 'infoText' | 'normalized'
-  > & {
+  Pick<InputProps, 'bsSize' | 'placeholder' | 'value' | 'label' | 'validationText' | 'normalized'> & {
     isFocused: boolean;
     inputPassword?: boolean;
     formControlClass?: string;
-    infoTextControlClass?: string;
+    validationTextControlClass?: string;
     originalWrapperClass: InputProps['wrapperClassName'];
   };
 
 export function getClasses(
   className: string | undefined,
+  type: string,
   {
     isFocused,
     valid,
@@ -92,21 +73,19 @@ export function getClasses(
     placeholder,
     value,
     label,
-    infoText,
+    validationText,
     normalized,
     inputPassword,
     formControlClass,
-    infoTextControlClass,
+    validationTextControlClass,
     originalWrapperClass
   }: InputClassesParams,
   cssModule?: CSSModule
 ) {
-  const hasPlainCondition = placeholder || label || infoText;
+  const hasPlainCondition = placeholder || label || validationText;
   const baseCondition = hasPlainCondition && !normalized && !inputPassword;
-  const passwordOnlyCondition =
-    inputPassword && !hasPlainCondition && !normalized;
-  const normalizedOnlyCondition =
-    normalized && !hasPlainCondition && !inputPassword;
+  const passwordOnlyCondition = inputPassword && !hasPlainCondition && !normalized;
+  const normalizedOnlyCondition = normalized && !hasPlainCondition && !inputPassword;
 
   const classes = mapToCssModules(
     classNames(
@@ -120,17 +99,14 @@ export function getClasses(
     ),
     cssModule
   );
-  const wrapperClass = mapToCssModules(
-    classNames(className, originalWrapperClass, 'form-group'),
-    cssModule
-  );
-  const infoTextClass = mapToCssModules(
+  const wrapperClass = mapToCssModules(classNames(className, originalWrapperClass, 'form-group'), cssModule);
+  const validationTextClass = mapToCssModules(
     classNames(
       {
         'valid-feedback': valid,
         'invalid-feedback form-feedback just-validate-error-label': invalid
       },
-      infoTextControlClass
+      validationTextControlClass
     ),
     cssModule
   );
@@ -151,7 +127,7 @@ export function getClasses(
 
   const activeClass = mapToCssModules(
     classNames({
-      active: isFocused || placeholder || value
+      active: isFocused || placeholder || value || ['date', 'time'].includes(type)
     }),
     cssModule
   );
@@ -160,7 +136,7 @@ export function getClasses(
     wrapperClass,
     inputClasses,
     activeClass,
-    infoTextClass
+    validationTextClass
   };
 }
 

package/src/LinkList/LinkListItem.tsx

@@ -1,14 +1,7 @@
-import React, {
-  FC,
-  AnchorHTMLAttributes,
-  ElementType,
-  MouseEvent,
-  MouseEventHandler
-} from 'react';
+import React, { FC, AnchorHTMLAttributes, ElementType, MouseEvent, MouseEventHandler } from 'react';
 import classNames from 'classnames';
 
-export interface LinkListItemProps
-  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkListItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   /** Indica se l'elemento è attivo o no */
   active?: boolean;
   /** Indica se l'elemento è disabilitato o no */
@@ -77,12 +70,7 @@ export const LinkListItem: FC<LinkListItemProps> = ({
     return (
       <li className={wrapperClassName} data-testid={testId}>
         <Tag>
-          <a
-            href={href || '#'}
-            {...attributes}
-            className={classes}
-            {...handlers}
-          >
+          <a href={href || '#'} {...attributes} className={classes} {...handlers}>
             {children}
           </a>
         </Tag>

package/src/Megamenu/Megamenu.tsx

@@ -13,13 +13,7 @@ export interface MegamenuProps extends NavbarProps {
   testId?: string;
 }
 
-export const Megamenu: FC<MegamenuProps> = ({
-  brand,
-  className,
-  children,
-  testId,
-  ...attributes
-}) => {
+export const Megamenu: FC<MegamenuProps> = ({ brand, className, children, testId, ...attributes }) => {
   const [openNav, setOpenNav] = useState(false);
   const toggle = () => {
     setOpenNav(!openNav);

package/src/Megamenu/MegamenuFooter.tsx

@@ -6,11 +6,7 @@ export interface MegamenuFooterProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
 }
 
-export const MegamenuFooter: FC<MegamenuFooterProps> = ({
-  className,
-  children,
-  ...attributes
-}) => {
+export const MegamenuFooter: FC<MegamenuFooterProps> = ({ className, children, ...attributes }) => {
   const classes = classNames(className, 'it-megamenu-footer');
   return (
     <div className={classes} {...attributes}>