From 21d65b5a2003ea3a5fc3f076f867c4012ce165e6 Mon Sep 17 00:00:00 2001 From: Virtute90 Date: Mon, 25 Nov 2024 13:08:47 +0100 Subject: [PATCH 01/13] refactor: revisione completa del componente tab --- package.json | 2 + src/Tab/TabNav.tsx | 19 + src/Tab/TabNavItem.tsx | 14 + src/Tab/TabNavLink.tsx | 14 + src/Tab/TabPanel.tsx | 14 + src/index.ts | 14 +- stories/Components/Tab.stories.tsx | 906 +++++++++++++++-------------- stories/Documentation/Tab.mdx | 534 ++++------------- yarn.lock | 166 +++++- 9 files changed, 812 insertions(+), 871 deletions(-) create mode 100644 src/Tab/TabNav.tsx create mode 100644 src/Tab/TabNavItem.tsx create mode 100644 src/Tab/TabNavLink.tsx create mode 100644 src/Tab/TabPanel.tsx diff --git a/package.json b/package.json index 36c1b4f31..aba79bd52 100644 --- a/package.json +++ b/package.json @@ -95,6 +95,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.11.0", @@ -126,6 +127,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", diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx new file mode 100644 index 000000000..5efcdddfd --- /dev/null +++ b/src/Tab/TabNav.tsx @@ -0,0 +1,19 @@ +import classNames from 'classnames'; +import React, { ElementType, FC } from 'react'; +import { Nav, NavProps } from 'react-bootstrap'; + +export interface TabNavProps extends NavProps { + /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ + tag?: ElementType; + /** Classi aggiuntive da usare per il componente Tab */ + className?: string; + testId?: string; +} + +export const TabNav: FC = ({ className, tag = 'ul', testId, ...attributes }) => { + const Tag = tag; + + const classes = classNames(className, 'nav-tabs'); + + return ; +}; diff --git a/src/Tab/TabNavItem.tsx b/src/Tab/TabNavItem.tsx new file mode 100644 index 000000000..2d6bc9efd --- /dev/null +++ b/src/Tab/TabNavItem.tsx @@ -0,0 +1,14 @@ +import React, { ElementType, FC } from 'react'; +import { Nav, NavItemProps } from 'react-bootstrap'; + +export interface TabNavItemProps extends NavItemProps { + /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ + tag?: ElementType; + testId?: string; +} + +export const TabNavItem: FC = ({ tag = 'li', testId, ...attributes }) => { + const Tag = tag; + + return ; +}; diff --git a/src/Tab/TabNavLink.tsx b/src/Tab/TabNavLink.tsx new file mode 100644 index 000000000..bc1c7d06f --- /dev/null +++ b/src/Tab/TabNavLink.tsx @@ -0,0 +1,14 @@ +import React, { ElementType, FC } from 'react'; +import { Nav, NavLinkProps } from 'react-bootstrap'; + +export interface TabNavLinkProps extends NavLinkProps { + /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ + tag?: ElementType; + testId?: string; +} + +export const TabNavLink: FC = ({ tag, testId, ...attributes }) => { + const Tag = tag; + + return ; +}; diff --git a/src/Tab/TabPanel.tsx b/src/Tab/TabPanel.tsx new file mode 100644 index 000000000..beaa5ebda --- /dev/null +++ b/src/Tab/TabPanel.tsx @@ -0,0 +1,14 @@ +import React, { ElementType, FC } from 'react'; +import { NavProps, Tab } from 'react-bootstrap'; + +export interface TabsProps extends NavProps { + /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ + tag?: ElementType; + testId?: string; +} + +export const TabContainer: FC = ({ tag, testId, ...attributes }) => { + const Tag = tag; + + return ; +}; diff --git a/src/index.ts b/src/index.ts index 196137072..a81bd4bfd 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,8 +37,6 @@ export { PopoverBody, PopoverHeader, Row, - TabContent, - TabPane, Table, Tooltip, UncontrolledAlert, @@ -47,6 +45,8 @@ export { Util } from 'reactstrap'; +export { TabContainer, TabContent, TabPane } from 'react-bootstrap'; + export { Accordion } from './Accordion/Accordion'; export { AccordionBody } from './Accordion/AccordionBody'; export { AccordionHeader } from './Accordion/AccordionHeader'; @@ -135,6 +135,9 @@ export { StepperDots } from './Stepper/StepperDots'; export { StepperHeader } from './Stepper/StepperHeader'; export { StepperHeaderElement } from './Stepper/StepperHeaderElement'; export { StepperNav } from './Stepper/StepperNav'; +export { TabNav } from './Tab/TabNav'; +export { TabNavItem } from './Tab/TabNavItem'; +export { TabNavLink } from './Tab/TabNavLink'; export { ThumbNav } from './ThumbNav/ThumbNav'; export { ThumbNavItem } from './ThumbNav/ThumbNavItem'; export { TimelinePin } from './Timeline/TimelinePin'; @@ -241,6 +244,9 @@ export type { StepperDotsProps } from './Stepper/StepperDots'; export type { StepperHeaderProps } from './Stepper/StepperHeader'; export type { StepperHeaderElementProps } from './Stepper/StepperHeaderElement'; export type { StepperNavProps } from './Stepper/StepperNav'; +export type { TabNavProps } from './Tab/TabNav'; +export type { TabNavItemProps } from './Tab/TabNavItem'; +export type { TabNavLinkProps } from './Tab/TabNavLink'; export type { ThumbNavProps } from './ThumbNav/ThumbNav'; export type { ThumbNavItemProps } from './ThumbNav/ThumbNavItem'; export type { TimelinePinProps } from './Timeline/TimelinePin'; @@ -289,11 +295,11 @@ export type { PopoverHeaderProps, PopoverProps, RowProps, - TabContentProps, - TabPaneProps, TableProps, TooltipProps, UncontrolledAlertProps, UncontrolledCollapseProps, UncontrolledTooltipProps } from 'reactstrap'; + +export type { TabContainerProps, TabContentProps, TabPaneProps } from 'react-bootstrap'; diff --git a/stories/Components/Tab.stories.tsx b/stories/Components/Tab.stories.tsx index b14289c5f..98f1b5556 100644 --- a/stories/Components/Tab.stories.tsx +++ b/stories/Components/Tab.stories.tsx @@ -1,475 +1,517 @@ -import { Meta, StoryObj } from "@storybook/react"; -import React, { useState } from "react"; -import { Col, Container, Icon, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "../../src"; +import { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Icon, TabContainer, TabContent, TabNav, TabNavItem, TabNavLink, TabPane } from '../../src'; -const meta: Meta = { - title: "Documentazione/Componenti/Tab", - component: Nav, +const meta: Meta = { + title: 'Documentazione/Componenti/Tab', + component: TabNav }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Esempi: Story = { +export const TestualeFull: Story = { render: () => ( -
- + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + ) +}; - -
+export const IconaFull: Story = { + render: () => ( + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + ) }; -const TestoWithHooks = () => { - const [activeTab, toggleTab] = useState("1"); - return ( -
- +export const IconaGrandeFull: Story = { + render: () => ( + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + ) +}; - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, - consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. - - -
- ); -} +export const TestoIconaFull: Story = { + render: () => ( + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + ) +}; -export const Testo: Story = { - render: () => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, +export const Testuale: Story = { + render: () => ( + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + ) }; -const IconaWithHooks = () => { - const [activeTab, toggleTab] = useState("1"); - return ( -
- + + + + + + + Tab titolo 1 + + + + + + ) +}; - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. +export const IconaGrande: Story = { + render: () => ( + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + ) +}; + +export const TestoIcona: Story = { + render: () => ( + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + ) +}; + +export const Hidescroll: Story = { + render: () => ( +
+ + + + Attivo + + + Link + + + Link + + + Link + + + Link + + + Link + + + Link + + + Link + + + +
+ ) +}; + +export const TestualePannel: Story = { + render: () => ( + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + Contenuto 1 + + + Contenuto 2 - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, - consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. + + Contenuto 3 - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. + + Contenuto 4 -
- ); -} -export const Icona: Story = { - render: () => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, + + ) }; -const TestoIconaWithHooks = () => { - const [activeTab, toggleTab] = useState("1"); - return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. + + + + + + + Tab titolo 1 + + + + + + + Contenuto 1 + + + Contenuto 2 - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, - consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum - dolore eu fugiat nulla pariatur. + + Contenuto 3 - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa - qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. + + Contenuto 4 -
- ); -} - -export const TestoIcona: Story = { - render: () => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, + + ) }; -const BottoneWithHooks = () => { - const [activeTab, toggleTab] = useState("1"); - return ( - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit - amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis - nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. - - - - - - ); -} - -export const Bottone: Story = { - render: () => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, +export const IconaGrandePannel: Story = { + render: () => ( + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + + Tab titolo 1 + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + ) }; -const VerticaleWithHooks = () => { - const [activeTab, toggleTab] = useState("1"); - return ( - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit - amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis - nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in - reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt - in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. - - - - - - ); -} - -export const Verticale: Story = { - render: () => , - parameters: { - docs: { - canvas: { sourceState: "none" }, - }, - }, +export const TestoIconaPannel: Story = { + render: () => ( + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + ) }; diff --git a/stories/Documentation/Tab.mdx b/stories/Documentation/Tab.mdx index 7a8d511df..d87258f8d 100644 --- a/stories/Documentation/Tab.mdx +++ b/stories/Documentation/Tab.mdx @@ -1,5 +1,4 @@ import { ArgTypes, Canvas, Controls, Meta, Story } from '@storybook/blocks'; -import { Code } from '@storybook/components'; import { Alert, Callout, CalloutText, CalloutTitle } from '../../src'; import * as TabStories from '../Components/Tab.stories'; @@ -7,433 +6,122 @@ import * as TabStories from '../Components/Tab.stories'; # Tab -### Esempi - L'interfaccia a tab (o schede) di Bootstrap si basa sull'utilizzo del layout di navigazione `Nav`, con l'aggiunta della proprietà `tabs`. Per ottenere una versione con sfondo scuro e testo chiaro bisognerà aggiungere un'ulteriore classe: `.nav-dark`. - - -## Con Testo - -Gli esempi sopra riportati non hanno molto senso senza un contenuto che cambi al di sotto di essi; per rendere tali interfacce navigabili è necessario collegare Tab e Pannelli collegando il tag `` dei primi all’attributo id dei secondi, come mostrato di seguito: - - - -#### Source - -```tsx -const [activeTab, toggleTab] = useState('1'); -return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum - dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - -
-); -``` - -## Icona - -Oppure al posto della label usare una icona. +
+ + + Info documentazione + + + La maggior parte degli esempi riguardanti il componente Tab non hanno pannelli di contenuto associati, pertanto la + funzionalità per selezionare il pannello risulterà disattivata. Per vedere il componente Tab in azione fare + riferimento alla sezione [Controllo dei pannelli associati](#controllo-dei-pannelli-associati). + + +
+ +
+ + + Accessibilità + + + Le interfacce a tab, come descritto nelle [pratiche di implementazione WAI ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel), richiedono l’utilizzo di attributi `role="tablist"`, `role="tab"`, `role="tabpanel"`, e ulteriori attributi `aria-`, al fine di trasmettere la loro struttura, funzionalità e stato attuale agli utenti delle tecnologie assistive (come i lettori di schermo). + + Nota che le interfacce dinamiche a tab **non devono** contenere menu a discesa, poiché ciò causa problemi di usabilità e accessibilità. Dal punto di vista dell’usabilità, il fatto che l’elemento trigger del tab attualmente visualizzato non sia immediatamente visibile (dato che si trova all’interno del menu a discesa chiuso) può causare confusione. + + + +
+ +
+ + + Breaking change + + + Dalla versione 5.x.x il componente `Tab` è stato completamente ridisegnato per una migliore implementazione dei + pattern ARIA. + + +
+ +## Tab orizzontali a tutta larghezza + +Aggiungendo la classe `.auto` al contenitore `TabContainer` i tab occupano automaticamente l’intera larghezza disponibile. Se su schermi particolarme piccoli (es: smartphone) le dimensioni dei tab dovessero superare quelle dello schermo, verrà attivato lo scrolling orizzontale dei tab stessi. + +### Tab testuale + +Lo stato dei tab può essere attivo, non attivo e disabilitato. Utilizzare la proprietà `disabled` sul link dei tab da disabilitare. + + + +### Tab con icona + +Le label dei tab possono essere sostituite da icone con classi che ne indicano il tipo, avendo cura di includere all’interno del link un elemento `` con classe `.visually-hidden` contenente la descrizione dedicata agli screen reader. La classe .visually-hidden impedisce la visualizzazione del testo sui browser visuali. + + + +### Tab con icona grande + +Per ottenere icone più grandi utilizzare la classe `.icon-lg` alle icone. Aggiungere la classe `.nav-tabs-icon-lg` al contenitore `TabContainer` per ottimizzare i margini fra tab. + + + +### Tab con testo e icona + +Icone e testi possono convivere all’interno dei tab, l’allineamento verticale dei due elementi è automatico. Per ottenere il corretto margine fra testo e icona nei tab a sviluppo orizzontale è necessario aggiungere la classe `.nav-tabs-icon-text` al contenitore `TabContainer`. + + + +## Tab orizzontali + +In assenza della classe `.auto` i tab vengono dimensionati in base al contenuto. + +### Tab testuale + + + +### Tab con icona -#### Source - -```tsx -const [activeTab, toggleTab] = useState('1'); -return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum - dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - -
-); -``` - -### Testo e icona - -Oppure con label e icona insieme. +### Tab con icona grande + + + +### Tab con testo e icona -#### Source - -```tsx -const [activeTab, toggleTab] = useState('1'); -return ( -
- - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore - magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo - consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis - aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum - dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. - - -
-); -``` - -## Bottone - -I tab possono ereditare dalla navigazione l'utilizzo della proprietà `pills` per generare tab a bottoni. - - - -#### Source - -```tsx -const [activeTab, toggleTab] = useState('1'); -return ( - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. - - - - - -); -``` - -## Allineamento verticale - - - -#### Source - -```tsx -const [activeTab, toggleTab] = useState('1'); -return ( - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et - dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex - ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat - nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit - anim id est laborum. - - - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip - ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu - fugiat nulla pariatur. - - - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est - laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore - et dolore magna aliqua. - - - - - -); -``` +## Rimozione delle scrollbar su dispositivi touch + +Se per motivi estetici si volessero nascondere le scrollbar che appaiono sui dispositivi touch quando vengono scrollati orizzontalmente i tab sarà necessario inserire l’html dei tab all’interno di un wrapper con classe `.nav-tabs-hidescroll`. + +Se i tab contengono icone è necessario aggiungere un’ulteriore classe al wrapper: + +- `.hidescroll-ico` nel caso di icone normali +- `.hidescroll-ico-lg` nel caso di icone piccole + + + +## Controllo dei pannelli associati + +Gli esempi sopra riportati non hanno molto senso senza un contenuto che cambi al di sotto di essi; per rendere tali interfacce navigabili è necessario inserire i componenti `TabContent` e `TabPane`. + +## Tab testuale + + + +### Tab con icona + + + +### Tab con icona grande + + + +### Tab con testo e icona + + diff --git a/yarn.lock b/yarn.lock index 3002bf50b..0bc3bbe64 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1068,6 +1068,13 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.21.0", "@babel/runtime@^7.24.7", "@babel/runtime@^7.6.3": + version "7.26.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" + integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== + dependencies: + regenerator-runtime "^0.14.0" + "@babel/template@^7.24.7", "@babel/template@^7.3.3": version "7.24.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315" @@ -1930,7 +1937,7 @@ resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31" integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA== -"@popperjs/core@^2.11.2", "@popperjs/core@^2.6.0", "@popperjs/core@^2.9.2": +"@popperjs/core@^2.11.2", "@popperjs/core@^2.11.6", "@popperjs/core@^2.6.0", "@popperjs/core@^2.9.2": version "2.11.8" resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== @@ -2056,6 +2063,35 @@ resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== +"@react-aria/ssr@^3.5.0": + version "3.9.7" + resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.7.tgz#d89d129f7bbc5148657e6c952ac31c9353183770" + integrity sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg== + dependencies: + "@swc/helpers" "^0.5.0" + +"@restart/hooks@^0.4.9": + version "0.4.16" + resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.16.tgz#95ae8ac1cc7e2bd4fed5e39800ff85604c6d59fb" + integrity sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w== + dependencies: + dequal "^2.0.3" + +"@restart/ui@^1.9.0": + version "1.9.0" + resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.9.0.tgz#11a64bae8b9babac08aafb459da635edff171985" + integrity sha512-M/k/ILBXbEIFn0wSGuJYqscih7gwMcnVwv44kgHZ344sjLoO2vFK8AtkMGXx2sEANDwxEPoDhjhfIDDvrvCBCA== + dependencies: + "@babel/runtime" "^7.21.0" + "@popperjs/core" "^2.11.6" + "@react-aria/ssr" "^3.5.0" + "@restart/hooks" "^0.4.9" + "@types/warning" "^3.0.0" + dequal "^2.0.3" + dom-helpers "^5.2.0" + uncontrollable "^8.0.1" + warning "^4.0.3" + "@rollup/pluginutils@^5.0.2": version "5.1.0" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0" @@ -2821,6 +2857,13 @@ "@types/express" "^4.7.0" file-system-cache "2.3.0" +"@swc/helpers@^0.5.0": + version "0.5.15" + resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7" + integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g== + dependencies: + tslib "^2.8.0" + "@testing-library/dom@10.1.0": version "10.1.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.1.0.tgz#2d073e49771ad614da999ca48f199919e5176fb6" @@ -3201,6 +3244,13 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb" integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== +"@types/react-bootstrap@^0.32.37": + version "0.32.37" + resolved "https://registry.yarnpkg.com/@types/react-bootstrap/-/react-bootstrap-0.32.37.tgz#ee4838a78fc6ddd4bd13abb243a1c6ab26ac06f2" + integrity sha512-CVHj++uxsj1pRnM3RQ/NAXcWj+JwJZ3MqQ28sS1OQUD1sI2gRlbeAjRT+ak2nuwL+CY+gtnIsMaIDq0RNfN0PA== + dependencies: + "@types/react" "*" + "@types/react-dom@18.2.24": version "18.2.24" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.24.tgz#8dda8f449ae436a7a6e91efed8035d4ab03ff759" @@ -3222,7 +3272,14 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@18.2.75", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0": +"@types/react-transition-group@^4.4.6": + version "4.4.11" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5" + integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA== + dependencies: + "@types/react" "*" + +"@types/react@*", "@types/react@18.2.75", "@types/react@>=16.9.11", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0": version "18.2.75" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.75.tgz#45d18f384939306d35312def1bf532eb38a68562" integrity sha512-+DNnF7yc5y0bHkBTiLKqXFe+L4B3nvOphiMY3tuA5X10esmjqk7smyBZzbGTy2vsiy/Bnzj8yFIBL8xhRacoOg== @@ -3295,6 +3352,11 @@ resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba" integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA== +"@types/warning@^3.0.0": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.3.tgz#d1884c8cc4a426d1ac117ca2611bf333834c6798" + integrity sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q== + "@types/yargs-parser@*": version "21.0.3" resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15" @@ -4223,7 +4285,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.3.1.tgz#c485341ae8fd999ca4ee5af2d7a1c9ae01e0099c" integrity sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q== -classnames@^2.2.3, classnames@^2.3.1: +classnames@^2.2.3, classnames@^2.3.1, classnames@^2.3.2: version "2.5.1" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b" integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow== @@ -4773,7 +4835,7 @@ dom-accessibility-api@^0.6.3: resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8" integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w== -dom-helpers@^5.0.1: +dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== @@ -8413,8 +8475,7 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -"prettier-fallback@npm:prettier@^3", prettier@^3.1.1, prettier@^3.2.5: - name prettier-fallback +"prettier-fallback@npm:prettier@^3": version "3.3.2" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== @@ -8426,6 +8487,11 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" +prettier@^3.1.1, prettier@^3.2.5: + version "3.3.2" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" + integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== + pretty-format@^27.0.2: version "27.5.1" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e" @@ -8480,7 +8546,15 @@ prompts@^2.0.1, prompts@^2.4.0: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types-extra@^1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b" + integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew== + dependencies: + react-is "^16.3.2" + warning "^4.0.0" + +prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -8586,6 +8660,24 @@ raw-body@2.5.2: iconv-lite "0.4.24" unpipe "1.0.0" +react-bootstrap@^2.10.6: + version "2.10.6" + resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.10.6.tgz#cb8b6f3604480b99b1e3cfa09cf53446e760bba7" + integrity sha512-fNvKytSp0nHts1WRnRBJeBEt+I9/ZdrnhIjWOucEduRNvFRU1IXjZueDdWnBiqsTSJ7MckQJi9i/hxGolaRq+g== + dependencies: + "@babel/runtime" "^7.24.7" + "@restart/hooks" "^0.4.9" + "@restart/ui" "^1.9.0" + "@types/react-transition-group" "^4.4.6" + classnames "^2.3.2" + dom-helpers "^5.2.1" + invariant "^2.2.4" + prop-types "^15.8.1" + prop-types-extra "^1.1.0" + react-transition-group "^4.4.5" + uncontrollable "^7.2.1" + warning "^4.0.3" + react-colorful@^5.1.2: version "5.6.1" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b" @@ -8646,7 +8738,7 @@ react-is@18.1.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.3.2: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -8666,6 +8758,11 @@ react-layout-masonry@^1.2.0: resolved "https://registry.yarnpkg.com/react-layout-masonry/-/react-layout-masonry-1.2.0.tgz#675e4032c11715a5b47da2de8e5c59ba0fd72a12" integrity sha512-Nauk/lE+1boEDFonOea6zWXq4QduCS3p+bOsH2iYVSqs5RBtn6yyeeJnPN++EAZsrUNT3Blvlac1CcoHlJ98Vg== +react-lifecycles-compat@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" + integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== + react-popper@^2.2.4: version "2.3.0" resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" @@ -9375,7 +9472,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -9433,7 +9539,14 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -9795,6 +9908,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.6.2: resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0" integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ== +tslib@^2.8.0: + version "2.8.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" + integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== + tsup@^8.0.2: version "8.1.0" resolved "https://registry.yarnpkg.com/tsup/-/tsup-8.1.0.tgz#354ce9def1721f5029564382ea2a42dc67fbb489" @@ -9914,6 +10032,21 @@ uglify-js@^3.1.4: resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.18.0.tgz#73b576a7e8fda63d2831e293aeead73e0a270deb" integrity sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A== +uncontrollable@^7.2.1: + version "7.2.1" + resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738" + integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ== + dependencies: + "@babel/runtime" "^7.6.3" + "@types/react" ">=16.9.11" + invariant "^2.2.4" + react-lifecycles-compat "^3.0.4" + +uncontrollable@^8.0.1: + version "8.0.4" + resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-8.0.4.tgz#a0a8307f638795162fafd0550f4a1efa0f8c5eb6" + integrity sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ== + undici-types@~5.26.4: version "5.26.5" resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" @@ -10306,7 +10439,7 @@ walker@^1.0.8: dependencies: makeerror "1.0.12" -warning@^4.0.2: +warning@^4.0.0, warning@^4.0.2, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== @@ -10423,7 +10556,16 @@ wordwrap@^1.0.0: resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + +wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== From a42c5e5407b4669a7cfd4c4da56af8e609090fe5 Mon Sep 17 00:00:00 2001 From: Virtute90 Date: Mon, 25 Nov 2024 13:11:52 +0100 Subject: [PATCH 02/13] test: update snap --- test/__snapshots__/Storybook.test.tsx.snap | 2102 ++++++++++++++++---- 1 file changed, 1692 insertions(+), 410 deletions(-) diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap index 7545a30fe..19e383b78 100644 --- a/test/__snapshots__/Storybook.test.tsx.snap +++ b/test/__snapshots__/Storybook.test.tsx.snap @@ -13521,170 +13521,149 @@ exports[`Stories Snapshots Documentazione/Componenti/Stepper/Mobile SaveButton 1 `; -exports[`Stories Snapshots Documentazione/Componenti/Tab Bottone 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` -`; - -exports[`Stories Snapshots Documentazione/Componenti/Tab Esempi 1`] = ` -
-
- @@ -13694,376 +13673,1679 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Esempi 1`] = ` exports[`Stories Snapshots Documentazione/Componenti/Tab Icona 1`] = `
-
- -
+ + +
-
+ + + + + + +
`; -exports[`Stories Snapshots Documentazione/Componenti/Tab Testo 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab IconaFull 1`] = `
- +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrande 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandeFull 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandePannel 1`] = ` +
+ +
+
+ Contenuto 1 +
+
+ Contenuto 2 +
+
+ Contenuto 3 +
+
+ Contenuto 4 +
+
+
+`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab IconaPannel 1`] = ` +
+ +
+
+ Contenuto 1 +
+
+ Contenuto 2 +
+
+ Contenuto 3 +
+
+ Contenuto 4 +
+
+
+`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIcona 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaFull 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannel 1`] = ` +
+ +
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
-
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
-
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
+ Contenuto 1 +
+
+ Contenuto 2 +
+
+ Contenuto 3 +
+
+ Contenuto 4
`; -exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIcona 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = `
-
- -
+ + + +
+`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` + -
+ +
-
-
+ Link + + + + +
`; -exports[`Stories Snapshots Documentazione/Componenti/Tab Verticale 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = `
-
- From 6c8b2866edd48d95e8721d477be76390074764d0 Mon Sep 17 00:00:00 2001 From: Virtute90 Date: Tue, 3 Dec 2024 12:51:08 +0100 Subject: [PATCH 03/13] chore(deps): update lock --- yarn.lock | 274 ++++-------------------------------------------------- 1 file changed, 17 insertions(+), 257 deletions(-) diff --git a/yarn.lock b/yarn.lock index 5c0bd400e..c66218ddc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -948,31 +948,17 @@ "@babel/plugin-transform-modules-commonjs" "^7.25.9" "@babel/plugin-transform-typescript" "^7.25.9" -"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.21.0", "@babel/runtime@^7.24.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.26.0" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== dependencies: regenerator-runtime "^0.14.0" -<<<<<<< HEAD -"@babel/runtime@^7.21.0", "@babel/runtime@^7.24.7", "@babel/runtime@^7.6.3": - version "7.26.0" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1" - integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== - dependencies: - regenerator-runtime "^0.14.0" - -"@babel/template@^7.24.7", "@babel/template@^7.3.3": - version "7.24.7" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.7.tgz#02efcee317d0609d2c07117cb70ef8fb17ab7315" - integrity sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig== -======= "@babel/template@^7.25.9", "@babel/template@^7.3.3": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016" integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg== ->>>>>>> origin/main dependencies: "@babel/code-frame" "^7.25.9" "@babel/parser" "^7.25.9" @@ -1939,128 +1925,6 @@ resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f" integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A== -<<<<<<< HEAD -"@radix-ui/primitive@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2" - integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA== - -"@radix-ui/react-compose-refs@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" - integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== - -"@radix-ui/react-context@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8" - integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A== - -"@radix-ui/react-dialog@^1.0.5": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz#4906507f7b4ad31e22d7dad69d9330c87c431d44" - integrity sha512-zysS+iU4YP3STKNS6USvFVqI4qqx8EpiwmT5TuCApVEBca+eRCbONi4EgzfNSuVnOXvC5UPHHMjs8RXO6DH9Bg== - dependencies: - "@radix-ui/primitive" "1.1.0" - "@radix-ui/react-compose-refs" "1.1.0" - "@radix-ui/react-context" "1.1.0" - "@radix-ui/react-dismissable-layer" "1.1.0" - "@radix-ui/react-focus-guards" "1.1.0" - "@radix-ui/react-focus-scope" "1.1.0" - "@radix-ui/react-id" "1.1.0" - "@radix-ui/react-portal" "1.1.1" - "@radix-ui/react-presence" "1.1.0" - "@radix-ui/react-primitive" "2.0.0" - "@radix-ui/react-slot" "1.1.0" - "@radix-ui/react-use-controllable-state" "1.1.0" - aria-hidden "^1.1.1" - react-remove-scroll "2.5.7" - -"@radix-ui/react-dismissable-layer@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz#2cd0a49a732372513733754e6032d3fb7988834e" - integrity sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig== - dependencies: - "@radix-ui/primitive" "1.1.0" - "@radix-ui/react-compose-refs" "1.1.0" - "@radix-ui/react-primitive" "2.0.0" - "@radix-ui/react-use-callback-ref" "1.1.0" - "@radix-ui/react-use-escape-keydown" "1.1.0" - -"@radix-ui/react-focus-guards@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz#8e9abb472a9a394f59a1b45f3dd26cfe3fc6da13" - integrity sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw== - -"@radix-ui/react-focus-scope@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2" - integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA== - dependencies: - "@radix-ui/react-compose-refs" "1.1.0" - "@radix-ui/react-primitive" "2.0.0" - "@radix-ui/react-use-callback-ref" "1.1.0" - -"@radix-ui/react-id@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed" - integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA== - dependencies: - "@radix-ui/react-use-layout-effect" "1.1.0" - -"@radix-ui/react-portal@1.1.1": - version "1.1.1" - resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.1.tgz#1957f1eb2e1aedfb4a5475bd6867d67b50b1d15f" - integrity sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g== - dependencies: - "@radix-ui/react-primitive" "2.0.0" - "@radix-ui/react-use-layout-effect" "1.1.0" - -"@radix-ui/react-presence@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.0.tgz#227d84d20ca6bfe7da97104b1a8b48a833bfb478" - integrity sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ== - dependencies: - "@radix-ui/react-compose-refs" "1.1.0" - "@radix-ui/react-use-layout-effect" "1.1.0" - -"@radix-ui/react-primitive@2.0.0": - version "2.0.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884" - integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw== - dependencies: - "@radix-ui/react-slot" "1.1.0" - -"@radix-ui/react-slot@1.1.0", "@radix-ui/react-slot@^1.0.2": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" - integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== - dependencies: - "@radix-ui/react-compose-refs" "1.1.0" - -"@radix-ui/react-use-callback-ref@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1" - integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw== - -"@radix-ui/react-use-controllable-state@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0" - integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw== - dependencies: - "@radix-ui/react-use-callback-ref" "1.1.0" - -"@radix-ui/react-use-escape-keydown@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754" - integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw== - dependencies: - "@radix-ui/react-use-callback-ref" "1.1.0" - -"@radix-ui/react-use-layout-effect@1.1.0": - version "1.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" - integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== - "@react-aria/ssr@^3.5.0": version "3.9.7" resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.7.tgz#d89d129f7bbc5148657e6c952ac31c9353183770" @@ -2090,8 +1954,6 @@ uncontrollable "^8.0.1" warning "^4.0.3" -======= ->>>>>>> origin/main "@rollup/pluginutils@^5.0.2": version "5.1.3" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf" @@ -2476,16 +2338,6 @@ resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.4.6.tgz#40b03d72b014cc0bb6530aba0652b49e176b0c0e" integrity sha512-q7vDPN/mgj7cXIVQ9R1/V75hrzNgKkm2G0LjMo57//9/djQ+7LxvBsR1iScbFIRSEqppvMiBFzkts+2uXidySA== -<<<<<<< HEAD -"@storybook/types@8.1.11": - version "8.1.11" - resolved "https://registry.yarnpkg.com/@storybook/types/-/types-8.1.11.tgz#c6e89fb6d543ebd4d3445a465af6aa27fbbe6aaa" - integrity sha512-k9N5iRuY2+t7lVRL6xeu6diNsxO3YI3lS4Juv3RZ2K4QsE/b3yG5ElfJB8DjHDSHwRH4ORyrU71KkOCUVfvtnw== - dependencies: - "@storybook/channels" "8.1.11" - "@types/express" "^4.7.0" - file-system-cache "2.3.0" - "@swc/helpers@^0.5.0": version "0.5.15" resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7" @@ -2493,16 +2345,10 @@ dependencies: tslib "^2.8.0" -"@testing-library/dom@10.1.0": - version "10.1.0" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.1.0.tgz#2d073e49771ad614da999ca48f199919e5176fb6" - integrity sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA== -======= "@testing-library/dom@10.4.0": version "10.4.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8" integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ== ->>>>>>> origin/main dependencies: "@babel/code-frame" "^7.10.4" "@babel/runtime" "^7.12.5" @@ -2778,25 +2624,14 @@ dependencies: "@types/react" "*" -"@types/react-transition-group@^4.4.10": +"@types/react-transition-group@^4.4.10", "@types/react-transition-group@^4.4.6": version "4.4.11" resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5" integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA== dependencies: "@types/react" "*" -<<<<<<< HEAD -"@types/react-transition-group@^4.4.6": - version "4.4.11" - resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5" - integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA== - dependencies: - "@types/react" "*" - -"@types/react@*", "@types/react@18.2.75", "@types/react@>=16.9.11", "@types/react@^16.8.0 || ^17.0.0 || ^18.0.0": -======= -"@types/react@*", "@types/react@18.2.75": ->>>>>>> origin/main +"@types/react@*", "@types/react@18.2.75", "@types/react@>=16.9.11": version "18.2.75" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.75.tgz#45d18f384939306d35312def1bf532eb38a68562" integrity sha512-+DNnF7yc5y0bHkBTiLKqXFe+L4B3nvOphiMY3tuA5X10esmjqk7smyBZzbGTy2vsiy/Bnzj8yFIBL8xhRacoOg== @@ -4860,6 +4695,13 @@ ini@^4.1.2, ini@^4.1.3: resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795" integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg== +invariant@^2.2.4: + version "2.2.4" + resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" + integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA== + dependencies: + loose-envify "^1.0.0" + is-alphabetical@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d" @@ -6888,14 +6730,6 @@ prelude-ls@^1.2.1: resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -<<<<<<< HEAD -"prettier-fallback@npm:prettier@^3": - version "3.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" - integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== - -======= ->>>>>>> origin/main prettier-linter-helpers@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b" @@ -6903,17 +6737,10 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -<<<<<<< HEAD -prettier@^3.1.1, prettier@^3.2.5: - version "3.3.2" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a" - integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA== -======= prettier@^3.2.5: version "3.4.1" resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.1.tgz#e211d451d6452db0a291672ca9154bc8c2579f7b" integrity sha512-G+YdqtITVZmOJje6QkXQWzl3fSfMxFwm1tjTyo9exhkmWSqC4Yhd1+lug++IlR2mvRVAxEDDWYkQdeSztajqgg== ->>>>>>> origin/main pretty-format@^27.0.2: version "27.5.1" @@ -6972,7 +6799,6 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -<<<<<<< HEAD prop-types-extra@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b" @@ -6981,10 +6807,7 @@ prop-types-extra@^1.1.0: react-is "^16.3.2" warning "^4.0.0" -prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: -======= -prop-types@^15.5.8, prop-types@^15.6.2: ->>>>>>> origin/main +prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7025,27 +6848,6 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== -<<<<<<< HEAD -ramda@0.29.0: - version "0.29.0" - resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.29.0.tgz#fbbb67a740a754c8a4cbb41e2a6e0eb8507f55fb" - integrity sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA== - -range-parser@~1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" - integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== - -raw-body@2.5.2: - version "2.5.2" - resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a" - integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA== - dependencies: - bytes "3.1.2" - http-errors "2.0.0" - iconv-lite "0.4.24" - unpipe "1.0.0" - react-bootstrap@^2.10.6: version "2.10.6" resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.10.6.tgz#cb8b6f3604480b99b1e3cfa09cf53446e760bba7" @@ -7064,13 +6866,6 @@ react-bootstrap@^2.10.6: uncontrollable "^7.2.1" warning "^4.0.3" -react-colorful@^5.1.2: - version "5.6.1" - resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b" - integrity sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw== - -======= ->>>>>>> origin/main react-confetti@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.1.0.tgz#03dc4340d955acd10b174dbf301f374a06e29ce6" @@ -7112,16 +6907,7 @@ react-fast-compare@^3.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49" integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ== -<<<<<<< HEAD -react-is@18.1.0: - version "18.1.0" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" - integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== - react-is@^16.13.1, react-is@^16.3.2: -======= -react-is@^16.13.1: ->>>>>>> origin/main version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -8003,12 +7789,7 @@ tsconfig-paths@^4.2.0: minimist "^1.2.6" strip-bom "^3.0.0" -tslib@^2.0.1, tslib@^2.4.0, tslib@^2.6.2: - version "2.8.1" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" - integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== - -tslib@^2.8.0: +tslib@^2.0.1, tslib@^2.4.0, tslib@^2.6.2, tslib@^2.8.0: version "2.8.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f" integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w== @@ -8111,17 +7892,6 @@ typescript@^5.4.5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6" integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg== -undici-types@~6.19.2: - version "6.19.8" - resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02" - integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw== - -<<<<<<< HEAD -uglify-js@^3.1.4: - version "3.18.0" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.18.0.tgz#73b576a7e8fda63d2831e293aeead73e0a270deb" - integrity sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A== - uncontrollable@^7.2.1: version "7.2.1" resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738" @@ -8137,16 +7907,15 @@ uncontrollable@^8.0.1: resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-8.0.4.tgz#a0a8307f638795162fafd0550f4a1efa0f8c5eb6" integrity sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ== -undici-types@~5.26.4: - version "5.26.5" - resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" - integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== -======= +undici-types@~6.19.2: + version "6.19.8" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02" + integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw== + undici-types@~6.20.0: version "6.20.0" resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433" integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg== ->>>>>>> origin/main unicode-canonical-property-names-ecmascript@^2.0.0: version "2.0.1" @@ -8561,12 +8330,6 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -<<<<<<< HEAD -wordwrap@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb" - integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q== - "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" @@ -8577,9 +8340,6 @@ wordwrap@^1.0.0: strip-ansi "^6.0.0" wrap-ansi@^7.0.0: -======= -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: ->>>>>>> origin/main version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== From 113c90deda0b9f60b5756ae79cd3721407d1d34b Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Wed, 8 Jan 2025 19:20:03 +0100 Subject: [PATCH 04/13] feat: keep bsi tab behaviour --- src/Tab/TabNav.tsx | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx index 5efcdddfd..9e84462ca 100644 --- a/src/Tab/TabNav.tsx +++ b/src/Tab/TabNav.tsx @@ -14,6 +14,41 @@ export const TabNav: FC = ({ className, tag = 'ul', testId, ...attr const Tag = tag; const classes = classNames(className, 'nav-tabs'); + let currentTabIndex = 0; + const elements: HTMLElement[] = []; - return ; + // Ugly workaround to keep Bootstrap Italia behaviour + + const handleKeyDown = (event: React.KeyboardEvent) => { + const queriedElements = document.querySelectorAll('.nav-link'); + for (let i = 0; i < queriedElements.length; i++) { + if (queriedElements[i].ariaSelected === 'true') { + currentTabIndex = i; + } + queriedElements[i].ariaSelected = 'false'; + elements.push(queriedElements[i] as HTMLElement); + } + switch (event.key) { + case 'ArrowLeft': + case 'ArrowUp': + if (currentTabIndex - 1 < 0) { + currentTabIndex = elements.length; + } + currentTabIndex = (currentTabIndex - 1) % elements.length; + break; + case 'ArrowRight': + case 'ArrowDown': + currentTabIndex = (currentTabIndex + 1) % elements.length; + break; + default: + return; + } + if (elements[currentTabIndex].ariaDisabled === 'true') { + handleKeyDown(event); + } else { + elements[currentTabIndex].focus(); + } + }; + + return ; }; From 50a816e98a8e36ffa379beb66fd236079f80991c Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Wed, 8 Jan 2025 19:21:55 +0100 Subject: [PATCH 05/13] chore: linting --- src/Alert/Alert.tsx | 3 +- src/Autocomplete/Autocomplete.tsx | 139 ++++++++++++------------ src/BackToTop/BackToTop.tsx | 2 +- src/Card/CardCategory.tsx | 21 +++- src/Collapse/Collapse.tsx | 20 ++-- src/Dropdown/Dropdown.tsx | 10 +- src/Dropdown/DropdownMenu.tsx | 3 +- src/Forward/Forward.tsx | 6 +- src/Grid/GridItemTextWrapper.tsx | 8 +- src/Header/HeaderToggler.tsx | 4 +- src/Icon/assets/index.ts | 2 +- src/Input/Input.tsx | 2 +- src/Input/InputContainer.tsx | 1 - src/Input/TextArea.tsx | 5 +- src/List/List.tsx | 9 +- src/List/ListItem.tsx | 57 ++++------ src/NavScroll/types.ts | 4 +- src/ResponsiveImage/ResponsiveImage.tsx | 20 ++-- src/Skiplink/Skiplink.tsx | 19 ++-- src/Skiplink/SkiplinkItem.tsx | 2 +- src/Timeline/TimelinePin.tsx | 4 +- src/Toggle/Toggle.tsx | 2 +- src/index.ts | 2 +- src/track-focus.js | 29 +++-- 24 files changed, 188 insertions(+), 186 deletions(-) diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx index 6aeeac5b5..b8451039d 100644 --- a/src/Alert/Alert.tsx +++ b/src/Alert/Alert.tsx @@ -28,7 +28,6 @@ export interface AlertProps extends HTMLAttributes { testId?: string; } - export const Alert: FC = ({ color = 'success', isOpen = true, fade = true, testId, ...props }) => { const baseProps = { color, @@ -36,4 +35,4 @@ export const Alert: FC = ({ color = 'success', isOpen = true, fade = fade }; return ; -}; \ No newline at end of file +}; diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx index e9d3c7241..f1949ac2f 100644 --- a/src/Autocomplete/Autocomplete.tsx +++ b/src/Autocomplete/Autocomplete.tsx @@ -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 = ({ - tAssistiveHint = tAssistiveHintDefault, - tNoResults = tNoResultsDefault, - tStatusQueryTooShort = tStatusQueryTooShortDefault, - tStatusNoResults = tStatusNoResultsDefault, - tStatusSelectedOption = tStatusSelectedOptionDefault, - tStatusResults = tStatusResultsDefault, - placeholder = '', - defaultValue = '', - displayMenu = 'inline', - source, - ...attributes - }) => { - - return ; - }; - \ No newline at end of file +export const Autocomplete: FC = ({ + tAssistiveHint = tAssistiveHintDefault, + tNoResults = tNoResultsDefault, + tStatusQueryTooShort = tStatusQueryTooShortDefault, + tStatusNoResults = tStatusNoResultsDefault, + tStatusSelectedOption = tStatusSelectedOptionDefault, + tStatusResults = tStatusResultsDefault, + placeholder = '', + defaultValue = '', + displayMenu = 'inline', + source, + ...attributes +}) => { + return ( + + ); +}; diff --git a/src/BackToTop/BackToTop.tsx b/src/BackToTop/BackToTop.tsx index e4d7b34cd..ee52ed93a 100644 --- a/src/BackToTop/BackToTop.tsx +++ b/src/BackToTop/BackToTop.tsx @@ -34,7 +34,7 @@ const backToTop = () => { }; export const BackToTop = ({ - ariaLabel='Torna su', + ariaLabel = 'Torna su', className, dark = false, small = false, diff --git a/src/Card/CardCategory.tsx b/src/Card/CardCategory.tsx index 16045d640..f448127cd 100644 --- a/src/Card/CardCategory.tsx +++ b/src/Card/CardCategory.tsx @@ -21,7 +21,18 @@ export interface CardCategoryProps extends HTMLAttributes { testId?: string; } -export const CardCategory: FC = ({ iconName, iconTitle, date, href, onClick, testId, children, textDescription, dateDescription, ...rest }) => { +export const CardCategory: FC = ({ + iconName, + iconTitle, + date, + href, + onClick, + testId, + children, + textDescription, + dateDescription, + ...rest +}) => { const classes = classNames({ 'category-top': date || ' ', 'categoryicon-top': iconName @@ -29,7 +40,7 @@ export const CardCategory: FC = ({ iconName, iconTitle, date, // Simple category link const categoryLink = !iconName && ( <> - {textDescription && {textDescription}} + {textDescription && {textDescription}} {children} @@ -44,8 +55,10 @@ export const CardCategory: FC = ({ iconName, iconTitle, date,
{categoryLink} {categoryIcon} - {categoryText && textDescription && {textDescription}}{categoryText} - {dateDescription && {dateDescription}}{categoryDate} + {categoryText && textDescription && {textDescription}} + {categoryText} + {dateDescription && {dateDescription}} + {categoryDate}
); }; diff --git a/src/Collapse/Collapse.tsx b/src/Collapse/Collapse.tsx index 74ddc2153..3b340d2ed 100644 --- a/src/Collapse/Collapse.tsx +++ b/src/Collapse/Collapse.tsx @@ -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 { /** Indica se il menu HeaderNav sia aperto o meno. Usato unicamente nel caso della HeaderNav, ovvero con navbar e header entrambi true */ @@ -43,7 +42,7 @@ export interface CollapseProps extends HTMLAttributes { /** Da utilizzare per impostare un riferimento all'elemento DOM */ innerRef?: Ref; /** Testo pulsante di chiusura per screen reader */ - closeSrText?: string, + closeSrText?: string; testId?: string; } @@ -57,7 +56,7 @@ export const Collapse: FC = ({ onOverlayClick, cssModule, testId, - closeSrText='Nascondi la navigazione', + closeSrText = 'Nascondi la navigazione', ...attributes }) => { const newCssModule = { @@ -69,13 +68,10 @@ export const Collapse: FC = ({ 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 ( = ({
{megamenu ?
{children}
: <>{children}} diff --git a/src/Dropdown/Dropdown.tsx b/src/Dropdown/Dropdown.tsx index e9a398327..0905d1ec2 100644 --- a/src/Dropdown/Dropdown.tsx +++ b/src/Dropdown/Dropdown.tsx @@ -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; @@ -21,7 +21,7 @@ export const Dropdown: FC = ({ ...attributes }) => { const classes = classNames(className, { - 'text-center': textCenter, + 'text-center': textCenter }); const [isOpen, setIsOpen] = React.useState(false); @@ -41,10 +41,8 @@ export const Dropdown: FC = ({ > { // 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 })) + } ); }; diff --git a/src/Dropdown/DropdownMenu.tsx b/src/Dropdown/DropdownMenu.tsx index 6a71921a3..cda0b75ac 100644 --- a/src/Dropdown/DropdownMenu.tsx +++ b/src/Dropdown/DropdownMenu.tsx @@ -13,9 +13,8 @@ export interface DropdownMenuProps extends HTMLAttributes { } export const DropdownMenu: FC = ({ className, inNavbar, testId, children, ...attributes }) => { + const style = inNavbar ? { top: 'unset !important' } : {}; - const style = inNavbar ? {'top' : 'unset !important'} : {} - return ( {children} diff --git a/src/Forward/Forward.tsx b/src/Forward/Forward.tsx index 4239a7dda..dd99c0843 100644 --- a/src/Forward/Forward.tsx +++ b/src/Forward/Forward.tsx @@ -15,14 +15,14 @@ export const Forward: FC = ({ className, children, testId, ...attr { - 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' - }) + }); } } }} diff --git a/src/Grid/GridItemTextWrapper.tsx b/src/Grid/GridItemTextWrapper.tsx index cf12cbe47..7f2f73657 100644 --- a/src/Grid/GridItemTextWrapper.tsx +++ b/src/Grid/GridItemTextWrapper.tsx @@ -9,7 +9,13 @@ export interface GridItemTextWrapperProps extends HTMLAttributes = ({ className, children, testId, tag='span', ...attributes }) => { +export const GridItemTextWrapper: FC = ({ + className, + children, + testId, + tag = 'span', + ...attributes +}) => { const classes = classname('it-griditem-text-wrapper', className); const Tag = tag; return ( diff --git a/src/Header/HeaderToggler.tsx b/src/Header/HeaderToggler.tsx index 0e5c84c38..611b547f8 100644 --- a/src/Header/HeaderToggler.tsx +++ b/src/Header/HeaderToggler.tsx @@ -21,7 +21,7 @@ export interface HeaderTogglerProps extends ButtonHTMLAttributes { +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; @@ -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'); diff --git a/src/Icon/assets/index.ts b/src/Icon/assets/index.ts index 125e3f3b8..846230e48 100644 --- a/src/Icon/assets/index.ts +++ b/src/Icon/assets/index.ts @@ -698,4 +698,4 @@ export const allIcons = Object.keys(iconList); export interface SVGRProps { title?: string; titleId?: string; -} \ No newline at end of file +} diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx index e6d5b2f50..637d8b1a3 100644 --- a/src/Input/Input.tsx +++ b/src/Input/Input.tsx @@ -416,4 +416,4 @@ export const Input = ({ } return ; -}; \ No newline at end of file +}; diff --git a/src/Input/InputContainer.tsx b/src/Input/InputContainer.tsx index 5b135f048..d46afd705 100644 --- a/src/Input/InputContainer.tsx +++ b/src/Input/InputContainer.tsx @@ -38,7 +38,6 @@ export const InputContainer: FC = ({ iconLeft, children }) => { - if (hasButtonRight || hasIconLeft) { return (
diff --git a/src/Input/TextArea.tsx b/src/Input/TextArea.tsx index 793a3b8e8..76da3cfc3 100644 --- a/src/Input/TextArea.tsx +++ b/src/Input/TextArea.tsx @@ -57,10 +57,7 @@ export const TextArea = ({ const extraAttributes: { ['aria-describedby']?: string } = {}; //Chiamo questa funzione per impostare classNames a 'form-control' - const formControlClass = getFormControlClass( - {}, - cssModule - ); + const formControlClass = getFormControlClass({}, cssModule); // associate the input field with the help text const infoId = id ? `${id}Description` : undefined; if (id) { diff --git a/src/List/List.tsx b/src/List/List.tsx index 72761e02a..b868149e2 100644 --- a/src/List/List.tsx +++ b/src/List/List.tsx @@ -16,14 +16,7 @@ export interface ListProps extends HTMLAttributes { testId?: string; } -export const List: FC = ({ - className, - wrapperClassName, - tag = 'div', - noWrapper, - testId, - ...attributes -}) => { +export const List: FC = ({ className, wrapperClassName, tag = 'div', noWrapper, testId, ...attributes }) => { const Tag = tag; const wrapperClasses = classNames('it-list-wrapper', wrapperClassName); const classes = classNames(className, 'it-list'); diff --git a/src/List/ListItem.tsx b/src/List/ListItem.tsx index 23aabd9a3..8d349d28c 100644 --- a/src/List/ListItem.tsx +++ b/src/List/ListItem.tsx @@ -39,46 +39,37 @@ export const ListItem: FC & { children, ...attributes }) => { - const Tag = tag; - const classes = classNames( - className, - { active }, - 'list-item' - ), - classesItem = classNames(className, { - 'it-rounded-icon': icon, - 'avatar size-lg': avatar, - 'it-thumb': img - }), - leftItem = icon || avatar || img; - - if (href) { - return ( -
  • - -
    {children}
    -     -
    • - ); - } + const Tag = tag; + const classes = classNames(className, { active }, 'list-item'), + classesItem = classNames(className, { + 'it-rounded-icon': icon, + 'avatar size-lg': avatar, + 'it-thumb': img + }), + leftItem = icon || avatar || img; + if (href) { return (
  • - - {leftItem &&
    {leftItem}
    } -
    {children}
    -     + +
    {children}
    +
    • ); - }; + } + + return ( +
  • + + {leftItem &&
    {leftItem}
    } +
    {children}
    +     +
    • + ); +}; const MultipleAction: FC = ({ children }) => { - return {children} + return {children}; }; ListItem.MultipleAction = MultipleAction; diff --git a/src/NavScroll/types.ts b/src/NavScroll/types.ts index e5e678ed1..50c80d8a2 100644 --- a/src/NavScroll/types.ts +++ b/src/NavScroll/types.ts @@ -87,8 +87,8 @@ export type useNavScrollResult = { */ getActiveRef: () => RefObject | null; /** - * A list of active ids (the full hierarchy). - */ + * A list of active ids (the full hierarchy). + */ percentage: number; }; diff --git a/src/ResponsiveImage/ResponsiveImage.tsx b/src/ResponsiveImage/ResponsiveImage.tsx index ebba273be..fe8befeb4 100644 --- a/src/ResponsiveImage/ResponsiveImage.tsx +++ b/src/ResponsiveImage/ResponsiveImage.tsx @@ -12,26 +12,32 @@ export interface ResponsiveImageProps extends HTMLAttributes { proportioned?: boolean; } -export const ResponsiveImage: FC = ({ alt, testId, proportioned=false, children, ...attributes }) => { +export const ResponsiveImage: FC = ({ + alt, + testId, + proportioned = false, + children, + ...attributes +}) => { if (children) { if (proportioned) { - return( + return (
    - {alt} + {alt} {children}
    - ) + ); } else { - return( + return (
    - {alt} + {alt} {children}
    - ) + ); } } else { return ( diff --git a/src/Skiplink/Skiplink.tsx b/src/Skiplink/Skiplink.tsx index 268917c7c..f04146b14 100644 --- a/src/Skiplink/Skiplink.tsx +++ b/src/Skiplink/Skiplink.tsx @@ -12,18 +12,23 @@ export interface SkiplinkProps extends HTMLAttributes { testId?: string; } -export const Skiplink: FC = ({ ariaLabel=null, className, tag = 'div', nav=false, testId, children, ...attributes }) => { +export const Skiplink: FC = ({ + ariaLabel = null, + className, + tag = 'div', + nav = false, + testId, + children, + ...attributes +}) => { const Tag = nav ? 'nav' : tag; const classes = classNames(className, 'skiplinks'); if (nav) { return ( - -
      - {children} -
    + +
      {children}
     - ) - + ); } else { return ; } diff --git a/src/Skiplink/SkiplinkItem.tsx b/src/Skiplink/SkiplinkItem.tsx index 2b88d18e5..ed122b131 100644 --- a/src/Skiplink/SkiplinkItem.tsx +++ b/src/Skiplink/SkiplinkItem.tsx @@ -31,7 +31,7 @@ export const SkiplinkItem: FC = ({ if (navItem) { return ( -
  • +
    • ); diff --git a/src/Timeline/TimelinePin.tsx b/src/Timeline/TimelinePin.tsx index d1b99d503..7309792fa 100644 --- a/src/Timeline/TimelinePin.tsx +++ b/src/Timeline/TimelinePin.tsx @@ -40,7 +40,7 @@ export const TimelinePin: FC = ({ nowText, testId, className, - tag='h3', + tag = 'h3', ...attributes }) => { const { children, ...rest } = attributes; @@ -51,7 +51,7 @@ export const TimelinePin: FC = ({ }); const pinIcon = (
    - +
    ); const pinLabel = ( diff --git a/src/Toggle/Toggle.tsx b/src/Toggle/Toggle.tsx index a424d2e4a..4cc80a219 100644 --- a/src/Toggle/Toggle.tsx +++ b/src/Toggle/Toggle.tsx @@ -23,7 +23,7 @@ export const Toggle: FC = ({ label, testId, ...rest }) => {
    diff --git a/src/index.ts b/src/index.ts index 09830e161..504272cfe 100644 --- a/src/index.ts +++ b/src/index.ts @@ -303,4 +303,4 @@ export type { } from 'reactstrap'; export type { TabContainerProps, TabContentProps, TabPaneProps } from 'react-bootstrap'; -import "./track-focus.js" +import './track-focus.js'; diff --git a/src/track-focus.js b/src/track-focus.js index 7883aefb6..3d4c7c688 100644 --- a/src/track-focus.js +++ b/src/track-focus.js @@ -1,4 +1,3 @@ - // Focus Management /** @@ -9,41 +8,41 @@ * -------------------------------------------------------------------------- */ -const DATA_MOUSE_FOCUS = 'data-focus-mouse' -const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse' +const DATA_MOUSE_FOCUS = 'data-focus-mouse'; +const CLASS_NAME_MOUSE_FOCUS = 'focus--mouse'; class TrackFocus { constructor() { - this._usingMouse = false + this._usingMouse = false; - this._bindEvents() + this._bindEvents(); } _bindEvents() { if (typeof document === 'undefined') { - return + return; } - const events = ['keydown', 'mousedown'] + const events = ['keydown', 'mousedown']; events.forEach((evtName) => { document.addEventListener(evtName, (evt) => { - this._usingMouse = evt.type === 'mousedown' - }) - }) + this._usingMouse = evt.type === 'mousedown'; + }); + }); document.addEventListener('focusin', (evt) => { if (this._usingMouse) { if (evt.target) { evt.target.classList.add(CLASS_NAME_MOUSE_FOCUS); - evt.target.setAttribute(DATA_MOUSE_FOCUS, 'true') + evt.target.setAttribute(DATA_MOUSE_FOCUS, 'true'); } } - }) + }); document.addEventListener('focusout', (evt) => { if (evt.target) { evt.target.classList.remove(CLASS_NAME_MOUSE_FOCUS); - evt.target.setAttribute(DATA_MOUSE_FOCUS, 'false') + evt.target.setAttribute(DATA_MOUSE_FOCUS, 'false'); } - }) + }); } } -new TrackFocus() \ No newline at end of file +new TrackFocus(); From 1def83a928b03900866eac1a9b666ae5d992ab2e Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Wed, 8 Jan 2025 19:41:58 +0100 Subject: [PATCH 06/13] chore: remove track focus --- src/Input/utils.tsx | 3 +-- stories/Documentation/NavScroll.mdx | 6 +++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/Input/utils.tsx b/src/Input/utils.tsx index 7d9bd99cb..6551422a6 100644 --- a/src/Input/utils.tsx +++ b/src/Input/utils.tsx @@ -117,8 +117,7 @@ export function getClasses( // we can model here only if stylings 'form-control-plaintext': normalizedOnlyCondition, 'form-control': passwordOnlyCondition, - 'input-password': passwordOnlyCondition, - 'focus--mouse': passwordOnlyCondition || normalizedOnlyCondition + 'input-password': passwordOnlyCondition } ), cssModule diff --git a/stories/Documentation/NavScroll.mdx b/stories/Documentation/NavScroll.mdx index 699fe93dc..858d632b3 100644 --- a/stories/Documentation/NavScroll.mdx +++ b/stories/Documentation/NavScroll.mdx @@ -66,7 +66,7 @@ return ( toggleNavScroll(!isOpen)} > @@ -388,7 +388,7 @@ return ( toggleNavScroll(!isOpen)} > @@ -723,7 +723,7 @@ return ( className='it-navscroll-wrapper navbar-expand-lg it-top-navscroll it-right-side affix-top theme-dark-desk theme-dark-mobile' > toggleNavScroll(!isOpen)} > From 350ee42498596a2f68b71f2e7beca1bbfc081c6b Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Wed, 8 Jan 2025 19:49:58 +0100 Subject: [PATCH 07/13] chore: update snapshots --- test/__snapshots__/Storybook.test.tsx.snap | 290 ++++++++++----------- 1 file changed, 145 insertions(+), 145 deletions(-) diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap index b95fef6d5..8ca06e215 100644 --- a/test/__snapshots__/Storybook.test.tsx.snap +++ b/test/__snapshots__/Storybook.test.tsx.snap @@ -13569,12 +13569,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13586,12 +13586,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13603,12 +13603,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13620,12 +13620,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13637,12 +13637,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13654,12 +13654,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13671,12 +13671,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13688,12 +13688,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Hidescroll 1`] = ` role="presentation" > @@ -13716,12 +13716,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Icona 1`] = ` role="presentation" > @@ -13752,12 +13752,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Icona 1`] = ` role="presentation" > @@ -13788,12 +13788,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Icona 1`] = ` role="presentation" > @@ -13824,12 +13824,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Icona 1`] = ` role="presentation" > @@ -13869,12 +13869,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaFull 1`] = ` role="presentation" > @@ -13905,12 +13905,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaFull 1`] = ` role="presentation" > @@ -13941,12 +13941,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaFull 1`] = ` role="presentation" > @@ -13977,12 +13977,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaFull 1`] = ` role="presentation" > @@ -14022,12 +14022,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrande 1`] = ` role="presentation" > @@ -14058,12 +14058,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrande 1`] = ` role="presentation" > @@ -14094,12 +14094,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrande 1`] = ` role="presentation" > @@ -14130,12 +14130,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrande 1`] = ` role="presentation" > @@ -14175,12 +14175,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandeFull 1`] = ` role="presentation" > @@ -14211,12 +14211,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandeFull 1`] = ` role="presentation" > @@ -14247,12 +14247,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandeFull 1`] = ` role="presentation" > @@ -14283,12 +14283,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandeFull 1`] = ` role="presentation" > @@ -14328,12 +14328,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandePannel 1`] = role="presentation" > @@ -14364,12 +14364,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandePannel 1`] = role="presentation" > @@ -14400,12 +14400,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandePannel 1`] = role="presentation" > @@ -14436,12 +14436,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandePannel 1`] = role="presentation" > @@ -14471,33 +14471,33 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaGrandePannel 1`] = class="tab-content" >
    Contenuto 1
    Contenuto 2
    Contenuto 3
    Contenuto 4 @@ -14517,12 +14517,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaPannel 1`] = ` role="presentation" > @@ -14553,12 +14553,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaPannel 1`] = ` role="presentation" > @@ -14589,12 +14589,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaPannel 1`] = ` role="presentation" > @@ -14625,12 +14625,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaPannel 1`] = ` role="presentation" > @@ -14660,33 +14660,33 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab IconaPannel 1`] = ` class="tab-content" >
    Contenuto 1
    Contenuto 2
    Contenuto 3
    Contenuto 4 @@ -14706,12 +14706,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIcona 1`] = ` role="presentation" > @@ -14736,12 +14736,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIcona 1`] = ` role="presentation" > @@ -14766,12 +14766,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIcona 1`] = ` role="presentation" > @@ -14796,12 +14796,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIcona 1`] = ` role="presentation" > @@ -14865,12 +14865,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaFull 1`] = ` role="presentation" > @@ -14895,12 +14895,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaFull 1`] = ` role="presentation" > @@ -14925,12 +14925,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaFull 1`] = ` role="presentation" > @@ -14994,12 +14994,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannel 1`] = role="presentation" > @@ -15024,12 +15024,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannel 1`] = role="presentation" > @@ -15054,12 +15054,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannel 1`] = role="presentation" >
    Contenuto 1
    Contenuto 2
    Contenuto 3
    Contenuto 4 @@ -15129,12 +15129,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = ` role="presentation" > @@ -15146,12 +15146,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = ` role="presentation" > @@ -15163,12 +15163,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = ` role="presentation" > @@ -15180,12 +15180,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = ` role="presentation" > Disattivo @@ -15206,12 +15206,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` role="presentation" > @@ -15223,12 +15223,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` role="presentation" > @@ -15240,12 +15240,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` role="presentation" > @@ -15257,12 +15257,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` role="presentation" > Disattivo @@ -15283,12 +15283,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` role="presentation" > @@ -15300,12 +15300,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` role="presentation" > @@ -15317,12 +15317,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` role="presentation" > @@ -15334,12 +15334,12 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` role="presentation" > Disattivo @@ -15350,33 +15350,33 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` class="tab-content" >
    Contenuto 1
    Contenuto 2
    Contenuto 3
    Contenuto 4 @@ -34276,7 +34276,7 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag class="card-columns" >
    Date: Thu, 9 Jan 2025 17:53:25 +0100 Subject: [PATCH 08/13] fix: restore aria selected attribute --- src/Tab/TabNav.tsx | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx index 9e84462ca..c521cf6d6 100644 --- a/src/Tab/TabNav.tsx +++ b/src/Tab/TabNav.tsx @@ -15,38 +15,44 @@ export const TabNav: FC = ({ className, tag = 'ul', testId, ...attr const classes = classNames(className, 'nav-tabs'); let currentTabIndex = 0; - const elements: HTMLElement[] = []; + let activeTabIndex = -1; // Ugly workaround to keep Bootstrap Italia behaviour - const handleKeyDown = (event: React.KeyboardEvent) => { + const handleKeyDown = (event: React.KeyboardEvent, disabled: boolean = false) => { const queriedElements = document.querySelectorAll('.nav-link'); for (let i = 0; i < queriedElements.length; i++) { if (queriedElements[i].ariaSelected === 'true') { + activeTabIndex = i; + } + // Disabled elements ignore current focused tab + if (!disabled && document.activeElement === queriedElements[i]) { currentTabIndex = i; } queriedElements[i].ariaSelected = 'false'; - elements.push(queriedElements[i] as HTMLElement); } switch (event.key) { case 'ArrowLeft': case 'ArrowUp': if (currentTabIndex - 1 < 0) { - currentTabIndex = elements.length; + currentTabIndex = queriedElements.length; } - currentTabIndex = (currentTabIndex - 1) % elements.length; + currentTabIndex = (currentTabIndex - 1) % queriedElements.length; break; case 'ArrowRight': case 'ArrowDown': - currentTabIndex = (currentTabIndex + 1) % elements.length; + currentTabIndex = (currentTabIndex + 1) % queriedElements.length; break; default: return; } - if (elements[currentTabIndex].ariaDisabled === 'true') { - handleKeyDown(event); + if (queriedElements[currentTabIndex].ariaDisabled === 'true') { + handleKeyDown(event, true); } else { - elements[currentTabIndex].focus(); + (queriedElements[currentTabIndex] as HTMLElement).focus(); + setTimeout(() => { + queriedElements[activeTabIndex].ariaSelected = 'true'; + }, 300); } }; From 27c4efcc755dd68890e4fdd59d6be54e67a29ea2 Mon Sep 17 00:00:00 2001 From: Virtute90 Date: Fri, 10 Jan 2025 12:48:15 +0100 Subject: [PATCH 09/13] feat: aggiunti props vertical, dark e card --- src/Tab/TabNav.tsx | 34 +++++++++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx index c521cf6d6..49732ffa1 100644 --- a/src/Tab/TabNav.tsx +++ b/src/Tab/TabNav.tsx @@ -3,17 +3,45 @@ import React, { ElementType, FC } from 'react'; import { Nav, NavProps } from 'react-bootstrap'; export interface TabNavProps extends NavProps { - /** Utilizzarlo in caso di utilizzo di componenti personalizzati */ + /** Utilizzarlo in caso di utilizzo di componenti personalizzati + * @default ul + */ tag?: ElementType; /** Classi aggiuntive da usare per il componente Tab */ className?: string; + /** Imposta l'orientameno delle tab in verticale + * @default false + */ + vertical?: boolean; + /** Imposta la tab con sfondo scuro + * @default false + */ + dark?: boolean; + /** Imposta la tab con design tipo card + * @default false + */ + card?: boolean; testId?: string; } -export const TabNav: FC = ({ className, tag = 'ul', testId, ...attributes }) => { +export const TabNav: FC = ({ + className, + vertical = false, + dark = false, + card = false, + tag = 'ul', + testId, + ...attributes +}) => { const Tag = tag; - const classes = classNames(className, 'nav-tabs'); + const classes = classNames( + className, + 'nav-tabs', + { 'nav-tabs-vertical': vertical }, + { 'nav-dark': dark }, + { 'nav-tabs-cards': card } + ); let currentTabIndex = 0; let activeTabIndex = -1; From 0c1818ffc64d2c5bfa1d316c1b423f5210e24f60 Mon Sep 17 00:00:00 2001 From: Virtute90 Date: Fri, 10 Jan 2025 12:48:41 +0100 Subject: [PATCH 10/13] feat: aggiunti esempi mancanti (vertical, dark e card) --- stories/Components/Tab.stories.tsx | 536 ++++++++++++++++++++++++++++- stories/Documentation/Tab.mdx | 68 ++++ 2 files changed, 603 insertions(+), 1 deletion(-) diff --git a/stories/Components/Tab.stories.tsx b/stories/Components/Tab.stories.tsx index 98f1b5556..132cdd618 100644 --- a/stories/Components/Tab.stories.tsx +++ b/stories/Components/Tab.stories.tsx @@ -1,6 +1,6 @@ import { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { Icon, TabContainer, TabContent, TabNav, TabNavItem, TabNavLink, TabPane } from '../../src'; +import { Col, Icon, Row, TabContainer, TabContent, TabNav, TabNavItem, TabNavLink, TabPane } from '../../src'; const meta: Meta = { title: 'Documentazione/Componenti/Tab', @@ -515,3 +515,537 @@ export const TestoIconaPannel: Story = { ) }; + +export const TestualePannelVertical: Story = { + render: () => ( + + + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelVerticalBackground: Story = { + render: () => ( + + + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestoIconaPannelVertical: Story = { + render: () => ( + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestoPannelVertical: Story = { + render: () => ( + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelReverseBottom: Story = { + render: () => ( + +
    + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + +
    +     + ) +}; + +export const TestualePannelReverseRight: Story = { + render: () => ( + + + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualeFullDark: Story = { + render: () => ( + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + ) +}; + +export const TestoIconaFullDark: Story = { + render: () => ( + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + ) +}; + +export const TestoIconaPannelVerticalDark: Story = { + render: () => ( + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelReverseRightDark: Story = { + render: () => ( + + + + + + + + Tab 1 + + + + + + Tab 2 + + + + + + Tab 3 + + + + + + Tab 4 + + + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + + + ) +}; + +export const TestualePannelCard: Story = { + render: () => ( + + + + Attivo + + + Link + + + Link + + + + Disattivo + + + + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + ) +}; + +export const TestualePannelCardEditable: Story = { + render: () => ( + +     + + + Contenuto 1 + + + Contenuto 2 + + + Contenuto 3 + + + Contenuto 4 + + + + ) +}; diff --git a/stories/Documentation/Tab.mdx b/stories/Documentation/Tab.mdx index d87258f8d..ea3ff986a 100644 --- a/stories/Documentation/Tab.mdx +++ b/stories/Documentation/Tab.mdx @@ -125,3 +125,71 @@ Gli esempi sopra riportati non hanno molto senso senza un contenuto che cambi al ### Tab con testo e icona + +## Tab verticali + +Impostando il parametro `vertical` al componente `TabNav` e aggiungendo i dovuti componenti per la spaziatura verticale, è possibile realizzare tab a orientamento verticale. + +### Tab testuale + + + +### Tab testuale con colore di sfondo + +Aggiungendo la classe `.nav-tabs-vertical-background` al componente `TabNav` contenitore dei link i tab selezionati avranno un colore di sfondo. + + + +### Tab con testo e icona + + + +### Tab con icona + +Le label dei Tab possono essere sostituite da icone, avendo cura di includere all’interno del link un elemento `` contenente la descrizione per non gli screen reader del tab con classe `.visually-hidden` per nascondere la descrizione agli altri browser. Al componente `TabNavLink` contenente l’icona va aggiunta la classe `.justify-content-end` per allineare l’icona a destra. + + + +## Posizione dei Tab + +Per questioni di accessibilità è preferibile utilizzare le proprietà Flex di CSS a un cambio di posizione dei Tab nell’HTML. Per garantire un flusso di lettura naturale della pagina i tab di navigazione devono precedere il contenuto a loro associato. + +### Orizzontale in fondo + +Per posizionare i tab al di sotto del contenuto è necessario utilizzare un elemento contenitore (ad esempio un `
    `) con classi `.d-flex .flex-column-reverse`. + + + +### Verticale a destra + +Per posizionare i tab verticali a destra contenuto è necessario applicare la classe `.flex-row-reverse` all’elemento con classe `.row` che li contiene. + + + +## Tab con sfondo scuro + +### Tab orizzontali a tutta larghezza + + + +### Tab con testo e icona + + + +### Tab verticali + + + +### Tab verticali destra + + + +## Tab tipo Card + +Aggiungere la proprietà `card` al componente `TabNav` per ottenere un design tipo card. + + + +### Tab tipo Card con pulsanti aggiungi/elimina + + From f20a79f8c5a5cb15f6f5cc99cd0ac59cb45c790a Mon Sep 17 00:00:00 2001 From: Virtute90 Date: Fri, 10 Jan 2025 12:52:59 +0100 Subject: [PATCH 11/13] test: update snapshot --- test/__snapshots__/Storybook.test.tsx.snap | 2179 ++++++++++++++++++-- 1 file changed, 1968 insertions(+), 211 deletions(-) diff --git a/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap index 8ca06e215..92d01aa1a 100644 --- a/test/__snapshots__/Storybook.test.tsx.snap +++ b/test/__snapshots__/Storybook.test.tsx.snap @@ -14953,10 +14953,10 @@ exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaFull 1`] = `
    `; -exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannel 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaFullDark 1`] = ` `; -exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannel 1`] = ` -`; - -exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` -
    - + Contenuto 4 +
    +
    `; -exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannelVertical 1`] = ` +
    +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoIconaPannelVerticalDark 1`] = ` +
    +
    +
    + +
    +
    +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestoPannelVertical 1`] = ` +
    +
    +
    + +
    +
    +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab Testuale 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFull 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualeFullDark 1`] = ` + +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannel 1`] = ` +
    + +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelCard 1`] = ` +
    + +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelCardEditable 1`] = ` +
    +
    + +
    +
    + +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelReverseBottom 1`] = ` +
    +
    + +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelReverseRight 1`] = ` +
    +
    +
    + +
    +
    +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelReverseRightDark 1`] = ` +
    +
    +
    + +
    +
    - - Disattivo - - - +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelVertical 1`] = ` +
    - Contenuto 1 +
    - Contenuto 2 +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    +
    +
    +`; + +exports[`Stories Snapshots Documentazione/Componenti/Tab TestualePannelVerticalBackground 1`] = ` +
    +
    - Contenuto 3 +
    - Contenuto 4 +
    +
    + Contenuto 1 +
    +
    + Contenuto 2 +
    +
    + Contenuto 3 +
    +
    + Contenuto 4 +
    +
    @@ -34276,7 +36033,7 @@ exports[`Stories Snapshots Documentazione/Organizzare i contenuti/Liste di Immag class="card-columns" >
    Date: Fri, 10 Jan 2025 16:59:14 +0100 Subject: [PATCH 12/13] fix: get elements from component root only --- src/Tab/TabNav.tsx | 78 ++++++++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 33 deletions(-) diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx index 49732ffa1..e88dc3b06 100644 --- a/src/Tab/TabNav.tsx +++ b/src/Tab/TabNav.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { ElementType, FC } from 'react'; +import React, { ElementType, FC, useRef } from 'react'; import { Nav, NavProps } from 'react-bootstrap'; export interface TabNavProps extends NavProps { @@ -34,6 +34,7 @@ export const TabNav: FC = ({ ...attributes }) => { const Tag = tag; + const rootRef = useRef(); const classes = classNames( className, @@ -48,41 +49,52 @@ export const TabNav: FC = ({ // Ugly workaround to keep Bootstrap Italia behaviour const handleKeyDown = (event: React.KeyboardEvent, disabled: boolean = false) => { - const queriedElements = document.querySelectorAll('.nav-link'); - for (let i = 0; i < queriedElements.length; i++) { - if (queriedElements[i].ariaSelected === 'true') { - activeTabIndex = i; + const queriedElements = rootRef.current?.querySelectorAll('.nav-link'); + if (queriedElements) { + for (let i = 0; i < queriedElements.length; i++) { + if (queriedElements[i].ariaSelected === 'true') { + activeTabIndex = i; + } + // Disabled elements ignore current focused tab + if (!disabled && document.activeElement === queriedElements[i]) { + currentTabIndex = i; + } + queriedElements[i].ariaSelected = 'false'; } - // Disabled elements ignore current focused tab - if (!disabled && document.activeElement === queriedElements[i]) { - currentTabIndex = i; + switch (event.key) { + case 'ArrowLeft': + case 'ArrowUp': + if (currentTabIndex - 1 < 0) { + currentTabIndex = queriedElements.length; + } + currentTabIndex = (currentTabIndex - 1) % queriedElements.length; + break; + case 'ArrowRight': + case 'ArrowDown': + currentTabIndex = (currentTabIndex + 1) % queriedElements.length; + break; + default: + return; + } + if (queriedElements[currentTabIndex].ariaDisabled === 'true') { + handleKeyDown(event, true); + } else { + (queriedElements[currentTabIndex] as HTMLElement).focus({ preventScroll: true }); + setTimeout(() => { + queriedElements[activeTabIndex].ariaSelected = 'true'; + }, 300); } - queriedElements[i].ariaSelected = 'false'; - } - switch (event.key) { - case 'ArrowLeft': - case 'ArrowUp': - if (currentTabIndex - 1 < 0) { - currentTabIndex = queriedElements.length; - } - currentTabIndex = (currentTabIndex - 1) % queriedElements.length; - break; - case 'ArrowRight': - case 'ArrowDown': - currentTabIndex = (currentTabIndex + 1) % queriedElements.length; - break; - default: - return; - } - if (queriedElements[currentTabIndex].ariaDisabled === 'true') { - handleKeyDown(event, true); - } else { - (queriedElements[currentTabIndex] as HTMLElement).focus(); - setTimeout(() => { - queriedElements[activeTabIndex].ariaSelected = 'true'; - }, 300); } }; - return ; + return ( + + ); }; From f6af92c8686acb9459006f302b6b3fc6d70e2af2 Mon Sep 17 00:00:00 2001 From: Andrea Stagi Date: Fri, 10 Jan 2025 17:41:28 +0100 Subject: [PATCH 13/13] fix: prevent default event behaviour --- src/Tab/TabNav.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx index e88dc3b06..d46fc4942 100644 --- a/src/Tab/TabNav.tsx +++ b/src/Tab/TabNav.tsx @@ -49,6 +49,8 @@ export const TabNav: FC = ({ // Ugly workaround to keep Bootstrap Italia behaviour const handleKeyDown = (event: React.KeyboardEvent, disabled: boolean = false) => { + event.stopPropagation(); + event.preventDefault(); const queriedElements = rootRef.current?.querySelectorAll('.nav-link'); if (queriedElements) { for (let i = 0; i < queriedElements.length; i++) { @@ -73,6 +75,9 @@ export const TabNav: FC = ({ case 'ArrowDown': currentTabIndex = (currentTabIndex + 1) % queriedElements.length; break; + case 'Enter': + (queriedElements[currentTabIndex] as HTMLElement).click(); + break; default: return; }
    -
    -
    - -
    -
    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
    -
    - Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. -
    -
    - Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
    -
    -
    -
    -
    -