**divider component**: Add new properties to the divider component: link, bold, italics, underline, size.

#617

Author: lovasoa

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.

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
+                    }
+                ]'
+            )
     );

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}}