Add fontWeight and bold modifiers. (#61)

Part of #51.

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

@@ -0,0 +1,12 @@
+# Font size
+
+## Topics
+
+### Modifiers
+
+- ``View/fontSize(_:)-6cmd6``
+- ``View/fontSize(_:)-6mwyi``
+
+### Enumerations
+
+- ``FontSize``

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

@@ -0,0 +1,13 @@
+# Font weight
+
+## Topics
+
+### Modifiers
+
+- ``View/fontWeight(_:)-9ehtx``
+- ``View/fontWeight(_:)-2g9rx``
+- ``View/bold()``
+
+### Enumerations
+
+- ``FontWeight``

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

@@ -10,5 +10,6 @@ Slipstream implementations of Tailwind CSS's classes.
 
 ### Typography
 
-- ``View/fontSize(_:)``
-- ``View/textAlignment(_:)``
+- <doc:FontSize>
+- <doc:FontWeight>
+- <doc:TextAlignment>

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

@@ -0,0 +1,11 @@
+# Text alignment
+
+## Topics
+
+### Modifiers
+
+- ``View/textAlignment(_:)``
+
+### Enumerations
+
+- ``TextAlignment``

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

@@ -0,0 +1,64 @@
+/// Constants that specify the weight of the text.
+///
+/// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum FontWeight: String {
+  case thin
+  case extraLight = "extralight"
+  case light
+  case normal
+  case medium
+  case semiBold = "semibold"
+  case bold
+  case extraBold = "extrabold"
+  case black
+}
+
+extension View {
+  /// Set the font weight.
+  ///
+  /// - Parameter fontWeight: The font weight to apply to the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func fontWeight(_ fontWeight: FontWeight) -> some View {
+    return self.modifier(ClassModifier(add: "font-" + fontWeight.rawValue))
+  }
+
+  /// Set the font weight to the closest equivalent Tailwind CSS font weight.
+  ///
+  /// - Parameter weight: A font weight value. If the weight is exactly between
+  /// two weight classes, then the lighter weight will be used.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func fontWeight(_ weight: Int) -> some View {
+    return fontWeight(closestTailwindFontWeight(weight: weight))
+  }
+
+  /// Set the font weight to bold.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`font-weight`](https://tailwindcss.com/docs/font-weight) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func bold() -> some View {
+    return fontWeight(.bold)
+  }
+
+  private func closestTailwindFontWeight(weight: Int) -> FontWeight {
+    // Mapping of Tailwind CSS font weight classes to their weight values.
+    let fontWeightMapping: [(fontWeight: FontWeight, weight: Int)] = [
+      (.thin, 100),        // Thin
+      (.extraLight, 200),  // Extra Light
+      (.light, 300),       // Light
+      (.normal, 400),      // Normal
+      (.medium, 500),      // Medium
+      (.semiBold, 600),    // Semi Bold
+      (.bold, 700),        // Bold
+      (.extraBold, 800),   // Extra Bold
+      (.black, 900)        // Black
+    ]
+    // Find the closest matching font weight
+    let closestFontWeight = fontWeightMapping.min { abs($0.weight - weight) < abs($1.weight - weight) }
+    return closestFontWeight?.fontWeight ?? .normal
+  }
+}

Tests/SlipstreamTests/Sites/CatalogSiteTests.swift

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

Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift

@@ -1,44 +1,38 @@
 import Testing
-
 import Slipstream
 
-struct FontSizeTests {
-  @Test func enumFontSizes() 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(.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>"#)
+struct FontWeightTests {
+  @Test func enumFontWeights() throws {
+    try #expect(renderHTML(Div {}.fontWeight(.thin)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.extraLight)) == #"<div class="font-extralight"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.light)) == #"<div class="font-light"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.normal)) == #"<div class="font-normal"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.medium)) == #"<div class="font-medium"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.semiBold)) == #"<div class="font-semibold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.bold)) == #"<div class="font-bold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.extraBold)) == #"<div class="font-extrabold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(.black)) == #"<div class="font-black"></div>"#)
   }
 
-  @Test func numericalFontSizes() throws {
-    try #expect(renderHTML(Div {}.fontSize(6)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(12)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(13)) == #"<div class="text-xs"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(14)) == #"<div class="text-sm"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(15)) == #"<div class="text-sm"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(16)) == #"<div class="text-base"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(17)) == #"<div class="text-base"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(18)) == #"<div class="text-lg"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(19)) == #"<div class="text-lg"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(20)) == #"<div class="text-xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(22)) == #"<div class="text-xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(24)) == #"<div class="text-2xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(30)) == #"<div class="text-3xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(36)) == #"<div class="text-4xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(48)) == #"<div class="text-5xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(60)) == #"<div class="text-6xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(72)) == #"<div class="text-7xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(96)) == #"<div class="text-8xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(128)) == #"<div class="text-9xl"></div>"#)
-    try #expect(renderHTML(Div {}.fontSize(200)) == #"<div class="text-9xl"></div>"#)
+  @Test func numericalFontWeights() throws {
+    try #expect(renderHTML(Div {}.fontWeight(50)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(100)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(150)) == #"<div class="font-thin"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(200)) == #"<div class="font-extralight"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(250)) == #"<div class="font-extralight"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(300)) == #"<div class="font-light"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(350)) == #"<div class="font-light"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(400)) == #"<div class="font-normal"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(450)) == #"<div class="font-normal"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(500)) == #"<div class="font-medium"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(550)) == #"<div class="font-medium"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(600)) == #"<div class="font-semibold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(650)) == #"<div class="font-semibold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(700)) == #"<div class="font-bold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(750)) == #"<div class="font-bold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(800)) == #"<div class="font-extrabold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(850)) == #"<div class="font-extrabold"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(900)) == #"<div class="font-black"></div>"#)
+    try #expect(renderHTML(Div {}.fontWeight(950)) == #"<div class="font-black"></div>"#)
   }
 }

Tests/SlipstreamTests/TailwindCSS/FontWeightTests.swift

@@ -0,0 +1,7 @@
+//
+//  FontWeightTests.swift
+//  slipstream
+//
+//  Created by Jeff Verkoeyen on 8/3/24.
+//
+