Hookify AccountConnect, ActionList and AppProvider examples

UNRELEASED.md

@@ -16,6 +16,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Converted `Form`, `Frame`, and `Loading` examples to functional components ([#2130](https://github.com/Shopify/polaris-react/pull/2130))
 - Replaced Latin abbreviations with English words in Text field content guidelines ([#2192](https://github.com/Shopify/polaris-react/pull/2192))
+- Converted `SettingToggle`, `Sheet`, and `Tabs` examples to functional components ([#2134](https://github.com/Shopify/polaris-react/pull/2134))
 
 ### Development workflow
 

src/components/AccountConnection/README.md

@@ -106,50 +106,38 @@ Connect to app
 Use to let merchants connect or disconnect their store to their third-party accounts, like Facebook.
 
 ```jsx
-class AccountConnectionExample extends React.Component {
-  state = {
-    connected: false,
-    accountName: '',
-  };
-
-  render() {
-    const {accountName, connected} = this.state;
-    const buttonText = connected ? 'Disconnect' : 'Connect';
-    const details = connected ? 'Account connected' : 'No account connected';
-    const terms = connected ? null : (
-      <p>
-        By clicking <strong>Connect</strong>, you agree to accept Sample App’s{' '}
-        <Link url="Example App">terms and conditions</Link>. You’ll pay a
-        commission rate of 15% on sales made through Sample App.
-      </p>
-    );
-
-    return (
-      <AccountConnection
-        accountName={accountName}
-        connected={connected}
-        title="Example App"
-        action={{
-          content: buttonText,
-          onAction: this.handleAction,
-        }}
-        details={details}
-        termsOfService={terms}
-      />
-    );
-  }
-
-  handleAction = () => {
-    this.setState((state) => {
-      const connected = !state.connected;
-      const accountName = connected ? 'Jane Appleseed' : '';
-
-      return {
-        connected,
-        accountName,
-      };
-    });
-  };
+function AccountConnectionExample() {
+  const [connected, setConnected] = useState(false);
+  const accountName = connected ? 'Jane Appleseed' : '';
+
+  const handleAction = useCallback(() => {
+    const newConnected = !connected;
+    setConnected((connected) => !connected);
+  }, [connected]);
+
+  const buttonText = connected ? 'Disconnect' : 'Connect';
+  const details = connected ? 'Account connected' : 'No account connected';
+  const terms = connected ? null : (
+    <p>
+      By clicking <strong>Connect</strong>, you agree to accept Sample App’s{' '}
+      <Link url="Example App">terms and conditions</Link>. You’ll pay a
+      commission rate of 15% on sales made through Sample App.
+    </p>
+  );
+
+  return (
+    <AccountConnection
+      accountName={accountName}
+      connected={connected}
+      title="Example App"
+      action={{
+        content: buttonText,
+        onAction: handleAction,
+      }}
+      details={details}
+      termsOfService={terms}
+    />
+  );
 }
 ```