Merge branch 'gomezivann/bar-chart' of https://github.com/dxc-technology/halstack-react into gomezivann/bar-chart

Author: GomezIvann

website/screens/components/nav-tabs/code/NavTabsCodePage.tsx

@@ -13,6 +13,7 @@ import basicUsage from "./examples/basicUsage";
 import routerLink from "./examples/routerLink";
 import routerLinkV6 from "./examples/routerLinkV6";
 import nextLink from "./examples/nextLink";
+import icons from "./examples/icons";
 import TableCode from "@/common/TableCode";
 import StatusBadge from "@/common/StatusBadge";
 
@@ -287,6 +288,14 @@ const sections = [
           },
         ],
       },
+      {
+        title: "Icons and notifications",
+        content: (
+          <>
+            <Example example={icons} defaultIsVisible />
+          </>
+        ),
+      },
     ],
   },
 ];

website/screens/components/nav-tabs/code/examples/icons.ts

@@ -0,0 +1,26 @@
+import { DxcNavTabs, DxcInset } from "@dxc-technology/halstack-react";
+
+const code = `() => {
+  return (
+    <DxcInset space="2rem">
+      <DxcNavTabs iconPosition="left">
+        <DxcNavTabs.Tab href="#" active icon="favorite" notificationNumber>
+          Tab 1
+        </DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" disabled icon="favorite" notificationNumber={5}>
+          Tab 2
+        </DxcNavTabs.Tab>
+        <DxcNavTabs.Tab href="#" icon="favorite" notificationNumber={120}>
+          Tab 3
+        </DxcNavTabs.Tab>
+      </DxcNavTabs>
+    </DxcInset>
+  );
+}`;
+
+const scope = {
+  DxcNavTabs,
+  DxcInset,
+};
+
+export default { code, scope };

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

@@ -171,7 +171,7 @@ const sections = [
         content: <Example example={uncontrolled} defaultIsVisible />,
       },
       {
-        title: "Icons",
+        title: "Icons and notifications",
         content: <Example example={icons} defaultIsVisible />,
       },
     ],

website/screens/components/tabs/code/examples/icons.ts

@@ -36,14 +36,18 @@ const code = `() => {
           {
             label: "3G Mobile",
             icon: mobileIcon,
+            notificationNumber: true
           },
           {
             label: "Ethernet",
             icon: "settings_ethernet",
+            isDisabled: true,
+            notificationNumber: 2
           },
           {
             label: "Wifi",
             icon: "wifi",
+            notificationNumber: 120
           },
         ]}
       ></DxcTabs>