From f4d4d2027ffe33eba485fe54022f2f5f99ce22d3 Mon Sep 17 00:00:00 2001
From: Jeff Verkoeyen <jverkoey@gmail.com>
Date: Sat, 3 Aug 2024 11:19:15 -0400
Subject: [PATCH] Add textAlignment modifier. (#55)

Part of https://github.com/jverkoey/slipstream/issues/51.
---
 .../Views/Fundamentals/Fundamentals.md        |  1 +
 .../Views/TailwindCSS/TailwindCSSViews.md     |  5 ++++
 .../Typography/View+textAlignment.swift       | 27 +++++++++++++++++++
 .../Sites/CatalogSiteTests.swift              |  9 ++++---
 .../TailwindCSS/TextAlignmentTests.swift      | 12 +++++++++
 5 files changed, 51 insertions(+), 3 deletions(-)
 create mode 100644 Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift
 create mode 100644 Tests/SlipstreamTests/Views/TailwindCSS/TextAlignmentTests.swift

diff --git a/Sources/Slipstream/Documentation.docc/Views/Fundamentals/Fundamentals.md b/Sources/Slipstream/Documentation.docc/Views/Fundamentals/Fundamentals.md
index 45b20cc..e0db878 100644
--- a/Sources/Slipstream/Documentation.docc/Views/Fundamentals/Fundamentals.md
+++ b/Sources/Slipstream/Documentation.docc/Views/Fundamentals/Fundamentals.md
@@ -18,6 +18,7 @@ conforms to the ``View`` protocol can act as a view in your website.
 
 - ``ViewModifier``
 - ``AttributeModifier``
+- ``ClassModifier``
 
 ### Supporting view types
 
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md
index c2b6ca2..6fe623e 100644
--- a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md
@@ -7,3 +7,8 @@ Slipstream implementations of Tailwind CSS views.
 ### Layout
 
 - ``Container``
+
+### Typography
+
+- ``TextAlignment``
+- ``View/textAlignment(_:)``
diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift b/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift
new file mode 100644
index 0000000..0b66040
--- /dev/null
+++ b/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift
@@ -0,0 +1,27 @@
+/// Constants that specify the visual alignment of the text.
+public enum TextAlignment: String {
+  /// Aligns text to the left edge of the text container in
+  /// left-to-right (LTR) languages, and to the right edge
+  /// in right-to-left (RTL) languages..
+  case leading = "start"
+
+  /// Aligns text to the center of the text container.
+  case center
+
+  /// Aligns text to the right edge of the text container in
+  /// left-to-right (LTR) languages, and to the left edge
+  /// in right-to-left (RTL) languages..
+  case trailing = "end"
+
+  /// Text will fill the container, adding spacing between words as needed.
+  case justify
+}
+
+extension View {
+  /// Control the alignment of text.
+  ///
+  /// - Parameter alignment: Text alignment to be applied to text within the modified view.
+  public func textAlignment(_ alignment: TextAlignment) -> some View {
+    return self.modifier(ClassModifier(add: "text-" + alignment.rawValue))
+  }
+}
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
index b305d12..099dd0e 100644
--- a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
+++ b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
@@ -20,10 +20,13 @@ private struct CatalogSite: View {
           Linebreak()
           Text("world!")
           H1("Heading 1")
+            .textAlignment(.leading)
           H2 {
             Text("Heading 2")
           }
+          .textAlignment(.center)
           H3("Heading 3")
+            .textAlignment(.trailing)
           H4("Heading 4")
           H5("Heading 5")
           H6("Heading 6")
@@ -49,9 +52,9 @@ struct CatalogSiteTests {
   <div class="container">
    Hello
    <br />world!
-   <h1>Heading 1</h1>
-   <h2>Heading 2</h2>
-   <h3>Heading 3</h3>
+   <h1 class="text-start">Heading 1</h1>
+   <h2 class="text-center">Heading 2</h2>
+   <h3 class="text-end">Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
diff --git a/Tests/SlipstreamTests/Views/TailwindCSS/TextAlignmentTests.swift b/Tests/SlipstreamTests/Views/TailwindCSS/TextAlignmentTests.swift
new file mode 100644
index 0000000..821a844
--- /dev/null
+++ b/Tests/SlipstreamTests/Views/TailwindCSS/TextAlignmentTests.swift
@@ -0,0 +1,12 @@
+import Testing
+
+import Slipstream
+
+struct TextAlignmentTests {
+  @Test func alignments() throws {
+    try #expect(renderHTML(Div {}.textAlignment(.leading)) == #"<div class="text-start"></div>"#)
+    try #expect(renderHTML(Div {}.textAlignment(.center)) == #"<div class="text-center"></div>"#)
+    try #expect(renderHTML(Div {}.textAlignment(.trailing)) == #"<div class="text-end"></div>"#)
+    try #expect(renderHTML(Div {}.textAlignment(.justify)) == #"<div class="text-justify"></div>"#)
+  }
+}