Add textAlignment modifier. (#55)

Part of #51.

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
 

Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md

@@ -7,3 +7,8 @@ Slipstream implementations of Tailwind CSS views.
 ### Layout
 
 - ``Container``
+
+### Typography
+
+- ``TextAlignment``
+- ``View/textAlignment(_:)``

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

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>

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>"#)
+  }
+}