@khanacademy/wonder-blocks-link 3.8.17 → 3.9.0

package/src/components/link-core.js

@@ -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

@@ -25,6 +25,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.
      */
@@ -159,6 +166,7 @@ export type SharedProps =
       |};
 
 type DefaultProps = {|
+    inline: $PropertyType<SharedProps, "inline">,
     kind: $PropertyType<SharedProps, "kind">,
     light: $PropertyType<SharedProps, "light">,
     visitable: $PropertyType<SharedProps, "visitable">,
@@ -184,6 +192,7 @@ type DefaultProps = {|
  */
 export default class Link extends React.Component<SharedProps> {
     static defaultProps: DefaultProps = {
+        inline: false,
         kind: "primary",
         light: false,
         visitable: false,