fix: sync up demos/examples

app/views/demo/actor.html.erb

@@ -12,7 +12,7 @@
 
   <p>Previously, we enabled the demo for all users. While that's the simplest case and very handy when a feature is completely ready, you'll occasionally want to enable a feature for a single individual like yourself or a teammate. So let's see how that works.</p>
 
-  <p>We've named this feature flag <code>demo_actor</code> because it only enables the feature for a single user. In this case, we'll use <code>current_user</code>, but in practice, you could use any instance of a User, Organization, Team, or any "actor" from your system as long as the instance responds to <code>flipper_id</code>.</p>
+  <p>We've named this feature flag <code>:demo_actor</code> because it only enables the feature for a single user. In this case, we'll use <code>current_user</code>, but in practice, you could use any instance of a User, Organization, Team, or any "actor" from your system as long as the instance responds to <code>flipper_id</code>.</p>
 
   <p><strong><mark>Important:</mark></strong> In order to <a href="https://www.flippercloud.io/docs/features#enablement-actor">enable access for individual users, accounts, or any other actor</a> the model must respond to a <code>flipper_id</code> method that returns a unique identifier.</p>
 <% end %>
@@ -39,19 +39,19 @@
     </div>
     <div class="card-body p-5">
       <% if Flipper.enabled?(:demo_actor) %>
-        <p class="m-0">The <code>demo_actor</code> feature is <ins>enabled</ins> for everyone.</p>
+        <p class="m-0">The <code>:demo_actor</code> feature is <ins>enabled</ins> for everyone.</p>
       <% else %>
-        <p class="m-0">The <code>demo_actor</code> feature is <del>disabled</del> for anyone that doesn't have special authorization.</p>
+        <p class="m-0">The <code>:demo_actor</code> feature is <del>disabled</del> for anyone that doesn't have special authorization.</p>
       <% end %>
 
       <hr>
 
       <% if Flipper.enabled?(:demo_actor) %>
-        <p class="m-0">The <code>demo_actor</code> feature is <em>implicitly</em> <ins>enabled</ins> for you since it's enabled for everyone.</p>
+        <p class="m-0">The <code>:demo_actor</code> feature is <em>implicitly</em> <ins>enabled</ins> for you since it's enabled for everyone.</p>
       <% elsif Flipper.enabled?(:demo_actor, current_user) %>
-        <p class="m-0">The <code>demo_actor</code> feature is <em>explicitly</em> <ins>enabled</ins> for you.</p>
+        <p class="m-0">The <code>:demo_actor</code> feature is <em>explicitly</em> <ins>enabled</ins> for you.</p>
       <% elsif !Flipper.enabled?(:demo_actor, current_user) %>
-        <p class="m-0">The <code>demo_actor</code> feature is <em>implicitly</em> <del>disabled</del> for you as well.</p>
+        <p class="m-0">The <code>:demo_actor</code> feature is <em>implicitly</em> <del>disabled</del> for you as well.</p>
       <% end %>
     </div>
     <%= controls('Toggling an Flag for an Actor') do %>

app/views/demo/group.html.erb

@@ -12,11 +12,11 @@
 
   <% if Flipper.enabled?(:demo_group, current_user) %>
     <h1>Welcome to the club!</h1>
-    <p>The <code>demo_group</code> feature is <ins>enabled</ins> for you since you prefer coffee. Nice work! Next we'll look at how you can enable features for a percentage of users.</p>
+    <p>The <code>:demo_group</code> feature is <ins>enabled</ins> for you since you prefer coffee. Nice work! Next we'll look at how you can enable features for a percentage of users.</p>
     <%= next_button "Learn How Percentage Flags Work", demo_percentage_path %>
   <% else %>
     <h1>Your Beverage Preference</h1>
