Migrate more examples and add note about es6 migration

plone · Jan 8, 2021 · fe619d8 · fe619d8
1 parent d883325
commit fe619d8
Showing 1 changed file with 109 additions and 3 deletions.
diff --git a/src/pat/toggle/README.md b/src/pat/toggle/README.md
@@ -5,7 +5,13 @@ title: Toggle
 
 # Toggle pattern
 
-Toggles things
+Toggles things.
+
+## Migration note (Plone 6)
+
+This mockup pattern will probably replaced by patternslib/toggle. Some features are
+already broken like "Toggle an element by hover event".
+We decided to not migrate all examples and no tests.
 
 ## Configuration
 
@@ -21,6 +27,106 @@ Toggles things
 ## Toggle itself
 
 <button type="button"
-        class="btn btn-default pat-toggle"
-             data-pat-toggle="value:btn-lg;">This button goes bigger/smaller!</button>
+        class="btn btn-primary pat-toggle mb-2"
+        data-pat-toggle="value:btn-lg;">
+            This button goes bigger/smaller!
+</button>
+
+```html
+<button type="button"
+        class="btn btn-primary pat-toggle"
+        data-pat-toggle="value:btn-lg;">
+            This button goes bigger/smaller!
+</button>
+```
+
+## Toggle all targets (global scope)
+
+<div class="wrapper">
+    <button type="button"
+            class="btn btn-primary pat-toggle mb-2"
+            data-pat-toggle="value:bg-success;target:.targetElement">
+                This button is toggling the background of a element.</button><br />
+    <span class="targetElement badge bg-secondary">Hello World</span>
+</div>
+
+```html
+<div class="wrapper">
+    <button type="button"
+            class="btn btn-primary pat-toggle mb-2"
+            data-pat-toggle="value:badge-success;target:.targetElement">
+                This button is toggling the background of a element.</button><br />
+    <span class="targetElement badge bg-secondary">Hello World</span>
+</div>
+```
+
+# Toggle specific target inside a target scope
+
+<div class="wrapper">
+    <div class="myScope">
+        <button type="button"
+                class="btn btn-primary pat-toggle mb-2"
+                data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+        <span class="targetElement badge bg-secondary mb-4">Hello World</span>
+    </div>
+    <div class="myScope">
+        <button type="button"
+                class="btn btn-primary pat-toggle mb-2"
+                data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+        <span class="targetElement badge bg-secondary">Hello World</span>
+    </div>
+</div>
+
+```html
+<div class="wrapper">
+    <div class="myScope">
+        <button type="button"
+                class="btn btn-primary pat-toggle mb-2"
+                data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+        <span class="targetElement badge bg-secondary mb-4">Hello World</span>
+    </div>
+    <div class="myScope">
+        <button type="button"
+                class="btn btn-primary pat-toggle mb-2"
+                data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+        <span class="targetElement badge bg-secondary">Hello World</span>
+    </div>
+</div>
+```
+
+# Toggle more than one target inside a specific target scope
+
+<div class="wrapper">
+   <div class="myScope">
+     <button type="button"
+             class="btn btn-primary pat-toggle mb-2"
+             data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+     <span class="targetElement badge bg-secondary">Hello World</span>
+     <span class="targetElement badge bg-secondary mb-4">Hello again</span>
+   </div>
+   <div class="myScope">
+     <button type="button"
+             class="btn btn-primary pat-toggle mb-2"
+             data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+     <span class="targetElement badge bg-secondary">Hello World</span>
+   </div>
+</div>
+
+```html
+<div class="wrapper">
+   <div class="myScope">
+     <button type="button"
+             class="btn btn-primary pat-toggle mb-2"
+             data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+     <span class="targetElement badge bg-secondary">Hello World</span>
+     <span class="targetElement badge bg-secondary mb-4">Hello again</span>
+   </div>
+   <div class="myScope">
+     <button type="button"
+             class="btn btn-primary pat-toggle mb-2"
+             data-pat-toggle="value:bg-success;target:.targetElement;targetScope:.myScope;">toggle</button><br />
+     <span class="targetElement badge bg-secondary">Hello World</span>
+   </div>
+</div>
+```