Merge pull request #2624 from robintown/compound-typography

Replace typography components with Compound components
element-hq · Sep 12, 2024 · e699cb6 · e699cb6
2 parents a5aeb6f + 3ded8be
commit e699cb6
Show file tree

Hide file tree

Showing 18 changed files with 126 additions and 423 deletions.
diff --git a/src/analytics/AnalyticsNotice.tsx b/src/analytics/AnalyticsNotice.tsx
@@ -8,14 +8,20 @@ Please see LICENSE in the repository root for full details.
 import { FC } from "react";
 import { Trans } from "react-i18next";
 
-import { Link } from "../typography/Typography";
+import { ExternalLink } from "../button/Link";
 
 export const AnalyticsNotice: FC = () => (
   <Trans i18nKey="analytics_notice">
     By participating in this beta, you consent to the collection of anonymous
     data, which we use to improve the product. You can find more information
     about which data we track in our{" "}
-    <Link href="https://element.io/privacy">Privacy Policy</Link> and our{" "}
-    <Link href="https://element.io/cookie-policy">Cookie Policy</Link>.
+    <ExternalLink href="https://element.io/privacy">
+      Privacy Policy
+    </ExternalLink>{" "}
+    and our{" "}
+    <ExternalLink href="https://element.io/cookie-policy">
+      Cookie Policy
+    </ExternalLink>
+    .
   </Trans>
 );
diff --git a/src/auth/RegisterPage.tsx b/src/auth/RegisterPage.tsx
@@ -19,7 +19,7 @@ import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
-import { Button } from "@vector-im/compound-web";
+import { Button, Text } from "@vector-im/compound-web";
 
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { useClientLegacy } from "../ClientContext";
@@ -28,10 +28,10 @@ import styles from "./LoginPage.module.css";
 import Logo from "../icons/LogoLarge.svg?react";
 import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
-import { Caption, Link } from "../typography/Typography";
 import { usePageTitle } from "../usePageTitle";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
