Add transition modifier. (#190)

Part of #51.

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md

@@ -211,7 +211,7 @@ Tailwind utility | Slipstream modifier
 
 Tailwind utility | Slipstream modifier
 :----------------|:-------------------
-[Transition Property](https://tailwindcss.com/docs/transition-property) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Transition Property](https://tailwindcss.com/docs/transition-property) | ``View/transition(_:condition:)``
 [Transition Duration](https://tailwindcss.com/docs/transition-duration) | ``View/animation(_:condition:)``, ``Animation``
 [Transition Timing Function](https://tailwindcss.com/docs/transition-timing-function) | ``View/animation(_:condition:)``, ``Animation``
 [Transition Delay](https://tailwindcss.com/docs/transition-delay) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)

Sources/Slipstream/TailwindCSS/Transition.swift

@@ -0,0 +1,23 @@
+/// A representation of the CSS properties that should transition.
+public enum Transition: String {
+  /// Transitions nothing.
+  case none = "-none"
+
+  /// Transitions all CSS properties that can be transformed.
+  case all = "-all"
+
+  /// Transitions color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, and backdrop-filter.
+  case `default` = ""
+
+  /// Transitions color, background-color, border-color, text-decoration-color, fill, and stroke.
+  case colors = "-colors"
+
+  /// Transitions opacity.
+  case opacity = "-opacity"
+
+  /// Transitions box-shadow.
+  case shadow = "-shadow"
+
+  /// Transitions transform.
+  case transform = "-transform"
+}

Sources/Slipstream/TailwindCSS/TransitionsAndAnimations/View+transition.swift

@@ -0,0 +1,11 @@
+import Foundation
+
+extension View {
+  /// Indicates which properties should transition when they change.
+  ///
+  /// - SeeAlso: Tailwind CSS' [transition](https://tailwindcss.com/docs/transition-property) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func transition(_ transition: Transition, condition: Condition? = nil) -> some View {
+    return modifier(TailwindClassModifier(add: "transition" + transition.rawValue, condition: condition))
+  }
+}

Tests/SlipstreamTests/TailwindCSS/TransitionsAndAnimations/TransitionTests.swift

@@ -0,0 +1,14 @@
+import Testing
+import Slipstream
+
+struct TransitionTests {
+  @Test func properties() throws {
+    try #expect(renderHTML(Div {}.transition(.none)) == #"<div class="transition-none"></div>"#)
+    try #expect(renderHTML(Div {}.transition(.all)) == #"<div class="transition-all"></div>"#)
+    try #expect(renderHTML(Div {}.transition(.default)) == #"<div class="transition"></div>"#)
+    try #expect(renderHTML(Div {}.transition(.colors)) == #"<div class="transition-colors"></div>"#)
+    try #expect(renderHTML(Div {}.transition(.opacity)) == #"<div class="transition-opacity"></div>"#)
+    try #expect(renderHTML(Div {}.transition(.shadow)) == #"<div class="transition-shadow"></div>"#)
+    try #expect(renderHTML(Div {}.transition(.transform)) == #"<div class="transition-transform"></div>"#)
+  }
+}