Merge pull request #1522 from dxc-technology/gomezivann-links-fixed

raquelarrojo · web-flow · commit b30fc425ea90 · 2023-03-20T09:00:21.000+01:00
Update links to Halstack Provider in the Themes page
diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx
@@ -63,6 +63,16 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
     setFilter(value);
   };
 
+  const matchPaths = (linkPath: string) => {
+    const pathToBeMatched = currentPath.split("#")[0].slice(0, -1);
+    const desiredPaths = [
+      linkPath,
+      `${linkPath}/specifications`,
+      `${linkPath}/usage`,
+    ];
+    return desiredPaths.includes(pathToBeMatched);
+  };
+
   return (
     <>
       <Head>
@@ -98,12 +108,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
                           {links.map(({ label, path }) => (
                             <Link key={`${label}-${path}`} href={path} passHref>
                               <DxcApplicationLayout.SideNav.Link
-                                selected={
-                                  currentPath.slice(0, -1) === path ||
-                                  currentPath.slice(0, -1) ===
-                                    path + "/specifications" ||
-                                  currentPath.slice(0, -1) === path + "/usage"
-                                }
+                                selected={matchPaths(path)}
                               >
                                 {label}
                               </DxcApplicationLayout.SideNav.Link>
diff --git a/website/screens/common/TabsPageLayout.tsx b/website/screens/common/TabsPageLayout.tsx
@@ -22,7 +22,7 @@ const TabsPageLayout = ({ tabs }: TabsPageLayoutProps) => {
           </Link>
         ))}
       </DxcNavTabs>
-      <Space></Space>
+      <Space />
     </TabsContainer>
   );
 };
@@ -34,7 +34,7 @@ const TabsContainer = styled.div`
 `;
 
 const Space = styled.div`
-  border-bottom: 2px solid #0000001a;
+  border-bottom: 2px solid #bfbfbf;
   width: 100%;
 `;
 
diff --git a/website/screens/principles/localization/LocalizationPage.tsx b/website/screens/principles/localization/LocalizationPage.tsx
@@ -54,7 +54,7 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              FormFields labels are common to several components of the design
+              These labels are common to several components of the design
               system.
             </DxcParagraph>
             <DxcTable>
diff --git a/website/screens/principles/themes/ThemesPage.tsx b/website/screens/principles/themes/ThemesPage.tsx
@@ -1427,7 +1427,7 @@ const sections = [
                     <DxcParagraph>
                       More examples can be found in the{" "}
                       <Link
-                        href="/utilities/halstackProvider/#opinionated-theme"
+                        href="/utilities/halstack-provider/#opinionated-theme"
                         passHref
                       >
                         <DxcLink>Halstack Provider section</DxcLink>
@@ -1472,7 +1472,7 @@ const sections = [
             </JsonContainer>
             <DxcParagraph>
               More examples can be found in the{" "}
-              <Link href="/utilities/halstackProvider/#advanced-theme" passHref>
+              <Link href="/utilities/halstack-provider/#advanced-theme" passHref>
                 <DxcLink>Halstack Provider section</DxcLink>
               </Link>
               .
diff --git a/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
@@ -61,14 +61,14 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          As explained in the{" "}
+          As explained on the{" "}
           <Link
-            href="/principles/themes/#opinionated-theme-inputs-list"
+            href="/principles/themes/#different-theming-strategies-opinionated-theme"
             passHref
           >
-            <DxcLink>Themes section</DxcLink>
-          </Link>
-          , you can apply the opinionated theme strategy to customize the
+            <DxcLink>Themes</DxcLink>
+          </Link>{" "}
+          page, you can apply the opinionated theming strategy to customize the
           components.
         </DxcParagraph>
 
@@ -98,14 +98,16 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          The advanced strategy is the option to choose when further
-          customization is required, as explained in the{" "}
+          Advanced theming is the option to choose when further customization is
+          required. To find out which use cases are valid for this strategy, you
+          can refer to the{" "}
           <Link
-            href="/principles/themes/#opinionated-theme-inputs-list"
+            href="/principles/themes/#different-theming-strategies-advanced-theme"
             passHref
           >
-            <DxcLink>Themes section.</DxcLink>
-          </Link>
+            <DxcLink>Themes</DxcLink>
+          </Link>{" "}
+          page.
         </DxcParagraph>
         <DxcAlert type="info" size="fillParent">
           Remember that you can use the{" "}
