@khanacademy/wonder-blocks-pill 3.1.0 → 3.1.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 (4) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/es/index.js +36 -19
  3. package/dist/index.js +49 -26
  4. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,45 @@
1
1
  # @khanacademy/wonder-blocks-pill
2
2
 
3
+ ## 3.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 8fc65a9: - Migrate to `semanticColor`.
8
+ - Update background from 16% to 8%.
9
+ - Update focus outline to always be `blue` (using global focus color).
10
+ - 5655b9f: Switch to use `focus.outer` semanticColor token
11
+ - 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
12
+ - Updated dependencies [ed26d66]
13
+ - Updated dependencies [5655b9f]
14
+ - Updated dependencies [5655b9f]
15
+ - Updated dependencies [8f53293]
16
+ - Updated dependencies [beb09cd]
17
+ - Updated dependencies [5bd2a95]
18
+ - Updated dependencies [762f749]
19
+ - Updated dependencies [051f0f8]
20
+ - Updated dependencies [b6d77dc]
21
+ - Updated dependencies [8fc65a9]
22
+ - Updated dependencies [e1b78db]
23
+ - Updated dependencies [8f53293]
24
+ - Updated dependencies [051f0f8]
25
+ - @khanacademy/wonder-blocks-core@12.2.0
26
+ - @khanacademy/wonder-blocks-tokens@5.0.0
27
+ - @khanacademy/wonder-blocks-clickable@6.1.2
28
+ - @khanacademy/wonder-blocks-link@8.0.0
29
+ - @khanacademy/wonder-blocks-typography@3.1.2
30
+
31
+ ## 3.1.1
32
+
33
+ ### Patch Changes
34
+
35
+ - ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
36
+ - Updated dependencies [ee8d95a]
37
+ - @khanacademy/wonder-blocks-clickable@6.1.1
38
+ - @khanacademy/wonder-blocks-core@12.1.1
39
+ - @khanacademy/wonder-blocks-link@7.1.1
40
+ - @khanacademy/wonder-blocks-tokens@4.2.1
41
+ - @khanacademy/wonder-blocks-typography@3.1.1
42
+
3
43
  ## 3.1.0
4
44
 
5
45
  ### Minor Changes
package/dist/es/index.js CHANGED
@@ -9,6 +9,9 @@ import { View } from '@khanacademy/wonder-blocks-core';
9
9
  import { LabelXSmall, Body, LabelSmall } from '@khanacademy/wonder-blocks-typography';
10
10
 
11
11
  const _excluded = ["id", "children", "kind", "size", "role", "onClick", "style", "tabIndex", "testId"];
