Skip to content

Commit

Permalink
feat: new tab component
Browse files Browse the repository at this point in the history 
Co-authored-by: Andrea Stagi <stagi.andrea@gmail.com>
  • Loading branch information
@Virtute90 @astagi
Virtute90 and astagi authored Jan 14, 2025
1 parent a34a1b8 commit b5b9c85
Show file tree
Hide file tree
Showing 34 changed files with 5,014 additions and 1,356 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@
"@types/jest": "^29.5.12",
"@types/node": "^20.12.2",
"@types/react": "^18.2.75",
"@types/react-bootstrap": "^0.32.37",
"@types/react-dom": "^18.2.24",
"@types/react-transition-group": "^4.4.10",
"bootstrap-italia": "2.12.1",
Expand Down Expand Up @@ -135,6 +136,7 @@
"dependencies": {
"classnames": "^2.3.1",
"is-number": "^7.0.0",
"react-bootstrap": "^2.10.6",
"react-stickup": "^1.12.1",
"react-toastify": "^7.0.4",
"react-transition-group": "^4.4.5",
Expand Down
3 changes: 1 addition & 2 deletions src/Alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,11 @@ export interface AlertProps extends HTMLAttributes<HTMLElement> {
testId?: string;
}


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} />;
};
};
139 changes: 70 additions & 69 deletions src/Autocomplete/Autocomplete.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,80 +1,81 @@
import React, { FC} from 'react';
import React, { FC } from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore non ci sono i types
import BaseAutocomplete from 'accessible-autocomplete/react'; // Reference to https://www.npmjs.com/package/accessible-autocomplete

export interface AutocompleteAttributes {
/** Identificativo */
id?: string;
/** Valori chiave - valore all'interno della select */
source: { value: string; label: string }[];
/** Placeholder (default: ``) */
placeholder?: string;
/** Valore di default (default: ``) */
defaultValue?: string;
/** Modalità display menu (default: `inline`) */
displayMenu?: string;
/** Funzione ritornante stringa in caso di nessun risultato */
tNoResults?: () => string;
/** Funzione ritornante stringa di suggerimento */
tAssistiveHint?: () => string;
/** Funzione ritornante stringa se la query è troppo corta */
tStatusQueryTooShort?: () => string;
/** Funzione ritornante stringa se non ci sono risultati di ricerca */
tStatusNoResults?: () => string;
/** Funzione ritornante stringa che identifica l'opzione selezionata */
tStatusSelectedOption?: () => string;
/** Funzione ritornante stringa che identifica i risultati */
tStatusResults?: () => string;
/** Classi aggiuntive da usare per il componente Button */
className?: string;
testId?: string;
/** Identificativo */
id?: string;
/** Valori chiave - valore all'interno della select */
source: { value: string; label: string }[];
/** Placeholder (default: ``) */
placeholder?: string;
/** Valore di default (default: ``) */
defaultValue?: string;
/** Modalità display menu (default: `inline`) */
displayMenu?: string;
/** Funzione ritornante stringa in caso di nessun risultato */
tNoResults?: () => string;
/** Funzione ritornante stringa di suggerimento */
tAssistiveHint?: () => string;
/** Funzione ritornante stringa se la query è troppo corta */
tStatusQueryTooShort?: () => string;
/** Funzione ritornante stringa se non ci sono risultati di ricerca */
tStatusNoResults?: () => string;
/** Funzione ritornante stringa che identifica l'opzione selezionata */
tStatusSelectedOption?: () => string;
/** Funzione ritornante stringa che identifica i risultati */
tStatusResults?: () => string;
/** Classi aggiuntive da usare per il componente Button */
className?: string;
testId?: string;
}


const tAssistiveHintDefault = () =>
'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento'
const tNoResultsDefault = () => 'Nessun risultato trovato'
const tStatusQueryTooShortDefault = (minQueryLength: number) => `Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`
const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca'
const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) => `${selectedOption} ${index + 1} di ${length} è sottolineato`
'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento';
const tNoResultsDefault = () => 'Nessun risultato trovato';
const tStatusQueryTooShortDefault = (minQueryLength: number) =>
`Digita ${minQueryLength} o più caratteri per mostrare le opzioni di ricerca`;
const tStatusNoResultsDefault = () => 'Nessun risultato di ricerca';
const tStatusSelectedOptionDefault = (selectedOption: number, length: number, index: number) =>
`${selectedOption} ${index + 1} di ${length} è sottolineato`;
const tStatusResultsDefault = (length: number, contentSelectedOption: number) => {
const words = {
result: length === 1 ? 'risultato' : 'risultati',
is: length === 1 ? 'è' : 'sono',
available: length === 1 ? 'disponibile' : 'disponibili',
}
const words = {
result: length === 1 ? 'risultato' : 'risultati',
is: length === 1 ? 'è' : 'sono',
available: length === 1 ? 'disponibile' : 'disponibili'
};

return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`
}
return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`;
};

