improve the steps component

Author: lovasoa

examples/corporate-conundrum/index.sql

@@ -22,10 +22,10 @@ SELECT 'Continuing Gameplay' as title,
     'purple' as color;
 
 
-SELECT 'title' as component, 'Game rules' as contents;
 SELECT 'steps' as component,
     1 as counter,
-    'cyan' as color;
+    'cyan' as color,
+    'Game rules' as title;
 SELECT 'Create game' as title,
     'plus' as icon,
     'Create a new game from the home page.' as description;

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -101,6 +101,8 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     -- top level
     ('color', 'Color of the bars displayed between steps.', 'TEXT', TRUE, TRUE),
     ('counter', 'Display the number of the step on top of its name.', 'TEXT', TRUE, TRUE),
+    ('title', 'Title of the section.', 'TEXT', TRUE, TRUE),
+    ('description', 'Description of the section.', 'TEXT', TRUE, TRUE),
     -- item level
     ('title', 'Name of the step.', 'TEXT', FALSE, TRUE),
     ('description', 'Tooltip to display when the user passes their mouse over the step''s name.', 'TEXT', FALSE, TRUE),

sqlpage/templates/steps.handlebars

@@ -1,4 +1,10 @@
-<div class="steps {{#if color}}steps-{{color}}{{/if}} {{#if counter}}steps-counter{{/if}}">
+{{#if title}}
+    <h2 class="mt-3 mb-0">{{title}}</h2>
+{{/if}}
+{{#if description}}
+    <p>{{description}}</p>
+{{/if}}
+<div class="steps {{#if color}}steps-{{color}}{{/if}} {{#if counter}}steps-counter{{/if}} my-2">
     {{#each_row}}
         {{#if link}}
             <a href="{{link}}"