@khanacademy/wonder-blocks-link 3.9.1 → 3.9.3
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 +34 -0
- package/dist/components/link-core.d.ts +11 -0
- package/dist/components/link-core.js.flow +26 -0
- package/dist/components/link.d.ts +148 -0
- package/dist/components/link.js.flow +177 -0
- package/dist/es/index.js +105 -71
- package/dist/index.d.ts +2 -0
- package/dist/index.js +129 -97
- package/dist/index.js.flow +9 -2
- package/package.json +6 -6
- package/src/__tests__/__snapshots__/{custom-snapshot.test.js.snap → custom-snapshot.test.tsx.snap} +40 -206
- package/src/__tests__/{custom-snapshot.test.js → custom-snapshot.test.tsx} +6 -6
- package/src/components/__tests__/{link.flowtest.js → link.flowtest.tsx} +0 -4
- package/src/components/__tests__/{link.test.js → link.test.tsx} +7 -5
- package/src/components/{link-core.js → link-core.tsx} +33 -20
- package/src/components/{link.js → link.tsx} +29 -49
- package/src/{index.js → index.ts} +0 -1
- package/tsconfig.json +14 -0
- package/tsconfig.tsbuildinfo +1 -0
- package/src/components/__docs__/link.argtypes.js +0 -151
- package/src/components/__docs__/link.stories.js +0 -487
package/dist/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var _extends = require('@babel/runtime/helpers/extends');
|
|
4
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var reactRouter = require('react-router');
|
|
7
5
|
var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
|
|
@@ -13,99 +11,136 @@ var Color = require('@khanacademy/wonder-blocks-color');
|
|
|
13
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
14
12
|
|
|
15
13
|
function _interopNamespace(e) {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
});
|
|
26
|
-
}
|
|
14
|
+
if (e && e.__esModule) return e;
|
|
15
|
+
var n = Object.create(null);
|
|
16
|
+
if (e) {
|
|
17
|
+
Object.keys(e).forEach(function (k) {
|
|
18
|
+
if (k !== 'default') {
|
|
19
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
20
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
21
|
+
enumerable: true,
|
|
22
|
+
get: function () { return e[k]; }
|
|
27
23
|
});
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
n["default"] = e;
|
|
28
|
+
return Object.freeze(n);
|
|
31
29
|
}
|
|
32
30
|
|
|
33
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
34
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
35
31
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
36
32
|
var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
|
|
37
33
|
|
|
34
|
+
function _objectDestructuringEmpty(obj) {
|
|
35
|
+
if (obj == null) throw new TypeError("Cannot destructure " + obj);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
function _extends() {
|
|
39
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
40
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
41
|
+
var source = arguments[i];
|
|
42
|
+
for (var key in source) {
|
|
43
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
44
|
+
target[key] = source[key];
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return target;
|
|
49
|
+
};
|
|
50
|
+
return _extends.apply(this, arguments);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
54
|
+
if (source == null) return {};
|
|
55
|
+
var target = {};
|
|
56
|
+
var sourceKeys = Object.keys(source);
|
|
57
|
+
var key, i;
|
|
58
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
59
|
+
key = sourceKeys[i];
|
|
60
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
61
|
+
target[key] = source[key];
|
|
62
|
+
}
|
|
63
|
+
return target;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function _setPrototypeOf(o, p) {
|
|
67
|
+
_setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
|
|
68
|
+
o.__proto__ = p;
|
|
69
|
+
return o;
|
|
70
|
+
};
|
|
71
|
+
return _setPrototypeOf(o, p);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
function _inheritsLoose(subClass, superClass) {
|
|
75
|
+
subClass.prototype = Object.create(superClass.prototype);
|
|
76
|
+
subClass.prototype.constructor = subClass;
|
|
77
|
+
_setPrototypeOf(subClass, superClass);
|
|
78
|
+
}
|
|
79
|
+
|
|
38
80
|
const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"];
|
|
39
81
|
const StyledAnchor = wonderBlocksCore.addStyle("a");
|
|
40
82
|
const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
|
|
41
|
-
|
|
42
|
-
|
|
83
|
+
let LinkCore = function (_React$Component) {
|
|
84
|
+
_inheritsLoose(LinkCore, _React$Component);
|
|
85
|
+
function LinkCore() {
|
|
86
|
+
return _React$Component.apply(this, arguments) || this;
|
|
87
|
+
}
|
|
88
|
+
var _proto = LinkCore.prototype;
|
|
89
|
+
_proto.renderInner = function renderInner(router) {
|
|
43
90
|
const _this$props = this.props,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
91
|
+
{
|
|
92
|
+
children,
|
|
93
|
+
skipClientNav,
|
|
94
|
+
focused,
|
|
95
|
+
hovered,
|
|
96
|
+
href,
|
|
97
|
+
inline,
|
|
98
|
+
kind,
|
|
99
|
+
light,
|
|
100
|
+
visitable,
|
|
101
|
+
pressed,
|
|
102
|
+
style,
|
|
103
|
+
testId
|
|
104
|
+
} = _this$props,
|
|
105
|
+
restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
|
|
60
106
|
const linkStyles = _generateStyles(inline, kind, light, visitable);
|
|
61
|
-
|
|
62
107
|
const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
|
|
63
108
|
const defaultStyles = [sharedStyles.shared, !(hovered || focused || pressed) && restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
|
|
64
|
-
|
|
65
|
-
const commonProps = _extends__default["default"]({
|
|
109
|
+
const commonProps = _extends({
|
|
66
110
|
"data-test-id": testId,
|
|
67
111
|
style: [defaultStyles, style]
|
|
68
112
|
}, restProps);
|
|
69
|
-
|
|
70
|
-
return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
|
|
113
|
+
return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
|
|
71
114
|
to: href
|
|
72
|
-
}), children) : React__namespace.createElement(StyledAnchor,
|
|
115
|
+
}), children) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
|
|
73
116
|
href: href
|
|
74
117
|
}), children);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
render() {
|
|
118
|
+
};
|
|
119
|
+
_proto.render = function render() {
|
|
78
120
|
return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
}
|
|
121
|
+
};
|
|
122
|
+
return LinkCore;
|
|
123
|
+
}(React__namespace.Component);
|
|
82
124
|
const styles = {};
|
|
83
125
|
const sharedStyles = aphrodite.StyleSheet.create({
|
|
84
126
|
shared: {
|
|
85
127
|
cursor: "pointer",
|
|
86
128
|
textDecoration: "none",
|
|
87
129
|
outline: "none",
|
|
88
|
-
display: "inline-flex"
|
|
89
|
-
fontSize: 16,
|
|
90
|
-
lineHeight: "22px"
|
|
130
|
+
display: "inline-flex"
|
|
91
131
|
}
|
|
92
132
|
});
|
|
93
|
-
|
|
94
133
|
const _generateStyles = (inline, kind, light, visitable) => {
|
|
95
134
|
const buttonType = `${kind}-${inline.toString()}-${light.toString()}-${visitable.toString()}`;
|
|
96
|
-
|
|
97
135
|
if (styles[buttonType]) {
|
|
98
136
|
return styles[buttonType];
|
|
99
137
|
}
|
|
100
|
-
|
|
101
138
|
if (kind === "secondary" && light) {
|
|
102
139
|
throw new Error("Secondary Light links are not supported");
|
|
103
140
|
}
|
|
104
|
-
|
|
105
141
|
if (visitable && kind !== "primary") {
|
|
106
142
|
throw new Error("Only primary link is visitable");
|
|
107
143
|
}
|
|
108
|
-
|
|
109
144
|
const {
|
|
110
145
|
blue,
|
|
111
146
|
pink,
|
|
@@ -136,28 +171,25 @@ const _generateStyles = (inline, kind, light, visitable) => {
|
|
|
136
171
|
}
|
|
137
172
|
} : Object.freeze({});
|
|
138
173
|
const newStyles = {
|
|
139
|
-
resting:
|
|
174
|
+
resting: _extends({
|
|
140
175
|
color: defaultTextColor
|
|
141
176
|
}, defaultVisited),
|
|
142
|
-
restingInline:
|
|
177
|
+
restingInline: _extends({
|
|
143
178
|
color: defaultTextColor,
|
|
144
|
-
textDecoration: "underline currentcolor solid
|
|
145
|
-
textUnderlineOffset: 4
|
|
179
|
+
textDecoration: "underline currentcolor solid"
|
|
146
180
|
}, defaultVisited),
|
|
147
|
-
hover:
|
|
148
|
-
textDecoration: "underline currentcolor
|
|
149
|
-
color: defaultTextColor
|
|
150
|
-
textUnderlineOffset: 4
|
|
181
|
+
hover: _extends({
|
|
182
|
+
textDecoration: "underline currentcolor solid",
|
|
183
|
+
color: defaultTextColor
|
|
151
184
|
}, defaultVisited),
|
|
152
|
-
focus:
|
|
185
|
+
focus: _extends({
|
|
153
186
|
color: defaultTextColor,
|
|
154
187
|
outline: `1px solid ${light ? white : blue}`,
|
|
155
188
|
borderRadius: 3
|
|
156
189
|
}, defaultVisited),
|
|
157
|
-
active:
|
|
190
|
+
active: _extends({
|
|
158
191
|
color: activeColor,
|
|
159
|
-
textDecoration: "underline currentcolor solid
|
|
160
|
-
textUnderlineOffset: 4
|
|
192
|
+
textDecoration: "underline currentcolor solid"
|
|
161
193
|
}, activeVisited)
|
|
162
194
|
};
|
|
163
195
|
styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
|
|
@@ -165,25 +197,28 @@ const _generateStyles = (inline, kind, light, visitable) => {
|
|
|
165
197
|
};
|
|
166
198
|
|
|
167
199
|
const _excluded = ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex", "onKeyDown", "onKeyUp", "target"];
|
|
168
|
-
|
|
169
|
-
|
|
200
|
+
let Link = function (_React$Component) {
|
|
201
|
+
_inheritsLoose(Link, _React$Component);
|
|
202
|
+
function Link() {
|
|
203
|
+
return _React$Component.apply(this, arguments) || this;
|
|
204
|
+
}
|
|
205
|
+
var _proto = Link.prototype;
|
|
206
|
+
_proto.renderClickableBehavior = function renderClickableBehavior(router) {
|
|
170
207
|
const _this$props = this.props,
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
208
|
+
{
|
|
209
|
+
onClick,
|
|
210
|
+
beforeNav = undefined,
|
|
211
|
+
safeWithNav,
|
|
212
|
+
href,
|
|
213
|
+
skipClientNav,
|
|
214
|
+
children,
|
|
215
|
+
tabIndex,
|
|
216
|
+
onKeyDown,
|
|
217
|
+
onKeyUp,
|
|
218
|
+
target = undefined
|
|
219
|
+
} = _this$props,
|
|
220
|
+
sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
|
|
185
221
|
const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
|
|
186
|
-
|
|
187
222
|
if (beforeNav) {
|
|
188
223
|
return React__namespace.createElement(ClickableBehavior, {
|
|
189
224
|
disabled: false,
|
|
@@ -195,9 +230,8 @@ class Link extends React__namespace.Component {
|
|
|
195
230
|
onKeyDown: onKeyDown,
|
|
196
231
|
onKeyUp: onKeyUp
|
|
197
232
|
}, (state, _ref) => {
|
|
198
|
-
let childrenProps =
|
|
199
|
-
|
|
200
|
-
return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
|
|
233
|
+
let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
|
|
234
|
+
return React__namespace.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
|
|
201
235
|
skipClientNav: skipClientNav,
|
|
202
236
|
href: href,
|
|
203
237
|
target: target,
|
|
@@ -215,9 +249,8 @@ class Link extends React__namespace.Component {
|
|
|
215
249
|
onKeyDown: onKeyDown,
|
|
216
250
|
onKeyUp: onKeyUp
|
|
217
251
|
}, (state, _ref2) => {
|
|
218
|
-
let childrenProps =
|
|
219
|
-
|
|
220
|
-
return React__namespace.createElement(LinkCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
|
|
252
|
+
let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
|
|
253
|
+
return React__namespace.createElement(LinkCore, _extends({}, sharedProps, state, childrenProps, {
|
|
221
254
|
skipClientNav: skipClientNav,
|
|
222
255
|
href: href,
|
|
223
256
|
target: target,
|
|
@@ -225,13 +258,12 @@ class Link extends React__namespace.Component {
|
|
|
225
258
|
}), children);
|
|
226
259
|
});
|
|
227
260
|
}
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
render() {
|
|
261
|
+
};
|
|
262
|
+
_proto.render = function render() {
|
|
231
263
|
return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
}
|
|
264
|
+
};
|
|
265
|
+
return Link;
|
|
266
|
+
}(React__namespace.Component);
|
|
235
267
|
Link.defaultProps = {
|
|
236
268
|
inline: false,
|
|
237
269
|
kind: "primary",
|
package/dist/index.js.flow
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-link",
|
|
3
|
-
"version": "3.9.
|
|
3
|
+
"version": "3.9.3",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"description": "Link component for Wonder Blocks design system.",
|
|
9
9
|
"main": "dist/index.js",
|
|
10
10
|
"module": "dist/es/index.js",
|
|
11
|
-
"
|
|
11
|
+
"types": "dist/index.d.ts",
|
|
12
12
|
"scripts": {
|
|
13
13
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
14
14
|
},
|
|
@@ -16,9 +16,9 @@
|
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime": "^7.18.6",
|
|
19
|
-
"@khanacademy/wonder-blocks-clickable": "^2.4.
|
|
20
|
-
"@khanacademy/wonder-blocks-color": "^1.2.
|
|
21
|
-
"@khanacademy/wonder-blocks-core": "^4.
|
|
19
|
+
"@khanacademy/wonder-blocks-clickable": "^2.4.7",
|
|
20
|
+
"@khanacademy/wonder-blocks-color": "^1.2.2",
|
|
21
|
+
"@khanacademy/wonder-blocks-core": "^4.9.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"aphrodite": "^1.2.5",
|
|
@@ -27,6 +27,6 @@
|
|
|
27
27
|
"react-router-dom": "5.3.0"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"wb-dev-build-settings": "^0.7.
|
|
30
|
+
"wb-dev-build-settings": "^0.7.3"
|
|
31
31
|
}
|
|
32
32
|
}
|