@khanacademy/wonder-blocks-link 10.4.2 → 10.5.0

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-link@10.4.2 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-link
+> @khanacademy/wonder-blocks-link@10.5.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-link
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-link/dist/css

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-link
 
+## 10.5.0
+
+### Minor Changes
+
+- ace2d2b: Link's external-link icon now has an accessible name by default: "(opens in a new tab)", and reads a translated one from `WonderBlocksConfigProvider`. `labels.externalIconAriaLabel` will override the built-in translation.
+
 ## 10.4.2
 
 ### Patch Changes

package/dist/components/link.d.ts

@@ -111,14 +111,12 @@ type CommonProps = AriaProps & {
      */
     endIcon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>;
     /**
-     * The object containing the custom labels used inside this component.
-     *
-     * This is useful for internationalization. Defaults to English.
+     * The object containing custom labels for this component. This
+     * overrides the default labels provided by `WonderBlocksConfigProvider`.
      */
     labels?: {
         /**
-         * An optional aria-label for the external link icon. This is used to
-         * provide a translatable description for screen readers.
+         * An optional aria-label for the external link icon.
          */
         externalIconAriaLabel?: string;
     };

package/dist/es/index.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Link as Link$1, useInRouterContext } from 'react-router-dom-v5-compat';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
+import { useWonderBlocksI18n } from '@khanacademy/wonder-blocks-config';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import { mapValuesToCssVars, border, semanticColor, font, sizing } from '@khanacademy/wonder-blocks-tokens';
 import { minTargetSizeStyles, focusStyles } from '@khanacademy/wonder-blocks-styles';
@@ -13,7 +14,7 @@ var themeDefault = {root:{font:{family:"inherit",weight:"inherit"}}};
 
 var theme = mapValuesToCssVars(themeDefault,"--wb-c-link-");
 
-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,disableMinTargetSize=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,state,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!inline&&!disableMinTargetSize&&minTargetSizeStyles.minTargetSize,!pressed&&focused&&styles.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:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...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,state:state,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...focusStyles.focus[":focus-visible"],borderRadius:border.radius.radius_010,outlineOffset:border.width.medium};const pressStyling={color:semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:font.textDecoration.underlineOffset};const styles=StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:semanticColor.link.hover,textUnderlineOffset:font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:font.textDecoration.thickness,textUnderlineOffset:font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:sizing.size_040},endIcon:{marginInlineStart:sizing.size_040},centered:{verticalAlign:"-10%"}});
+const StyledA=addStyle("a");const StyledLink=addStyle(Link$1);const LinkCore=React.forwardRef(function LinkCore(props,ref){const inRouterContext=useInRouterContext();const{strings}=useWonderBlocksI18n();const{children,skipClientNav,focused,hovered,href,inline=false,disableMinTargetSize=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,state,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!inline&&!disableMinTargetSize&&minTargetSizeStyles.minTargetSize,!pressed&&focused&&styles.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:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel||strings.iconAltOpensNewTab});let startIconElement;let endIconElement;if(startIcon){startIconElement=React.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...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,state:state,children:linkContent}):jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...focusStyles.focus[":focus-visible"],borderRadius:border.radius.radius_010,outlineOffset:border.width.medium};const pressStyling={color:semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:font.textDecoration.underlineOffset};const styles=StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:semanticColor.link.hover,textUnderlineOffset:font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:font.textDecoration.thickness,textUnderlineOffset:font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:sizing.size_040},endIcon:{marginInlineStart:sizing.size_040},centered:{verticalAlign:"-10%"}});
 
 const Link=React.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,viewTransition=false,state,...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,state:state,children:(clickableState,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,viewTransition:viewTransition,state:state,children:(clickableState,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}});
 

package/dist/index.js

@@ -5,6 +5,7 @@ var React = require('react');
 var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var aphrodite = require('aphrodite');
+var wonderBlocksConfig = require('@khanacademy/wonder-blocks-config');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
@@ -38,7 +39,7 @@ var themeDefault = {root:{font:{family:"inherit",weight:"inherit"}}};
 
 var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-link-");
 
