Merge pull request #1529 from dxc-technology/rarrojolopez-fixes-site

jsuarezgonz · web-flow · commit 735a07b2dde1 · 2023-03-21T13:28:58.000+01:00
Fix broken links and fixes documentation
diff --git a/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx b/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx
@@ -168,7 +168,7 @@ const sections = [
   },
 ];
 
-const ButtonCodePage = () => {
+const ApplicationLayoutCodePage = () => {
   return (
     <DxcFlex direction="column" gap="4rem">
       <QuickNavContainerLayout>
@@ -177,9 +177,9 @@ const ButtonCodePage = () => {
           startHeadingLevel={2}
         ></QuickNavContainer>
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/button/Code/ButtonCodePage.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/application-layout/code/ApplicationLayoutCodePage.tsx" />
     </DxcFlex>
   );
 };
 
-export default ButtonCodePage;
+export default ApplicationLayoutCodePage;
diff --git a/website/screens/components/date-input/specs/DateInputSpecsPage.tsx b/website/screens/components/date-input/specs/DateInputSpecsPage.tsx
@@ -30,11 +30,11 @@ const sections = [
           The date input <Code>color</Code>, <Code>typography</Code>,{" "}
           <Code>border</Code>, <Code>spacing</Code>, <Code>width</Code> and{" "}
           <Code>margin</Code> specifications are inherited from the text input,
-          for reference{" "}
+          for reference check{" "}
           <Link href="/components/text-input/specifications" passHref>
-            <DxcLink>check the text input component documentation</DxcLink>
-          </Link>
-          .
+            <DxcLink>text input</DxcLink>
+          </Link>{" "}
+          documentation .
         </DxcParagraph>
         <DxcParagraph>
           The date input doesn&#39;t have the following text input elements or
diff --git a/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx b/website/screens/components/dropdown/specs/DropdownSpecsPage.tsx
@@ -32,7 +32,7 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              States: <strong>Enabled</strong>, <strong>hover</strong>,{" "}
+              States: <strong>enabled</strong>, <strong>hover</strong>,{" "}
               <strong>focus</strong>, <strong>active</strong> and{" "}
               <strong>disabled</strong>.
             </DxcParagraph>
diff --git a/website/screens/components/flex/FlexPageLayout.tsx b/website/screens/components/flex/FlexPageLayout.tsx
@@ -17,7 +17,10 @@ const FlexPageHeading = ({ children }: { children: React.ReactNode }) => {
           <ComponentHeading name="Flex" status="Ready" />
           <DxcParagraph>
             Flex allows users to build{" "}
-            <DxcLink href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">
+            <DxcLink
+              newWindow
+              href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
+            >
               Flexible Box Module
             </DxcLink>{" "}
             based layouts. It serves as a technical component that abstracts
diff --git a/website/screens/components/heading/usage/HeadingUsagePage.tsx b/website/screens/components/heading/usage/HeadingUsagePage.tsx
@@ -16,9 +16,9 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          Navigating through the <Code>Headings-H1</Code> and
+          Navigating through the <Code>Headings-H1</Code> and{" "}
           <Code>Headings-H3</Code> give a user an overview of a page and how its
-          content is structured. The <Code>Headings-H4</Code> and
+          content is structured. The <Code>Headings-H4</Code> and{" "}
           <Code>Headings-H5</Code> elements provide a quick understanding of the
           details in each section.
         </DxcParagraph>
diff --git a/website/screens/components/link/code/LinkCodePage.tsx b/website/screens/components/link/code/LinkCodePage.tsx
@@ -122,9 +122,9 @@ const sections = [
             <DxcParagraph>
               So we decided to make our link component just an styled HTML
               anchor element which allows it to be used in any React based
-              router. For each API is different so here are some examples for{" "}
+              router. For each API is different, so here are some examples for{" "}
               <DxcLink
-                href="https://reactrouter.com/docs/en/v6/hooks/use-href"
+                href="https://reactrouter.com/en/main/hooks/use-href"
                 newWindow
               >
                 React Router
@@ -155,7 +155,7 @@ const sections = [
                   >
                     React Router
                   </DxcLink>{" "}
-                  using the prop <Code>component</Code>. Note that this Prop is
+                  using the prop <Code>component</Code>. Note that this prop is
                   not available in v6.
                 </DxcParagraph>
                 <Example example={routerLink} defaultIsVisible />
@@ -177,7 +177,7 @@ const sections = [
                   the prop <Code>component</Code> is no longer available so it
                   is necessary to use hooks provided by{" "}
                   <DxcLink
-                    href="https://reactrouter.com/docs/en/v6/hooks/use-href"
+                    href="https://reactrouter.com/en/main/hooks/use-href"
                     newWindow
                   >
                     React Router v6
diff --git a/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx b/website/screens/components/nav-tabs/code/NavTabsCodePage.tsx
@@ -190,7 +190,7 @@ const sections = [
                   the prop <Code>component</Code> is no longer available so it
                   is necessary to use hooks provided by{" "}
                   <DxcLink
-                    href="https://reactrouter.com/en/6.8.1/hooks/use-href"
+                    href="https://reactrouter.com/en/main/hooks/use-href"
                     newWindow
                   >
                     React Router v6
diff --git a/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx b/website/screens/components/number-input/specs/NumberInputSpecsPage.tsx
@@ -31,11 +31,11 @@ const sections = [
           The number input <Code>color</Code>, <Code>typography</Code>,{" "}
           <Code>border</Code>, <Code>spacing</Code>, <Code>width</Code> and{" "}
           <Code>margin</Code> specifications are inherited from the text input,
-          for reference{" "}
+          for reference check the{" "}
           <Link href="/components/text-input/specifications" passHref>
-            <DxcLink>check the text input component documentation</DxcLink>
-          </Link>
-          .
+            <DxcLink>text input</DxcLink>
+          </Link>{" "}
+          component documentation.
         </DxcParagraph>
       </>
     ),
diff --git a/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx b/website/screens/components/password-input/specs/PasswordInputSpecsPage.tsx
@@ -31,11 +31,11 @@ const sections = [
           The password input <Code>color</Code>, <Code>typography</Code>,{" "}
           <Code>border</Code>, <Code>spacing</Code>, <Code>width</Code> and{" "}
           <Code>margin</Code> specifications are inherited from the text input,
-          for reference{" "}
+          for reference check the{" "}
           <Link href="/components/text-input/specifications" passHref>
-            <DxcLink>check the text input component documentation</DxcLink>
-          </Link>
-          .
+            <DxcLink>text input</DxcLink>
+          </Link>{" "}
+          component documentation.
         </DxcParagraph>
         <DxcParagraph>
           The password input doesn&#39;t have the following text input elements,
diff --git a/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx b/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx
@@ -35,7 +35,7 @@ const ResultsetTableUsagePage = () => {
           startHeadingLevel={2}
         ></QuickNavContainer>
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/accordion/usage/AccordionUsagePage.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/resultset-table/usage/ResultsetTableUsagePage.tsx" />
     </DxcFlex>
   );
 };
diff --git a/website/screens/components/select/specs/SelectSpecsPage.tsx b/website/screens/components/select/specs/SelectSpecsPage.tsx
@@ -935,9 +935,10 @@ const sections = [
         content: (
           <>
             <DxcParagraph>
-              The select component <strong>input</strong> share the{" "}
+              The select component <strong>input</strong> share the same spacing
+              tokens as the{" "}
               <Link href="/components/text-input/specifications" passHref>
-                <DxcLink>same spacing tokens of the text input</DxcLink>
+                <DxcLink>text input</DxcLink>
               </Link>
               .
             </DxcParagraph>
diff --git a/website/screens/components/tabs/code/TabsCodePage.tsx b/website/screens/components/tabs/code/TabsCodePage.tsx
@@ -140,7 +140,7 @@ const TabsUsagePage = () => {
           startHeadingLevel={2}
         ></QuickNavContainer>
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/tabs/usage/TabsUsagePage.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/components/tabs/code/TabsCodePage.tsx" />
     </DxcFlex>
   );
 };
diff --git a/website/screens/components/tag/usage/TagUsagePage.tsx b/website/screens/components/tag/usage/TagUsagePage.tsx
@@ -41,7 +41,7 @@ const sections = [
             The icon can be placed before or after.
           </DxcBulletedList.Item>
           <DxcBulletedList.Item>
-            The icon background color can be defined with the
+            The icon background color can be defined with the{" "}
             <Code>iconBgColor</Code> component property.
           </DxcBulletedList.Item>
         </DxcBulletedList>
diff --git a/website/screens/components/textarea/specs/TextareaSpecsPage.tsx b/website/screens/components/textarea/specs/TextareaSpecsPage.tsx
@@ -27,11 +27,12 @@ const sections = [
         <DxcParagraph>
           The textarea <Code>color</Code>, <Code>typography</Code>,{" "}
           <Code>border</Code>, <Code>width</Code> and <Code>margin</Code>{" "}
-          specifications are inherited from the text input, for reference{" "}
+          specifications are inherited from the text input, for reference check
+          the{" "}
           <Link href="/components/text-input" passHref>
-            <DxcLink>check the text input component documentation</DxcLink>
-          </Link>
-          .
+            <DxcLink>text input</DxcLink>
+          </Link>{" "}
+          component documentation.
         </DxcParagraph>
         <DxcParagraph>
           The textarea doesn&#39;t have the following text-input elements,
diff --git a/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx b/website/screens/components/toggle-group/specs/ToggleGroupSpecsPage.tsx
@@ -28,8 +28,8 @@ const sections = [
     content: (
       <>
         <DxcParagraph>
-          Different states are defined in the life cycle of the component:
-          <strong>Unselected enabled</strong>, <strong>unselected hover</strong>
+          Different states are defined in the life cycle of the component:{" "}
+          <strong>unselected enabled</strong>, <strong>unselected hover</strong>
           , <strong>unselected focus</strong>,{" "}
           <strong>unselected active</strong>,{" "}
           <strong>unselected disabled</strong>,{" "}
diff --git a/website/screens/principles/color/code/ColorCodePage.tsx b/website/screens/principles/color/code/ColorCodePage.tsx
@@ -44,9 +44,8 @@ const sections = [
               In this example we see how the same <Code>DxcTextInput</Code>{" "}
               component is shown in a different way, in the first case it is
               shown in its onDark version, since we have wrapped the container
-              with the
-              <Code>BackgroundColorProvider</Code> as we explained in the
-              previous paragraph.
+              with the <Code>BackgroundColorProvider</Code> as we explained in
+              the previous paragraph.
             </DxcParagraph>
             <Example example={customUse} defaultIsVisible />
           </>
diff --git a/website/screens/principles/typography/usage/TypographyUsagePage.tsx b/website/screens/principles/typography/usage/TypographyUsagePage.tsx
@@ -37,18 +37,17 @@ const sections = [
         </DxcParagraph>
         <DxcParagraph>
           A first, lower level layer in which we have the{" "}
-          <Code>DxcTypography</Code>
-          component, with which any typographic combination contemplated within
-          the values defined in the tables shown in the 'Code' tab can be
-          created. It is important to note that this lowest level component
-          should only be considered as an option once the rest of the
-          components, with more specific context for certain use cases, have
-          been discarded.
+          <Code>DxcTypography</Code> component, with which any typographic
+          combination contemplated within the values defined in the tables shown
+          in the 'Code' tab can be created. It is important to note that this
+          lowest level component should only be considered as an option once the
+          rest of the components, with more specific context for certain use
+          cases, have been discarded.
         </DxcParagraph>
         <DxcParagraph>
           Above this first layer we have a second layer that provides a more
-          specific context in which we have three components:
-          <Code>DxcParagraph</Code>,<Code>DxcBulletedList</Code> and{" "}
+          specific context in which we have three components:{" "}
+          <Code>DxcParagraph</Code>, <Code>DxcBulletedList</Code> and{" "}
           <Code>DxcHeading</Code>; these components, that are more focused on
           covering a specific use case in turn, use the first level component
           DxcTypography.
diff --git a/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
@@ -185,7 +185,7 @@ const HalstackProvider = () => {
           startHeadingLevel={2}
         ></QuickNavContainer>
       </QuickNavContainerLayout>
-      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/utilities/halstackProvider/HalstackProvider.tsx" />
+      <DocFooter githubLink="https://github.com/dxc-technology/halstack-react/blob/master/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx" />
     </DxcFlex>
   );
 };

Original file line number	Diff line number	Diff line change
`@@ -190,7 +190,7 @@ const sections = [`
`190`	`190`	`the prop <Code>component</Code> is no longer available so it`
`191`	`191`	`is necessary to use hooks provided by{" "}`
`192`	`192`	`<DxcLink`
`193`		`- href="https://reactrouter.com/en/6.8.1/hooks/use-href"`
	`193`	`+ href="https://reactrouter.com/en/main/hooks/use-href"`
`194`	`194`	`newWindow`
`195`	`195`	`>`
`196`	`196`	`React Router v6`