@khanacademy/wonder-blocks-link 7.1.1 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-link
 
+## 8.0.0
+
+### Major Changes
+
+- 762f749: Remove `kind` prop as the `secondary` variant is now dropped.
+- b6d77dc: Removes the `visitable` prop as it is not used. Also, removed as per design recommendation for privacy purposes.
+
+### Patch Changes
+
+- 5655b9f: Switch to use `focus.outer` semanticColor token
+- beb09cd: Update Link to use CSS pseudo-classes (:hover, :focus-visible, :active) instead of JS driven states (hovered, focused, pressed).
+- 5bd2a95: Internal `Link` refactor to use `semanticColor` tokens intead of `color`. Also moved the link colors to an object to prepare this for an upcoming theme integration"
+- 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+- Updated dependencies [8fc65a9]
+- Updated dependencies [e1b78db]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+    - @khanacademy/wonder-blocks-clickable@6.1.2
+    - @khanacademy/wonder-blocks-icon@5.1.2
+
 ## 7.1.1
 
 ### Patch Changes

package/dist/components/link.d.ts

@@ -22,19 +22,10 @@ type CommonProps = AriaProps & {
      * from surrounding text.
      */
     inline?: boolean;
-    /**
-     * Kind of Link. Note: Secondary light Links are not supported.
-     */
-    kind?: "primary" | "secondary";
     /**
      * Whether the button is on a dark/colored background.
      */
     light?: boolean;
-    /**
-     * Whether the link should change color once it's visited.
-     * secondary or primary (light) links are not allowed to be visitable.
-     */
-    visitable?: boolean;
     /**
      * Specifies the type of relationship between the current document and the
      * linked document. Should only be used when `href` is specified. This

package/dist/es/index.js

@@ -7,11 +7,11 @@ import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-block
 import { StyleSheet } from 'aphrodite';
 import { Link as Link$1 } from 'react-router-dom';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
-import { spacing, mix, fade, color } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, color, border } from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import externalLinkIcon from '@phosphor-icons/core/bold/arrow-square-out-bold.svg';
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
+const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "light", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
 const StyledA = addStyle("a");
 const StyledLink = addStyle(Link$1);
 const LinkCore = React.forwardRef(function LinkCore(props, ref) {
@@ -20,12 +20,9 @@ const LinkCore = React.forwardRef(function LinkCore(props, ref) {
         children,
         skipClientNav,
         focused,
-        hovered,
         href,
         inline = false,
-        kind = "primary",
         light = false,
-        visitable = false,
         pressed,
         style,
         testId,
@@ -34,9 +31,8 @@ const LinkCore = React.forwardRef(function LinkCore(props, ref) {
         endIcon
       } = props,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-    const linkStyles = _generateStyles(inline, kind, light, visitable);
-    const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
-    const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
+    const linkStyles = _generateStyles(inline, light);
+    const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
     const commonProps = _extends({
       "data-testid": testId,
       style: [defaultStyles, style],
@@ -97,76 +93,78 @@ const sharedStyles = StyleSheet.create({
     alignItems: "center"
   }
 });
-const _generateStyles = (inline, kind, light, visitable) => {
-  const buttonType = `${kind}-${inline.toString()}-${light.toString()}-${visitable.toString()}`;
+const action = semanticColor.action.secondary.progressive;
+const theme = {
+  color: {
+    default: {
+      rest: {
+        foreground: action.default.foreground
+      },
+      hover: {
+        foreground: action.hover.foreground
+      },
+      focus: {
+        border: semanticColor.focus.outer,
+        foreground: action.hover.foreground
+      },
+      press: {
+        foreground: action.press.foreground
+      }
+    },
+    inverse: {
+      rest: {
+        foreground: semanticColor.text.inverse
+      },
+      hover: {
+        foreground: semanticColor.text.inverse
+      },
+      focus: {
+        border: semanticColor.border.inverse,
+        foreground: semanticColor.text.inverse
+      },
+      press: {
+        foreground: color.fadedBlue
+      }
+    }
+  }
+};
+const _generateStyles = (inline, light) => {
+  const buttonType = `${inline.toString()}-${light.toString()}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-  if (kind === "secondary" && light) {
-    throw new Error("Secondary Light links are not supported");
-  }
-  if (visitable && kind !== "primary") {
-    throw new Error("Only primary link is visitable");
-  }
-  const {
-    blue,
-    purple,
-    white,
-    offBlack,
-    offBlack32,
-    offBlack64
-  } = color;
-  const pink = "#fa50ae";
-  const linkPurple = mix(fade(offBlack, 0.08), purple);
-  const fadedBlue = color.fadedBlue;
-  const activeLightVisited = mix(fade(white, 0.32), pink);
-  const activeDefaultPrimary = color.activeBlue;
-  const primaryDefaultTextColor = light ? white : blue;
-  const secondaryDefaultTextColor = inline ? offBlack : offBlack64;
-  const defaultTextColor = kind === "primary" ? primaryDefaultTextColor : secondaryDefaultTextColor;
-  const primaryActiveColor = light ? fadedBlue : activeDefaultPrimary;
-  const secondaryActiveColor = inline ? activeDefaultPrimary : offBlack;
-  const activeColor = kind === "primary" ? primaryActiveColor : secondaryActiveColor;
-  const defaultVisited = visitable ? {
-    ":visited": {
-      color: light ? pink : linkPurple
-    }
-  } : Object.freeze({});
-  const activeVisited = visitable ? {
-    ":visited": {
-      color: light ? activeLightVisited : mix(offBlack32, linkPurple)
-    }
-  } : Object.freeze({});
+  const variant = light ? theme.color.inverse : theme.color.default;
+  const focusStyling = {
+    color: variant.focus.foreground,
+    outline: `${border.width.hairline}px solid ${variant.focus.border}`,
+    borderRadius: border.radius.small_3
+  };
+  const pressStyling = {
+    color: variant.press.foreground,
+    textDecoration: "underline currentcolor solid"
+  };
   const newStyles = {
-    resting: _extends({
-      color: defaultTextColor
-    }, defaultVisited),
-    restingInline: _extends({
-      color: defaultTextColor,
+    rest: {
+      color: variant.rest.foreground,
+      ":hover": {
+        textDecoration: "underline currentcolor solid",
+        color: variant.hover.foreground
+      },
+      ":focus-visible": focusStyling,
+      ":active": pressStyling
+    },
+    restInline: {
       textDecoration: "underline currentcolor solid",
       textUnderlineOffset: 2
-    }, defaultVisited),
-    hover: _extends({
-      textDecoration: "underline currentcolor solid",
-      color: defaultTextColor
-    }, defaultVisited),
-    focus: {
-      ":focus-visible": _extends({
-        color: defaultTextColor,
-        outline: `1px solid ${light ? white : blue}`,
-        borderRadius: 3
-      }, defaultVisited)
     },
-    active: _extends({
-      color: activeColor,
-      textDecoration: "underline currentcolor solid"
-    }, activeVisited)
+    focus: focusStyling,
+    press: pressStyling
   };
   styles[buttonType] = StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
-const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "kind", "light", "visitable"];
+const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "light"];
 const Link = React.forwardRef(function Link(props, ref) {
   const {
       onClick,
@@ -180,9 +178,7 @@ const Link = React.forwardRef(function Link(props, ref) {
       onKeyUp,
       target = undefined,
       inline = false,
-      kind = "primary",
-      light = false,
-      visitable = false
+      light = false
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
   const renderClickableBehavior = router => {
@@ -205,9 +201,7 @@ const Link = React.forwardRef(function Link(props, ref) {
           target: target,
           tabIndex: tabIndex,
           inline: inline,
-          kind: kind,
           light: light,
-          visitable: visitable,
           ref: ref
         }), children);
       });
@@ -229,9 +223,7 @@ const Link = React.forwardRef(function Link(props, ref) {
           target: target,
           tabIndex: tabIndex,
           inline: inline,
-          kind: kind,
           light: light,
-          visitable: visitable,
           ref: ref
         }), children);
       });

package/dist/index.js

@@ -39,7 +39,7 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var externalLinkIcon__default = /*#__PURE__*/_interopDefaultLegacy(externalLinkIcon);
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
+const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "light", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
 const StyledA = wonderBlocksCore.addStyle("a");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
 const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
@@ -48,12 +48,9 @@ const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
         children,
         skipClientNav,
         focused,
-        hovered,
         href,
         inline = false,
-        kind = "primary",
         light = false,
-        visitable = false,
         pressed,
         style,
         testId,
@@ -62,9 +59,8 @@ const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
         endIcon
       } = props,
       restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
