Implemented phase 3 for the POC prototype in the Website service.

Services/Website/Sources/Library/Internal/Components/Handshake.swift

@@ -0,0 +1,68 @@
+import Elementary
+import Persistence
+
+/// The five steps of a sale's handshake, as dots: done, current, or still to come.
+struct Handshake: HTML {
+
+    // MARK: Properties
+
+    /// The last step taken.
+    let completed: Sale.Step
+
+    // MARK: Computed
+
+    var body: some HTML {
+        ol(
+            .class("handshake"),
+            .custom(name: "aria-label", value: "Handshake: \(completed.label) done")
+        ) {
+            for step in Sale.Step.allCases {
+                li(.class(step <= completed ? "handshake__step handshake__step--done" : "handshake__step")) {
+                    step.label
+                }
+            }
+        }
+    }
+
+}
+
+// MARK: - Extensions
+
+extension Sale.Step {
+
+    // MARK: Computed
+
+    /// The step's name.
+    var label: String {
+        switch self {
+        case .agreed: "Agreed"
+        case .paid: "Paid"
+        case .sent: "Sent"
+        case .received: "Received"
+        case .rated: "Rated"
+        }
+    }
+
+}
+
+extension Sale {
+
+    // MARK: Computed
+
+    /// The record's number as shown, e.g. `CCN-48213`.
+    var reference: String {
+        "CCN-\(number)"
+    }
+
+    /// Where the sale stands, in a few words, and whether that is done.
+    var status: (label: String, tone: Chip.Tone) {
+        switch next {
+        case .paid: ("Awaiting payment", .warn)
+        case .sent: ("Awaiting dispatch", .warn)
+        case .received: ("On its way", .warn)
+        case .rated: ("Awaiting ratings", .neutral)
+        default: ("Complete", .good)
+        }
+    }
+
+}