@khanacademy/wonder-blocks-link 9.1.4 → 9.1.6

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @khanacademy/wonder-blocks-link
 
+## 9.1.6
+
+### Patch Changes
+
+- Updated dependencies [8468d8d]
+- Updated dependencies [308696e]
+- Updated dependencies [dc34e0c]
+- Updated dependencies [2cace08]
+- Updated dependencies [f714517]
+- Updated dependencies [8468d8d]
+    - @khanacademy/wonder-blocks-tokens@10.5.0
+    - @khanacademy/wonder-blocks-icon@5.2.0
+    - @khanacademy/wonder-blocks-clickable@7.1.6
+
+## 9.1.5
+
+### Patch Changes
+
+- 1c3c335: Use `semanticColor.link` tokens
+- 9bacc1a: Replaces all existing `semanticColor.border` references to use `semanticColor.core.border`
+- 7abcccf: Replace call sites to use `core.background` instead of `action`.
+- Updated dependencies [b1ee2b4]
+- Updated dependencies [7abcccf]
+- Updated dependencies [9bacc1a]
+- Updated dependencies [9bacc1a]
+- Updated dependencies [7abcccf]
+- Updated dependencies [1c3c335]
+- Updated dependencies [689f5d3]
+    - @khanacademy/wonder-blocks-tokens@10.4.0
+    - @khanacademy/wonder-blocks-clickable@7.1.5
+
 ## 9.1.4
 
 ### Patch Changes

package/dist/es/index.js

@@ -8,7 +8,7 @@ import { spacing, semanticColor, color, border } from '@khanacademy/wonder-block
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import externalLinkIcon from '@phosphor-icons/core/bold/arrow-square-out-bold.svg';
 
