@charcuterie/ui 4.6.0 → 4.7.0

package/src/LaneTimeline/LaneTimeline.test.tsx

@@ -0,0 +1,330 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, within } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./LaneTimeline.stories.tsx"
+
+const {
+  AllStates,
+  AllVariants,
+  Interactive,
+  LongRange,
+  NarrowView,
+  Playground,
+  Responsive,
+} = composeStories(stories)
+
+/**
+ * The timeline is the landmark; the lanes are **groups** inside it.
+ *
+ * Eight lanes as eight `region`s would bury the page's real
+ * landmarks, and two timelines on one page would put two landmarks
+ * with the same name in the document — axe's `landmark-unique`,
+ * which `BoardLaneList` hit for real before its lanes became groups.
+ */
+test("the timeline is a named landmark and its lanes are named groups", async () => {
+  const { canvas } = await mountStory(Playground)
+
+  const timeline = expectAgentDrivable(canvas, {
+    name: "The week",
+    role: "region",
+  })
+
+  for (const laneLabel of ["Ada", "Wren", "Juno", "Rook"]) {
+    expectAgentDrivable(canvas, {
+      name: laneLabel,
+      role: "group",
+    })
+  }
+
+  await expectNoAxeViolations(timeline)
+})
+
+/**
+ * The claim the component is built on: a lane carrying overlapping
+ * work is **taller**, so load asymmetry reads before anybody counts
+ * anything.
+ *
+ * Measured as real geometry rather than as a row count, because the
+ * row count is the thing that could be right while the CSS grid drew
+ * them all on top of each other.
+ */
+test("a lane carrying more is taller than a lane carrying less", async () => {
+  const { canvas } = await mountStory(Playground)
+
+  const getLaneHeight = (name: string) =>
+    canvas
+      .getByRole("group", { name })
+      .getBoundingClientRect().height
+
+  await expect(getLaneHeight("Wren")).toBeGreaterThan(
+    getLaneHeight("Ada"),
+  )
+})
+
+/**
+ * The count is what the lane carries **in this range**, and it keeps
+ * counting what the row limit hid — a lane must not look lighter by
+ * being more loaded.
+ */
+test("a lane past its row limit counts the rest and says what is missing", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const wren = canvas.getAllByRole("group", {
+    name: "Wren",
+  })[0]
+
+  if (!wren) {
+    throw new Error("the Wren lane must render")
+  }
+
+  await expect(
+    within(wren).getByText("+ 3 more overlapping in Wren"),
+  ).toBeInTheDocument()
+
+  // Six in the range, three of them hidden behind `maxRowCount={2}`.
+  await expect(
+    within(wren).getByText("6"),
+  ).toBeInTheDocument()
+})
+
+/**
+ * A multi-day thing is one bar covering the days it covers — the
+ * shape a month grid cannot draw, and the assertion that catches an
+ * off-by-one that no screenshot can.
+ */
+test("a multi-day item is one bar spanning its own days", async () => {
+  const { canvas } = await mountStory(Playground)
+
+  const bar = canvas.getByTitle(
+    /^Field recording trip, Mon 6 Apr to Thu 9 Apr, 4 days$/,
+  )
+
+  const cell = bar.closest("li")
+
+  // Monday is column 1 of this week, and four days is a span of 4 —
+  // not 3, which is what a half-open reading of `end` produces, and
+  // not 5, which is what adding a day twice produces.
+  await expect(cell?.style.gridColumn).toBe("1 / span 4")
+})
+
+/**
+ * The four edge cases, each of which is a place a naive
+ * implementation draws nothing or draws it somewhere else.
+ */
+test("an item starting before the range is clipped to the first column and says so", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const bar = canvas.getByTitle(
+    /^Desk hire, started last month, Mon 30 Mar to Wed 8 Apr, 10 days, starts before this range$/,
+  )
+
+  // Column 1, never 0 and never negative — a negative
+  // `grid-column-start` counts back from the END of the row, so the
+  // naive subtraction puts the bar at the far side of the week and
+  // nothing fails.
+  await expect(bar.closest("li")?.style.gridColumn).toBe(
+    "1 / span 3",
+  )
+})
+
+test("an item running past the range is clipped to the last column and says so", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const bar = canvas.getByTitle(
+    /^Residency, runs into May, Fri 10 Apr to Thu 30 Apr, 21 days, continues past this range$/,
+  )
+
+  await expect(bar.closest("li")?.style.gridColumn).toBe(
+    "5 / span 3",
+  )
+})
+
+test("a single-day item is one column wide and still a bar", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  const bar = canvas.getByTitle(
+    /^Tape delivery, Thu 9 Apr$/,
+  )
+
+  await expect(bar.closest("li")?.style.gridColumn).toBe(
+    "4 / span 1",
+  )
+})
+
+test("a zero-width item is drawn on its start day rather than dropped", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  // `end` before `start`. It is drawn, because a dropped row is a
+  // data fault nobody can see, and it is one column, because there
+  // is no such thing as a backwards bar.
+  const bar = canvas.getByTitle(
+    /^Kit return, dates entered backwards, Sat 11 Apr$/,
+  )
+
+  await expect(bar.closest("li")?.style.gridColumn).toBe(
+    "6 / span 1",
+  )
+})
+
+test("an item outside the range is not drawn and is not counted", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  await expect(
+    canvas.queryByText("Next month's session"),
+  ).toBeNull()
+
+  const studio = canvas.getByRole("group", {
+    name: "Studio floor",
+  })
+
+  // Five items in the fixture, four of them in the week.
+  await expect(
+    within(studio).getByText("4"),
+  ).toBeInTheDocument()
+})
+
+/**
+ * The Narrow View. There is no axis, nothing scrolls sideways, and
+ * every span that the geometry used to carry is now printed as text
+ * — which is the trade being made, stated as an assertion.
+ */
+test("the Narrow View drops the axis and writes every span out in words", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(NarrowView)
+
+  await expect(
+    canvas.getByText("Field recording trip"),
+  ).toBeInTheDocument()
+
+  await expect(
+    canvas.getByText("Mon 6 Apr to Thu 9 Apr, 4 days"),
+  ).toBeInTheDocument()
+
+  /*
+   * No bar carries a grid placement, because there is no grid. The
+   * selector is `li[style]` rather than a substring match on
+   * `grid-column`: chromium serialises the two placement properties
+   * back out as the `grid-area` shorthand, so a `[style*=…]` test
+   * for the name React set finds nothing and passes for the wrong
+   * reason.
+   */
+  await expect(
+    canvasElement.querySelectorAll("li[style]"),
+  ).toHaveLength(0)
+
+  // And nothing is hidden off the side of the box. `scrollWidth`
+  // past `clientWidth` is the silent overflow this component refuses
+  // to ship — *"no horizontal scroll, ever"*.
+  const timeline = canvas.getByRole("region", {
+    name: "The week, Narrow View",
+  })
+
+  await expect(timeline.scrollWidth).toBeLessThanOrEqual(
+    timeline.clientWidth,
+  )
+})
+
+/**
+ * The fold is the width **per column**, which is why it is measured
+ * rather than queried. One container width, two answers, because the
+ * other number is in the data.
+ */
+test("the same width keeps its axis for a week and loses it for a month", async () => {
+  const { canvasElement } = await mountStory(Responsive)
+
+  const getBarCount = (name: string) =>
+    within(canvasElement)
+      .getByRole("region", { name })
+      .querySelectorAll("li[style]").length
+
+  // The 34rem panel has room for a seven-column axis.
+  await expect(
+    getBarCount("The week at 34rem"),
+  ).toBeGreaterThan(0)
+
+  // The same 34rem panel has no room for a thirty-column one, so it
+  // becomes the list instead. No media query could tell these two
+  // apart: the box never changed.
+  await expect(getBarCount("The month at 34rem")).toBe(0)
+})
+
+/**
+ * Thinning the labels rather than shrinking the type, because type
+ * that shrinks to fit is type somebody cannot read.
+ */
+test("a long range labels the axis in whole weeks", async () => {
+  const { canvas } = await mountStory(LongRange)
+
+  // Thirty days, labelled every seven: 1, 8, 15, 22, 29.
+  await expect(
+    canvas.getByText("Wed 1 Apr"),
+  ).toBeInTheDocument()
+
+  await expect(
+    canvas.getByText("Wed 8 Apr"),
+  ).toBeInTheDocument()
+
+  await expect(canvas.queryByText("Thu 2 Apr")).toBeNull()
+})
+
+/**
+ * A bar with an `onSelect` is a real control, found by the same
+ * `getByRole(role, { name })` an agent or a Playwright script
+ * writes — and its name carries the span, so thirty bars are thirty
+ * distinguishable controls rather than thirty of the same word.
+ */
+test("a bar that acts is drivable by role and name", async () => {
+  const { canvas } = await mountStory(Interactive)
+
+  const bar = expectAgentDrivable(canvas, {
+    name: "Foley session, Tue 7 Apr to Wed 8 Apr, 2 days",
+    role: "button",
+  })
+
+  await userEvent.click(bar)
+
+  await expect(
+    canvas.getByText("Picked: Foley session"),
+  ).toBeInTheDocument()
+})
+
+test("a bar that navigates is a real link", async () => {
+  const { canvas } = await mountStory(AllVariants)
+
+  const link = canvas.getAllByRole("link", {
+    name: "Foley session, Tue 7 Apr to Wed 8 Apr, 2 days",
+  })[0]
+
+  await expect(link).toHaveAttribute("href", "/item/foley")
+})
+
+/**
+ * *"Real empty states"* is a standing requirement, and an empty
+ * timeline is what a household sees on a good week.
+ */
+test("a timeline with no lanes shows a real empty state", async () => {
+  const { canvas } = await mountStory(AllStates)
+
+  await expect(
+    canvas.getByText("No lanes yet"),
+  ).toBeInTheDocument()
+
+  await expect(
+    canvas.getByText("Nobody has a lane yet"),
+  ).toBeInTheDocument()
+
+  // An empty *lane* is not an empty timeline. It keeps its heading
+  // and its zero, because a lane carrying nothing is the fact the
+  // asymmetry is measured against.
+  const spare = canvas.getByRole("group", {
+    name: "Spare room",
+  })
+
+  await expect(
+    within(spare).getByText("0"),
+  ).toBeInTheDocument()
+})

