Add fontSize modifier.

Part of #51.

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

@@ -10,4 +10,5 @@ Slipstream implementations of Tailwind CSS's classes.
 
 ### Typography
 
+- ``View/fontSize(_:)``
 - ``View/textAlignment(_:)``

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

@@ -0,0 +1,5 @@
+# ```View/fontSize(_:)```
+
+## Topics
+
+- ``FontSize``

Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift

@@ -0,0 +1,33 @@
+/// Constants that specify the size of the text.
+///
+/// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum FontSize: String {
+  case extraSmall = "xs"
+  case small = "sm"
+  /// The default document font size.
+  case base = "base"
+  case large = "lg"
+  case extraLarge = "xl"
+  case extraExtraLarge = "2xl"
+  case extraExtraExtraLarge = "3xl"
+  case fourXLarge = "4xl"
+  case fiveXLarge = "5xl"
+  case sixXLarge = "6xl"
+  case sevenXLarge = "7xl"
+  case eightXLarge = "8xl"
+  case nineXLarge = "9xl"
+}
+
+extension View {
+  /// Set the font size.
+  ///
+  /// - Parameter fontSize: The font size to apply to the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func fontSize(_ fontSize: FontSize) -> some View {
+    return self.modifier(ClassModifier(add: "text-" + fontSize.rawValue))
+  }
+}
+

Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift

@@ -1,4 +1,5 @@
 /// Constants that specify the visual alignment of the text.
+@available(iOS 17.0, macOS 14.0, *)
 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
@@ -21,6 +22,9 @@ extension View {
   /// Control the alignment of text.
   ///
   /// - Parameter alignment: Text alignment to be applied to text within the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`text-align`](https://tailwindcss.com/docs/text-align) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
   public func textAlignment(_ alignment: TextAlignment) -> some View {
     return self.modifier(ClassModifier(add: "text-" + alignment.rawValue))
   }

Tests/SlipstreamTests/Sites/CatalogSiteTests.swift

@@ -20,6 +20,7 @@ private struct CatalogSite: View {
           Linebreak()
           Text("world!")
           H1("Heading 1")
+            .fontSize(.extraLarge)
             .textAlignment(.leading)
           H2 {
             Text("Heading 2")
@@ -52,7 +53,7 @@ struct CatalogSiteTests {
   <div class="container">
    Hello
    <br />world!
-   <h1 class="text-start">Heading 1</h1>
+   <h1 class="text-xl text-start">Heading 1</h1>
    <h2 class="text-center">Heading 2</h2>
    <h3 class="text-end">Heading 3</h3>
    <h4>Heading 4</h4>

Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift

@@ -0,0 +1,24 @@
+import Testing
+
+import Slipstream
+
+struct FontSizeTests {
+  @Test func alignments() throws {
+    try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"<div class="text-xs"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.small)) == #"<div class="text-sm"></div>"#)
+
+    try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"<div class="text-xs"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.small)) == #"<div class="text-sm"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.base)) == #"<div class="text-base"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.large)) == #"<div class="text-lg"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.extraLarge)) == #"<div class="text-xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.extraExtraLarge)) == #"<div class="text-2xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.extraExtraExtraLarge)) == #"<div class="text-3xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.fourXLarge)) == #"<div class="text-4xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.fiveXLarge)) == #"<div class="text-5xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.sixXLarge)) == #"<div class="text-6xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.sevenXLarge)) == #"<div class="text-7xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.eightXLarge)) == #"<div class="text-8xl"></div>"#)
+    try #expect(renderHTML(Div {}.fontSize(.nineXLarge)) == #"<div class="text-9xl"></div>"#)
+  }
+}