@khanacademy/wonder-blocks-accordion 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 +32 -0
  2. package/dist/es/index.js +37 -36
  3. package/dist/index.js +55 -45
  4. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,37 @@
1
1
  # @khanacademy/wonder-blocks-accordion
2
2
 
3
+ ## 3.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - 5655b9f: Switch to use `focus.outer` semanticColor token
8
+ - 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
9
+ - Updated dependencies [ed26d66]
10
+ - Updated dependencies [5655b9f]
11
+ - Updated dependencies [5655b9f]
12
+ - Updated dependencies [8f53293]
13
+ - Updated dependencies [051f0f8]
14
+ - Updated dependencies [8fc65a9]
15
+ - Updated dependencies [e1b78db]
16
+ - Updated dependencies [051f0f8]
17
+ - @khanacademy/wonder-blocks-core@12.2.0
18
+ - @khanacademy/wonder-blocks-tokens@5.0.0
19
+ - @khanacademy/wonder-blocks-clickable@6.1.2
20
+ - @khanacademy/wonder-blocks-icon@5.1.2
21
+ - @khanacademy/wonder-blocks-typography@3.1.2
22
+
23
+ ## 3.1.1
24
+
25
+ ### Patch Changes
26
+
27
+ - ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
28
+ - Updated dependencies [ee8d95a]
29
+ - @khanacademy/wonder-blocks-clickable@6.1.1
30
+ - @khanacademy/wonder-blocks-core@12.1.1
31
+ - @khanacademy/wonder-blocks-icon@5.1.1
32
+ - @khanacademy/wonder-blocks-tokens@4.2.1
33
+ - @khanacademy/wonder-blocks-typography@3.1.1
34
+
3
35
  ## 3.1.0
4
36
 
5
37
  ### Minor Changes
package/dist/es/index.js CHANGED
@@ -72,38 +72,39 @@ const Accordion = React.forwardRef(function Accordion(props, ref) {
72
72
  break;
73
73
  }
74
74
  };
75
- return React.createElement(StyledUl, _extends({
76
- style: [styles$2.wrapper, style],
77
- onKeyDown: handleKeyDown
78
- }, ariaProps, {
79
- ref: ref
80
- }), children.map((child, index) => {
81
- const {
82
- caretPosition: childCaretPosition,
83
- cornerKind: childCornerKind,
84
- onToggle: childOnToggle,
85
- animated: childAnimated
86
- } = child.props;
87
- const childRef = React.createRef();
88
- childRefs[index] = childRef;
89
- const isFirstChild = index === 0;
90
- const isLastChild = index === children.length - 1;
91
- return (React.createElement("li", {
92
- key: index,
93
- id: id
94
- }, React.cloneElement(child, {
95
- animated: childAnimated != null ? childAnimated : animated,
96
- caretPosition: childCaretPosition != null ? childCaretPosition : caretPosition,
97
- cornerKind: childCornerKind != null ? childCornerKind : cornerKind,
98
- expanded: sectionsOpened[index],
99
- onToggle: () => handleSectionClick(index, childOnToggle),
100
- isFirstSection: isFirstChild,
101
- isLastSection: isLastChild,
102
- isRegion: sectionsAreRegions,
103
- ref: childRef
104
- }))
105
- );
106
- }));
75
+ return (React.createElement(StyledUl, _extends({
76
+ style: [styles$2.wrapper, style],
77
+ onKeyDown: handleKeyDown
78
+ }, ariaProps, {
79
+ ref: ref
80
+ }), children.map((child, index) => {
81
+ const {
82
+ caretPosition: childCaretPosition,
83
+ cornerKind: childCornerKind,
84
+ onToggle: childOnToggle,
85
+ animated: childAnimated
86
+ } = child.props;
87
+ const childRef = React.createRef();
88
+ childRefs[index] = childRef;
89
+ const isFirstChild = index === 0;
90
+ const isLastChild = index === children.length - 1;
91
+ return (React.createElement("li", {
92
+ key: index,
93
+ id: id
94
+ }, React.cloneElement(child, {
95
+ animated: childAnimated != null ? childAnimated : animated,
96
+ caretPosition: childCaretPosition != null ? childCaretPosition : caretPosition,
97
+ cornerKind: childCornerKind != null ? childCornerKind : cornerKind,
98
+ expanded: sectionsOpened[index],
99
+ onToggle: () => handleSectionClick(index, childOnToggle),
100
+ isFirstSection: isFirstChild,
101
+ isLastSection: isLastChild,
102
+ isRegion: sectionsAreRegions,
103
+ ref: childRef
104
+ }))
105
+ );
106
+ }))
107
+ );
107
108
  });