-    <p>The <code>demo_group</code> feature is <del>disabled</del> for you since you don't prefer coffee. Let's update your beverage preference so you'll be included in the coffee drinkers group and get access.</p>
+    <p>The <code>:demo_group</code> feature is <del>disabled</del> for you since you don't prefer coffee. Let's update your beverage preference so you'll be included in the coffee drinkers group and get access.</p>
   <% end %>
 
   <hr class="my-5">
@@ -85,30 +85,30 @@ end</code></pre>
     </div>
     <div class="card-body p-5">
       <% if Flipper.enabled?(:demo_group) %>
-        <p class="m-0">The <code>demo_group</code> feature is <ins>enabled</ins> for everyone.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <ins>enabled</ins> for everyone.</p>
       <% else %>
-        <p class="m-0">The <code>demo_group</code> feature is <del>disabled</del> for anyone that doesn't have special authorization.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <del>disabled</del> for anyone that doesn't have special authorization.</p>
       <% end %>
 
       <hr>
 
       <% if Flipper.enabled?(:demo_group, @water_drinker) %>
-        <p class="m-0">The <code>demo_group</code> feature is <ins>enabled</ins> for water drinkers.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <ins>enabled</ins> for water drinkers.</p>
       <% else %>
-        <p class="m-0">The <code>demo_group</code> feature is <del>disabled</del> for water drinkers.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <del>disabled</del> for water drinkers.</p>
       <% end %>
 
 
       <% if Flipper.enabled?(:demo_group, @tea_drinker) %>
-        <p class="m-0">The <code>demo_group</code> feature is <ins>enabled</ins> for tea drinkers.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <ins>enabled</ins> for tea drinkers.</p>
       <% else %>
-        <p class="m-0">The <code>demo_group</code> feature is <del>disabled</del> for tea drinkers.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <del>disabled</del> for tea drinkers.</p>
       <% end %>
 
       <% if Flipper.enabled?(:demo_group, @coffee_drinker) %>
-        <p class="m-0">The <code>demo_group</code> feature is <ins>enabled</ins> for coffee drinkers.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <ins>enabled</ins> for coffee drinkers.</p>
       <% else %>
-        <p class="m-0">The <code>demo_group</code> feature is <del>disabled</del> for coffee drinkers.</p>
+        <p class="m-0">The <code>:demo_group</code> feature is <del>disabled</del> for coffee drinkers.</p>
       <% end %>
     </div>
     <%= controls('Toggling an Flag for an Actor') do %>

app/views/demo/percentage.html.erb

@@ -30,7 +30,7 @@
   <h1>Percentage-based Feature Flipping</h1>
   <p>Let's explore toggling by using percentages where we can enable a feature for a <a href="https://www.flippercloud.io/docs/features#enablement-percentage-of-actors">percentage of actors</a> or for a <a href="https://www.flippercloud.io/docs/features#enablement-percentage-of-time">percentage of time</a>. As we're increasingly confident there aren't any surprise bugs or performance issues, we can gradually increase the percentage.</p>
 
-  <p>We've named this feature flag <code>slow_roll</code> since we'll slowly roll it out to more users. We'll increase our percentage gradually in increments of 25% and see how it four different user accounts, including yours, are affected.</p>
+  <p>We've named this feature flag <code>:slow_roll</code> since we'll slowly roll it out to more users. We'll increase our percentage gradually in increments of 25% and see how it four different user accounts, including yours, are affected.</p>
 
   <p>This is great for refactoring a significant portion of code so you can keep the legacy portion in place in parallel with the new code that's set to replace it, and you can slowly send more traffic down the new code path until you're confident it's generating the same results as the original.</p>
 

app/views/example/_backup_providers.html.erb

@@ -233,7 +233,7 @@
 
   <hr class="my-5">
 
-  <p><strong><mark>Important:</mark></strong> Behind the scenes, we've already registered and defined the coffee drinker group in <code>config/initializers/flipper.rb</code>:</p>
+  <p><strong><mark>Important:</mark></strong> Behind the scenes, we've already registered and defined the <code>:paid</code> group in <code>config/initializers/flipper.rb</code>:</p>
 
   <pre class="border rounded rounded-4 p-3 bg-body-tertiary"><code><strong class="text-success">Flipper.register(:paid)</strong> do |actor, context|
   actor.respond_to?(:paid?) && actor.paid?

