From 6e2217108ac93856625c6c6a7a24891a1ae6700a Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Wed, 15 Oct 2025 13:25:56 +0200 Subject: [PATCH 1/3] Scroll Top Draft --- apps/website/pages/_app.tsx | 19 ++++++++++++++++++- apps/website/screens/common/MainContent.tsx | 2 +- packages/lib/src/layout/ApplicationLayout.tsx | 2 +- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index fd97164cc..2c5102037 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -1,4 +1,4 @@ -import { ReactElement, ReactNode, useMemo, useState } from "react"; +import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react"; import type { NextPage } from "next"; import type { AppProps } from "next/app"; import Head from "next/head"; @@ -47,6 +47,23 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false; }; + const router = useRouter(); + + useEffect(() => { + const handleRouteChange = () => { + const el = document.getElementById("MainScroll"); + if (el) el.scrollTo(0, 0); + }; + + router.events.on("routeChangeComplete", handleRouteChange); + router.events.on("hashChangeComplete", handleRouteChange); + + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + router.events.off("hashChangeComplete", handleRouteChange); + }; + }, [router.events]); + return ( diff --git a/apps/website/screens/common/MainContent.tsx b/apps/website/screens/common/MainContent.tsx index 16ec1b5f2..24adc14a9 100644 --- a/apps/website/screens/common/MainContent.tsx +++ b/apps/website/screens/common/MainContent.tsx @@ -65,7 +65,7 @@ const MainContent = ({ children }: { children: ReactNode }) => { } }, [latestRelease, toast]); - return {children}; + return {children}; }; export default MainContent; diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx index 59bceafef..31ecb7081 100644 --- a/packages/lib/src/layout/ApplicationLayout.tsx +++ b/packages/lib/src/layout/ApplicationLayout.tsx @@ -167,7 +167,7 @@ const DxcApplicationLayout = ({ {sidenav} )} - + {findChildType(children, Main)} From 33d238ca1e74d258f90ec7d3ba313cf70627cb01 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Wed, 15 Oct 2025 13:35:26 +0200 Subject: [PATCH 2/3] Normalize tokens page variables --- .../tokens/tables/CoreBorderTokens.tsx | 4 +- .../tokens/tables/CoreColorTokens.tsx | 182 +++++++++--------- .../tokens/tables/CoreDimensionsTokens.tsx | 40 ++-- 3 files changed, 113 insertions(+), 113 deletions(-) diff --git a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx index 74e21cafa..a74df3ac3 100644 --- a/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx +++ b/apps/website/screens/foundations/tokens/tables/CoreBorderTokens.tsx @@ -12,13 +12,13 @@ const BorderTokens = () => ( - line-style-dashed + --line-style-dashed dashed - line-style-solid + --line-style-solid solid diff --git a/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx index 4dbb60210..e1bca0110 100644 --- a/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx +++ b/apps/website/screens/foundations/tokens/tables/CoreColorTokens.tsx @@ -12,13 +12,13 @@ export const AbsoluteTokens = () => ( - color-absolutes-black + --color-absolutes-black #000000 - color-absolutes-white + --color-absolutes-white #ffffff @@ -37,55 +37,55 @@ export const AlphaTokens = () => ( - color-alpha-100-a + --color-alpha-100-a #ebebeb1a - color-alpha-200-a + --color-alpha-200-a #dedede33 - color-alpha-300-a + --color-alpha-300-a #d1d1d14d - color-alpha-400-a + --color-alpha-400-a #b5b5b566 - color-alpha-500-a + --color-alpha-500-a #9a9a9a80 - color-alpha-600-a + --color-alpha-600-a #79797999 - color-alpha-700-a + --color-alpha-700-a #5b5b5bb2 - color-alpha-800-a + --color-alpha-800-a #494949cc - color-alpha-900-a + --color-alpha-900-a #333333e5 @@ -104,61 +104,61 @@ export const PrimaryTokens = () => ( - color-primary-50 + --color-primary-50 #fcfbfe - color-primary-100 + --color-primary-100 #f0e8fa - color-primary-200 + --color-primary-200 #e7d9f6 - color-primary-300 + --color-primary-300 #ddc9f3 - color-primary-400 + --color-primary-400 #c8a7eb - color-primary-500 + --color-primary-500 #b487e4 - color-primary-600 + --color-primary-600 #9363c8 - color-primary-700 + --color-primary-700 #6f4b97 - color-primary-800 + --color-primary-800 #5a3c7a - color-primary-900 + --color-primary-900 #3e2a55 @@ -177,61 +177,61 @@ export const SecondaryTokens = () => ( - color-secondary-50 + --color-secondary-50 #f8fcff - color-secondary-100 + --color-secondary-100 #d9efff - color-secondary-200 + --color-secondary-200 #bce3ff - color-secondary-300 + --color-secondary-300 #a0d7ff - color-secondary-400 + --color-secondary-400 #61bdff - color-secondary-500 + --color-secondary-500 #30a1f1 - color-secondary-600 + --color-secondary-600 #267fbf - color-secondary-700 + --color-secondary-700 #1d6091 - color-secondary-800 + --color-secondary-800 #174e74 - color-secondary-900 + --color-secondary-900 #103651 @@ -250,61 +250,61 @@ export const TertiaryTokens = () => ( - color-tertiary-50 + --color-tertiary-50 #fefbef - color-tertiary-100 + --color-tertiary-100 #fcedae - color-tertiary-200 + --color-tertiary-200 #f9de6e - color-tertiary-300 + --color-tertiary-300 #f5cd2b - color-tertiary-400 + --color-tertiary-400 #d4b226 - color-tertiary-500 + --color-tertiary-500 #b6981f - color-tertiary-600 + --color-tertiary-600 #8f7818 - color-tertiary-700 + --color-tertiary-700 #6c5a12 - color-tertiary-800 + --color-tertiary-800 #57490f - color-tertiary-900 + --color-tertiary-900 #3d3309 @@ -323,61 +323,61 @@ export const NeutralTokens = () => ( - color-neutral-50 + --color-neutral-50 #fbfbfb - color-neutral-100 + --color-neutral-100 #ebebeb - color-neutral-200 + --color-neutral-200 #dedede - color-neutral-300 + --color-neutral-300 #d1d1d1 - color-neutral-400 + --color-neutral-400 #b5b5b5 - color-neutral-500 + --color-neutral-500 #9a9a9a - color-neutral-600 + --color-neutral-600 #797979 - color-neutral-700 + --color-neutral-700 #5b5b5b - color-neutral-800 + --color-neutral-800 #494949 - color-neutral-900 + --color-neutral-900 #333333 @@ -396,61 +396,61 @@ export const Semantic01Tokens = () => ( - color-semantic01-50 + --color-semantic01-50 #f8fcff - color-semantic01-100 + --color-semantic01-100 #d9efff - color-semantic01-200 + --color-semantic01-200 #bce3ff - color-semantic01-300 + --color-semantic01-300 #a0d7ff - color-semantic01-400 + --color-semantic01-400 #61bdff - color-semantic01-500 + --color-semantic01-500 #30a1f1 - color-semantic01-600 + --color-semantic01-600 #267fbf - color-semantic01-700 + --color-semantic01-700 #1d6091 - color-semantic01-800 + --color-semantic01-800 #174e74 - color-semantic01-900 + --color-semantic01-900 #103651 @@ -469,61 +469,61 @@ export const Semantic02Tokens = () => ( - color-semantic02-50 + --color-semantic02-50 #f3fcf5 - color-semantic02-100 + --color-semantic02-100 #d1f5db - color-semantic02-200 + --color-semantic02-200 #acecbe - color-semantic02-300 + --color-semantic02-300 #87e3a0 - color-semantic02-400 + --color-semantic02-400 #53cb75 - color-semantic02-500 + --color-semantic02-500 #47ae64 - color-semantic02-600 + --color-semantic02-600 #39884f - color-semantic02-700 + --color-semantic02-700 #2a673b - color-semantic02-800 + --color-semantic02-800 #225230 - color-semantic02-900 + --color-semantic02-900 #183921 @@ -542,61 +542,61 @@ export const Semantic03Tokens = () => ( - color-semantic03-50 + --color-semantic03-50 #fffbf6 - color-semantic03-100 + --color-semantic03-100 #fde9d2 - color-semantic03-200 + --color-semantic03-200 #fbd9b3 - color-semantic03-300 + --color-semantic03-300 #f9c78f - color-semantic03-400 + --color-semantic03-400 #f5a344 - color-semantic03-500 + --color-semantic03-500 #d58a35 - color-semantic03-600 + --color-semantic03-600 #a76d2b - color-semantic03-700 + --color-semantic03-700 #7f5121 - color-semantic03-800 + --color-semantic03-800 #66421a - color-semantic03-900 + --color-semantic03-900 #3d3309 @@ -615,61 +615,61 @@ export const Semantic04Tokens = () => ( - color-semantic04-50 + --color-semantic04-50 #fff7f6 - color-semantic04-100 + --color-semantic04-100 #ffe6e4 - color-semantic04-200 + --color-semantic04-200 #ffd3d0 - color-semantic04-300 + --color-semantic04-300 #ffc1bd - color-semantic04-400 + --color-semantic04-400 #ff9896 - color-semantic04-500 + --color-semantic04-500 #ff696f - color-semantic04-600 + --color-semantic04-600 #e33248 - color-semantic04-700 + --color-semantic04-700 #a92c37 - color-semantic04-800 + --color-semantic04-800 #87262d - color-semantic04-900 + --color-semantic04-900 #5b1f21 diff --git a/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx b/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx index 999796add..350b7e4ec 100644 --- a/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx +++ b/apps/website/screens/foundations/tokens/tables/CoreDimensionsTokens.tsx @@ -12,121 +12,121 @@ const DimensionsTokens = () => ( - dimensions-0 + --dimensions-0 0px - dimensions-1 + --dimensions-1 1px - dimensions-2 + --dimensions-2 2px - dimensions-4 + --dimensions-4 4px - dimensions-8 + --dimensions-8 8px - dimensions-12 + --dimensions-12 12px - dimensions-16 + --dimensions-16 16px - dimensions-20 + --dimensions-20 20px - dimensions-24 + --dimensions-24 24px - dimensions-28 + --dimensions-28 28px - dimensions-32 + --dimensions-32 32px - dimensions-36 + --dimensions-36 36px - dimensions-40 + --dimensions-40 40px - dimensions-44 + --dimensions-44 44px - dimensions-48 + --dimensions-48 48px - dimensions-56 + --dimensions-56 56px - dimensions-64 + --dimensions-64 64px - dimensions-72 + --dimensions-72 72px - dimensions-80 + --dimensions-80 80px - dimensions-96 + --dimensions-96 96px From 400aec8d35b59dc086f2edf45f3d6b56d707d544 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Wed, 15 Oct 2025 16:28:55 +0200 Subject: [PATCH 3/3] Fix previous commit --- apps/website/pages/_app.tsx | 19 +------------------ apps/website/screens/common/MainContent.tsx | 2 +- packages/lib/src/layout/ApplicationLayout.tsx | 2 +- 3 files changed, 3 insertions(+), 20 deletions(-) diff --git a/apps/website/pages/_app.tsx b/apps/website/pages/_app.tsx index 2c5102037..fd97164cc 100644 --- a/apps/website/pages/_app.tsx +++ b/apps/website/pages/_app.tsx @@ -1,4 +1,4 @@ -import { ReactElement, ReactNode, useEffect, useMemo, useState } from "react"; +import { ReactElement, ReactNode, useMemo, useState } from "react"; import type { NextPage } from "next"; import type { AppProps } from "next/app"; import Head from "next/head"; @@ -47,23 +47,6 @@ export default function App({ Component, pageProps, emotionCache = clientSideEmo return pathToBeMatched ? desiredPaths.includes(pathToBeMatched) : false; }; - const router = useRouter(); - - useEffect(() => { - const handleRouteChange = () => { - const el = document.getElementById("MainScroll"); - if (el) el.scrollTo(0, 0); - }; - - router.events.on("routeChangeComplete", handleRouteChange); - router.events.on("hashChangeComplete", handleRouteChange); - - return () => { - router.events.off("routeChangeComplete", handleRouteChange); - router.events.off("hashChangeComplete", handleRouteChange); - }; - }, [router.events]); - return ( diff --git a/apps/website/screens/common/MainContent.tsx b/apps/website/screens/common/MainContent.tsx index 24adc14a9..16ec1b5f2 100644 --- a/apps/website/screens/common/MainContent.tsx +++ b/apps/website/screens/common/MainContent.tsx @@ -65,7 +65,7 @@ const MainContent = ({ children }: { children: ReactNode }) => { } }, [latestRelease, toast]); - return {children}; + return {children}; }; export default MainContent; diff --git a/packages/lib/src/layout/ApplicationLayout.tsx b/packages/lib/src/layout/ApplicationLayout.tsx index 31ecb7081..59bceafef 100644 --- a/packages/lib/src/layout/ApplicationLayout.tsx +++ b/packages/lib/src/layout/ApplicationLayout.tsx @@ -167,7 +167,7 @@ const DxcApplicationLayout = ({ {sidenav} )} - + {findChildType(children, Main)}