108
109
  const styles$2 = StyleSheet.create({
109
110
  wrapper: {
@@ -197,13 +198,13 @@ const styles$1 = StyleSheet.create({
197
198
  position: "relative",
198
199
  zIndex: 1,
199
200
  ":active": {
200
- outline: `2px solid ${semanticColor.action.outlined.progressive.press.border}`
201
+ outline: `2px solid ${semanticColor.action.secondary.progressive.press.border}`
201
202
  },
202
203
  ":hover": {
203
- outline: `2px solid ${semanticColor.border.focus}`
204
+ outline: `2px solid ${semanticColor.action.secondary.progressive.hover.border}`
204
205
  },
205
206
  ":focus-visible": {
206
- outline: `2px solid ${semanticColor.border.focus}`
207
+ outline: `2px solid ${semanticColor.focus.outer}`
207
208
  }
208
209
  },
209
210
  headerWrapperWithAnimation: {
@@ -252,7 +253,7 @@ const styles$1 = StyleSheet.create({
252
253
  pointerEvents: "none",
253
254
  color: "inherit",
254
255
  ":focus-visible": {
255
- outline: `2px solid ${semanticColor.action.disabled.default}`
256
+ outline: `2px solid ${semanticColor.focus.outer}`
256
257
  }
257
258
  }
258
259
  });
package/dist/index.js CHANGED
@@ -1,5 +1,7 @@
1
1
  'use strict';
2
2
 
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
3
5
  var _extends = require('@babel/runtime/helpers/extends');
4
6
  var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
5
7
  var React = require('react');
@@ -11,7 +13,10 @@ var caretDown = require('@phosphor-icons/core/bold/caret-down-bold.svg');
11
13
  var Clickable = require('@khanacademy/wonder-blocks-clickable');
12
14
  var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
13
15
 
14
- function _interopNamespaceDefault(e) {
16
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
17
+
18
+ function _interopNamespace(e) {
19
+ if (e && e.__esModule) return e;
15
20
  var n = Object.create(null);
16
21
  if (e) {
17
22
  Object.keys(e).forEach(function (k) {
@@ -24,11 +29,15 @@ function _interopNamespaceDefault(e) {
24
29
  }
25
30
  });
26
31
  }
27
- n.default = e;
32
+ n["default"] = e;
28
33
  return Object.freeze(n);
29
34
  }
30
35
 
31
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
36
+ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
37
+ var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
38
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
39
+ var caretDown__default = /*#__PURE__*/_interopDefaultLegacy(caretDown);
40
+ var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
32
41
 
33
42
  const _excluded$1 = ["children", "id", "initialExpandedIndex", "allowMultipleExpanded", "caretPosition", "cornerKind", "animated", "style"];
34
43
  const StyledUl = wonderBlocksCore.addStyle("ul");
@@ -44,7 +53,7 @@ const Accordion = React__namespace.forwardRef(function Accordion(props, ref) {
44
53
  animated,
45
54
  style
46
55
  } = props,
47
- ariaProps = _objectWithoutPropertiesLoose(props, _excluded$1);
56
+ ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
48
57
  const startingArray = Array(children.length).fill(false);
49
58
  if (initialExpandedIndex !== undefined) {
50
59
  startingArray[initialExpandedIndex] = true;
@@ -92,38 +101,39 @@ const Accordion = React__namespace.forwardRef(function Accordion(props, ref) {
92
101
  break;
93
102
  }
94
103
  };
95
- return React__namespace.createElement(StyledUl, _extends({
96
- style: [styles$2.wrapper, style],
97
- onKeyDown: handleKeyDown
98
- }, ariaProps, {
99
- ref: ref
100
- }), children.map((child, index) => {
101
- const {
102
- caretPosition: childCaretPosition,
103
- cornerKind: childCornerKind,
104
- onToggle: childOnToggle,
105
- animated: childAnimated
106
- } = child.props;
107
- const childRef = React__namespace.createRef();
108
- childRefs[index] = childRef;
109
- const isFirstChild = index === 0;
110
- const isLastChild = index === children.length - 1;
111
- return (React__namespace.createElement("li", {
112
- key: index,
113
- id: id
114
- }, React__namespace.cloneElement(child, {
115
- animated: childAnimated != null ? childAnimated : animated,
116
- caretPosition: childCaretPosition != null ? childCaretPosition : caretPosition,
117
- cornerKind: childCornerKind != null ? childCornerKind : cornerKind,
118
- expanded: sectionsOpened[index],
119
- onToggle: () => handleSectionClick(index, childOnToggle),
120
- isFirstSection: isFirstChild,
121
- isLastSection: isLastChild,
122
- isRegion: sectionsAreRegions,
123
- ref: childRef
124
- }))
125
- );
126
- }));
104
+ return (React__namespace.createElement(StyledUl, _extends__default["default"]({
105
+ style: [styles$2.wrapper, style],
106
+ onKeyDown: handleKeyDown
107
+ }, ariaProps, {
108
+ ref: ref
109
+ }), children.map((child, index) => {
110
+ const {
111
+ caretPosition: childCaretPosition,
112
+ cornerKind: childCornerKind,
113
+ onToggle: childOnToggle,
114
+ animated: childAnimated
115
+ } = child.props;
116
+ const childRef = React__namespace.createRef();
117
+ childRefs[index] = childRef;
118
+ const isFirstChild = index === 0;
119
+ const isLastChild = index === children.length - 1;
120
+ return (React__namespace.createElement("li", {
121
+ key: index,
122
+ id: id
123
+ }, React__namespace.cloneElement(child, {
124
+ animated: childAnimated != null ? childAnimated : animated,
125
+ caretPosition: childCaretPosition != null ? childCaretPosition : caretPosition,
126
+ cornerKind: childCornerKind != null ? childCornerKind : cornerKind,
127
+ expanded: sectionsOpened[index],
128
+ onToggle: () => handleSectionClick(index, childOnToggle),
129
+ isFirstSection: isFirstChild,
130
+ isLastSection: isLastChild,
131
+ isRegion: sectionsAreRegions,
132
+ ref: childRef
133
+ }))
134
+ );
135
+ }))
136
+ );
127
137
  });
128
138
  const styles$2 = aphrodite.StyleSheet.create({
129
139
  wrapper: {
@@ -179,7 +189,7 @@ const AccordionSectionHeader = React__namespace.forwardRef(function AccordionSec
179
189
  return React__namespace.createElement(wonderBlocksTypography.HeadingSmall, {
180
190
  tag: tag,
181
191
  style: styles$1.heading
182
- }, React__namespace.createElement(Clickable, {
192
+ }, React__namespace.createElement(Clickable__default["default"], {
183
193
  id: id,
184
194
  "aria-expanded": expanded,
185
195
  "aria-controls": sectionContentUniqueId,
@@ -193,7 +203,7 @@ const AccordionSectionHeader = React__namespace.forwardRef(function AccordionSec
193
203
  }, headerIsString ? React__namespace.createElement(wonderBlocksCore.View, {
194
204
  style: [caretPosition === "end" ? styles$1.headerStringCaretEnd : styles$1.headerStringCaretStart]
195
205
  }, header) : header), collapsible && React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
196
- icon: caretDown,
206
+ icon: caretDown__default["default"],
197
207
  color: wonderBlocksTokens.semanticColor.icon.primary,
198
208
  size: "small",
199
209
  style: [animated && styles$1.iconWithAnimation, caretPosition === "start" ? styles$1.iconStart : styles$1.iconEnd, expanded && styles$1.iconExpanded],
@@ -217,13 +227,13 @@ const styles$1 = aphrodite.StyleSheet.create({
217
227
  position: "relative",
218
228
  zIndex: 1,
219
229
  ":active": {
220
- outline: `2px solid ${wonderBlocksTokens.semanticColor.action.outlined.progressive.press.border}`
230
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`
221
231
  },
222
232
  ":hover": {
223
- outline: `2px solid ${wonderBlocksTokens.semanticColor.border.focus}`
233
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`
224
234
  },
225
235
  ":focus-visible": {
226
- outline: `2px solid ${wonderBlocksTokens.semanticColor.border.focus}`
236
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
227
237
  }
228
238
  },
229
239
  headerWrapperWithAnimation: {
@@ -272,7 +282,7 @@ const styles$1 = aphrodite.StyleSheet.create({
272
282
  pointerEvents: "none",
273
283
  color: "inherit",
274
284
  ":focus-visible": {
275
- outline: `2px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`
285
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
276
286
  }
277
287
  }
278
288
  });
@@ -297,7 +307,7 @@ const AccordionSection = React__namespace.forwardRef(function AccordionSection(p
297
307
  isLastSection = true,
298
308
  isRegion = true
299
309
  } = props,
300
- ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
310
+ ariaProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
301
311
  const [internalExpanded, setInternalExpanded] = React__namespace.useState(expanded != null ? expanded : false);
302
312
  const controlledMode = expanded !== undefined && onToggle;
303
313
  const uniqueSectionId = React.useId();
@@ -322,7 +332,7 @@ const AccordionSection = React__namespace.forwardRef(function AccordionSection(p
322
332
  } else {
323
333
  expandedState = controlledMode ? expanded : internalExpanded;
324
334
  }
325
- return React__namespace.createElement(wonderBlocksCore.View, _extends({
335
+ return React__namespace.createElement(wonderBlocksCore.View, _extends__default["default"]({
326
336
  id: sectionId,
327
337
  style: [styles.wrapper, animated && styles.wrapperWithAnimation, sectionStyles.wrapper, expandedState ? styles.wrapperExpanded : styles.wrapperCollapsed, style],
328
338
  testId: testId
@@ -439,7 +449,7 @@ const _generateStyles = (cornerKind, isFirstSection, isLastSection) => {
439
449
  };
440
450
  }
441
451
  const newStyles = {
442
- wrapper: _extends({}, wrapperStyle, firstSectionStyle, lastSectionStyle),
452
+ wrapper: _extends__default["default"]({}, wrapperStyle, firstSectionStyle, lastSectionStyle),
443
453
  contentWrapper: contentWrapperStyle
444
454
  };
445
455
  cornerStyles[sectionType] = aphrodite.StyleSheet.create(newStyles);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-accordion",
3
- "version": "3.1.0",
3
+ "version": "3.1.2",
4
4
  "design": "v1",
5
5
  "description": "Accordion components for Wonder Blocks.",
6
6
  "main": "dist/index.js",
@@ -14,11 +14,11 @@
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-icon": "5.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-icon": "5.1.2",
20
+ "@khanacademy/wonder-blocks-tokens": "5.0.0",
21
+ "@khanacademy/wonder-blocks-typography": "3.1.2"
22
22
  },
23
23
  "peerDependencies": {
24
24
  "@phosphor-icons/core": "^2.0.2",
@@ -26,7 +26,7 @@
26
26
  "react": "18.2.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@khanacademy/wb-dev-build-settings": "2.1.0"
29
+ "@khanacademy/wb-dev-build-settings": "2.1.1"
30
30
  },
31
31
  "scripts": {
32
32
  "test": "echo \"Error: no test specified\" && exit 1"