docs(PPDSC-2850): add next links to homepage (#679)

* fix(PPDSC-2850): add next links * fix(PPDSC-2850): remove next link from featureCard * fix(PPDSC-2850): test * fix(PPDSC-2850): test * fix(PPDSC-2850): brokenlinks * fix(PPDSC-2850): broken links * fix(PPDSC-2850): use link in site
newscorp-ghfb · Mar 9, 2023 · 96d9764 · 96d9764
1 parent d433b0b
commit 96d9764
Show file tree

Hide file tree

Showing 20 changed files with 240 additions and 247 deletions.
diff --git a/site/components/__tests__/__snapshots__/site-header.test.tsx.snap b/site/components/__tests__/__snapshots__/site-header.test.tsx.snap
diff --git a/site/components/feature-card/feature-card.tsx b/site/components/feature-card/feature-card.tsx
@@ -7,7 +7,6 @@ import {
   TextBlock,
   useTheme,
   toNewsKitIcon,
-  LinkStandalone,
   Flag,
 } from 'newskit';
 import {ChevronRight as FilledChevronRight} from '@emotion-icons/material/ChevronRight';
@@ -24,6 +23,7 @@ import {
   StyledFeatureCardVerticalMedia,
   StyledCardLink,
 } from './styled';
+import {Link} from '../link';
 
 const IconFilledChevronRight = toNewsKitIcon(FilledChevronRight);
 
@@ -62,13 +62,14 @@ const ArrowLink: React.FC<ArrowLinkProps> = ({
   return (
     <div data-testid={dataTestId}>
       {!href && (
-        <LinkStandalone
+        <Link
+          type="standalone"
           href={buttonHref as string}
           overrides={combinedOverrides}
         >
           {label}
           {icon || <IconFilledChevronRight overrides={{size: 'iconSize020'}} />}
-        </LinkStandalone>
+        </Link>
       )}
       {href && (
         <TextBlock

diff --git a/site/components/homepage/explore/explore.tsx b/site/components/homepage/explore/explore.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {Headline, TextBlock, GridLayout, Card} from 'newskit';
+import NextLink from 'next/link';
 import {ContentPrimary} from '../../content-structure';
 import {Illustration} from '../../illustrations/illustration-loader';
 
@@ -49,31 +50,32 @@ export const Explore = () => (
       columnGap="space050"
     >
       {cardsContent.map(({media, title, href, description}) => (
-        <Card
-          key={href}
-          href={href}
-          media={() => media}
-          overrides={{
-            stylePreset: 'homepageCard',
-            marginBlockEnd: {xs: 'space080', md: 'space000'},
-          }}
-        >
-          <Headline
+        <NextLink legacyBehavior href={href} key={href} passHref>
+          <Card
+            href={href}
+            media={() => media}
             overrides={{
-              marginBlockEnd: 'space040',
-              typographyPreset: 'editorialHeadline020',
-              heading: {stylePreset: 'exploreCardLink'},
+              stylePreset: 'homepageCard',
+              marginBlockEnd: {xs: 'space080', md: 'space000'},
             }}
           >
-            {title}
-          </Headline>
-          <TextBlock
-            marginBlockEnd="space040"
-            typographyPreset="editorialParagraph020"
-          >
-            {description}
-          </TextBlock>
-        </Card>
+            <Headline
+              overrides={{
+                marginBlockEnd: 'space040',
+                typographyPreset: 'editorialHeadline020',
+                heading: {stylePreset: 'exploreCardLink'},
+              }}
+            >
+              {title}
+            </Headline>
+            <TextBlock
+              marginBlockEnd="space040"
+              typographyPreset="editorialParagraph020"
+            >
+              {description}
+            </TextBlock>
+          </Card>
+        </NextLink>
       ))}
     </GridLayout>
   </ContentPrimary>

diff --git a/site/components/homepage/hero/hero.tsx b/site/components/homepage/hero/hero.tsx
@@ -77,38 +77,50 @@ export const Hero = ({
             }}
           >
             <GridLayoutItem>
-              <NextLink
-                legacyBehavior
-                href="/getting-started/design/design-overview"
-                passHref
-              >
-                <>
-                  <Visible xs sm>
+              <>
+                <Visible xs sm>
+                  <NextLink
+                    legacyBehavior
+                    href={DESIGN_BUTTON_PROPS.href}
+                    passHref
+                  >
                     <Button {...DESIGN_BUTTON_PROPS}>Designing</Button>
-                  </Visible>
-                  <Visible md lg xl>
+                  </NextLink>
+                </Visible>
+                <Visible md lg xl>
+                  <NextLink
+                    legacyBehavior
+                    href={DESIGN_BUTTON_PROPS.href}
+                    passHref
+                  >
                     <Button {...DESIGN_BUTTON_PROPS}>Start designing</Button>
-                  </Visible>
-                </>
-              </NextLink>
+                  </NextLink>
+                </Visible>
+              </>
             </GridLayoutItem>
             <GridLayoutItem>
-              <NextLink
-                legacyBehavior
-                href="/getting-started/code/engineering-quickstart"
-                passHref
-              >
-                <>
-                  <Visible xs sm>
+              <>
+                <Visible xs sm>
+                  <NextLink
+                    legacyBehavior
+                    href={DEVELOPING_BUTTON_PROPS.href}
+                    passHref
+                  >
                     <Button {...DEVELOPING_BUTTON_PROPS}>Developing</Button>
-                  </Visible>
-                  <Visible md lg xl>
+                  </NextLink>
+                </Visible>
+                <Visible md lg xl>
+                  <NextLink
+                    legacyBehavior
+                    href={DEVELOPING_BUTTON_PROPS.href}
+                    passHref
+                  >
                     <Button {...DEVELOPING_BUTTON_PROPS}>
                       Start developing
                     </Button>
-                  </Visible>
-                </>
-              </NextLink>
+                  </NextLink>
+                </Visible>
+              </>
             </GridLayoutItem>
           </GridLayout>
         </GridLayoutItem>

diff --git a/site/components/search/__tests__/__snapshots__/new-start-screen.test.ts.snap b/site/components/search/__tests__/__snapshots__/new-start-screen.test.ts.snap
@@ -314,7 +314,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/getting-started/design/design-overview/"
+                href="/getting-started/design/design-overview"
               >
                 <span
                   class="emotion-7"
@@ -356,7 +356,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/getting-started/code/engineering-overview/"
+                href="/getting-started/code/engineering-overview"
               >
                 <span
                   class="emotion-7"
@@ -398,7 +398,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/getting-started/code/instrumentation/"
+                href="/getting-started/code/instrumentation"
               >
                 <span
                   class="emotion-7"
@@ -453,7 +453,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/components/overview/"
+                href="/components/overview"
               >
                 <span
                   class="emotion-7"
@@ -495,7 +495,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/overview/"
+                href="/theme/overview"
               >
                 <span
                   class="emotion-7"
@@ -537,7 +537,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/components/button/"
+                href="/components/button"
               >
                 <span
                   class="emotion-7"
@@ -592,7 +592,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/presets/style-presets/"
+                href="/theme/presets/style-presets"
               >
                 <span
                   class="emotion-7"
@@ -634,7 +634,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/presets/transition-presets/"
+                href="/theme/presets/transition-presets"
               >
                 <span
                   class="emotion-7"
@@ -676,7 +676,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/presets/typography-presets/"
+                href="/theme/presets/typography-presets"
               >
                 <span
                   class="emotion-7"
@@ -731,7 +731,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/foundation/design-tokens/"
+                href="/theme/foundation/design-tokens"
               >
                 <span
                   class="emotion-7"
@@ -773,7 +773,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/foundation/colours/"
+                href="/theme/foundation/colours"
               >
                 <span
                   class="emotion-7"
@@ -815,7 +815,7 @@ exports[`NewStartScreen renders correctly 1`] = `
             >
               <a
                 class="emotion-6"
-                href="/theme/foundation/fonts/"
+                href="/theme/foundation/fonts"
               >
                 <span
                   class="emotion-7"

diff --git a/site/components/search/__tests__/__snapshots__/search.test.ts.snap b/site/components/search/__tests__/__snapshots__/search.test.ts.snap
@@ -321,7 +321,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/getting-started/design/design-overview/"
+                  href="/getting-started/design/design-overview"
                 >
                   <span
                     class="emotion-8"
@@ -363,7 +363,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/getting-started/code/engineering-overview/"
+                  href="/getting-started/code/engineering-overview"
                 >
                   <span
                     class="emotion-8"
@@ -405,7 +405,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/getting-started/code/instrumentation/"
+                  href="/getting-started/code/instrumentation"
                 >
                   <span
                     class="emotion-8"
@@ -460,7 +460,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/components/overview/"
+                  href="/components/overview"
                 >
                   <span
                     class="emotion-8"
@@ -502,7 +502,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/overview/"
+                  href="/theme/overview"
                 >
                   <span
                     class="emotion-8"
@@ -544,7 +544,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/components/button/"
+                  href="/components/button"
                 >
                   <span
                     class="emotion-8"
@@ -599,7 +599,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/presets/style-presets/"
+                  href="/theme/presets/style-presets"
                 >
                   <span
                     class="emotion-8"
@@ -641,7 +641,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/presets/transition-presets/"
+                  href="/theme/presets/transition-presets"
                 >
                   <span
                     class="emotion-8"
@@ -683,7 +683,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/presets/typography-presets/"
+                  href="/theme/presets/typography-presets"
                 >
                   <span
                     class="emotion-8"
@@ -738,7 +738,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/foundation/design-tokens/"
+                  href="/theme/foundation/design-tokens"
                 >
                   <span
                     class="emotion-8"
@@ -780,7 +780,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/foundation/colours/"
+                  href="/theme/foundation/colours"
                 >
                   <span
                     class="emotion-8"
@@ -822,7 +822,7 @@ exports[`Search renders correctly 1`] = `
               >
                 <a
                   class="emotion-7"
-                  href="/theme/foundation/fonts/"
+                  href="/theme/foundation/fonts"
                 >
                   <span
                     class="emotion-8"