12
+ const {
13
+ semanticColor
14
+ } = tokens;
12
15
  const PillInner = props => {
13
16
  const {
14
17
  children,
@@ -109,53 +112,67 @@ const _generateColorStyles = (clickable, kind) => {
109
112
  let backgroundColor;
110
113
  switch (kind) {
111
114
  case "accent":
112
- backgroundColor = tokens.color.blue;
115
+ backgroundColor = semanticColor.status.notice.foreground;
113
116
  break;
114
117
  case "info":
115
- backgroundColor = tokens.color.fadedBlue16;
118
+ backgroundColor = semanticColor.status.notice.background;
116
119
  break;
117
120
  case "success":
118
- backgroundColor = tokens.color.fadedGreen16;
121
+ backgroundColor = semanticColor.status.success.background;
119
122
  break;
120
123
  case "warning":
121
- backgroundColor = tokens.color.fadedGold16;
124
+ backgroundColor = semanticColor.status.warning.background;
122
125
  break;
123
126
  case "critical":
124
- backgroundColor = tokens.color.fadedRed16;
127
+ backgroundColor = semanticColor.status.critical.background;
125
128
  break;
126
129
  case "transparent":
127
130
  backgroundColor = "transparent";
128
131
  break;
129
132
  case "neutral":
130
133
  default:
131
- backgroundColor = tokens.color.offBlack8;
134
+ backgroundColor = semanticColor.status.neutral.background;
132
135
  }
133
- const activeColor = kind === "neutral" || kind === "transparent" ? tokens.color.offBlack16 : mix(tokens.color.offBlack32, backgroundColor);
134
- const textColor = kind === "accent" ? tokens.color.white : tokens.color.offBlack;
135
- const outlineColor = kind === "critical" ? tokens.color.red : tokens.color.blue;
136
- const activeOutlineColor = kind === "critical" ? tokens.color.activeRed : tokens.color.activeBlue;
137
- const outline = kind === "transparent" ? `1px solid ${tokens.color.offBlack16}` : "none";
136
+ const pressColor = kind === "transparent" ? semanticColor.status.neutral.background : mix(tokens.color.offBlack32, backgroundColor);
137
+ const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
138
+ const theme = {
139
+ default: {
140
+ border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
141
+ background: backgroundColor,
142
+ foreground: textColor
143
+ },
144
+ focus: {
145
+ border: semanticColor.focus.outer
146
+ },
147
+ hover: {
148
+ border: semanticColor.action.primary.progressive.hover.border
149
+ },
150
+ press: {
151
+ border: semanticColor.action.primary.progressive.press.border,
152
+ background: pressColor
153
+ }
154
+ };
138
155
  const colorStyles = {
139
156
  pill: {
140
- backgroundColor: backgroundColor,
141
- outline,
142
- color: textColor,
157
+ backgroundColor: theme.default.background,
158
+ outline: theme.default.border,
159
+ color: theme.default.foreground,
143
160
  alignItems: "center",
144
161
  justifyContent: "center"
145
162
  },
146
163
  clickableWrapper: {
147
- outline,
164
+ outline: theme.default.border,
148
165
  ":hover": {
149
- outline: `2px solid ${outlineColor}`,
166
+ outline: `2px solid ${theme.hover.border}`,
150
167
  outlineOffset: tokens.spacing.xxxxSmall_2
151
168
  },
152
169
  ":active": {
153
- backgroundColor: activeColor,
154
- outline: `2px solid ${activeOutlineColor}`,
170
+ backgroundColor: theme.press.background,
171
+ outline: `2px solid ${theme.press.border}`,
155
172
  outlineOffset: tokens.spacing.xxxxSmall_2
156
173
  },
157
174
  ":focus-visible": {
158
- outline: `2px solid ${outlineColor}`,
175
+ outline: `2px solid ${theme.focus.border}`,
159
176
  outlineOffset: tokens.spacing.xxxxSmall_2
160
177
  }
161
178
  }
package/dist/index.js CHANGED
@@ -9,7 +9,10 @@ var tokens = require('@khanacademy/wonder-blocks-tokens');
9
9
  var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
10
10
  var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
11
11
 
12
- function _interopNamespaceDefault(e) {
12
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
+
14
+ function _interopNamespace(e) {
15
+ if (e && e.__esModule) return e;
13
16
  var n = Object.create(null);
14
17
  if (e) {
15
18
  Object.keys(e).forEach(function (k) {
@@ -22,14 +25,20 @@ function _interopNamespaceDefault(e) {
22
25
  }
23
26
  });
24
27
  }
25
- n.default = e;
28
+ n["default"] = e;
26
29
  return Object.freeze(n);
27
30
  }
28
31
 
29
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
30
- var tokens__namespace = /*#__PURE__*/_interopNamespaceDefault(tokens);
32
+ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
33
+ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
34
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
35
+ var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
36
+ var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
31
37
 
32
38
  const _excluded = ["id", "children", "kind", "size", "role", "onClick", "style", "tabIndex", "testId"];
39
+ const {
40
+ semanticColor
41
+ } = tokens__namespace;
33
42
  const PillInner = props => {
34
43
  const {
35
44
  children,
@@ -58,7 +67,7 @@ const Pill = React__namespace.forwardRef(function Pill(props, ref) {
58
67
  tabIndex,
59
68
  testId
60
69
  } = props,
61
- ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
70
+ ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
62
71
  let wrapperSizeStyle;
63
72
  switch (size) {
64
73
  case "small":
@@ -73,7 +82,7 @@ const Pill = React__namespace.forwardRef(function Pill(props, ref) {
73
82
  const colorStyles = _generateColorStyles(!!onClick, kind);
74
83
  const defaultStyles = [pillStyles.wrapper, colorStyles.pill, wrapperSizeStyle];
75
84
  if (onClick) {
76
- return React__namespace.createElement(Clickable, _extends({
85
+ return React__namespace.createElement(Clickable__default["default"], _extends__default["default"]({
77
86
  id: id,
78
87
  role: role,
79
88
  onClick: onClick,
@@ -85,7 +94,7 @@ const Pill = React__namespace.forwardRef(function Pill(props, ref) {
85
94
  size: size
86
95
  }, children));
87
96
  }
88
- return React__namespace.createElement(wonderBlocksCore.View, _extends({
97
+ return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
89
98
  id: id,
90
99
  role: role,
91
100
  style: [defaultStyles, style],
@@ -130,53 +139,67 @@ const _generateColorStyles = (clickable, kind) => {
130
139
  let backgroundColor;
131
140
  switch (kind) {
132
141
  case "accent":
133
- backgroundColor = tokens__namespace.color.blue;
142
+ backgroundColor = semanticColor.status.notice.foreground;
134
143
  break;
135
144
  case "info":
136
- backgroundColor = tokens__namespace.color.fadedBlue16;
145
+ backgroundColor = semanticColor.status.notice.background;
137
146
  break;
138
147
  case "success":
139
- backgroundColor = tokens__namespace.color.fadedGreen16;
148
+ backgroundColor = semanticColor.status.success.background;
140
149
  break;
141
150
  case "warning":
142
- backgroundColor = tokens__namespace.color.fadedGold16;
151
+ backgroundColor = semanticColor.status.warning.background;
143
152
  break;
144
153
  case "critical":
145
- backgroundColor = tokens__namespace.color.fadedRed16;
154
+ backgroundColor = semanticColor.status.critical.background;
146
155
  break;
147
156
  case "transparent":
148
157
  backgroundColor = "transparent";
149
158
  break;
150
159
  case "neutral":
151
160
  default:
152
- backgroundColor = tokens__namespace.color.offBlack8;
161
+ backgroundColor = semanticColor.status.neutral.background;
153
162
  }
154
- const activeColor = kind === "neutral" || kind === "transparent" ? tokens__namespace.color.offBlack16 : tokens.mix(tokens__namespace.color.offBlack32, backgroundColor);
155
- const textColor = kind === "accent" ? tokens__namespace.color.white : tokens__namespace.color.offBlack;
156
- const outlineColor = kind === "critical" ? tokens__namespace.color.red : tokens__namespace.color.blue;
157
- const activeOutlineColor = kind === "critical" ? tokens__namespace.color.activeRed : tokens__namespace.color.activeBlue;
158
- const outline = kind === "transparent" ? `1px solid ${tokens__namespace.color.offBlack16}` : "none";
163
+ const pressColor = kind === "transparent" ? semanticColor.status.neutral.background : tokens.mix(tokens__namespace.color.offBlack32, backgroundColor);
164
+ const textColor = kind === "accent" ? semanticColor.text.inverse : semanticColor.text.primary;
165
+ const theme = {
166
+ default: {
167
+ border: kind === "transparent" ? `1px solid ${semanticColor.border.primary}` : "none",
168
+ background: backgroundColor,
169
+ foreground: textColor
170
+ },
171
+ focus: {
172
+ border: semanticColor.focus.outer
173
+ },
174
+ hover: {
175
+ border: semanticColor.action.primary.progressive.hover.border
176
+ },
177
+ press: {
178
+ border: semanticColor.action.primary.progressive.press.border,
179
+ background: pressColor
180
+ }
181
+ };
159
182
  const colorStyles = {
160
183
  pill: {
161
- backgroundColor: backgroundColor,
162
- outline,
163
- color: textColor,
184
+ backgroundColor: theme.default.background,
185
+ outline: theme.default.border,
186
+ color: theme.default.foreground,
164
187
  alignItems: "center",
165
188
  justifyContent: "center"
166
189
  },
167
190
  clickableWrapper: {
168
- outline,
191
+ outline: theme.default.border,
169
192
  ":hover": {
170
- outline: `2px solid ${outlineColor}`,
193
+ outline: `2px solid ${theme.hover.border}`,
171
194
  outlineOffset: tokens__namespace.spacing.xxxxSmall_2
172
195
  },
173
196
  ":active": {
174
- backgroundColor: activeColor,
175
- outline: `2px solid ${activeOutlineColor}`,
197
+ backgroundColor: theme.press.background,
198
+ outline: `2px solid ${theme.press.border}`,
176
199
  outlineOffset: tokens__namespace.spacing.xxxxSmall_2
177
200
  },
178
201
  ":focus-visible": {
179
- outline: `2px solid ${outlineColor}`,
202
+ outline: `2px solid ${theme.focus.border}`,
180
203
  outlineOffset: tokens__namespace.spacing.xxxxSmall_2
181
204
  }
182
205
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-pill",
3
- "version": "3.1.0",
3
+ "version": "3.1.2",
4
4
  "design": "v1",
5
5
  "description": "Pill components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -14,18 +14,18 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@babel/runtime": "^7.24.5",
17
- "@khanacademy/wonder-blocks-clickable": "6.1.0",
18
- "@khanacademy/wonder-blocks-core": "12.1.0",
19
- "@khanacademy/wonder-blocks-link": "7.1.0",
20
- "@khanacademy/wonder-blocks-tokens": "4.2.0",
21
- "@khanacademy/wonder-blocks-typography": "3.1.0"
17
+ "@khanacademy/wonder-blocks-clickable": "6.1.2",
18
+ "@khanacademy/wonder-blocks-core": "12.2.0",
19
+ "@khanacademy/wonder-blocks-link": "8.0.0",
20
+ "@khanacademy/wonder-blocks-tokens": "5.0.0",
21
+ "@khanacademy/wonder-blocks-typography": "3.1.2"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "aphrodite": "^1.2.5",
25
25
  "react": "18.2.0"
26
26
  },
27
27
  "devDependencies": {
28
- "@khanacademy/wb-dev-build-settings": "2.1.0"
28
+ "@khanacademy/wb-dev-build-settings": "2.1.1"
29
29
  },
30
30
  "scripts": {
31
31
  "test": "echo \"Error: no test specified\" && exit 1"