From ccbd7683b019b4789683b3baa723c0269e28a192 Mon Sep 17 00:00:00 2001
From: Jeff Verkoeyen <jverkoey@gmail.com>
Date: Sat, 3 Aug 2024 13:29:35 -0400
Subject: [PATCH] Add fontSize modifier.

Part of https://github.com/jverkoey/slipstream/issues/51.
---
 .../Views/TailwindCSS/TailwindCSSClasses.md   |  1 +
 .../Views/TailwindCSS/fontSize.md             |  5 +++
 .../Typography/View+fontSize.swift            | 33 +++++++++++++++++++
 .../Typography/View+textAlignment.swift       |  4 +++
 .../Sites/CatalogSiteTests.swift              |  3 +-
 .../TailwindCSS/FontSizeTests.swift           | 24 ++++++++++++++
 6 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md
 create mode 100644 Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift
 create mode 100644 Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift

diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md
index 63ae964..1295a73 100644
--- a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md
@@ -10,4 +10,5 @@ Slipstream implementations of Tailwind CSS's classes.
 
 ### Typography
 
+- ``View/fontSize(_:)``
 - ``View/textAlignment(_:)``
diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md
new file mode 100644
index 0000000..3a9ac7f
--- /dev/null
+++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md
@@ -0,0 +1,5 @@
+# ```View/fontSize(_:)```
+
+## Topics
+
+- ``FontSize``
diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift b/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift
new file mode 100644
index 0000000..f9d3610
--- /dev/null
+++ b/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))
+  }
+}
+
diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift b/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift
index 0b66040..43f6e36 100644
--- a/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift
+++ b/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))
   }
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
index 099dd0e..1a4d788 100644
--- a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
+++ b/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>
diff --git a/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift b/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift
new file mode 100644
index 0000000..0414b39
--- /dev/null
+++ b/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>"#)
+  }
+}