Add Section. (#178)

Part of #25.
ClutchEngineering · Sep 12, 2024 · 88ed86c · 88ed86c
1 parent 6223762
commit 88ed86c
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForWebDevelopers.md
@@ -65,7 +65,7 @@ provided below is an organized table of W3C HTML tags and their equivalent Slips
 :--------|:----------------
 [`<body>`](https://html.spec.whatwg.org/multipage/sections.html#the-body-element) | ``Body``
 [`<article>`](https://html.spec.whatwg.org/multipage/sections.html#the-article-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
-[`<section>`](https://html.spec.whatwg.org/multipage/sections.html#the-section-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
+[`<section>`](https://html.spec.whatwg.org/multipage/sections.html#the-section-element) | ``Section``
  [`<nav>`](https://html.spec.whatwg.org/multipage/sections.html#the-nav-element) | ``Navigation``
 [`<aside>`](https://html.spec.whatwg.org/multipage/sections.html#the-aside-element) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/25)
 [`<h1>`](https://html.spec.whatwg.org/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) | ``H1`` or ``Heading``

diff --git a/Sources/Slipstream/Documentation.docc/W3C/W3CViews.md b/Sources/Slipstream/Documentation.docc/W3C/W3CViews.md
@@ -24,6 +24,7 @@ The complete W3C HTML elements standard can be found [here](https://html.spec.wh
 ### Sections
 
 - ``Body``
+- ``Section``
 - ``Navigation``
 - ``Heading``
 - ``H1``

diff --git a/Sources/Slipstream/W3C/Elements/Sections/Section.swift b/Sources/Slipstream/W3C/Elements/Sections/Section.swift
@@ -0,0 +1,30 @@
+/// A view that represents a generic section of a document or application.
+/// A section, in this context, is a thematic grouping of content, typically
+/// with a heading.
+///
+/// ```swift
+/// struct MySiteContent: View {
+///   var body: some View {
+///     Body {
+///       Section {
+///         Link("About", destination: URL(string: "/about"))
+///       }
+///     }
+///   }
+/// }
+/// ```
+///
+/// - SeeAlso: W3C [section](https://html.spec.whatwg.org/multipage/sections.html#the-section-element) specification.
+@available(iOS 17.0, macOS 14.0, *)
+public struct Section<Content>: W3CElement where Content: View {
+  @_documentation(visibility: private)
+  public let tagName: String = "section"
+
+  @_documentation(visibility: private)
+  @ViewBuilder public let content: () -> Content
+
+  /// Creates a Section view.
+  public init(@ViewBuilder content: @escaping () -> Content) {
+    self.content = content
+  }
+}
diff --git a/Tests/SlipstreamTests/W3C/SectionTests.swift b/Tests/SlipstreamTests/W3C/SectionTests.swift
@@ -0,0 +1,23 @@
+import Testing
+
+import Slipstream
+
+struct SectionTests {
+  @Test func emptyBlock() throws {
+    try #expect(renderHTML(Section {}) == "<section></section>")
+  }
+
+  @Test func withText() throws {
+    try #expect(renderHTML(Section {
+      DOMString("Hello, world!")
+    }) == """
+<section>
+ Hello, world!
+</section>
+""")
+  }
+
+  @Test func attribute() throws {
+    try #expect(renderHTML(Section {}.language("en")) == #"<section lang="en"></section>"#)
+  }
+}