-const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsx(PhosphorIcon,{icon:externalLinkIcon,size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxs(Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=StyleSheet.create({startIcon:{marginInlineEnd:spacing.xxxSmall_4},endIcon:{marginInlineStart:spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});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]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={color:variant.focus.foreground,outline:`${border.width.thin} solid ${variant.focus.border}`,borderRadius:border.radius.radius_040};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={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},focus:focusStyling,press:pressStyling};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
+const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsx(PhosphorIcon,{icon:externalLinkIcon,size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxs(Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&isClientSideUrl(href)?jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=StyleSheet.create({startIcon:{marginInlineEnd:spacing.xxxSmall_4},endIcon:{marginInlineStart:spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const theme={color:{default:{rest:{foreground:semanticColor.link.rest},hover:{foreground:semanticColor.link.hover},focus:{border:semanticColor.focus.outer},press:{foreground:semanticColor.link.press}},inverse:{rest:{foreground:semanticColor.core.foreground.inverse.strong},hover:{foreground:semanticColor.core.foreground.inverse.strong},focus:{border:semanticColor.core.border.inverse.strong},press:{foreground:color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={outline:`${border.width.thin} solid ${variant.focus.border}`,borderRadius:border.radius.radius_040,outlineOffset:border.width.medium};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={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:border.width.medium},focus:focusStyling,press:pressStyling};styles[buttonType]=StyleSheet.create(newStyles);return styles[buttonType]};
 
 const Link=React.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,light=false,viewTransition=false,...sharedProps}=props;const inRouterContext=useInRouterContext();const ClickableBehavior=getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}});
 

package/dist/index.js

@@ -33,7 +33,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var externalLinkIcon__default = /*#__PURE__*/_interopDefaultLegacy(externalLinkIcon);
 
-const StyledA=wonderBlocksCore.addStyle("a");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const LinkCore=React__namespace.forwardRef(function LinkCore(props,ref){const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:externalLinkIcon__default["default"],size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=aphrodite.StyleSheet.create({startIcon:{marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},endIcon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=aphrodite.StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});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]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={color:variant.focus.foreground,outline:`${wonderBlocksTokens.border.width.thin} solid ${variant.focus.border}`,borderRadius:wonderBlocksTokens.border.radius.radius_040};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={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},focus:focusStyling,press:pressStyling};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
+const StyledA=wonderBlocksCore.addStyle("a");const StyledLink=wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);const LinkCore=React__namespace.forwardRef(function LinkCore(props,ref){const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const{children,skipClientNav,focused,hovered,href,inline=false,light=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,viewTransition,...restProps}=props;const linkStyles=_generateStyles(inline,light);const defaultStyles=[sharedStyles.shared,linkStyles.rest,inline&&linkStyles.restInline,!pressed&&focused&&linkStyles.focus];const commonProps={"data-testid":testId,style:[defaultStyles,style],target,...restProps};const linkUrl=new URL(href,window.location.origin);const isExternalLink=linkUrl.origin!==window.location.origin;const externalIcon=jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:externalLinkIcon__default["default"],size:"small",style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"external-icon"});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[linkContentStyles.startIcon,linkContentStyles.centered],testId:"start-icon","aria-hidden":"true",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[linkContentStyles.endIcon,linkContentStyles.centered],testId:"end-icon","aria-hidden":"true",...endIcon.props});}const linkContent=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[startIcon&&startIconElement,children,endIcon?endIconElement:isExternalLink&&target==="_blank"&&externalIcon]});return inRouterContext&&!skipClientNav&&wonderBlocksClickable.isClientSideUrl(href)?jsxRuntime.jsx(StyledLink,{...commonProps,to:href,ref:ref,viewTransition:viewTransition,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const styles={};const linkContentStyles=aphrodite.StyleSheet.create({startIcon:{marginInlineEnd:wonderBlocksTokens.spacing.xxxSmall_4},endIcon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},centered:{verticalAlign:"-10%"}});const sharedStyles=aphrodite.StyleSheet.create({shared:{cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"}});const theme={color:{default:{rest:{foreground:wonderBlocksTokens.semanticColor.link.rest},hover:{foreground:wonderBlocksTokens.semanticColor.link.hover},focus:{border:wonderBlocksTokens.semanticColor.focus.outer},press:{foreground:wonderBlocksTokens.semanticColor.link.press}},inverse:{rest:{foreground:wonderBlocksTokens.semanticColor.core.foreground.inverse.strong},hover:{foreground:wonderBlocksTokens.semanticColor.core.foreground.inverse.strong},focus:{border:wonderBlocksTokens.semanticColor.core.border.inverse.strong},press:{foreground:wonderBlocksTokens.color.fadedBlue}}}};const _generateStyles=(inline,light)=>{const buttonType=`${inline.toString()}-${light.toString()}`;if(styles[buttonType]){return styles[buttonType]}const variant=light?theme.color.inverse:theme.color.default;const focusStyling={outline:`${wonderBlocksTokens.border.width.thin} solid ${variant.focus.border}`,borderRadius:wonderBlocksTokens.border.radius.radius_040,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:variant.press.foreground,textDecoration:"underline currentcolor solid"};const newStyles={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:wonderBlocksTokens.border.width.medium},focus:focusStyling,press:pressStyling};styles[buttonType]=aphrodite.StyleSheet.create(newStyles);return styles[buttonType]};
 
 const Link=React__namespace.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,light=false,viewTransition=false,...sharedProps}=props;const inRouterContext=reactRouterDomV5Compat.useInRouterContext();const ClickableBehavior=wonderBlocksClickable.getClickableBehavior(href,skipClientNav,inRouterContext);if(beforeNav){return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,beforeNav:beforeNav,safeWithNav:safeWithNav,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,viewTransition:viewTransition,children:children})}})}});
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "9.1.4",
+  "version": "9.1.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -12,10 +12,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.4",
+    "@khanacademy/wonder-blocks-clickable": "7.1.6",
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-icon": "5.1.4",
-    "@khanacademy/wonder-blocks-tokens": "10.3.0"
+    "@khanacademy/wonder-blocks-icon": "5.2.0",
+    "@khanacademy/wonder-blocks-tokens": "10.5.0"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",