Add Tailwind Container implementation.

Part of #51.
ClutchEngineering · Aug 3, 2024 · 1830a80 · 1830a80
1 parent 5f064d8
commit 1830a80
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 5 deletions.
diff --git a/Sources/Slipstream/Documentation.docc/Slipstream.md b/Sources/Slipstream/Documentation.docc/Slipstream.md
@@ -64,6 +64,10 @@ print(try renderHTML(HelloWorld()))
 - <doc:Fundamentals>
 - <doc:TextInputAndOutput>
 
+### Tailwind CSS
+
+- <doc:TailwindCSSViews>
+
 ### W3C
 
 - <doc:W3CViews>

diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSViews.md
@@ -0,0 +1,9 @@
+# Views
+
+Slipstream implementations of Tailwind CSS views.
+
+## Topics
+
+### Layout
+
+- ``Container``
diff --git a/Sources/Slipstream/TailwindCSS/Layout/Container.swift b/Sources/Slipstream/TailwindCSS/Layout/Container.swift
@@ -0,0 +1,35 @@
+/// A component for fixing an element's width to the current breakpoint.
+///
+/// A ``Container`` is a ``Div``, and is similarly used to organize child
+/// views together.
+///
+/// ```swift
+/// struct MySiteContent: View {
+///   var body: some View {
+///     Body {
+///       Container {
+///         Text("Hello, world!")
+///       }
+///     }
+///   }
+/// }
+/// ```
+///
+/// - SeeAlso: Tailwind CSS' [`container`](https://tailwindcss.com/docs/container) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Container<Content: View>: View {
+  /// Creates a Container view.
+  public init(@ViewBuilder content: @escaping () -> Content) {
+    self.content = content
+  }
+
+  @_documentation(visibility: private)
+  public var body: some View {
+    Div {
+      content()
+    }
+    .modifier(ClassModifier(add: "container"))
+  }
+
+  private let content: () -> Content
+}
diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift
@@ -15,12 +15,9 @@ private struct CatalogSite: View {
         Stylesheet(URL(string: "/css/bootstrap.css"))
       }
       Body {
-        Div {
+        Container {
           Text("Hello, world!")
         }
-        .className("content")
-        .className("more content")
-        .classNames(["and more content", "foobar"])
       }
       .id("root")
     }
@@ -39,7 +36,7 @@ struct CatalogSiteTests {
   <link rel="stylesheet" href="/css/bootstrap.css" />
  </head>
  <body id="root">
-  <div class="content more and foobar">
+  <div class="container">
    Hello, world!
   </div>
  </body>

diff --git a/Tests/SlipstreamTests/Views/TailwindCSS/ContainerTests.swift b/Tests/SlipstreamTests/Views/TailwindCSS/ContainerTests.swift
@@ -0,0 +1,19 @@
+import Testing
+
+import Slipstream
+
+struct ContainerTests {
+  @Test func emptyBlock() throws {
+    try #expect(renderHTML(Container {}) == #"<div class="container"></div>"#)
+  }
+
+  @Test func withText() throws {
+    try #expect(renderHTML(Container {
+      Text("Hello, world!")
+    }) == """
+<div class="container">
+ Hello, world!
+</div>
+""")
+  }
+}