ClutchEngineering · jverkoey · Aug 5, 2024 · Aug 5, 2024
diff --git a/...n.docc/Views/Fundamentals/Fundamentals.md → ...ntation.docc/Fundamentals/Fundamentals.md b/...n.docc/Views/Fundamentals/Fundamentals.md → ...ntation.docc/Fundamentals/Fundamentals.md
diff --git a/...mentation.docc/Views/Fundamentals/View.md → ...m/Documentation.docc/Fundamentals/View.md b/...mentation.docc/Views/Fundamentals/View.md → ...m/Documentation.docc/Fundamentals/View.md
diff --git a/...on.docc/Views/Fundamentals/ViewBuilder.md → ...entation.docc/Fundamentals/ViewBuilder.md b/...on.docc/Views/Fundamentals/ViewBuilder.md → ...entation.docc/Fundamentals/ViewBuilder.md
diff --git a/...ackgrounds/Backgrounds-BackgroundImage.md → ...ackgrounds/Backgrounds-BackgroundImage.md b/...ackgrounds/Backgrounds-BackgroundImage.md → ...ackgrounds/Backgrounds-BackgroundImage.md
diff --git a/...ews/TailwindCSS/Borders/Borders-Border.md → ...occ/TailwindCSS/Borders/Borders-Border.md b/...ews/TailwindCSS/Borders/Borders-Border.md → ...occ/TailwindCSS/Borders/Borders-Border.md
diff --git a/...exboxAndGrid/FlexboxAndGrid-AlignItems.md → ...exboxAndGrid/FlexboxAndGrid-AlignItems.md b/...exboxAndGrid/FlexboxAndGrid-AlignItems.md → ...exboxAndGrid/FlexboxAndGrid-AlignItems.md
diff --git a/...oxAndGrid/FlexboxAndGrid-FlexDirection.md → ...oxAndGrid/FlexboxAndGrid-FlexDirection.md b/...oxAndGrid/FlexboxAndGrid-FlexDirection.md → ...oxAndGrid/FlexboxAndGrid-FlexDirection.md
diff --git a/.../FlexboxAndGrid/FlexboxAndGrid-FlexGap.md → .../FlexboxAndGrid/FlexboxAndGrid-FlexGap.md b/.../FlexboxAndGrid/FlexboxAndGrid-FlexGap.md → .../FlexboxAndGrid/FlexboxAndGrid-FlexGap.md
diff --git a/...xAndGrid/FlexboxAndGrid-JustifyContent.md → ...xAndGrid/FlexboxAndGrid-JustifyContent.md b/...xAndGrid/FlexboxAndGrid-JustifyContent.md → ...xAndGrid/FlexboxAndGrid-JustifyContent.md
diff --git a/...iews/TailwindCSS/Layout/Layout-Display.md → ...docc/TailwindCSS/Layout/Layout-Display.md b/...iews/TailwindCSS/Layout/Layout-Display.md → ...docc/TailwindCSS/Layout/Layout-Display.md
diff --git a/Sources/Slipstream/Documentation.docc/TailwindCSS/Layout/Layout-Float.md b/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``
diff --git a/...ews/TailwindCSS/Spacing/Spacing-Margin.md → ...occ/TailwindCSS/Spacing/Spacing-Margin.md b/...ews/TailwindCSS/Spacing/Spacing-Margin.md → ...occ/TailwindCSS/Spacing/Spacing-Margin.md
diff --git a/...ws/TailwindCSS/Spacing/Spacing-Padding.md → ...cc/TailwindCSS/Spacing/Spacing-Padding.md b/...ws/TailwindCSS/Spacing/Spacing-Padding.md → ...cc/TailwindCSS/Spacing/Spacing-Padding.md
diff --git a/.../Views/TailwindCSS/TailwindCSS-Classes.md → ...n.docc/TailwindCSS/TailwindCSS-Classes.md b/.../Views/TailwindCSS/TailwindCSS-Classes.md → ...n.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
 

