Add a new background_color attribute to the card component

CHANGELOG.md

@@ -7,6 +7,7 @@
    - automatically center the map on the contents when no top-level latitude and longitude properties are provided even when the map contains geojson data.
    - allow using `FALSE as tile_source` to completely remove the base map. This makes the map component useful to display even non-geographical geometric data.
  - Fix a bug that occured when no `database_url` was provided in the configuration file. SQLPage would generate an incorrect default SQLite database URL.
+ - Add a new `background_color` attribute to the [card](https://sql.ophir.dev/documentation.sql?component=card#component) component to set the background color of the card.
 
 ## 0.23.0 (2024-06-09)
 

examples/official-site/colors.sql

@@ -0,0 +1,4 @@
+select 'dynamic' as component, properties FROM example WHERE component = 'shell' LIMIT 1;
+
+select 'list' as component,
+    'Colors' as title;

examples/official-site/sqlpage/migrations/31_card_docs_update.sql

@@ -25,6 +25,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('style', 'Inline style property to your iframe embed code. For example "background-color: #FFFFFF"', 'TEXT', FALSE, TRUE),
     ('icon', 'Name of an icon to display on the left side of the card.', 'ICON', FALSE, TRUE),
     ('color', 'The name of a color, to be displayed on the left of the card to highlight it.', 'COLOR', FALSE, TRUE),
+    ('background_color', 'The background color of the card.', 'COLOR', FALSE, TRUE),
     ('active', 'Whether this item in the grid is considered "active". Active items are displayed more prominently.', 'BOOLEAN', FALSE, TRUE)
 ) x;
 INSERT INTO parameter(component, name, description_md, type, top_level, optional) SELECT 'card', * FROM (VALUES
@@ -57,6 +58,13 @@ INSERT INTO example(component, description, properties) VALUES
             {"title": "Squirrel", "description_md": "The **chipmunk** is a small, striped rodent of the family Sciuridae. Chipmunks are found in North America, with the exception of the Siberian chipmunk which is found primarily in Asia.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Tamias-rufus-001.jpg/640px-Tamias-rufus-001.jpg" },
             {"title": "Spider", "description_md": "The **jumping spider family** (_Salticidae_) contains more than 600 described genera and about *6000 described species*, making it the largest family of spiders with about 13% of all species.", "top_image": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Jumping_spiders_%28Salticidae%29.jpg/640px-Jumping_spiders_%28Salticidae%29.jpg" }
         ]')),
+    ('card', 'Beautifully colored cards',
+        json('[
+            {"component":"card", "title":"Beautifully colored cards", "columns": 3},
+            {"title": "Red card", "color": "red", "background_color": "red-lt", "description": "Penalty! You are out!", "icon":"play-football" },
+            {"title": "Green card", "color": "green", "background_color": "green-lt", "description": "Welcome to the United States of America !", "icon":"user-dollar" },
+            {"title": "Blue card", "color": "blue", "background_color": "blue-lt", "description": "The Blue Card facilitates migration of foreigners to Europe.", "icon":"currency-euro" }
+        ]')),
     ('card', 'Cards with remote content',
         json('[
             {"component":"card", "title":"Card with embedded remote content", "columns": 2},

sqlpage/templates/card.handlebars

@@ -23,7 +23,11 @@
     mt-1 mb-3 {{class}}">
     {{#each_row}}
         <div class="col {{class}}" {{#if id}}id="{{id}}"{{/if}}>
-            <div class="card h-100 {{#if active}}card-active{{/if}}" {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
+            <div class="card h-100
+                {{~#if active}} card-active{{/if~}}
+                {{~#if background_color}} bg-{{background_color}} text-{{background_color}}-fg{{/if~}}
+                "
+                {{#if (and embed (ne embed_mode "iframe"))}}data-pre-init="card" data-embed="{{embed}}"{{/if}}>
                 {{#if link}}
                     <a href="{{link}}" style="text-decoration: inherit; color: inherit">
                 {{/if}}