Add justifyContent modifier.

Part of #51.

Sources/Slipstream/Documentation.docc/Views/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-JustifyContent.md

@@ -0,0 +1,13 @@
+# Justify content
+
+Utilities for controlling how flex and grid views are positioned along a container's main axis.
+
+## Topics
+
+### Modifiers
+
+- ``View/justifyContent(_:condition:)``
+
+### Supporting types
+
+- ``JustifyContent``

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

@@ -15,6 +15,7 @@ Slipstream implementations of Tailwind CSS's classes.
 
 - <doc:FlexboxAndGrid-FlexDirection>
 - <doc:FlexboxAndGrid-FlexGap>
+- <doc:FlexboxAndGrid-JustifyContent>
 
 ### Spacing
 

Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+justifyContent.swift

@@ -0,0 +1,118 @@
+/// Constants that specify how flex and grid views are positioned along a container's main axis.
+///
+/// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum JustifyContent: String {
+  /// Packs content items in their default position as if no
+  /// justify-content value was set.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌──────────────────────────────────────────────┐
+  /// │ ┌─┐ ┌─┐ ┌─┐                                  │
+  /// │ └─┘ └─┘ └─┘                                  │
+  /// └──────────────────────────────────────────────┘
+  /// ```
+  case normal
+
+  /// Justifies items against the start of the container’s main axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌─────────────────────────────────────────────┐
+  /// │ ┌─┐ ┌─┐ ┌─┐                                 │
+  /// │ └─┘ └─┘ └─┘                                 │
+  /// └─────────────────────────────────────────────┘
+  /// ```
+  case start
+
+  /// Justifies items against the end of the container’s main axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌─────────────────────────────────────────────┐
+  /// │                                 ┌─┐ ┌─┐ ┌─┐ │
+  /// │                                 └─┘ └─┘ └─┘ │
+  /// └─────────────────────────────────────────────┘
+  /// ```
+  case end
+
+  /// Justifies items against the center of the container’s main axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌─────────────────────────────────────────────┐
+  /// │                 ┌─┐ ┌─┐ ┌─┐                 │
+  /// │                 └─┘ └─┘ └─┘                 │
+  /// └─────────────────────────────────────────────┘
+  /// ```
+  case center
+
+  /// Justifies items along the container’s main axis such that there
+  /// is an equal amount of space between each item.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌─────────────────────────────────────────────┐
+  /// │ ┌─┐                 ┌─┐                 ┌─┐ │
+  /// │ └─┘                 └─┘                 └─┘ │
+  /// └─────────────────────────────────────────────┘
+  /// ```
+  case between
+
+  /// Justifies items along the container’s main axis such that there
+  /// is an equal amount of space on each side of each item.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌─────────────────────────────────────────────┐
+  /// │      ┌─┐            ┌─┐            ┌─┐      │
+  /// │      └─┘            └─┘            └─┘      │
+  /// └─────────────────────────────────────────────┘
+  /// ```
+  case around
+
+  /// Justifies items along the container’s main axis such that there
+  /// is an equal amount of space around each item, but also
+  /// accounting for the doubling of space you would normally see
+  /// between each item when using ``JustifyContent/around``.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌─────────────────────────────────────────────┐
+  /// │         ┌─┐         ┌─┐         ┌─┐         │
+  /// │         └─┘         └─┘         └─┘         │
+  /// └─────────────────────────────────────────────┘
+  /// ```
+  case evenly
+
+  /// Allows content items to fill the available space along the
+  /// container’s main axis.
+  ///
+  /// When along the x-axis:
+  ///
+  /// ```
+  /// ┌───────────────────────────────────────────┐
+  /// │ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
+  /// │ └───────────┘ └───────────┘ └───────────┘ │
+  /// └───────────────────────────────────────────┘
+  /// ```
+  case stretch
+}
+
+extension View {
+  /// Controls how flex and grid views are positioned along a container's main axis.
+  ///
+  /// - SeeAlso: Tailwind CSS' [`justify content`](https://tailwindcss.com/docs/justify-content) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func justifyContent(_ justifyContent: JustifyContent, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: "justify-" + justifyContent.rawValue, condition: condition))
+  }
+}

Tests/SlipstreamTests/Sites/CatalogSiteTests.swift

@@ -51,6 +51,7 @@ private struct CatalogSite: View {
               .display(.hidden)
           }
           .flexGap(.x, width: 2)
+          .justifyContent(.center)
         }
         .border(.black, width: 4, edges: .bottom)
         .backgroundImage(URL(string: "/logo.svg"), size: .size(width: 50, height: 100), repeat: .no)
@@ -80,7 +81,7 @@ struct CatalogSiteTests {
    <br />world!
    <a href="/about">About</a>
    <a href="/home">Home</a>
-   <div class="flex flex-col gap-x-0.5">
+   <div class="flex flex-col gap-x-0.5 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">Heading 2</h2>

Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/JustifyContentTests.swift

@@ -0,0 +1,15 @@
+import Testing
+import Slipstream
+
+struct JustifyContentTests {
+  @Test func enumeration() throws {
+    try #expect(renderHTML(Div {}.justifyContent(.normal)) == #"<div class="justify-normal"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.start)) == #"<div class="justify-start"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.end)) == #"<div class="justify-end"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.center)) == #"<div class="justify-center"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.between)) == #"<div class="justify-between"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.around)) == #"<div class="justify-around"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.evenly)) == #"<div class="justify-evenly"></div>"#)
+    try #expect(renderHTML(Div {}.justifyContent(.stretch)) == #"<div class="justify-stretch"></div>"#)
+  }
+}