diff --git a/...ews/TailwindCSS/TailwindCSS-Conditions.md → ...occ/TailwindCSS/TailwindCSS-Conditions.md b/...ews/TailwindCSS/TailwindCSS-Conditions.md → ...occ/TailwindCSS/TailwindCSS-Conditions.md
diff --git a/...ons/TransitionsAndAnimations-Animation.md → ...ons/TransitionsAndAnimations-Animation.md b/...ons/TransitionsAndAnimations-Animation.md → ...ons/TransitionsAndAnimations-Animation.md
diff --git a/...ndCSS/Typography/Typography-FontDesign.md → ...ndCSS/Typography/Typography-FontDesign.md b/...ndCSS/Typography/Typography-FontDesign.md → ...ndCSS/Typography/Typography-FontDesign.md
diff --git a/...windCSS/Typography/Typography-FontSize.md → ...windCSS/Typography/Typography-FontSize.md b/...windCSS/Typography/Typography-FontSize.md → ...windCSS/Typography/Typography-FontSize.md
diff --git a/...SS/Typography/Typography-FontSmoothing.md → ...SS/Typography/Typography-FontSmoothing.md b/...SS/Typography/Typography-FontSmoothing.md → ...SS/Typography/Typography-FontSmoothing.md
diff --git a/...ndCSS/Typography/Typography-FontWeight.md → ...ndCSS/Typography/Typography-FontWeight.md b/...ndCSS/Typography/Typography-FontWeight.md → ...ndCSS/Typography/Typography-FontWeight.md
diff --git a/...ndCSS/Typography/Typography-LineHeight.md → ...ndCSS/Typography/Typography-LineHeight.md b/...ndCSS/Typography/Typography-LineHeight.md → ...ndCSS/Typography/Typography-LineHeight.md
diff --git a/...SS/Typography/Typography-TextAlignment.md → ...SS/Typography/Typography-TextAlignment.md b/...SS/Typography/Typography-TextAlignment.md → ...SS/Typography/Typography-TextAlignment.md
diff --git a/...indCSS/Typography/Typography-TextColor.md → ...indCSS/Typography/Typography-TextColor.md b/...indCSS/Typography/Typography-TextColor.md → ...indCSS/Typography/Typography-TextColor.md
diff --git a/...occ/Views/W3C/DocumentMetadata/Preload.md → ...tion.docc/W3C/DocumentMetadata/Preload.md b/...occ/Views/W3C/DocumentMetadata/Preload.md → ...tion.docc/W3C/DocumentMetadata/Preload.md
diff --git a/...n.docc/Views/W3C/EmbeddedContent/Image.md → ...ntation.docc/W3C/EmbeddedContent/Image.md b/...n.docc/Views/W3C/EmbeddedContent/Image.md → ...ntation.docc/W3C/EmbeddedContent/Image.md
diff --git a/...tation.docc/Views/W3C/Scripting/Script.md → ...ocumentation.docc/W3C/Scripting/Script.md b/...tation.docc/Views/W3C/Scripting/Script.md → ...ocumentation.docc/W3C/Scripting/Script.md
diff --git a/...cc/Views/W3C/Sections/Sections-Heading.md → ...ion.docc/W3C/Sections/Sections-Heading.md b/...cc/Views/W3C/Sections/Sections-Heading.md → ...ion.docc/W3C/Sections/Sections-Heading.md
diff --git a/...mentation.docc/Views/W3C/W3CAttributes.md → ...m/Documentation.docc/W3C/W3CAttributes.md b/...mentation.docc/Views/W3C/W3CAttributes.md → ...m/Documentation.docc/W3C/W3CAttributes.md
diff --git a/.../Documentation.docc/Views/W3C/W3CViews.md → ...stream/Documentation.docc/W3C/W3CViews.md b/.../Documentation.docc/Views/W3C/W3CViews.md → ...stream/Documentation.docc/W3C/W3CViews.md
diff --git a/Sources/Slipstream/TailwindCSS/Layout/View+float.swift b/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))
+  }
+}
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/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>

diff --git a/Tests/SlipstreamTests/TailwindCSS/Layout/FloatTests.swift b/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>"#)
+  }
+}