[terra-collapsible-menu-view] Update toggle examples (#1728)

cerner · Aug 7, 2023 · b0bcf22 · b0bcf22
1 parent d42d577
commit b0bcf22
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 2 deletions.
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -49,6 +49,7 @@ Cerner Corporation
 - Steven Mason [@smason0]
 - Alla Doroshkevych [@adoroshk]
 - Kol Kheang [@kolkheang]
+- Aaron Johnson [@zxeleven]
 
 [@tbiethman]: https://github.com/tbiethman
 [@mjhenkes]: https://github.com/mjhenkes
@@ -99,3 +100,4 @@ Cerner Corporation
 [@smason0]: https://github.com/smason0
 [@adoroshk]: https://github.com/adoroshk
 [@kolkheang]: https://github.com/kolkheang
+[@zxeleven]: https://github.com/zxeleven
diff --git a/packages/terra-framework-docs/CHANGELOG.md b/packages/terra-framework-docs/CHANGELOG.md
@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Changed
+  * Updated toggle examples for `terra-collapsible-menu-view` to include selectable toggles and toggles within a collapsed menu.
+
 ## 1.31.0 - (August 4, 2023)
 
 * Added

diff --git a/...ocs/src/terra-dev-site/doc/collapsible-menu-view/example/AlwaysCollapsedMenuItemsDemo.jsx b/...ocs/src/terra-dev-site/doc/collapsible-menu-view/example/AlwaysCollapsedMenuItemsDemo.jsx
@@ -8,11 +8,23 @@ class AlwaysCollapsedMenuItemsDemo extends React.Component {
   constructor(props) {
     super(props);
     this.handleDisplayTypeChange = this.handleDisplayTypeChange.bind(this);
+    this.handleToggleOneOnChange = this.handleToggleOneOnChange.bind(this);
+    this.handleToggleTwoOnChange = this.handleToggleTwoOnChange.bind(this);
     this.state = {
+      toggle1Selection: false,
+      toggle2Selection: false,
       displayType: 'tableView',
     };
   }
 
+  handleToggleOneOnChange(event, isSelected) {
+    this.setState({ toggle1Selection: isSelected });
+  }
+
+  handleToggleTwoOnChange(event, isSelected) {
+    this.setState({ toggle2Selection: isSelected });
+  }
+
   handleDisplayTypeChange(event, selectedKey) {
     this.setState({ displayType: selectedKey });
   }
@@ -24,6 +36,19 @@ class AlwaysCollapsedMenuItemsDemo extends React.Component {
           <CollapsibleMenuView.Item text="Always Collapsed Button 1" key="collapsedButton1" />,
           <CollapsibleMenuView.Item text="Always Collapsed Button 2" key="collapsedButton2" />,
           <CollapsibleMenuView.Item text="Always Collapsed Button 3" key="collapsedButton3" />,
+          <CollapsibleMenuView.Toggle
+            text="Always Collapsed Toggle 1"
+            key="toggle1"
+            shouldCloseOnClick={false}
+            onChange={this.handleToggleOneOnChange}
+            isSelected={this.state.toggle1Selection}
+          />,
+          <CollapsibleMenuView.Toggle
+            text="Always Collapsed Toggle 2"
+            key="toggle2"
+            onChange={this.handleToggleTwoOnChange}
+            isSelected={this.state.toggle2Selection}
+          />,
         ]}
       >
         <CollapsibleMenuView.Item text="Collapsible Button 1" key="button1" />

diff --git a/...ork-docs/src/terra-dev-site/doc/collapsible-menu-view/example/CollapsibleMenuViewDemo.jsx b/...ork-docs/src/terra-dev-site/doc/collapsible-menu-view/example/CollapsibleMenuViewDemo.jsx
@@ -14,9 +14,11 @@ class CollapsibleMenuViewDemo extends React.Component {
     this.handleDisplayTypeChange = this.handleDisplayTypeChange.bind(this);
     this.handleToggleOneOnChange = this.handleToggleOneOnChange.bind(this);
     this.handleToggleTwoOnChange = this.handleToggleTwoOnChange.bind(this);
+    this.handleToggleThreeOnChange = this.handleToggleThreeOnChange.bind(this);
     this.state = {
       toggle1Selection: false,
       toggle2Selection: false,
+      toggle3Selection: false,
       displayType: 'tableView',
     };
   }
@@ -29,6 +31,10 @@ class CollapsibleMenuViewDemo extends React.Component {
     this.setState({ toggle2Selection: isSelected });
   }
 
+  handleToggleThreeOnChange(event, isSelected) {
+    this.setState({ toggle3Selection: isSelected });
+  }
+
   handleDisplayTypeChange(event, selectedKey) {
     this.setState({ displayType: selectedKey });
   }
@@ -42,14 +48,21 @@ class CollapsibleMenuViewDemo extends React.Component {
           shouldCloseOnClick={false}
           onChange={this.handleToggleOneOnChange}
           isSelected={this.state.toggle1Selection}
-          isSelectable={false}
         />
         <CollapsibleMenuView.Toggle
           text="Toggle Item 2"
           key="toggle2"
           shouldCloseOnClick={false}
           onChange={this.handleToggleTwoOnChange}
           isSelected={this.state.toggle2Selection}
+          isSelectable={false}
+        />
+        <CollapsibleMenuView.Toggle
+          text="Toggle Item 3"
+          key="toggle3"
+          shouldCloseOnClick={false}
+          onChange={this.handleToggleThreeOnChange}
+          isSelected={this.state.toggle3Selection}
           isDisabled
         />
         <CollapsibleMenuView.Divider key="Divider1" />

diff --git a/.../src/terra-dev-site/doc/collapsible-menu-view/example/CollapsibleMenuViewStartAligned.jsx b/.../src/terra-dev-site/doc/collapsible-menu-view/example/CollapsibleMenuViewStartAligned.jsx
@@ -14,9 +14,11 @@ class CollapsibleMenuViewStartAligned extends React.Component {
     this.handleDisplayTypeChange = this.handleDisplayTypeChange.bind(this);
     this.handleToggleOneOnChange = this.handleToggleOneOnChange.bind(this);
     this.handleToggleTwoOnChange = this.handleToggleTwoOnChange.bind(this);
+    this.handleToggleThreeOnChange = this.handleToggleThreeOnChange.bind(this);
     this.state = {
       toggle1Selection: false,
       toggle2Selection: false,
+      toggle3Selection: false,
       displayType: 'tableView',
     };
   }
@@ -29,6 +31,10 @@ class CollapsibleMenuViewStartAligned extends React.Component {
     this.setState({ toggle2Selection: isSelected });
   }
 
+  handleToggleThreeOnChange(event, isSelected) {
+    this.setState({ toggle3Selection: isSelected });
+  }
+
   handleDisplayTypeChange(event, selectedKey) {
     this.setState({ displayType: selectedKey });
   }
@@ -42,14 +48,21 @@ class CollapsibleMenuViewStartAligned extends React.Component {
           shouldCloseOnClick={false}
           onChange={this.handleToggleOneOnChange}
           isSelected={this.state.toggle1Selection}
-          isSelectable={false}
         />
         <CollapsibleMenuView.Toggle
           text="Toggle Item 2"
           key="toggle2"
           shouldCloseOnClick={false}
           onChange={this.handleToggleTwoOnChange}
           isSelected={this.state.toggle2Selection}
+          isSelectable={false}
+        />
+        <CollapsibleMenuView.Toggle
+          text="Toggle Item 3"
+          key="toggle3"
+          shouldCloseOnClick={false}
+          onChange={this.handleToggleThreeOnChange}
+          isSelected={this.state.toggle3Selection}
           isDisabled
         />
         <CollapsibleMenuView.Divider key="Divider1" />