dxc-technology · Jialecl · Mar 14, 2025 · Feb 5, 2025 · Feb 18, 2025 · Feb 18, 2025
diff --git a/apps/website/pages/components/chip/code.tsx b/apps/website/pages/components/chip/code.tsx
@@ -0,0 +1,19 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import ChipCodePage from "screens/components/chip/code/ChipCodePage";
+import ChipPageLayout from "screens/components/chip/ChipPageLayout";
+
+const Code = () => {
+  return (
+    <>
+      <Head>
+        <title>Chip Code — Halstack Design System</title>
+      </Head>
+      <ChipCodePage />
+    </>
+  );
+};
+
+Code.getLayout = (page: ReactElement) => <ChipPageLayout>{page}</ChipPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/chip/index.tsx b/apps/website/pages/components/chip/index.tsx
@@ -1,6 +1,6 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
-import ChipCodePage from "screens/components/chip/code/ChipCodePage";
+import ChipOverviewPage from "screens/components/chip/overview/ChipOverviewPage";
 import ChipPageLayout from "screens/components/chip/ChipPageLayout";
 
 const Index = () => {
@@ -9,13 +9,11 @@ const Index = () => {
       <Head>
         <title>Chip — Halstack Design System</title>
       </Head>
-      <ChipCodePage></ChipCodePage>
+      <ChipOverviewPage />
     </>
   );
 };
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <ChipPageLayout>{page}</ChipPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <ChipPageLayout>{page}</ChipPageLayout>;
 
 export default Index;
diff --git a/apps/website/pages/components/chip/specifications.tsx b/apps/website/pages/components/chip/specifications.tsx
diff --git a/apps/website/pages/components/chip/usage.tsx b/apps/website/pages/components/chip/usage.tsx
diff --git a/apps/website/screens/components/chip/ChipPageLayout.tsx b/apps/website/screens/components/chip/ChipPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const ChipPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/chip" },
-    { label: "Usage", path: "/components/chip/usage" },
-    { label: "Specifications", path: "/components/chip/specifications" },
+    { label: "Overview", path: "/components/chip" },
+    { label: "Code", path: "/components/chip/code" },
   ];
 
   return (
@@ -17,9 +16,10 @@ const ChipPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Chip" />
           <DxcParagraph>
-            Chips are elements that represent status, complementary information, or association between elements.
+            A chip is a compact, interactive UI element used to represent small pieces of information, actions, or
+            selections.
           </DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}

diff --git a/apps/website/screens/components/chip/code/ChipCodePage.tsx b/apps/website/screens/components/chip/code/ChipCodePage.tsx
@@ -23,40 +23,31 @@ const sections = [
         </thead>
         <tbody>
           <tr>
-            <td>label</td>
+            <td>disabled</td>
             <td>
-              <TableCode>string</TableCode>
+              <TableCode>boolean</TableCode>
             </td>
-            <td>Text to be placed on the chip.</td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>prefixIcon</td>
+            <td>If true, the component will be disabled.</td>
             <td>
-              <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
+              <TableCode>false</TableCode>
             </td>
+          </tr>
+          <tr>
+            <td>label</td>
             <td>
-              <DxcLink newWindow href="https://fonts.google.com/icons">
-                Material Symbol
-              </DxcLink>{" "}
-              name or SVG element as the icon that will be placed before the chip label. 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>.
+              <TableCode>string</TableCode>
             </td>
+            <td>Text to be placed on the chip.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>suffixIcon</td>
+            <td>margin</td>
             <td>
-              <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
+              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
             </td>
             <td>
-              <DxcLink newWindow href="https://fonts.google.com/icons">
-                Material Symbol
-              </DxcLink>{" "}
-              name or SVG element as the icon that will be placed after the chip label. 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>.
+              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+              'right' properties in order to specify different margin sizes.
             </td>
             <td>-</td>
           </tr>
@@ -83,23 +74,32 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>disabled</td>
+            <td>prefixIcon</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
             </td>
-            <td>If true, the component will be disabled.</td>
             <td>
-              <TableCode>false</TableCode>
+              <DxcLink newWindow href="https://fonts.google.com/icons">
+                Material Symbol
+              </DxcLink>{" "}
+              name or SVG element as the icon that will be placed before the chip label. 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>margin</td>
+            <td>suffixIcon</td>
             <td>
-              <TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
+              <TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
             </td>
             <td>
-              Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
-              'right' properties in order to specify different margin sizes.
+              <DxcLink newWindow href="https://fonts.google.com/icons">
+                Material Symbol
+              </DxcLink>{" "}
+              name or SVG element as the icon that will be placed after the chip label. 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>
@@ -143,7 +143,7 @@ const ChipCodePage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
       <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
+        <QuickNavContainer sections={sections} startHeadingLevel={2} />
       </QuickNavContainerLayout>
       <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/chip/code/ChipCodePage.tsx" />
     </DxcFlex>