[Site] Moving the live demos above code + adding a longer description to each

Author: weaverryan

ux.symfony.com/src/Form/RegistrationForm.php

@@ -21,7 +21,6 @@ public function buildForm(FormBuilderInterface $builder, array $options)
                     new NotBlank(message: 'Please enter an email!'),
                     new Email(),
                 ],
-                'help' => 'Type an invalid email and watch as it auto-validates when you leave the field!',
             ])
             ->add('password', PasswordType::class, [
                 'constraints' => [

ux.symfony.com/src/Model/LiveDemo.php

@@ -9,6 +9,7 @@ public function __construct(
         private string $name,
         private string $description,
         private string $route,
+        private string $longDescription,
     ) {
     }
 
@@ -27,6 +28,11 @@ public function getDescription(): string
         return $this->description;
     }
 
+    public function getLongDescription(): string
+    {
+        return $this->longDescription;
+    }
+
     public function getRoute(): string
     {
         return $this->route;

ux.symfony.com/src/Service/LiveDemoRepository.php

@@ -17,36 +17,69 @@ public function findAll(): array
                 name: 'Auto-Validating Form',
                 description: 'Create a form that validates each field in-real-time as the user enters data!',
                 route: 'app_live_components_demo_auto_validating_form',
+                longDescription: <<<EOF
+Enter a bad email or leave the password empty, and see how the
+form validates in real time!
+<br>
+This renders a normal Symfony form but with extras added on top,
+all generated from Symfony & Twig.
+EOF
+
             ),
             new LiveDemo(
                 'form-collection-type',
                 name: 'Embedded CollectionType Form',
                 description: 'Create embedded forms with functional "add" and "remove" buttons all in Twig.',
                 route: 'app_live_components_demo_form_collection_type',
+                longDescription: <<<EOF
+Unlock the potential of Symfony's <a href="https://symfony.com/doc/current/reference/forms/types/collection.html"><code>CollectionType</code></a> while
+writing zero JavaScript.
+<br>
+This demo shows off adding and removing items entirely in PHP & Twig.
+EOF
             ),
             new LiveDemo(
                 'dependent-form-fields',
                 name: 'Dependent Form Fields',
                 description: 'After selecting the first field, automatically reload the options for a second field.',
                 route: 'app_live_components_demo_dependent_form_fields',
+                longDescription: <<<EOF
+Say goodbye to the hassle of dependent form fields with Live Components.
+<br>
+Whip up a <a href="https://symfony.com/doc/current/form/dynamic_form_modification.html#form-events-submitted-data">form with dynamic events</a>and then head out for a well-deserved lunch.
+EOF
             ),
             new LiveDemo(
                 'voting',
                 name: 'Up & Down Voting',
                 description: 'Save up & down votes live in pure Twig & PHP.',
                 route: 'app_live_components_demo_voting',
+                longDescription: <<<EOF
+With each row as its own component, it's easy to add up & down voting + keep track of which items have been voted on.
+<br>
+This uses a <a href="https://symfony.com/bundles/ux-live-component/current/index.html#actions">LiveAction</a> to save everything with Ajax.
+EOF
             ),
             new LiveDemo(
                 'inline_edit',
                 name: 'Inline Editing',
                 description: 'Activate an inline editing form with validation.',
                 route: 'app_live_components_demo_inline_edit',
+                longDescription: <<<EOF
+Inline editing? Simple. Use LiveComponents to track if you're in "edit" mode, let
+the user update any fields on your entity, and save through a <code>LiveAction</code>.
+EOF
             ),
             new LiveDemo(
                 'chartjs_updating',
                 name: 'Auto-Updating Chart',
                 description: 'Render & Update a Chart.js chart in real-time.',
                 route: 'app_live_components_demo_chartjs',
+                longDescription: <<<EOF
+What do you get with Live Components + UX Chart.js + UX Autocomplete?
+<br>
+An auto-updating chart that you will ❤️.
+EOF
             ),
         ];
     }

ux.symfony.com/src/Twig/RegistrationFormComponent.php

@@ -27,6 +27,11 @@ protected function instantiateForm(): FormInterface
         return $this->createForm(RegistrationForm::class);
     }
 
+    public function hasValidationErrors(): bool
+    {
+        return $this->getFormInstance()->isSubmitted() && !$this->getFormInstance()->isValid();
+    }
+
     #[LiveAction]
     public function saveRegistration()
     {

ux.symfony.com/templates/components/registration_form.html.twig

@@ -14,7 +14,10 @@
             {{ form_row(form.password) }}
             {{ form_row(form.terms) }}
 
-            <button type="submit" class="btn btn-primary">Register</button>
+            <button
+                type="submit"
+                class="btn btn-primary {{ this.hasValidationErrors ? 'disabled' : '' }}"
+            >Register</button>
 
             {{ form_rest(form) }}
         </form>

ux.symfony.com/templates/liveDemoBase.html.twig

@@ -17,6 +17,18 @@
 
     <div class="container-fluid container-xxl px-5 pt-5">
 
+        <section style="color: rgb(100 116 139); font-size: 14px; line-height: 1.75rem;" class="mb-2">
+            {{ demo.longDescription|raw }}
+        </section>
+
+        <div class="mb-3" style="position: relative;">
+            <div class="p-4 markdown-container rainbow-gradient" id="demo">
+                {% block demo_content %}{% endblock %}
+            </div>
+
+            <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; bottom: 0; left: 0; transform: scaleX(-1) translateY(70px) translateX(20px)"></div>
+        </div>
+
         {% block code_block_full %}
         <div class="arrow mb-3 d-none d-md-block"></div>
 
@@ -29,10 +41,5 @@
             </div>
         </div>
         {% endblock %}
-
-        <div class="p-4 markdown-container rainbow-gradient mt-5" id="demo" style="position: relative;">
-            <div class="arrow-2 mb-3 d-sm-block" style="position:absolute; top:-55px; right: -25px;"></div>
-            {% block demo_content %}{% endblock %}
-        </div>
     </div>
 {% endblock %}

ux.symfony.com/templates/liveDemoTabsBase.html.twig

@@ -1,7 +1,7 @@
 {% extends 'liveDemoBase.html.twig' %}
 
 {% block code_block_full %}
-<div class="row mb-5">
+<div class="row" style="margin-top: 60px;">
     <div class="terminal-code">
         <ul class="nav nav-tabs">
           <li class="nav-item" role="presentation">