-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,disableMinTargetSize=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,state,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!inline&&!disableMinTargetSize&&wonderBlocksStyles.minTargetSizeStyles.minTargetSize,!pressed&&focused&&styles.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:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...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,state:state,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...wonderBlocksStyles.focusStyles.focus[":focus-visible"],borderRadius:wonderBlocksTokens.border.radius.radius_010,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:wonderBlocksTokens.semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset};const styles=aphrodite.StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:wonderBlocksTokens.semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:wonderBlocksTokens.semanticColor.link.hover,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:wonderBlocksTokens.font.textDecoration.thickness,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:wonderBlocksTokens.sizing.size_040},endIcon:{marginInlineStart:wonderBlocksTokens.sizing.size_040},centered:{verticalAlign:"-10%"}});
+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{strings}=wonderBlocksConfig.useWonderBlocksI18n();const{children,skipClientNav,focused,hovered,href,inline=false,disableMinTargetSize=false,pressed,style,testId,waiting:_,target,startIcon,endIcon,labels,viewTransition,state,...restProps}=props;const defaultStyles=[styles.shared,styles.rest,inline&&styles.restInline,!inline&&!disableMinTargetSize&&wonderBlocksStyles.minTargetSizeStyles.minTargetSize,!pressed&&focused&&styles.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:[styles.endIcon,styles.centered],testId:"external-icon","aria-label":labels?.externalIconAriaLabel||strings.iconAltOpensNewTab});let startIconElement;let endIconElement;if(startIcon){startIconElement=React__namespace.cloneElement(startIcon,{style:[styles.startIcon,styles.centered],testId:"start-icon",...startIcon.props});}if(endIcon){endIconElement=React__namespace.cloneElement(endIcon,{style:[styles.endIcon,styles.centered],testId:"end-icon",...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,state:state,children:linkContent}):jsxRuntime.jsx(StyledA,{...commonProps,href:href,ref:ref,children:linkContent})});const focusStyling={...wonderBlocksStyles.focusStyles.focus[":focus-visible"],borderRadius:wonderBlocksTokens.border.radius.radius_010,outlineOffset:wonderBlocksTokens.border.width.medium};const pressStyling={color:wonderBlocksTokens.semanticColor.link.press,textDecoration:"underline currentcolor solid",textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset};const styles=aphrodite.StyleSheet.create({shared:{fontFamily:theme.root.font.family,fontWeight:theme.root.font.weight,cursor:"pointer",textDecoration:"none",outline:"none",alignItems:"center"},rest:{color:wonderBlocksTokens.semanticColor.link.rest,":hover":{textDecoration:"underline currentcolor solid",color:wonderBlocksTokens.semanticColor.link.hover,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},":focus-visible":focusStyling,":active":pressStyling},restInline:{textDecoration:"underline currentcolor solid",textDecorationThickness:wonderBlocksTokens.font.textDecoration.thickness,textUnderlineOffset:wonderBlocksTokens.font.textDecoration.underlineOffset},focus:focusStyling,press:pressStyling,startIcon:{marginInlineEnd:wonderBlocksTokens.sizing.size_040},endIcon:{marginInlineStart:wonderBlocksTokens.sizing.size_040},centered:{verticalAlign:"-10%"}});
 
 const Link=React__namespace.forwardRef(function Link(props,ref){const{onClick,beforeNav=undefined,safeWithNav,href,skipClientNav,children,tabIndex,onKeyDown,onKeyUp,target=undefined,inline=false,viewTransition=false,state,...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,state:state,children:(clickableState,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,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,state:state,children:(clickableState,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...clickableState,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,ref:ref,viewTransition:viewTransition,state:state,children:children})}})}});
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Link component for Wonder Blocks design system.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "10.4.2",
+  "version": "10.5.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,11 +29,12 @@
   },
   "dependencies": {
     "@khanacademy/wonder-blocks-clickable": "8.3.2",
+    "@khanacademy/wonder-blocks-config": "0.5.0",
     "@khanacademy/wonder-blocks-core": "12.5.0",
     "@khanacademy/wonder-blocks-icon": "6.0.3",
     "@khanacademy/wonder-blocks-tokens": "18.1.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.6",
-    "@khanacademy/wonder-blocks-styles": "0.4.1"
+    "@khanacademy/wonder-blocks-styles": "0.4.1",
+    "@khanacademy/wonder-blocks-typography": "5.0.6"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",