feat: Link typography tokens and a new Link component in DS (#2729)

## Description - Decided to not have separate colors for link, it should just use regular text colors. - Added a Link component to the design system, modelled after MUI Link component ## Steps for reproduction 1. click button 2. expect xyz ## Code Review - [ ] hi @kof, I need you to do - conceptual review (architecture, feature-correctness) - detailed review (read every line) - test it on preview ## Before requesting a review - [ ] made a self-review - [ ] added inline comments where things may be not obvious (the "why", not "what") ## Before merging - [ ] tested locally and on preview environment (preview dev login: 5de6) - [ ] updated [test cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md) document - [ ] added tests - [ ] if any new env variables are added, added them to `.env.example` and the `builder/env-check.js` if mandatory --------- Co-authored-by: Taylor Nowotny <[email protected]> Co-authored-by: Bot (build-figma-tokens.yml) <bot@localhost> Co-authored-by: Bogdan Chadkin <[email protected]>
webstudio-is · Jan 5, 2024 · ad22473 · ad22473
1 parent e810ea9
commit ad22473
Show file tree

Hide file tree

Showing 12 changed files with 416 additions and 139 deletions.
diff --git a/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx b/apps/builder/app/builder/features/blocking-alerts/blocking-alerts.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState, type ReactNode } from "react";
 import { Alert } from "./alert";
 import { useWindowResizeDebounced } from "~/shared/dom-hooks";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
