Merge remote-tracking branch 'origin/main' into feature/deps-bump-963

src/Alert/Alert.tsx

@@ -1,5 +1,5 @@
-import React, { FC, HTMLAttributes, MouseEventHandler, ElementType, Ref } from 'react';
-import { Alert as InnerAlert, FadeProps } from 'reactstrap';
+import React, { ElementType, FC, HTMLAttributes, MouseEventHandler, Ref } from 'react';
+import { FadeProps, Alert as InnerAlert } from 'reactstrap';
 import { CSSModule } from 'reactstrap/types/lib/utils';
 
 // Copy over from reactstrap and add new ones
@@ -8,28 +8,32 @@ export interface AlertProps extends HTMLAttributes<HTMLElement> {
   closeAriaLabel?: string;
   /** Oggetto contenente la nuova mappatura per le classi CSS. */
   cssModule?: CSSModule;
-  /** Le varianti di colore definite in Bootstrap Italia */
+  /** Le varianti di colore definite in Bootstrap Italia
+   * @default primary
+   */
   color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | string;
-  /** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert. Valore di default: true. */
+  /** Quando abilitato mostra un'animazione di entrata ed uscita del componente Alert.
+   * @default true */
   fade?: boolean;
   /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
   tag?: ElementType;
   transition?: FadeProps;
   /** Da utilizzare per impostare un riferimento all'elemento DOM */
   innerRef?: Ref<HTMLElement>;
+  /** Quando abilitato mostra l'alert
+   * @default true
+   */
   isOpen?: boolean;
   toggle?: MouseEventHandler<any>;
   testId?: string;
 }
 
-const defaultProps = {
-  color: 'success',
-  isOpen: true,
-  fade: true
-};
 
-export const Alert: FC<AlertProps> = ({ testId, ...props }) => {
-  return <InnerAlert data-testid={testId} {...props} />;
-};
-
-Alert.defaultProps = defaultProps;
+export const Alert: FC<AlertProps> = ({ color = 'success', isOpen = true, fade = true, testId, ...props }) => {
+  const baseProps = {
+    color,
+    isOpen,
+    fade
+  };
+  return <InnerAlert data-testid={testId} {...baseProps} {...props} />;
+};

src/Input/Input.tsx

@@ -1,21 +1,21 @@
+import isNumber from 'is-number';
 import React, {
-  InputHTMLAttributes,
   ElementType,
-  Ref,
+  InputHTMLAttributes,
   ReactNode,
+  Ref,
   useCallback,
-  useState,
+  useEffect,
   useRef,
-  useEffect
+  useState
 } from 'react';
-import isNumber from 'is-number';
 
-import { InputContainer } from './InputContainer';
-import { Icon } from '../Icon/Icon';
-import { getTag, getFormControlClass, getClasses, getValidationTextControlClass, useFocus } from './utils';
+import classNames from 'classnames';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
+import { Icon } from '../Icon/Icon';
 import { notifyDeprecation } from '../utils';
-import classNames from 'classnames';
+import { InputContainer } from './InputContainer';
+import { getClasses, getFormControlClass, getTag, getValidationTextControlClass, useFocus } from './utils';
 
 // taken from reactstrap types
 type InputType =
@@ -101,6 +101,14 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   static?: boolean;
   /** Quando attivo rimuove il componente contenitore dell'Input. Utile per un controllo maggiore dello styling */
   noWrapper?: boolean;
+  /** Indica che il componente ha un bottone a destra rispetto all'input */
+  hasButtonRight?: boolean;
+  /** Componente per il bottone */
+  buttonRight?: ReactNode;
+  /** Indica che il componente ha una icona a sinistra rispetto all'input */
+  hasIconLeft?: boolean;
+  /** Componente per l'icona */
+  iconLeft?: ReactNode;
   testId?: string;
 }
 
