@khanacademy/wonder-blocks-link 3.8.17 → 3.9.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-link
 
+## 3.9.1
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+-   91cb727c: Merge disjoint prop types since the codemod doesn't handle these properly.
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+-   Updated dependencies [91cb727c]
+    -   @khanacademy/wonder-blocks-clickable@2.4.5
+    -   @khanacademy/wonder-blocks-color@1.2.1
+    -   @khanacademy/wonder-blocks-core@4.7.0
+
+## 3.9.0
+
+### Minor Changes
+
+-   4fa99654: Add inline variant and update styles
+
+### Patch Changes
+
+-   48aceaad: Updated hover and outline styles.
+
 ## 3.8.17
 
 ### Patch Changes

package/dist/es/index.js

@@ -8,7 +8,7 @@ import { Link as Link$1 } from 'react-router-dom';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledLink = addStyle(Link$1);
 class LinkCore extends React.Component {
@@ -20,6 +20,7 @@ class LinkCore extends React.Component {
       focused,
       hovered,
       href,
+      inline,
       kind,
       light,
       visitable,
@@ -29,9 +30,10 @@ class LinkCore extends React.Component {
     } = _this$props,
           restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
-    const linkStyles = _generateStyles(kind, light, visitable);
+    const linkStyles = _generateStyles(inline, kind, light, visitable);
 
-    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
+    const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
+    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
 
     const commonProps = _extends({
       "data-test-id": testId,
@@ -55,12 +57,15 @@ const sharedStyles = StyleSheet.create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
-    outline: "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];
@@ -70,42 +75,62 @@ 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,
+    pink,
     purple,
     white,
     offBlack,
-    offBlack32
+    offBlack32,
+    offBlack64
   } = Color;
   const linkPurple = mix(fade(offBlack, 0.08), purple);
-  const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
-  const focusColor = light ? white : blue;
-  const activeColor = light ? mix(fade(blue, 0.32), white) : mix(offBlack32, blue);
+  const fadedBlue = mix(fade(blue, 0.32), white);
+  const activeLightVisited = mix(fade(white, 0.32), pink);
+  const activeDefaultPrimary = mix(offBlack32, blue);
+  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: 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 = {
-    default: _extends({
+    resting: _extends({
       color: defaultTextColor
     }, defaultVisited),
+    restingInline: _extends({
+      color: defaultTextColor,
+      textDecoration: "underline currentcolor solid 1px",
+      textUnderlineOffset: 4
+    }, defaultVisited),
+    hover: _extends({
+      textDecoration: "underline currentcolor dashed 2px",
+      color: defaultTextColor,
+      textUnderlineOffset: 4
+    }, defaultVisited),
     focus: _extends({
-      textDecoration: "underline currentcolor solid",
-      color: focusColor
+      color: defaultTextColor,
+      outline: `1px solid ${light ? white : blue}`,
+      borderRadius: 3
     }, defaultVisited),
     active: _extends({
       color: activeColor,
-      textDecoration: "underline currentcolor solid"
+      textDecoration: "underline currentcolor solid 1px",
+      textUnderlineOffset: 4
     }, activeVisited)
   };
   styles[buttonType] = StyleSheet.create(newStyles);
@@ -181,6 +206,7 @@ class Link extends React.Component {
 
 }
 Link.defaultProps = {
+  inline: false,
   kind: "primary",
   light: false,
   visitable: false

package/dist/index.js

@@ -35,7 +35,7 @@ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 
-const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
+const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
 class LinkCore extends React__namespace.Component {
@@ -47,6 +47,7 @@ class LinkCore extends React__namespace.Component {
       focused,
       hovered,
       href,
+      inline,
       kind,
       light,
       visitable,
@@ -56,9 +57,10 @@ class LinkCore extends React__namespace.Component {
     } = _this$props,
           restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
 
-    const linkStyles = _generateStyles(kind, light, visitable);
+    const linkStyles = _generateStyles(inline, kind, light, visitable);
 
-    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && linkStyles.default, pressed ? linkStyles.active : (hovered || focused) && linkStyles.focus];
+    const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
+    const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
 
     const commonProps = _extends__default["default"]({
       "data-test-id": testId,
@@ -82,12 +84,15 @@ const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
     cursor: "pointer",
     textDecoration: "none",
-    outline: "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];
@@ -97,42 +102,62 @@ 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,
+    pink,
     purple,
     white,
     offBlack,
-    offBlack32
+    offBlack32,
+    offBlack64
   } = Color__default["default"];
   const linkPurple = Color.mix(Color.fade(offBlack, 0.08), purple);
-  const defaultTextColor = kind === "primary" ? light ? white : blue : offBlack;
-  const focusColor = light ? white : blue;
-  const activeColor = light ? Color.mix(Color.fade(blue, 0.32), white) : Color.mix(offBlack32, blue);
+  const fadedBlue = Color.mix(Color.fade(blue, 0.32), white);
+  const activeLightVisited = Color.mix(Color.fade(white, 0.32), pink);
+  const activeDefaultPrimary = Color.mix(offBlack32, blue);
+  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: linkPurple
+      color: light ? pink : linkPurple
     }
   } : Object.freeze({});
   const activeVisited = visitable ? {
     ":visited": {
-      color: Color.mix(offBlack32, linkPurple)
+      color: light ? activeLightVisited : Color.mix(offBlack32, linkPurple)
     }
   } : Object.freeze({});
   const newStyles = {
-    default: _extends__default["default"]({
+    resting: _extends__default["default"]({
       color: defaultTextColor
     }, defaultVisited),
+    restingInline: _extends__default["default"]({
+      color: defaultTextColor,
+      textDecoration: "underline currentcolor solid 1px",
+      textUnderlineOffset: 4
+    }, defaultVisited),
+    hover: _extends__default["default"]({
+      textDecoration: "underline currentcolor dashed 2px",
+      color: defaultTextColor,
+      textUnderlineOffset: 4
+    }, defaultVisited),
     focus: _extends__default["default"]({
-      textDecoration: "underline currentcolor solid",
-      color: focusColor
+      color: defaultTextColor,
+      outline: `1px solid ${light ? white : blue}`,
+      borderRadius: 3
     }, defaultVisited),
     active: _extends__default["default"]({
       color: activeColor,
-      textDecoration: "underline currentcolor solid"
+      textDecoration: "underline currentcolor solid 1px",
+      textUnderlineOffset: 4
     }, activeVisited)
   };
   styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
@@ -208,6 +233,7 @@ class Link extends React__namespace.Component {
 
 }
 Link.defaultProps = {
+  inline: false,
   kind: "primary",
   light: false,
   visitable: false

package/dist/index.js.flow

@@ -1,2 +1,2 @@
 // @flow
-export * from "../src/index.js";
+export * from "../src/index";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.8.17",
+  "version": "3.9.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,9 +16,9 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2"
+    "@khanacademy/wonder-blocks-clickable": "^2.4.5",
+    "@khanacademy/wonder-blocks-color": "^1.2.1",
+    "@khanacademy/wonder-blocks-core": "^4.7.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -27,6 +27,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.0"
+    "wb-dev-build-settings": "^0.7.1"
   }
 }