app/views/example/_circuit_breakers.html.erb

@@ -9,14 +9,6 @@
   <div class="card border-5 border-dark rounded-4">
     <div class="card-header p-3 pb-2 border-bottom">
       <%= flag_status(@example.flag) %>
-      <ul class="list-group list-group-flush pt-0 border-top mt-2">
-        <% [
-          ['Fully enabled for everyone?', Flipper.enabled?(@example.flag), "Flipper.enabled?(:#{@example.flag})"],
-          ['Enabled for the current user?', Flipper.enabled?(@example.flag, current_user), "Flipper.enabled?(:#{@example.flag}, current_user)"],
-        ].each do |scenario| %>
-          <%= status_item(*scenario) %>
-        <% end %>
-      </ul>
     </div>
     <div class="card-body p-5">
       <% if Flipper.enabled?(@example.flag, current_user) %>
@@ -33,6 +25,19 @@
         </div>
       <% end %>
     </div>
+    <div class="card-body bg-light p-0">
+      <details class="m-0 p-0">
+        <summary class="text-secondary text-center border-top p-2"><small>Inspect Flag State & Code Samples</small></summary>
+        <ul class="list-group list-group-flush pt-0 border-top mx-3 px-0">
+          <% [
+            ['Fully enabled for everyone?', Flipper.enabled?(@example.flag), "Flipper.enabled?(:#{@example.flag})"],
+            ['Enabled for the current user?', Flipper.enabled?(@example.flag, current_user), "Flipper.enabled?(:#{@example.flag}, current_user)"],
+          ].each do |scenario| %>
+            <%= status_item(*scenario) %>
+          <% end %>
+        </ul>
+      </details>
+    </div>
     <%= controls "Update Search" do %>
       <div class="w-100">
         <% if Flipper.enabled?(@example.flag) %>

app/views/example/_managing_external_tools.html.erb

@@ -18,14 +18,6 @@
   <div class="card border-5 border-dark rounded-4">
     <div class="card-header p-3 pb-2 border-bottom">
       <%= flag_status(@example.flag) %>
-      <ul class="list-group list-group-flush pt-0 border-top mt-2">
-        <% [
-          ['Fully enabled for everyone?', Flipper.enabled?(@example.flag), "Flipper.enabled?(:#{@example.flag})"],
-          ['Enabled for the current user?', Flipper.enabled?(@example.flag, current_user), "Flipper.enabled?(:#{@example.flag}, current_user)"],
-        ].each do |scenario| %>
-          <%= status_item(*scenario) %>
-        <% end %>
-      </ul>
     </div>
     <div class="card-body p-5">
       <div class="d-flex align-items-center align-content-center justify-content-start gap-2">
@@ -38,6 +30,19 @@
         <% end %>
       </div>
     </div>
+    <div class="card-body bg-light p-0">
+      <details class="m-0 p-0">
+        <summary class="text-secondary text-center border-top p-2"><small>Inspect Flag State & Code Samples</small></summary>
+        <ul class="list-group list-group-flush pt-0 border-top mx-3 px-0">
+          <% [
+              ['Fully enabled for everyone?', Flipper.enabled?(@example.flag), "Flipper.enabled?(:#{@example.flag})"],
+              ['Enabled for the current user?', Flipper.enabled?(@example.flag, current_user), "Flipper.enabled?(:#{@example.flag}, current_user)"],
+            ].each do |scenario| %>
+            <%= status_item(*scenario) %>
+          <% end %>
+        </ul>
+      </details>
+    </div>
     <%= controls "Update Search" do %>
       <div class="w-100">
         <% if Flipper.enabled?(@example.flag, current_user) %>