@khanacademy/wonder-blocks-link 4.2.1 → 4.2.2
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
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -65,9 +65,10 @@ class LinkCore extends React.Component {
|
|
|
65
65
|
endIcon
|
|
66
66
|
} = _this$props,
|
|
67
67
|
restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
|
|
68
|
+
const withIcon = startIcon || endIcon || target === "_blank";
|
|
68
69
|
const linkStyles = _generateStyles(inline, kind, light, visitable);
|
|
69
70
|
const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
|
|
70
|
-
const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
|
|
71
|
+
const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus, withIcon && sharedStyles.withIcon];
|
|
71
72
|
const commonProps = _extends({
|
|
72
73
|
"data-test-id": testId,
|
|
73
74
|
style: [defaultStyles, style],
|
|
@@ -88,9 +89,9 @@ class LinkCore extends React.Component {
|
|
|
88
89
|
style: [linkContentStyles.startIcon, linkContentStyles.centered],
|
|
89
90
|
testId: "start-icon",
|
|
90
91
|
"aria-hidden": "true"
|
|
91
|
-
}), React.createElement(StyledSpan, {
|
|
92
|
+
}), withIcon ? React.createElement(StyledSpan, {
|
|
92
93
|
style: linkContentStyles.centered
|
|
93
|
-
}, children), endIcon ? React.createElement(Icon, {
|
|
94
|
+
}, children) : children, endIcon ? React.createElement(Icon, {
|
|
94
95
|
icon: endIcon,
|
|
95
96
|
size: "small",
|
|
96
97
|
style: [linkContentStyles.endIcon, linkContentStyles.centered],
|
|
@@ -125,8 +126,10 @@ const sharedStyles = StyleSheet.create({
|
|
|
125
126
|
textDecoration: "none",
|
|
126
127
|
outline: "none",
|
|
127
128
|
verticalAlign: "bottom",
|
|
128
|
-
textUnderlineOffset: "3px",
|
|
129
129
|
alignItems: "center"
|
|
130
|
+
},
|
|
131
|
+
withIcon: {
|
|
132
|
+
textUnderlineOffset: 4
|
|
130
133
|
}
|
|
131
134
|
});
|
|
132
135
|
const _generateStyles = (inline, kind, light, visitable) => {
|
|
@@ -175,7 +178,8 @@ const _generateStyles = (inline, kind, light, visitable) => {
|
|
|
175
178
|
}, defaultVisited),
|
|
176
179
|
restingInline: _extends({
|
|
177
180
|
color: defaultTextColor,
|
|
178
|
-
textDecoration: "underline currentcolor solid"
|
|
181
|
+
textDecoration: "underline currentcolor solid",
|
|
182
|
+
textUnderlineOffset: 2
|
|
179
183
|
}, defaultVisited),
|
|
180
184
|
hover: _extends({
|
|
181
185
|
textDecoration: "underline currentcolor solid",
|
package/dist/index.js
CHANGED
|
@@ -92,9 +92,10 @@ class LinkCore extends React__namespace.Component {
|
|
|
92
92
|
endIcon
|
|
93
93
|
} = _this$props,
|
|
94
94
|
restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
|
|
95
|
+
const withIcon = startIcon || endIcon || target === "_blank";
|
|
95
96
|
const linkStyles = _generateStyles(inline, kind, light, visitable);
|
|
96
97
|
const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
|
|
97
|
-
const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus];
|
|
98
|
+
const defaultStyles = [sharedStyles.shared, restingStyles, pressed && linkStyles.active, !pressed && hovered && linkStyles.hover, !pressed && focused && linkStyles.focus, withIcon && sharedStyles.withIcon];
|
|
98
99
|
const commonProps = _extends({
|
|
99
100
|
"data-test-id": testId,
|
|
100
101
|
style: [defaultStyles, style],
|
|
@@ -115,9 +116,9 @@ class LinkCore extends React__namespace.Component {
|
|
|
115
116
|
style: [linkContentStyles.startIcon, linkContentStyles.centered],
|
|
116
117
|
testId: "start-icon",
|
|
117
118
|
"aria-hidden": "true"
|
|
118
|
-
}), React__namespace.createElement(StyledSpan, {
|
|
119
|
+
}), withIcon ? React__namespace.createElement(StyledSpan, {
|
|
119
120
|
style: linkContentStyles.centered
|
|
120
|
-
}, children), endIcon ? React__namespace.createElement(Icon__default["default"], {
|
|
121
|
+
}, children) : children, endIcon ? React__namespace.createElement(Icon__default["default"], {
|
|
121
122
|
icon: endIcon,
|
|
122
123
|
size: "small",
|
|
123
124
|
style: [linkContentStyles.endIcon, linkContentStyles.centered],
|
|
@@ -152,8 +153,10 @@ const sharedStyles = aphrodite.StyleSheet.create({
|
|
|
152
153
|
textDecoration: "none",
|
|
153
154
|
outline: "none",
|
|
154
155
|
verticalAlign: "bottom",
|
|
155
|
-
textUnderlineOffset: "3px",
|
|
156
156
|
alignItems: "center"
|
|
157
|
+
},
|
|
158
|
+
withIcon: {
|
|
159
|
+
textUnderlineOffset: 4
|
|
157
160
|
}
|
|
158
161
|
});
|
|
159
162
|
const _generateStyles = (inline, kind, light, visitable) => {
|
|
@@ -202,7 +205,8 @@ const _generateStyles = (inline, kind, light, visitable) => {
|
|
|
202
205
|
}, defaultVisited),
|
|
203
206
|
restingInline: _extends({
|
|
204
207
|
color: defaultTextColor,
|
|
205
|
-
textDecoration: "underline currentcolor solid"
|
|
208
|
+
textDecoration: "underline currentcolor solid",
|
|
209
|
+
textUnderlineOffset: 2
|
|
206
210
|
}, defaultVisited),
|
|
207
211
|
hover: _extends({
|
|
208
212
|
textDecoration: "underline currentcolor solid",
|