Add .container's border customization

iamgio · Oct 8, 2024 · 4265f38 · 4265f38
1 parent e705971
commit 4265f38
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 1 deletion.
diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Container.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/ast/quarkdown/block/Container.kt
@@ -10,12 +10,16 @@ import eu.iamgio.quarkdown.visitor.node.NodeVisitor
  * A general-purpose container that groups content.
  * @param foregroundColor text color
  * @param backgroundColor background color
+ * @param borderColor border color
+ * @param borderWidth border width
  * @param padding whitespace around the content
  * @param cornerRadius border radius of the container
  */
 data class Container(
     val foregroundColor: Color? = null,
     val backgroundColor: Color? = null,
+    val borderColor: Color? = null,
+    val borderWidth: Sizes? = null,
     val padding: Sizes? = null,
     val cornerRadius: Sizes? = null,
     override val children: List<Node>,

diff --git a/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt b/core/src/main/kotlin/eu/iamgio/quarkdown/rendering/html/QuarkdownHtmlNodeRenderer.kt
@@ -88,7 +88,13 @@ class QuarkdownHtmlNodeRenderer(context: Context) : BaseHtmlNodeRenderer(context
                 "color" value node.foregroundColor
                 "background-color" value node.backgroundColor
                 "padding" value node.padding
+                "border-color" value node.borderColor
+                "border-width" value node.borderWidth
                 "border-radius" value node.cornerRadius
+
+                if (node.borderColor != null || node.borderWidth != null) {
+                    "border-style" value "solid"
+                }
             }
         }
 

diff --git a/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt b/core/src/test/kotlin/eu/iamgio/quarkdown/HtmlNodeRendererTest.kt
@@ -706,6 +706,17 @@ class HtmlNodeRendererTest {
                 children = children,
             ).render(),
         )
+
+        assertEquals(
+            out.next(),
+            Container(
+                borderColor = Color(30, 20, 10),
+                borderWidth = Sizes(all = 1.0.cm),
+                padding = Sizes(2.0.inch, 3.0.inch, 4.0.inch, 5.0.inch),
+                cornerRadius = Sizes(all = 6.0.px),
+                children = children,
+            ).render(),
+        )
     }
 
     @Test

diff --git a/core/src/test/resources/rendering/quarkdown/container.html b/core/src/test/resources/rendering/quarkdown/container.html
@@ -33,4 +33,17 @@
             Baz
         </p>
     </blockquote>
+</div>
+
+---
+
+<div style="padding: 2.0in 3.0in 4.0in 5.0in; border-color: rgba(30, 20, 10, 1.0); border-width: 1.0cm 1.0cm 1.0cm 1.0cm; border-radius: 6.0px 6.0px 6.0px 6.0px; border-style: solid;" class="container">
+    <p>
+        Foo bar
+    </p>
+    <blockquote>
+        <p>
+            Baz
+        </p>
+    </blockquote>
 </div>
diff --git a/stdlib/src/main/kotlin/eu/iamgio/quarkdown/stdlib/Layout.kt b/stdlib/src/main/kotlin/eu/iamgio/quarkdown/stdlib/Layout.kt
@@ -45,20 +45,26 @@ val Layout: Module =
  * Any layout rules (e.g. from [align], [row], [column], [grid]) are ignored inside this container.
  * @param foregroundColor text color
  * @param backgroundColor background color
+ * @param borderColor border color
+ * @param borderWidth border width
  * @param padding whitespace around the content
- * @param cornerRadius border radius of the container
+ * @param cornerRadius corner (and border) radius
  * @param body content to group
  * @return the new container node
  */
 fun container(
     @Name("foreground") foregroundColor: Color? = null,
     @Name("background") backgroundColor: Color? = null,
+    @Name("border") borderColor: Color? = null,
+    @Name("borderwidth") borderWidth: Sizes? = null,
     @Name("padding") padding: Sizes? = null,
     @Name("radius") cornerRadius: Sizes? = null,
     body: MarkdownContent,
 ) = Container(
     foregroundColor,
     backgroundColor,
+    borderColor,
+    borderWidth,
     padding,
     cornerRadius,
     body.children,