Add Typography components

frontend/src/components/OAuth2Session.tsx

@@ -14,6 +14,7 @@
 
 import type { OAuth2Session_session$key } from "./__generated__/OAuth2Session_session.graphql";
 import { graphql, useFragment } from "react-relay";
+import Typography, { Bold, Code } from "./Typography";
 
 type Props = {
   session: OAuth2Session_session$key;
@@ -39,18 +40,18 @@ const OAuth2Session: React.FC<Props> = ({ session }) => {
   return (
     <div className="p-2 my-1 bg-grey-50 dark:bg-grey-450 dark:text-white rounded">
       <div>
-        Client ID:{" "}
+        <Typography variant="body">
-        <span className="font-mono text-sm">{data.client.clientId}</span>
+          Client ID: <Code>{data.scope}</Code>
+        </Typography>
       </div>
       {data.client.clientName && (
-        <div>
+        <Typography variant="body">
-          Client name:{" "}
+          Client name: <Bold>{data.client.clientName}</Bold>
-          <span className="font-semibold">{data.client.clientName}</span>
+        </Typography>
-        </div>
       )}
-      <div>
+      <Typography variant="body">
-        Scope: <span className="font-mono text-sm">{data.scope}</span>
+        Scope: <Code>{data.scope}</Code>
-      </div>
+      </Typography>
     </div>
   );
 };

frontend/src/components/Typography.stories.tsx

@@ -0,0 +1,110 @@
+// Copyright 2022 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Typography from "./Typography";
+
+const meta: Meta<typeof Typography> = {
+  title: "UI/Typography",
+  component: Typography,
+  tags: ["docsPage"],
+  args: {
+    children: "Typography",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Typography>;
+
+export const Basic: Story = {
+  args: {
+    children: "Hello",
+    variant: "body",
+  },
+};
+
+export const Headline: Story = {
+  args: {
+    children: "Headline",
+    variant: "headline",
+  },
+};
+
+export const Title: Story = {
+  args: {
+    children: "Title",
+    variant: "title",
+  },
+};
+
+export const Subtitle: Story = {
+  args: {
+    children: "Subtitle",
+    variant: "subtitle",
+  },
+};
+
+export const SubtitleSemiBold: Story = {
+  args: {
+    children: "Subtitle Semi Bold",
+    variant: "subtitle",
+    bold: true,
+  },
+};
+
+export const Body: Story = {
+  args: {
+    children: "Body",
+    variant: "body",
+  },
+};
+
+export const BodySemiBold: Story = {
+  args: {
+    children: "Body",
+    variant: "body",
+    bold: true,
+  },
+};
+
+export const Caption: Story = {
+  args: {
+    children: "Caption",
+    variant: "caption",
+  },
+};
+
+export const CaptionSemiBold: Story = {
+  args: {
+    children: "Caption",
+    variant: "caption",
+    bold: true,
+  },
+};
+
+export const Micro: Story = {
+  args: {
+    children: "Micro",
+    variant: "caption",
+  },
+};
+
+export const MicroSemiBold: Story = {
+  args: {
+    children: "Micro",
+    variant: "caption",
+    bold: true,
+  },
+};

frontend/src/components/Typography.tsx

@@ -0,0 +1,58 @@
+// Copyright 2022 The Matrix.org Foundation C.I.C.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { createElement, Children } from "react";
+
+type Variant = "headline" | "title" | "subtitle" | "body" | "caption" | "micro";
+
+type Props = {
+  children: React.ReactNode;
+  variant: Variant;
+  bold?: boolean;
+};
+
+const elementMap: Record<Variant, "h1" | "h2" | "h3" | "p" | "small"> = {
+  headline: "h1",
+  title: "h2",
+  subtitle: "h3",
+  body: "p",
+  caption: "p",
+  micro: "small",
+};
+
+const classMap: Record<Variant, string> = {
+  headline: "text-3xl font-semibold",
+  title: "text-2xl font-semibold",
+  subtitle: "text-lg",
+  body: "text-base",
+  caption: "text-sm",
+  micro: "text-xs",
+};
+
+const Typography: React.FC<Props> = ({ variant, children, bold }) => {
+  const element = elementMap[variant];
+  const boldClass = bold ? "font-semibold" : "";
+  const className = `text-black dark:text-white ${boldClass} ${classMap[variant]}`;
+  return createElement(element, { className }, ...Children.toArray(children));
+};
+
+export const Bold: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <em className="font-semibold">{children}</em>
+);
+
+export const Code: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <code className="font-mono text-sm">{children}</code>
+);
+
+export default Typography;

frontend/src/pages/Home.tsx

@@ -17,6 +17,7 @@ import BrowserSessionList from "../components/BrowserSessionList";
 
 import CompatSsoLoginList from "../components/CompatSsoLoginList";
 import OAuth2SessionList from "../components/OAuth2SessionList";
+import Typography from "../components/Typography";
 import type { HomeQuery } from "./__generated__/HomeQuery.graphql";
 
 const Home: React.FC = () => {
@@ -45,7 +46,7 @@ const Home: React.FC = () => {
 
     return (
       <>
-        <h1 className="font-bold text-2xl">Hello {user.username}!</h1>
+        <Typography variant="headline">Hello {user.username}!</Typography>
         <div className="grid lg:grid-cols-3 gap-1">
           <OAuth2SessionList user={user} />
           <CompatSsoLoginList user={user} />