dxc-technology · Mil4n0r · Mar 28, 2025 · Mar 6, 2025 · Mar 6, 2025 · Mar 19, 2025
diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx
@@ -30,10 +30,8 @@ const ApplicationLayoutWrapper = ({ condition, wrapper, children }: ApplicationL
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const getLayout = Component.getLayout || ((page) => page);
   const componentWithLayout = getLayout(<Component {...pageProps} />);
-
   const [filter, setFilter] = useState("");
   const { asPath: currentPath } = useRouter();
-
   const filteredLinks = useMemo(() => {
     const filtered: LinksSectionDetails[] = [];
     LinksSections.map((section) => {
@@ -47,17 +45,10 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
     return filtered;
   }, [filter]);
 
-  const onFilterInputChange = ({ value }: { value: string }) => {
-    setFilter(value);
-  };
-
   const matchPaths = (linkPath: string) => {
+    const desiredPaths = [linkPath, `${linkPath}/code`];
     const pathToBeMatched = currentPath?.split("#")[0]?.slice(0, -1);
-    const desiredPaths = [linkPath, `${linkPath}/specifications`, `${linkPath}/usage`];
-    if (pathToBeMatched) {
-      return desiredPaths.includes(pathToBeMatched);
-    }
-    return false;
+    return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false;
   };
 
   return (
@@ -77,7 +68,9 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
                     <DxcTextInput
                       placeholder="Search docs"
                       value={filter}
-                      onChange={onFilterInputChange}
+                      onChange={({ value }: { value: string }) => {
+                        setFilter(value);
+                      }}
                       size="fillParent"
                       clearable
                       margin={{

diff --git a/apps/website/pages/components/tabs/code.tsx b/apps/website/pages/components/tabs/code.tsx
@@ -0,0 +1,17 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import TabsCodePage from "screens/components/tabs/code/TabsCodePage";
+import TabsPageLayout from "screens/components/tabs/TabsPageLayout";
+
+const Code = () => (
+  <>
+    <Head>
+      <title>Tabs code — Halstack Design System</title>
+    </Head>
+    <TabsCodePage />
+  </>
+);
+
+Code.getLayout = (page: ReactElement) => <TabsPageLayout>{page}</TabsPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/tabs/index.tsx b/apps/website/pages/components/tabs/index.tsx
@@ -1,21 +1,17 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import TabsCodePage from "screens/components/tabs/code/TabsCodePage";
+import TabsOverviewPage from "screens/components/tabs/overview/TabsOverviewPage";
 import TabsPageLayout from "screens/components/tabs/TabsPageLayout";
 
-const Index = () => {
-  return (
-    <>
-      <Head>
-        <title>Tabs — Halstack Design System</title>
-      </Head>
-      <TabsCodePage></TabsCodePage>
-    </>
-  );
-};
+const Index = () => (
+  <>
+    <Head>
+      <title>Tabs — Halstack Design System</title>
+    </Head>
+    <TabsOverviewPage />
+  </>
+);
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <TabsPageLayout>{page}</TabsPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <TabsPageLayout>{page}</TabsPageLayout>;
 
 export default Index;
diff --git a/apps/website/pages/components/tabs/specifications.tsx b/apps/website/pages/components/tabs/specifications.tsx
diff --git a/apps/website/pages/components/tabs/usage.tsx b/apps/website/pages/components/tabs/usage.tsx
diff --git a/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx
@@ -153,7 +153,7 @@ const sections = [
           <tbody>
             <tr>
               <td>
-                <DxcTypography color="#5f249f" fontWeight="600">
+                <DxcTypography color="var(--color-bg-primary-strong)" fontWeight="600">
                   Default
                 </DxcTypography>
               </td>
@@ -164,7 +164,7 @@ const sections = [
             </tr>
             <tr>
               <td>
-                <DxcTypography color="#d0011b" fontWeight="600">
+                <DxcTypography color="var(--color-bg-error-strong)" fontWeight="600">
                   Error
                 </DxcTypography>
               </td>
@@ -175,7 +175,7 @@ const sections = [
             </tr>
             <tr>
               <td>
-                <DxcTypography color="#0086e6" fontWeight="600">
+                <DxcTypography color="var(--color-bg-secondary-strong)" fontWeight="600">
                   Info
                 </DxcTypography>
               </td>
@@ -186,7 +186,7 @@ const sections = [
             </tr>
             <tr>
               <td>
-                <DxcTypography color="#24a148" fontWeight="600">
+                <DxcTypography color="var(--color-bg-success-strong)" fontWeight="600">
                   Success
                 </DxcTypography>
               </td>
@@ -197,7 +197,7 @@ const sections = [
             </tr>
             <tr>
               <td>
-                <DxcTypography color="#c26c0a" fontWeight="600">
+                <DxcTypography color="var(--color-bg-warning-strong)" fontWeight="600">
                   Warning
                 </DxcTypography>
               </td>
@@ -257,7 +257,7 @@ const sections = [
                   </DxcBulletedList.Item>
                   <DxcBulletedList.Item>
                     <strong>Secondary actions:</strong> They can be used for less prominent actions that are not the
-                    primary focus of the user’s interaction.
+                    primary focus of the user's interaction.
                   </DxcBulletedList.Item>
                 </DxcBulletedList>
               </>
@@ -338,7 +338,7 @@ const sections = [
         content: (
           <DxcBulletedList>
             <DxcBulletedList.Item>
-              <strong>Avoid ambiguity:</strong> Make sure the button’s purpose is immediately clear. Avoid vague labels
+              <strong>Avoid ambiguity:</strong> Make sure the button's purpose is immediately clear. Avoid vague labels
               like "Click here" or "Go".
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>
@@ -368,7 +368,7 @@ const sections = [
         content: (
           <DxcBulletedList>
             <DxcBulletedList.Item>
-              <strong>User-centric language:</strong> Write from the user’s perspective. For actions that the user
+              <strong>User-centric language:</strong> Write from the user's perspective. For actions that the user
               performs, consider using first-person pronouns (e.g., "My profile").
             </DxcBulletedList.Item>
             <DxcBulletedList.Item>

diff --git a/apps/website/screens/components/tabs/TabsPageLayout.tsx b/apps/website/screens/components/tabs/TabsPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const TabsPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/tabs" },
-    { label: "Usage", path: "/components/tabs/usage" },
-    { label: "Specifications", path: "/components/tabs/specifications" },
+    { label: "Overview", path: "/components/tabs" },
+    { label: "Code", path: "/components/tabs/code" },
   ];
 
   return (
@@ -17,10 +16,11 @@ const TabsPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Tabs" />
           <DxcParagraph>
-            Tabs allow the user to interact across the sections to switch from one set of content to another, making the
-            transition easily from one peer to the other.
+            A tab is a UI component that allows users to switch between different sections of content without leaving
+            the page. Tabs are often used to organize related information into distinct views, making it easier to
+            navigate between them.
           </DxcParagraph>
-          <TabsPageLayout tabs={tabs}></TabsPageLayout>
+          <TabsPageLayout tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}