dxc-technology · GomezIvann · Mar 18, 2025 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git a/apps/website/pages/components/dropdown/code.tsx b/apps/website/pages/components/dropdown/code.tsx
@@ -0,0 +1,19 @@
+import Head from "next/head";
+import type { ReactElement } from "react";
+import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout";
+import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage";
+
+const Code = () => {
+  return (
+    <>
+      <Head>
+        <title>Dropdown Code — Halstack Design System</title>
+      </Head>
+      <DropdownCodePage />
+    </>
+  );
+};
+
+Code.getLayout = (page: ReactElement) => <DropdownPageLayout>{page}</DropdownPageLayout>;
+
+export default Code;
diff --git a/apps/website/pages/components/dropdown/index.tsx b/apps/website/pages/components/dropdown/index.tsx
@@ -1,21 +1,19 @@
 import Head from "next/head";
 import type { ReactElement } from "react";
 import DropdownPageLayout from "screens/components/dropdown/DropdownPageLayout";
-import DropdownCodePage from "screens/components/dropdown/code/DropdownCodePage";
+import DropdownOverviewPage from "screens/components/dropdown/overview/DropdownOverviewPage";
 
 const Index = () => {
   return (
     <>
       <Head>
         <title>Dropdown — Halstack Design System</title>
       </Head>
-      <DropdownCodePage></DropdownCodePage>
+      <DropdownOverviewPage />
     </>
   );
 };
 
-Index.getLayout = function getLayout(page: ReactElement) {
-  return <DropdownPageLayout>{page}</DropdownPageLayout>;
-};
+Index.getLayout = (page: ReactElement) => <DropdownPageLayout>{page}</DropdownPageLayout>;
 
 export default Index;
