New Tabs component implementation

apps/website/screens/components/tabs/code/TabsCodePage.tsx

@@ -1,14 +1,17 @@
-import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
+import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
 import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
 import Code from "@/common/Code";
 import Example from "@/common/example/Example";
-import controlled from "./examples/controlled";
-import uncontrolled from "./examples/uncontrolled";
-import icons from "./examples/icons";
+import controlledLegacy from "./examples-old/controlled";
+import uncontrolledLegacy from "./examples-old/uncontrolled";
+import iconsLegacy from "./examples-old/icons";
 import TableCode from "@/common/TableCode";
 import StatusBadge from "@/common/StatusBadge";
+import controlled from "./examples-new/controlled";
+import uncontrolled from "./examples-new/uncontrolled";
+import icons from "./examples-new/icons";
 
 const sections = [
   {
@@ -25,15 +28,25 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>defaultActiveTabIndex</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="legacy" />
+                defaultActiveTabIndex
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>number</TableCode>
             </td>
             <td>Initially active tab, only when it is uncontrolled.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>activeTabIndex</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="legacy" />
+                activeTabIndex
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>number</TableCode>
             </td>
@@ -46,7 +59,7 @@ const sections = [
           <tr>
             <td>
               <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
-                <StatusBadge status="required" />
+                <StatusBadge status="legacy" />
                 tabs
               </DxcFlex>
             </td>
@@ -86,6 +99,22 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                {/* TODO: Swap experimental for required once old logic is removed */}
+                <StatusBadge status="experimental" />
+                children
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>React.ReactNode</TableCode>
+            </td>
+            <td>
+              Contains one or more <Code>DxcTabs.Tab</Code>.
+            </td>
+            <td>-</td>
+          </tr>
           <tr>
             <td>iconPosition</td>
             <td>
@@ -97,7 +126,12 @@ const sections = [
             </td>
           </tr>
           <tr>
-            <td>onTabClick</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="legacy" />
+                onTabClick
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>{"(index: number) => void"}</TableCode>
             </td>
@@ -108,7 +142,12 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>onTabHover</td>
+            <td>
+              <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                <StatusBadge status="legacy" />
+                onTabHover
+              </DxcFlex>
+            </td>
             <td>
               <TableCode>{"(index: number) => void"}</TableCode>
             </td>
@@ -145,6 +184,142 @@ const sections = [
       </DxcTable>
     ),
   },
+  {
+    title: "DxcTabs.Tab",
+    content: <DxcParagraph>Single tab, part of the set of Tabs.</DxcParagraph>,
+    subSections: [
+      {
+        title: "Props",
+        content: (
+          <DxcTable>
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Description</th>
+                <th>Default</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>active</td>
+                <td>
+                  <TableCode>boolean</TableCode>
+                </td>
+                <td>Whether the tab is active or not.</td>
+                <td>
+                  <TableCode>false</TableCode>
+                </td>
+              </tr>
+              <tr>
+                <td>defaultActive</td>
+                <td>
+                  <TableCode>boolean</TableCode>
+                </td>
+                <td>Whether the tab is active or not by default, but mantaining the uncontrolled behaviour.</td>
+                <td>
+                  <TableCode>false</TableCode>
+                </td>
+              </tr>
+              <tr>
+                <td>disabled</td>
+                <td>
+                  <TableCode>boolean</TableCode>
+                </td>
+                <td>Whether the tab is disabled or not.</td>
+                <td>
+                  <TableCode>false</TableCode>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                    <StatusBadge status="required" />
+                    label
+                  </DxcFlex>
+                </td>
+                <td>
+                  <TableCode>string</TableCode>
+                </td>
+                <td>Tab label text.</td>
+                <td>-</td>
+              </tr>
+              <tr>
+                <td>
+                  <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                    title
+                  </DxcFlex>
+                </td>
+                <td>
+                  <TableCode>string</TableCode>
+                </td>
+                <td>Tooltip text for the tab.</td>
+                <td>-</td>
+              </tr>
+              <tr>
+                <td>icon</td>
+                <td>
+                  <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
+                </td>
+                <td>
+                  <DxcLink newWindow href="https://fonts.google.com/icons">
+                    Material Symbol
+                  </DxcLink>{" "}
+                  name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
+                  replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
+                  symbol name with <TableCode>"filled_"</TableCode>.
+                </td>
+                <td>-</td>
+              </tr>
+              <tr>
+                <td>onClick</td>
+                <td>
+                  <TableCode>{"() => void"}</TableCode>
+                </td>
+                <td>This function will be called when the user clicks on this tab. </td>
+                <td>-</td>
+              </tr>
+              <tr>
+                <td>onHover</td>
+                <td>
+                  <TableCode>{"() => void"}</TableCode>
+                </td>
+                <td>This function will be called when the user hovers this tab.</td>
+                <td>-</td>
+              </tr>
+              <tr>
+                <td>notificationNumber</td>
+                <td>
+                  <TableCode>boolean | number</TableCode>
+                </td>
+                <td>
+                  If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a
+                  number is specified, the component will display a badge with the value as its label. Take into account
+                  that if that number is greater than 99, it will appear as <TableCode>+99</TableCode> in the badge.
+                </td>
+                <td>
+                  <TableCode>false</TableCode>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                    <StatusBadge status="required" />
+                    children
+                  </DxcFlex>
+                </td>
+                <td>
+                  <TableCode>React.ReactNode</TableCode>
+                </td>
+                <td>Contains the component to be rendered when this tab is active.</td>
+                <td>-</td>
+              </tr>
+            </tbody>
+          </DxcTable>
+        ),
+      },
+    ],
+  },
   {
     title: "Examples",
     subSections: [
@@ -162,6 +337,23 @@ const sections = [
       },
     ],
   },
+  {
+    title: "Examples (Legacy)",
+    subSections: [
+      {
+        title: "Controlled",
+        content: <Example example={controlledLegacy} defaultIsVisible />,
+      },
+      {
+        title: "Uncontrolled",
+        content: <Example example={uncontrolledLegacy} defaultIsVisible />,
+      },
+      {
+        title: "Icons and notifications",
+        content: <Example example={iconsLegacy} defaultIsVisible />,
+      },
+    ],
+  },
 ];
 
 const TabsUsagePage = () => {

apps/website/screens/components/tabs/code/examples-new/controlled.ts

@@ -0,0 +1,28 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+const code = `() => {
+const [selectedTab, setSelectedTab] = useState("Mail");
+  return (
+    <DxcInset space="2rem">
+      <DxcTabs>
+        <DxcTabs.Tab label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
+          <></>
+        </DxcTabs.Tab>
+        <DxcTabs.Tab label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
+          <></>
+        </DxcTabs.Tab>
+        <DxcTabs.Tab label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
+          <></>
+        </DxcTabs.Tab></DxcTabs>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcTabs,
+  DxcInset,
+  useState,
+};
+
+export default { code, scope };

apps/website/screens/components/tabs/code/examples-new/icons.ts

@@ -0,0 +1,45 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  const mobileIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="currentColor"
+    >
+      <g>
+        <path d="M0,0h24v24H0V0z" fill="none" />
+      </g>
+      <g>
+        <g>
+          <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
+        </g>
+      </g>
+    </svg>
+  );
+
+  return (
+    <DxcInset space="2rem">
+      <DxcTabs>
+        <DxcTabs.Tab label="3G Mobile" icon={mobileIcon} notificationNumber={true}>
+          <></>
+        </DxcTabs.Tab>
+        <DxcTabs.Tab label="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
+          <></>
+        </DxcTabs.Tab>
+        <DxcTabs.Tab label="Wifi" icon="wifi" notificationNumber={120}>
+          <></>
+        </DxcTabs.Tab>  
+      </DxcTabs>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcTabs,
+  DxcInset,
+};
+
+export default { code, scope };

apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts

@@ -0,0 +1,25 @@
+import { DxcTabs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="2rem">
+      <DxcTabs>
+        <DxcTabs.Tab label="Mail" defaultActive>
+          <></>
+        </DxcTabs.Tab>
+        <DxcTabs.Tab label="Calendar">
+          <></>
+        </DxcTabs.Tab>
+        <DxcTabs.Tab label="Contacts">
+          <></>
+        </DxcTabs.Tab></DxcTabs>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcTabs,
+  DxcInset,
+};
+
+export default { code, scope };

apps/website/screens/components/tabs/usage/TabsUsagePage.tsx

@@ -6,6 +6,7 @@ import Figure from "@/common/Figure";
 import DocFooter from "@/common/DocFooter";
 import tabsUsage from "./examples/usage";
 import defaultUsage from "./examples/default";
+import scrollableUsage from "./examples/scrollable";
 import contentUsageTabImage from "./images/tabs_content.png";
 import typographyUsageTabImage from "./images/tabs_typography.png";
 import tabsPlacement from "./images/tabs_placement.png";
@@ -16,7 +17,6 @@ import tabsAlignment from "./images/tabs_alignment.png";
 import tabsPanelBehavior from "./images/tabs_panel_behavior.png";
 import tabsScrollablePanelBehavior from "./images/tabs_scrollable_panel_behavior.png";
 import Example from "@/common/example/Example";
-import scrollableUsage from "./examples/scrollable";
 
 const sections = [
   {