-import { styled, theme } from "@webstudio-is/design-system";
+import { Link } from "@webstudio-is/design-system";
 
 const useTooSmallMessage = () => {
   const [message, setMessage] = useState<string>();
@@ -21,21 +21,11 @@ const useTooSmallMessage = () => {
   return message;
 };
 
-// @todo: move to design system
-// https://discord.com/channels/955905230107738152/1149380442315825212/1149408306671128666
-// https://discord.com/channels/955905230107738152/1048308525673238558/1184833931569266738
-const Link = styled("a", {
-  color: theme.colors.foregroundLink,
-  "&:visited": {
-    color: theme.colors.foregroundLinkVisited,
-  },
-});
-
 const useUnsupportedBrowser = () => {
   const [message, setMessage] = useState<ReactNode>();
   useEffect(() => {
     if ("chrome" in window || isFeatureEnabled("unsupportedBrowsers")) {
-      return;
+      //return;
     }
 
     setMessage(
@@ -44,23 +34,45 @@ const useUnsupportedBrowser = () => {
         <Link
           href="https://en.wikipedia.org/wiki/Chromium_(web_browser)"
           target="_blank"
+          color="inherit"
+          variant="inherit"
         >
           Chromium-based
         </Link>{" "}
         browsers such as{" "}
-        <Link href="https://www.google.com/chrome" target="_blank">
+        <Link
+          href="https://www.google.com/chrome"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Google Chrome
         </Link>
         ,{" "}
-        <Link href="https://www.microsoft.com/en-us/edge" target="_blank">
+        <Link
+          href="https://www.microsoft.com/en-us/edge"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Microsoft Edge
         </Link>
         ,{" "}
-        <Link href="https://brave.com/" target="_blank">
+        <Link
+          href="https://brave.com/"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Brave
         </Link>
         ,{" "}
-        <Link href="https://arc.net/" target="_blank">
+        <Link
+          href="https://arc.net/"
+          target="_blank"
+          color="inherit"
+          variant="inherit"
+        >
           Arc
         </Link>{" "}
         and many more. We plan to support Firefox and Safari in the near future.

diff --git a/apps/builder/app/builder/features/topbar/publish.tsx b/apps/builder/app/builder/features/topbar/publish.tsx
@@ -19,10 +19,10 @@ import {
   ScrollArea,
   Box,
   rawTheme,
-  styled,
   Select,
   theme,
   TextArea,
+  Link,
 } from "@webstudio-is/design-system";
 import stripIndent from "strip-indent";
 import { useIsPublishDialogOpen } from "../../shared/nano-states";
@@ -187,6 +187,7 @@ const ChangeProjectDomain = ({
         <Grid gap={1}>
           <Label htmlFor={id}>Domain:</Label>
           <InputField
+            variant="mono"
             id={id}
             placeholder="Domain"
             value={domain}
@@ -477,16 +478,6 @@ const Content = (props: {
   );
 };
 
-// @todo: move to design system
-// https://discord.com/channels/955905230107738152/1149380442315825212/1149408306671128666
-// https://discord.com/channels/955905230107738152/1048308525673238558/1184833931569266738
-const Link = styled("a", {
-  color: theme.colors.foregroundLink,
-  "&:visited": {
-    color: theme.colors.foregroundLinkVisited,
-  },
-});
-
 const deployTargets = {
   vercel: {
     command: "npx vercel",
@@ -526,11 +517,19 @@ const ExportContent = () => {
         </Text>
         <Text color="subtle">
           Download and install Node v18+ from{" "}
-          <Link href="https://nodejs.org/" target="_blank" rel="noreferrer">
+          <Link
+            variant="inherit"
+            color="inherit"
+            href="https://nodejs.org/"
+            target="_blank"
+            rel="noreferrer"
+          >
             nodejs.org
           </Link>{" "}
           or with{" "}
           <Link
+            variant="inherit"
+            color="inherit"
             href="https://nodejs.org/en/download/package-manager"
             target="_blank"
             rel="noreferrer"
@@ -553,7 +552,12 @@ const ExportContent = () => {
         </Grid>
 
         <Flex gap={2}>
-          <InputField css={{ flex: 1 }} readOnly value={npxCommand} />
+          <InputField
+            css={{ flex: 1 }}
+            variant="mono"
+            readOnly
+            value={npxCommand}
+          />
 
           <Tooltip content={"Copy to clipboard"}>
             <Button
@@ -576,6 +580,8 @@ const ExportContent = () => {
           <Text color="subtle">
             Run this command to publish to{" "}
             <Link
+              variant="inherit"
+              color="inherit"
               href={deployTargets[deployTarget].docs}
               target="_blank"
               rel="noreferrer"
@@ -601,13 +607,15 @@ const ExportContent = () => {
         <Flex gap={2} align="end">
           <TextArea
             css={{ flex: 1 }}
+            variant="mono"
             readOnly
             value={stripIndent(deployTargets[deployTarget].command)
               .trimStart()
               .replace(/ +$/, "")}
           />
           <Tooltip content={"Copy to clipboard"}>
             <Button
+              css={{ flexShrink: 0 }}
               color="neutral"
               onClick={() => {
                 navigator.clipboard.writeText(
@@ -625,6 +633,8 @@ const ExportContent = () => {
         <Text color="subtle">
           Read the detailed documentation{" "}
           <Link
+            variant="inherit"
+            color="inherit"
             href="https://github.com/webstudio-is/webstudio/tree/main/packages/cli"
             target="_blank"
             rel="noreferrer"

diff --git a/apps/builder/app/dashboard/projects/project-card.tsx b/apps/builder/app/dashboard/projects/project-card.tsx
@@ -9,12 +9,12 @@ import {
   Flex,
   Grid,
   Text,
-  textVariants,
   truncate,
   theme,
   Box,
   Tooltip,
   rawTheme,
+  Link,
 } from "@webstudio-is/design-system";
 import { InfoCircleIcon, MenuIcon } from "@webstudio-is/icons";
 import { type KeyboardEvent, useEffect, useRef, useState } from "react";
@@ -79,17 +79,6 @@ const usePublishedLink = ({ domain }: { domain: string }) => {
   return { url };
 };
 
-const linkStyle = css({
-  ...textVariants.regular,
-  ...truncate(),
-  cursor: "pointer",
-  color: theme.colors.foregroundSubtle,
-  "&:hover": {
-    textDecoration: "underline",
-  },
-});
-
-// @todo use Link component once ready https://github.com/webstudio-is/webstudio/pull/2697
 const PublishedLink = ({
   domain,
   tabIndex,
@@ -99,15 +88,17 @@ const PublishedLink = ({
 }) => {
   const { url } = usePublishedLink({ domain });
   return (
-    <a
+    <Link
       href={url?.href}
       target="_blank"
       rel="noreferrer"
       tabIndex={tabIndex}
-      className={linkStyle()}
+      color="subtle"
+      underline="hover"
+      css={truncate()}
     >
       {url?.host}
-    </a>
+    </Link>
   );
 };