@khanacademy/wonder-blocks-link 4.2.0 → 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.
Files changed (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/es/index.js +19 -15
  3. package/dist/index.js +19 -15
  4. package/package.json +1 -1
  5. package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap +93 -630
  6. package/src/components/link-core.tsx +30 -7
  7. package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @khanacademy/wonder-blocks-link
2
2
 
3
+ ## 4.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - cf4aca8d: Remove span element from link without icons
8
+
9
+ ## 4.2.1
10
+
11
+ ### Patch Changes
12
+
13
+ - 6a026e35: Fix link style
14
+
3
15
  ## 4.2.0
4
16
 
5
17
  ### Minor Changes
package/dist/es/index.js CHANGED
@@ -43,6 +43,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
43
43
  const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
44
44
  const StyledAnchor = addStyle("a");
45
45
  const StyledLink = addStyle(Link$1);
46
+ const StyledSpan = addStyle("span");
46
47
  class LinkCore extends React.Component {
47
48
  renderInner(router) {
48
49
  const _this$props = this.props,
@@ -64,9 +65,10 @@ class LinkCore extends React.Component {
64
65
  endIcon
65
66
  } = _this$props,
66
67
  restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
68
+ const withIcon = startIcon || endIcon || target === "_blank";
67
69
  const linkStyles = _generateStyles(inline, kind, light, visitable);
68
70
  const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
69
- 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];
70
72
  const commonProps = _extends({
71
73
  "data-test-id": testId,
72
74
  style: [defaultStyles, style],
@@ -78,23 +80,21 @@ class LinkCore extends React.Component {
78
80
  const externalIcon = React.createElement(Icon, {
79
81
  icon: externalIconPath,
80
82
  size: "small",
81
- style: iconStyles.endIcon,
83
+ style: [linkContentStyles.endIcon, linkContentStyles.centered],
82
84
  testId: "external-icon"
83
85
  });
84
86
  const linkContent = React.createElement(React.Fragment, null, startIcon && React.createElement(Icon, {
85
87
  icon: startIcon,
86
88
  size: "small",
87
- style: iconStyles.startIcon,
89
+ style: [linkContentStyles.startIcon, linkContentStyles.centered],
88
90
  testId: "start-icon",
89
91
  "aria-hidden": "true"
90
- }), React.createElement("span", {
91
- style: {
92
- verticalAlign: "middle"
93
- }
94
- }, children), endIcon ? React.createElement(Icon, {
92
+ }), withIcon ? React.createElement(StyledSpan, {
93
+ style: linkContentStyles.centered
94
+ }, children) : children, endIcon ? React.createElement(Icon, {
95
95
  icon: endIcon,
96
96
  size: "small",
97
- style: iconStyles.endIcon,
97
+ style: [linkContentStyles.endIcon, linkContentStyles.centered],
98
98
  testId: "end-icon",
99
99
  "aria-hidden": "true"
100
100
  }) : target === "_blank" && externalIcon);
@@ -109,13 +109,14 @@ class LinkCore extends React.Component {
109
109
  }
110
110
  }
111
111
  const styles = {};
112
- const iconStyles = StyleSheet.create({
112
+ const linkContentStyles = StyleSheet.create({
113
113
  startIcon: {
114
- marginInlineEnd: Spacing.xxxSmall_4,
115
- verticalAlign: "middle"
114
+ marginInlineEnd: Spacing.xxxSmall_4
116
115
  },
117
116
  endIcon: {
118
- marginInlineStart: Spacing.xxxSmall_4,
117
+ marginInlineStart: Spacing.xxxSmall_4
118
+ },
119
+ centered: {
119
120
  verticalAlign: "middle"
120
121
  }
121
122
  });
@@ -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
@@ -70,6 +70,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
70
70
  const _excluded$1 = ["children", "skipClientNav", "focused", "hovered", "href", "inline", "kind", "light", "visitable", "pressed", "style", "testId", "waiting", "target", "startIcon", "endIcon"];
71
71
  const StyledAnchor = wonderBlocksCore.addStyle("a");
72
72
  const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
73
+ const StyledSpan = wonderBlocksCore.addStyle("span");
73
74
  class LinkCore extends React__namespace.Component {
74
75
  renderInner(router) {
75
76
  const _this$props = this.props,
@@ -91,9 +92,10 @@ class LinkCore extends React__namespace.Component {
91
92
  endIcon
92
93
  } = _this$props,
93
94
  restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
95
+ const withIcon = startIcon || endIcon || target === "_blank";
94
96
  const linkStyles = _generateStyles(inline, kind, light, visitable);
95
97
  const restingStyles = inline ? linkStyles.restingInline : linkStyles.resting;
96
- 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];
97
99
  const commonProps = _extends({
98
100
  "data-test-id": testId,
99
101
  style: [defaultStyles, style],
@@ -105,23 +107,21 @@ class LinkCore extends React__namespace.Component {
105
107
  const externalIcon = React__namespace.createElement(Icon__default["default"], {
106
108
  icon: externalIconPath,
107
109
  size: "small",
108
- style: iconStyles.endIcon,
110
+ style: [linkContentStyles.endIcon, linkContentStyles.centered],
109
111
  testId: "external-icon"
110
112
  });
111
113
  const linkContent = React__namespace.createElement(React__namespace.Fragment, null, startIcon && React__namespace.createElement(Icon__default["default"], {
112
114
  icon: startIcon,
113
115
  size: "small",
114
- style: iconStyles.startIcon,
116
+ style: [linkContentStyles.startIcon, linkContentStyles.centered],
115
117
  testId: "start-icon",
116
118
  "aria-hidden": "true"
117
- }), React__namespace.createElement("span", {
118
- style: {
119
- verticalAlign: "middle"
120
- }
121
- }, children), endIcon ? React__namespace.createElement(Icon__default["default"], {
119
+ }), withIcon ? React__namespace.createElement(StyledSpan, {
120
+ style: linkContentStyles.centered
121
+ }, children) : children, endIcon ? React__namespace.createElement(Icon__default["default"], {
122
122
  icon: endIcon,
123
123
  size: "small",
124
- style: iconStyles.endIcon,
124
+ style: [linkContentStyles.endIcon, linkContentStyles.centered],
125
125
  testId: "end-icon",
126
126
  "aria-hidden": "true"
127
127
  }) : target === "_blank" && externalIcon);
@@ -136,13 +136,14 @@ class LinkCore extends React__namespace.Component {
136
136
  }
137
137
  }
138
138
  const styles = {};
139
- const iconStyles = aphrodite.StyleSheet.create({
139
+ const linkContentStyles = aphrodite.StyleSheet.create({
140
140
  startIcon: {
141
- marginInlineEnd: Spacing__default["default"].xxxSmall_4,
142
- verticalAlign: "middle"
141
+ marginInlineEnd: Spacing__default["default"].xxxSmall_4
143
142
  },
144
143
  endIcon: {
145
- marginInlineStart: Spacing__default["default"].xxxSmall_4,
144
+ marginInlineStart: Spacing__default["default"].xxxSmall_4
145
+ },
146
+ centered: {
146
147
  verticalAlign: "middle"
147
148
  }
148
149
  });
@@ -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",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-link",
3
- "version": "4.2.0",
3
+ "version": "4.2.2",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"