From 0452b873970d52283ce84e0e1b2f8fc5778accdc Mon Sep 17 00:00:00 2001
From: Jeff Verkoeyen <jverkoey@gmail.com>
Date: Sat, 14 Sep 2024 22:43:48 -0700
Subject: [PATCH] Add gridCellColumns modifier. (#196)

Part of https://github.com/jverkoey/slipstream/issues/51.
---
 .../SlipstreamForTailwindCSSDevelopers.md     |  2 +-
 .../FlexboxAndGrid-GridColumnStartEnd.md      | 14 ++++++++++
 .../FlexboxAndGrid/View+gridCellColumns.swift | 27 +++++++++++++++++++
 Sources/Slipstream/TailwindCSS/GridSpan.swift |  5 ++++
 .../FlexboxAndGrid/GridCellColumnsTests.swift | 14 ++++++++++
 5 files changed, 61 insertions(+), 1 deletion(-)
 create mode 100644 Sources/Slipstream/Documentation.docc/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-GridColumnStartEnd.md
 create mode 100644 Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+gridCellColumns.swift
 create mode 100644 Sources/Slipstream/TailwindCSS/GridSpan.swift
 create mode 100644 Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/GridCellColumnsTests.swift

diff --git a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
index 687b695..d086eac 100644
--- a/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
+++ b/Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md
@@ -44,7 +44,7 @@ Tailwind utility | Slipstream modifier
 [Flex Shrink](https://tailwindcss.com/docs/flex-shrink) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Order](https://tailwindcss.com/docs/order) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Grid Template Columns](https://tailwindcss.com/docs/grid-template-columns) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Grid Column Start / End](https://tailwindcss.com/docs/grid-column) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Grid Column Start / End](https://tailwindcss.com/docs/grid-column) | ``View/gridCellColumns(_:condition:)``, ``View/gridCellColumns(_:condition:)-2tedw``
 [Grid Template Rows](https://tailwindcss.com/docs/grid-template-rows) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Grid Row Start / End](https://tailwindcss.com/docs/grid-row) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Grid Auto Flow](https://tailwindcss.com/docs/grid-auto-flow) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
diff --git a/Sources/Slipstream/Documentation.docc/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-GridColumnStartEnd.md b/Sources/Slipstream/Documentation.docc/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-GridColumnStartEnd.md
new file mode 100644
index 0000000..9a49491
--- /dev/null
+++ b/Sources/Slipstream/Documentation.docc/TailwindCSS/FlexboxAndGrid/FlexboxAndGrid-GridColumnStartEnd.md
@@ -0,0 +1,14 @@
+# Grid column start / end
+
+Utilities for controlling how views are sized and placed across grid columns.
+
+## Topics
+
+### Modifiers
+
+- ``View/gridCellColumns(_:condition:)``
+- ``View/gridCellColumns(_:condition:)-2tedw``
+
+### Supporting types
+
+- ``GridSpan``
diff --git a/Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+gridCellColumns.swift b/Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+gridCellColumns.swift
new file mode 100644
index 0000000..5a96cf7
--- /dev/null
+++ b/Sources/Slipstream/TailwindCSS/FlexboxAndGrid/View+gridCellColumns.swift
@@ -0,0 +1,27 @@
+extension View {
+  /// Tells a view that acts as a cell in a grid to span the specified number of columns.
+  ///
+  /// - SeeAlso: Tailwind CSS' [grid-column](https://tailwindcss.com/docs/grid-column) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func gridCellColumns(_ count: Int, condition: Condition? = nil) -> some View {
+    return modifier(
+      TailwindClassModifier(
+        add: "col-span-\(count)",
+        condition: condition
+      )
+    )
+  }
+
+  /// Tells a view that acts as a cell in a grid to span the specified number of columns.
+  ///
+  /// - SeeAlso: Tailwind CSS' [grid-column](https://tailwindcss.com/docs/grid-column) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func gridCellColumns(_ span: GridSpan, condition: Condition? = nil) -> some View {
+    return modifier(
+      TailwindClassModifier(
+        add: "col-span-" + span.rawValue,
+        condition: condition
+      )
+    )
+  }
+}
diff --git a/Sources/Slipstream/TailwindCSS/GridSpan.swift b/Sources/Slipstream/TailwindCSS/GridSpan.swift
new file mode 100644
index 0000000..abf83e0
--- /dev/null
+++ b/Sources/Slipstream/TailwindCSS/GridSpan.swift
@@ -0,0 +1,5 @@
+/// A generic representation of a span in a grid.
+@available(iOS 17.0, macOS 14.0, *)
+public enum GridSpan: String {
+  case full
+}
diff --git a/Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/GridCellColumnsTests.swift b/Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/GridCellColumnsTests.swift
new file mode 100644
index 0000000..83fa517
--- /dev/null
+++ b/Tests/SlipstreamTests/TailwindCSS/FlexboxAndGrid/GridCellColumnsTests.swift
@@ -0,0 +1,14 @@
+import Testing
+import Slipstream
+
+struct GridCellColumnsTests {
+  @Test func columns() throws {
+    try #expect(renderHTML(Div {}.gridCellColumns(1)) == #"<div class="col-span-1"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(2)) == #"<div class="col-span-2"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(3)) == #"<div class="col-span-3"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(4)) == #"<div class="col-span-4"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(5)) == #"<div class="col-span-5"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(6)) == #"<div class="col-span-6"></div>"#)
+    try #expect(renderHTML(Div {}.gridCellColumns(.full)) == #"<div class="col-span-full"></div>"#)
+  }
+}