@@ -128,6 +136,10 @@ export const Input = ({
   size,
   testId,
   noWrapper = false,
+  hasButtonRight,
+  buttonRight,
+  hasIconLeft,
+  iconLeft,
   ...attributes
 }: InputProps) => {
   const [isHidden, setHidden] = useState(true);
@@ -249,7 +261,11 @@ export const Input = ({
     label,
     validationTextClass,
     validationText,
-    wrapperClass
+    wrapperClass,
+    hasButtonRight,
+    buttonRight,
+    hasIconLeft,
+    iconLeft
   };
 
   if (noWrapper) {
@@ -399,4 +415,4 @@ export const Input = ({
   }
 
   return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
-};
+};

src/Input/InputContainer.tsx

@@ -10,6 +10,14 @@ export interface InputContainerProps extends HTMLAttributes<HTMLElement> {
   id: string | undefined;
   infoId: string | undefined;
   infoText: string | undefined;
+  /** Indica che il componente ha un bottone a destra rispetto all'input */
+  hasButtonRight?: boolean;
+  /** Componente per il bottone */
+  buttonRight?: ReactNode;
+  /** Indica che il componente ha una icona a sinistra rispetto all'input */
+  hasIconLeft?: boolean;
+  /** Componente per l'icona */
+  iconLeft?: ReactNode;
   testId?: string;
 }
 
@@ -24,8 +32,33 @@ export const InputContainer: FC<InputContainerProps> = ({
   validationTextClass,
   validationText,
   wrapperClass,
+  hasButtonRight,
+  buttonRight,
+  hasIconLeft,
+  iconLeft,
   children
 }) => {
+
+  if (hasButtonRight || hasIconLeft) {
+    return (
+      <div className={wrapperClass} data-testid={testId}>
+        <div className='input-group'>
+          {hasIconLeft && <span className='input-group-text'>{iconLeft}</span>}
+          <label htmlFor={id} className={activeClass + ' ' + extraLabelClass}>
+            {label}
+          </label>
+          {children}
+          {infoText && (
+            <small id={infoId} className='form-text'>
+              {infoText}
+            </small>
+          )}
+          <div className={validationTextClass}>{validationText}</div>
+          {hasButtonRight && <div className='input-group-append'>{buttonRight}</div>}
+        </div>
+      </div>
+    );
+  }
   return (
     <div className={wrapperClass} data-testid={testId}>
       <label htmlFor={id} className={activeClass + ' ' + extraLabelClass}>

stories/Components/Form/Input.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 // @ts-ignore per il momento questo modulo non ha types
 import Autocomplete from "accessible-autocomplete/react"; // Reference to https://www.npmjs.com/package/accessible-autocomplete
 import React, { useState } from "react";
-import { FormGroup, Icon, Input, TextArea } from "../../../src";
+import { Button, FormGroup, Icon, Input, TextArea } from "../../../src";
 
 const meta: Meta<typeof Input> = {
     title: "Documentazione/Form/Input",
@@ -44,107 +44,37 @@ export const UtilizzoDiPlaceholderELabel: Story = {
     )
 };
 
-const InputConIconaOBottoniHooks = () => {
-    const [isFocused1, toggleFocus1] = useState(false);
-    const [isFocused2, toggleFocus2] = useState(false);
-    const [isFocused3, toggleFocus3] = useState(false);
-
-    const toggleFocusLabel1 = () => toggleFocus1(true);
-    // @ts-ignore: ignore types for now
-    const toggleBlurLabel1 = (e) => {
-        if (e.target.value === "") {
-            toggleFocus1(!isFocused1);
-        }
-    };
-    const toggleFocusLabel2 = () => toggleFocus2(true);
-    // @ts-ignore: ignore types for now
-    const toggleBlurLabel2 = (e) => {
-        if (e.target.value === "") {
-            toggleFocus2(!isFocused2);
-        }
-    };
-    const toggleFocusLabel3 = () => toggleFocus3(true);
-    // @ts-ignore: ignore types for no}w
-    const toggleBlurLabel3 = (e) => {
-        if (e.target.value === "") {
-            toggleFocus3(!isFocused3);
-        }
-    };
-    return (
-        <div>
-            <div className="form-group">
-                <div className="input-group">
-                    <span className="input-group-text">
-                        <Icon icon="it-pencil" aria-hidden size="sm" />
-                    </span>
-                    <label htmlFor="input-group-1" className={isFocused1 ? "active" : ""}>
-                        Con Etichetta
-                    </label>
-                    <input
-                        type="text"
-                        className={isFocused1 ? "form-control focus--mouse" : "form-control"}
-                        onFocus={toggleFocusLabel1}
-                        onBlur={toggleBlurLabel1}
-                        id="input-group-1"
-                        name="input-group-1"
-                    />
-                </div>
-            </div>
-            <div className="form-group">
-                <div className="input-group">
-                    <span className="input-group-text">
-                        <Icon icon="it-pencil" color="danger" aria-hidden size="sm" />
-                    </span>
-                    <label htmlFor="input-group-2" className="active">
-                        Con Etichetta e placeholder
-                    </label>
-                    <input
-                        type="text"
-                        className={isFocused2 ? "form-control focus--mouse" : "form-control"}
-                        onFocus={toggleFocusLabel2}
-                        onBlur={toggleBlurLabel2}
-                        id="input-group-2"
-                        name="input-group-2"
-                        placeholder="Lorem Ipsum"
-                    />
-                </div>
-            </div>
-            <div className="form-group">
-                <div className="input-group">
-                    <span className="input-group-text">
-                        <Icon icon="it-pencil" color="primary" aria-hidden size="sm" />
-                    </span>
-                    <label htmlFor="input-group-3" className={isFocused3 ? "active" : ""}>
-                        Con Etichetta e bottone di tipo primary
-                    </label>
-                    <input
-                        type="text"
-                        className={isFocused3 ? "form-control focus--mouse" : "form-control"}
-                        onFocus={toggleFocusLabel3}
-                        onBlur={toggleBlurLabel3}
-                        id="input-group-3"
-                        name="input-group-3"
-                    />
-                    <div className="input-group-append">
-                        <button className="btn btn-primary" type="button" id="button-3">
-                            Invio
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
 export const InputConIconaOBottoni: Story = {
     render: () => {
-        return <InputConIconaOBottoniHooks />
-    },
-    parameters: {
-        docs: {
-            canvas: { sourceState: "none" },
-        },
-    },
+        return (
+            <>
+                <Input
+                    id='exampleInputIcon'
+                    label='Campo di tipo testuale'
+                    type='text'
+                    hasIconLeft
+                    iconLeft={<Icon icon='it-pencil' aria-hidden size='sm' />}
+                />
+                <Input
+                    id='exampleInputIconDanger'
+                    label='Con etichetta e placeholder'
+                    placeholder='Lorem Ipsum'
+                    type='text'
+                    hasIconLeft
+                    iconLeft={<Icon icon='it-pencil' aria-hidden color='danger' size='sm' />}
+                />
+                <Input
+                    id='exampleInputButton'
+                    label='Con etichetta e bottone di tipo primary'
+                    type='text'
+                    hasIconLeft
+                    iconLeft={<Icon icon='it-pencil' color='primary' aria-hidden size='sm' />}
+                    hasButtonRight
+                    buttonRight={<Button color='primary'>Invio</Button>}
+                />
+            </>
+        )
+    }
 }
 
 

stories/Components/Icon.stories.tsx

@@ -37,7 +37,7 @@ export const EsempioInterattivo: Story = {
     },
     className: {
       control: 'select',
-      options: ['bg-grey', 'bg-dark', 'bg-light']
+      options: ['', 'bg-dark', 'bg-light']
     },
     color: {
       control: 'select',