export const Autocomplete: FC<AutocompleteAttributes> = ({
tAssistiveHint = tAssistiveHintDefault,
tNoResults = tNoResultsDefault,
tStatusQueryTooShort = tStatusQueryTooShortDefault,
tStatusNoResults = tStatusNoResultsDefault,
tStatusSelectedOption = tStatusSelectedOptionDefault,
tStatusResults = tStatusResultsDefault,
placeholder = '',
defaultValue = '',
displayMenu = 'inline',
source,
...attributes
}) => {

return <BaseAutocomplete
id='autocomplete'
source={source}
placeholder={placeholder}
defaultValue={defaultValue}
displayMenu={displayMenu}
tAssistiveHint = {tAssistiveHint}
tNoResults = {tNoResults}
tStatusQueryTooShort = {tStatusQueryTooShort}
tStatusNoResults = {tStatusNoResults}
tStatusSelectedOption = {tStatusSelectedOption}
tStatusResults = {tStatusResults}
{...attributes}
/>;
};
export const Autocomplete: FC<AutocompleteAttributes> = ({
tAssistiveHint = tAssistiveHintDefault,
tNoResults = tNoResultsDefault,
tStatusQueryTooShort = tStatusQueryTooShortDefault,
tStatusNoResults = tStatusNoResultsDefault,
tStatusSelectedOption = tStatusSelectedOptionDefault,
tStatusResults = tStatusResultsDefault,
placeholder = '',
defaultValue = '',
displayMenu = 'inline',
source,
...attributes
}) => {
return (
<BaseAutocomplete
id='autocomplete'
source={source}
placeholder={placeholder}
defaultValue={defaultValue}
displayMenu={displayMenu}
tAssistiveHint={tAssistiveHint}
tNoResults={tNoResults}
tStatusQueryTooShort={tStatusQueryTooShort}
tStatusNoResults={tStatusNoResults}
tStatusSelectedOption={tStatusSelectedOption}
tStatusResults={tStatusResults}
{...attributes}
/>
);
};
2 changes: 1 addition & 1 deletion src/BackToTop/BackToTop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const backToTop = () => {
};

