@khanacademy/wonder-blocks-accordion 3.1.1 → 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 +20 -0
  2. package/dist/es/index.js +37 -36
  3. package/dist/index.js +37 -36
  4. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
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
+
3
23
  ## 3.1.1
4
24
 
5
25
  ### Patch 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
@@ -101,38 +101,39 @@ const Accordion = React__namespace.forwardRef(function Accordion(props, ref) {
101
101
  break;
102
102
  }
103
103
  };
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
- }));
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
+ );
136
137
  });
137
138
  const styles$2 = aphrodite.StyleSheet.create({
138
139
  wrapper: {
@@ -226,13 +227,13 @@ const styles$1 = aphrodite.StyleSheet.create({
226
227
  position: "relative",
227
228
  zIndex: 1,
228
229
  ":active": {
229
- outline: `2px solid ${wonderBlocksTokens.semanticColor.action.outlined.progressive.press.border}`
230
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`
230
231
  },
231
232
  ":hover": {
232
- outline: `2px solid ${wonderBlocksTokens.semanticColor.border.focus}`
233
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`
233
234
  },
234
235
  ":focus-visible": {
235
- outline: `2px solid ${wonderBlocksTokens.semanticColor.border.focus}`
236
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
236
237
  }
237
238
  },
238
239
  headerWrapperWithAnimation: {
@@ -281,7 +282,7 @@ const styles$1 = aphrodite.StyleSheet.create({
281
282
  pointerEvents: "none",
282
283
  color: "inherit",
283
284
  ":focus-visible": {
284
- outline: `2px solid ${wonderBlocksTokens.semanticColor.action.disabled.default}`
285
+ outline: `2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`
285
286
  }
286
287
  }
287
288
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-accordion",
3
- "version": "3.1.1",
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.1",
18
- "@khanacademy/wonder-blocks-core": "12.1.1",
19
- "@khanacademy/wonder-blocks-icon": "5.1.1",
20
- "@khanacademy/wonder-blocks-tokens": "4.2.1",
21
- "@khanacademy/wonder-blocks-typography": "3.1.1"
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",