diff --git a/apps/website/pages/components/dropdown/specifications.tsx b/apps/website/pages/components/dropdown/specifications.tsx
diff --git a/apps/website/pages/components/dropdown/usage.tsx b/apps/website/pages/components/dropdown/usage.tsx
diff --git a/apps/website/screens/components/dropdown/DropdownPageLayout.tsx b/apps/website/screens/components/dropdown/DropdownPageLayout.tsx
@@ -6,9 +6,8 @@ import { ReactNode } from "react";
 
 const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
   const tabs = [
-    { label: "Code", path: "/components/dropdown" },
-    { label: "Usage", path: "/components/dropdown/usage" },
-    { label: "Specifications", path: "/components/dropdown/specifications" },
+    { label: "Overview", path: "/components/dropdown" },
+    { label: "Code", path: "/components/dropdown/code" },
   ];
 
   return (
@@ -17,12 +16,10 @@ const DropdownPageHeading = ({ children }: { children: ReactNode }) => {
         <DxcFlex direction="column" gap="2rem">
           <ComponentHeading name="Dropdown" />
           <DxcParagraph>
-            The use of dropdowns has its advantages but it depends on the screen support. Dropdowns are a standard
-            widget, so the users know how to interact with them. The options available in a dropdown component are
-            static, preventing erroneous data entered by the user since it only shows a range of correct values for that
-            input.
+            The dropdown component is a compact, interactive element that allows users to select from a list of options,
+            reducing clutter in the interface.
           </DxcParagraph>
-          <TabsPageHeading tabs={tabs}></TabsPageHeading>
+          <TabsPageHeading tabs={tabs} />
         </DxcFlex>
       </PageHeading>
       {children}

diff --git a/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx b/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx
@@ -25,49 +25,33 @@ const sections = [
           </thead>
           <tbody>
             <tr>
+              <td>caretHidden</td>
               <td>
-                <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
-                  <StatusBadge status="required" />
-                  options
-                </DxcFlex>
+                <TableCode>boolean</TableCode>
               </td>
+              <td>Whether the arrow next to the label must be displayed or not.</td>
               <td>
-                <TableCode>
-                  {
-                    "{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
-                  }
-                </TableCode>
+                <TableCode>false</TableCode>
               </td>
+            </tr>
+            <tr>
+              <td>disabled</td>
               <td>
-                An array of objects representing the options. Each object has the following properties:
-                <ul>
-                  <li>
-                    <b>label</b>: Option display value.
-                  </li>
-                  <li>
-                    <b>icon</b>:{" "}
-                    <DxcLink newWindow href="https://fonts.google.com/icons">
-                      Material Symbol
-                    </DxcLink>{" "}
-                    name or SVG element as the icon that will be placed next to the option 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>.
-                  </li>
-                  <li>
-                    <b>value</b>: Option inner value.
-                  </li>
-                </ul>
+                <TableCode>boolean</TableCode>
+              </td>
+              <td>If true, the component will be disabled.</td>
+              <td>
+                <TableCode>false</TableCode>
               </td>
-              <td>-</td>
             </tr>
             <tr>
-              <td>optionsIconPosition</td>
+              <td>expandOnHover</td>
               <td>
-                <TableCode>'before' | 'after'</TableCode>
+                <TableCode>boolean</TableCode>
               </td>
-              <td>In case options include icons, whether the icon should appear after or before the label.</td>
+              <td>If true, the options are shown when the dropdown is hovered.</td>
               <td>
-                <TableCode>'before'</TableCode>
+                <TableCode>false</TableCode>
               </td>
             </tr>
             <tr>
@@ -104,63 +88,79 @@ const sections = [
               <td>-</td>
             </tr>
             <tr>
-              <td>caretHidden</td>
+              <td>margin</td>
               <td>
-                <TableCode>boolean</TableCode>
+                <TableCode>
+                  'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
+                </TableCode>
               </td>
-              <td>Whether the arrow next to the label must be displayed or not.</td>
               <td>
-                <TableCode>false</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>
             <tr>
-              <td>disabled</td>
-              <td>
-                <TableCode>boolean</TableCode>
-              </td>
-              <td>If true, the component will be disabled.</td>
               <td>
-                <TableCode>false</TableCode>
+                <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                  <StatusBadge status="required" />
+                  onSelectOption
+                </DxcFlex>
               </td>
-            </tr>
-            <tr>
-              <td>expandOnHover</td>
               <td>
-                <TableCode>boolean</TableCode>
+                <TableCode>{"(value: string) => void"}</TableCode>
               </td>
-              <td>If true, the options are shown when the dropdown is hovered.</td>
               <td>
-                <TableCode>false</TableCode>
+                This function will be called every time the selection changes. The value of the selected option will be
+                passed as a parameter.
               </td>
+              <td>-</td>
             </tr>
             <tr>
               <td>
                 <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
                   <StatusBadge status="required" />
-                  onSelectOption
+                  options
                 </DxcFlex>
               </td>
               <td>
-                <TableCode>{"(value: string) => void"}</TableCode>
+                <TableCode>
+                  {
+                    "{ label?: string; icon?: string | (React.ReactNode & React.SVGProps <SVGSVGElement>); value: string }[]"
+                  }
+                </TableCode>
               </td>
               <td>
-                This function will be called every time the selection changes. The value of the selected option will be
-                passed as a parameter.
+                An array of objects representing the options. Each object has the following properties:
+                <ul>
+                  <li>
+                    <b>label</b>: Option display value.
+                  </li>
+                  <li>
+                    <b>icon</b>:{" "}
+                    <DxcLink newWindow href="https://fonts.google.com/icons">
+                      Material Symbol
+                    </DxcLink>{" "}
+                    name or SVG element as the icon that will be placed next to the option 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>.
+                  </li>
+                  <li>
+                    <b>value</b>: Option inner value.
+                  </li>
+                </ul>
               </td>
               <td>-</td>
             </tr>
             <tr>
-              <td>margin</td>
+              <td>optionsIconPosition</td>
               <td>
-                <TableCode>
-                  'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin
-                </TableCode>
+                <TableCode>'before' | 'after'</TableCode>
               </td>
+              <td>In case options include icons, whether the icon should appear after or before the label.</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.
+                <TableCode>'before'</TableCode>
               </td>
-              <td>-</td>
             </tr>
             <tr>
               <td>size</td>
@@ -223,15 +223,13 @@ const sections = [
   },
 ];
 
-const DropdownCodePage = () => {
-  return (
-    <DxcFlex direction="column" gap="4rem">
-      <QuickNavContainerLayout>
-        <QuickNavContainer sections={sections} startHeadingLevel={2}></QuickNavContainer>
-      </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx" />
-    </DxcFlex>
-  );
-};
+const DropdownCodePage = () => (
+  <DxcFlex direction="column" gap="4rem">
+    <QuickNavContainerLayout>
+      <QuickNavContainer sections={sections} startHeadingLevel={2} />
+    </QuickNavContainerLayout>
+    <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/apps/website/screens/components/dropdown/code/DropdownCodePage.tsx" />
+  </DxcFlex>
+);
 
 export default DropdownCodePage;