Replaced toggle with collapseNode and expandNode

Author: jakezatecky

CHANGELOG.md

@@ -4,6 +4,10 @@
 
 ### Breaking Changes
 
+#### Language
+
+* Replaced `toggle` key in `lang` property with `collapseNode` and `expandNode`
+
 #### Styling
 
 * The `iconsClass` property now defaults to `"fa5"` for Font Awesome 5/6 instead of Font Awesome 4

src/js/components/ExpandButton.jsx

@@ -25,19 +25,19 @@ function ExpandButton({
         );
     }
 
-    const icons = useContext(IconContext);
-    const { toggle } = useContext(LanguageContext);
-    const { expandClose, expandOpen } = icons;
-    const collapseIcon = expanded ? expandOpen : expandClose;
+    const { expandClose, expandOpen } = useContext(IconContext);
+    const { collapseNode, expandNode } = useContext(LanguageContext);
+    const icon = expanded ? expandOpen : expandClose;
+    const title = expanded ? collapseNode : expandNode;
 
     return (
         <Button
             className="rct-collapse rct-collapse-btn"
             disabled={disabled}
-            title={toggle}
+            title={title}
             onClick={onClick}
         >
-            {collapseIcon}
+            {icon}
         </Button>
     );
 }

src/js/lang/default.js

@@ -1,5 +1,6 @@
 export default {
     collapseAll: 'Collapse all',
+    collapseNode: 'Collapse',
     expandAll: 'Expand all',
-    toggle: 'Toggle',
+    expandNode: 'Expand',
 };

src/js/shapes/languageShape.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 export default PropTypes.shape({
     collapseAll: PropTypes.string.isRequired,
+    collapseNode: PropTypes.string.isRequired,
     expandAll: PropTypes.string.isRequired,
-    toggle: PropTypes.string.isRequired,
+    expandNode: PropTypes.string.isRequired,
 });

test/CheckboxTree.jsx

@@ -292,16 +292,17 @@ describe('<CheckboxTree />', () => {
             render(
                 <CheckboxTree
                     lang={{
-                        expandAll: 'Expand it',
-                        collapseAll: 'Collapse it',
-                        toggle: 'Toggle it',
+                        expandAll: 'Expand all of it',
+                        expandNode: 'Expand it',
+                        collapseAll: 'Collapse all of it',
+                        collapseNode: 'Collapse it',
                     }}
                     nodes={[]}
                     showExpandAll
                 />,
             );
 
-            assert.isNotNull(screen.queryByLabelText('Expand it'));
+            assert.isNotNull(screen.queryByLabelText('Expand all of it'));
         });
     });
 
@@ -937,7 +938,7 @@ describe('<CheckboxTree />', () => {
             );
 
             const user = userEvent.setup();
-            await user.click(screen.getByLabelText('Toggle'));
+            await user.click(screen.getByLabelText('Expand'));
 
             assert.deepEqual(actualExpanded, ['jupiter']);
         });
@@ -964,7 +965,7 @@ describe('<CheckboxTree />', () => {
             );
 
             const user = userEvent.setup();
-            await user.click(screen.getByLabelText('Toggle'));
+            await user.click(screen.getByLabelText('Expand'));
 
             assert.equal(actualNode.value, 'jupiter');
         });
@@ -1051,7 +1052,7 @@ describe('<CheckboxTree />', () => {
             assert.deepEqual(getNodeMetadata(clickNode), expectedLeafMetadata);
 
             // onExpand
-            await user.click(screen.getByLabelText('Toggle'));
+            await user.click(screen.getByLabelText('Collapse'));
             assert.deepEqual(getNodeMetadata(expandNode), expectedParentMetadata);
         });
     });

test/TreeNode.jsx

@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
 
 import BaseTreeNode from '../src/js/components/TreeNode';
 import { IconContext, LanguageContext } from '../src/js/contexts';
+import lang from '../src/js/lang/default';
 
 const icons = {
     check: <span className="rct-icon rct-icon-check" />,
@@ -17,11 +18,6 @@ const icons = {
     parentOpen: <span className="rct-icon rct-icon-parent-open" />,
     leaf: <span className="rct-icon rct-icon-leaf" />,
 };
-const lang = {
-    collapseAll: 'Collapse',
-    expandAll: 'Expand',
-    toggle: 'Toggle',
-};
 
 const baseProps = {
     checkKeys: [' ', 'Enter'],
@@ -151,7 +147,7 @@ describe('<TreeNode />', () => {
                 <TreeNode {...baseProps} expandDisabled isLeaf={false} />,
             );
 
-            assert.isTrue(screen.getByLabelText('Toggle').disabled);
+            assert.isTrue(screen.getByLabelText('Expand').disabled);
         });
     });
 
@@ -439,7 +435,7 @@ describe('<TreeNode />', () => {
             );
 
             const user = userEvent.setup();
-            await user.click(screen.getByLabelText('Toggle'));
+            await user.click(screen.getByLabelText('Collapse'));
 
             assert.deepEqual(actual, { value: 'jupiter', expanded: false });
         });