@khanacademy/wonder-blocks-link 3.8.17 → 3.9.1

package/src/components/link-core.js

@@ -13,7 +13,7 @@ import type {
     ClickableState,
 } from "@khanacademy/wonder-blocks-clickable";
 import type {StyleDeclaration} from "aphrodite";
-import type {SharedProps} from "./link.js";
+import type {SharedProps} from "./link";
 
 type Props = {|
     ...SharedProps,
@@ -33,6 +33,7 @@ export default class LinkCore extends React.Component<Props> {
             focused,
             hovered,
             href,
+            inline,
             kind,
             light,
             visitable,
@@ -43,14 +44,22 @@ export default class LinkCore extends React.Component<Props> {
             ...restProps
         } = this.props;
 
-        const linkStyles = _generateStyles(kind, light, visitable);
+        const linkStyles = _generateStyles(inline, kind, light, visitable);
+        const restingStyles = inline
+            ? linkStyles.restingInline
+            : linkStyles.resting;
 
         const defaultStyles = [
             sharedStyles.shared,
-            !(hovered || focused || pressed) && linkStyles.default,
-            pressed
-                ? linkStyles.active
-                : (hovered || focused) && linkStyles.focus,
+            !(hovered || focused || pressed) && restingStyles,
+            pressed && linkStyles.active,
+            // A11y: The focus ring should always be present when the
+            // the link has focus, even the link is being hovered over.
+            // TODO(WB-1498): Udpate ClickableBehavior so that focus doesn't
+            // stop on mouseleave. We want the focus ring to remain on a
+            // focused link even after hovering and un-hovering on it.
+            !pressed && hovered && linkStyles.hover,
+            !pressed && focused && linkStyles.focus,
         ];
 
         const commonProps = {
@@ -86,11 +95,14 @@ const sharedStyles = StyleSheet.create({
         cursor: "pointer",
         textDecoration: "none",
         outline: "none",
+        display: "inline-flex",
+        fontSize: 16,
+        lineHeight: "22px",
     },
 });
 
-const _generateStyles = (kind, light, visitable) => {
-    const buttonType = kind + light.toString() + visitable.toString();
+const _generateStyles = (inline, kind, light, visitable) => {
+    const buttonType = `${kind}-${inline.toString()}-${light.toString()}-${visitable.toString()}`;
     if (styles[buttonType]) {
         return styles[buttonType];
     }
@@ -99,49 +111,77 @@ const _generateStyles = (kind, light, visitable) => {
         throw new Error("Secondary Light links are not supported");
     }
 
-    if (visitable && (kind !== "primary" || (kind === "primary" && light))) {
-        throw new Error("Only primary (not light) link is visitable");
+    if (visitable && kind !== "primary") {
+        throw new Error("Only primary link is visitable");
     }
 
-    const {blue, purple, white, offBlack, offBlack32} = Color;
-    const linkPurple = mix(fade(offBlack, 0.08), purple);
+    const {blue, pink, purple, white, offBlack, offBlack32, offBlack64} = Color;
 
+    // Standard purple
+    const linkPurple = mix(fade(offBlack, 0.08), purple);
+    // Light blue
+    const fadedBlue = mix(fade(blue, 0.32), white);
+    // Light pink
+    const activeLightVisited = mix(fade(white, 0.32), pink);
+    // Dark blue
+    const activeDefaultPrimary = mix(offBlack32, blue);
+
+    const primaryDefaultTextColor = light ? white : blue;
+    const secondaryDefaultTextColor = inline ? offBlack : offBlack64;
     const defaultTextColor =
-        kind === "primary" ? (light ? white : blue) : offBlack;
+        kind === "primary"
+            ? primaryDefaultTextColor
+            : secondaryDefaultTextColor;
 
-    const focusColor: string = light ? white : blue;
-    const activeColor: string = light
-        ? mix(fade(blue, 0.32), white)
-        : mix(offBlack32, blue);
+    const primaryActiveColor = light ? fadedBlue : activeDefaultPrimary;
+    const secondaryActiveColor = inline ? activeDefaultPrimary : offBlack;
+    const activeColor =
+        kind === "primary" ? primaryActiveColor : secondaryActiveColor;
 
     const defaultVisited = visitable
         ? {
               ":visited": {
-                  color: linkPurple,
+                  color: light ? pink : linkPurple,
               },
           }
         : Object.freeze({});
     const activeVisited = visitable
         ? {
               ":visited": {
-                  color: mix(offBlack32, linkPurple),
+                  color: light
+                      ? activeLightVisited
+                      : mix(offBlack32, linkPurple),
               },
           }
         : Object.freeze({});
 
     const newStyles: StyleDeclaration = {
-        default: {
+        resting: {
+            color: defaultTextColor,
+            ...defaultVisited,
+        },
+        restingInline: {
             color: defaultTextColor,
+            textDecoration: "underline currentcolor solid 1px",
+            textUnderlineOffset: 4,
+            ...defaultVisited,
+        },
+        hover: {
+            textDecoration: "underline currentcolor dashed 2px",
+            color: defaultTextColor,
+            textUnderlineOffset: 4,
             ...defaultVisited,
         },
         focus: {
-            textDecoration: "underline currentcolor solid",
-            color: focusColor,
+            color: defaultTextColor,
+            outline: `1px solid ${light ? white : blue}`,
+            borderRadius: 3,
             ...defaultVisited,
         },
         active: {
             color: activeColor,
-            textDecoration: "underline currentcolor solid",
+            textDecoration: "underline currentcolor solid 1px",
+            textUnderlineOffset: 4,
             ...activeVisited,
         },
     };

package/src/components/link.js

@@ -5,9 +5,10 @@ import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import type {Typography} from "@khanacademy/wonder-blocks-typography";
-import LinkCore from "./link-core.js";
+import LinkCore from "./link-core";
 
-type CommonProps = {|
+// TODO(FEI-5000): Convert back to conditional props after TS migration is complete.
+export type SharedProps = {|
     ...AriaProps,
 
     /**
@@ -25,6 +26,13 @@ type CommonProps = {|
      */
     id?: string,
 
+    /**
+     * Indicates that this link is used within a body of text.
+     * This styles the link with an underline to distinguish it
+     * from surrounding text.
+     */
+    inline: boolean,
+
     /**
      * Kind of Link. Note: Secondary light Links are not supported.
      */
@@ -125,40 +133,33 @@ type CommonProps = {|
      * Respond to raw "keyup" event.
      */
     onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
-|};
 
-export type SharedProps =
-    | {|
-          ...CommonProps,
-
-          /**
-           * A target destination window for a link to open in.  We only support
-           * "_blank" which opens the URL in a new tab.
-           *
-           * TODO(WB-1262): only allow this prop when `href` is also set.t
-           */
-          target?: "_blank",
-      |}
-    | {|
-          ...CommonProps,
+    /**
+     * A target destination window for a link to open in.  We only support
+     * "_blank" which opens the URL in a new tab.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
 
-          /**
-           * Run async code before navigating to the URL passed to `href`. If the
-           * promise returned rejects then navigation will not occur.
-           *
-           * If both safeWithNav and beforeNav are provided, beforeNav will be run
-           * first and safeWithNav will only be run if beforeNav does not reject.
-           *
-           * WARNING: Using this with `target="_blank"` will trigger built-in popup
-           * blockers in Firefox and Safari.  This is because we do navigation
-           * programmatically and `beforeNav` causes a delay which means that the
-           * browser can't make a directly link between a user action and the
-           * navigation.
-           */
-          beforeNav?: () => Promise<mixed>,
-      |};
+    /**
+     * Run async code before navigating to the URL passed to `href`. If the
+     * promise returned rejects then navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Using this with `target="_blank"` will trigger built-in popup
+     * blockers in Firefox and Safari.  This is because we do navigation
+     * programmatically and `beforeNav` causes a delay which means that the
+     * browser can't make a directly link between a user action and the
+     * navigation.
+     */
+    beforeNav?: () => Promise<mixed>,
+|};
 
 type DefaultProps = {|
+    inline: $PropertyType<SharedProps, "inline">,
     kind: $PropertyType<SharedProps, "kind">,
     light: $PropertyType<SharedProps, "light">,
     visitable: $PropertyType<SharedProps, "visitable">,
@@ -184,6 +185,7 @@ type DefaultProps = {|
  */
 export default class Link extends React.Component<SharedProps> {
     static defaultProps: DefaultProps = {
+        inline: false,
         kind: "primary",
         light: false,
         visitable: false,

package/src/index.js

@@ -1,4 +1,4 @@
 // @flow
-import Link from "./components/link.js";
+import Link from "./components/link";
 
 export {Link as default};