diff --git a/package.json b/package.json index 1b33395e..420036b9 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ "@types/jest": "^29.5.12", "@types/node": "^20.12.2", "@types/react": "^18.2.75", + "@types/react-bootstrap": "^0.32.37", "@types/react-dom": "^18.2.24", "@types/react-transition-group": "^4.4.10", "bootstrap-italia": "2.12.1", @@ -135,6 +136,7 @@ "dependencies": { "classnames": "^2.3.1", "is-number": "^7.0.0", + "react-bootstrap": "^2.10.6", "react-stickup": "^1.12.1", "react-toastify": "^7.0.4", "react-transition-group": "^4.4.5", diff --git a/src/Tab/TabNav.tsx b/src/Tab/TabNav.tsx new file mode 100644 index 00000000..5efcdddf --- /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 00000000..2d6bc9ef --- /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 00000000..bc1c7d06 --- /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 00000000..beaa5ebd --- /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 6f429ee7..09830e16 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,7 @@ export { Util } from 'reactstrap'; +export { TabContainer, TabContent, TabPane } from 'react-bootstrap'; export { Autocomplete } from './Autocomplete/Autocomplete'; export { Accordion } from './Accordion/Accordion'; export { AccordionBody } from './Accordion/AccordionBody'; @@ -136,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'; @@ -242,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'; @@ -290,8 +295,6 @@ export type { PopoverHeaderProps, PopoverProps, RowProps, - TabContentProps, - TabPaneProps, TableProps, TooltipProps, UncontrolledAlertProps, @@ -299,4 +302,5 @@ export type { UncontrolledTooltipProps } from 'reactstrap'; -import "./track-focus.js" \ No newline at end of file +export type { TabContainerProps, TabContentProps, TabPaneProps } from 'react-bootstrap'; +import "./track-focus.js" diff --git a/stories/Components/Tab.stories.tsx b/stories/Components/Tab.stories.tsx index b14289c5..98f1b555 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 7a8d511d..d87258f8 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/test/__snapshots__/Storybook.test.tsx.snap b/test/__snapshots__/Storybook.test.tsx.snap index 9dedc8a7..b95fef6d 100644 --- a/test/__snapshots__/Storybook.test.tsx.snap +++ b/test/__snapshots__/Storybook.test.tsx.snap @@ -13555,170 +13555,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`] = ` -
-
- @@ -13728,376 +13707,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`] = `
-
- diff --git a/yarn.lock b/yarn.lock index 7d958516..c66218dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -948,7 +948,7 @@ "@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== @@ -1920,11 +1920,40 @@ 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== +"@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.3" resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf" @@ -2309,6 +2338,13 @@ resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.4.6.tgz#40b03d72b014cc0bb6530aba0652b49e176b0c0e" integrity sha512-q7vDPN/mgj7cXIVQ9R1/V75hrzNgKkm2G0LjMo57//9/djQ+7LxvBsR1iScbFIRSEqppvMiBFzkts+2uXidySA== +"@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.4.0": version "10.4.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8" @@ -2567,6 +2603,13 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451" integrity sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA== +"@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" @@ -2581,14 +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" "*" -"@types/react@*", "@types/react@18.2.75": +"@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== @@ -2639,6 +2682,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" @@ -3385,7 +3433,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz#707413784dbb3a72aa11c2f2b042a0bef4004170" integrity sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA== -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== @@ -3737,7 +3785,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== @@ -4647,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" @@ -6744,7 +6799,15 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.8, prop-types@^15.6.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.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== @@ -6785,6 +6848,24 @@ quick-lru@^4.0.1: resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f" integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g== +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-confetti@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.1.0.tgz#03dc4340d955acd10b174dbf301f374a06e29ce6" @@ -6826,7 +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== -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== @@ -6846,6 +6927,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" @@ -7375,7 +7461,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== @@ -7426,7 +7521,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== @@ -7687,7 +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: +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== @@ -7790,6 +7892,21 @@ typescript@^5.4.5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6" integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg== +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@~6.19.2: version "6.19.8" resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02" @@ -8127,7 +8244,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== @@ -8213,7 +8330,16 @@ word-wrap@^1.2.5: resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"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==
-
-
- -
-
-
-
- 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. -
-
-
-
-
-