Add a palyground preview

Author: bsatarnejad

app/components/primer/open_project/fieldset.html.erb

@@ -5,4 +5,4 @@
 <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
   <%= legend %>
   <%= content %>
-<% end %>
+<% end %>

previews/primer/open_project/fieldset_preview.rb

@@ -9,6 +9,16 @@ def default
         render_with_template
       end
 
+      # @param legend_text [String] text
+      # @param visually_hide_legend [Boolean]
+      def playground(
+        legend_text: "Hello fieldset",
+        visually_hide_legend: true
+      )
+        render_with_template(locals: { legend_text: legend_text,
+                                       visually_hide_legend: visually_hide_legend })
+      end
+
       def with_legend_text
         render_with_template
       end

previews/primer/open_project/fieldset_preview/default.html.erb

@@ -1,5 +1,3 @@
-<%# preview: FieldsetComponentPreview#default %>
-<%# N.B. This is an unstyled component! %>
 <%= render(Primer::OpenProject::Fieldset.new) do |component| %>
   <% component.with_legend(font_size: 4) do %>
     Account details
@@ -9,4 +7,4 @@
     <label for="username">Username</label>
     <input type="text" id="username" autocomplete="username" placeholder="@myxyz">
   </div>
-<% end %>
+<% end %>

previews/primer/open_project/fieldset_preview/playground.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::OpenProject::Fieldset.new(legend_text: legend_text, visually_hide_legend: visually_hide_legend)) do %>
+  <div class="d-flex flex-column">
+    <label>
+      <input type="radio" name="notifications" checked>
+      <span>Email me about important updates</span>
+    </label>
+
+    <label>
+      <input type="radio" name="notifications">
+      <span>Only notify me about security issues</span>
+    </label>
+  </div>
+<% end %>

previews/primer/open_project/fieldset_preview/with_legend_text.html.erb

@@ -1,5 +1,3 @@
-<%# preview: FieldsetComponentPreview#with_legend_text %>
-<%# N.B. This is an unstyled component! %>
 <%= render(Primer::OpenProject::Fieldset.new(legend_text: "Notification preferences")) do %>
   <div class="d-flex flex-column">
     <label>
@@ -12,4 +10,4 @@
       <span>Only notify me about security issues</span>
     </label>
   </div>
-<% end %>
+<% end %>