@instructure/ui-toggle-details 10.2.3-snapshot-3 → 10.2.3-snapshot-5

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.2.3-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-3) (2024-09-20)
+## [10.2.3-snapshot-5](https://github.com/instructure/instructure-ui/compare/v10.2.2...v10.2.3-snapshot-5) (2024-09-24)
 
 **Note:** Version bump only for package @instructure/ui-toggle-details
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-toggle-details",
-  "version": "10.2.3-snapshot-3",
+  "version": "10.2.3-snapshot-5",
   "description": "A styled toggleable, accordion-like component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.2.3-snapshot-3",
-    "@instructure/ui-test-locator": "10.2.3-snapshot-3",
-    "@instructure/ui-test-queries": "10.2.3-snapshot-3",
-    "@instructure/ui-test-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-themes": "10.2.3-snapshot-3"
+    "@instructure/ui-babel-preset": "10.2.3-snapshot-5",
+    "@instructure/ui-test-locator": "10.2.3-snapshot-5",
+    "@instructure/ui-test-queries": "10.2.3-snapshot-5",
+    "@instructure/ui-test-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-themes": "10.2.3-snapshot-5"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "10.2.3-snapshot-3",
-    "@instructure/shared-types": "10.2.3-snapshot-3",
-    "@instructure/ui-buttons": "10.2.3-snapshot-3",
-    "@instructure/ui-dom-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-expandable": "10.2.3-snapshot-3",
-    "@instructure/ui-flex": "10.2.3-snapshot-3",
-    "@instructure/ui-icons": "10.2.3-snapshot-3",
-    "@instructure/ui-motion": "10.2.3-snapshot-3",
-    "@instructure/ui-prop-types": "10.2.3-snapshot-3",
-    "@instructure/ui-react-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-testable": "10.2.3-snapshot-3",
-    "@instructure/ui-utils": "10.2.3-snapshot-3",
-    "@instructure/ui-view": "10.2.3-snapshot-3",
-    "@instructure/uid": "10.2.3-snapshot-3",
+    "@instructure/emotion": "10.2.3-snapshot-5",
+    "@instructure/shared-types": "10.2.3-snapshot-5",
+    "@instructure/ui-buttons": "10.2.3-snapshot-5",
+    "@instructure/ui-dom-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-expandable": "10.2.3-snapshot-5",
+    "@instructure/ui-flex": "10.2.3-snapshot-5",
+    "@instructure/ui-icons": "10.2.3-snapshot-5",
+    "@instructure/ui-motion": "10.2.3-snapshot-5",
+    "@instructure/ui-prop-types": "10.2.3-snapshot-5",
+    "@instructure/ui-react-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-testable": "10.2.3-snapshot-5",
+    "@instructure/ui-utils": "10.2.3-snapshot-5",
+    "@instructure/ui-view": "10.2.3-snapshot-5",
+    "@instructure/uid": "10.2.3-snapshot-5",
     "prop-types": "^15.8.1"
   },
   "peerDependencies": {

package/src/ToggleDetails/README.md

@@ -20,42 +20,73 @@ type: example
 
 ToggleDetails can be controlled:
 
-```js
----
-type: example
----
+- ```js
+  class Example extends React.Component {
+    state = {
+      expanded: true
+    }
+
+    handleChange = (event, expanded) => this.setState({ expanded })
+
+    handleToggle = () => this.setState({ expanded: !this.state.expanded })
+
+    render() {
+      return (
+        <div>
+          <Button onClick={this.handleToggle}>
+            This Button {this.state.expanded ? 'Collapses' : 'Expands'}
+          </Button>
+          <br />
+          <br />
+          <ToggleDetails
+            summary="Click to hide me!"
+            expanded={this.state.expanded}
+            onToggle={this.handleChange}
+          >
+            <Text weight="bold">I am controlled and expanded!</Text>{' '}
+            {lorem.paragraph()}
+          </ToggleDetails>
+        </div>
+      )
+    }
+  }
 
-class Example extends React.Component {
-  state = {
-    expanded: true
-  };
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [expanded, setExpanded] = useState(true)
 
-  handleChange = (event, expanded) => this.setState({ expanded });
+    const handleChange = (event, expanded) => {
+      setExpanded(expanded)
+    }
 
-  handleToggle = () => this.setState({ expanded: !this.state.expanded });
+    const handleToggle = () => {
+      setExpanded((prevExpanded) => !prevExpanded)
+    }
 
-  render () {
     return (
       <div>
-        <Button onClick={this.handleToggle}>
-          This Button {this.state.expanded ? 'Collapses' : 'Expands'}
+        <Button onClick={handleToggle}>
+          This Button {expanded ? 'Collapses' : 'Expands'}
         </Button>
         <br />
         <br />
         <ToggleDetails
           summary="Click to hide me!"
-          expanded={this.state.expanded}
-          onToggle={this.handleChange}
+          expanded={expanded}
+          onToggle={handleChange}
         >
-          <Text weight="bold">I am controlled and expanded!</Text> {lorem.paragraph()}
+          <Text weight="bold">I am controlled and expanded!</Text>
+          {lorem.paragraph()}
         </ToggleDetails>
       </div>
-      )
+    )
   }
-}
 
-render(<Example />)
-```
+  render(<Example />)
+  ```
 
 Setting ToggleDetails to `filled` will make the toggle use a full-width [Button](#Button) component.