@atelic-action/ui 3.2.0 → 3.3.1

package/README.md

@@ -23,6 +23,7 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `IconList` | `@atelic-action/ui/components` | A list whose bullets are icons, one for the list or one per item, each in a tone | [#icon-list](https://ui.atelic.me/#icon-list) |
 | `DataTable` | `@atelic-action/ui/components` | A table whose first column names each row, sortable, stacking on a phone | [#data-table](https://ui.atelic.me/#data-table) |
 | `ReportCard` | `@atelic-action/ui/components` | A name, a grade, and a line per row, in labeled groups, each row a link to its section | [#report-card](https://ui.atelic.me/#report-card) |
+| `reportCardLabels`, `ReportCardLabels` | `@atelic-action/ui/components` | The words a screen reader hears around a report card's letters by default, and their type | none |
 | `Rank` | `@atelic-action/ui/components` | A figure with its badge in a tone, for a table cell: a rank, a place in an answer, or a dash | [#rank](https://ui.atelic.me/#rank) |
 | `StatRow` | `@atelic-action/ui/components` | A row of large figures with periods, deltas, and trends | [#stat-row](https://ui.atelic.me/#stat-row) |
 | `Callout` | `@atelic-action/ui/components` | One finding: an icon in its tone, the title, the explainer | [#callout](https://ui.atelic.me/#callout) |
@@ -512,6 +513,8 @@ The primitives that came with them, in `@atelic-action/ui/primitives`: `ImageFra
 
 The entry also exports the helpers the sections use, for a site's own code: `formatClock`, `formatHoursRange`, and `isClosed` for hours, `isHoneypotFilled`, and `trackEvent`.
 
+Hours print on the 12 hour clock unless the site's config sets `clock: "24h"`, which turns "9a to 5p" into "09:00 to 17:00" everywhere hours appear: the footer through `SiteShell`, `LocationSection`, and `HoursTable` (which takes `clock` as a prop when used on its own). `formatClock` and `formatHoursRange` take the same `clock` option for a site's own code.
+
 ### The Marketing Vite Config and Commands
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "3.2.0",
+	"version": "3.3.1",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, the access gate, and the app shell they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/chrome/SiteShell.tsx

@@ -124,7 +124,7 @@ export function SiteShell({
 						email={site.email}
 						hours={site.hours.map((row) => ({
 							label: row.labelShort,
-							range: formatHoursRange(row, { short: true }),
+							range: formatHoursRange(row, { short: true, clock: site.clock }),
 						}))}
 						attribution={site.attribution}
 						note={site.footer?.note}

package/src/lib/hours.ts

@@ -1,13 +1,23 @@
-import type { OpeningHours } from "../sections/siteConfig";
+import type { Clock, OpeningHours } from "../sections/siteConfig";
+
+/** How a time prints: `short` drops a whole hour's minutes on the 12 hour clock. */
+export interface ClockOptions {
+	short?: boolean;
+	/** "12h" (the default) or "24h"; see `SiteConfig.clock`. */
+	clock?: Clock;
+}
 
 /**
  * Formats a 24 hour "HH:MM" time as the display style used across the
  * marketing components: "11:00" -> "11:00a", "19:00" -> "7:00p".
  * With short: true, whole hours drop their minutes: "11a", "7p".
+ * With clock: "24h", the time prints as "HH:MM" with a leading zero
+ * ("09:00", "17:00") and short changes nothing.
  */
-export function formatClock(time: string, opts: { short?: boolean } = {}): string {
+export function formatClock(time: string, opts: ClockOptions = {}): string {
 	const [hourStr, minuteStr = "00"] = time.split(":");
 	const hour24 = Number(hourStr);
+	if (opts.clock === "24h") return `${String(hour24 % 24).padStart(2, "0")}:${minuteStr}`;
 	const suffix = hour24 % 24 >= 12 ? "p" : "a";
 	const hour = hour24 % 12 || 12;
 	if (opts.short && minuteStr === "00") return `${hour}${suffix}`;
@@ -19,10 +29,11 @@ export function isClosed(row: OpeningHours): boolean {
 }
 
 /**
- * "11:00a to 7:00p" (or "11a to 7p" with short: true). Rows without times
- * render their note ("By appointment") when present, else "Closed".
+ * "11:00a to 7:00p" (or "11a to 7p" with short: true, or "11:00 to 19:00"
+ * with clock: "24h"). Rows without times render their note ("By
+ * appointment") when present, else "Closed".
  */
-export function formatHoursRange(row: OpeningHours, opts: { short?: boolean } = {}): string {
+export function formatHoursRange(row: OpeningHours, opts: ClockOptions = {}): string {
 	if (!row.opens || !row.closes) return row.note ?? "Closed";
 	return `${formatClock(row.opens, opts)} to ${formatClock(row.closes, opts)}`;
 }

package/src/sections/HoursTable.tsx

@@ -1,12 +1,14 @@
 import { formatHoursRange, isClosed } from "../lib/hours";
-import type { OpeningHours } from "./siteConfig";
+import type { Clock, OpeningHours } from "./siteConfig";
 
 export interface HoursTableProps {
 	hours: OpeningHours[];
+	/** "12h" (the default) or "24h"; pass the site's `SiteConfig.clock`. */
+	clock?: Clock;
 }
 
 /** Day-by-day hours rows with dashed rules and mono times. */
-export function HoursTable({ hours }: HoursTableProps) {
+export function HoursTable({ hours, clock }: HoursTableProps) {
 	return (
 		<div>
 			{hours.map((row) => (
@@ -15,7 +17,7 @@ export function HoursTable({ hours }: HoursTableProps) {
 					className={["hours-row", isClosed(row) && "closed"].filter(Boolean).join(" ")}
 				>
 					<span className="day">{row.label}</span>
-					<span className="time">{formatHoursRange(row)}</span>
+					<span className="time">{formatHoursRange(row, { clock })}</span>
 				</div>
 			))}
 		</div>

package/src/sections/LocationSection.tsx

@@ -7,7 +7,7 @@ import type { SiteConfig } from "./siteConfig";
 
 /** The keys of the site config the section reads; a whole `SiteConfig` passes as it is. */
 export type LocationSectionSite = MapEmbedSite &
-	Pick<SiteConfig, "serviceAreas" | "hours" | "phone">;
+	Pick<SiteConfig, "serviceAreas" | "hours" | "clock" | "phone">;
 
 export interface LocationSectionProps {
 	site: LocationSectionSite;
@@ -41,7 +41,7 @@ export function LocationSection({ site, eyebrow = "Find us", title, lead }: Loca
 
 					<div className="loc-block">
 						<h4>Hours</h4>
-						<HoursTable hours={site.hours} />
+						<HoursTable hours={site.hours} clock={site.clock} />
 					</div>
 
 					<div className="loc-actions">

package/src/sections/index.ts

@@ -6,7 +6,7 @@
  * its own.
  */
 export { isHoneypotFilled } from "../lib/honeypot";
-export { formatClock, formatHoursRange, isClosed } from "../lib/hours";
+export { type ClockOptions, formatClock, formatHoursRange, isClosed } from "../lib/hours";
 export { type EventParams, trackEvent } from "../lib/trackEvent";
 export { BlogIndex, type BlogIndexItem, type BlogIndexProps } from "./BlogIndex";
 export { BlogPost, type BlogPostDoc, type BlogPostProps } from "./BlogPost";
@@ -65,6 +65,7 @@ export { type SocialPhoto, SocialStrip, type SocialStripProps } from "./SocialSt
 export { SplitSection, type SplitSectionProps } from "./SplitSection";
 export type {
 	Address,
+	Clock,
 	CTA,
 	Founder,
 	GateConfig,

package/src/sections/siteConfig.ts

@@ -24,6 +24,9 @@ export interface CTA {
 	external?: boolean;
 }
 
+/** How opening hours print: "12h" reads "9a to 5p", "24h" reads "09:00 to 17:00". */
+export type Clock = "12h" | "24h";
+
 export interface OpeningHours {
 	/** Row label as displayed, e.g. "Monday" or "Friday to Sunday". */
 	label: string;
@@ -137,6 +140,14 @@ export interface SiteConfig {
 	 */
 	mapImage?: string;
 	hours: OpeningHours[];
+	/**
+	 * The clock the hours print on, wherever they appear (the footer, the
+	 * hours table, the location section). "12h" (the default) reads "9a to 5p"
+	 * in the footer and "9:00a to 5:00p" in the table; "24h" reads "09:00 to
+	 * 17:00" in both, with leading zeros. Structured data is unaffected, since
+	 * `opens` and `closes` are already 24 hour.
+	 */
+	clock?: Clock;
 	/** Neighborhoods or cities served; feeds local SEO copy and structured data. */
 	serviceAreas: string[];
 	priceRange?: string;

package/src/styles/components.css

@@ -661,11 +661,23 @@
 			grid-column: 4;
 		}
 	}
+	/* A clipping card can defeat a row's break-inside in print engines other
+	   than Chrome, so the card stops clipping there and the first group
+	   label rounds its own top corners instead. A label or a heading never
+	   ends a page alone. */
 	@media print {
 		.atelic-ui .rc-card {
+			overflow: visible;
 			box-shadow: none;
 			border-color: var(--neutral-200);
 		}
+		.atelic-ui .rc-card > .rc-group:first-child {
+			border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
+		}
+		.atelic-ui .rc-head,
+		.atelic-ui .rc-group {
+			break-after: avoid;
+		}
 		.atelic-ui .rc-row {
 			break-inside: avoid;
 		}