-    const linkStyles = _generateStyles(inline, kind, light, visitable);
-    const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
-    const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
+    const linkStyles = _generateStyles(inline, light);
+    const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
     const commonProps = _extends__default["default"]({
       "data-testid": testId,
       style: [defaultStyles, style],
@@ -125,76 +121,78 @@ const sharedStyles = aphrodite.StyleSheet.create({
     alignItems: "center"
   }
 });
-const _generateStyles = (inline, kind, light, visitable) => {
-  const buttonType = `${kind}-${inline.toString()}-${light.toString()}-${visitable.toString()}`;
+const action = wonderBlocksTokens.semanticColor.action.secondary.progressive;
+const theme = {
+  color: {
+    default: {
+      rest: {
+        foreground: action.default.foreground
+      },
+      hover: {
+        foreground: action.hover.foreground
+      },
+      focus: {
+        border: wonderBlocksTokens.semanticColor.focus.outer,
+        foreground: action.hover.foreground
+      },
+      press: {
+        foreground: action.press.foreground
+      }
+    },
+    inverse: {
+      rest: {
+        foreground: wonderBlocksTokens.semanticColor.text.inverse
+      },
+      hover: {
+        foreground: wonderBlocksTokens.semanticColor.text.inverse
+      },
+      focus: {
+        border: wonderBlocksTokens.semanticColor.border.inverse,
+        foreground: wonderBlocksTokens.semanticColor.text.inverse
+      },
+      press: {
+        foreground: wonderBlocksTokens.color.fadedBlue
+      }
+    }
+  }
+};
+const _generateStyles = (inline, light) => {
+  const buttonType = `${inline.toString()}-${light.toString()}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-  if (kind === "secondary" && light) {
-    throw new Error("Secondary Light links are not supported");
-  }
-  if (visitable && kind !== "primary") {
-    throw new Error("Only primary link is visitable");
-  }
-  const {
-    blue,
-    purple,
-    white,
-    offBlack,
-    offBlack32,
-    offBlack64
-  } = wonderBlocksTokens.color;
-  const pink = "#fa50ae";
-  const linkPurple = wonderBlocksTokens.mix(wonderBlocksTokens.fade(offBlack, 0.08), purple);
-  const fadedBlue = wonderBlocksTokens.color.fadedBlue;
-  const activeLightVisited = wonderBlocksTokens.mix(wonderBlocksTokens.fade(white, 0.32), pink);
-  const activeDefaultPrimary = wonderBlocksTokens.color.activeBlue;
-  const primaryDefaultTextColor = light ? white : blue;
-  const secondaryDefaultTextColor = inline ? offBlack : offBlack64;
-  const defaultTextColor = kind === "primary" ? primaryDefaultTextColor : secondaryDefaultTextColor;
-  const primaryActiveColor = light ? fadedBlue : activeDefaultPrimary;
-  const secondaryActiveColor = inline ? activeDefaultPrimary : offBlack;
-  const activeColor = kind === "primary" ? primaryActiveColor : secondaryActiveColor;
-  const defaultVisited = visitable ? {
-    ":visited": {
-      color: light ? pink : linkPurple
-    }
-  } : Object.freeze({});
-  const activeVisited = visitable ? {
-    ":visited": {
-      color: light ? activeLightVisited : wonderBlocksTokens.mix(offBlack32, linkPurple)
-    }
-  } : Object.freeze({});
+  const variant = light ? theme.color.inverse : theme.color.default;
+  const focusStyling = {
+    color: variant.focus.foreground,
+    outline: `${wonderBlocksTokens.border.width.hairline}px solid ${variant.focus.border}`,
+    borderRadius: wonderBlocksTokens.border.radius.small_3
+  };
+  const pressStyling = {
+    color: variant.press.foreground,
+    textDecoration: "underline currentcolor solid"
+  };
   const newStyles = {
-    resting: _extends__default["default"]({
-      color: defaultTextColor
-    }, defaultVisited),
-    restingInline: _extends__default["default"]({
-      color: defaultTextColor,
+    rest: {
+      color: variant.rest.foreground,
+      ":hover": {
+        textDecoration: "underline currentcolor solid",
+        color: variant.hover.foreground
+      },
+      ":focus-visible": focusStyling,
+      ":active": pressStyling
+    },
+    restInline: {
       textDecoration: "underline currentcolor solid",
       textUnderlineOffset: 2
-    }, defaultVisited),
-    hover: _extends__default["default"]({
-      textDecoration: "underline currentcolor solid",
-      color: defaultTextColor
-    }, defaultVisited),
-    focus: {
-      ":focus-visible": _extends__default["default"]({
-        color: defaultTextColor,
-        outline: `1px solid ${light ? white : blue}`,
-        borderRadius: 3
-      }, defaultVisited)
     },
-    active: _extends__default["default"]({
-      color: activeColor,
-      textDecoration: "underline currentcolor solid"
-    }, activeVisited)
+    focus: focusStyling,
+    press: pressStyling
   };
   styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
-const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "kind", "light", "visitable"];
+const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target", "inline", "light"];
 const Link = React__namespace.forwardRef(function Link(props, ref) {
   const {
       onClick,
@@ -208,9 +206,7 @@ const Link = React__namespace.forwardRef(function Link(props, ref) {
       onKeyUp,
       target = undefined,
       inline = false,
-      kind = "primary",
-      light = false,
-      visitable = false
+      light = false
     } = props,
     sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
   const renderClickableBehavior = router => {
@@ -233,9 +229,7 @@ const Link = React__namespace.forwardRef(function Link(props, ref) {
           target: target,
           tabIndex: tabIndex,
           inline: inline,
-          kind: kind,
           light: light,
-          visitable: visitable,
           ref: ref
         }), children);
       });
@@ -257,9 +251,7 @@ const Link = React__namespace.forwardRef(function Link(props, ref) {
           target: target,
           tabIndex: tabIndex,
           inline: inline,
-          kind: kind,
           light: light,
-          visitable: visitable,
           ref: ref
         }), children);
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "7.1.1",
+  "version": "8.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,10 +13,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-clickable": "6.1.1",
-    "@khanacademy/wonder-blocks-core": "12.1.1",
-    "@khanacademy/wonder-blocks-icon": "5.1.1",
-    "@khanacademy/wonder-blocks-tokens": "4.2.1"
+    "@khanacademy/wonder-blocks-clickable": "6.1.2",
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-icon": "5.1.2",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",