dxc-technology · Mil4n0r · Jul 2, 2025 · Jun 23, 2025 · Jun 25, 2025 · Jun 25, 2025
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -10,6 +10,8 @@
   "dependencies": {
     "@cloudscape-design/components": "^3.0.706",
     "@dxc-technology/halstack-react": "*",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@radix-ui/react-popover": "^1.0.7",
     "cross-env": "^7.0.3",
     "next": "^14.2.30",
@@ -21,16 +23,14 @@
     "react-live": "^4.1.7",
     "react-markdown": "^8.0.7",
     "sharp": "^0.33.3",
-    "slugify": "^1.6.5",
-    "styled-components": "^5.3.3"
+    "slugify": "^1.6.5"
   },
   "devDependencies": {
     "@dxc-technology/typescript-config": "*",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18",
-    "@types/styled-components": "5.1.29",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
     "typescript": "^5.6.3"

diff --git a/apps/website/pages/_document.tsx b/apps/website/pages/_document.tsx
@@ -1,32 +1,6 @@
-import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document";
-import { ServerStyleSheet } from "styled-components";
+import Document, { Head, Html, Main, NextScript } from "next/document";
 
 export default class MyDocument extends Document {
-  static async getInitialProps(ctx: DocumentContext) {
-    const sheet = new ServerStyleSheet();
-    const originalRenderPage = ctx.renderPage;
-
-    try {
-      ctx.renderPage = () =>
-        originalRenderPage({
-          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
-        });
-
-      const initialProps = await Document.getInitialProps(ctx);
-      return {
-        ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
-      };
-    } finally {
-      sheet.seal();
-    }
-  }
-
   render() {
     return (
       <Html lang="en">

diff --git a/apps/website/screens/common/Code.tsx b/apps/website/screens/common/Code.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const codeStyles = css`
   background-color: var(--color-bg-primary-lighter);

diff --git a/apps/website/screens/common/CodeBlock.tsx b/apps/website/screens/common/CodeBlock.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useState } from "react";
 import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const PreformattedText = styled.pre`
   background-color: var(--color-bg-neutral-lighter);

diff --git a/apps/website/screens/common/Figure.tsx b/apps/website/screens/common/Figure.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { DxcFlex } from "@dxc-technology/halstack-react";
 import { ReactNode } from "react";
 

diff --git a/apps/website/screens/common/HeaderDescriptionCell.tsx b/apps/website/screens/common/HeaderDescriptionCell.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const HeaderDescriptionCell = styled.th`
   min-width: 300px;

diff --git a/apps/website/screens/common/HeadingLink.tsx b/apps/website/screens/common/HeadingLink.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import slugify from "slugify";
 import { DxcBleed, DxcHeading, DxcTooltip } from "@dxc-technology/halstack-react";
 import { responsiveSizes } from "../common/variables";

diff --git a/apps/website/screens/common/MainContent.tsx b/apps/website/screens/common/MainContent.tsx
@@ -1,6 +1,6 @@
 import { useToast } from "@dxc-technology/halstack-react";
 import { ReactNode, useState, useEffect } from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { responsiveSizes } from "./variables";
 
 const MainContainer = styled.div`

diff --git a/apps/website/screens/common/PageLayout.tsx b/apps/website/screens/common/PageLayout.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { responsiveSizes } from "../common/variables";
 
 const PageLayout = styled.div`

diff --git a/apps/website/screens/common/Placeholder.tsx b/apps/website/screens/common/Placeholder.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 /**
  * Styled component used in the examples of the layout components:

diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { DxcGrid, DxcQuickNav } from "@dxc-technology/halstack-react";
 import Section, { SectionType } from "./Section";
 import { responsiveSizes } from "../common/variables";

diff --git a/apps/website/screens/common/example/Example.tsx b/apps/website/screens/common/example/Example.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import theme from "./liveEditorTheme";
 import { DxcButton, DxcFlex, useToast } from "@dxc-technology/halstack-react";

diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx
@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import Image from "@/common/Image";
 import halstackLogo from "@/common/images/halstack_logo.svg";
 import { DxcBadge, DxcFlex } from "@dxc-technology/halstack-react";

diff --git a/apps/website/screens/components/tabs/code/TabsCodePage.tsx b/apps/website/screens/components/tabs/code/TabsCodePage.tsx
@@ -3,14 +3,11 @@ import QuickNavContainer from "@/common/QuickNavContainer";
 import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
 import DocFooter from "@/common/DocFooter";
 import Example from "@/common/example/Example";
-import controlledDeprecated from "./examples-old/controlled";
-import uncontrolledDeprecated from "./examples-old/uncontrolled";
-import iconsDeprecated from "./examples-old/icons";
 import Code, { TableCode } from "@/common/Code";
 import StatusBadge from "@/common/StatusBadge";
-import controlled from "./examples-new/controlled";
-import uncontrolled from "./examples-new/uncontrolled";
-import icons from "./examples-new/icons";
+import controlled from "./examples/controlled";
+import uncontrolled from "./examples/uncontrolled";
+import icons from "./examples/icons";
 
 const sections = [
   {
@@ -29,24 +26,7 @@ const sections = [
           <tr>
             <td>
               <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="deprecated" />
-                activeTabIndex
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>number</TableCode>
-            </td>
-            <td>
-              The index of the active tab. If undefined, the component will be uncontrolled and the active tab will be
-              managed internally by the component.
-            </td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                {/* TODO: Swap experimental for required once old logic is removed */}
-                <StatusBadge status="experimental" />
+                <StatusBadge status="required" />
                 children
               </DxcFlex>
             </td>
@@ -58,19 +38,6 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="deprecated" />
-                defaultActiveTabIndex
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>number</TableCode>
-            </td>
-            <td>Initially active tab, only when it is uncontrolled.</td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>iconPosition</td>
             <td>
@@ -92,38 +59,6 @@ const sections = [
             </td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="deprecated" />
-                onTabClick
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>{"(index: number) => void"}</TableCode>
-            </td>
-            <td>
-              This function will be called when the user clicks on a tab. The index of the clicked tab will be passed as
-              a parameter.
-            </td>
-            <td>-</td>
-          </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="deprecated" />
-                onTabHover
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>{"(index: number) => void"}</TableCode>
-            </td>
-            <td>
-              This function will be called when the user hovers a tab. The index of the hovered tab will be passed as a
-              parameter.
-            </td>
-            <td>-</td>
-          </tr>
           <tr>
             <td>tabIndex</td>
             <td>
@@ -136,49 +71,6 @@ const sections = [
               <TableCode>0</TableCode>
             </td>
           </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="deprecated" />
-                tabs
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>
-                {
-                  "{ label: string, icon: string | (React.ReactNode & React.SVGProps <SVGSVGElement>), isDisabled: boolean, notificationNumber: boolean | number }[]"
-                }
-              </TableCode>
-            </td>
-            <td>
-              An array of objects representing the tabs. Each of them has the following properties:
-              <ul>
-                <li>
-                  <b>label</b>: Tab label.
-                </li>
-                <li>
-                  <b>icon</b>:{" "}
-                  <DxcLink newWindow href="https://fonts.google.com/icons">
-                    Material Symbol
-                  </DxcLink>{" "}
-                  name or SVG element used 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>.
-                </li>
-                <li>
-                  <b>isDisabled</b>: Whether the tab is disabled or not. If the component is uncontrolled and the
-                  selected tab is disabled, the first non-disabled tab from the array will be selected.
-                </li>
-                <li>
-                  <b>notificationNumber</b>: It can have boolean type or number type. 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.
-                </li>
-              </ul>
-            </td>
-            <td>-</td>
-          </tr>
         </tbody>
       </DxcTable>
     ),
@@ -349,23 +241,6 @@ const sections = [
       },
     ],
   },
-  {
-    title: "Examples (deprecated)",
-    subSections: [
-      {
-        title: "Controlled",
-        content: <Example example={controlledDeprecated} defaultIsVisible />,
-      },
-      {
-        title: "Uncontrolled",
-        content: <Example example={uncontrolledDeprecated} defaultIsVisible />,
-      },
-      {
-        title: "Icons and notifications",
-        content: <Example example={iconsDeprecated} defaultIsVisible />,
-      },
-    ],
-  },
 ];
 
 const TabsCodePage = () => (

diff --git a/apps/website/screens/components/tabs/code/examples-old/controlled.ts b/apps/website/screens/components/tabs/code/examples-old/controlled.ts