Revisione componente Tab

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",

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<TabNavProps> = ({ className, tag = 'ul', testId, ...attributes }) => {
+  const Tag = tag;
+
+  const classes = classNames(className, 'nav-tabs');
+
+  return <Nav as={Tag} className={classes} data-testid={testId} {...attributes}></Nav>;
+};

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<TabNavItemProps> = ({ tag = 'li', testId, ...attributes }) => {
+  const Tag = tag;
+
+  return <Nav.Item as={Tag} role='presentation' data-testid={testId} {...attributes}></Nav.Item>;
+};

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<TabNavLinkProps> = ({ tag, testId, ...attributes }) => {
+  const Tag = tag;
+
+  return <Nav.Link as={Tag} data-testid={testId} {...attributes}></Nav.Link>;
+};

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<TabsProps> = ({ tag, testId, ...attributes }) => {
+  const Tag = tag;
+
+  return <Tab.Container as={Tag} data-testid={testId} {...attributes}></Tab.Container>;
+};

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,13 +295,12 @@ export type {
   PopoverHeaderProps,
   PopoverProps,
   RowProps,
-  TabContentProps,
-  TabPaneProps,
   TableProps,
   TooltipProps,
   UncontrolledAlertProps,
   UncontrolledCollapseProps,
   UncontrolledTooltipProps
 } from 'reactstrap';
 
-import "./track-focus.js"
+export type { TabContainerProps, TabContentProps, TabPaneProps } from 'react-bootstrap';
+import "./track-focus.js"