export const BackToTop = ({
ariaLabel='Torna su',
ariaLabel = 'Torna su',
className,
dark = false,
small = false,
Expand Down
21 changes: 17 additions & 4 deletions src/Card/CardCategory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,26 @@ export interface CardCategoryProps extends HTMLAttributes<HTMLElement> {
testId?: string;
}

export const CardCategory: FC<CardCategoryProps> = ({ iconName, iconTitle, date, href, onClick, testId, children, textDescription, dateDescription, ...rest }) => {
export const CardCategory: FC<CardCategoryProps> = ({
iconName,
iconTitle,
date,
href,
onClick,
testId,
children,
textDescription,
dateDescription,
...rest
}) => {
const classes = classNames({
'category-top': date || ' ',
'categoryicon-top': iconName
});
// Simple category link
const categoryLink = !iconName && (
<>
{textDescription && <span className="visually-hidden">{textDescription}</span>}
{textDescription && <span className='visually-hidden'>{textDescription}</span>}
<a href={href} className='category' onClick={onClick}>
{children}
</a>
Expand All @@ -44,8 +55,10 @@ export const CardCategory: FC<CardCategoryProps> = ({ iconName, iconTitle, date,
<div className={classes} {...rest} data-testid={testId}>
{categoryLink}
{categoryIcon}
{categoryText && textDescription && <span className="visually-hidden">{textDescription}</span>}{categoryText}
{dateDescription && <span className="visually-hidden">{dateDescription}</span>}{categoryDate}
{categoryText && textDescription && <span className='visually-hidden'>{textDescription}</span>}
{categoryText}
{dateDescription && <span className='visually-hidden'>{dateDescription}</span>}
{categoryDate}
</div>
);
};
20 changes: 8 additions & 12 deletions src/Collapse/Collapse.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { CSSModule } from 'reactstrap/types/lib/utils';

import { Icon } from '../Icon/Icon';


// Copy over from reactstrap and add new ones
export interface CollapseProps extends HTMLAttributes<HTMLElement> {
/** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */
Expand Down Expand Up @@ -43,7 +42,7 @@ export interface CollapseProps extends HTMLAttributes<HTMLElement> {
/** Da utilizzare per impostare un riferimento all'elemento DOM */
innerRef?: Ref<HTMLElement>;
/** Testo pulsante di chiusura per screen reader */
closeSrText?: string,
closeSrText?: string;
testId?: string;
}

Expand All @@ -57,7 +56,7 @@ export const Collapse: FC<CollapseProps> = ({
onOverlayClick,
cssModule,
testId,
closeSrText='Nascondi la navigazione',
closeSrText = 'Nascondi la navigazione',
...attributes
}) => {
const newCssModule = {
Expand All @@ -69,13 +68,10 @@ export const Collapse: FC<CollapseProps> = ({
expanded: isOpen
});
const style = { display: isOpen ? 'block' : 'none' };
const overlayClasses = classNames(
'overlay',
{
'fade' : isOpen,
'show' : isOpen
}
)
const overlayClasses = classNames('overlay', {
fade: isOpen,
show: isOpen
});
return (
<CollapseBase
className={classes}
Expand All @@ -88,8 +84,8 @@ export const Collapse: FC<CollapseProps> = ({
<div className={overlayClasses} style={style} onClick={onOverlayClick}></div>
<div className='close-div'>
<button className='btn close-menu' type='button' onClick={onOverlayClick}>
<span className="visually-hidden">{closeSrText}</span>
<Icon color='white' icon='it-close-big'/>
<span className='visually-hidden'>{closeSrText}</span>
<Icon color='white' icon='it-close-big' />
</button>
</div>
{megamenu ? <div className='menu-wrapper '>{children}</div> : <>{children}</>}
Expand Down
10 changes: 4 additions & 6 deletions src/Dropdown/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import React, { ElementType, FC } from 'react';
import { Dropdown as BSDRopdown, DropdownProps as BSDRopdownProps} from 'reactstrap';
import { Dropdown as BSDRopdown, DropdownProps as BSDRopdownProps } from 'reactstrap';
export interface DropdownProps extends BSDRopdownProps {
tag?: ElementType;
inNavbar?: boolean;
Expand All @@ -21,7 +21,7 @@ export const Dropdown: FC<DropdownProps> = ({
...attributes
}) => {
const classes = classNames(className, {
'text-center': textCenter,
'text-center': textCenter
});

const [isOpen, setIsOpen] = React.useState(false);
Expand All @@ -41,10 +41,8 @@ export const Dropdown: FC<DropdownProps> = ({
>
{
// eslint-disable-next-line @typescript-eslint/no-explicit-any
React.Children.map(children, (child: any) =>
React.cloneElement(child, { inNavbar: inNavbar })
)
}
React.Children.map(children, (child: any) => React.cloneElement(child, { inNavbar: inNavbar }))
}
</BSDRopdown>
);
};
6 changes: 3 additions & 3 deletions src/Forward/Forward.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@ export const Forward: FC<ForwardProps> = ({ className, children, testId, ...attr
<a
className={classes}
onClick={(e) => {
e.preventDefault()
e.preventDefault();
if (attributes.href) {
const scrollToRef = document.querySelector(attributes.href)
const scrollToRef = document.querySelector(attributes.href);
if (scrollToRef) {
scrollToRef.scrollIntoView({
behavior: 'smooth',
block: 'start'
})
});
}
}
}}
Expand Down
8 changes: 7 additions & 1 deletion src/Grid/GridItemTextWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,13 @@ export interface GridItemTextWrapperProps extends HTMLAttributes<HTMLSpanElement
tag?: ElementType;
}

export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({ className, children, testId, tag='span', ...attributes }) => {
export const GridItemTextWrapper: FC<GridItemTextWrapperProps> = ({
className,
children,
testId,
tag = 'span',
...attributes
}) => {
const classes = classname('it-griditem-text-wrapper', className);
const Tag = tag;
return (
Expand Down
4 changes: 2 additions & 2 deletions src/Header/HeaderToggler.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export interface HeaderTogglerProps extends ButtonHTMLAttributes<HTMLButtonEleme

const BUTTON = 'button';

export const HeaderToggler = ({ className, tag, type, isOpen=false, testId, ...attributes }: HeaderTogglerProps) => {
export const HeaderToggler = ({ className, tag, type, isOpen = false, testId, ...attributes }: HeaderTogglerProps) => {
const HeaderType = useHeaderContext();
const defaultTag = HeaderType === SLIM ? 'a' : BUTTON;
const defaultType = HeaderType === SLIM ? undefined : BUTTON;
Expand All @@ -32,7 +32,7 @@ export const HeaderToggler = ({ className, tag, type, isOpen=false, testId, ...a
},
className
);
const expanded = isOpen ? "true" : "false"
const expanded = isOpen ? 'true' : 'false';
useEffect(() => {
document.querySelectorAll('.container-fluid').forEach((element) => {
element.classList.remove('container-fluid');
Expand Down
2 changes: 1 addition & 1 deletion src/Icon/assets/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -698,4 +698,4 @@ export const allIcons = Object.keys(iconList);
export interface SVGRProps {
title?: string;
titleId?: string;
}
}
2 changes: 1 addition & 1 deletion src/Input/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -416,4 +416,4 @@ export const Input = ({
}

return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
};
};
1 change: 0 additions & 1 deletion src/Input/InputContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export const InputContainer: FC<InputContainerProps> = ({
iconLeft,
children
}) => {

if (hasButtonRight || hasIconLeft) {
return (
<div className={wrapperClass} data-testid={testId}>
Expand Down
Loading

0 comments on commit b5b9c85

Please sign in to comment.