docs(many): function based examples are added to ToggleButton, Trucat…

…eText and TimeSelect Closes: INSTUI-4153
instructure · Aug 14, 2024 · 6e96579 · 6e96579
1 parent 3d7611b
commit 6e96579
Show file tree

Hide file tree

Showing 3 changed files with 185 additions and 89 deletions.
diff --git a/packages/ui-buttons/src/ToggleButton/README.md b/packages/ui-buttons/src/ToggleButton/README.md
@@ -5,23 +5,43 @@ describes: ToggleButton
 `ToggleButton` is a controlled button component used for toggling a status or setting
 between one of two states (locked/unlocked, published/unpublished, etc.).
 
-```javascript
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    locked: 'off'
-  }
+- ```javascript
+  class Example extends React.Component {
+    state = {
+      locked: false
+    }
+
+    handleLocked = (e) => {
+      this.setState((prevState) => ({ locked: !prevState.locked }))
+    }
 
-  handleLocked = (e) => {
-    this.setState(function(prevState) {
-      return {locked: prevState.locked === 'on' ? 'off' : 'on'}
-    })
+    render() {
+      const locked = this.state.locked
+
+      return (
+        <View as="div" padding="x-large" id="toggleContainer">
+          <ToggleButton
+            status={locked ? 'pressed' : 'unpressed'}
+            color={locked ? 'danger' : 'secondary'}
+            renderIcon={locked ? IconLockSolid : IconUnlockLine}
+            screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
+            renderTooltipContent={locked ? 'Unlock' : 'Lock'}
+            onClick={this.handleLocked}
+          />
+        </View>
+      )
+    }
   }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [locked, setLocked] = useState(false)
 
-  render () {
-    const locked = this.state.locked === 'on'
+    const handleLocked = () => {
+      setLocked(!locked)
+    }
 
     return (
       <View as="div" padding="x-large" id="toggleContainer">
@@ -31,53 +51,80 @@ class Example extends React.Component {
           renderIcon={locked ? IconLockSolid : IconUnlockLine}
           screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
           renderTooltipContent={locked ? 'Unlock' : 'Lock'}
-          onClick={this.handleLocked}
-          mountNode={() => document.getElementById('toggleContainer')}
+          onClick={handleLocked}
         />
       </View>
     )
   }
-}
-render(<Example />)
-```
+
+  render(<Example />)
+  ```
 
 ### Inverse ToggleButton
 
-```javascript
----
-type: example
----
-class InverseExample extends React.Component {
-  state = {
-    locked: 'off'
-  }
+- ```javascript
+  class InverseExample extends React.Component {
+    state = {
+      locked: false
+    }
+
+    handleLocked = (e) => {
+      this.setState((prevState) => ({ locked: !prevState.locked }))
+    }
 
-  handleLocked = (e) => {
-    this.setState(function(prevState) {
-      return {locked: prevState.locked === 'on' ? 'off' : 'on'}
-    })
+    render() {
+      const locked = this.state.locked
+
+      return (
+        <View
+          as="div"
+          padding="xx-large"
+          background="primary-inverse"
+          id="inverseToggleContainer"
+        >
+          <ToggleButton
+            status={locked ? 'pressed' : 'unpressed'}
+            color="primary-inverse"
+            renderIcon={locked ? IconLockSolid : IconUnlockLine}
+            screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
+            renderTooltipContent={locked ? 'Unlock' : 'Lock'}
+            onClick={this.handleLocked}
+          />
+        </View>
+      )
+    }
   }
+  render(<InverseExample />)
+  ```
+
+- ```js
+  const InverseExample = () => {
+    const [locked, setLocked] = useState(false)
 
-  render () {
-    const locked = this.state.locked === 'on'
+    const handleLocked = () => {
+      setLocked(!locked)
+    }
 
     return (
-      <View as="div" padding="xx-large" background="primary-inverse" id="inverseToggleContainer">
+      <View
+        as="div"
+        padding="xx-large"
+        background="primary-inverse"
+        id="inverseToggleContainer"
+      >
         <ToggleButton
           status={locked ? 'pressed' : 'unpressed'}
           color="primary-inverse"
           renderIcon={locked ? IconLockSolid : IconUnlockLine}
           screenReaderLabel={locked ? 'Unlock assignment' : 'Lock assignment'}
           renderTooltipContent={locked ? 'Unlock' : 'Lock'}
-          onClick={this.handleLocked}
-          mountNode={() => document.getElementById('inverseToggleContainer')}
+          onClick={handleLocked}
         />
       </View>
     )
   }
-}
-render(<InverseExample />)
-```
+  render(<InverseExample />)
+  ```
 
 ### Guidelines
 

diff --git a/packages/ui-time-select/src/TimeSelect/README.md b/packages/ui-time-select/src/TimeSelect/README.md
@@ -24,36 +24,54 @@ type: example
 
 To use `TimeSelect` controlled, simply provide the `value` prop an ISO string. The `onChange` callback provides the ISO value of the corresponding option that was selected. Use this value to update the state.
 
-```javascript
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    value: '2020-05-18T23:59:00'
-  }
+- ```javascript
+  class Example extends React.Component {
+    state = {
+      value: '2020-05-18T23:59:00'
+    }
 
-  handleChange = (e, { value }) => {
-    this.setState({ value })
+    handleChange = (e, { value }) => {
+      this.setState({ value })
+    }
+
+    render() {
+      return (
+        <TimeSelect
+          renderLabel="Choose a time"
+          placeholder="e.g., 4:00:00 PM"
+          value={this.state.value}
+          step={15}
+          format="LTS"
+          onChange={this.handleChange}
+        />
+      )
+    }
   }
+  render(<Example />)
+  ```
+
+- ```js
+  const Example = () => {
+    const [value, setValue] = useState('2020-05-18T23:59:00')
+
+    const handleChange = (e, { value }) => {
+      setValue(value)
+    }
 
-  render () {
     return (
       <TimeSelect
         renderLabel="Choose a time"
         placeholder="e.g., 4:00:00 PM"
-        value={this.state.value}
+        value={value}
         step={15}
         format="LTS"
-        onChange={this.handleChange}
+        onChange={handleChange}
       />
     )
   }
-}
-render(
-  <Example />
-)
-```
+
+  render(<Example />)
+  ```
 
 ### Freeform input
 

diff --git a/packages/ui-truncate-text/src/TruncateText/README.md b/packages/ui-truncate-text/src/TruncateText/README.md
@@ -169,54 +169,85 @@ type: example
 
 It's best practice to make the complete text of a truncated element available via a [Tooltip](#Tooltip).
 
-```js
----
-type: example
----
-class Example extends React.Component {
-  state = {
-    isTruncated: false
-  }
+- ```js
+  class Example extends React.Component {
+    state = {
+      isTruncated: false
+    }
+
+    handleUpdate = (isTruncated) => {
+      if (this.state.isTruncated !== isTruncated) {
+        this.setState({ isTruncated })
+      }
+    }
+
+    renderLink() {
+      return (
+        <Link href="#">
+          <TruncateText onUpdate={this.handleUpdate}>
+            {this.props.message}
+          </TruncateText>
+        </Link>
+      )
+    }
 
-  handleUpdate = (isTruncated) => {
-    if (this.state.isTruncated !== isTruncated) {
-      this.setState({ isTruncated })
+    render() {
+      return (
+        <View as="div" padding="xx-small none" maxWidth="230px" withVisualDebug>
+          {this.state.isTruncated ? (
+            <Tooltip
+              renderTip={this.props.message}
+              mountNode={() => document.getElementById('main')}
+            >
+              {this.renderLink()}
+            </Tooltip>
+          ) : (
+            this.renderLink()
+          )}
+        </View>
+      )
     }
   }
+  render(
+    <Example message="A tooltip will display only when this text is truncated" />
+  )
+  ```
 
-  renderLink () {
-    return (
+- ```js
+  const Example = (props) => {
+    const [isTruncated, setIsTruncated] = useState(false)
+
+    const handleUpdate = (newIsTruncated) => {
+      if (isTruncated !== newIsTruncated) {
+        setIsTruncated(newIsTruncated)
+      }
+    }
+
+    const renderLink = () => (
       <Link href="#">
-        <TruncateText onUpdate={this.handleUpdate}>
-          {this.props.message}
-        </TruncateText>
+        <TruncateText onUpdate={handleUpdate}>{props.message}</TruncateText>
       </Link>
     )
-  }
 
-  render () {
     return (
-      <View
-        as="div"
-        padding="xx-small none"
-        maxWidth="230px"
-        withVisualDebug
-      >
-        {this.state.isTruncated ? (
+      <View as="div" padding="xx-small none" maxWidth="230px" withVisualDebug>
+        {isTruncated ? (
           <Tooltip
-            renderTip={this.props.message}
+            renderTip={props.message}
             mountNode={() => document.getElementById('main')}
           >
-            { this.renderLink() }
+            {renderLink()}
           </Tooltip>
-        ) : this.renderLink()}
+        ) : (
+          renderLink()
+        )}
       </View>
     )
   }
-}
-
-render(<Example message="A tooltip will display only when this text is truncated" />)
-```
+  render(
+    <Example message="A tooltip will display only when this text is truncated" />
+  )
+  ```
 
 ### Guidelines