fix(toast): Display JS code in example

dataesr · Mar 18, 2024 · 729b2f4 · 729b2f4
1 parent 1ce42fe
commit 729b2f4
Showing 1 changed file with 40 additions and 36 deletions.
diff --git a/example-ts/src/pages/components/Toasts.tsx b/example-ts/src/pages/components/Toasts.tsx
@@ -3,42 +3,12 @@ import { Breadcrumb, Button, Col, Container, Link, Row, Text, Title, useToast }
 import Playground from '../../components/Playground';
 
 const toaster = `
-<div>
-  <div>
-    <Button
-      className="fr-mb-1w"
-      onClick={displayToastError}
-      size="sm"
-    >
-      Test error toast, removed after 3 seconds
-    </Button>
-  </div>
-  <div>
-    <Button
-      className="fr-mb-1w"
-      onClick={(displayToastSuccess)}
-      size="sm"
-    >
-      Test successfull toast, never automatically removed
-    </Button>
-  </div>
-  <div>
-    <Button
-      onClick={(displayToastWarning)}
-      size="sm"
-    >
-      Test warning toast, removed after 10 seconds
-    </Button>
-  </div>
-</div>
-`;
-
-export function Toasts() {
+() => {
   const { toast } = useToast();
 
-  let displayToastError =  () => {};
-  let displayToastSuccess =  () => {};
-  let displayToastWarning =  () => {};
+  let displayToastError = () => { };
+  let displayToastSuccess = () => { };
+  let displayToastWarning = () => { };
 
   if (toast) {
     displayToastError = () => {
@@ -59,7 +29,7 @@ export function Toasts() {
         type: 'success',
       });
     };
-  
+
     displayToastWarning = () => {
       toast({
         autoDismissAfter: 10000,
@@ -71,6 +41,40 @@ export function Toasts() {
     };
   }
 
+  return (
+    <div>
+      <div>
+        <Button
+          className="fr-mb-1w"
+          onClick={displayToastError}
+          size="sm"
+        >
+          Test error toast, removed after 3 seconds
+        </Button>
+      </div>
+      <div>
+        <Button
+          className="fr-mb-1w"
+          onClick={(displayToastSuccess)}
+          size="sm"
+        >
+          Test successfull toast, never automatically removed
+        </Button>
+      </div>
+      <div>
+        <Button
+          onClick={displayToastWarning}
+          size="sm"
+        >
+          Test warning toast, removed after 10 seconds
+        </Button>
+      </div>
+    </div>
+  );
+  };
+`;
+
+export function Toasts() {
   return (
     <Container fluid className="fr-mb-5w">
       <Row>
@@ -86,7 +90,7 @@ export function Toasts() {
           <Text>
             Message éphémère pouvant afficher une erreur, un warning, un succès ou encore une information.
           </Text>
-          <Playground code={toaster} scope={{ Button, displayToastError, displayToastSuccess, displayToastWarning }} defaultShowCode />
+          <Playground code={toaster} scope={{ Button, useToast }} defaultShowCode />
         </Col>
       </Row>
     </Container>