rename accordion to foldable and harmonize it with other components

See #550
sqlpage · Sep 5, 2024 · 38a70a1 · 38a70a1
1 parent f111e40
commit 38a70a1
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 30 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 0.29
  - New columns component: `columns`. Useful to display a comparison between items, or large key figures to an user.
+ - New foldable component: `foldable`. Useful to display a list of items that can be expanded individually.
 
 ## 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/01_documentation.sql b/examples/official-site/sqlpage/migrations/01_documentation.sql
@@ -1132,15 +1132,3 @@ If you generate your own HTML from a SQL query, you can also use the `shell-empt
 Make sure you know what you are doing, and be careful to escape the HTML properly,
 as you are stepping out of the safe SQLPage framework and into the wild world of HTML.',
     json('[{"component":"shell-empty", "html": "<!DOCTYPE html>\n<html>\n<head>\n  <title>My page</title>\n</head>\n<body>\n  <h1>My page</h1>\n</body>\n</html>"}]'));
-
-INSERT INTO component(name, icon, description) VALUES
-    ('accordion', 'sort-ascending', 'An accordion based list of elements which can be shown individually.');
-INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'accordion', * FROM (VALUES
-    -- top level
-    ('id', 'id attribute added to the container in HTML. It can be used to target this item through css or for scrolling to this item through links (use "#id" in link url).', 'TEXT', TRUE, TRUE),
-    -- item level
-    ('title', 'Name of the list item, displayed prominently.', 'TEXT', FALSE, FALSE),
-    ('contents_md', 'A description of the list item, displayed as greyed-out text.', 'TEXT', FALSE, FALSE)
-) x;
-INSERT INTO example(component, description, properties) VALUES
-    ('accordion', 'A basic accordion with Markdown', json('[{"component":"accordion"},{"title":"Beautiful","contents_md": "Lorem *ipsum* dolor sit amet, **consectetur** adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam."},{"title":"Useful","contents_md": "Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis *ipsum*. Praesent **mauris**. Fusce nec tellus sed augue semper porta."},{"title":"Compact","contents_md": "Mauris **ipsum**. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, *nibh*. Quisque volutpat condimentum velit."}]'));
diff --git a/examples/official-site/sqlpage/migrations/52_foldable.sql b/examples/official-site/sqlpage/migrations/52_foldable.sql
@@ -0,0 +1,17 @@
+INSERT INTO component(name, icon, description) VALUES
+    ('foldable', 'chevrons-down', 'A foldable list of elements which can be expanded individually.');
+
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'foldable', * FROM (VALUES
+    ('id', 'ID attribute added to the container in HTML. Used for targeting through CSS or for scrolling via links.', 'TEXT', TRUE, TRUE),
+    ('title', 'Title of the foldable item, displayed on the button.', 'TEXT', FALSE, TRUE),
+    ('description', 'Plain text description of the item, displayed when expanded.', 'TEXT', FALSE, TRUE),
+    ('description_md', 'Markdown description of the item, displayed when expanded.', 'TEXT', FALSE, TRUE)
+) x;
+
+INSERT INTO example(component, description, properties) VALUES
+    ('foldable', 'A SQLPage-themed foldable list with Markdown', json('[
+        {"component":"foldable"},
+        {"title":"Quick Prototyping", "description_md": "Build a functional web app prototype in minutes using just SQL queries:\n\n- Rapid development\n- Ideal for MVPs\n- Great for internal tools\n\nLearn more about [quick prototyping](/your-first-sql-website/)."},
+        {"title":"Data Visualization", "description_md": "Transform data into insights:\n\n1. **Charts**: Line, bar, pie\n2. **Graphs**: Network diagrams\n3. **Maps**: Geospatial data\n\n```sql\nSELECT ''chart'' as component;\nSELECT date as x, revenue as y FROM sales;\n```"},
+        {"title":"Form Handling", "description_md": "Effortless form processing:\n\n- *User input collection*\n- *Data validation*\n- *Database updates*\n\n> SQLPage handles the entire form lifecycle, from rendering to processing."}
+    ]'));
diff --git a/sqlpage/templates/accordion.handlebars b/sqlpage/templates/accordion.handlebars
diff --git a/sqlpage/templates/foldable.handlebars b/sqlpage/templates/foldable.handlebars
@@ -0,0 +1,29 @@
+<div class="accordion" id="#{{default id 'accordion_default'}}">
+    {{#each_row}}
+    <div class="accordion-item">
+        <h2 class="accordion-header" id="heading-{{@row_index}}">
+            <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                data-bs-target="#collapse-{{@row_index}}" aria-controls="collapse-{{@index}}">
+                {{~#if title~}}
+                    {{title}}
+                {{~else~}}
+                    {{@row_index}}
+                {{/if}}
+            </button>
+        </h2>
+        <div id="collapse-{{@row_index}}" class="accordion-collapse collapse {{#if (eq @row_index 0)}}show{{/if}}"
+            aria-labelledby="heading-{{@row_index}}"
+            data-bs-parent="#{{default id 'accordion_default'}}"
+        >
+            <div class="accordion-body">
+                {{~#if description~}}
+                    <p>{{description}}</p>
+                {{/if}}
+                {{~#if description_md~}}
+                    {{{markdown description_md}}}
+                {{/if}}
+            </div>
+        </div>
+    </div>
+    {{/each_row}}
+</div>