Add float modifier. (#89)

Part of #51.

Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Float.md

@@ -0,0 +1,13 @@
+# Floats
+
+Utilities for controlling the wrapping of content around a view.
+
+## Topics
+
+### Modifiers
+
+- ``View/float(_:condition:)``
+
+### Supporting types
+
+- ``FloatMode``

Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSS-Classes.md → Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Classes.md

@@ -10,6 +10,7 @@ Slipstream implementations of Tailwind CSS's classes.
 - ``HStack``
 - ``VStack``
 - <doc:Layout-Display>
+- <doc:Layout-Float>
 
 ### Flexbox & Grid
 

Sources/Slipstream/TailwindCSS/Layout/View+float.swift

@@ -0,0 +1,21 @@
+/// Constants that control the wrapping of content around a view.
+///
+/// - SeeAlso: Tailwind CSS' [floats](https://tailwindcss.com/docs/float) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum FloatMode: String {
+  case start
+  case end
+  case right
+  case left
+  case none
+}
+
+extension View {
+  /// Change how content wraps around the modified view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [floats](https://tailwindcss.com/docs/float) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func float(_ floatMode: FloatMode, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: "float-" + floatMode.rawValue, condition: condition))
+  }
+}

Tests/SlipstreamTests/Sites/CatalogSiteTests.swift

@@ -54,6 +54,7 @@ private struct CatalogSite: View {
 
             Heading(level: 2, "Generic heading 2")
           }
+          .float(.right)
           .flexGap(.x, width: 2)
           .alignItems(.baseline)
           .justifyContent(.center)
@@ -95,7 +96,7 @@ struct CatalogSiteTests {
    <br />world!
    <a href="/about">About</a>
    <a href="/home">Home</a>
-   <div class="flex flex-col gap-x-0.5 items-baseline justify-center">
+   <div class="flex flex-col float-right gap-x-0.5 items-baseline justify-center">
     <div class="flex flex-row gap-x-2.5">
      <h1 class="text-xl font-mono font-bold text-start">Heading 1</h1>
      <h2 class="text-3xl text-center leading-snug">Heading 2</h2>

Tests/SlipstreamTests/TailwindCSS/Layout/FloatTests.swift

@@ -0,0 +1,12 @@
+import Testing
+import Slipstream
+
+struct FloatTests {
+  @Test func enumeration() throws {
+    try #expect(renderHTML(Div {}.float(.start)) == #"<div class="float-start"></div>"#)
+    try #expect(renderHTML(Div {}.float(.end)) == #"<div class="float-end"></div>"#)
+    try #expect(renderHTML(Div {}.float(.left)) == #"<div class="float-left"></div>"#)
+    try #expect(renderHTML(Div {}.float(.right)) == #"<div class="float-right"></div>"#)
+    try #expect(renderHTML(Div {}.float(.none)) == #"<div class="float-none"></div>"#)
+  }
+}