@khanacademy/wonder-blocks-link 9.0.2 → 9.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/es/index.js +3 -218
- package/dist/index.js +3 -221
- package/package.json +4 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-link
|
|
2
2
|
|
|
3
|
+
## 9.0.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [b9e4946]
|
|
8
|
+
- @khanacademy/wonder-blocks-tokens@10.0.0
|
|
9
|
+
- @khanacademy/wonder-blocks-clickable@7.0.4
|
|
10
|
+
- @khanacademy/wonder-blocks-core@12.2.1
|
|
11
|
+
- @khanacademy/wonder-blocks-icon@5.1.3
|
|
12
|
+
|
|
13
|
+
## 9.0.3
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [2656fd4]
|
|
18
|
+
- Updated dependencies [6018552]
|
|
19
|
+
- Updated dependencies [7bbf311]
|
|
20
|
+
- Updated dependencies [7f79943]
|
|
21
|
+
- @khanacademy/wonder-blocks-tokens@9.0.0
|
|
22
|
+
- @khanacademy/wonder-blocks-clickable@7.0.3
|
|
23
|
+
|
|
3
24
|
## 9.0.2
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/dist/es/index.js
CHANGED
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import _extends from '@babel/runtime/helpers/extends';
|
|
3
|
-
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
1
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
2
|
import * as React from 'react';
|
|
5
3
|
import { Link as Link$1, useInRouterContext } from 'react-router-dom-v5-compat';
|
|
6
4
|
import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
|
|
@@ -10,221 +8,8 @@ import { spacing, semanticColor, color, border } from '@khanacademy/wonder-block
|
|
|
10
8
|
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
11
9
|
import externalLinkIcon from '@phosphor-icons/core/bold/arrow-square-out-bold.svg';
|
|
12
10
|
|
|
13
|
-
const
|
|
14
|
-
const StyledA = addStyle("a");
|
|
15
|
-
const StyledLink = addStyle(Link$1);
|
|
16
|
-
const LinkCore = React.forwardRef(function LinkCore(props, ref) {
|
|
17
|
-
const inRouterContext = useInRouterContext();
|
|
18
|
-
const {
|
|
19
|
-
children,
|
|
20
|
-
skipClientNav,
|
|
21
|
-
focused,
|
|
22
|
-
href,
|
|
23
|
-
inline = false,
|
|
24
|
-
light = false,
|
|
25
|
-
pressed,
|
|
26
|
-
style,
|
|
27
|
-
testId,
|
|
28
|
-
target,
|
|
29
|
-
startIcon,
|
|
30
|
-
endIcon
|
|
31
|
-
} = props,
|
|
32
|
-
restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
|
|
33
|
-
const linkStyles = _generateStyles(inline, light);
|
|
34
|
-
const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
|
|
35
|
-
const commonProps = _extends({
|
|
36
|
-
"data-testid": testId,
|
|
37
|
-
style: [defaultStyles, style],
|
|
38
|
-
target
|
|
39
|
-
}, restProps);
|
|
40
|
-
const linkUrl = new URL(href, window.location.origin);
|
|
41
|
-
const isExternalLink = linkUrl.origin !== window.location.origin;
|
|
42
|
-
const externalIcon = React.createElement(PhosphorIcon, {
|
|
43
|
-
icon: externalLinkIcon,
|
|
44
|
-
size: "small",
|
|
45
|
-
style: [linkContentStyles.endIcon, linkContentStyles.centered],
|
|
46
|
-
testId: "external-icon"
|
|
47
|
-
});
|
|
48
|
-
let startIconElement;
|
|
49
|
-
let endIconElement;
|
|
50
|
-
if (startIcon) {
|
|
51
|
-
startIconElement = React.cloneElement(startIcon, _extends({
|
|
52
|
-
style: [linkContentStyles.startIcon, linkContentStyles.centered],
|
|
53
|
-
testId: "start-icon",
|
|
54
|
-
"aria-hidden": "true"
|
|
55
|
-
}, startIcon.props));
|
|
56
|
-
}
|
|
57
|
-
if (endIcon) {
|
|
58
|
-
endIconElement = React.cloneElement(endIcon, _extends({
|
|
59
|
-
style: [linkContentStyles.endIcon, linkContentStyles.centered],
|
|
60
|
-
testId: "end-icon",
|
|
61
|
-
"aria-hidden": "true"
|
|
62
|
-
}, endIcon.props));
|
|
63
|
-
}
|
|
64
|
-
const linkContent = React.createElement(React.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
|
|
65
|
-
return inRouterContext && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
|
|
66
|
-
to: href,
|
|
67
|
-
ref: ref
|
|
68
|
-
}), linkContent) : React.createElement(StyledA, _extends({}, commonProps, {
|
|
69
|
-
href: href,
|
|
70
|
-
ref: ref
|
|
71
|
-
}), linkContent);
|
|
72
|
-
});
|
|
73
|
-
const styles = {};
|
|
74
|
-
const linkContentStyles = StyleSheet.create({
|
|
75
|
-
startIcon: {
|
|
76
|
-
marginInlineEnd: spacing.xxxSmall_4
|
|
77
|
-
},
|
|
78
|
-
endIcon: {
|
|
79
|
-
marginInlineStart: spacing.xxxSmall_4
|
|
80
|
-
},
|
|
81
|
-
centered: {
|
|
82
|
-
verticalAlign: "-10%"
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
const sharedStyles = StyleSheet.create({
|
|
86
|
-
shared: {
|
|
87
|
-
cursor: "pointer",
|
|
88
|
-
textDecoration: "none",
|
|
89
|
-
outline: "none",
|
|
90
|
-
alignItems: "center"
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
const action = semanticColor.action.secondary.progressive;
|
|
94
|
-
const theme = {
|
|
95
|
-
color: {
|
|
96
|
-
default: {
|
|
97
|
-
rest: {
|
|
98
|
-
foreground: action.default.foreground
|
|
99
|
-
},
|
|
100
|
-
hover: {
|
|
101
|
-
foreground: action.hover.foreground
|
|
102
|
-
},
|
|
103
|
-
focus: {
|
|
104
|
-
border: semanticColor.focus.outer,
|
|
105
|
-
foreground: action.hover.foreground
|
|
106
|
-
},
|
|
107
|
-
press: {
|
|
108
|
-
foreground: action.press.foreground
|
|
109
|
-
}
|
|
110
|
-
},
|
|
111
|
-
inverse: {
|
|
112
|
-
rest: {
|
|
113
|
-
foreground: semanticColor.text.inverse
|
|
114
|
-
},
|
|
115
|
-
hover: {
|
|
116
|
-
foreground: semanticColor.text.inverse
|
|
117
|
-
},
|
|
118
|
-
focus: {
|
|
119
|
-
border: semanticColor.border.inverse,
|
|
120
|
-
foreground: semanticColor.text.inverse
|
|
121
|
-
},
|
|
122
|
-
press: {
|
|
123
|
-
foreground: color.fadedBlue
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
const _generateStyles = (inline, light) => {
|
|
129
|
-
const buttonType = `${inline.toString()}-${light.toString()}`;
|
|
130
|
-
if (styles[buttonType]) {
|
|
131
|
-
return styles[buttonType];
|
|
132
|
-
}
|
|
133
|
-
const variant = light ? theme.color.inverse : theme.color.default;
|
|
134
|
-
const focusStyling = {
|
|
135
|
-
color: variant.focus.foreground,
|
|
136
|
-
outline: `${border.width.thin} solid ${variant.focus.border}`,
|
|
137
|
-
borderRadius: border.radius.radius_040
|
|
138
|
-
};
|
|
139
|
-
const pressStyling = {
|
|
140
|
-
color: variant.press.foreground,
|
|
141
|
-
textDecoration: "underline currentcolor solid"
|
|
142
|
-
};
|
|
143
|
-
const newStyles = {
|
|
144
|
-
rest: {
|
|
145
|
-
color: variant.rest.foreground,
|
|
146
|
-
":hover": {
|
|
147
|
-
textDecoration: "underline currentcolor solid",
|
|
148
|
-
color: variant.hover.foreground
|
|
149
|
-
},
|
|
150
|
-
":focus-visible": focusStyling,
|
|
151
|
-
":active": pressStyling
|
|
152
|
-
},
|
|
153
|
-
restInline: {
|
|
154
|
-
textDecoration: "underline currentcolor solid",
|
|
155
|
-
textUnderlineOffset: 2
|
|
156
|
-
},
|
|
157
|
-
focus: focusStyling,
|
|
158
|
-
press: pressStyling
|
|
159
|
-
};
|
|
160
|
-
styles[buttonType] = StyleSheet.create(newStyles);
|
|
161
|
-
return styles[buttonType];
|
|
162
|
-
};
|
|
11
|
+
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,...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,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]};
|
|
163
12
|
|
|
164
|
-
const
|
|
165
|
-
const Link = React.forwardRef(function Link(props, ref) {
|
|
166
|
-
const {
|
|
167
|
-
onClick,
|
|
168
|
-
beforeNav = undefined,
|
|
169
|
-
safeWithNav,
|
|
170
|
-
href,
|
|
171
|
-
skipClientNav,
|
|
172
|
-
children,
|
|
173
|
-
tabIndex,
|
|
174
|
-
onKeyDown,
|
|
175
|
-
onKeyUp,
|
|
176
|
-
target = undefined,
|
|
177
|
-
inline = false,
|
|
178
|
-
light = false
|
|
179
|
-
} = props,
|
|
180
|
-
sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
181
|
-
const inRouterContext = useInRouterContext();
|
|
182
|
-
const ClickableBehavior = getClickableBehavior(href, skipClientNav, inRouterContext);
|
|
183
|
-
if (beforeNav) {
|
|
184
|
-
return React.createElement(ClickableBehavior, {
|
|
185
|
-
disabled: false,
|
|
186
|
-
href: href,
|
|
187
|
-
role: "link",
|
|
188
|
-
onClick: onClick,
|
|
189
|
-
beforeNav: beforeNav,
|
|
190
|
-
safeWithNav: safeWithNav,
|
|
191
|
-
onKeyDown: onKeyDown,
|
|
192
|
-
onKeyUp: onKeyUp
|
|
193
|
-
}, (state, _ref) => {
|
|
194
|
-
let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
195
|
-
return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
|
|
196
|
-
skipClientNav: skipClientNav,
|
|
197
|
-
href: href,
|
|
198
|
-
target: target,
|
|
199
|
-
tabIndex: tabIndex,
|
|
200
|
-
inline: inline,
|
|
201
|
-
light: light,
|
|
202
|
-
ref: ref
|
|
203
|
-
}), children);
|
|
204
|
-
});
|
|
205
|
-
} else {
|
|
206
|
-
return React.createElement(ClickableBehavior, {
|
|
207
|
-
disabled: false,
|
|
208
|
-
href: href,
|
|
209
|
-
role: "link",
|
|
210
|
-
onClick: onClick,
|
|
211
|
-
safeWithNav: safeWithNav,
|
|
212
|
-
target: target,
|
|
213
|
-
onKeyDown: onKeyDown,
|
|
214
|
-
onKeyUp: onKeyUp
|
|
215
|
-
}, (state, _ref2) => {
|
|
216
|
-
let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
|
|
217
|
-
return React.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
|
|
218
|
-
skipClientNav: skipClientNav,
|
|
219
|
-
href: href,
|
|
220
|
-
target: target,
|
|
221
|
-
tabIndex: tabIndex,
|
|
222
|
-
inline: inline,
|
|
223
|
-
light: light,
|
|
224
|
-
ref: ref
|
|
225
|
-
}), children);
|
|
226
|
-
});
|
|
227
|
-
}
|
|
228
|
-
});
|
|
13
|
+
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,...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,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,children:children})}})}else {return jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,children:(state,{...childrenProps})=>{return jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,children:children})}})}});
|
|
229
14
|
|
|
230
15
|
export { Link as default };
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
4
|
-
var _extends = require('@babel/runtime/helpers/extends');
|
|
5
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
4
|
var React = require('react');
|
|
7
5
|
var reactRouterDomV5Compat = require('react-router-dom-v5-compat');
|
|
8
6
|
var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
|
|
@@ -32,227 +30,11 @@ function _interopNamespace(e) {
|
|
|
32
30
|
return Object.freeze(n);
|
|
33
31
|
}
|
|
34
32
|
|
|
35
|
-
var _objectDestructuringEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_objectDestructuringEmpty);
|
|
36
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
37
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
38
33
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
39
34
|
var externalLinkIcon__default = /*#__PURE__*/_interopDefaultLegacy(externalLinkIcon);
|
|
40
35
|
|
|
41
|
-
const
|
|
42
|
-
const StyledA = wonderBlocksCore.addStyle("a");
|
|
43
|
-
const StyledLink = wonderBlocksCore.addStyle(reactRouterDomV5Compat.Link);
|
|
44
|
-
const LinkCore = React__namespace.forwardRef(function LinkCore(props, ref) {
|
|
45
|
-
const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
|
|
46
|
-
const {
|
|
47
|
-
children,
|
|
48
|
-
skipClientNav,
|
|
49
|
-
focused,
|
|
50
|
-
href,
|
|
51
|
-
inline = false,
|
|
52
|
-
light = false,
|
|
53
|
-
pressed,
|
|
54
|
-
style,
|
|
55
|
-
testId,
|
|
56
|
-
target,
|
|
57
|
-
startIcon,
|
|
58
|
-
endIcon
|
|
59
|
-
} = props,
|
|
60
|
-
restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
|
|
61
|
-
const linkStyles = _generateStyles(inline, light);
|
|
62
|
-
const defaultStyles = [sharedStyles.shared, linkStyles.rest, inline && linkStyles.restInline, !pressed && focused && linkStyles.focus];
|
|
63
|
-
const commonProps = _extends__default["default"]({
|
|
64
|
-
"data-testid": testId,
|
|
65
|
-
style: [defaultStyles, style],
|
|
66
|
-
target
|
|
67
|
-
}, restProps);
|
|
68
|
-
const linkUrl = new URL(href, window.location.origin);
|
|
69
|
-
const isExternalLink = linkUrl.origin !== window.location.origin;
|
|
70
|
-
const externalIcon = React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
|
|
71
|
-
icon: externalLinkIcon__default["default"],
|
|
72
|
-
size: "small",
|
|
73
|
-
style: [linkContentStyles.endIcon, linkContentStyles.centered],
|
|
74
|
-
testId: "external-icon"
|
|
75
|
-
});
|
|
76
|
-
let startIconElement;
|
|
77
|
-
let endIconElement;
|
|
78
|
-
if (startIcon) {
|
|
79
|
-
startIconElement = React__namespace.cloneElement(startIcon, _extends__default["default"]({
|
|
80
|
-
style: [linkContentStyles.startIcon, linkContentStyles.centered],
|
|
81
|
-
testId: "start-icon",
|
|
82
|
-
"aria-hidden": "true"
|
|
83
|
-
}, startIcon.props));
|
|
84
|
-
}
|
|
85
|
-
if (endIcon) {
|
|
86
|
-
endIconElement = React__namespace.cloneElement(endIcon, _extends__default["default"]({
|
|
87
|
-
style: [linkContentStyles.endIcon, linkContentStyles.centered],
|
|
88
|
-
testId: "end-icon",
|
|
89
|
-
"aria-hidden": "true"
|
|
90
|
-
}, endIcon.props));
|
|
91
|
-
}
|
|
92
|
-
const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && startIconElement, children, endIcon ? endIconElement : isExternalLink && target === "_blank" && externalIcon);
|
|
93
|
-
return inRouterContext && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
|
|
94
|
-
to: href,
|
|
95
|
-
ref: ref
|
|
96
|
-
}), linkContent) : React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
|
|
97
|
-
href: href,
|
|
98
|
-
ref: ref
|
|
99
|
-
}), linkContent);
|
|
100
|
-
});
|
|
101
|
-
const styles = {};
|
|
102
|
-
const linkContentStyles = aphrodite.StyleSheet.create({
|
|
103
|
-
startIcon: {
|
|
104
|
-
marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
|
|
105
|
-
},
|
|
106
|
-
endIcon: {
|
|
107
|
-
marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
|
|
108
|
-
},
|
|
109
|
-
centered: {
|
|
110
|
-
verticalAlign: "-10%"
|
|
111
|
-
}
|
|
112
|
-
});
|
|
113
|
-
const sharedStyles = aphrodite.StyleSheet.create({
|
|
114
|
-
shared: {
|
|
115
|
-
cursor: "pointer",
|
|
116
|
-
textDecoration: "none",
|
|
117
|
-
outline: "none",
|
|
118
|
-
alignItems: "center"
|
|
119
|
-
}
|
|
120
|
-
});
|
|
121
|
-
const action = wonderBlocksTokens.semanticColor.action.secondary.progressive;
|
|
122
|
-
const theme = {
|
|
123
|
-
color: {
|
|
124
|
-
default: {
|
|
125
|
-
rest: {
|
|
126
|
-
foreground: action.default.foreground
|
|
127
|
-
},
|
|
128
|
-
hover: {
|
|
129
|
-
foreground: action.hover.foreground
|
|
130
|
-
},
|
|
131
|
-
focus: {
|
|
132
|
-
border: wonderBlocksTokens.semanticColor.focus.outer,
|
|
133
|
-
foreground: action.hover.foreground
|
|
134
|
-
},
|
|
135
|
-
press: {
|
|
136
|
-
foreground: action.press.foreground
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
inverse: {
|
|
140
|
-
rest: {
|
|
141
|
-
foreground: wonderBlocksTokens.semanticColor.text.inverse
|
|
142
|
-
},
|
|
143
|
-
hover: {
|
|
144
|
-
foreground: wonderBlocksTokens.semanticColor.text.inverse
|
|
145
|
-
},
|
|
146
|
-
focus: {
|
|
147
|
-
border: wonderBlocksTokens.semanticColor.border.inverse,
|
|
148
|
-
foreground: wonderBlocksTokens.semanticColor.text.inverse
|
|
149
|
-
},
|
|
150
|
-
press: {
|
|
151
|
-
foreground: wonderBlocksTokens.color.fadedBlue
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
};
|
|
156
|
-
const _generateStyles = (inline, light) => {
|
|
157
|
-
const buttonType = `${inline.toString()}-${light.toString()}`;
|
|
158
|
-
if (styles[buttonType]) {
|
|
159
|
-
return styles[buttonType];
|
|
160
|
-
}
|
|
161
|
-
const variant = light ? theme.color.inverse : theme.color.default;
|
|
162
|
-
const focusStyling = {
|
|
163
|
-
color: variant.focus.foreground,
|
|
164
|
-
outline: `${wonderBlocksTokens.border.width.thin} solid ${variant.focus.border}`,
|
|
165
|
-
borderRadius: wonderBlocksTokens.border.radius.radius_040
|
|
166
|
-
};
|
|
167
|
-
const pressStyling = {
|
|
168
|
-
color: variant.press.foreground,
|
|
169
|
-
textDecoration: "underline currentcolor solid"
|
|
170
|
-
};
|
|
171
|
-
const newStyles = {
|
|
172
|
-
rest: {
|
|
173
|
-
color: variant.rest.foreground,
|
|
174
|
-
":hover": {
|
|
175
|
-
textDecoration: "underline currentcolor solid",
|
|
176
|
-
color: variant.hover.foreground
|
|
177
|
-
},
|
|
178
|
-
":focus-visible": focusStyling,
|
|
179
|
-
":active": pressStyling
|
|
180
|
-
},
|
|
181
|
-
restInline: {
|
|
182
|
-
textDecoration: "underline currentcolor solid",
|
|
183
|
-
textUnderlineOffset: 2
|
|
184
|
-
},
|
|
185
|
-
focus: focusStyling,
|
|
186
|
-
press: pressStyling
|
|
187
|
-
};
|
|
188
|
-
styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
|
|
189
|
-
return styles[buttonType];
|
|
190
|
-
};
|
|
36
|
+
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,...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,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]};
|
|
191
37
|
|
|
192
|
-
const
|
|
193
|
-
const Link = React__namespace.forwardRef(function Link(props, ref) {
|
|
194
|
-
const {
|
|
195
|
-
onClick,
|
|
196
|
-
beforeNav = undefined,
|
|
197
|
-
safeWithNav,
|
|
198
|
-
href,
|
|
199
|
-
skipClientNav,
|
|
200
|
-
children,
|
|
201
|
-
tabIndex,
|
|
202
|
-
onKeyDown,
|
|
203
|
-
onKeyUp,
|
|
204
|
-
target = undefined,
|
|
205
|
-
inline = false,
|
|
206
|
-
light = false
|
|
207
|
-
} = props,
|
|
208
|
-
sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
209
|
-
const inRouterContext = reactRouterDomV5Compat.useInRouterContext();
|
|
210
|
-
const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, inRouterContext);
|
|
211
|
-
if (beforeNav) {
|
|
212
|
-
return React__namespace.createElement(ClickableBehavior, {
|
|
213
|
-
disabled: false,
|
|
214
|
-
href: href,
|
|
215
|
-
role: "link",
|
|
216
|
-
onClick: onClick,
|
|
217
|
-
beforeNav: beforeNav,
|
|
218
|
-
safeWithNav: safeWithNav,
|
|
219
|
-
onKeyDown: onKeyDown,
|
|
220
|
-
onKeyUp: onKeyUp
|
|
221
|
-
}, (state, _ref) => {
|
|
222
|
-
let childrenProps = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref), _ref));
|
|
223
|
-
return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
|
|
224
|
-
skipClientNav: skipClientNav,
|
|
225
|
-
href: href,
|
|
226
|
-
target: target,
|
|
227
|
-
tabIndex: tabIndex,
|
|
228
|
-
inline: inline,
|
|
229
|
-
light: light,
|
|
230
|
-
ref: ref
|
|
231
|
-
}), children);
|
|
232
|
-
});
|
|
233
|
-
} else {
|
|
234
|
-
return React__namespace.createElement(ClickableBehavior, {
|
|
235
|
-
disabled: false,
|
|
236
|
-
href: href,
|
|
237
|
-
role: "link",
|
|
238
|
-
onClick: onClick,
|
|
239
|
-
safeWithNav: safeWithNav,
|
|
240
|
-
target: target,
|
|
241
|
-
onKeyDown: onKeyDown,
|
|
242
|
-
onKeyUp: onKeyUp
|
|
243
|
-
}, (state, _ref2) => {
|
|
244
|
-
let childrenProps = _extends__default["default"]({}, (_objectDestructuringEmpty__default["default"](_ref2), _ref2));
|
|
245
|
-
return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
|
|
246
|
-
skipClientNav: skipClientNav,
|
|
247
|
-
href: href,
|
|
248
|
-
target: target,
|
|
249
|
-
tabIndex: tabIndex,
|
|
250
|
-
inline: inline,
|
|
251
|
-
light: light,
|
|
252
|
-
ref: ref
|
|
253
|
-
}), children);
|
|
254
|
-
});
|
|
255
|
-
}
|
|
256
|
-
});
|
|
38
|
+
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,...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,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,children:children})}})}else {return jsxRuntime.jsx(ClickableBehavior,{disabled:false,href:href,role:"link",onClick:onClick,safeWithNav:safeWithNav,target:target,onKeyDown:onKeyDown,onKeyUp:onKeyUp,children:(state,{...childrenProps})=>{return jsxRuntime.jsx(LinkCore,{...sharedProps,...state,...childrenProps,skipClientNav:skipClientNav,href:href,target:target,tabIndex:tabIndex,inline:inline,light:light,ref:ref,children:children})}})}});
|
|
257
39
|
|
|
258
40
|
module.exports = Link;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-link",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.4",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -12,11 +12,10 @@
|
|
|
12
12
|
"author": "",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@
|
|
16
|
-
"@khanacademy/wonder-blocks-clickable": "7.0.2",
|
|
15
|
+
"@khanacademy/wonder-blocks-clickable": "7.0.4",
|
|
17
16
|
"@khanacademy/wonder-blocks-core": "12.2.1",
|
|
18
17
|
"@khanacademy/wonder-blocks-icon": "5.1.3",
|
|
19
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
18
|
+
"@khanacademy/wonder-blocks-tokens": "10.0.0"
|
|
20
19
|
},
|
|
21
20
|
"peerDependencies": {
|
|
22
21
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -27,7 +26,7 @@
|
|
|
27
26
|
"react-router-dom-v5-compat": "^6.30.0"
|
|
28
27
|
},
|
|
29
28
|
"devDependencies": {
|
|
30
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
29
|
+
"@khanacademy/wb-dev-build-settings": "3.0.0"
|
|
31
30
|
},
|
|
32
31
|
"scripts": {
|
|
33
32
|
"test": "echo \"Error: no test specified\" && exit 1"
|