root = Card([header, statusBadge, statusCallout, deliveryCard, trackingHeading, trackingSteps, reportDialog])
header = CardHeader("Track your order", "Order #1042-8831")
statusBadge = Badge("In transit", "secondary")
statusCallout = Callout("info", "Where your package is now", "Your package arrived at the Toronto regional sorting facility at 9:42 AM and is moving to your local delivery hub.")
deliveryCard = Card([deliveryLabel, deliveryDate, deliveryWindow, progressBar], "sunk")
deliveryLabel = TextContent("Estimated delivery", "small")
deliveryDate = TextContent("Thursday, March 14", "large-heavy")
deliveryWindow = TextContent("By 8:00 PM · 2 days from now", "default")
progressBar = Progress(70, "70% of the trip complete")
trackingHeading = Heading("Tracking history", "h3")
trackingSteps = Steps([stepOrdered, stepShipped, stepTransit, stepOutDelivery])
stepOrdered = StepsItem("Order confirmed", "March 12 · 9:15 AM")
stepShipped = StepsItem("Shipped from Mississauga, ON", "March 12 · 4:30 PM")
stepTransit = StepsItem("In transit — Toronto, ON", "March 13 · 9:42 AM")
stepOutDelivery = StepsItem("Out for delivery", "Expected March 14")
reportDialog = DialogBlock("Report a problem", "Report a delivery problem", "Tell us what went wrong so we can help.", [problemForm])
problemForm = Form("report-problem", problemButtons, [issueField, detailsField])
issueField = FormControl("Issue type", issueSelect, "Choose the option that best matches")
issueSelect = Select("issue", [issueLate, issueDamaged, issueLost, issueOther], "Select an issue")
issueLate = SelectItem("late", "Delayed delivery")
issueDamaged = SelectItem("damaged", "Package arrived damaged")
issueLost = SelectItem("lost", "Package is lost")
issueOther = SelectItem("other", "Something else")
detailsField = FormControl("Details", detailsArea, "Optional — add anything else we should know")
detailsArea = TextArea("details", "Describe what happened...", 4)
problemButtons = Buttons([submitProblem])
submitProblem = Button("Submit report", null, "primary")