package/src/LaneTimeline/LaneTimeline.tsx

@@ -0,0 +1,381 @@
+import type { ReactNode } from "react"
+
+import { getPlainDateFromDayNumber } from "../DatePicker/plainDate.ts"
+import { EmptyState } from "../EmptyState/EmptyState.tsx"
+import { toClassName } from "../toClassName.ts"
+import type { TimelineLane } from "./LaneTimelineLane.tsx"
+import { LaneTimelineLane } from "./LaneTimelineLane.tsx"
+import type { TimelineSpan } from "./laneTimelineGeometry.ts"
+import {
+  chooseAxisTickStep,
+  formatAxisDate,
+  getIsAxisReadable,
+  toTimelineAxis,
+} from "./laneTimelineGeometry.ts"
+import { useTrackMeasurements } from "./useTrackMeasurements.ts"
+
+/**
+ * Room one tick label needs, as a multiple of the timeline's own
+ * font size.
+ *
+ * `Mon 12 Apr` is about 4.5 of them, and the number is bigger than
+ * the label looks because the two are measured against **different**
+ * sizes: the label renders at `text-xs` while this multiplies the
+ * container's own font size, which is the one the probe can read. A
+ * constant rather than a prop, because it is a fact about the label
+ * this component prints rather than a preference anybody has.
+ */
+const TICK_LABEL_SIZE = 4.5
+
+/**
+ * The narrowest a day column may get before the axis stops being
+ * worth drawing, in em.
+ *
+ * ⚠️ **The one number in here that is a taste call**, and it was
+ * moved once already. 1.25em drew a seven-day axis into a 24rem
+ * sidebar, which is 25 pixels a day: the bars were real shapes and
+ * every one of their titles was `Mi…`, so the picture was worse than
+ * the list it was chosen over. 1.75em is roughly the narrowest
+ * column that still holds a short word, which puts a month at about
+ * 1030px of component and a week in anything past a phone.
+ *
+ * The case still worth arguing about is a quarter. Ninety days wants
+ * more than 2500px and therefore falls to the Narrow View on every
+ * screen here — and 6px a day does still show a *shape*, so somebody
+ * may prefer the smear to the list. It is a prop for that reason.
+ */
+const DEFAULT_MIN_COLUMN_SIZE = 1.75
+
+/**
+ * How many bars a lane may stack before the rest are counted rather
+ * than drawn. Six is roughly a screen's worth of one lane.
+ */
+const DEFAULT_MAX_ROW_COUNT = 6
+
+export type LaneTimelineProps = {
+  className?: string
+  /**
+   * Shown when there are no lanes, or when `range` is not a pair of
+   * calendar dates. Defaults to a real `EmptyState` — *"real empty
+   * states"* is a standing requirement, and an empty timeline is
+   * what a household sees on a good week.
+   */
+  emptyState?: ReactNode
+  /**
+   * What level the lane headings are. The caller's, because only
+   * the caller knows what the timeline sits under: one directly
+   * below a page `<h1>` wants `2`. Getting it wrong is an axe
+   * `heading-order` failure and a hole in the screen-reader
+   * outline.
+   */
+  headingLevel?: 2 | 3 | 4 | 5
+  /** The timeline's accessible name. Required — it is a landmark. */
+  label: string
+  lanes: readonly TimelineLane[]
+  /**
+   * BCP-47, for the dates only. Omitted, `Intl` uses the runtime's
+   * own — which is right on a personal machine and wrong on a
+   * server, so a server render should pass one rather than let two
+   * environments disagree about what "6 Apr" looks like.
+   */
+  locale?: string
+  /** How many bars one lane may stack. Default 6. */
+  maxRowCount?: number
+  /**
+   * The narrowest a day column may get before the axis is abandoned
+   * for the Narrow View, as a multiple of the timeline's **own font
+   * size**. Default 1.75.
+   *
+   * In em rather than pixels because every length in this token set
+   * moves with the density axis: a floor pinned at 20px is generous
+   * on a desktop and clips a two-digit date on the kiosk. Same
+   * argument `Avatar` makes about a chip that stays 20px while the
+   * prose around it scales.
+   */
+  minColumnSize?: number
+  /**
+   * The days on screen. **Both ends inclusive**, like every other
+   * span in this component — a Monday-to-Sunday week is
+   * `2026-04-06` to `2026-04-12`, which is seven columns, not eight.
+   */
+  range: TimelineSpan
+}
+
+/**
+ * One horizontal lane per group, across a date axis, with anything
+ * that lasts more than a day drawn as a **bar**.
+ *
+ * ## What it is for
+ *
+ * A month grid gives every day the same box, so a thing that runs
+ * Tuesday to Friday is four separate entries and the fact that it is
+ * *one* thing is lost. Worse, every cell is the same size no matter
+ * how much is in it, so a grid cannot show that one person is
+ * carrying most of the week. A lane can: bars keep their real
+ * shape, and a lane with overlapping work stacks into rows and gets
+ * **taller**. The asymmetry then reads from across the room, before
+ * anybody counts anything.
+ *
+ * It is not a calendar. There is no event, no attendee and no
+ * recurrence in this API, because Docket wants the same shape for
+ * phases and Horizon wants it for a household — the library owns the
+ * **shape** and the app owns the **data**. What a lane holds is a
+ * `key`, a `label` and items with a `start`, an `end` and a `title`.
+ *
+ * ## `end` is INCLUSIVE, and that is the decision to know
+ *
+ * An off-by-one on a date range is invisible in both directions: a
+ * bar one day short and a bar one day long are both bars. So it is
+ * stated loudly here and again on the type — **`end` is the last day
+ * the item covers**. `2026-04-06` to `2026-04-06` is one day, and a
+ * seven-day week ends on its seventh day, not on the eighth. The
+ * alternative (a half-open interval, the way `Date` ranges and
+ * iCalendar's `DTEND` work) is the better model for *instants* and
+ * the wrong one for a human writing down when the roofers are
+ * coming: nobody says "Monday to Saturday" about a working week, so
+ * an exclusive end would make every consumer add a day on the way in
+ * and forget to on one of the paths.
+ * [Decision](../../../docs/decisions/2026-09-18-a-timeline-span-ends-on-its-last-day-and-the-axis-folds-on-measurement.md).
+ *
+ * ## The Narrow View is a LIST, not a pan surface
+ *
+ * Thirty columns have no narrow layout, and the two obvious answers
+ * are both wrong. Horizontal scrolling hides lanes behind a gesture
+ * with no affordance and fights the trackpad's own back-navigation
+ * — the same objection `Board` settled with *"no horizontal scroll,
+ * ever"*. Squeezing thirty columns into 390px gives each day 13
+ * pixels, which is not a timeline, it is a texture.
+ *
+ * So below the threshold the axis is **abandoned** rather than
+ * shrunk: each lane becomes a one-column list of its items, each one
+ * a line of text with its span written out in words. Nothing is
+ * hidden, nothing overflows, and the reading order is the one the
+ * fleet's text-heavy lists already use.
+ *
+ * ## It folds on a MEASUREMENT, not a breakpoint
+ *
+ * There is no `@media` and no `cq-` in this component, and neither
+ * could do the job: the question is not *how wide is the box* but
+ * **how wide is one day**, which is the width divided by a number
+ * that lives in the data. Thirty columns in 900px is a readable
+ * month and three hundred and sixty five columns in the same 900px
+ * is a grey smear, and no query can tell those apart. `Nav` folds
+ * its bar on a measured width for the weaker version of this
+ * reason; `useToolbarOverflow` writes the argument down.
+ *
+ * ⚠️ **It must not be sized by its own contents.** The component
+ * reads its own box to decide what to draw in it, so a shrink-
+ * wrapping parent makes the answer its own input. The root declares
+ * `container-type: inline-size` — not to query it, the same reason
+ * `Main` declares one — which forbids the element from being sized
+ * by what is inside it and makes that loop unformable. In a story
+ * this is what `align="stretch"` on the `StoryCell` is for.
+ *
+ * ## What it deliberately does not do
+ *
+ * No time of day: this is a **calendar-date** axis, so two things on
+ * one Tuesday stack rather than sit at 09:00 and 14:00. No "now"
+ * marker, no zoom, no drag to reschedule, no data. A range control
+ * belongs to the page — `DatePicker` already is one — and a bar you
+ * can drag is a write operation, which is a different component with
+ * a different decision behind it.
+ */
+export const LaneTimeline = ({
+  className,
+  emptyState,
+  headingLevel = 3,
+  label,
+  lanes,
+  locale,
+  maxRowCount = DEFAULT_MAX_ROW_COUNT,
+  minColumnSize = DEFAULT_MIN_COLUMN_SIZE,
+  range,
+}: LaneTimelineProps): ReactNode => {
+  const { fontSize, inlineSize, isMeasured, trackRef } =
+    useTrackMeasurements()
+
+  const axis = toTimelineAxis(range)
+
+  const columnCount = axis?.columnCount ?? 0
+
+  const isAxisReadable = getIsAxisReadable({
+    columnCount,
+    inlineSize,
+    isMeasured,
+    minColumnInlineSize: minColumnSize * fontSize,
+  })
+
+  const tickStep = chooseAxisTickStep({
+    columnCount,
+    inlineSize,
+    minTickInlineSize: TICK_LABEL_SIZE * fontSize,
+  })
+
+  /*
+   * An inline style, not a class. Tailwind scans source text for
+   * complete class strings, so a `grid-cols-[repeat(${n},…)]` is
+   * generated **never** — the grid silently falls back to one column
+   * and every bar lands on top of every other one, with nothing
+   * failing. `AdaptiveGrid` carries the same note about the same
+   * trap.
+   */
+  const columnTemplate = `repeat(${Math.max(columnCount, 1)}, minmax(0, 1fr))`
+
+  const rangeCaption =
+    axis &&
+    `${formatAxisDate({
+      date: getPlainDateFromDayNumber(axis.startDay),
+      locale,
+    })} to ${formatAxisDate({
+      date: getPlainDateFromDayNumber(axis.endDay),
+      locale,
+    })}`
+
+  return (
+    <section
+      aria-label={label}
+      className={toClassName(
+        "@container flex flex-col",
+        className,
+      )}
+    >
+      {/*
+       * The measuring probe, and it is load-bearing.
+       *
+       * Zero height, `aria-hidden`, and rendered in **both**
+       * layouts — it is the only element that can answer "how wide
+       * would a day column be" in the layout where no day column
+       * exists. Measuring the real track instead is a one-way door:
+       * the Narrow View unmounts it, so the width never updates and
+       * the axis can never come back when the window widens.
+       *
+       * `overflow-hidden` because the 12rem rail is wider than the
+       * whole component in the Narrow View, and a zero-height box is
+       * still allowed to give an ancestor a horizontal scrollbar.
+       */}
+      <div
+        aria-hidden="true"
+        className="grid grid-cols-[12rem_minmax(0,1fr)] gap-x-3 overflow-hidden"
+      >
+        <div />
+
+        <div className="h-0" ref={trackRef} />
+      </div>
+
+      {axis === null ? (
+        (emptyState ?? (
+          <EmptyState
+            description="This timeline has no visible date range."
+            heading="Nothing to show"
+            headingLevel={headingLevel}
+            size="sm"
+          />
+        ))
+      ) : lanes.length === 0 ? (
+        (emptyState ?? (
+          <EmptyState
+            description="Nothing has been added to this timeline yet."
+            heading="No lanes yet"
+            headingLevel={headingLevel}
+            size="sm"
+          />
+        ))
+      ) : isAxisReadable ? (
+        <>
+          <div className="grid grid-cols-[12rem_minmax(0,1fr)] items-end gap-x-3 pb-1">
+            <span
+              className="min-w-0 truncate text-content-muted text-xs"
+              title={rangeCaption ?? undefined}
+            >
+              {rangeCaption}
+            </span>
+
+            {/*
+             * `aria-hidden`, and that is a deliberate call rather
+             * than an oversight. Every bar already says its own
+             * span in words, so an axis read aloud is thirty
+             * consecutive dates in front of the content — noise
+             * that costs a screen-reader user the page. The axis is
+             * a *visual* ruler for a mark whose position a sighted
+             * reader has to measure against something.
+             */}
+            <div
+              aria-hidden="true"
+              className="grid"
+              style={{
+                gridTemplateColumns: columnTemplate,
+              }}
+            >
+              {Array.from(
+                { length: columnCount },
+                (_unused, index) => index,
+              )
+                .filter((index) => index % tickStep === 0)
+                .map((index) => (
+                  <span
+                    className="min-w-0 truncate text-content-muted text-xs"
+                    key={axis.startDay + index}
+                    style={{
+                      gridColumn: `${index + 1} / span ${Math.min(
+                        tickStep,
+                        columnCount - index,
+                      )}`,
+                    }}
+                  >
+                    {formatAxisDate({
+                      date: getPlainDateFromDayNumber(
+                        axis.startDay + index,
+                      ),
+                      locale,
+                    })}
+                  </span>
+                ))}
+            </div>
+          </div>
+
+          {lanes.map((lane, position) => (
+            <LaneTimelineLane
+              axis={axis}
+              columnTemplate={columnTemplate}
+              headingLevel={headingLevel}
+              key={lane.key}
+              lane={lane}
+              locale={locale}
+              maxRowCount={maxRowCount}
+              position={position}
+              shape="axis"
+              tickStep={tickStep}
+            />
+          ))}
+        </>
+      ) : (
+        <>
+          {/*
+           * The range still has to be said, and in the Narrow View
+           * there is no rail to say it in. Without this the list
+           * reads as "everything", which is the one thing it is
+           * not.
+           */}
+          <p className="pb-1 text-content-muted text-xs">
+            {rangeCaption}
+          </p>
+
+          {lanes.map((lane, position) => (
+            <LaneTimelineLane
+              axis={axis}
+              columnTemplate={columnTemplate}
+              headingLevel={headingLevel}
+              key={lane.key}
+              lane={lane}
+              locale={locale}
+              maxRowCount={maxRowCount}
+              position={position}
+              shape="list"
+              tickStep={tickStep}
+            />
+          ))}
+        </>
+      )}
+    </section>
+  )
+}