+import { ExternalLink, Link } from "../button/Link";
 
 export const RegisterPage: FC = () => {
   const { t } = useTranslation();
@@ -201,24 +201,24 @@ export const RegisterPage: FC = () => {
                   data-testid="register_confirm_password"
                 />
               </FieldRow>
-              <Caption>
+              <Text size="sm">
                 <Trans i18nKey="recaptcha_caption">
                   This site is protected by ReCAPTCHA and the Google{" "}
-                  <Link href="https://www.google.com/policies/privacy/">
+                  <ExternalLink href="https://www.google.com/policies/privacy/">
                     Privacy Policy
-                  </Link>{" "}
+                  </ExternalLink>{" "}
                   and{" "}
-                  <Link href="https://policies.google.com/terms">
+                  <ExternalLink href="https://policies.google.com/terms">
                     Terms of Service
-                  </Link>{" "}
+                  </ExternalLink>{" "}
                   apply.
                   <br />
                   By clicking "Register", you agree to our{" "}
-                  <Link href={Config.get().eula}>
+                  <ExternalLink href={Config.get().eula}>
                     End User Licensing Agreement (EULA)
-                  </Link>
+                  </ExternalLink>
                 </Trans>
-              </Caption>
+              </Text>
               {error && (
                 <FieldRow>
                   <ErrorMessage error={error} />

diff --git a/src/button/Link.module.css b/src/button/Link.module.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+.external {
+  /* By default links will be blue/purple (or whatever the user agent does), but
+  in our designs we generally want external links to be the same color as the
+  surrounding text */
+  color: inherit;
+}
diff --git a/src/button/Link.tsx b/src/button/Link.tsx
@@ -15,10 +15,16 @@ import {
 import { Link as CpdLink } from "@vector-im/compound-web";
 import { useHistory } from "react-router-dom";
 import { createPath, LocationDescriptor, Path } from "history";
+import classNames from "classnames";
+
+import { useLatest } from "../useLatest";
+import styles from "./Link.module.css";
 
 export function useLink(
   to: LocationDescriptor,
+  state?: unknown,
 ): [Path, (e: MouseEvent) => void] {
+  const latestState = useLatest(state);
   const history = useHistory();
   const path = useMemo(
     () => (typeof to === "string" ? to : createPath(to)),
@@ -27,9 +33,9 @@ export function useLink(
   const onClick = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
-      history.push(to);
+      history.push(to, latestState.current);
     },
-    [history, to],
+    [history, to, latestState],
   );
 
   return [path, onClick];
@@ -38,15 +44,37 @@ export function useLink(
 type Props = Omit<
   ComponentPropsWithoutRef<typeof CpdLink>,
   "href" | "onClick"
-> & { to: LocationDescriptor };
+> & { to: LocationDescriptor; state?: unknown };
 
 /**
  * A version of Compound's link component that integrates with our router setup.
+ * This is only for app-internal links.
  */
 export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
-  { to, ...props },
+  { to, state, ...props },
   ref,
 ) {
-  const [path, onClick] = useLink(to);
+  const [path, onClick] = useLink(to, state);
   return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
 });
+
+/**
+ * A link to an external web page, made to fit into blocks of text more subtly
+ * than the normal Compound link component.
+ */
+export const ExternalLink = forwardRef<
+  HTMLAnchorElement,
+  ComponentPropsWithoutRef<"a">
+>(function ExternalLink({ className, children, ...props }, ref) {
+  return (
+    <a
+      ref={ref}
+      className={classNames(className, styles.external)}
+      target="_blank"
+      rel="noreferrer noopener"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+});
diff --git a/src/home/CallList.module.css b/src/home/CallList.module.css
@@ -50,6 +50,12 @@ Please see LICENSE in the repository root for full details.
   margin-bottom: 0;
 }
 
+.callName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .facePile {
   margin-top: 8px;
 }

diff --git a/src/home/CallList.tsx b/src/home/CallList.tsx
@@ -10,11 +10,11 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { FC } from "react";
+import { Text } from "@vector-im/compound-web";
 
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRelativeRoomUrl } from "../utils/matrix";
-import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
@@ -65,9 +65,9 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
       >
         <Avatar id={room.roomId} name={name} size={Size.LG} src={avatarUrl} />
         <div className={styles.callInfo}>
-          <Body overflowEllipsis fontWeight="semiBold">
+          <Text weight="semibold" className={styles.callName}>
             {name}
-          </Body>
+          </Text>
         </div>
         <div className={styles.copyButtonSpacer} />
       </Link>

diff --git a/src/home/RegisteredView.tsx b/src/home/RegisteredView.tsx
@@ -9,7 +9,7 @@ import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
 import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
-import { Heading } from "@vector-im/compound-web";
+import { Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
 
@@ -27,7 +27,6 @@ import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
-import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
@@ -144,9 +143,9 @@ export const RegisteredView: FC<Props> = ({ client }) => {
               </Button>
             </FieldRow>
             {optInAnalytics === null && (
-              <Caption className={styles.notice}>
+              <Text size="sm" className={styles.notice}>
                 <AnalyticsNotice />
-              </Caption>
+              </Text>
             )}
             {error && (
               <FieldRow className={styles.fieldRow}>

diff --git a/src/home/UnauthenticatedView.tsx b/src/home/UnauthenticatedView.tsx
@@ -9,7 +9,7 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
-import { Button, Heading } from "@vector-im/compound-web";
+import { Button, Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { useClient } from "../ClientContext";
@@ -25,7 +25,6 @@ import {
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
-import { Body, Caption, Link } from "../typography/Typography";
 import { Form } from "../form/Form";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
@@ -34,6 +33,7 @@ import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
 import { useOptInAnalytics } from "../settings/settings";
+import { ExternalLink, Link } from "../button/Link";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
@@ -178,18 +178,18 @@ export const UnauthenticatedView: FC = () => {
               />
             </FieldRow>
             {optInAnalytics === null && (
-              <Caption className={styles.notice}>
+              <Text size="sm" className={styles.notice}>
                 <AnalyticsNotice />
-              </Caption>
+              </Text>
             )}
-            <Caption className={styles.notice}>
+            <Text size="sm" className={styles.notice}>
               <Trans i18nKey="unauthenticated_view_eula_caption">
                 By clicking "Go", you agree to our{" "}
-                <Link href={Config.get().eula}>
+                <ExternalLink href={Config.get().eula}>
                   End User Licensing Agreement (EULA)
-                </Link>
+                </ExternalLink>
               </Trans>
-            </Caption>
+            </Text>
             {error && (
               <FieldRow>
                 <ErrorMessage error={error} />
@@ -207,19 +207,19 @@ export const UnauthenticatedView: FC = () => {
           </Form>
         </main>
         <footer className={styles.footer}>
-          <Body className={styles.mobileLoginLink}>
-            <Link color="primary" to="/login" data-testid="home_login">
+          <Text className={styles.mobileLoginLink}>
+            <Link to="/login" data-testid="home_login">
               {t("unauthenticated_view_login_button")}
             </Link>
-          </Body>
-          <Body>
+          </Text>
+          <Text>
             <Trans i18nKey="unauthenticated_view_body">
               Not registered yet?{" "}
-              <Link color="primary" to="/register" data-testid="home_register">
+              <Link to="/register" data-testid="home_register">
                 Create an account
               </Link>
             </Trans>
-          </Body>
+          </Text>
         </footer>
       </div>
       {onFinished && (

diff --git a/src/index.css b/src/index.css
@@ -237,16 +237,6 @@ body[data-platform="desktop"] {
     line-height: var(--font-size-title);
   }
 
-  a {
-    color: var(--cpd-color-text-action-accent);
-    text-decoration: none;
-  }
-
-  a:hover,
-  a:active {
-    opacity: 0.8;
-  }
-
   hr {
     width: calc(100% - 24px);
     border: none;

diff --git a/src/room/CallEndedView.tsx b/src/room/CallEndedView.tsx
@@ -9,12 +9,11 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
-import { Button } from "@vector-im/compound-web";
+import { Button, Heading, Text } from "@vector-im/compound-web";
 
 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
 import { useProfile } from "../profile/useProfile";
-import { Body, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { FieldRow, InputField } from "../input/Input";
@@ -139,11 +138,11 @@ export const CallEndedView: FC<Props> = ({
       return (
         <>
           <main className={styles.main}>
-            <Headline className={styles.headline}>
+            <Heading size="xl" weight="semibold" className={styles.headline}>
               <Trans i18nKey="call_ended_view.body">
                 You were disconnected from the call
               </Trans>
-            </Headline>
+            </Heading>
             <div className={styles.disconnectedButtons}>
               <Button onClick={reconnect}>
                 {t("call_ended_view.reconnect_button")}
@@ -154,17 +153,17 @@ export const CallEndedView: FC<Props> = ({
             </div>
           </main>
           {!confineToRoom && (
-            <Body className={styles.footer}>
+            <Text className={styles.footer}>
               <Link to="/"> {t("return_home_button")} </Link>
-            </Body>
+            </Text>
           )}
         </>
       );
     } else {
       return (
         <>
           <main className={styles.main}>
-            <Headline className={styles.headline}>
+            <Heading size="xl" weight="semibold" className={styles.headline}>
               {surveySubmitted
                 ? t("call_ended_view.headline", {
                     displayName,
@@ -174,16 +173,16 @@ export const CallEndedView: FC<Props> = ({
                   }) +
                   "\n" +
                   t("call_ended_view.survey_prompt")}
-            </Headline>
+            </Heading>
             {(!surveySubmitted || confineToRoom) &&
             PosthogAnalytics.instance.isEnabled()
               ? qualitySurveyDialog
               : createAccountDialog}
           </main>
           {!confineToRoom && (
-            <Body className={styles.footer}>
+            <Text className={styles.footer}>
               <Link to="/"> {t("call_ended_view.not_now_button")} </Link>
-            </Body>
+            </Text>
           )}
         </>
       );