From aecf3f1c89ff4defbf46c4ec4bfa0232a5aaa5fe Mon Sep 17 00:00:00 2001
From: lovasoa <contact@ophir.dev>
Date: Mon, 23 Sep 2024 11:37:56 +0200
Subject: [PATCH]  **divider component**: Add new properties to the divider
 component: `link`, `bold`, `italics`, `underline`, `size`.

https://github.com/lovasoa/SQLpage/discussions/617
---
 CHANGELOG.md                                  |  1 +
 .../migrations/29_divider_component.sql       | 77 ++++++++++++++++---
 sqlpage/templates/divider.handlebars          | 22 +++++-
 3 files changed, 90 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a390c32c..27638416 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
  - fix the display of the page title when it is long and the sidebar display is enabled.
  - Fix an issue where the color name `blue` could not be used in the chart component.
  - Add new properties to the foldable component: `id`, `class`, and `expanded` (to control the state of the foldable item). The old behavior was having the first foldable item initially opened and the others closed. To keep the old behavior, you need to explicitly set `true as expanded` on the first foldable item.
+ - **divider component**: Add new properties to the divider component: `link`, `bold`, `italics`, `underline`, `size`.
 
 ## 0.28.0 (2024-08-31)
 - Chart component: fix the labels of pie charts displaying too many decimal places.
diff --git a/examples/official-site/sqlpage/migrations/29_divider_component.sql b/examples/official-site/sqlpage/migrations/29_divider_component.sql
index 82402e6a..3acaa4e4 100644
--- a/examples/official-site/sqlpage/migrations/29_divider_component.sql
+++ b/examples/official-site/sqlpage/migrations/29_divider_component.sql
@@ -37,29 +37,70 @@ VALUES (
         'COLOR',
         TRUE,
         TRUE
+    ),
+    (
+        'divider',
+        'size',
+        'The size of the divider text, from 1 to 6.',
+        'INTEGER',
+        TRUE,
+        TRUE
+    ),
+    (
+        'divider',
+        'bold',
+        'Whether the text is bold.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'divider',
+        'italics',
+        'Whether the text is italicized.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'divider',
+        'underline',
+        'Whether the text is underlined.',
+        'BOOLEAN',
+        TRUE,
+        TRUE
+    ),
+    (
+        'divider',
+        'link',
+        'URL of the link for the divider text. Available only when contents is present.',
+        'URL',
+        TRUE,
+        TRUE
     );
+
 -- Insert example(s) for the component
 INSERT INTO example(component, description, properties)
-VALUES      
+VALUES
     (
         'divider', 
-        'A divider with centered text', 
+        'An empty divider', 
             JSON(
                 '[
                     {
-                        "component":"divider",
-                        "contents":"Hello"
+                        "component":"divider"
                     }
                 ]'
             )
     ),
     (
         'divider', 
-        'An empty divider', 
+        'A divider with centered text', 
             JSON(
                 '[
                     {
-                        "component":"divider"
+                        "component":"divider",
+                        "contents":"Hello"
                     }
                 ]'
             )
@@ -79,15 +120,33 @@ VALUES
     ),
     (
         'divider', 
-        'A divider with blue text at right', 
+        'A divider with blue text and a link', 
             JSON(
                 '[
                     {
                         "component":"divider",
-                        "contents":"Hello",
-                        "position":"right",
+                        "contents":"SQLPage components",
+                        "link":"/documentation.sql",
                         "color":"blue"
                     }
                 ]'
             )
+    ),
+    (
+        'divider', 
+        'A divider with bold, italic, and underlined text', 
+            JSON(
+                '[
+                    {
+                        "component":"divider",
+                        "contents":"Important notice",
+                        "position":"left",
+                        "color":"red",
+                        "size":5,
+                        "bold":true,
+                        "italics":true,
+                        "underline":true
+                    }
+                ]'
+            )
     );
\ No newline at end of file
diff --git a/sqlpage/templates/divider.handlebars b/sqlpage/templates/divider.handlebars
index 1ca77a37..984b8e8a 100644
--- a/sqlpage/templates/divider.handlebars
+++ b/sqlpage/templates/divider.handlebars
@@ -1,5 +1,25 @@
 {{#if contents}}
-    <div class="hr-text {{#if position}}hr-text-{{position}}{{/if}} {{#if color}}text-{{color}}{{/if}} {{class}}">{{contents}}</div>
+    <div class="
+        hr-text 
+        {{~#if position}} hr-text-{{position}}{{/if}}
+        {{~#if color}} text-{{color}} {{/if~}}
+        {{~#if bold}} fw-bold {{/if~}}
+        {{~#if italics}} fst-italic {{/if~}}
+        {{~#if underline}} text-decoration-underline {{/if~}}
+        {{~#if size}} fs-{{minus 7 size}} {{/if~}}
+        {{~#if class}} {{class}}{{/if~}}
+    ">
+        {{#if link}}
+            <a
+                href="{{link}}"
+                class="{{#if color}} text-{{color}} {{/if}}"
+            >
+                {{contents}}
+            </a>
+        {{else}}
+            {{contents}}
+        {{/if}}
+    </div>
 {{else}}
     <hr class="{{class}}" />
 {{/if}}