No more Link component

duckduckgo · Aug 29, 2024 · f6c032f · f6c032f
1 parent d369df0
commit f6c032f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 27 deletions.
diff --git a/packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx b/packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx
@@ -1,25 +1,25 @@
 import { h } from 'preact'
 import { useRef, useEffect } from 'preact/hooks'
 import { useTypedTranslation } from '../types'
-import { Text, Link } from '../../../../shared/components/Text/Text'
+import { Text } from '../../../../shared/components/Text/Text'
 import { useMessaging } from '../providers/MessagingProvider'
 import { useAdvancedInfoHeading, useAdvancedInfoContent } from '../hooks/ErrorStrings'
 
 import styles from './AdvancedInfo.module.css'
 
 export function VisitSiteLink() {
-    /** @type {import("preact/hooks").MutableRef<HTMLSpanElement|null>} */
-    const spanRef = useRef(null)
+    /** @type {import("preact/hooks").MutableRef<HTMLAnchorElement|null>} */
+    const linkRef = useRef(null)
     const { messaging } = useMessaging()
     const { t } = useTypedTranslation()
 
     useEffect(() => {
-        if (!spanRef.current) return;
-        const span =  spanRef.current;
+        if (!linkRef.current) return;
+        const link =  linkRef.current;
         const controller = new AbortController();
 
         window.addEventListener('advanced-info-animation-end', () => {
-            span.scrollIntoView({ behavior: 'smooth' })
+            link.scrollIntoView({ behavior: 'smooth' })
         }, { signal: controller.signal })
 
         return () => {
@@ -28,9 +28,9 @@ export function VisitSiteLink() {
     }, [])
 
     return (
-        <Link variant="body" className={styles.visitSite} onClick={() => messaging?.visitSite()}>
-            <span ref={spanRef}>{t('visitSiteButton')}</span>
-        </Link>
+        <a className={styles.visitSite} onClick={() => messaging?.visitSite()} ref={linkRef}>
+            {t('visitSiteButton')}
+        </a>
     )
 }
 

diff --git a/packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css b/packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css
@@ -24,6 +24,9 @@
 .visitSite {
     color: var(--visit-site-color);
     cursor: pointer;
+    font-size: calc(13 * var(--px-in-rem));
+    letter-spacing: calc(-0.08 * var(--px-in-rem));
+    line-height: calc(16 * var(--px-in-rem));
     text-decoration: underline;
 }
 
@@ -77,4 +80,11 @@
     & .content {
         text-align: center;
     }
-}
+
+    & .visitSite {
+        font-size: calc(16 * var(--px-in-rem));
+        font-weight: 400;
+        letter-spacing: calc(-0.31 * var(--px-in-rem));
+        line-height: calc(21 * var(--px-in-rem));
+    }
+}
diff --git a/packages/special-pages/shared/components/Text/Text.js b/packages/special-pages/shared/components/Text/Text.js
@@ -17,20 +17,3 @@ export function Text ({ as: Comp = 'p', variant, strictSpacing = true, className
         </Comp>
     )
 }
-
-/**
- * @param {object} props
- * @param {Omit<keyof styles, "text">} [props.variant]
- * @param {string} [props.className]
- * @param {boolean} [props.strictSpacing] - Apply Design System letter spacing. Default: true
- * @param {import('preact').JSX.MouseEventHandler<EventTarget>} props.onClick
- * @param {import("preact").ComponentChild} [props.children]
- * @param {import("preact").ComponentProps<"a">} [props.anchorProps]
- */
-export function Link ({ variant, strictSpacing = true, className, children, onClick, anchorProps = {} }) {
-    return (
-        <a className={classNames({ [styles[`${variant}`]]: variant, [styles.strictSpacing]: strictSpacing }, className)} {...anchorProps} onClick={onClick}>
-            {children}
-        </a>
-    )
-}